[GSW-2373] Portfolio Assets (#779)

* fix: [GSW-2373] Portfolio Wallet Balance

* fix: [GSW-2373] Portfolio Asset List

* refactor: [GSW-2373] remove redundant null check for tokenPrice

Author: tfrg

packages/web/src/layouts/portfolio/containers/asset-list-container/AssetListContainer.tsx

@@ -170,18 +170,20 @@ const AssetListContainer: React.FC = () => {
     return [gnot, wugnot, gns]
       .map(item => {
         const tokenPrice = balances[item.priceID];
-        if (!tokenPrice || tokenPrice === null || Number.isNaN(tokenPrice)) {
-          return {
-            price: "-",
-            balance: "-",
-            ...item,
-            tokenPrice: tokenPrice || 0,
-            sortPrice: "-",
-          };
-        }
 
         const price = (() => {
-          if (isSwitchNetwork || !tokenPrices[checkGnotPath(item?.path)]?.usd || !balances[item.priceID]) return "-";
+          if (!connected || isSwitchNetwork) {
+            return "-";
+          }
+
+          if (
+            !tokenPrice ||
+            Number.isNaN(tokenPrice) ||
+            !tokenPrices[checkGnotPath(item?.path)]?.usd ||
+            !balances[item.priceID]
+          ) {
+            return "$0";
+          }
 
           return formatPrice(
             BigNumber(tokenPrice)
@@ -213,26 +215,38 @@ const AssetListContainer: React.FC = () => {
       .filter(asset => invisibleZeroBalance === false || filterZeroBalance(asset))
       .filter(asset => filterKeyword(asset, keyword))
       .filter(asset => filterType(asset, assetType));
-  }, [balances, displayBalanceMap, invisibleZeroBalance, isSwitchNetwork, tokenPrices, tokens, keyword, assetType]);
+  }, [
+    balances,
+    displayBalanceMap,
+    invisibleZeroBalance,
+    isSwitchNetwork,
+    tokenPrices,
+    tokens,
+    keyword,
+    assetType,
+    connected,
+  ]);
 
   const filteredTokens = useMemo(() => {
     const COLLAPSED_LENGTH = 15;
     let mappedTokens: SortedProps[] = tokens
       .filter(item => item.path !== GNOT_TOKEN.path && item.path !== GNS_TOKEN.path && item.path !== WUGNOT_TOKEN.path)
       .map(item => {
         const tokenPrice = balances[item.priceID];
-        if (!tokenPrice || Number.isNaN(tokenPrice)) {
-          return {
-            price: "-",
-            balance: "-",
-            ...item,
-            tokenPrice: tokenPrice || 0,
-            sortPrice: "-",
-          };
-        }
 
         const price = (() => {
-          if (isSwitchNetwork || !tokenPrices[checkGnotPath(item?.path)]?.usd || !balances[item.priceID]) return "-";
+          if (!connected || isSwitchNetwork) {
+            return "-";
+          }
+
+          if (
+            !tokenPrice ||
+            Number.isNaN(tokenPrice) ||
+            !tokenPrices[checkGnotPath(item?.path)]?.usd ||
+            !balances[item.priceID]
+          ) {
+            return "$0";
+          }
 
           return formatPrice(
             BigNumber(tokenPrice)
@@ -252,6 +266,7 @@ const AssetListContainer: React.FC = () => {
             decimals: item.decimals,
           });
         })();
+
         return {
           ...item,
           price: price,
@@ -318,7 +333,9 @@ const AssetListContainer: React.FC = () => {
     assetType,
     keyword,
     isSwitchNetwork,
+    connected,
   ]);
+
   const changeAssetType = useCallback((newType: string) => {
     switch (newType) {
       case ASSET_FILTER_TYPE.ALL:

packages/web/src/layouts/portfolio/containers/wallet-balance-container/WalletBalanceContainer.tsx

@@ -34,6 +34,8 @@ import WalletBalance from "../../components/wallet-balance/WalletBalance";
 import useSendAsset from "@hooks/wallet/data/useSendAsset";
 import { BROADCAST_ERROR_VALUE } from "@common/errors/broadcast/broadcast-error";
 import { useGnoswapContext } from "@hooks/common/use-gnoswap-context";
+import { BalanceSummaryInfo } from "@layouts/portfolio/components/wallet-balance/wallet-balance-summary/wallet-balance-summary-info/WalletBalanceSummaryInfo";
+import { BalanceDetailInfo } from "@layouts/portfolio/components/wallet-balance/wallet-balance-detail/WalletBalanceDetail";
 
 const WalletBalanceContainer: React.FC = () => {
   const { rpcProvider } = useGnoswapContext();
@@ -250,24 +252,61 @@ const WalletBalanceContainer: React.FC = () => {
     );
     closeWithdraw();
   };
+
+  const balanceSummaryInfo: BalanceSummaryInfo = React.useMemo(() => {
+    if (!connected || isSwitchNetwork) {
+      return {
+        amount: "-",
+        changeRate: "-",
+        loading: false,
+      };
+    }
+
+    return {
+      amount: sumTotalBalance,
+      changeRate: "0.0%",
+      loading: loadingTotalBalance,
+    };
+  }, [connected, isSwitchNetwork, sumTotalBalance, loadingTotalBalance]);
+
+  const balanceDetailInfo: BalanceDetailInfo = React.useMemo(() => {
+    if (!connected || isSwitchNetwork) {
+      return {
+        availableBalance: "-",
+        claimableRewards: "-",
+        stakedLP: "-",
+        unstakedLP: "-",
+        loadingBalance: false,
+        loadingPositions: false,
+        totalClaimedRewards: "-",
+      };
+    }
+    return {
+      availableBalance: `${availableBalanceStr}`,
+      claimableRewards: `${claimableRewards}`,
+      stakedLP: `${stakedBalance}`,
+      unstakedLP: `${unStakedBalance}`,
+      loadingBalance: loadingTotalBalance,
+      loadingPositions: loadingTotalBalance,
+      totalClaimedRewards: `${totalClaimedRewards}`,
+    };
+  }, [
+    connected,
+    isSwitchNetwork,
+    availableBalanceStr,
+    claimableRewards,
+    stakedBalance,
+    unStakedBalance,
+    loadingTotalBalance,
+    totalClaimedRewards,
+  ]);
+
   return (
     <>
       <WalletBalance
         connected={connected}
-        balanceSummaryInfo={{
-          amount: isSwitchNetwork ? "$0" : sumTotalBalance,
-          changeRate: "0.0%",
-          loading: loadingTotalBalance,
-        }}
-        balanceDetailInfo={{
-          availableBalance: isSwitchNetwork ? "-" : `${availableBalanceStr}`,
-          claimableRewards: isSwitchNetwork ? "-" : `${claimableRewards}`,
-          stakedLP: isSwitchNetwork ? "-" : `${stakedBalance}`,
-          unstakedLP: unStakedBalance.toString(),
-          loadingBalance: loadingTotalBalance,
-          loadingPositions: loadingTotalBalance,
-          totalClaimedRewards: totalClaimedRewards.toString(),
-        }}
+        balanceSummaryInfo={balanceSummaryInfo}
+        balanceDetailInfo={balanceDetailInfo}
         deposit={deposit}
         withdraw={withdraw}
         claimAll={claimAllReward}