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

feat: memoize ClientContext value

Browse Source
This commit is contained in:
Ben Kremer 2022-02-04 16:53:03 +01:00
parent dc120c89d2
commit 34e175f24c
1 changed files with 104 additions and 68 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

66
dapps/react-dapp-v2/src/contexts/ClientContext.tsx
View File

@ -1,7 +1,15 @@
import Client, { CLIENT_EVENTS } from "@walletconnect/client"; import Client, { CLIENT_EVENTS } from "@walletconnect/client";
import { PairingTypes, SessionTypes } from "@walletconnect/types"; import { PairingTypes, SessionTypes } from "@walletconnect/types";
import QRCodeModal from "@walletconnect/legacy-modal"; import QRCodeModal from "@walletconnect/legacy-modal";
import { createContext, ReactNode, useContext, useEffect, useState } from "react"; import {
createContext,
ReactNode,
useCallback,
useContext,
useEffect,
useMemo,
useState,
} from "react";
import { import {
DEFAULT_APP_METADATA, DEFAULT_APP_METADATA,
DEFAULT_COSMOS_METHODS, DEFAULT_COSMOS_METHODS,
@ -104,18 +112,25 @@ export function ClientContextProvider({ children }: { children: ReactNode | Reac
} }
}; };
const onSessionConnected = async (incomingSession: SessionTypes.Settled) => { const onSessionUpdate = useCallback(async (accounts: string[], chains: string[]) => {
setSession(incomingSession);
onSessionUpdate(incomingSession.state.accounts, incomingSession.permissions.blockchain.chains);
};
const onSessionUpdate = async (accounts: string[], chains: string[]) => {
setChains(chains); setChains(chains);
setAccounts(accounts); setAccounts(accounts);
await getAccountBalances(accounts); await getAccountBalances(accounts);
}; }, []);
const connect = async (pairing?: { topic: string }) => { const onSessionConnected = useCallback(
async (incomingSession: SessionTypes.Settled) => {
setSession(incomingSession);
onSessionUpdate(
incomingSession.state.accounts,
incomingSession.permissions.blockchain.chains,
);
},
[onSessionUpdate],
);
const connect = useCallback(
async (pairing?: { topic: string }) => {
if (typeof client === "undefined") { if (typeof client === "undefined") {
throw new Error("WalletConnect is not initialized"); throw new Error("WalletConnect is not initialized");
} }
@ -165,9 +180,11 @@ export function ClientContextProvider({ children }: { children: ReactNode | Reac
// close modal in case it was open // close modal in case it was open
QRCodeModal.close(); QRCodeModal.close();
}; },
[chains, client, onSessionConnected],
);
const disconnect = async () => { const disconnect = useCallback(async () => {
if (typeof client === "undefined") { if (typeof client === "undefined") {
throw new Error("WalletConnect is not initialized"); throw new Error("WalletConnect is not initialized");
} }
@ -179,7 +196,7 @@ export function ClientContextProvider({ children }: { children: ReactNode | Reac
topic: session.topic, topic: session.topic,
reason: ERROR.USER_DISCONNECTED.format(), reason: ERROR.USER_DISCONNECTED.format(),
}); });
}; }, [client, session]);
const getAccountBalances = async (_accounts: string[]) => { const getAccountBalances = async (_accounts: string[]) => {
setFetching(true); setFetching(true);
@ -226,9 +243,8 @@ export function ClientContextProvider({ children }: { children: ReactNode | Reac
init(); init();
}, []); }, []);
return ( const value = useMemo(
<ClientContext.Provider () => ({
value={{
pairings, pairings,
fetching, fetching,
loading, loading,
@ -240,6 +256,26 @@ export function ClientContextProvider({ children }: { children: ReactNode | Reac
connect, connect,
disconnect, disconnect,
setChains, setChains,
}),
[
pairings,
fetching,
loading,
balances,
accounts,
chains,
client,
session,
connect,
disconnect,
setChains,
],
);
return (
<ClientContext.Provider
value={{
...value,
}} }}
> >
{children} {children}