diff --git a/src/components/Send/SendForm.tsx b/src/components/Send/SendForm.tsx index 5d866a05..d766d86a 100644 --- a/src/components/Send/SendForm.tsx +++ b/src/components/Send/SendForm.tsx @@ -26,7 +26,7 @@ import { isValidNumCollaborators, } from './helpers' import { AccountBalanceSummary } from '../../context/BalanceSummary' -import { WalletInfo, CurrentWallet } from '../../context/WalletContext' +import { WalletInfo, CurrentWallet, Utxos } from '../../context/WalletContext' import { useSettings } from '../../context/SettingsContext' import styles from './SendForm.module.css' import { TxFeeInputField, validateTxFee } from '../settings/TxFeeInputField' @@ -214,6 +214,7 @@ export interface SendFormValues { txFee?: TxFee isCoinJoin: boolean numCollaborators?: number + consideredUtxos?: Utxos } interface InnerSendFormProps { diff --git a/src/components/Send/SourceJarSelector.tsx b/src/components/Send/SourceJarSelector.tsx index a6e8e516..c193920e 100644 --- a/src/components/Send/SourceJarSelector.tsx +++ b/src/components/Send/SourceJarSelector.tsx @@ -3,7 +3,7 @@ import { useField, useFormikContext } from 'formik' import * as rb from 'react-bootstrap' import { jarFillLevel, SelectableJar } from '../jars/Jar' import { noop } from '../../utils' -import { WalletInfo, CurrentWallet, useReloadCurrentWalletInfo, Utxos } from '../../context/WalletContext' +import { WalletInfo, CurrentWallet, useReloadCurrentWalletInfo, Utxo, Utxos } from '../../context/WalletContext' import styles from './SourceJarSelector.module.css' import { ShowUtxos } from './ShowUtxos' import { useTranslation } from 'react-i18next' @@ -37,6 +37,7 @@ export const SourceJarSelector = ({ }: SourceJarSelectorProps) => { const { t } = useTranslation() const [field] = useField<JarIndex>(name) + const [consideredUtxos] = useField<Utxos | undefined>('consideredUtxos') const form = useFormikContext<any>() const reloadCurrentWalletInfo = useReloadCurrentWalletInfo() @@ -147,6 +148,7 @@ export const SourceJarSelector = ({ variant={it.accountIndex === field.value ? variant : undefined} onClick={(jarIndex) => { form.setFieldValue(field.name, jarIndex, true) + form.setFieldValue(consideredUtxos.name, undefined, false) if ( it.accountIndex === field.value && !disabled && diff --git a/src/components/Send/index.tsx b/src/components/Send/index.tsx index 7f6dd561..00032f52 100644 --- a/src/components/Send/index.tsx +++ b/src/components/Send/index.tsx @@ -12,7 +12,7 @@ import { scrollToTop } from '../../utils' import { PaymentConfirmModal } from '../PaymentConfirmModal' import FeeConfigModal, { FeeConfigSectionKey } from '../settings/FeeConfigModal' import { FeeValues, TxFee, useFeeConfigValues } from '../../hooks/Fees' -import { useReloadCurrentWalletInfo, useCurrentWalletInfo, CurrentWallet } from '../../context/WalletContext' +import { useReloadCurrentWalletInfo, useCurrentWalletInfo, CurrentWallet, Utxos } from '../../context/WalletContext' import { useServiceInfo, useReloadServiceInfo } from '../../context/ServiceInfoContext' import { useLoadConfigValue } from '../../context/ServiceConfigContext' import { useWaitForUtxosToBeSpent } from '../../hooks/WaitForUtxosToBeSpent' @@ -20,6 +20,8 @@ import { routes } from '../../constants/routes' import { JM_MINIMUM_MAKERS_DEFAULT } from '../../constants/config' import { initialNumCollaborators } from './helpers' +import { Divider, UtxoListDisplay } from './ShowUtxos' +import { useSettings } from '../../context/SettingsContext' const INITIAL_DESTINATION = null const INITIAL_SOURCE_JAR_INDEX = null @@ -79,6 +81,29 @@ const createInitialValues = (numCollaborators: number, feeConfigValues: FeeValue } } +type ReviewConsideredUtxosProps = { + utxos: Utxos +} +const ReviewConsideredUtxos = ({ utxos }: ReviewConsideredUtxosProps) => { + const { t } = useTranslation() + const settings = useSettings() + const [isOpen, setIsOpen] = useState<boolean>(false) + + return ( + <rb.Row className="mt-3"> + <rb.Col xs={4} md={3} className="text-end"> + <strong>{t('show_utxos.considered_utxos')}</strong> + </rb.Col> + <rb.Col xs={8} md={9}> + <Divider isState={isOpen} setIsState={setIsOpen} className="mb-3" /> + {isOpen && ( + <UtxoListDisplay utxos={utxos} settings={settings} showRadioButton={false} showBackgroundColor={false} /> + )} + </rb.Col> + </rb.Row> + ) +} + type SendProps = { wallet: CurrentWallet } @@ -516,7 +541,11 @@ export default function Send({ wallet }: SendProps) { numCollaborators: showConfirmSendModal.numCollaborators!, feeConfigValues: { ...feeConfigValues, tx_fees: showConfirmSendModal.txFee }, }} - /> + > + {showConfirmSendModal.amount!.isSweep && showConfirmSendModal.consideredUtxos && ( + <ReviewConsideredUtxos utxos={showConfirmSendModal.consideredUtxos} /> + )} + </PaymentConfirmModal> )} </div> ) diff --git a/src/i18n/locales/en/translation.json b/src/i18n/locales/en/translation.json index 1df8f5cc..c425b388 100644 --- a/src/i18n/locales/en/translation.json +++ b/src/i18n/locales/en/translation.json @@ -707,7 +707,7 @@ }, "show_utxos": { "select_utxos": "Select UTXOs", - "selected_utxos": "Selected 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."