Show considered UTXOs before performing sweep transaction

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 {

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 &&

src/components/Send/index.tsx

@@ -12,14 +12,16 @@ 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'
 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>
   )

src/i18n/locales/en/translation.json

@@ -703,7 +703,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."