From 5664320107b38e73240541accc207b3bd3d6d518 Mon Sep 17 00:00:00 2001 From: Thebora Kompanioni Date: Mon, 30 Sep 2024 19:24:28 +0200 Subject: [PATCH] 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 --- src/components/PaymentConfirmModal.tsx | 40 ++++++++++++-------- src/components/Send/ShowUtxos.tsx | 22 +++++------ src/components/Send/SourceJarSelector.tsx | 2 +- src/components/Send/index.tsx | 2 +- src/components/utxo/Confirmations.module.css | 3 -- src/i18n/locales/en/translation.json | 19 +++++++--- 6 files changed, 49 insertions(+), 39 deletions(-) diff --git a/src/components/PaymentConfirmModal.tsx b/src/components/PaymentConfirmModal.tsx index 73ce0fd5..d5202ad4 100644 --- a/src/components/PaymentConfirmModal.tsx +++ b/src/components/PaymentConfirmModal.tsx @@ -3,7 +3,7 @@ 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' @@ -11,7 +11,7 @@ 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> & { + settings: Settings } -const ReviewConsideredUtxos = ({ utxos }: ReviewConsideredUtxosProps) => { + +const ReviewUtxos = ({ settings, availableUtxos, isSweep }: ReviewUtxosProps) => { const { t } = useTranslation() - const settings = useSettings() - const [isOpen, setIsOpen] = useState(false) + const [isOpen, setIsOpen] = useState(availableUtxos.length === 1) + const allUtxosAreUsed = isSweep || availableUtxos.length === 1 return ( - - {t('show_utxos.considered_utxos')} + + + {allUtxosAreUsed + ? t('send.confirm_send_modal.label_selected_utxos', { count: availableUtxos.length }) + : t('send.confirm_send_modal.label_eligible_utxos')} + setIsOpen((current) => !current)} /> - + +
+ {allUtxosAreUsed + ? t('send.confirm_send_modal.description_selected_utxos', { count: availableUtxos.length }) + : t('send.confirm_send_modal.description_eligible_utxos')} +
({ ...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({ )} - {consideredUtxos.length !== 0 && ( - ({ ...it, checked: false, selectable: false }))} /> + {availableUtxos.length > 0 && ( + )} {children && ( diff --git a/src/components/Send/ShowUtxos.tsx b/src/components/Send/ShowUtxos.tsx index 51898b34..3b76144d 100755 --- 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) => { - + ( @@ -113,7 +109,7 @@ type SelectableUtxoTableRowData = SelectableUtxo & Pick @@ -226,10 +222,9 @@ const ShowUtxos = ({ isOpen, onCancel, onConfirm, isLoading, utxos, alert }: Sho ) : ( <> - - {upperUtxos.length > 0 - ? t('show_utxos.show_utxo_subtitle') - : t('show_utxos.show_utxo_subtitle_when_allutxos_are_frozen')} + +
{t('show_utxos.subtitle', { count: selectedUtxos.length })}
+
{t('show_utxos.text_subtitle_addon')}
 {alert && ( @@ -274,6 +269,7 @@ const ShowUtxos = ({ isOpen, onCancel, onConfirm, isLoading, utxos, alert }: Sho onCancel()} + disabled={isLoading} className="d-flex flex-1 justify-content-center align-items-center" > diff --git a/src/components/Send/SourceJarSelector.tsx b/src/components/Send/SourceJarSelector.tsx index 34a06161..07be79cf 100644 --- a/src/components/Send/SourceJarSelector.tsx +++ b/src/components/Send/SourceJarSelector.tsx @@ -110,7 +110,7 @@ export const SourceJarSelector = ({ return (
!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 index 26bbd2cc..8409d758 100644 --- 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 index 701aa507..f3698e40 100644 --- 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." } }