fix: staking buttons visibility and isNomPoolStaking detection (#1608)

* fix: staking buttons visibility when an account is selected * fix: isNomPoolStaking detection if staking in non default pool
TalismanSociety · Sep 10, 2024 · bac5d22 · bac5d22
1 parent f0f10db
commit bac5d22
Show file tree

Hide file tree

Showing 3 changed files with 25 additions and 15 deletions.
diff --git a/apps/extension/src/ui/domains/Portfolio/AssetDetails/DashboardAssetDetails.tsx b/apps/extension/src/ui/domains/Portfolio/AssetDetails/DashboardAssetDetails.tsx
@@ -263,7 +263,7 @@ const ChainTokenBalancesDetailRow = ({
         className={classNames(status.status === "fetching" && "animate-pulse transition-opacity")}
       />
     </div>
-    {!!row.locked && row.meta && row.address && tokenId && (
+    {!!row.locked && row.meta && tokenId && (
       <LockedExtra
         tokenId={tokenId}
         address={row.address}
@@ -276,25 +276,28 @@ const ChainTokenBalancesDetailRow = ({
 
 const LockedExtra: FC<{
   tokenId: TokenId
-  address: string
+  address?: string // this is only set when browsing all accounts
   isLoading: boolean
   rowMeta: { poolId?: number; unbonding?: boolean }
 }> = ({ tokenId, address, rowMeta, isLoading }) => {
   const { t } = useTranslation()
   const { data } = useNomPoolStakingStatus(tokenId)
+  const { account } = useSelectedAccount()
+
+  const rowAddress = useMemo(() => address ?? account?.address ?? null, [account?.address, address])
 
   const accountStatus = useMemo(
-    () => data?.accounts?.find((s) => s.address === address),
-    [address, data?.accounts]
+    () => data?.accounts?.find((s) => s.address === rowAddress),
+    [data?.accounts, rowAddress]
   )
 
-  if (!accountStatus) return null
+  if (!rowAddress || !accountStatus) return null
 
   return (
     <div className="flex h-[6.6rem] flex-col items-end justify-center gap-2 whitespace-nowrap p-8 text-right">
       {rowMeta.unbonding ? (
         accountStatus.canWithdraw ? (
-          <NomPoolWithdrawButton tokenId={tokenId} address={address} />
+          <NomPoolWithdrawButton tokenId={tokenId} address={rowAddress} />
         ) : (
           <div
             className={classNames(
@@ -308,7 +311,7 @@ const LockedExtra: FC<{
           </div>
         )
       ) : accountStatus.canUnstake ? (
-        <NomPoolUnbondButton tokenId={tokenId} address={address} />
+        <NomPoolUnbondButton tokenId={tokenId} address={rowAddress} />
       ) : null}
     </div>
   )

diff --git a/apps/extension/src/ui/domains/Portfolio/AssetDetails/PopupAssetDetails.tsx b/apps/extension/src/ui/domains/Portfolio/AssetDetails/PopupAssetDetails.tsx
@@ -206,7 +206,7 @@ const ChainTokenBalancesDetailRow = ({
     <div className="flex grow flex-col justify-center gap-2 overflow-hidden">
       <div className="font-bold text-white">
         {row.title}{" "}
-        {tokenId && row.address && row.meta && (
+        {!!row.locked && tokenId && row.meta && (
           <LockedExtra
             tokenId={tokenId}
             address={row.address}
@@ -256,27 +256,30 @@ const ChainTokenBalancesDetailRow = ({
 
 const LockedExtra: FC<{
   tokenId: TokenId
-  address: string
+  address?: string // this is only set when browsing all accounts
   isLoading: boolean
   rowMeta: { poolId?: number; unbonding?: boolean }
 }> = ({ tokenId, address, rowMeta, isLoading }) => {
   const { t } = useTranslation()
   const { data } = useNomPoolStakingStatus(tokenId)
+  const { account } = useSelectedAccount()
+
+  const rowAddress = useMemo(() => address ?? account?.address ?? null, [account?.address, address])
 
   const accountStatus = useMemo(
-    () => data?.accounts?.find((s) => s.address === address),
-    [address, data?.accounts]
+    () => data?.accounts?.find((s) => s.address === rowAddress),
+    [rowAddress, data?.accounts]
   )
 
-  if (!accountStatus) return null
+  if (!rowAddress || !accountStatus) return null
 
   return (
     <>
       {rowMeta.unbonding ? (
         accountStatus.canWithdraw ? (
           <NomPoolWithdrawButton
             tokenId={tokenId}
-            address={address}
+            address={rowAddress}
             className="px-2 py-0.5 text-xs"
           />
         ) : (
@@ -293,7 +296,11 @@ const LockedExtra: FC<{
         )
       ) : //eslint-disable-next-line @typescript-eslint/no-explicit-any
       accountStatus.canUnstake ? (
-        <NomPoolUnbondButton tokenId={tokenId} address={address} className="px-2 py-0.5 text-xs" />
+        <NomPoolUnbondButton
+          tokenId={tokenId}
+          address={rowAddress}
+          className="px-2 py-0.5 text-xs"
+        />
       ) : null}
     </>
   )

diff --git a/apps/extension/src/ui/domains/Staking/NomPoolBond/useNomPoolBondButton.ts b/apps/extension/src/ui/domains/Staking/NomPoolBond/useNomPoolBondButton.ts
@@ -48,7 +48,7 @@ export const useNomPoolBondButton = ({
       // lookup existing poolId for that account
       for (const balance of sorted.filter((b) => b.address === address)) {
         type Meta = { poolId?: number }
-        const pool = balance.nompools.find((np) => (np.meta as Meta).poolId === poolId)
+        const pool = balance.nompools.find((np) => !!(np.meta as Meta).poolId)
         const meta = pool?.meta as Meta | undefined
         if (meta?.poolId) {
           poolId = meta.poolId