refactor(react-dapp-v2): replaces legacy qrcodeModal with web3modalV2 (#78)

dapps/react-dapp-v2/package.json

@@ -16,10 +16,12 @@
     "@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.3",
     "@walletconnect/types": "2.1.3",
     "@walletconnect/utils": "2.1.3",
+    "@web3modal/core": "2.0.0-beta.4",
+    "@web3modal/ethereum": "2.0.0-beta.4",
+    "@web3modal/ui": "2.0.0-beta.4",
     "axios": "^0.21.1",
     "blockies-ts": "^1.0.0",
     "bs58": "^5.0.0",

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

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