chore: only show dollar based balances if the dollar balances are available (#2275)

Author: neocybereth

apps/namadillo/src/App/AccountOverview/ShieldedAssetsOverview.tsx

@@ -12,31 +12,38 @@ import { TotalBalanceCard } from "./TotalBalanceCard";
 
 export const ShieldedAssetsOverview = (): JSX.Element => {
   const { shieldingRewardsEnabled } = useAtomValue(applicationFeaturesAtom);
-  const { shieldedAmountInFiat } = useAmountsInFiat();
+  const { shieldedAmountInFiat, shieldedQuery, hasShieldedAssets } =
+    useAmountsInFiat();
   const textContainerClassList = `flex h-full gap-1 items-center justify-center`;
   const requiresNewShieldedSync = useRequiresNewShieldedSync();
 
+  // Hide TotalBalanceCard if shielded fiat amount is 0 but shielded assets exist
+  const shouldHideBalanceCard =
+    shieldedQuery.isSuccess && hasShieldedAssets && shieldedAmountInFiat.eq(0);
+
   return (
     <Panel className="relative px-6 border-x border-b border-yellow rounded-t-none h-full">
       <div className="flex justify-between gap-16 mt-4">
-        <TotalBalanceCard
-          balanceInFiat={shieldedAmountInFiat}
-          isShielded={true}
-          footerButtons={
-            <>
-              <ActionButton
-                href={routes.transfer}
-                outlineColor="yellow"
-                size="xs"
-                className="w-auto px-4"
-              >
-                <span className={clsx(textContainerClassList)}>
-                  Shielded Transfer
-                </span>
-              </ActionButton>
-            </>
-          }
-        />
+        {!shouldHideBalanceCard ?
+          <TotalBalanceCard
+            balanceInFiat={shieldedAmountInFiat}
+            isShielded={true}
+            footerButtons={
+              <>
+                <ActionButton
+                  href={routes.transfer}
+                  outlineColor="yellow"
+                  size="xs"
+                  className="w-auto px-4"
+                >
+                  <span className={clsx(textContainerClassList)}>
+                    Shielded Transfer
+                  </span>
+                </ActionButton>
+              </>
+            }
+          />
+        : <div />}
         {shieldingRewardsEnabled && <EstimateShieldingRewardsCard />}
       </div>
       <div className="mt-10">

apps/namadillo/src/App/AccountOverview/TotalBalanceBanner.tsx

@@ -14,16 +14,28 @@ export const TotalBalanceBanner = (): JSX.Element => {
   const { isFetching: isShieldSyncing } = useAtomValue(shieldedBalanceAtom);
   const requiresNewShieldedSync = useRequiresNewShieldedSync();
   const shouldWaitForShieldedSync = requiresNewShieldedSync && isShieldSyncing;
-  const { shieldedQuery, unshieldedQuery, stakingQuery, totalAmountInFiat } =
-    useAmountsInFiat();
-
+  const {
+    shieldedQuery,
+    unshieldedQuery,
+    stakingQuery,
+    totalAmountInFiat,
+    hasUnshieldedAssets,
+    hasShieldedAssets,
+  } = useAmountsInFiat();
   const balancesHaveLoaded =
     shieldedQuery.isSuccess &&
     unshieldedQuery.isSuccess &&
     stakingQuery.isSuccess;
   const hasErrors =
     shieldedQuery.isError && unshieldedQuery.isError && stakingQuery.isError;
   const balanceIsLoading = !balancesHaveLoaded && !hasErrors;
+  const hasAnyAssets = hasUnshieldedAssets || hasShieldedAssets;
+
+  // Hide banner if totalAmountInFiat is 0 but we have assets (means pricing is unavailable)
+  const shouldHideBanner =
+    balancesHaveLoaded && hasAnyAssets && totalAmountInFiat.eq(0);
+
+  if (shouldHideBanner) return <></>;
 
   return (
     <Panel className="py-4">

apps/namadillo/src/App/AccountOverview/UnshieldedAssetsOverview.tsx

@@ -9,32 +9,39 @@ import { TotalBalanceCard } from "./TotalBalanceCard";
 import { UnshieldedAssetTable } from "./UnshieldedAssetTable";
 
 export const UnshieldedAssetsOverview = (): JSX.Element => {
-  const { unshieldedAmountInFiat } = useAmountsInFiat();
   const navigate = useNavigate();
   const transparentTokensQuery = useAtomValue(transparentTokensAtom);
-
+  const { unshieldedAmountInFiat, hasUnshieldedAssets } = useAmountsInFiat();
   const isLoading =
     transparentTokensQuery.isLoading ||
     (transparentTokensQuery.fetchStatus === "idle" &&
       !transparentTokensQuery.isFetched);
 
+  // Hide TotalBalanceCard if unshielded fiat amount is 0 but unshielded assets exist
+  const shouldHideBalanceCard =
+    transparentTokensQuery.isSuccess &&
+    hasUnshieldedAssets &&
+    unshieldedAmountInFiat.eq(0);
+
   return (
     <Panel className="relative px-6 rounded-t-none h-full">
       <div className="flex justify-between items-center gap-16 mt-4">
-        <TotalBalanceCard
-          balanceInFiat={unshieldedAmountInFiat}
-          footerButtons={
-            <>
-              <ActionButton
-                onClick={() => navigate(routes.shield)}
-                size="xs"
-                className="w-auto px-4"
-              >
-                Shield Assets
-              </ActionButton>
-            </>
-          }
-        />
+        {!shouldHideBalanceCard ?
+          <TotalBalanceCard
+            balanceInFiat={unshieldedAmountInFiat}
+            footerButtons={
+              <>
+                <ActionButton
+                  onClick={() => navigate(routes.shield)}
+                  size="xs"
+                  className="w-auto px-4"
+                >
+                  Shield Assets
+                </ActionButton>
+              </>
+            }
+          />
+        : <div />}
         <UnclaimedRewardsCard />
       </div>
       {transparentTokensQuery.isSuccess && (

apps/namadillo/src/atoms/balance/atoms.ts

@@ -263,9 +263,9 @@ export const shieldedTokensAtom = atomWithQuery<TokenBalance[]>((get) => {
       async () =>
         mapNamadaAssetsToTokenBalances(
           shieldedAssets.data ?? {},
-          tokenPrices.data ?? {}
+          tokenPrices.isSuccess ? (tokenPrices.data ?? {}) : {}
         ),
-      [shieldedAssets, tokenPrices]
+      [shieldedAssets]
     ),
   };
 });
@@ -320,10 +320,10 @@ export const transparentTokensAtom = atomWithQuery<TokenBalance[]>((get) => {
         Promise.resolve(
           mapNamadaAssetsToTokenBalances(
             transparentAssets.data ?? {},
-            tokenPrices.data ?? {}
+            tokenPrices.isSuccess ? (tokenPrices.data ?? {}) : {}
           )
         ),
-      [transparentAssets, tokenPrices]
+      [transparentAssets]
     ),
   };
 });

apps/namadillo/src/hooks/useAmountsInFiat.tsx

@@ -16,6 +16,8 @@ type AmountsInFiatOutput = {
   shieldedQuery: AtomWithQueryResult;
   unshieldedQuery: AtomWithQueryResult;
   stakingQuery: AtomWithQueryResult;
+  hasShieldedAssets: boolean;
+  hasUnshieldedAssets: boolean;
   isLoading: boolean;
 };
 
@@ -61,6 +63,11 @@ export const useAmountsInFiat = (): AmountsInFiatOutput => {
     .plus(unshieldedDollars)
     .plus(stakingDollars);
 
+  const hasShieldedAssets =
+    shieldedTokensQuery.data?.some((token) => token.amount.gt(0)) ?? false;
+  const hasUnshieldedAssets =
+    unshieldedTokensQuery.data?.some((token) => token.amount.gt(0)) ?? false;
+
   return {
     shieldedQuery: shieldedTokensQuery,
     unshieldedQuery: unshieldedTokensQuery,
@@ -69,6 +76,8 @@ export const useAmountsInFiat = (): AmountsInFiatOutput => {
     shieldedAmountInFiat: shieldedDollars,
     unshieldedAmountInFiat: unshieldedDollars,
     stakingAmountInFiat: stakingDollars,
+    hasShieldedAssets,
+    hasUnshieldedAssets,
     isLoading:
       shieldedTokensQuery.isLoading ||
       unshieldedTokensQuery.isLoading ||