fix(bridge-ui-v2): fix deployment (#14096)

packages/bridge-ui-v2/.env.example

@@ -58,8 +58,8 @@ export PUBLIC_L3_SIGNAL_SERVICE_ADDRESS=0x
 export PUBLIC_TEST_ERC20=[]
 
 
-# Web3Modal Project ID
-export PUBLIC_WEB3_MODAL_PROJECT_ID=""
+# WalletConnect Project ID
+export PUBLIC_WALLETCONNECT_PROJECT_ID=""
 
 
 # Sentry

packages/bridge-ui-v2/package.json

@@ -44,11 +44,11 @@
   },
   "type": "module",
   "dependencies": {
-    "@wagmi/core": "^1.2.0",
-    "@web3modal/ethereum": "^2.4.7",
-    "@web3modal/html": "^2.4.7",
+    "@web3modal/ethereum": "^2.6.2",
+    "@web3modal/html": "^2.6.2",
     "debug": "^4.3.4",
-    "svelte-i18n": "^3.5.1",
-    "viem": "^1.0.7"
+    "svelte-i18n": "^3.6.0",
+    "viem": "^1.2.9",
+    "wagmi": "^1.3.5"
   }
 }

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

@@ -2,14 +2,15 @@
   import type { ComponentType } from 'svelte';
   import { noop, onDestroy } from 'svelte/internal';
   import { t } from 'svelte-i18n';
+  import type { Chain } from 'wagmi';
 
   import { EthIcon, Icon, TaikoIcon } from '$components/Icon';
   import { PUBLIC_L1_CHAIN_ID, PUBLIC_L2_CHAIN_ID } from '$env/static/public';
-  import { chains, type ExtendedChain } from '$libs/chain';
+  import { chains } from '$libs/chain';
   import { uid } from '$libs/util/uid';
 
   export let label: string;
-  export let onChange: (chain: ExtendedChain) => void = noop;
+  export let onChange: (chain: Chain) => void = noop;
 
   let chainToIconMap: Record<string, ComponentType> = {
     [PUBLIC_L1_CHAIN_ID]: EthIcon,
@@ -18,7 +19,7 @@
 
   let buttonId = `button-${uid()}`;
   let dialogId = `dialog-${uid()}`;
-  let selectedChain: ExtendedChain;
+  let selectedChain: Chain;
   let modalOpen = false;
 
   function closeModal() {
@@ -29,13 +30,13 @@
     modalOpen = true;
   }
 
-  function selectChain(chain: ExtendedChain) {
+  function selectChain(chain: Chain) {
     selectedChain = chain;
     onChange?.(chain); // TODO: data binding? 🤔
     closeModal();
   }
 
-  function onChainKeydown(event: KeyboardEvent, chain: ExtendedChain) {
+  function onChainKeydown(event: KeyboardEvent, chain: Chain) {
     if (event.key === 'Enter') {
       selectChain(chain);
     }

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

@@ -1,3 +1,5 @@
+import type { Chain } from 'wagmi';
+
 import {
   PUBLIC_L1_BRIDGE_ADDRESS,
   PUBLIC_L1_CHAIN_ID,
@@ -15,9 +17,7 @@ import {
   PUBLIC_L2_SIGNAL_SERVICE_ADDRESS,
 } from '$env/static/public';
 
-import type { ExtendedChain } from './types';
-
-export const mainnetChain: ExtendedChain = {
+export const mainnetChain: Chain = {
   id: parseInt(PUBLIC_L1_CHAIN_ID),
   name: PUBLIC_L1_CHAIN_NAME,
   network: 'L1',
@@ -36,14 +36,9 @@ export const mainnetChain: ExtendedChain = {
       url: PUBLIC_L1_EXPLORER_URL,
     },
   },
-  contracts: {
-    bridgeAddress: PUBLIC_L1_BRIDGE_ADDRESS,
-    crossChainSyncAddress: PUBLIC_L1_CROSS_CHAIN_SYNC_ADDRESS,
-    signalServiceAddress: PUBLIC_L1_SIGNAL_SERVICE_ADDRESS,
-  },
 };
 
-export const taikoChain: ExtendedChain = {
+export const taikoChain: Chain = {
   id: parseInt(PUBLIC_L2_CHAIN_ID),
   name: PUBLIC_L2_CHAIN_NAME,
   network: 'L2',
@@ -62,11 +57,19 @@ export const taikoChain: ExtendedChain = {
       url: PUBLIC_L2_EXPLORER_URL,
     },
   },
-  contracts: {
+};
+
+export const chains = [mainnetChain, taikoChain];
+
+export const chainContractsMap = {
+  [PUBLIC_L1_CHAIN_ID]: {
+    bridgeAddress: PUBLIC_L1_BRIDGE_ADDRESS,
+    crossChainSyncAddress: PUBLIC_L1_CROSS_CHAIN_SYNC_ADDRESS,
+    signalServiceAddress: PUBLIC_L1_SIGNAL_SERVICE_ADDRESS,
+  },
+  [PUBLIC_L2_CHAIN_ID]: {
     bridgeAddress: PUBLIC_L2_BRIDGE_ADDRESS,
     crossChainSyncAddress: PUBLIC_L2_CROSS_CHAIN_SYNC_ADDRESS,
     signalServiceAddress: PUBLIC_L2_SIGNAL_SERVICE_ADDRESS,
   },
 };
-
-export const chains = [mainnetChain, taikoChain];

packages/bridge-ui-v2/src/libs/chain/index.ts

@@ -1,2 +1 @@
 export * from './chains';
-export * from './types';

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

@@ -1,11 +1,11 @@
 import { EthereumClient } from '@web3modal/ethereum';
 import { Web3Modal } from '@web3modal/html';
 
-import { PUBLIC_WEB3_MODAL_PROJECT_ID } from '$env/static/public';
+import { PUBLIC_WALLETCONNECT_PROJECT_ID } from '$env/static/public';
 import { chains } from '$libs/chain';
 import { wagmiConfig } from '$libs/wagmi';
 
-const projectId = PUBLIC_WEB3_MODAL_PROJECT_ID;
+const projectId = PUBLIC_WALLETCONNECT_PROJECT_ID;
 
 const ethereumClient = new EthereumClient(wagmiConfig, chains);
 

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

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

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

@@ -1,4 +1,4 @@
-import { watchAccount, watchNetwork /*, watchPublicClient, watchWalletClient*/ } from '@wagmi/core';
+import { watchAccount, watchNetwork /*, watchPublicClient, watchWalletClient*/ } from 'wagmi/actions';
 
 import { getLogger } from '$libs/util/logger';
 import { account } from '$stores/account';

packages/bridge-ui-v2/src/stores/account.ts

@@ -1,4 +1,5 @@
-import type { GetAccountResult, PublicClient } from '@wagmi/core';
 import { writable } from 'svelte/store';
+import type { PublicClient } from 'wagmi';
+import type { GetAccountResult } from 'wagmi/actions';
 
 export const account = writable<GetAccountResult<PublicClient>>();

packages/bridge-ui-v2/src/stores/network.ts

@@ -1,4 +1,4 @@
-import type { GetNetworkResult } from '@wagmi/core';
 import { writable } from 'svelte/store';
+import type { GetNetworkResult } from 'wagmi/actions';
 
 export const network = writable<GetNetworkResult>();