nuxt.config.js

@@ -181,6 +181,19 @@ export default {
       config.module.rules.push({
         test: /\.bin$/,
         use: 'arraybuffer-loader'
+      },
+      {
+        test: /node_modules[\\/]@walletconnect/,
+        use: {
+          loader: 'babel-loader',
+          options: {
+            presets: ['@babel/preset-env'],
+            plugins: [
+              '@babel/plugin-proposal-optional-chaining',
+              '@babel/plugin-proposal-nullish-coalescing-operator'
+            ]
+          }
+        }
       })
     },
     plugins: [

package.json

@@ -23,13 +23,17 @@
     "@apollo/client": "^3.3.20",
     "@metamask/onboarding": "^1.0.0",
     "@nuxtjs/moment": "^1.6.0",
-    "@walletconnect/web3-provider": "1.7.8",
+    "@tornado/snarkjs": "0.1.20-p2",
+    "@tornado/websnark": "0.0.4-p1",
+    "@walletconnect/ethereum-provider": "^2.8.6",
+    "@walletconnect/modal": "^2.5.9",
     "ajv": "^6.10.2",
     "arraybuffer-loader": "^1.0.8",
     "base-path-converter": "^1.0.2",
     "bignumber.js": "^9.0.0",
     "bloomfilter.js": "^1.0.2",
     "circomlibjs": "0.1.2",
+    "cross-env": "7.0.3",
     "crypto": "^1.0.1",
     "dotenv": "^8.2.0",
     "eth-ens-namehash": "^2.0.8",
@@ -53,10 +57,7 @@
     "vue-clipboard2": "^0.3.1",
     "vue-i18n": "^8.15.4",
     "vuex-persistedstate": "^2.7.0",
-    "web3": "1.5.2",
-    "cross-env": "7.0.3",
-    "@tornado/snarkjs": "0.1.20-p2",
-    "@tornado/websnark": "0.0.4-p1"
+    "web3": "1.5.2"
   },
   "devDependencies": {
     "@nuxtjs/eslint-config": "^1.1.2",

services/walletConnect.js

@@ -1,50 +1,69 @@
+// Imports
+
 import BN from 'bignumber.js'
-import WalletConnectProvider from '@walletconnect/web3-provider'
+import { EthereumProvider } from '@walletconnect/ethereum-provider'
+import networkConfig, { enabledChains } from '@/networkConfig'
 
-import { NETWORKS } from '@/constants'
-import networkConfig from '@/networkConfig'
+// Build an array of the first RPC URL for each network in a reduce
+const createRpcMapIterator = (accumulator, chainId) => {
+  // Get RPCs urls
+  const { rpcUrls } = networkConfig[`netId${chainId}`]
 
-const { WC_BRIDGE } = process.env
-
-const WALLET_CONNECT_INTERVAL = 1000
-const SUPPORTED_WALLETS = ['metamask', 'trust', 'imtoken', 'genericWeb3']
-
-const RECONNECT_TIME = 3600000 // 1 hour
-
-const getFirstRpcUrls = (acc, netId) => {
-  const { rpcUrls } = networkConfig[`netId${netId}`]
+  // Choose for each network the first rpc's url
   const [{ url }] = Object.values(rpcUrls)
 
-  return { ...acc, [netId]: url }
+  // Append and continue
+  return { ...accumulator, [chainId]: url }
 }
 
-const RPC = NETWORKS.reduce(getFirstRpcUrls, {})
+// const walletConnectInterval = 1000 // TODO: Check if we still need
+const reconnectInterval = 3600000 // 1 hour
+const supportedWallets = ['metamask', 'trust', 'imtoken', 'genericWeb3']
+const rpcMap = enabledChains.reduce(createRpcMapIterator, {})
 
-const walletConnectConnector = (chainId) => {
+const walletConnectConnector = async (chainId) => {
   try {
     const prevConnection = localStorage.getItem('walletconnectTimeStamp')
 
-    if (new BN(Date.now()).minus(prevConnection).isGreaterThanOrEqualTo(RECONNECT_TIME)) {
+    if (new BN(Date.now()).minus(prevConnection).isGreaterThanOrEqualTo(reconnectInterval)) {
       localStorage.removeItem('walletconnect')
     }
 
-    const provider = new WalletConnectProvider({
-      chainId,
-      rpc: RPC,
-      pollingInterval: WALLET_CONNECT_INTERVAL,
-      qrcodeModalOptions: {
-        mobileLinks: SUPPORTED_WALLETS
-      },
-      bridge: WC_BRIDGE
+    const optionalChains = enabledChains.filter((chain) => chain !== chainId)
+
+    const provider = await EthereumProvider.init({
+      projectId: process.env.WC_PROJECT_ID,
+      relayUrl: process.env.WC_BRIDGE,
+      chains: [chainId],
+      optionalChains,
+      rpcMap,
+      methods: [
+        'eth_sendTransaction',
+        'personal_sign',
+        'eth_signTypedData_v4',
+        'eth_getEncryptionPublicKey',
+        'eth_decrypt',
+        'eth_getBalance',
+        'eth_getTransactionReceipt',
+        'eth_accounts',
+        'eth_chainId',
+        'wallet_addEthereumChain',
+        'wallet_switchEthereumChain'
+      ],
+      showQrModal: true,
+      qrModalOptions: {
+        mobileWallets: supportedWallets
+      }
     })
 
     provider.injectedRequest = provider.enable
 
     localStorage.setItem('walletconnectTimeStamp', Date.now())
+
     return provider
   } catch (err) {
-    console.log(err)
-    throw new Error('WalletConnect error: ', err)
+    console.error(err)
+    throw new Error('WalletConnectConnector error: ', err)
   }
 }
 

store/metamask.js

@@ -402,6 +402,7 @@ const actions = {
       if (providerName === 'walletConnect') {
         await dispatch(listener, { provider })
       }
+
       const address = await this.$provider.initProvider(provider, {})
 
       if (!address) {
@@ -421,8 +422,8 @@ const actions = {
       await dispatch('updateAccountBalance', address)
 
       if (getters.isWalletConnect) {
-        if (provider.wc.peerMeta) {
-          commit('SET_WALLET_NAME', provider.wc.peerMeta.name)
+        if (provider.signer.client.name) {
+          commit('SET_WALLET_NAME', provider.signer.client.name)
         }
       }
 
@@ -457,33 +458,33 @@ const actions = {
     const { enabled } = rootState.loading
 
     try {
-      provider.wc.on('disconnect', (error, payload) => {
+      provider.on('disconnect', (error, payload) => {
         if (state.isReconnecting) {
           console.warn('Provider reconnect payload', { payload, error, isReconnecting: state.isReconnecting })
 
           if (enabled) {
             dispatch('loading/disable', {}, { root: true })
           }
+
           commit('SET_RECONNECTING', false)
-          return
-        }
+        } else {
+          const prevConnection = localStorage.getItem('walletconnectTimeStamp')
 
-        const prevConnection = localStorage.getItem('walletconnectTimeStamp')
+          const isPrevConnection = new BN(Date.now()).minus(prevConnection).isGreaterThanOrEqualTo(5000)
 
-        const isPrevConnection = new BN(Date.now()).minus(prevConnection).isGreaterThanOrEqualTo(5000)
+          if (isPrevConnection) {
+            console.warn('Provider disconnect payload', {
+              payload,
+              error,
+              isReconnecting: state.isReconnecting
+            })
 
-        if (isPrevConnection) {
-          console.warn('Provider disconnect payload', {
-            payload,
-            error,
-            isReconnecting: state.isReconnecting
-          })
+            dispatch('onLogOut')
+          }
 
-          dispatch('onLogOut')
-        }
-
-        if (enabled) {
-          dispatch('loading/disable', {}, { root: true })
+          if (enabled) {
+            dispatch('loading/disable', {}, { root: true })
+          }
         }
       })
     } catch (err) {

store/snark.js

@@ -55,6 +55,7 @@ async function fetchFile({ url, name, getProgress, id, retryAttempt = 0 }) {
       headers: {
         'Content-Type': 'application/x-www-form-urlencoded'
       },
+      timeout: 10_000,
       onDownloadProgress: (progressEvent) => {
         if (typeof getProgress === 'function') {
           const progress = Math.round((progressEvent.loaded * 100) / 9626311)