chore: small quick freeze modal adaptions (#847)

* fix: do not close quick freeze modal while loading * fix: remove width of Confirmations component * ui(send): monospace font for addresses * ui(send): add description to UTXOs section in confirm modal * ui(send): proper label for UTXOs on sweeps * ui(send): improve phrasing in Quick Freeze and Confirm modal * send(ui): align confirmation block with divider toggle button
joinmarket-webui · Sep 30, 2024 · 5664320 · 5664320
1 parent d2116f5
commit 5664320
Show file tree

Hide file tree

Showing 6 changed files with 49 additions and 39 deletions.
diff --git a/src/components/PaymentConfirmModal.tsx b/src/components/PaymentConfirmModal.tsx
@@ -3,15 +3,15 @@ import { Trans, useTranslation } from 'react-i18next'
 import * as rb from 'react-bootstrap'
 import Sprite from './Sprite'
 import Balance from './Balance'
-import { useSettings } from '../context/SettingsContext'
+import { Settings, useSettings } from '../context/SettingsContext'
 import { FeeValues, TxFee, useEstimatedMaxCollaboratorFee } from '../hooks/Fees'
 import { ConfirmModal, ConfirmModalProps } from './Modal'
 import { AmountSats, BitcoinAddress } from '../libs/JmWalletApi'
 import { jarInitial } from './jars/Jar'
 import { isValidNumber } from '../utils'
 import styles from './PaymentConfirmModal.module.css'
 import { Utxos } from '../context/WalletContext'
-import { SelectableUtxo, UtxoListDisplay } from './Send/ShowUtxos'
+import { UtxoListDisplay } from './Send/ShowUtxos'
 import Divider from './Divider'
 
 const feeRange: (txFee: TxFee, txFeeFactor: number) => [number, number] = (txFee, txFeeFactor) => {
@@ -58,26 +58,36 @@ const useMiningFeeText = ({ tx_fees, tx_fees_factor }: Pick<FeeValues, 'tx_fees'
   }, [t, tx_fees, tx_fees_factor])
 }
 
