feat: utxo list

package.json

@@ -11,7 +11,9 @@
   },
   "homepage": ".",
   "devDependencies": {
+    "@emotion/react": "^11.9.3",
     "@popperjs/core": "^2.11.5",
+    "@table-library/react-table-library": "^4.0.10",
     "@testing-library/jest-dom": "^5.16.4",
     "@testing-library/react": "^12.1.4",
     "@testing-library/user-event": "^13.5.0",
@@ -97,6 +99,9 @@
       "Math",
       "localStorage"
     ],
-    "clearMocks": true
+    "clearMocks": true,
+    "transformIgnorePatterns": [
+      "node_modules/(?!@table-library)"
+    ]
   }
 }

src/components/CurrentWalletMagic.jsx

@@ -10,7 +10,7 @@ import { walletDisplayName } from '../utils'
 import styles from './CurrentWalletMagic.module.css'
 import { ExtendedLink } from './ExtendedLink'
 import { routes } from '../constants/routes'
-import { DisplayAccountsOverlay } from './DisplayAccountsOverlay'
+import { JarDetailsOverlay } from './jar_details/JarDetailsOverlay'
 import { Jars } from './Jars'
 
 const WalletHeader = ({ name, balance, unit, showBalance, loading }) => {
@@ -59,6 +59,17 @@ export default function CurrentWalletMagic() {
     () => currentWalletInfo && currentWalletInfo.data.display.walletinfo.accounts,
     [currentWalletInfo]
   )
+
+  const utxosByAccount = useMemo(() => {
+    const utxos = (currentWalletInfo && currentWalletInfo.data.utxos.utxos) || []
+    return utxos.reduce((res, utxo) => {
+      const { mixdepth } = utxo
+      res[mixdepth] = res[mixdepth] || []
+      res[mixdepth].push(utxo)
+      return res
+    }, {})
+  }, [currentWalletInfo])
+
   const [selectedAccountIndex, setSelectedAccountIndex] = useState(0)
   const [isAccountOverlayShown, setIsAccountOverlayShown] = useState(false)
 
@@ -103,10 +114,13 @@ export default function CurrentWalletMagic() {
       )}
 
       {accounts && (
-        <DisplayAccountsOverlay
+        <JarDetailsOverlay
           accounts={accounts}
-          selectedAccountIndex={selectedAccountIndex}
-          show={isAccountOverlayShown}
+          initialAccountIndex={selectedAccountIndex}
+          utxosByAccount={utxosByAccount}
+          walletInfo={currentWalletInfo}
+          wallet={currentWallet}
+          isShown={isAccountOverlayShown}
           onHide={() => setIsAccountOverlayShown(false)}
         />
       )}

src/components/SegmentedTabs.module.css

@@ -5,6 +5,13 @@
   width: 100%;
 }
 
+.segmented-tab > label {
+  height: 100%;
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+}
+
 :root[data-theme='dark'] .segmented-tabs {
   color: var(--bs-gray-100);
   background-color: var(--bs-gray-800);