Introduced customTheme in UtxoListDisplay and update UTXO handling lo…

…gic to align with recent changes in PR #802
joinmarket-webui · Aug 20, 2024 · 5a44a57 · 5a44a57
1 parent bb30c98
commit 5a44a57
Show file tree

Hide file tree

Showing 3 changed files with 69 additions and 18 deletions.
diff --git a/src/components/Send/ShowUtxos.tsx b/src/components/Send/ShowUtxos.tsx
@@ -36,13 +36,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
 }
 
 const UtxoRow = ({ utxo, onToggle, showBackgroundColor, settings, walletInfo, t }: UtxoRowProps) => {
@@ -110,11 +116,18 @@ const UtxoRow = ({ utxo, onToggle, showBackgroundColor, settings, walletInfo, t
 
 type SelectableUtxoTableRowData = SelectableUtxo & 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: 2.5rem 2.5rem 17rem 3rem 12rem 1fr};
   `,
@@ -128,7 +141,7 @@ const UtxoListDisplay = ({ utxos, onToggle, settings, showBackgroundColor = true
     }
   `,
   }
-  const tableTheme = useTheme(TABLE_THEME)
+  const tableTheme = useTheme(customTheme ?? defaultTheme)
 
   const tableData: TableTypes.Data<SelectableUtxoTableRowData> = useMemo(
     () => ({
@@ -159,6 +172,7 @@ const UtxoListDisplay = ({ utxos, onToggle, settings, showBackgroundColor = true
                     settings={settings}
                     walletInfo={walletInfo}
                     t={t}
+                    disableCheckboxCell={disableCheckboxCell}
                   />
                 )
               })}
@@ -169,7 +183,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) => {
@@ -290,4 +304,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>