refactor(dapp-v2): upgrade web3modal to 2.0.0-beta.8 (#89)

dapps/react-dapp-v2/package.json

@@ -19,9 +19,7 @@
     "@walletconnect/sign-client": "2.1.4",
     "@walletconnect/types": "2.1.4",
     "@walletconnect/utils": "2.1.4",
-    "@web3modal/core": "2.0.0-beta.4",
-    "@web3modal/ethereum": "2.0.0-beta.4",
-    "@web3modal/ui": "2.0.0-beta.4",
+    "@web3modal/standalone": "2.0.0-beta.8",
     "axios": "^0.21.1",
     "blockies-ts": "^1.0.0",
     "bs58": "^5.0.0",

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

@@ -1,8 +1,6 @@
 import Client from "@walletconnect/sign-client";
 import { PairingTypes, SessionTypes } from "@walletconnect/types";
-import { ConfigCtrl as ModalConfigCtrl, ModalCtrl } from "@web3modal/core";
-import type { W3mModal } from "@web3modal/ui";
-import "@web3modal/ui";
+import { Web3Modal } from "@web3modal/standalone";
 
 import {
   createContext,
@@ -55,9 +53,9 @@ export const ClientContext = createContext<IContext>({} as IContext);
 /**
  * Web3Modal Config
  */
-ModalConfigCtrl.setConfig({
+const web3Modal = new Web3Modal({
   projectId: DEFAULT_PROJECT_ID,
-  theme: "light" as const,
+  themeMode: "light",
 });
 
 /**
@@ -158,7 +156,7 @@ export function ClientContextProvider({
             .map((namespace) => namespace.chains)
             .flat();
 
-          ModalCtrl.open({ uri, standaloneChains });
+          web3Modal.openModal({ uri, standaloneChains });
         }
 
         const session = await approval();
@@ -171,7 +169,7 @@ export function ClientContextProvider({
         // ignore rejection
       } finally {
         // close modal in case it was open
-        ModalCtrl.close();
+        web3Modal.closeModal();
       }
     },
     [chains, client, onSessionConnected]
@@ -320,23 +318,11 @@ 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) {