Introduced customTheme in UtxoListDisplay and update UTXO handling lo…

…gic to align with recent changes in PR #802
joinmarket-webui · Aug 17, 2024 · 9a7783e · 9a7783e
1 parent 3447800
commit 9a7783e
Show file tree

Hide file tree

Showing 3 changed files with 94 additions and 33 deletions.
diff --git a/src/components/Send/ShowUtxos.tsx b/src/components/Send/ShowUtxos.tsx
@@ -33,13 +33,19 @@ interface UtxoRowProps {
   showBackgroundColor: boolean
   walletInfo: WalletInfo
   t: TFunction
+  disableCheckboxCell?: boolean
 }
 
 interface UtxoListDisplayProps {
   utxos: SelectableUtxo[]
   onToggle: (utxo: SelectableUtxo) => void
   settings: Settings
   showBackgroundColor: boolean
+  customTheme?: {
+    Table: string
+    BaseCell: string
+  }
+  disableCheckboxCell?: boolean
 }
 
 // Utility function to Identifies Icons
@@ -101,7 +107,15 @@ const Confirmations = ({ value }: { value: ConfirmationFormat }) =>
     </div>
   )
 
-const UtxoRow = ({ utxo, onToggle, showBackgroundColor, settings, walletInfo, t }: UtxoRowProps) => {
+const UtxoRow = ({
+  utxo,
+  onToggle,
+  showBackgroundColor,
+  settings,
+  walletInfo,
+  t,
+  disableCheckboxCell = false,
+}: UtxoRowProps) => {
   const address = useMemo(() => shortenStringMiddle(utxo.address, 16), [utxo.address])
   const confFormat = useMemo(() => formatConfirmations(utxo.confirmations), [utxo.confirmations])
   const tag = useMemo(() => utxoTags(utxo, walletInfo, t), [utxo, walletInfo, t])
@@ -123,20 +137,22 @@ const UtxoRow = ({ utxo, onToggle, showBackgroundColor, settings, walletInfo, t
       })}
       onClick={() => utxo.selectable && onToggle(utxo)}
     >
-      <Cell>
-        {utxo.selectable && (
-          <input
-            id={`utxo-checkbox-${utxo.utxo}`}
-            type="checkbox"
-            checked={utxo.checked}
-            disabled={!utxo.selectable}
-            onChange={() => utxo.selectable && onToggle(utxo)}
-            className={classNames(utxo.frozen ? styles.squareFrozenToggleButton : styles.squareToggleButton, {
-              [styles.selected]: utxo.checked,
-            })}
-          />
-        )}
-      </Cell>
+      {!disableCheckboxCell && (
+        <Cell>
+          {utxo.selectable && (
+            <input
+              id={`utxo-checkbox-${utxo.utxo}`}
+              type="checkbox"
+              checked={utxo.checked}
+              disabled={!utxo.selectable}
+              onChange={() => utxo.selectable && onToggle(utxo)}
+              className={classNames(utxo.frozen ? styles.squareFrozenToggleButton : styles.squareToggleButton, {
+                [styles.selected]: utxo.checked,
+              })}
+            />
+          )}
+        </Cell>
+      )}
       <Cell>
         <Sprite symbol={icon} width="23px" height="23px" />
       </Cell>
@@ -166,11 +182,18 @@ type SelectableUtxoTableRowData = SelectableUtxo & {
   // tags?: { tag: string; color: string }[]
 } & Pick<TableTypes.TableNode, 'id'>
 
-const UtxoListDisplay = ({ utxos, onToggle, settings, showBackgroundColor = true }: UtxoListDisplayProps) => {
+const UtxoListDisplay = ({
+  utxos,
+  onToggle,
+  settings,
+  showBackgroundColor = true,
+  customTheme,
+  disableCheckboxCell = false,
+}: UtxoListDisplayProps) => {
   const { t } = useTranslation()
   const walletInfo = useCurrentWalletInfo()
 
-  const TABLE_THEME = {
+  const defaultTheme = {
     Table: `
     --data-table-library_grid-template-columns: 3.5rem 2.5rem 12rem 2fr 3fr 10rem;
     @media only screen and (min-width: 768px) {
@@ -182,7 +205,7 @@ const UtxoListDisplay = ({ utxos, onToggle, settings, showBackgroundColor = true
     margin: 0.15rem 0px !important;
   `,
   }
-  const tableTheme = useTheme(TABLE_THEME)
+  const tableTheme = useTheme(customTheme ?? defaultTheme)
 
   const tableData: TableTypes.Data<SelectableUtxoTableRowData> = useMemo(
     () => ({
@@ -213,6 +236,7 @@ const UtxoListDisplay = ({ utxos, onToggle, settings, showBackgroundColor = true
                     settings={settings}
                     walletInfo={walletInfo}
                     t={t}
+                    disableCheckboxCell={disableCheckboxCell}
                   />
                 )
               })}
@@ -223,7 +247,7 @@ const UtxoListDisplay = ({ utxos, onToggle, settings, showBackgroundColor = true
   )
 }
 
-type SelectableUtxo = Utxo & { checked: boolean; selectable: boolean }
+export type SelectableUtxo = Utxo & { checked: boolean; selectable: boolean }
 
 // TODO: rename to QuickFreezeUtxosModal?
 const ShowUtxos = ({ isOpen, onCancel, onConfirm, isLoading, utxos, alert }: ShowUtxosProps) => {
@@ -344,4 +368,4 @@ const ShowUtxos = ({ isOpen, onCancel, onConfirm, isLoading, utxos, alert }: Sho
   )
 }
 
-export { ShowUtxos }
+export { ShowUtxos, UtxoListDisplay }
diff --git 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, Utxo, Utxos } from '../../context/WalletContext'
+import { WalletInfo, CurrentWallet, useReloadCurrentWalletInfo, Utxos } from '../../context/WalletContext'
 import styles from './SourceJarSelector.module.css'
 import { ShowUtxos } from './ShowUtxos'
 import { useTranslation } from 'react-i18next'
@@ -98,7 +98,20 @@ export const SourceJarSelector = ({
         ])
 
         if (res.length !== 0) {
-          await reloadCurrentWalletInfo.reloadUtxos({ signal: abortCtrl.signal })
+          const allUtxosData = await reloadCurrentWalletInfo.reloadUtxos({ signal: abortCtrl.signal })
+          if (allUtxosData) {
+            const selectedUtxos = allUtxosData.utxos
+              .filter((utxo) => utxo.mixdepth === field.value && !utxo.frozen)
+              .map((utxo) => utxo.utxo)
+            form.setFieldValue(consideredUtxos.name, selectedUtxos, true)
+          }
+        } else {
+          if (walletInfo) {
+            const selectedUtxos = walletInfo.utxosByJar[field.value]
+              .filter((utxo) => !utxo.frozen)
+              .map((utxo) => utxo.utxo)
+            form.setFieldValue(consideredUtxos.name, selectedUtxos, true)
+          }
         }
 
         setShowUtxos(undefined)
@@ -107,7 +120,7 @@ export const SourceJarSelector = ({
         setShowUtxos({ ...showUtxos, isLoading: false, alert: { variant: 'danger', message: err.message } })
       }
     },
-    [showUtxos, wallet, reloadCurrentWalletInfo],
+    [showUtxos, wallet, reloadCurrentWalletInfo, field, form, walletInfo, consideredUtxos],
   )
 
   return (

diff --git a/src/components/Send/index.tsx b/src/components/Send/index.tsx
@@ -12,15 +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, Utxos } from '../../context/WalletContext'
+import { useReloadCurrentWalletInfo, useCurrentWalletInfo, CurrentWallet } 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 { SelectableUtxo, UtxoListDisplay } from './ShowUtxos'
+import Divider from '../Divider'
 import { useSettings } from '../../context/SettingsContext'
 
 const INITIAL_DESTINATION = null
@@ -82,23 +83,45 @@ const createInitialValues = (numCollaborators: number, feeConfigValues: FeeValue
 }
 
 type ReviewConsideredUtxosProps = {
-  utxos: Utxos
+  utxos: SelectableUtxo[]
 }
 const ReviewConsideredUtxos = ({ utxos }: ReviewConsideredUtxosProps) => {
   const { t } = useTranslation()
   const settings = useSettings()
   const [isOpen, setIsOpen] = useState<boolean>(false)
 
+  const customTheme = {
+    Table: `
+    --data-table-library_grid-template-columns: 2.5rem 10rem 5fr 3fr 8.7rem;
+    @media only screen and (min-width: 768px) {
+      --data-table-library_grid-template-columns: 2.5rem 10rem 5fr 3fr 8.7rem;
+    }
+  `,
+    BaseCell: `
+    padding: 0.35rem  0.25rem !important;
+    margin: 0.15rem 0px !important;
+  `,
+  }
+
   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} />
-        )}
+        <Divider toggled={isOpen} onToggle={() => setIsOpen((current) => !current)} className="mb-3" />
+        <rb.Collapse in={isOpen}>
+          <div className="text-start">
+            <UtxoListDisplay
+              utxos={utxos}
+              settings={settings}
+              onToggle={() => {}}
+              showBackgroundColor={false}
+              customTheme={customTheme}
+              disableCheckboxCell={true}
+            />
+          </div>
+        </rb.Collapse>
       </rb.Col>
     </rb.Row>
   )
@@ -548,9 +571,10 @@ export default function Send({ wallet }: SendProps) {
             showConfirmSendModal.sourceJarIndex !== undefined &&
             (() => {
               const selectedUtxosList = showConfirmSendModal.consideredUtxos
-              const utxoList = walletInfo.utxosByJar[showConfirmSendModal.sourceJarIndex].filter((utxo) =>
-                selectedUtxosList.some((selectedUtxos) => selectedUtxos === utxo.utxo),
-              )
+              const utxoList = walletInfo.utxosByJar[showConfirmSendModal.sourceJarIndex]
+                .filter((utxo) => selectedUtxosList.some((selectedUtxos) => selectedUtxos === utxo.utxo))
+                .map((it) => ({ ...it, checked: false, selectable: false }))
+                .sort((a, b) => a.confirmations - b.confirmations)
               return <ReviewConsideredUtxos utxos={utxoList} />
             })()}
         </PaymentConfirmModal>