From bac5d229ddd1addaf100755458b9a50032238db9 Mon Sep 17 00:00:00 2001
From: Kheops <26880866+0xKheops@users.noreply.github.com>
Date: Tue, 10 Sep 2024 14:42:26 +0900
Subject: [PATCH] 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
---
 .../AssetDetails/DashboardAssetDetails.tsx    | 17 ++++++++-------
 .../AssetDetails/PopupAssetDetails.tsx        | 21 ++++++++++++-------
 .../NomPoolBond/useNomPoolBondButton.ts       |  2 +-
 3 files changed, 25 insertions(+), 15 deletions(-)

diff --git a/apps/extension/src/ui/domains/Portfolio/AssetDetails/DashboardAssetDetails.tsx b/apps/extension/src/ui/domains/Portfolio/AssetDetails/DashboardAssetDetails.tsx
index cf1fd0a77..b2d004fca 100644
--- 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
index 3d068bab8..14511d97c 100644
--- 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,19 +256,22 @@ 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 (
     <>
@@ -276,7 +279,7 @@ const LockedExtra: FC<{
         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
index ee3949394..d95940c53 100644
--- 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