773 UI Show Considered UTXOs before performing transaction

docker/regtest/docker-compose.yml

@@ -92,51 +92,50 @@ services:
   bitcoind:
     container_name: jm_regtest_bitcoind
     restart: unless-stopped
-    image: btcpayserver/bitcoin:26.0
-    environment:
-      BITCOIN_NETWORK: regtest
-      BITCOIN_WALLETDIR: "/walletdata"
-      BITCOIN_EXTRA_ARGS: |
-        rpcport=43782
-        rpcbind=0.0.0.0
-        rpcallowip=0.0.0.0/0
-        port=39388
-        whitelist=0.0.0.0/0
-        maxmempool=500
-        debug=rpc
-        logips=0
-        networkactive=1
-        dnsseed=0
-        uacomment=jmdevbitcoindregtest
-        printpriority=1
-        logtimemicros=1
-        zmqpubrawblock=tcp://0.0.0.0:28332
-        zmqpubrawtx=tcp://0.0.0.0:28333
-        zmqpubhashblock=tcp://0.0.0.0:28334
-        dns=0
-        # do not automatically create tor hidden service
-        listenonion=0
-        # rpcauth (user=regtest; password=regtest)
-        rpcauth=regtest:20b58677979ad9d3cf4b78b1d6e85e44$$2ec3e1e1c00c7c58d7aff1d4bf96e4a984ea1af5d676d862fd0faa857a1d4d7c
-        # rpcauth (user=joinmarket; password=joinmarket)
-        rpcauth=joinmarket:260b4c5b1fbd09d75a4aabf90226282f$$76e170af088d43a588992cdd5e7bae2242b03c33aa672cccfd1fb75f9281299e
-        # rpcauth (user=joinmarket2; password=joinmarket2)
-        rpcauth=joinmarket2:521bf9f4468529d49c0a41f9c9f8fdbf$$63ae94a73d2aa45e7ee756945d9b1e469f9873ce026b815d676a748f777e0b8d
-        # rpcauth (user=joinmarket3; password=joinmarket3)
-        rpcauth=joinmarket3:85d4beaa74540c3b08f4fef50d74a59e$$3033c779ea4bfd02a1f3403bc4d012f3e6d19b355f74c5e8de1d3439979d5e4b
-        # legacy wallet is being deprecated in v26: see https://github.com/bitcoin/bitcoin/blob/master/doc/release-notes/release-notes-26.0.md#wallet
-        deprecatedrpc=create_bdb
+    image: polarlightning/bitcoind:27.0
+    command:
+      # rpcauth (user=regtest; password=regtest)
+      # rpcauth (user=joinmarket; password=joinmarket)
+      # rpcauth (user=joinmarket2; password=joinmarket2)
+      # rpcauth (user=joinmarket3; password=joinmarket3)
+      -rpcauth=regtest:20b58677979ad9d3cf4b78b1d6e85e44$$2ec3e1e1c00c7c58d7aff1d4bf96e4a984ea1af5d676d862fd0faa857a1d4d7c
+      -rpcauth=joinmarket:260b4c5b1fbd09d75a4aabf90226282f$$76e170af088d43a588992cdd5e7bae2242b03c33aa672cccfd1fb75f9281299e
+      -rpcauth=joinmarket2:521bf9f4468529d49c0a41f9c9f8fdbf$$63ae94a73d2aa45e7ee756945d9b1e469f9873ce026b815d676a748f777e0b8d
+      -rpcauth=joinmarket3:85d4beaa74540c3b08f4fef50d74a59e$$3033c779ea4bfd02a1f3403bc4d012f3e6d19b355f74c5e8de1d3439979d5e4b
+      -datadir=/home/bitcoin/data
+      -walletdir=/home/bitcoin/walletdata
+      -regtest=1
+      -server=1
+      -port=39388
+      -rpcport=43782
+      -rpcbind=0.0.0.0
+      -rpcallowip=0.0.0.0/0
+      -whitelist=0.0.0.0/0
+      -maxmempool=500
+      -debug=rpc
+      -logips=0
+      -networkactive=1
+      -dnsseed=0
+      -uacomment=jmdevbitcoindregtest
+      -printpriority=1
+      -logtimemicros=1
+      -zmqpubrawblock=tcp://0.0.0.0:28332
+      -zmqpubrawtx=tcp://0.0.0.0:28333
+      -zmqpubhashblock=tcp://0.0.0.0:28334
+      -dns=0
+      -listenonion=0
+      -deprecatedrpc=create_bdb
     expose:
-      - 43782 # RPC
       - 39388 # P2P
+      - 43782 # RPC
       - 28332 # ZMQ
       - 28333 # ZMQ
       - 28334 # ZMQ
     ports:
       - "17782:43782"
     volumes:
-      - "bitcoin_datadir:/data"
-      - "bitcoin_wallet_datadir:/walletdata"
+      - "bitcoin_datadir:/home/bitcoin/data"
+      - "bitcoin_wallet_datadir:/home/bitcoin/walletdata"
 
   bitcoind_regtest_initializer:
       container_name: jm_regtest_bitcoind_initializer

