From 46fa6e2a96ea99d67b9cbc3dc837d98175df74e0 Mon Sep 17 00:00:00 2001
From: skuhlmann <samkuhlmann@gmail.com>
Date: Wed, 7 May 2025 16:39:11 -0600
Subject: [PATCH] handle token balance fetch error

---
 libs/moloch-v3-data/src/daos.ts               |  1 -
 libs/moloch-v3-data/src/vaults.ts             |  4 ++
 .../src/components/SafeCard/SafeCard.tsx      | 58 +++++++++++--------
 3 files changed, 39 insertions(+), 24 deletions(-)

diff --git a/libs/moloch-v3-data/src/daos.ts b/libs/moloch-v3-data/src/daos.ts
index a0978184..a133223f 100644
--- a/libs/moloch-v3-data/src/daos.ts
+++ b/libs/moloch-v3-data/src/daos.ts
@@ -7,7 +7,6 @@ import {
   IListQueryResults,
 } from '@daohaus/data-fetch-utils';
 import {
-  ENDPOINTS,
   getGraphUrl,
   GRAPH_API_KEYS,
   Keychain,
diff --git a/libs/moloch-v3-data/src/vaults.ts b/libs/moloch-v3-data/src/vaults.ts
index 8060e925..92f5eb65 100644
--- a/libs/moloch-v3-data/src/vaults.ts
+++ b/libs/moloch-v3-data/src/vaults.ts
@@ -41,10 +41,14 @@ export const listTokenBalances = async ({
       // metadataOptions: { verifiedOnly: true },
     });
 
+    console.log('tokenBalances', tokenBalances);
+
     const balance = await indexer.getEtherBalance({
       accountAddress: safeAddress,
     });
 
+    console.log('balance', balance);
+
     const transformedTokenBalances = tokenBalances.balances.map((tokenBal) => {
       return {
         token: {
diff --git a/libs/moloch-v3-macro-ui/src/components/SafeCard/SafeCard.tsx b/libs/moloch-v3-macro-ui/src/components/SafeCard/SafeCard.tsx
index 047c1ff5..bc04a6f6 100644
--- a/libs/moloch-v3-macro-ui/src/components/SafeCard/SafeCard.tsx
+++ b/libs/moloch-v3-macro-ui/src/components/SafeCard/SafeCard.tsx
@@ -10,6 +10,7 @@ import {
   DataIndicator,
   H4,
   Link,
+  ParSm,
   ParXs,
   Tag,
 } from '@daohaus/ui';
@@ -50,7 +51,9 @@ export const SafeCard = ({
   const tokenBalances = useMemo(() => {
     const network = getNetwork(daoChain);
 
-    return safe.tokenBalances.map((t) => {
+    const balances = safe.tokenBalances || [];
+
+    return balances.map((t) => {
       return {
         tokenLogo: t.token?.logoUri,
         tokenName: t.token?.name || nativeTokenSymbol,
@@ -62,7 +65,7 @@ export const SafeCard = ({
       };
     });
     // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [safe]);
+  }, [safe, safe.tokenBalances]);
 
   return (
     <SafeContainer>
@@ -103,27 +106,36 @@ export const SafeCard = ({
             )}
           </div>
         </SafeCardHeader>
-        <DataGrid>
-          <DataIndicator label="Tokens" data={safe.tokenBalances.length} />
-        </DataGrid>
-        {safe.tokenBalances.length > 0 && (
-          <CollapsibleCard
-            triggerLabel="Balances"
-            width="auto"
-            collapsibleContent={<SafeBalancesTable balances={tokenBalances} />}
-          >
-            <div>
-              {safe.tokenBalances.map((token) => (
-                <Avatar
-                  alt={token.token?.name || token.tokenAddress || ''}
-                  size="md"
-                  src={token.token?.logoUri || ''}
-                  fallback={token.token?.symbol || nativeTokenSymbol}
-                  key={token.tokenAddress}
-                />
-              ))}
-            </div>
-          </CollapsibleCard>
+        {!safe.tokenBalances && (
+          <ParSm>Unable to fetch token balances try later</ParSm>
+        )}
+        {safe.tokenBalances && (
+          <>
+            <DataGrid>
+              <DataIndicator label="Tokens" data={safe.tokenBalances?.length} />
+            </DataGrid>
+            {safe.tokenBalances?.length > 0 && (
+              <CollapsibleCard
+                triggerLabel="Balances"
+                width="auto"
+                collapsibleContent={
+                  <SafeBalancesTable balances={tokenBalances} />
+                }
+              >
+                <div>
+                  {safe.tokenBalances.map((token) => (
+                    <Avatar
+                      alt={token.token?.name || token.tokenAddress || ''}
+                      size="md"
+                      src={token.token?.logoUri || ''}
+                      fallback={token.token?.symbol || nativeTokenSymbol}
+                      key={token.tokenAddress}
+                    />
+                  ))}
+                </div>
+              </CollapsibleCard>
+            )}
+          </>
         )}
       </SafeOverviewCard>
     </SafeContainer>