feat: disconnect pairings

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<void>;
+  disconnectPairing: (pairing?: { topic: string }) => Promise<void>;
   disconnect: () => Promise<void>;
   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,
     ]
   );
 

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<void>;
+  disconnectPairing: (pairing?: { topic: string }) => Promise<void>;
 }
 
 const PairingModal = (props: PairingModalProps) => {
-  const { pairings, connect } = props;
+  const { pairings, connect, disconnectPairing } = props;
   const [pairing, setPairing] = React.useState<PairingTypes.Struct>();
 
   const onConnect = React.useCallback(
@@ -43,11 +44,15 @@ const PairingModal = (props: PairingModalProps) => {
       <SModalTitle>{"Select available pairing or create new one"}</SModalTitle>
       <STable>
         {pairings.map((pairing) => (
-          <Pairing
-            key={pairing.topic}
-            pairing={pairing}
-            onClick={() => onConnect(pairing)}
-          />
+          <div key={pairing.topic} style={{ display: "flex" }}>
+            <Pairing pairing={pairing} onClick={() => onConnect(pairing)} />
+            <span
+              style={{ margin: "auto 20px", cursor: "pointer" }}
+              onClick={() => disconnectPairing(pairing)}
+            >
+              X
+            </span>
+          </div>
         ))}
       </STable>
       <Button onClick={() => connect()}>{`New Pairing`}</Button>

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 <PairingModal pairings={pairings} connect={connect} />;
+        return (
+          <PairingModal
+            pairings={pairings}
+            connect={connect}
+            disconnectPairing={disconnectPairing}
+          />
+        );
       case "request":
         return (
           <RequestModal pending={isRpcRequestPending} result={rpcResult} />