fix(bridge-ui): migrate to wallet connect 2.0 (#14094)

packages/bridge-ui/README.md

@@ -50,4 +50,6 @@ VITE_L2_SIGNAL_SERVICE_ADDRESS=0x1000777700000000000000000000000000000007
 VITE_L3_SIGNAL_SERVICE_ADDRESS=0x1000777700000000000000000000000000000007
 
 VITE_TEST_ERC20=[{"address": "0x9A676e781A523b5d0C0e43731313A708CB607508", "symbol": "BLL", "name": "Bull Token"}, {"address": "0x0DCd1Bf9A1b36cE34237eEaFef220932846BCD82", "symbol": "HORSE", "name": "Horse Token"}]
+
+VITE_WALLETCONNECT_PROJECT_ID=1234567890
 ```

packages/bridge-ui/package.json

@@ -73,14 +73,13 @@
     "@lottiefiles/svelte-lottie-player": "^0.2.0",
     "@sentry/svelte": "^7.54.0",
     "@sveltestack/svelte-query": "^1.6.0",
-    "@wagmi/connectors": "^0.1.1",
-    "@wagmi/core": "^0.8.0",
     "axios": "^1.2.0",
     "buffer": "^6.0.3",
     "debug": "^4.3.4",
     "ethers": "^5.7.1",
     "identicon.js": "^2.3.3",
     "svelte-i18n": "^3.5.1",
-    "svelte-spa-router": "^3.2.0"
+    "svelte-spa-router": "^3.2.0",
+    "wagmi": "^0.12.16"
   }
 }

packages/bridge-ui/src/chain/chains.ts

@@ -1,4 +1,4 @@
-import type { Chain as WagmiChain } from '@wagmi/core';
+import type { Chain as WagmiChain } from 'wagmi';
 
 import Eth from '../components/icons/ETH.svelte';
 import Taiko from '../components/icons/TKO.svelte';
@@ -56,9 +56,8 @@ export const mainnetWagmiChain: WagmiChain = {
   network: '',
   nativeCurrency: { name: 'Ether', symbol: 'ETH', decimals: 18 },
   rpcUrls: {
-    default: {
-      http: [L1_RPC],
-    },
+    default: { http: [L1_RPC] },
+    public: { http: [L1_RPC] },
   },
   blockExplorers: {
     default: {
@@ -75,9 +74,8 @@ export const taikoWagmiChain: WagmiChain = {
   network: '',
   nativeCurrency: { name: 'Ether', symbol: 'ETH', decimals: 18 },
   rpcUrls: {
-    default: {
-      http: [L2_RPC],
-    },
+    default: { http: [L2_RPC] },
+    public: { http: [L2_RPC] },
   },
   blockExplorers: {
     default: {

packages/bridge-ui/src/components/AddressDropdown.svelte

@@ -1,12 +1,13 @@
 <script lang="ts">
   import * as Sentry from '@sentry/svelte';
-  import { disconnect as wagmiDisconnect, RpcError } from '@wagmi/core';
   import { ethers, type Signer } from 'ethers';
   import { onMount } from 'svelte';
   import { slide } from 'svelte/transition';
   import { ClipboardDocument, Power } from 'svelte-heros-v2';
   import { ChevronDown } from 'svelte-heros-v2';
   import { _ } from 'svelte-i18n';
+  import { RpcError } from 'wagmi';
+  import { disconnect as wagmiDisconnect } from 'wagmi/actions';
 
   import { srcChain } from '../store/chain';
   import { signer } from '../store/signer';

packages/bridge-ui/src/components/BridgeForm/AddCustomERC20.svelte

@@ -1,7 +1,7 @@
 <script lang="ts">
-  import { getProvider } from '@wagmi/core';
   import { Contract, ethers } from 'ethers';
   import { Trash } from 'svelte-heros-v2';
+  import { getProvider } from 'wagmi/actions';
 
   import { erc20ABI } from '../../constants/abi';
   import type { Token, TokenDetails } from '../../domain/token';

packages/bridge-ui/src/components/BridgeForm/BridgeForm.svelte

@@ -1,8 +1,9 @@
 <script lang="ts">
   import * as Sentry from '@sentry/svelte';
-  import { type Address, fetchFeeData } from '@wagmi/core';
   import { BigNumber, Contract, ethers, type Signer } from 'ethers';
   import { _ } from 'svelte-i18n';
+  import type { Address } from 'wagmi';
+  import { fetchFeeData } from 'wagmi/actions';
 
   import { chains } from '../../chain/chains';
   import { erc20ABI } from '../../constants/abi';

packages/bridge-ui/src/components/BridgeForm/SelectChain.svelte

@@ -1,7 +1,7 @@
 <script>
   import * as Sentry from '@sentry/svelte';
-  import { UserRejectedRequestError } from '@wagmi/core';
   import { ArrowRight } from 'svelte-heros-v2';
+  import { UserRejectedRequestError } from 'wagmi';
 
   import { mainnetChain, taikoChain } from '../../chain/chains';
   import { destChain, srcChain } from '../../store/chain';

packages/bridge-ui/src/components/BridgeForm/SelectToken.svelte

@@ -1,7 +1,7 @@
 <script lang="ts">
-  import { getProvider } from '@wagmi/core';
   import { Contract, ethers } from 'ethers';
   import { ChevronDown, PlusCircle } from 'svelte-heros-v2';
+  import { getProvider } from 'wagmi/actions';
 
   import { erc20ABI } from '../../constants/abi';
   import type { HTMLBridgeForm } from '../../domain/dom';

packages/bridge-ui/src/components/ChainDropdown.svelte

@@ -1,7 +1,7 @@
 <script lang="ts">
   import * as Sentry from '@sentry/svelte';
-  import { UserRejectedRequestError } from '@wagmi/core';
   import { ChevronDown, ExclamationTriangle } from 'svelte-heros-v2';
+  import { UserRejectedRequestError } from 'wagmi';
 
   import { mainnetChain, taikoChain } from '../chain/chains';
   import type { Chain } from '../domain/chain';

packages/bridge-ui/src/components/ConnectWallet.svelte

@@ -1,12 +1,12 @@
 <script lang="ts">
   import * as Sentry from '@sentry/svelte';
+  import { _ } from 'svelte-i18n';
   import {
-    connect as wagmiConnect,
     Connector,
     ConnectorNotFoundError,
     UserRejectedRequestError,
-  } from '@wagmi/core';
-  import { _ } from 'svelte-i18n';
+  } from 'wagmi';
+  import { connect as wagmiConnect } from 'wagmi/actions';
 
   import { getLogger } from '../utils/logger';
   import { client as wagmiClient } from '../wagmi/client';

packages/bridge-ui/src/components/Faucet/Faucet.svelte

@@ -1,7 +1,7 @@
 <script lang="ts">
   import * as Sentry from '@sentry/svelte';
-  import { UserRejectedRequestError } from '@wagmi/core';
   import { ethers, type Signer } from 'ethers';
+  import { UserRejectedRequestError } from 'wagmi';
 
   import {
     L1_CHAIN_ID,

packages/bridge-ui/src/components/NoticeModal.svelte

@@ -1,6 +1,6 @@
 <script lang="ts">
   import { onMount } from 'svelte';
-  
+
   import type { NoticeModalOpenMethod } from '../domain/modal';
   import Button from './Button.svelte';
   import Modal from './Modal.svelte';

packages/bridge-ui/src/components/Router.svelte

@@ -1,6 +1,6 @@
 <script lang="ts">
   import SvelteRouter from 'svelte-spa-router';
-  
+
   import Home from '../pages/home/Home.svelte';
 
   // TODO: add a NoFound component

packages/bridge-ui/src/components/Tabs/Tab.svelte

@@ -2,7 +2,7 @@
   import { getContext } from 'svelte';
   import type { Writable } from 'svelte/store';
   import { link } from 'svelte-spa-router';
-  
+
   import { key } from './Tabs.svelte';
 
   export let href: string = '';

packages/bridge-ui/src/components/Tabs/Tabs.svelte

@@ -3,8 +3,8 @@
 </script>
 
 <script lang="ts">
-  import { getContext,setContext } from 'svelte';
-  import { type Writable,writable } from 'svelte/store';
+  import { getContext, setContext } from 'svelte';
+  import { type Writable, writable } from 'svelte/store';
 
   // Props
   export let activeTab = '';

packages/bridge-ui/src/components/Transactions/Transaction.svelte

@@ -1,11 +1,11 @@
 <script lang="ts">
   import * as Sentry from '@sentry/svelte';
-  import { UserRejectedRequestError } from '@wagmi/core';
   import { Contract, errors, type Transaction, utils } from 'ethers';
   import { createEventDispatcher } from 'svelte';
   import { onDestroy, onMount } from 'svelte';
   import { ArrowTopRightOnSquare } from 'svelte-heros-v2';
   import { _ } from 'svelte-i18n';
+  import { UserRejectedRequestError } from 'wagmi';
 
   import { bridges } from '../../bridge/bridges';
   import { chains } from '../../chain/chains';

packages/bridge-ui/src/constants/__mocks__/envVars.ts

@@ -56,3 +56,5 @@ export const TEST_ERC20 = [
 ];
 
 export const SENTRY_DSN = 'https://sentry.io/1234567890';
+
+export const WALLETCONNECT_PROJECT_ID = '1234567890';

packages/bridge-ui/src/constants/envVars.ts

@@ -1,7 +1,7 @@
 // TODO: think about a way to blow up the build if env var is missing
 //       dotenv-safe ?
 // TODO: explain each of these env vars
-import type { Address } from '@wagmi/core';
+import type { Address } from 'wagmi';
 
 import type { ChainID } from '../domain/chain';
 
@@ -55,3 +55,6 @@ export const TEST_ERC20: {
 }[] = JSON.parse(import.meta.env?.VITE_TEST_ERC20);
 
 export const SENTRY_DSN: string = import.meta.env?.VITE_SENTRY_DSN;
+
+export const WALLETCONNECT_PROJECT_ID: string = import.meta.env
+  ?.VITE_WALLETCONNECT_PROJECT_ID;

packages/bridge-ui/src/domain/chain.ts

@@ -1,5 +1,5 @@
-import type { Address } from '@wagmi/core';
 import type { ComponentType } from 'svelte';
+import type { Address } from 'wagmi';
 
 export type ChainID = number;
 

packages/bridge-ui/src/domain/relayerApi.ts

@@ -1,4 +1,4 @@
-import type { Address } from '@wagmi/core';
+import type { Address } from 'wagmi';
 
 import type { ChainID } from './chain';
 import type { BridgeTransaction } from './transaction';

packages/bridge-ui/src/domain/token.ts

@@ -1,5 +1,5 @@
-import type { Address } from '@wagmi/core';
 import type { ComponentType } from 'svelte';
+import type { Address } from 'wagmi';
 
 import type { ChainID } from './chain';
 

packages/bridge-ui/src/relayer-api/RelayerAPIService.spec.ts

@@ -1,6 +1,6 @@
-import type { Address } from '@wagmi/core';
 import axios from 'axios';
 import { ethers } from 'ethers';
+import type { Address } from 'wagmi';
 
 import {
   L1_CHAIN_ID,

packages/bridge-ui/src/relayer-api/RelayerAPIService.ts

@@ -1,6 +1,6 @@
-import type { Address } from '@wagmi/core';
 import axios from 'axios';
 import { BigNumber, Contract, ethers } from 'ethers';
+import type { Address } from 'wagmi';
 
 import { chains } from '../chain/chains';
 import { bridgeABI, erc20ABI, tokenVaultABI } from '../constants/abi';

packages/bridge-ui/src/signer/subscriber.ts

@@ -1,6 +1,6 @@
 import * as Sentry from '@sentry/svelte';
-import type { Address } from '@wagmi/core';
 import { constants, type Signer } from 'ethers';
+import type { Address } from 'wagmi';
 
 import type { PaginationInfo } from '../domain/relayerApi';
 import type { BridgeTransaction } from '../domain/transaction';

packages/bridge-ui/src/storage/StorageService.ts

@@ -1,5 +1,5 @@
-import type { Address } from '@wagmi/core';
 import { BigNumber, Contract, ethers } from 'ethers';
+import type { Address } from 'wagmi';
 
 import { chains } from '../chain/chains';
 import { bridgeABI, erc20ABI, tokenVaultABI } from '../constants/abi';

packages/bridge-ui/src/store/transaction.spec.ts

@@ -1,4 +1,4 @@
-import type { ethers,Signer, Transaction } from 'ethers';
+import type { ethers, Signer, Transaction } from 'ethers';
 import { get } from 'svelte/store';
 
 import type { TransactionReceipt } from '../domain/transaction';

packages/bridge-ui/src/utils/getAddressForToken.ts

@@ -1,5 +1,5 @@
-import type { Address } from '@wagmi/core';
 import { Contract, Signer } from 'ethers';
+import type { Address } from 'wagmi';
 
 import { tokenVaultABI } from '../constants/abi';
 import type { Chain } from '../domain/chain';

packages/bridge-ui/src/utils/switchNetwork.spec.ts

@@ -1,12 +1,12 @@
-import { switchNetwork as wagmiSwitchNetwork } from '@wagmi/core';
 import { get } from 'svelte/store';
+import { switchNetwork as wagmiSwitchNetwork } from 'wagmi/actions';
 
 import { L1_CHAIN_ID, L2_CHAIN_ID } from '../constants/envVars';
 import { switchNetwork } from './switchNetwork';
 
 jest.mock('../constants/envVars');
 
-jest.mock('@wagmi/core', () => ({
+jest.mock('wagmi/actions', () => ({
   switchNetwork: jest.fn(),
 }));
 

packages/bridge-ui/src/utils/switchNetwork.ts

@@ -1,5 +1,5 @@
-import { switchNetwork as wagmiSwitchNetwork } from '@wagmi/core';
 import { get } from 'svelte/store';
+import { switchNetwork as wagmiSwitchNetwork } from 'wagmi/actions';
 
 import { srcChain } from '../store/chain';
 import { Deferred } from './Deferred';

packages/bridge-ui/src/vault/tokenVaults.ts

@@ -1,4 +1,4 @@
-import type { Address } from '@wagmi/core';
+import type { Address } from 'wagmi';
 
 import {
   L1_CHAIN_ID,

packages/bridge-ui/src/vite-env.d.ts

@@ -21,6 +21,7 @@ interface ImportMetaEnv {
   readonly VITE_L2_SIGNAL_SERVICE_ADDRESS: string;
   readonly VITE_TEST_ERC20: string;
   readonly VITE_SENTRY_DSN: string;
+  readonly VITE_WALLETCONNECT_PROJECT_ID: string;
 }
 
 interface ImportMeta {

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

@@ -1,9 +1,9 @@
-import { type Chain, configureChains, createClient } from '@wagmi/core';
-import { CoinbaseWalletConnector } from '@wagmi/core/connectors/coinbaseWallet';
-import { MetaMaskConnector } from '@wagmi/core/connectors/metaMask';
-import { WalletConnectConnector } from '@wagmi/core/connectors/walletConnect';
-import { jsonRpcProvider } from '@wagmi/core/providers/jsonRpc';
-import { publicProvider } from '@wagmi/core/providers/public';
+import { type Chain, configureChains, createClient } from 'wagmi';
+import { CoinbaseWalletConnector } from 'wagmi/connectors/coinbaseWallet';
+import { MetaMaskConnector } from 'wagmi/connectors/metaMask';
+import { WalletConnectConnector } from 'wagmi/connectors/walletConnect';
+import { jsonRpcProvider } from 'wagmi/providers/jsonRpc';
+import { publicProvider } from 'wagmi/providers/public';
 
 import {
   L1_CHAIN_ID,
@@ -14,6 +14,7 @@ import {
   L2_CHAIN_NAME,
   L2_EXPLORER_URL,
   L2_RPC,
+  WALLETCONNECT_PROJECT_ID,
 } from '../constants/envVars';
 import { providers } from '../provider/providers';
 import { isMobileDevice } from '../utils/isMobileDevice';
@@ -24,9 +25,8 @@ export const mainnetWagmiChain: Chain = {
   network: '',
   nativeCurrency: { name: 'Ether', symbol: 'ETH', decimals: 18 },
   rpcUrls: {
-    default: {
-      http: [L1_RPC],
-    },
+    default: { http: [L1_RPC] },
+    public: { http: [L1_RPC] },
   },
   blockExplorers: {
     default: {
@@ -42,9 +42,8 @@ export const taikoWagmiChain: Chain = {
   network: '',
   nativeCurrency: { name: 'Ether', symbol: 'ETH', decimals: 18 },
   rpcUrls: {
-    default: {
-      http: [L2_RPC],
-    },
+    default: { http: [L2_RPC] },
+    public: { http: [L2_RPC] },
   },
   blockExplorers: {
     default: {
@@ -73,7 +72,23 @@ export const client = createClient({
     !isMobileDevice() ? new MetaMaskConnector({ chains }) : null,
     new WalletConnectConnector({
       chains,
-      options: { qrcode: true },
+      options: {
+        projectId: WALLETCONNECT_PROJECT_ID,
+        showQrModal: true,
+        qrModalOptions: {
+          themeVariables: {
+          // DaisyUI modal has a z-index of 999 by default
+          // WalletConnect modal has a z-index of 89 by default
+          // Let's increase wc to beat daisyui's modal
+            '--wcm-z-index': '9999',
+            '--wcm-background-color': '#E81899',
+
+            // @ts-ignore
+            // '--wcm-color-fg-1': '#E81899',
+            '--wcm-accent-color': '#E81899',
+          }
+        }
+      },
     }),
     new CoinbaseWalletConnector({
       chains,

packages/bridge-ui/src/wagmi/watcher.ts

@@ -1,4 +1,4 @@
-import { fetchSigner, watchAccount, watchNetwork } from '@wagmi/core';
+import { fetchSigner, watchAccount, watchNetwork } from 'wagmi/actions';
 
 import { mainnetChain, taikoChain } from '../chain/chains';
 import { destChain, srcChain } from '../store/chain';