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

fix: dereference session from client directly

Browse Source
This commit is contained in:
Ben Kremer 2022-02-14 14:05:43 +01:00
parent 623c44e4c2
commit 4d1caa7997
3 changed files with 21 additions and 21 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
dapps/react-dapp-v2-with-ethers/src/App.tsx
View File

@ -59,7 +59,6 @@ export default function App() {
session, session,
disconnect, disconnect,
chain, chain,
setChain,
accounts, accounts,
balances, balances,
isFetchingBalances, isFetchingBalances,
@ -98,6 +97,7 @@ export default function App() {
setChainData(chainData); setChainData(chainData);
}; };
// TODO:
// const onPing = async () => { // const onPing = async () => {
// openPingModal(); // openPingModal();
// await ping(); // await ping();
@ -226,7 +226,7 @@ export default function App() {
return ( return (
<SLayout> <SLayout>
<Column maxWidth={1000} spanHeight> <Column maxWidth={1000} spanHeight>
<Header ping={() => Promise.resolve()} disconnect={disconnect} accounts={accounts} /> <Header ping={() => Promise.resolve()} disconnect={disconnect} session={session} />
<SContent>{isInitializing ? "Loading..." : renderContent()}</SContent> <SContent>{isInitializing ? "Loading..." : renderContent()}</SContent>
</Column> </Column>
<Modal show={!!modal} closeModal={closeModal}> <Modal show={!!modal} closeModal={closeModal}>

11
dapps/react-dapp-v2-with-ethers/src/components/Header.tsx
View File

@ -1,3 +1,4 @@
import { SessionTypes } from "@walletconnect/types";
import * as React from "react"; import * as React from "react";
import styled from "styled-components"; import styled from "styled-components";
@ -49,18 +50,18 @@ const SActiveSession = styled(SActiveAccount as any)`
interface HeaderProps { interface HeaderProps {
ping: () => Promise<void>; ping: () => Promise<void>;
disconnect: () => Promise<void>; disconnect: () => Promise<void>;
accounts: string[]; session: SessionTypes.Created | undefined;
} }
const Header = (props: HeaderProps) => { const Header = (props: HeaderProps) => {
const { ping, disconnect, accounts } = props; const { ping, disconnect, session } = props;
return ( return (
<SHeader {...props}> <SHeader {...props}>
{accounts.length > 0 ? ( {session ? (
<> <>
<SActiveSession> <SActiveSession>
<p>{`Connected with`}</p> <p>{`Connected to`}</p>
<p>{accounts[0]}</p> <p>{session.peer.metadata.name}</p>
</SActiveSession> </SActiveSession>
<SHeaderActions> <SHeaderActions>
<Button outline color="black" onClick={ping}> <Button outline color="black" onClick={ping}>

27
dapps/react-dapp-v2-with-ethers/src/contexts/ClientContext.tsx
View File

@ -67,16 +67,14 @@ export function ClientContextProvider({ children }: { children: ReactNode | Reac
if (typeof client === "undefined") { if (typeof client === "undefined") {
throw new Error("WalletConnect is not initialized"); throw new Error("WalletConnect is not initialized");
} }
if (typeof session === "undefined") { const _session = await client.session.get(client.session.topics[0]);
throw new Error("Session is not connected");
}
await client.disconnect({ await client.disconnect({
topic: session.topic, topic: _session.topic,
reason: ERROR.USER_DISCONNECTED.format(), reason: ERROR.USER_DISCONNECTED.format(),
}); });
}, [client, session]); }, [client]);
const _subscribeToEvents = useCallback(async (_client: Client) => { const _subscribeToClientEvents = useCallback(async (_client: Client) => {
if (typeof _client === "undefined") { if (typeof _client === "undefined") {
throw new Error("WalletConnect is not initialized"); throw new Error("WalletConnect is not initialized");
} }
@ -134,7 +132,7 @@ export function ClientContextProvider({ children }: { children: ReactNode | Reac
}); });
setClient(_client); setClient(_client);
await _subscribeToEvents(_client); await _subscribeToClientEvents(_client);
// TODO: // TODO:
// await _checkPersistedState(_client); // await _checkPersistedState(_client);
} catch (err) { } catch (err) {
@ -142,7 +140,7 @@ export function ClientContextProvider({ children }: { children: ReactNode | Reac
} finally { } finally {
setIsInitializing(false); setIsInitializing(false);
} }
}, [_subscribeToEvents]); }, [_subscribeToClientEvents]);
useEffect(() => { useEffect(() => {
if (!client) { if (!client) {
@ -176,21 +174,22 @@ export function ClientContextProvider({ children }: { children: ReactNode | Reac
setWeb3Provider(web3Provider); setWeb3Provider(web3Provider);
const accounts = await ethereumProvider.enable(); const _accounts = await ethereumProvider.enable();
setAccounts(accounts); const _session = await client.session.get(client.session.topics[0]);
setAccounts(_accounts);
setSession(_session);
setChain(caipChainId); setChain(caipChainId);
try { try {
setIsFetchingBalances(true); setIsFetchingBalances(true);
const balances = await Promise.all( const _balances = await Promise.all(
accounts.map(async account => { _accounts.map(async account => {
const balance = await web3Provider.getBalance(account); const balance = await web3Provider.getBalance(account);
return { symbol: "ETH", balance: utils.formatEther(balance) }; return { symbol: "ETH", balance: utils.formatEther(balance) };
}), }),
); );
setBalances(_balances);
setBalances(balances);
} catch (error: any) { } catch (error: any) {
throw new Error(error); throw new Error(error);
} finally { } finally {