feat: utxo list (#430)

* feat: add tabbed control to jar overlay

* feat: add utxo table

* refactor: clean up overlay container

* refactor: clean up table

* feat: add alert

* refactr: re-add utxo modal

* refactor: add back old account details view

* refactor: delete old files

* fix: tests

* feat: add confirmations and refresh button

* fix: class name

* fix: paddings

* fix: acccordion shadow

* fix: bs colors

* fix: remove utxo conversion where not needed

* feat: i18n

* fix: button active color

* Update src/components/jar_details/JarDetailsOverlay.tsx

Co-authored-by: Thebora Kompanioni <theborakompanioni@users.noreply.github.com>

* fix: use lockgime from property instead of status

* fix: disable freezing and unfreezing when service is running

* fix: do not allow locked utxos to be unfrozen

* fix: make sure tab and content are in sync

* feat: add sorting by confirmations

* feat: add reset position to sort toggle

* fix: switch cancel button placement

* fix: right-align value column

* Update src/components/jar_details/UtxoList.tsx

Co-authored-by: Thebora Kompanioni <theborakompanioni@users.noreply.github.com>

Co-authored-by: Thebora Kompanioni <theborakompanioni@users.noreply.github.com>

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)
 
@@ -102,11 +113,14 @@ export default function CurrentWalletMagic() {
         </rb.Row>
       )}
 
-      {accounts && (
-        <DisplayAccountsOverlay
+      {accounts && isAccountOverlayShown && (
+        <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);