docker/regtest/mine-block.sh

@@ -15,4 +15,4 @@ ADDRESS=${2:-bcrt1qrnz0thqslhxu86th069r9j6y7ldkgs2tzgf5wx} # default to a "rando
 [ "$BLOCKS" -ge 1 ] || die "Invalid parameter: 'blocks' must be a positve integer"
 [ -z "${ADDRESS-}" ] && die "Missing required parameter: 'address'"
 
-docker exec -t jm_regtest_bitcoind bitcoin-cli -datadir=/data generatetoaddress "$BLOCKS" "$ADDRESS"
+docker exec -t jm_regtest_bitcoind bitcoin-cli -datadir=/home/bitcoin/data -regtest -rpcport=43782 generatetoaddress "$BLOCKS" "$ADDRESS"

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/MainWalletView.tsx

@@ -148,18 +148,29 @@ export default function MainWalletView({ wallet }: MainWalletViewProps) {
         <rb.Row>
           <WalletHeaderRescanning walletName={wallet.displayName} isLoading={isLoading} />
         </rb.Row>
+      ) : !currentWalletInfo || isLoading ? (
+        <rb.Row>
+          <WalletHeaderPlaceholder />
+        </rb.Row>
       ) : (
-        <rb.Row onClick={() => settingsDispatch({ showBalance: !settings.showBalance })} className="cursor-pointer">
-          {!currentWalletInfo || isLoading ? (
-            <WalletHeaderPlaceholder />
-          ) : (
-            <WalletHeader
-              walletName={wallet.displayName}
-              balance={currentWalletInfo.balanceSummary.calculatedTotalBalanceInSats}
-              unit={settings.unit}
-              showBalance={settings.showBalance}
-            />
-          )}
+        <rb.Row
+          className="cursor-pointer"
+          onClick={() => {
+            if (!settings.showBalance) {
+              settingsDispatch({ unit: 'BTC', showBalance: true })
+            } else if (settings.unit === 'BTC') {
+              settingsDispatch({ unit: 'sats', showBalance: true })
+            } else {
+              settingsDispatch({ unit: 'BTC', showBalance: false })
+            }
+          }}
+        >
+          <WalletHeader
+            walletName={wallet.displayName}
+            balance={currentWalletInfo.balanceSummary.calculatedTotalBalanceInSats}
+            unit={settings.unit}
+            showBalance={settings.showBalance}
+          />
         </rb.Row>
       )}
       <div className={styles.walletBody}>

src/components/Modal.tsx

@@ -10,6 +10,9 @@ type BaseModalProps = {
   onCancel: () => void
   backdrop?: rb.ModalProps['backdrop']
   size?: rb.ModalProps['size']
+  showCloseButton?: boolean
+  headerClassName?: string
+  titleClassName?: string
 }
 const BaseModal = ({
   isShown,
@@ -18,6 +21,9 @@ const BaseModal = ({
   onCancel,
   size,
   backdrop = 'static',
+  showCloseButton = false,
+  headerClassName,
+  titleClassName,
 }: PropsWithChildren<BaseModalProps>) => {
   return (
     <rb.Modal
@@ -31,8 +37,8 @@ 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={`${styles['modal-header']} ${headerClassName}`} closeButton={showCloseButton}>
+        <rb.Modal.Title className={`${styles['modal-title']} ${titleClassName}`}>{title}</rb.Modal.Title>
       </rb.Modal.Header>
       {children}
     </rb.Modal>
@@ -65,9 +71,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 +97,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 && isSweep && (
+          <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/AmountInputField.tsx

@@ -1,4 +1,4 @@
-import { useRef } from 'react'
+import { useEffect, useRef } from 'react'
 import { useTranslation } from 'react-i18next'
 import * as rb from 'react-bootstrap'
 import { useField, useFormikContext } from 'formik'
@@ -35,6 +35,25 @@ export const AmountInputField = ({
   const form = useFormikContext<any>()
   const ref = useRef<HTMLInputElement>(null)
 
+  //Effect to change the field value whenever the sourceJarBalance changes (sourceJarBalance will change when quick freeze/unfreeze is performed or different source jar is selected)
+  useEffect(() => {
+    if (!sourceJarBalance) return
+
+    const currentValue = formatBtcDisplayValue(sourceJarBalance.calculatedAvailableBalanceInSats)
+
+    if (field.value?.isSweep && field.value.displayValue !== currentValue) {
+      form.setFieldValue(
+        field.name,
+        {
+          value: 0,
+          isSweep: true,
+          displayValue: formatBtcDisplayValue(sourceJarBalance.calculatedAvailableBalanceInSats),
+        },
+        true,
+      )
+    }
+  }, [sourceJarBalance, field, form])
+
   return (
     <>
       <rb.Form.Group className="mb-4" controlId={name}>