refactor(with-web3js): handles multi-account balance representation

dapps/react-dapp-v2-with-web3js/src/components/Blockchain.tsx

@@ -8,7 +8,13 @@ import Column from "./Column";
 import Loader from "./Loader";
 
 import { getChainMetadata } from "../chains";
-import { AccountAction, ellipseAddress, ChainMetadata, ChainNamespaces } from "../helpers";
+import {
+  AccountAction,
+  ellipseAddress,
+  ChainMetadata,
+  ChainNamespaces,
+  AccountBalances,
+} from "../helpers";
 import { fonts } from "../styles";
 
 interface AccountStyleProps {
@@ -82,7 +88,7 @@ interface BlockchainProps {
   chainId: string;
   address?: string;
   onClick?: (chain: string) => void;
-  balances?: any[];
+  balances?: AccountBalances;
   actions?: AccountAction[];
 }
 
@@ -141,13 +147,11 @@ const Blockchain: FC<PropsWithChildren<BlockchainProps>> = (
             </Column>
           ) : (
             <>
-              {!!balances && balances.length ? (
+              {!!address && !!balances && balances[address] ? (
                 <SFullWidthContainer>
                   <h6>Balances</h6>
                   <Column center>
-                    {balances.map(balance => (
-                      <Asset key={balance.symbol} asset={balance} />
-                    ))}
+                    <Asset key={balances[address].symbol} asset={balances[address]} />
                   </Column>
                 </SFullWidthContainer>
               ) : null}

dapps/react-dapp-v2-with-web3js/src/contexts/ClientContext.tsx

@@ -20,7 +20,7 @@ import {
   DEFAULT_PROJECT_ID,
   DEFAULT_RELAY_URL,
 } from "../constants";
-import { ChainNamespaces, getAllChainNamespaces } from "../helpers";
+import { AccountBalances, ChainNamespaces, getAllChainNamespaces } from "../helpers";
 import { utils } from "ethers";
 
 /**
@@ -34,7 +34,7 @@ interface IContext {
   chain: string;
   pairings: string[];
   accounts: string[];
-  balances: { symbol: string; balance: string }[];
+  balances: AccountBalances;
   isFetchingBalances: boolean;
   chainData: ChainNamespaces;
   onEnable: (chainId: string) => Promise<void>;
@@ -61,7 +61,7 @@ export function ClientContextProvider({ children }: { children: ReactNode | Reac
   const [isInitializing, setIsInitializing] = useState(false);
   const [hasCheckedPersistedSession, setHasCheckedPersistedSession] = useState(false);
 
-  const [balances, setBalances] = useState<{ symbol: string; balance: string }[]>([]);
+  const [balances, setBalances] = useState<AccountBalances>({});
   const [accounts, setAccounts] = useState<string[]>([]);
   const [chainData, setChainData] = useState<ChainNamespaces>({});
   const [chain, setChain] = useState<string>("");
@@ -69,7 +69,7 @@ export function ClientContextProvider({ children }: { children: ReactNode | Reac
   const resetApp = () => {
     setPairings([]);
     setSession(undefined);
-    setBalances([]);
+    setBalances({});
     setAccounts([]);
     setChain("");
   };
@@ -193,10 +193,21 @@ export function ClientContextProvider({ children }: { children: ReactNode | Reac
         const _balances = await Promise.all(
           _accounts.map(async account => {
             const balance = await web3Provider.eth.getBalance(account);
-            return { symbol: "ETH", balance: utils.formatEther(balance) };
+            return {
+              account,
+              symbol: "ETH",
+              balance: utils.formatEther(balance),
+              contractAddress: "",
+            };
           }),
         );
-        setBalances(_balances);
+
+        const balancesByAccount = _balances.reduce((obj, balance) => {
+          obj[balance.account] = balance;
+          return obj;
+        }, {} as AccountBalances);
+
+        setBalances(balancesByAccount);
       } catch (error: any) {
         throw new Error(error);
       } finally {

dapps/react-dapp-v2-with-web3js/src/helpers/types.ts

@@ -2,10 +2,8 @@ import { ChainsMap } from "caip-api";
 
 export interface AssetData {
   symbol: string;
-  name: string;
-  decimals: string;
-  contractAddress: string;
-  balance?: string;
+  balance: string;
+  contractAddress?: string;
 }
 
 export interface ChainData {
@@ -155,5 +153,5 @@ export interface AccountAction {
 }
 
 export interface AccountBalances {
-  [account: string]: AssetData[];
+  [account: string]: AssetData;
 }