Add token balances on Safe cards

libs/moloch-v3-data/src/vaults.ts

@@ -25,7 +25,7 @@ export const listTokenBalances = async ({
 
   try {
     const res = await fetch.get<TokenBalance[]>(
-      `${url}/safes/${getAddress(safeAddress)}/balances/`
+      `${url}/safes/${getAddress(safeAddress)}/balances/?exclude_spam=true`
     );
 
     return { data: transformTokenBalances(res, safeAddress) };

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={[]}
+    />
+  );
+};

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;
+`;

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 @@
     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 @@
         <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>
   );