-type ReviewConsideredUtxosProps = {
-  utxos: SelectableUtxo[]
+type ReviewUtxosProps = Required<Pick<PaymentDisplayInfo, 'isSweep' | 'availableUtxos'>> & {
+  settings: Settings
 }
-const ReviewConsideredUtxos = ({ utxos }: ReviewConsideredUtxosProps) => {
+
+const ReviewUtxos = ({ settings, availableUtxos, isSweep }: ReviewUtxosProps) => {
   const { t } = useTranslation()
-  const settings = useSettings()
-  const [isOpen, setIsOpen] = useState<boolean>(false)
+  const [isOpen, setIsOpen] = useState<boolean>(availableUtxos.length === 1)
 
+  const allUtxosAreUsed = isSweep || availableUtxos.length === 1
   return (
     <rb.Row className="mt-2">
-      <rb.Col xs={4} md={3} className="text-end">
-        <strong>{t('show_utxos.considered_utxos')}</strong>
+      <rb.Col xs={4} md={3} className="d-flex align-items-center justify-content-end text-end">
+        <strong>
+          {allUtxosAreUsed
+            ? t('send.confirm_send_modal.label_selected_utxos', { count: availableUtxos.length })
+            : t('send.confirm_send_modal.label_eligible_utxos')}
+        </strong>
       </rb.Col>
       <rb.Col xs={8} md={9}>
         <Divider toggled={isOpen} onToggle={() => setIsOpen((current) => !current)} />
       </rb.Col>
       <rb.Collapse in={isOpen}>
-        <rb.Col xs={12} className="mt-2">
+        <rb.Col xs={12}>
+          <div className="my-2 text-start text-secondary">
+            {allUtxosAreUsed
+              ? t('send.confirm_send_modal.description_selected_utxos', { count: availableUtxos.length })
+              : t('send.confirm_send_modal.description_eligible_utxos')}
+          </div>
           <UtxoListDisplay
-            utxos={utxos}
+            utxos={availableUtxos.map((it) => ({ ...it, checked: false, selectable: false }))}
             settings={settings}
             onToggle={() => {
               // No-op since these UTXOs are only for review and are not selectable
@@ -98,7 +108,7 @@ interface PaymentDisplayInfo {
   numCollaborators?: number
   feeConfigValues?: FeeValues
   showPrivacyInfo?: boolean
-  consideredUtxos?: Utxos
+  availableUtxos?: Utxos
 }
 
 interface PaymentConfirmModalProps extends ConfirmModalProps {
@@ -115,7 +125,7 @@ export function PaymentConfirmModal({
     numCollaborators,
     feeConfigValues,
     showPrivacyInfo = true,
-    consideredUtxos = [],
+    availableUtxos = [],
   },
   children,
   ...confirmModalProps
@@ -243,8 +253,8 @@ export function PaymentConfirmModal({
             </rb.Col>
           </rb.Row>
         )}
-        {consideredUtxos.length !== 0 && (
-          <ReviewConsideredUtxos utxos={consideredUtxos.map((it) => ({ ...it, checked: false, selectable: false }))} />
+        {availableUtxos.length > 0 && (
+          <ReviewUtxos settings={settings} availableUtxos={availableUtxos} isSweep={isSweep} />
         )}
         {children && (
           <rb.Row>

diff --git a/src/components/Send/ShowUtxos.tsx b/src/components/Send/ShowUtxos.tsx
@@ -35,16 +35,12 @@ interface UtxoRowProps {
   settings: Settings
   walletInfo: WalletInfo
   t: TFunction
-  // TODO: remove
-  showBackgroundColor?: boolean
 }
 
 interface UtxoListDisplayProps {
   utxos: SelectableUtxo[]
   onToggle: (utxo: SelectableUtxo) => void
   settings: Settings
-  // TODO: remove
-  showBackgroundColor?: boolean
 }
 
 const UtxoRow = ({ utxo, onToggle, settings, walletInfo, t }: UtxoRowProps) => {
@@ -78,7 +74,7 @@ const UtxoRow = ({ utxo, onToggle, settings, walletInfo, t }: UtxoRowProps) => {
       <Cell>
         <UtxoIcon value={utxo} tags={tags} />
       </Cell>
-      <Cell className="slashed-zeroes">
+      <Cell className="font-monospace slashed-zeroes">
         <rb.OverlayTrigger
           overlay={(props) => (
             <rb.Tooltip className="slashed-zeroes" {...props}>
@@ -113,7 +109,7 @@ type SelectableUtxoTableRowData = SelectableUtxo & Pick<TableTypes.TableNode, 'i
 
 const DEFAULT_UTXO_LIST_THEME = {
   Table: `
-  --data-table-library_grid-template-columns: 2.5rem 2.5rem 17rem 3rem 12rem 1fr};
+  --data-table-library_grid-template-columns: 2.5rem 2.5rem 17rem 3.75rem 11rem 1fr};
 `,
   BaseCell: `
   padding: 0.35rem 0.25rem !important;
@@ -212,9 +208,9 @@ const ShowUtxos = ({ isOpen, onCancel, onConfirm, isLoading, utxos, alert }: Sho
     <BaseModal
       isShown={isOpen}
       onCancel={onCancel}
-      backdrop={true}
-      title={t('show_utxos.show_utxo_title')}
-      closeButton
+      title={t('show_utxos.title')}
+      backdrop={!isLoading}
+      closeButton={!isLoading}
       headerClassName=""
       titleClassName=""
     >
@@ -226,10 +222,9 @@ const ShowUtxos = ({ isOpen, onCancel, onConfirm, isLoading, utxos, alert }: Sho
           </div>
         ) : (
           <>
-            <rb.Row className="text-secondary px-3 mb-2">
-              {upperUtxos.length > 0
-                ? t('show_utxos.show_utxo_subtitle')
-                : t('show_utxos.show_utxo_subtitle_when_allutxos_are_frozen')}
+            <rb.Row className="text-secondary mb-2">
+              <div>{t('show_utxos.subtitle', { count: selectedUtxos.length })}</div>
+              <div>{t('show_utxos.text_subtitle_addon')}</div>
             </rb.Row>
             {alert && (
               <rb.Row>
@@ -274,6 +269,7 @@ const ShowUtxos = ({ isOpen, onCancel, onConfirm, isLoading, utxos, alert }: Sho
         <rb.Button
           variant="light"
           onClick={() => onCancel()}
+          disabled={isLoading}
           className="d-flex flex-1 justify-content-center align-items-center"
         >
           <Sprite symbol="cancel" width="26" height="26" />

diff --git a/src/components/Send/SourceJarSelector.tsx b/src/components/Send/SourceJarSelector.tsx
@@ -110,7 +110,7 @@ export const SourceJarSelector = ({
               return (
                 <div key={it.accountIndex}>
                   <SelectableJar
-                    tooltipText={t('show_utxos.select_utxos')}
+                    tooltipText={t('show_utxos.text_select_utxos_tooltip')}
                     isOpen={true}
                     index={it.accountIndex}
                     balance={it.calculatedAvailableBalanceInSats}

diff --git a/src/components/Send/index.tsx b/src/components/Send/index.tsx
@@ -521,7 +521,7 @@ export default function Send({ wallet }: SendProps) {
             isCoinjoin: showConfirmSendModal.isCoinJoin,
             numCollaborators: showConfirmSendModal.numCollaborators!,
             feeConfigValues: { ...feeConfigValues, tx_fees: showConfirmSendModal.txFee },
-            consideredUtxos: (walletInfo?.utxosByJar[showConfirmSendModal.sourceJarIndex!] || [])
+            availableUtxos: (walletInfo?.utxosByJar[showConfirmSendModal.sourceJarIndex!] || [])
               .filter((utxo) => !utxo.frozen)
               .sort((a, b) => a.confirmations - b.confirmations),
           }}

diff --git a/src/components/utxo/Confirmations.module.css b/src/components/utxo/Confirmations.module.css
@@ -1,10 +1,7 @@
 .confirmations {
-  width: 2rem;
   display: flex;
   flex-direction: column;
   justify-content: center;
   align-items: center;
-  padding: 0.1rem 0.2rem;
-  border-radius: 0.2rem;
   font-size: 0.75rem;
 }
diff --git a/src/i18n/locales/en/translation.json b/src/i18n/locales/en/translation.json
@@ -351,7 +351,13 @@
       "text_miner_fee_in_satspervbyte_exact": "{{ value }} sats/vByte",
       "text_miner_fee_in_satspervbyte_randomized": "{{ min }} - {{ max }} sats/vByte",
       "text_miner_fee_in_targeted_blocks_one": "High priority estimate (next block)",
-      "text_miner_fee_in_targeted_blocks_other": "Using estimate for inclusion in next {{ count }} blocks"
+      "text_miner_fee_in_targeted_blocks_other": "Using estimate for inclusion in next {{ count }} blocks",
+      "label_eligible_utxos": "Eligible UTXOs",
+      "description_eligible_utxos": "One or more of the following UTXOs will be included in the transaction: ",
+      "label_selected_utxos_one": "Selected UTXO",
+      "label_selected_utxos_other": "Selected UTXOs",
+      "description_selected_utxos_one": "The following UTXO will be included in the transaction: ",
+      "description_selected_utxos_other": "The following UTXOs will be included in the transaction: "
     },
     "confirm_abort_modal": {
       "title": "Abort payment",
@@ -717,10 +723,11 @@
     }
   },
   "show_utxos": {
-    "select_utxos": "Select UTXOs",
-    "considered_utxos": "Considered UTXOs",
-    "show_utxo_title": "Select UTXOs to be considered",
-    "show_utxo_subtitle": "The following UTXOs are considered in the transaction. Every unselected UTXO will be frozen and can be unfrozen later on.",
-    "show_utxo_subtitle_when_allutxos_are_frozen": "The following UTXOs are frozen. Please select them to be considered in the transaction."
+    "text_select_utxos_tooltip": "Select UTXOs",
+    "title": "Select eligible UTXOs",
+    "subtitle_zero": "Please select one or more UTXOs for possible inclusion in the transaction.",
+    "subtitle_one": "The selected UTXO is eligible for inclusion in the transaction.",
+    "subtitle_other": "The selected UTXOs are eligible for inclusion in the transaction.",
+    "text_subtitle_addon": "Unselected UTXOs will be frozen and can be unfrozen later anytime."
   }
 }