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 { PairingTypes, SessionTypes } from "@walletconnect/types";
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 {
DEFAULT_APP_METADATA,
DEFAULT_COSMOS_METHODS,
@ -104,18 +112,25 @@ export function ClientContextProvider({ children }: { children: ReactNode | Reac
}
};
const onSessionConnected = async (incomingSession: SessionTypes.Settled) => {
setSession(incomingSession);
onSessionUpdate(incomingSession.state.accounts, incomingSession.permissions.blockchain.chains);
};
const onSessionUpdate = async (accounts: string[], chains: string[]) => {
const onSessionUpdate = useCallback(async (accounts: string[], chains: string[]) => {
setChains(chains);
setAccounts(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") {
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
QRCodeModal.close();
};
},
[chains, client, onSessionConnected],
);
const disconnect = async () => {
const disconnect = useCallback(async () => {
if (typeof client === "undefined") {
throw new Error("WalletConnect is not initialized");
}
@ -179,7 +196,7 @@ export function ClientContextProvider({ children }: { children: ReactNode | Reac
topic: session.topic,
reason: ERROR.USER_DISCONNECTED.format(),
});
};
}, [client, session]);
const getAccountBalances = async (_accounts: string[]) => {
setFetching(true);
@ -226,9 +243,8 @@ export function ClientContextProvider({ children }: { children: ReactNode | Reac
init();
}, []);
return (
<ClientContext.Provider
value={{
const value = useMemo(
() => ({
pairings,
fetching,
loading,
@ -240,6 +256,26 @@ export function ClientContextProvider({ children }: { children: ReactNode | Reac
connect,
disconnect,
setChains,
}),
[
pairings,
fetching,
loading,
balances,
accounts,
chains,
client,
session,
connect,
disconnect,
setChains,
],
);
return (
<ClientContext.Provider
value={{
...value,
}}
>
{children}