feat(bridge-ui-v2): upgrade walletconnect from v2 to v3

packages/bridge-ui-v2/__mocks__/@wagmi/core.ts

@@ -18,6 +18,6 @@ export const configureChains = vi.fn(() => {
   return { publicClient: 'mockPublicClient' };
 });
 
-export const createConfig = vi.fn(() => {
+export const defaultWagmiConfig = vi.fn(() => {
   return 'mockWagmiConfig';
 });

packages/bridge-ui-v2/package.json

@@ -31,6 +31,7 @@
     "@vitest/coverage-v8": "^0.33.0",
     "@wagmi/cli": "^1.0.1",
     "abitype": "^0.8.7",
+    "ajv": "^8.6.4",
     "autoprefixer": "^10.4.14",
     "daisyui": "3.1.7",
     "dotenv": "^16.3.1",
@@ -40,7 +41,6 @@
     "eslint-plugin-svelte": "^2.26.0",
     "ethereum-address": "^0.0.4",
     "jsdom": "^22.1.0",
-    "ajv": "^8.6.4",
     "lokijs": "^1.5.12",
     "postcss": "^8.4.24",
     "prettier": "^3.0.0",
@@ -58,15 +58,15 @@
   },
   "type": "module",
   "dependencies": {
-    "@wagmi/core": "^1.3.6",
-    "@web3modal/ethereum": "^2.6.2",
-    "@web3modal/html": "^2.6.2",
+    "@wagmi/core": "^1.4.4",
+    "@web3modal/wagmi": "^3.1.0",
     "@zerodevx/svelte-toast": "^0.9.5",
     "axios": "^1.4.0",
     "buffer": "^6.0.3",
     "debug": "^4.3.4",
     "events": "^3.3.0",
     "svelte-i18n": "^3.6.0",
-    "viem": "^1.4.1"
+    "viem": "^1.16.6",
+    "wagmi": "^1.4.4"
   }
 }

packages/bridge-ui-v2/src/components/ConnectButton/ConnectButton.svelte

