773 UI Show Considered UTXOs before performing transaction

src/components/Balance.tsx

@@ -39,23 +39,28 @@ interface BalanceComponentProps {
   symbol?: JSX.Element
   showSymbol?: boolean
   frozen?: boolean
+  isColorChange?: boolean
+  frozenSymbol?: boolean
 }
 
 const BalanceComponent = ({
   symbol,
   showSymbol = true,
   frozen = false,
+  isColorChange = false,
+  frozenSymbol = true,
   children,
 }: PropsWithChildren<BalanceComponentProps>) => {
   return (
     <span
-      className={classNames(styles.balance, 'balance-hook', 'd-inline-flex align-items-center', {
+      className={classNames('balance-hook', 'd-inline-flex align-items-center', {
         [styles.frozen]: frozen,
+        [styles.balance]: !isColorChange,
       })}
     >
       {children}
       {showSymbol && symbol}
-      {frozen && FROZEN_SYMBOL}
+      {frozen && frozenSymbol && FROZEN_SYMBOL}
     </span>
   )
 }
@@ -75,7 +80,9 @@ const BitcoinBalance = ({ value, ...props }: BitcoinBalanceProps) => {
   return (
     <BalanceComponent symbol={BTC_SYMBOL} {...props}>
       <span
-        className={`${styles.bitcoinAmount} slashed-zeroes`}
+        className={classNames(`slashed-zeroes`, {
+          [styles.bitcoinAmount]: !props.isColorChange,
+        })}
         data-testid="bitcoin-amount"
         data-integer-part-is-zero={integerPartIsZero}
         data-fractional-part-starts-with-zero={fractionalPartStartsWithZero}
@@ -101,7 +108,11 @@ type SatsBalanceProps = Omit<BalanceComponentProps, 'symbol'> & { value: number
 const SatsBalance = ({ value, ...props }: SatsBalanceProps) => {
   return (
     <BalanceComponent symbol={SAT_SYMBOL} {...props}>
-      <span className={`${styles.satsAmount} slashed-zeroes`} data-testid="sats-amount" data-raw-value={value}>
+      <span
+        className={classNames(`slashed-zeroes`, { [styles.satsAmount]: !props.isColorChange })}
+        data-testid="sats-amount"
+        data-raw-value={value}
+      >
         {formatSats(value)}
       </span>
     </BalanceComponent>

src/components/Modal.tsx

@@ -10,6 +10,7 @@ type BaseModalProps = {
   onCancel: () => void
   backdrop?: rb.ModalProps['backdrop']
   size?: rb.ModalProps['size']
+  showCloseButtonAndRemoveClassName?: boolean
 }
 const BaseModal = ({
   isShown,
@@ -18,6 +19,7 @@ const BaseModal = ({
   onCancel,
   size,
   backdrop = 'static',
+  showCloseButtonAndRemoveClassName = false,
 }: PropsWithChildren<BaseModalProps>) => {
   return (
     <rb.Modal
@@ -31,8 +33,11 @@ const BaseModal = ({
       size={size}
       className={styles.modal}
     >
-      <rb.Modal.Header className={styles['modal-header']}>
-        <rb.Modal.Title className={styles['modal-title']}>{title}</rb.Modal.Title>
+      <rb.Modal.Header
+        className={!showCloseButtonAndRemoveClassName && styles['modal-header']}
+        closeButton={showCloseButtonAndRemoveClassName}
+      >
+        <rb.Modal.Title className={!showCloseButtonAndRemoveClassName && styles['modal-title']}>{title}</rb.Modal.Title>
       </rb.Modal.Header>
       {children}
     </rb.Modal>
@@ -65,9 +70,18 @@ const InfoModal = ({
 
 export type ConfirmModalProps = BaseModalProps & {
   onConfirm: () => void
+  disabled?: boolean
+  confirmVariant?: string
 }
 
-const ConfirmModal = ({ children, onCancel, onConfirm, ...baseModalProps }: PropsWithChildren<ConfirmModalProps>) => {
+const ConfirmModal = ({
+  children,
+  onCancel,
+  onConfirm,
+  disabled = false,
+  confirmVariant = 'outline-dark',
+  ...baseModalProps
+}: PropsWithChildren<ConfirmModalProps>) => {
   const { t } = useTranslation()
 
   return (
@@ -82,7 +96,7 @@ const ConfirmModal = ({ children, onCancel, onConfirm, ...baseModalProps }: Prop
           <Sprite symbol="cancel" width="26" height="26" />
           <div>{t('modal.confirm_button_reject')}</div>
         </rb.Button>
-        <rb.Button variant="outline-dark" onClick={() => onConfirm()}>
+        <rb.Button variant={confirmVariant} onClick={() => onConfirm()} disabled={disabled}>
           {t('modal.confirm_button_accept')}
         </rb.Button>
       </rb.Modal.Footer>

src/components/PaymentConfirmModal.tsx

@@ -64,6 +64,7 @@ interface PaymentDisplayInfo {
   numCollaborators?: number
   feeConfigValues?: FeeValues
   showPrivacyInfo?: boolean
+  showSelectedUtxos?: boolean
 }
 
 interface PaymentConfirmModalProps extends ConfirmModalProps {
@@ -80,6 +81,7 @@ export function PaymentConfirmModal({
     numCollaborators,
     feeConfigValues,
     showPrivacyInfo = true,
+    showSelectedUtxos = false,
   },
   children,
   ...confirmModalProps
@@ -207,7 +209,17 @@ export function PaymentConfirmModal({
             </rb.Col>
           </rb.Row>
         )}
-        {children && (
+        {showSelectedUtxos && (
+          <rb.Row className="mt-3">
+            <rb.Col xs={4} md={3} className="text-end">
+              <strong>{t('show_utxos.selected_utxos')}</strong>
+            </rb.Col>
+            <rb.Col xs={8} md={9}>
+              {children}
+            </rb.Col>
+          </rb.Row>
+        )}
+        {!showSelectedUtxos && children && (
           <rb.Row>
             <rb.Col xs={12}>{children}</rb.Col>
           </rb.Row>

src/components/Send/SendForm.tsx

@@ -26,7 +26,7 @@ import {
   isValidNumCollaborators,
 } from './helpers'
 import { AccountBalanceSummary } from '../../context/BalanceSummary'
-import { WalletInfo } from '../../context/WalletContext'
+import { WalletInfo, CurrentWallet, Utxo } from '../../context/WalletContext'
 import { useSettings } from '../../context/SettingsContext'
 import styles from './SendForm.module.css'
 import { TxFeeInputField, validateTxFee } from '../settings/TxFeeInputField'
@@ -214,13 +214,15 @@ export interface SendFormValues {
   txFee?: TxFee
   isCoinJoin: boolean
   numCollaborators?: number
+  selectedUtxos?: Array<Utxo>
 }
 
 interface InnerSendFormProps {
   props: FormikProps<SendFormValues>
   className?: string
   isLoading: boolean
   walletInfo?: WalletInfo
+  wallet: CurrentWallet
   loadNewWalletAddress: (props: { signal: AbortSignal; jarIndex: JarIndex }) => Promise<Api.BitcoinAddress>
   minNumCollaborators: number
   feeConfigValues?: FeeValues
@@ -233,6 +235,7 @@ const InnerSendForm = ({
   className,
   isLoading,
   walletInfo,
+  wallet,
   loadNewWalletAddress,
   minNumCollaborators,
   feeConfigValues,
@@ -272,6 +275,7 @@ const InnerSendForm = ({
           name="sourceJarIndex"
           label={t('send.label_source_jar')}
           walletInfo={walletInfo}
+          wallet={wallet}
           isLoading={isLoading}
           disabled={disabled}
           variant={showCoinjoinPreconditionViolationAlert ? 'warning' : 'default'}
@@ -375,6 +379,7 @@ type SendFormProps = Omit<InnerSendFormProps, 'props' | 'className'> & {
   onSubmit: (values: SendFormValues) => Promise<void>
   formRef?: React.Ref<FormikProps<SendFormValues>>
   blurred?: boolean
+  wallet: CurrentWallet
 }
 
 export const SendForm = ({
@@ -383,6 +388,7 @@ export const SendForm = ({
   formRef,
   blurred = false,
   walletInfo,
+  wallet,
   minNumCollaborators,
   ...innerProps
 }: SendFormProps) => {
@@ -446,6 +452,7 @@ export const SendForm = ({
             props={props}
             className={blurred ? styles.blurred : undefined}
             walletInfo={walletInfo}
+            wallet={wallet}
             minNumCollaborators={minNumCollaborators}
             {...innerProps}
           />

src/components/Send/ShowUtxos.module.css

@@ -0,0 +1,79 @@
+.joinedUtxoAndCjout {
+  background-color: #27ae600d !important;
+  color: #27ae60 !important;
+}
+
+.frozenUtxo {
+  background-color: #2d9cdb0d !important;
+  color: #2d9cdb !important;
+}
+
+.depositUtxo {
+  background-color: none !important;
+  color: var(--bs-modal-color) !important;
+}
+
+.changeAndReuseUtxo {
+  background-color: #eb57570d !important;
+  color: #eb5757 !important;
+}
+
+.subTitle {
+  color: #777777 !important;
+}
+
+.utxoTagDeposit {
+  color: #999999;
+  border: 1px solid #bbbbbb;
+  background-color: #dedede !important;
+  border-radius: 0.35rem;
+  padding: 0rem 0.25rem;
+}
+
+.utxoTagJoinedAndCjout {
+  border: 1px solid #27ae60;
+  background-color: #c6eed7 !important;
+  border-radius: 0.35rem;
+  padding: 0rem 0.25rem;
+}
+
+.utxoTagFreeze {
+  border: 1px solid #2d9cdb;
+  background-color: #bce7ff !important;
+  border-radius: 0.35rem;
+  padding: 0rem 0.25rem;
+}
+
+.utxoTagChangeAndReuse {
+  border: 1px solid #eb5757;
+  background-color: #fac7c7 !important;
+  border-radius: 0.35rem;
+  padding: 0rem 0.25rem;
+}
+
+.squareToggleButton {
+  appearance: none;
+  width: 22px;
+  height: 22px;
+  border-radius: 3px;
+  border: 1px solid var(--bs-body-color);
+  margin-top: 0.45rem;
+}
+
+.selected {
+  visibility: visible !important;
+  background-color: var(--bs-body-color);
+}
+
+.squareFrozenToggleButton {
+  appearance: none;
+  width: 22px;
+  height: 22px;
+  border-radius: 3px;
+  border: 1px solid #2d9cdb;
+  margin-top: 0.45rem;
+}
+
+.utxoListDisplayHeight {
+  max-height: 17.6rem;
+}