diff --git a/advanced/dapps/react-dapp-v2/src/contexts/ClientContext.tsx b/advanced/dapps/react-dapp-v2/src/contexts/ClientContext.tsx index 0ca8990d1..3d4a6662a 100644 --- a/advanced/dapps/react-dapp-v2/src/contexts/ClientContext.tsx +++ b/advanced/dapps/react-dapp-v2/src/contexts/ClientContext.tsx @@ -37,6 +37,7 @@ interface IContext { client: Client | undefined; session: SessionTypes.Struct | undefined; connect: (pairing?: { topic: string }) => Promise; + disconnectPairing: (pairing?: { topic: string }) => Promise; disconnect: () => Promise; isInitializing: boolean; chains: string[]; @@ -192,6 +193,21 @@ export function ClientContextProvider({ [chains, client, onSessionConnected] ); + const disconnectPairing = useCallback( + async (pairing: any) => { + if (typeof client === "undefined") { + throw new Error("WalletConnect is not initialized"); + } + if (typeof pairing === "undefined") { + throw new Error("Pairing is not defined"); + } + + await client.core.pairing.disconnect({ topic: pairing?.topic }); + setPairings(client.pairing.getAll({ active: true })); + }, + [client] + ); + const disconnect = useCallback(async () => { if (typeof client === "undefined") { throw new Error("WalletConnect is not initialized"); @@ -260,6 +276,7 @@ export function ClientContextProvider({ ); console.log("RESTORED SESSION:", _session); await onSessionConnected(_session); + return _session; } }, @@ -375,6 +392,7 @@ export function ClientContextProvider({ setChains, setRelayerRegion, origin, + disconnectPairing, }), [ pairings, @@ -392,6 +410,7 @@ export function ClientContextProvider({ setChains, setRelayerRegion, origin, + disconnectPairing, ] ); diff --git a/advanced/dapps/react-dapp-v2/src/modals/PairingModal.tsx b/advanced/dapps/react-dapp-v2/src/modals/PairingModal.tsx index e7d1aadf3..11671dc0b 100644 --- a/advanced/dapps/react-dapp-v2/src/modals/PairingModal.tsx +++ b/advanced/dapps/react-dapp-v2/src/modals/PairingModal.tsx @@ -13,10 +13,11 @@ import toast from "react-hot-toast"; interface PairingModalProps { pairings: PairingTypes.Struct[]; connect: (pairing?: { topic: string }) => Promise; + disconnectPairing: (pairing?: { topic: string }) => Promise; } const PairingModal = (props: PairingModalProps) => { - const { pairings, connect } = props; + const { pairings, connect, disconnectPairing } = props; const [pairing, setPairing] = React.useState(); const onConnect = React.useCallback( @@ -43,11 +44,15 @@ const PairingModal = (props: PairingModalProps) => { {"Select available pairing or create new one"} {pairings.map((pairing) => ( - onConnect(pairing)} - /> +
+ onConnect(pairing)} /> + disconnectPairing(pairing)} + > + X + +
))}
diff --git a/advanced/dapps/react-dapp-v2/src/pages/index.tsx b/advanced/dapps/react-dapp-v2/src/pages/index.tsx index 6827e2f7d..adf346ed8 100644 --- a/advanced/dapps/react-dapp-v2/src/pages/index.tsx +++ b/advanced/dapps/react-dapp-v2/src/pages/index.tsx @@ -79,6 +79,7 @@ const Home: NextPage = () => { setChains, setRelayerRegion, origin, + disconnectPairing, } = useWalletConnectClient(); // Use `JsonRpcContext` to provide us with relevant RPC methods and states. @@ -524,7 +525,13 @@ const Home: NextPage = () => { if (typeof client === "undefined") { throw new Error("WalletConnect is not initialized"); } - return ; + return ( + + ); case "request": return (