feat(tangle-dapp): Filter my pools

tangle-network · Sep 28, 2024 · e21795d · e21795d
1 parent 186ef8e
commit e21795d
Show file tree

Hide file tree

Showing 2 changed files with 30 additions and 10 deletions.
diff --git a/apps/tangle-dapp/components/NetworkSelector/NetworkSelectionButton.tsx b/apps/tangle-dapp/components/NetworkSelector/NetworkSelectionButton.tsx
@@ -60,7 +60,9 @@ const NetworkSelectionButton: FC = () => {
 
   // Disable network switching when in Liquid Staking page,
   // since it would have no effect there.
-  const isInLiquidStakingPath = pathname.startsWith(PagePath.LIQUID_STAKING);
+  const isInLiquidStakingPage =
+    pathname.startsWith(PagePath.LIQUID_STAKING) &&
+    !pathname.startsWith(PagePath.LIQUID_STAKING_OVERVIEW);
 
   const isInBridgePath = useMemo(
     () => pathname.startsWith(PagePath.BRIDGE),
@@ -96,8 +98,8 @@ const NetworkSelectionButton: FC = () => {
     return null;
   }
   // Network can't be switched from the Tangle Restaking Parachain while
-  // on liquid staking page.
-  else if (isInLiquidStakingPath) {
+  // on the liquid staking page.
+  else if (isInLiquidStakingPage) {
     // Special case when the liquifier is selected.
     const lsNetworkName = isLiquifierProtocolId(selectedProtocolId)
       ? IS_PRODUCTION_ENV

diff --git a/apps/tangle-dapp/containers/LsMyPoolsTable.tsx b/apps/tangle-dapp/containers/LsMyPoolsTable.tsx
@@ -26,6 +26,7 @@ import { ArrowRight } from '@webb-tools/icons';
 import useLsPools from '../data/liquidStaking/useLsPools';
 import useSubstrateAddress from '../hooks/useSubstrateAddress';
 import { BN } from '@polkadot/util';
+import assert from 'assert';
 
 type MyLsPoolRow = LsPool & {
   myStake: BN;
@@ -165,13 +166,30 @@ const LsMyPoolsTable: FC = () => {
   const lsPools =
     lsPoolsMap instanceof Map ? Array.from(lsPoolsMap.values()) : lsPoolsMap;
 
-  const myPools =
-    substrateAddress === null || !Array.isArray(lsPools)
-      ? null
-      : lsPools.filter((lsPool) => lsPool.members.has(substrateAddress));
+  const rows: MyLsPoolRow[] = useMemo(() => {
+    if (substrateAddress === null || !Array.isArray(lsPools)) {
+      return [];
+    }
+
+    return lsPools
+      .filter((lsPool) => lsPool.members.has(substrateAddress))
+      .map((lsPool) => {
+        const account = lsPool.members.get(substrateAddress);
+
+        assert(account !== undefined);
+
+        return {
+          ...lsPool,
+          myStake: account.balance.toBn(),
+          isRoot: lsPool.ownerAddress === substrateAddress,
+          isNominator: lsPool.nominatorAddress === substrateAddress,
+          isBouncer: lsPool.bouncerAddress === substrateAddress,
+        };
+      });
+  }, []);
 
   const table = useReactTable({
-    data: myPools ?? [],
+    data: rows,
     columns: POOL_COLUMNS,
     getCoreRowModel: getCoreRowModel(),
     getSortedRowModel: getSortedRowModel(),
@@ -199,15 +217,15 @@ const LsMyPoolsTable: FC = () => {
 
       <Pagination
         itemsPerPage={pageSize}
-        totalItems={myPools.length}
+        totalItems={rows.length}
         page={pageIndex + 1}
         totalPages={table.getPageCount()}
         canPreviousPage={table.getCanPreviousPage()}
         previousPage={table.previousPage}
         canNextPage={table.getCanNextPage()}
         nextPage={table.nextPage}
         setPageIndex={table.setPageIndex}
-        title={pluralize('pool', myPools.length === 0 || myPools.length > 1)}
+        title={pluralize('pool', rows.length === 0 || rows.length > 1)}
         className="border-t-0 py-5"
       />
     </div>