wip

package.json

@@ -37,7 +37,6 @@
   "resolutions": {
     "elliptic": "^6.6.1"
   },
-  "dependencies": {},
   "devDependencies": {
     "@lavamoat/allow-scripts": "^2.5.1",
     "@lavamoat/preinstall-always-fail": "^2.0.0",
@@ -48,8 +47,8 @@
     "@metamask/onboarding": "^1.0.0",
     "@metamask/sdk": "0.30.1",
     "@openzeppelin/contracts": "4.9.6",
-    "@walletconnect/modal": "^2.6.2",
-    "@web3modal/ethers5": "^3.2.0",
+    "@reown/appkit": "^1.7.6",
+    "@reown/appkit-adapter-ethers5": "^1.7.6",
     "assert": "^2.1.0",
     "base64-sol": "1.1.0",
     "clean-webpack-plugin": "^4.0.0",
@@ -85,5 +84,10 @@
       "@web3modal/ethers5>@coinbase/wallet-sdk>@solana/web3.js>rpc-websockets>utf-8-validate": false
     }
   },
-  "packageManager": "yarn@1.22.22"
+  "packageManager": "yarn@1.22.22",
+  "dependencies": {
+    "@reown/walletkit": "^1.2.4",
+    "@walletconnect/core": "^2.20.3",
+    "@walletconnect/utils": "^2.20.3"
+  }
 }

src/connections.js

@@ -20,29 +20,47 @@ const isAndroid = /Android/i.test(navigator.userAgent);
 
 const sdk = new MetaMaskSDK({ dappMetadata });
 
-export const initializeWeb3Modal = () => {
+export const initializeAppKit = () => {
   if (!isAndroid) {
     try {
       // eslint-disable-next-line node/global-require
-      const { createWeb3Modal, defaultConfig } = require('@web3modal/ethers5');
+      const { createAppKit } = require('@reown/appkit')
+      const { arbitrum, mainnet, sepolia, zksync, optimism, base, unichain } = require('@reown/appkit/networks')
+      const { Ethers5Adapter } = require('@reown/appkit-adapter-ethers5')
 
-      const web3Modal = createWeb3Modal({
-        ethersConfig: defaultConfig({ metadata: dappMetadata }),
-        projectId: 'e6360eaee594162688065f1c70c863b7',
-      });
+      const dappMetadata = {
+        name: 'E2e Test Dapp',
+        description: 'This is the E2e Test Dapp',
+        url: 'https://metamask.github.io/test-dapp/',
+      };
+      const projectId = "e6360eaee594162688065f1c70c863b7"
 
+      const web3Modal = createAppKit({
+        adapters: [new Ethers5Adapter()],
+        networks: [arbitrum, mainnet, sepolia, zksync, optimism, base, unichain],
+        dappMetadata,
+        projectId,
+        features: {
+          email: false,
+          socials: [
+            "farcaster",
+          ],
+          emailShowWallets: true, // default to true
+        },
+      })
       console.log('Web3Modal initialized successfully');
       return web3Modal;
     } catch (error) {
       console.error('Error initializing Web3Modal', error);
     }
+
   }
 
   console.log('Web3Modal is not initialized');
   return null;
 };
 
-export const walletConnect = initializeWeb3Modal();
+export const walletConnect = initializeAppKit();
 
 function _setProviderDetail(provider, name, uuid) {
   const providerDetail = {
@@ -103,6 +121,7 @@ export async function handleWalletConnect(name, button, isConnected) {
     button.classList.remove('btn-danger');
     globalContext.connected = false;
   } else {
+    console.log("WTF")
     const { provider } = walletConnect.getWalletProvider();
     const uuid = provider.signer.uri;
     const providerDetail = _setProviderDetail(provider, name, uuid);

src/index.js

@@ -238,18 +238,21 @@ const isMetaMaskConnected = () =>
 let isWalletConnectConnected = false;
 let isSdkConnected = false;
 
-// TODO: Need to align with @metamask/onboarding
 const isMetaMaskInstalled = () =>
   globalContext.provider && globalContext.provider.isMetaMask;
 
 walletConnectBtn.onclick = () => {
   walletConnect.open();
-  walletConnect.subscribeProvider(() => {
-    handleWalletConnect(
-      'wallet-connect',
-      walletConnectBtn,
-      isWalletConnectConnected,
-    );
+
+  walletConnect.subscribeState((state) => {
+    if (state.open === false && state.isConnected) {
+      // This will run when the modal is closed and the user is connected
+      handleWalletConnect(
+        'wallet-connect',
+        walletConnectBtn,
+        isWalletConnectConnected,
+      );
+    }
   });
 };
 
@@ -259,6 +262,7 @@ sdkConnectBtn.onclick = async () => {
 
 export function updateWalletConnectState(isConnected) {
   isWalletConnectConnected = isConnected;
+
 }
 
 export function updateSdkConnectionState(isConnected) {

webpack.config.js

@@ -16,6 +16,10 @@ module.exports = {
       zlib: false,
       url: false,
     },
+    alias: {
+      // Add this to directly map process/browser to the module
+      'process/browser': require.resolve('process/browser'),
+    },
   },
   devtool: 'eval-source-map',
   mode: 'development',
@@ -44,7 +48,8 @@ module.exports = {
   plugins: [
     new ProvidePlugin({
       Buffer: ['buffer', 'Buffer'],
-      process: ['process/browser'],
+      // Update this to use the string instead of array
+      process: 'process/browser',
     }),
     new CleanWebpackPlugin({ cleanStaleWebpackAssets: false }),
 
@@ -61,4 +66,4 @@ module.exports = {
       ],
     }),
   ],
-};
+};