refactor: remove id and checked prop from type Utxo

joinmarket-webui · Aug 11, 2024 · 5372ef0 · 5372ef0
1 parent 6bcf8cd
commit 5372ef0
Show file tree

Hide file tree

Showing 3 changed files with 25 additions and 14 deletions.
diff --git a/src/components/Send/ShowUtxos.tsx b/src/components/Send/ShowUtxos.tsx
@@ -27,8 +27,8 @@ interface ShowUtxosProps {
 }
 
 interface UtxoRowProps {
-  utxo: SelectableUtxo
-  onToggle: (utxo: SelectableUtxo) => void
+  utxo: SelectableUtxoTableRowData
+  onToggle: (utxo: SelectableUtxoTableRowData) => void
   settings: Settings
   showBackgroundColor: boolean
   walletInfo: WalletInfo
@@ -161,6 +161,11 @@ const UtxoRow = ({ utxo, onToggle, showBackgroundColor, settings, walletInfo, t
   )
 }
 
+type SelectableUtxoTableRowData = SelectableUtxo & {
+  // TODO: add "tags" here and remove from "Utxo" type
+  // tags?: { tag: string; color: string }[]
+} & Pick<TableTypes.TableNode, 'id'>
+
 const UtxoListDisplay = ({ utxos, onToggle, settings, showBackgroundColor = true }: UtxoListDisplayProps) => {
   const { t } = useTranslation()
   const walletInfo = useCurrentWalletInfo()
@@ -179,18 +184,26 @@ const UtxoListDisplay = ({ utxos, onToggle, settings, showBackgroundColor = true
   }
   const tableTheme = useTheme(TABLE_THEME)
 
+  const tableData: TableTypes.Data<SelectableUtxoTableRowData> = useMemo(
+    () => ({
+      nodes: utxos.map(
+        (utxo: Utxo) =>
+          ({
+            ...utxo,
+            id: utxo.utxo,
+          }) as SelectableUtxoTableRowData,
+      ),
+    }),
+    [utxos],
+  )
+
   return (
     <div className={classNames(styles.utxoListDisplayHeight, 'overflow-y-auto')}>
-      <Table
-        className="bg"
-        data={{ nodes: utxos }}
-        theme={tableTheme}
-        layout={{ custom: true, horizontalScroll: true }}
-      >
-        {(utxosList: TableTypes.TableProps<SelectableUtxo>) => (
+      <Table className="bg" data={tableData} theme={tableTheme} layout={{ custom: true, horizontalScroll: true }}>
+        {(utxosList: TableTypes.TableProps<SelectableUtxoTableRowData>) => (
           <Body>
             {walletInfo &&
-              utxosList.map((utxo: SelectableUtxo, index: number) => {
+              utxosList.map((utxo: SelectableUtxoTableRowData, index: number) => {
                 return (
                   <UtxoRow
                     key={index}

diff --git a/src/components/jar_details/UtxoList.tsx b/src/components/jar_details/UtxoList.tsx
@@ -156,7 +156,7 @@ const toUtxo = (tableNode: TableTypes.TableNode): Utxo => {
   return utxo as Utxo
 }
 
-interface UtxoTableRow extends Utxo {
+interface UtxoTableRow extends Utxo, TableTypes.TableNode {
   _icon: JSX.Element
   _tags: Tag[]
   _confs: JSX.Element

diff --git a/src/context/WalletContext.tsx b/src/context/WalletContext.tsx
@@ -53,8 +53,7 @@ export type Utxo = {
   // `locktime` in format "yyyy-MM-dd 00:00:00"
   // NOTE: it is unparsable with safari Date constructor
   locktime?: string
-  id: string
-  checked?: boolean
+  // TODO: remove 'tags' prop
   tags?: { tag: string; color: string }[]
 }
 
@@ -195,7 +194,6 @@ export const groupByJar = (utxos: Utxos): UtxosByJar => {
   return utxos.reduce((res, utxo) => {
     const { mixdepth } = utxo
     res[mixdepth] = res[mixdepth] || []
-    utxo.id = utxo.utxo
     res[mixdepth].push(utxo)
     return res
   }, {} as UtxosByJar)