deep-stack/wallet-connect-web-examples
3
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

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

Browse Source
This commit is contained in:
Ben Kremer 2022-02-22 11:58:53 +01:00
parent 68655234b4
commit 331a6e2e66
3 changed files with 30 additions and 17 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

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

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

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

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

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