Revert "refactor(react-dapp-v2): replaces legacy qrcodeModal with web3modalV2"

This reverts commit 2083b4ae41.

dapps/react-dapp-v2/package.json

@@ -16,12 +16,10 @@
     "@polkadot/util-crypto": "^10.1.2",
     "@solana/web3.js": "^1.36.0",
     "@walletconnect/encoding": "^1.0.1",
+    "@walletconnect/qrcode-modal": "^1.7.8",
     "@walletconnect/sign-client": "2.1.0",
     "@walletconnect/types": "2.1.0",
     "@walletconnect/utils": "2.1.0",
-    "@web3modal/core": "^2.0.0-beta.3",
-    "@web3modal/ethereum": "^2.0.0-beta.3",
-    "@web3modal/ui": "^2.0.0-beta.3",
     "axios": "^0.21.1",
     "blockies-ts": "^1.0.0",
     "bs58": "^5.0.0",

dapps/react-dapp-v2/src/constants/default.ts

@@ -1,6 +1,3 @@
-if (!process.env.NEXT_PUBLIC_PROJECT_ID)
-  throw new Error("`NEXT_PUBLIC_PROJECT_ID` env variable is missing.");
-
 export const DEFAULT_MAIN_CHAINS = [
   // mainnets
   "eip155:1",

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

@@ -1,9 +1,6 @@
 import Client from "@walletconnect/sign-client";
 import { PairingTypes, SessionTypes } from "@walletconnect/types";
-import { ConfigCtrl as ModalConfigCtrl, ModalCtrl } from "@web3modal/core";
+import QRCodeModal from "@walletconnect/qrcode-modal";
-import type { W3mModal } from "@web3modal/ui";
-import "@web3modal/ui";
-
 import {
   createContext,
   ReactNode,
@@ -52,14 +49,6 @@ interface IContext {
  */
 export const ClientContext = createContext<IContext>({} as IContext);
 
-/**
- * Web3Modal Config
- */
-ModalConfigCtrl.setConfig({
-  projectId: DEFAULT_PROJECT_ID,
-  theme: "light" as const,
-});
-
 /**
  * Provider
  */
@@ -153,11 +142,9 @@ export function ClientContextProvider({
 
         // Open QRCode modal if a URI was returned (i.e. we're not connecting an existing pairing).
         if (uri) {
-          // Create a flat array of all requested chains across namespaces.
+          QRCodeModal.open(uri, () => {
-          const standaloneChains = Object.values(requiredNamespaces)
+            console.log("EVENT", "QR Code Modal closed");
-            .map((namespace) => namespace.chains)
+          });
-            .flat();
-          ModalCtrl.open({ uri, standaloneChains });
         }
 
         const session = await approval();
@@ -170,7 +157,7 @@ export function ClientContextProvider({
         // ignore rejection
       } finally {
         // close modal in case it was open
-        ModalCtrl.close();
+        QRCodeModal.close();
       }
     },
     [chains, client, onSessionConnected]
@@ -319,23 +306,11 @@ export function ClientContextProvider({
         ...value,
       }}
     >
-      <>
+      {children}
-        {children}
-        <w3m-modal></w3m-modal>
-      </>
     </ClientContext.Provider>
   );
 }
 
-// Let Typescript know about the custom w3m-modal dom / webcomponent element
-declare global {
-  namespace JSX {
-    interface IntrinsicElements {
-      "w3m-modal": Partial<W3mModal>;
-    }
-  }
-}
-
 export function useWalletConnectClient() {
   const context = useContext(ClientContext);
   if (context === undefined) {