fix: dereference session from client directly

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

@@ -59,7 +59,6 @@ export default function App() {
     session,
     disconnect,
     chain,
-    setChain,
     accounts,
     balances,
     isFetchingBalances,
@@ -98,6 +97,7 @@ export default function App() {
     setChainData(chainData);
   };
 
+  // TODO:
   // const onPing = async () => {
   //   openPingModal();
   //   await ping();
@@ -226,7 +226,7 @@ export default function App() {
   return (
     <SLayout>
       <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>
       </Column>
       <Modal show={!!modal} closeModal={closeModal}>

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

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

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

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