Merge branch 'alpha-6' into alpha-6-update-readme

taikoxyz · Jan 4, 2024 · 6263c15 · 6263c15
2 parents 7b49481 + 933b1f0
commit 6263c15
Show file tree

Hide file tree

Showing 16 changed files with 565 additions and 905 deletions.
diff --git a/packages/bridge-ui-v2/__mocks__/@wagmi/core.ts b/packages/bridge-ui-v2/__mocks__/@wagmi/core.ts
@@ -40,6 +40,6 @@ export const configureChains = vi.fn().mockReturnValue({
   publicClient: mockPublicClient,
 });
 
-export const createConfig = vi.fn(() => {
+export const defaultWagmiConfig = vi.fn(() => {
   return 'mockWagmiConfig';
 });
diff --git a/packages/bridge-ui-v2/package.json b/packages/bridge-ui-v2/package.json
@@ -59,9 +59,8 @@
   },
   "type": "module",
   "dependencies": {
-    "@wagmi/core": "^1.4.6",
-    "@web3modal/ethereum": "^2.7.1",
-    "@web3modal/html": "^2.7.1",
+    "@wagmi/core": "^1.4.13",
+    "@web3modal/wagmi": "^3.5.3",
     "@zerodevx/svelte-toast": "^0.9.5",
     "axios": "^1.6.1",
     "buffer": "^6.0.3",

diff --git a/packages/bridge-ui-v2/src/components/ConnectButton/ConnectButton.svelte b/packages/bridge-ui-v2/src/components/ConnectButton/ConnectButton.svelte
@@ -3,48 +3,32 @@
   import { t } from 'svelte-i18n';
 
   import { Button } from '$components/Button';
-  import { EthIcon, Icon } from '$components/Icon';
-  import { Spinner } from '$components/Spinner';
+  import { Icon } from '$components/Icon';
   import { web3modal } from '$libs/connect';
-  import { renderEthBalance } from '$libs/util/balance';
   import { noop } from '$libs/util/noop';
-  import { ethBalance } from '$stores/balance';
   export let connected = false;
 
   let web3modalOpen = false;
   let unsubscribeWeb3Modal = noop;
 
   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-[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={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-[38px]" balance="hide" />
+  <w3m-button />
 {: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">

diff --git a/packages/bridge-ui-v2/src/components/ThemeButton/ThemeButton.svelte b/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';
   import { Theme, theme } from '$stores/theme';
 
   $: isDarkTheme = $theme === Theme.DARK;
@@ -11,6 +12,7 @@
     const newTheme = currentTheme === Theme.DARK ? Theme.LIGHT : Theme.DARK;
     document.documentElement.setAttribute('data-theme', newTheme);
     localStorage.setItem('theme', newTheme);
+    web3modal.setThemeMode(newTheme);
     $theme = newTheme;
   }
 

diff --git a/packages/bridge-ui-v2/src/i18n/en.json b/packages/bridge-ui-v2/src/i18n/en.json
@@ -188,6 +188,7 @@
     "destination": "Destination",
     "edit": "Edit",
     "error": "Error",
+    "fetching_balance": "Fetching balance...",
     "from": "From",
     "id": "ID",
     "loading": "Loading",

diff --git a/packages/bridge-ui-v2/src/libs/bridge/getContractAddressByType.test.ts b/packages/bridge-ui-v2/src/libs/bridge/getContractAddressByType.test.ts
@@ -8,7 +8,7 @@ const SRC_CHAIN_ID = 1;
 const DEST_CHAIN_ID = 2;
 vi.mock('@wagmi/core');
 vi.mock('$customToken', () => ({ customToken: [] }));
-
+vi.mock('@web3modal/wagmi');
 vi.mock('$bridgeConfig', () => ({
   routingContractsMap: {
     1: {

diff --git a/packages/bridge-ui-v2/src/libs/connect/web3modal.ts b/packages/bridge-ui-v2/src/libs/connect/web3modal.ts
@@ -1,57 +1,23 @@
-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(--dialog-background)',
-      '--w3m-color-bg-2': 'var(--neutral-background)',
-      '--w3m-color-overlay': 'none',
-      '--w3m-accent-color': 'var(--neutral-accent)',
-      '--w3m-accent-fill-color': 'var(--primary-content)',
-    },
-    themeMode: (localStorage.getItem('theme') as 'dark' | 'light') ?? 'dark',
+export const web3modal = createWeb3Modal({
+  wagmiConfig,
+  projectId,
+  chains,
+  chainImages,
+  themeVariables: {
+    '--w3m-color-mix': 'var(--neutral-background)',
+    '--w3m-color-mix-strength': 20,
+    '--w3m-font-family': '"Public Sans", sans-serif',
+    '--w3m-border-radius-master': '9999px',
+    '--w3m-accent': 'var(--primary-brand)',
   },
-  ethereumClient,
-);
+  themeMode: (localStorage.getItem('theme') as 'dark' | 'light') ?? 'dark',
+});
diff --git a/packages/bridge-ui-v2/src/libs/relayer/RelayerAPIService.test.ts b/packages/bridge-ui-v2/src/libs/relayer/RelayerAPIService.test.ts
@@ -6,6 +6,7 @@ import { RelayerAPIService } from './RelayerAPIService';
 function setupMocks() {
   vi.mock('axios');
   vi.mock('@wagmi/core');
+  vi.mock('@web3modal/wagmi');
   vi.mock('$customToken', () => {
     return {
       customToken: [

diff --git a/packages/bridge-ui-v2/src/libs/util/mergeTransactions.test.ts b/packages/bridge-ui-v2/src/libs/util/mergeTransactions.test.ts
@@ -6,7 +6,7 @@ import { mergeAndCaptureOutdatedTransactions } from '$libs/util/mergeTransaction
 
 function setupMocks() {
   vi.mock('@wagmi/core');
-
+  vi.mock('@web3modal/wagmi');
   vi.mock('$customToken', () => {
     return {
       customToken: [

diff --git a/packages/bridge-ui-v2/src/libs/wagmi/client.ts b/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 });
diff --git a/packages/bridge-ui-v2/src/styles/base.css b/packages/bridge-ui-v2/src/styles/base.css
@@ -30,24 +30,13 @@
     right: 0;
     bottom: 0;
     left: 0;
-    background-image: url(/bg/grid.svg), url(/bg/spotlights.svg), linear-gradient(270deg, #1f1f1f 0%, #000000 100%);
+    background-image: url(/bg/grid-sm.svg), url(/bg/spotlights.svg), linear-gradient(270deg, #1f1f1f 0%, #000000 100%);
     /* No grid background by default */
     background-size: 0, cover, cover;
     background-blend-mode: color-dodge, lighten, multiply;
     z-index: -1;
   }
 
-  @media (min-width: 768px) {
-    [data-theme='dark'] body::before {
-      background-size: 700px, cover, cover;
-    }
-
-    [data-theme='light'] body::before {
-      background-size: 50px, cover, cover;
-    }
-  }
-
-  /* In light mode there is no background image */
   [data-theme='light'] body::before {
     content: '';
     position: fixed;
@@ -57,7 +46,19 @@
     left: 0;
     background-image: url(/bg/grid-sm.svg), url(/bg/spotlights-light.svg),
       linear-gradient(270deg, #e2e2e2 0%, #fff 100%);
-    background-blend-mode: color-dodge, multiply, hard-light;
+    /* No grid background by default */
+    background-size: 0, cover, cover;
+    background-blend-mode: color-dodge, color, hard-light;
     z-index: -1;
   }
+
+  @media (min-width: 768px) {
+    [data-theme='dark'] body::before {
+      background-size: 50px, cover, cover;
+    }
+
+    [data-theme='light'] body::before {
+      background-size: 50px, cover, cover;
+    }
+  }
 }