From 86cc017a8dd9149dd93a52342911bb350f45def8 Mon Sep 17 00:00:00 2001
From: Santiago Gonzalez <hernangt12re3@gmail.com>
Date: Tue, 22 Oct 2024 23:46:04 -0500
Subject: [PATCH 1/2] add safe token balances

---
 libs/moloch-v3-data/src/vaults.ts             |  4 +-
 .../components/SafeCard/SafeBalancesTable.tsx | 71 +++++++++++++++++++
 .../components/SafeCard/SafeCard.styles.ts    |  6 ++
 .../src/components/SafeCard/SafeCard.tsx      | 50 +++++++++++--
 4 files changed, 126 insertions(+), 5 deletions(-)
 create mode 100644 libs/moloch-v3-macro-ui/src/components/SafeCard/SafeBalancesTable.tsx

diff --git a/libs/moloch-v3-data/src/vaults.ts b/libs/moloch-v3-data/src/vaults.ts
index bcbb6cb6..2fa197e5 100644
--- a/libs/moloch-v3-data/src/vaults.ts
+++ b/libs/moloch-v3-data/src/vaults.ts
@@ -25,7 +25,9 @@ export const listTokenBalances = async ({
 
   try {
     const res = await fetch.get<TokenBalance[]>(
-      `${url}/safes/${getAddress(safeAddress)}/balances/`
+      `${url}/safes/${getAddress(
+        safeAddress
+      )}/balances/?trusted=true&exclude_spam=true`
     );
 
     return { data: transformTokenBalances(res, safeAddress) };
diff --git a/libs/moloch-v3-macro-ui/src/components/SafeCard/SafeBalancesTable.tsx b/libs/moloch-v3-macro-ui/src/components/SafeCard/SafeBalancesTable.tsx
new file mode 100644
index 00000000..245de312
--- /dev/null
+++ b/libs/moloch-v3-macro-ui/src/components/SafeCard/SafeBalancesTable.tsx
@@ -0,0 +1,71 @@
+import { useMemo } from 'react';
+import { Column, Row } from 'react-table';
+
+import { DaoTable } from '../DaohausTable';
+import { Avatar } from '@daohaus/ui';
+import { SafeToken } from './SafeCard.styles';
+
+type TokenBalanceType = {
+  tokenLogo?: string | null;
+  tokenName: string;
+  tokenSymbol: string;
+  balance: number;
+};
+
+type SafeBalancesTableProps = {
+  balances: Array<TokenBalanceType>;
+};
+
+export const SafeBalancesTable = ({ balances }: SafeBalancesTableProps) => {
+  const columns = useMemo<Column<TokenBalanceType>[]>(
+    () => [
+      {
+        Header: 'Asset',
+        accessor: 'tokenName',
+        Cell: ({
+          value,
+          row,
+        }: {
+          value: string;
+          row: Row<TokenBalanceType>;
+        }) => {
+          return (
+            <SafeToken>
+              <div style={{ fontSize: '1rem' }}>
+                <Avatar
+                  alt={value}
+                  size="md"
+                  src={row.original.tokenLogo || ''}
+                  fallback={row.original.tokenSymbol}
+                />
+              </div>
+              <span>{value}</span>
+            </SafeToken>
+          );
+        },
+      },
+      {
+        Header: 'Balance',
+        accessor: 'balance',
+        Cell: ({
+          value,
+          row,
+        }: {
+          value: number;
+          row: Row<TokenBalanceType>;
+        }) => {
+          return <div>{`${value} ${row.original.tokenSymbol}`}</div>;
+        },
+      },
+    ],
+    [balances]
+  );
+
+  return (
+    <DaoTable<TokenBalanceType>
+      tableData={balances}
+      columns={columns}
+      sortableColumns={[]}
+    />
+  );
+};
diff --git a/libs/moloch-v3-macro-ui/src/components/SafeCard/SafeCard.styles.ts b/libs/moloch-v3-macro-ui/src/components/SafeCard/SafeCard.styles.ts
index b128fff3..807b5b79 100644
--- a/libs/moloch-v3-macro-ui/src/components/SafeCard/SafeCard.styles.ts
+++ b/libs/moloch-v3-macro-ui/src/components/SafeCard/SafeCard.styles.ts
@@ -69,3 +69,9 @@ export const SafeActionMenuLink = styled(RouterLink)`
   ${DropdownLinkStyles}
   font-weight: ${font.weight.bold};
 `;
+
+export const SafeToken = styled.div`
+  display: flex;
+  align-items: center;
+  gap: 1rem;
+`;
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 97d1b964..cf2dd61e 100644
--- a/libs/moloch-v3-macro-ui/src/components/SafeCard/SafeCard.tsx
+++ b/libs/moloch-v3-macro-ui/src/components/SafeCard/SafeCard.tsx
@@ -1,25 +1,29 @@
-import React, { useMemo } from 'react';
+import { useMemo } from 'react';
 
+import { Keychain, getNetwork } from '@daohaus/keychain-utils';
 import { DaoSafe, MolochV3Dao } from '@daohaus/moloch-v3-data';
 import {
   AddressDisplay,
+  Avatar,
   Bold,
+  CollapsibleCard,
   DataIndicator,
   H4,
   Link,
   ParXs,
   Tag,
 } from '@daohaus/ui';
-import { generateGnosisUiLink } from '@daohaus/utils';
-import { Keychain } from '@daohaus/keychain-utils';
+import { generateGnosisUiLink, toWholeUnits, truncValue } from '@daohaus/utils';
+
 import { DataGrid } from '../Layout';
+import { SafeActionMenu } from './SafeActionMenu';
+import { SafeBalancesTable } from './SafeBalancesTable';
 import {
   SafeCardHeader,
   SafeContainer,
   SafeOverviewCard,
   TagSection,
 } from './SafeCard.styles';
-import { SafeActionMenu } from './SafeActionMenu';
 
 type SafeCardProps = {
   dao: MolochV3Dao;
@@ -38,6 +42,26 @@ export const SafeCard = ({
     return safe.safeAddress === dao.safeAddress;
   }, [safe, dao]);
 
+  const nativeTokenSymbol = useMemo(() => {
+    const network = getNetwork(daoChain);
+    return network?.symbol || 'UNK';
+  }, [daoChain]);
+
+  const tokenBalances = useMemo(() => {
+    const network = getNetwork(daoChain);
+    return safe.tokenBalances.map((t) => {
+      return {
+        tokenLogo: t.token?.logoUri,
+        tokenName: t.token?.name || nativeTokenSymbol,
+        tokenSymbol: t.token?.symbol || nativeTokenSymbol,
+        balance: truncValue(
+          toWholeUnits(t.balance, t.token?.decimals || network?.tokenDecimals),
+          4
+        ),
+      };
+    });
+  }, [safe]);
+
   return (
     <SafeContainer>
       <SafeOverviewCard>
@@ -80,6 +104,24 @@ export const SafeCard = ({
         <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}
+                />
+              ))}
+            </div>
+          </CollapsibleCard>
+        )}
       </SafeOverviewCard>
     </SafeContainer>
   );

From 25e255356b0b7e763ab2f5a9cc9b9aca8f4a59f6 Mon Sep 17 00:00:00 2001
From: Santiago Gonzalez <hernangt12re3@gmail.com>
Date: Tue, 22 Oct 2024 23:56:06 -0500
Subject: [PATCH 2/2] filter spam tokens only in safes

---
 libs/moloch-v3-data/src/vaults.ts | 4 +---
 1 file changed, 1 insertion(+), 3 deletions(-)

diff --git a/libs/moloch-v3-data/src/vaults.ts b/libs/moloch-v3-data/src/vaults.ts
index 2fa197e5..c2145dc5 100644
--- a/libs/moloch-v3-data/src/vaults.ts
+++ b/libs/moloch-v3-data/src/vaults.ts
@@ -25,9 +25,7 @@ export const listTokenBalances = async ({
 
   try {
     const res = await fetch.get<TokenBalance[]>(
-      `${url}/safes/${getAddress(
-        safeAddress
-      )}/balances/?trusted=true&exclude_spam=true`
+      `${url}/safes/${getAddress(safeAddress)}/balances/?exclude_spam=true`
     );
 
     return { data: transformTokenBalances(res, safeAddress) };