frontend: integrate wallet connect v2

frontend/package.json

@@ -26,7 +26,7 @@
     "@metamask/onboarding": "^1.0.1",
     "@vuelidate/core": "^2.0.0-alpha.43",
     "@vuelidate/validators": "^2.0.0-alpha.31",
-    "@walletconnect/web3-provider": "^1.7.8",
+    "@walletconnect/ethereum-provider": "^2.3.2",
     "autoprefixer": "^10",
     "ethers": "^5.5.1",
     "lodash.debounce": "^4.0.8",

frontend/src/components/WalletMenu.vue

@@ -84,6 +84,7 @@ const walletOptions = ref([
   {
     name: 'WalletConnect',
     icon: new URL('../assets/images/walletconnect.svg', import.meta.url).href,
+    classes: 'w-16 h-16',
     description: 'Connect using mobile wallet',
     connect: connectWalletConnect,
     connecting: connectingWalletConnect,

frontend/src/services/web3-provider/util-export.ts

@@ -5,8 +5,6 @@
 import { CoinbaseWalletSDK } from '@coinbase/wallet-sdk';
 import detectEthereumProvider from '@metamask/detect-provider';
 import MetaMaskOnboarding from '@metamask/onboarding';
-// eslint-disable-next-line @typescript-eslint/ban-ts-comment
-// @ts-ignore TODO: Install & use type declarations once we migrate to WalletConnect v2
-import WalletConnect from '@walletconnect/web3-provider/dist/umd/index.min.js';
+import WalletConnect from '@walletconnect/ethereum-provider';
 
 export { CoinbaseWalletSDK, detectEthereumProvider, MetaMaskOnboarding, WalletConnect };

frontend/src/services/web3-provider/walletconnect-provider.ts

@@ -1,22 +1,35 @@
 import { hexValue } from 'ethers/lib/utils';
 
-import { EthereumProvider } from '@/services/web3-provider/ethereum-provider';
-import type { Eip1193Provider } from '@/services/web3-provider/types';
+import type { Eip1193Provider } from '@/services/web3-provider';
+import { EthereumProvider } from '@/services/web3-provider';
 import { WalletConnect } from '@/services/web3-provider/util-export';
 
+const BEAMER_PROJECT_ID = 'b0909ba73ce9e30c4decb50a963c9b2a';
+
 export async function createWalletConnectProvider(rpcList: {
   [chainId: string]: string;
 }): Promise<WalletConnectProvider | undefined> {
-  const provider = new WalletConnect({
-    rpc: rpcList,
-  }) as typeof WalletConnect;
+  const provider = await WalletConnect.init({
+    chains: Object.keys(rpcList).map((chainId) => parseInt(chainId)),
+    projectId: BEAMER_PROJECT_ID,
+    rpcMap: rpcList,
+  });
+
+  // Fixes the lack of promise resolution in `provider.enable()` when modal is closed
+  const modalClosed = new Promise((resolve) => {
+    provider.modal?.subscribeModal(async (newState) => {
+      if (!newState.open) {
+        resolve(undefined);
+      }
+    });
+  });
+
+  const enabled = provider.enable();
 
-  await provider.enable();
+  await Promise.race([modalClosed, enabled]);
 
   if (provider.connected) {
-    const walletConnectProvider = new WalletConnectProvider(
-      provider as unknown as Eip1193Provider,
-    );
+    const walletConnectProvider = new WalletConnectProvider(provider);
     await walletConnectProvider.init();
     return walletConnectProvider;
   }

frontend/tests/setup/window.ts

@@ -0,0 +1,18 @@
+/*
+    WalletConnect's modal library uses the window object for detecting mobile devices
+    therefore a window mock is required globally
+*/
+
+Object.defineProperty(window, 'matchMedia', {
+  writable: true,
+  value: vi.fn().mockImplementation((query) => ({
+    matches: false,
+    media: query,
+    onchange: null,
+    addListener: vi.fn(), // deprecated
+    removeListener: vi.fn(), // deprecated
+    addEventListener: vi.fn(),
+    removeEventListener: vi.fn(),
+    dispatchEvent: vi.fn(),
+  })),
+});

frontend/tests/unit/services/web3-provider/walletconnect-provider.spec.ts

@@ -5,8 +5,8 @@ import * as utils from '@/services/web3-provider/util-export';
 import { generateChain, getRandomEthereumAddress } from '~/utils/data_generators';
 import { MockedWalletConnectConnector, MockedWeb3Provider } from '~/utils/mocks/ethereum-provider';
 
-vi.mock('@ethersproject/providers');
 vi.mock('ethers/lib/utils');
+vi.mock('@ethersproject/providers');
 vi.mock('@/services/web3-provider/util-export');
 
 function mockWeb3Provider(): MockedWeb3Provider {
@@ -21,9 +21,10 @@ function mockWeb3Provider(): MockedWeb3Provider {
 
 function mockWalletConnectConnector(): MockedWalletConnectConnector {
   const walletConnect = new MockedWalletConnectConnector();
+  walletConnect.init = vi.fn().mockImplementation(() => walletConnect);
 
   Object.defineProperty(utils, 'WalletConnect', {
-    value: vi.fn().mockImplementation(() => walletConnect),
+    value: walletConnect,
   });
 
   return walletConnect;

frontend/tests/utils/mocks/ethereum-provider.ts

@@ -35,8 +35,8 @@ export class MockedWalletConnectConnector extends MockedEip1193Provider {
   }
 
   enable = vi.fn();
+  init = vi.fn().mockImplementation(() => new MockedWalletConnectConnector());
 }
-
 export class MockedCoinbaseConnector extends MockedEip1193Provider {
   constructor(public connected: boolean = false) {
     super({ isCoinbase: true });

frontend/vite.config.ts

@@ -22,12 +22,18 @@ export default defineConfig({
       '@': source_directory,
       '~': test_directory,
       config: config_directory,
+      /* 
+        Fixes the misconfigured resolution (import resolves to a .cjs file) inside walletconnect's package.json
+        TODO: remove when they address this issue: https://github.com/WalletConnect/walletconnect-monorepo/issues/1943
+       */
+      '@walletconnect/ethereum-provider': '@walletconnect/ethereum-provider/dist/index.umd.js',
     },
   },
   test: {
     globals: true,
     reporters: ['default', 'junit'],
     outputFile: path.resolve(test_output_directory, 'junit.xml'),
+    setupFiles: path.resolve(test_directory, 'setup', 'window.ts'),
     mockReset: true,
     environment: 'jsdom',
     coverage: {