@@ -16,32 +16,32 @@
 
   function connectWallet() {
     if (web3modalOpen) return;
-    web3modal.openModal();
+    web3modal.open();
   }
 
   function onWeb3Modal(state: { open: boolean }) {
     web3modalOpen = state.open;
   }
 
   onMount(() => {
-    unsubscribeWeb3Modal = web3modal.subscribeModal(onWeb3Modal);
+    unsubscribeWeb3Modal = web3modal.subscribeState(onWeb3Modal);
   });
 
   onDestroy(unsubscribeWeb3Modal);
 </script>
 
 {#if connected}
-  <Button class="hidden sm:flex  pl-[10px] pr-[15px] h-[40px] mr-[8px] rounded-full" type="neutral" on:click={connectWallet}>
+  <Button class="hidden sm:flex  pl-[14px] pr-[20px] h-[38px] mr-[8px] rounded-full" type="neutral" on:click={connectWallet}>
     <span class="body-regular f-items-center">
-      <svelte:component this={EthIcon} size={24} />
+      <svelte:component this={EthIcon} size={20} />
       {#if $ethBalance >= 0}
         <span class="ml-[6px]">{renderEthBalance($ethBalance)}</span>
       {:else}
         <Spinner /> <span>Fetching balance...</span>
       {/if}
     </span>
   </Button>
-  <w3m-core-button class="h-[40px]" balance="hide" />
+  <w3m-button class="h-[38px]" balance="hide" />
 {:else}
   <Button class="px-[20px] py-2 rounded-full w-[215px]" type="neutral" loading={web3modalOpen} on:click={connectWallet}>
     <span class="body-regular f-items-center space-x-2">

packages/bridge-ui-v2/src/components/ThemeButton/ThemeButton.svelte

@@ -2,6 +2,7 @@
   import { onMount } from 'svelte';
 
   import { Icon } from '$components/Icon';
+  import { web3modal } from '$libs/connect';
 
   let theme: 'dark' | 'light' = (localStorage.getItem('theme') as 'dark' | 'light') || 'dark';
   $: isDarkTheme = theme === 'dark';
@@ -11,6 +12,7 @@
     theme = currentTheme === 'dark' ? 'light' : 'dark';
     document.documentElement.setAttribute('data-theme', theme);
     localStorage.setItem('theme', theme);
+    web3modal.setThemeMode(theme);
   }
 
   onMount(() => {

packages/bridge-ui-v2/src/libs/connect/web3modal.ts

@@ -1,57 +1,51 @@
-import { EthereumClient } from '@web3modal/ethereum';
-import { Web3Modal } from '@web3modal/html';
+import { createWeb3Modal } from '@web3modal/wagmi';
 
 import { PUBLIC_WALLETCONNECT_PROJECT_ID } from '$env/static/public';
 import { chains, getChainImages } from '$libs/chain';
 import { wagmiConfig } from '$libs/wagmi';
 
 const projectId = PUBLIC_WALLETCONNECT_PROJECT_ID;
-
-const ethereumClient = new EthereumClient(wagmiConfig, chains);
-
 const chainImages = getChainImages();
 
-export const web3modal = new Web3Modal(
-  {
-    projectId,
-    chainImages,
-    // TODO: can we bring these vars into Tailwind theme?
-    themeVariables: {
-      '--w3m-font-family': '"Public Sans", sans-serif',
-      '--w3m-font-feature-settings': 'normal',
-      '--w3m-button-border-radius': '9999px',
-
-      // Body small regular
-      '--w3m-text-small-regular-size': '14px',
-      '--w3m-text-small-regular-weight': '400',
-      '--w3m-text-small-regular-line-height': '20px',
-
-      // Body regular
-      '--w3m-text-medium-regular-size': '16px',
-      '--w3m-text-medium-regular-weight': '400',
-      '--w3m-text-medium-regular-line-height': '24px',
-      '--w3m-text-medium-regular-letter-spacing': 'normal',
-
-      // Title body bold
-      '--w3m-text-big-bold-size': '18px',
-      '--w3m-text-big-bold-weight': '700',
-      '--w3m-text-big-bold-line-height': '24px',
-
-      '--w3m-background-color': 'var(--primary-brand)',
-      '--w3m-overlay-background-color': 'var(--overlay-background)',
-      '--w3m-background-border-radius': '20px',
-      '--w3m-container-border-radius': '0',
-
-      // Unofficial variables
-      // @ts-ignore
-      '--w3m-color-fg-1': 'var(--primary-content)',
-      '--w3m-color-bg-1': 'var(--primary-background)',
-      '--w3m-color-bg-2': 'var(--neutral-background)',
-      '--w3m-color-overlay': 'none',
-      '--w3m-accent-color': 'var(--neutral-background)',
-      '--w3m-accent-fill-color': 'var(--dark-background)',
-    },
-    themeMode: (localStorage.getItem('theme') as 'dark' | 'light') ?? 'dark',
+export const web3modal = createWeb3Modal({
+  wagmiConfig,
+  projectId,
+  chains,
+  chainImages,
+  themeVariables: {
+    '--w3m-font-family': '"Public Sans", sans-serif',
+    '--w3m-accent': 'var(--primary-brand)',
+
+    // Body small regular
+    // @ts-ignore
+    '--w3m-text-small-regular-line-height': '20px',
+
+    // Body regular
+    // @ts-ignore
+    '--w3m-text-medium-regular-size': '16px',
+    '--w3m-text-medium-regular-weight': '400',
+    '--w3m-text-medium-regular-line-height': '24px',
+    '--w3m-text-medium-regular-letter-spacing': 'normal',
+
+    // Title body bold
+    // @ts-ignore
+    '--w3m-text-big-bold-size': '18px',
+    '--w3m-text-big-bold-weight': '700',
+    '--w3m-text-big-bold-line-height': '24px',
+
+    // @ts-ignore
+    '--w3m-background-color': 'var(--primary-brand)',
+    '--w3m-overlay-background-color': 'var(--overlay-background)',
+    '--w3m-background-border-radius': '20px',
+    '--w3m-container-border-radius': '0',
+
+    // Unofficial variables
+    // @ts-ignore
+    '--w3m-color-fg-1': 'var(--primary-content)',
+    '--w3m-color-bg-1': 'var(--primary-background)',
+    '--w3m-color-bg-2': 'var(--neutral-background)',
+    '--w3m-color-overlay': 'none',
+    '--w3m-accent-fill-color': 'var(--dark-background)',
   },
-  ethereumClient,
-);
+  themeMode: (localStorage.getItem('theme') as 'dark' | 'light') ?? 'dark',
+});

packages/bridge-ui-v2/src/libs/relayer/RelayerAPIService.test.ts

@@ -6,6 +6,7 @@ import { RelayerAPIService } from './RelayerAPIService';
 vi.mock('axios');
 
 vi.mock('@wagmi/core');
+vi.mock('@web3modal/wagmi');
 
 vi.mock('$libs/chain', () => {
   return {

packages/bridge-ui-v2/src/libs/util/mergeTransactions.test.ts

@@ -6,6 +6,7 @@ import { mergeAndCaptureOutdatedTransactions } from '$libs/util/mergeTransaction
 
 function setupMocks() {
   vi.mock('@wagmi/core');
+  vi.mock('@web3modal/wagmi');
 
   vi.mock('$libs/chain', () => {
     return {

packages/bridge-ui-v2/src/libs/wagmi/client.ts

@@ -1,15 +1,12 @@
-import { configureChains, createConfig } from '@wagmi/core';
-import { w3mConnectors, w3mProvider } from '@web3modal/ethereum';
+import { configureChains } from '@wagmi/core';
+import { publicProvider } from '@wagmi/core/providers/public';
+import { defaultWagmiConfig, walletConnectProvider } from '@web3modal/wagmi';
 
 import { PUBLIC_WALLETCONNECT_PROJECT_ID } from '$env/static/public';
 import { chains } from '$libs/chain';
 
 const projectId = PUBLIC_WALLETCONNECT_PROJECT_ID;
 
-export const { publicClient } = configureChains(chains, [w3mProvider({ projectId })]);
+export const { publicClient } = configureChains(chains, [walletConnectProvider({ projectId }), publicProvider()]);
 
-export const wagmiConfig = createConfig({
-  autoConnect: true,
-  connectors: w3mConnectors({ projectId, chains }),
-  publicClient,
-});
+export const wagmiConfig = defaultWagmiConfig({ chains, projectId });