feat(bridge-ui-v2): connect button (#14106)

packages/bridge-ui-v2/.eslintrc.cjs

@@ -33,6 +33,7 @@ module.exports = {
         // TS will take care of this potential error. For more information please visit:
         // https://typescript-eslint.io/linting/troubleshooting/#i-get-errors-from-the-no-undef-rule-about-global-variables-not-being-defined-even-though-there-are-no-typescript-errors
         'no-undef': 'off',
+        '@typescript-eslint/ban-ts-comment': 'off',
       },
     },
   ],

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

@@ -1,40 +1,81 @@
 <script lang="ts">
+  import { onDestroy, onMount } from 'svelte';
   import { t } from 'svelte-i18n';
 
   import { Button } from '$components/Button';
   import { Icon } from '$components/Icon';
   import { LogoWithText } from '$components/Logo';
   import { drawerToggleId } from '$components/SideNavigation';
+  import { Spinner } from '$components/Spinner';
   import { web3modal } from '$libs/connect';
+
+  export let connected = false;
+
+  let web3modalOpen = false;
+  let unsubscribeWeb3Modal: () => void;
+
+  function connectWallet() {
+    web3modal.openModal();
+  }
+
+  function onWeb3Modal(state: { open: boolean }) {
+    if (state.open) {
+      web3modalOpen = true;
+    } else {
+      web3modalOpen = false;
+    }
+  }
+
+  onMount(() => {
+    unsubscribeWeb3Modal = web3modal.subscribeModal(onWeb3Modal);
+  });
+
+  onDestroy(() => {
+    unsubscribeWeb3Modal();
+  });
 </script>
 
 <header
   class="
     sticky-top
     f-between-center
-    bg-primary-background
     z-10
     px-4
     py-[20px]
     border-b
     border-b-divider-border
-    hide-under-b
+    glassy-primary-background
     md:border-b-0
     md:px-10
     md:py-7
     md:justify-end">
   <LogoWithText class="w-[77px] h-[20px] md:hidden" />
 
   <div class="f-items-center justify-end space-x-[10px]">
-    <Button class="px-[20px] py-2 rounded-full" type="neutral" on:click={() => web3modal.openModal()}>
-      <Icon type="user-circle" class="md-show-block" />
-      <span class="body-small-regular">{$t('wallet.connect')}</span>
-    </Button>
+    <!-- 
+      We are gonna make use of Web3Modal core button when we are connected,
+      which comes with interesting features out of the box.
+      https://docs.walletconnect.com/2.0/web/web3modal/html/wagmi/components
+     -->
+    {#if connected}
+      <w3m-core-button balance="show" />
+    {:else}
+      <!-- TODO: fixing the width for English. i18n? -->
+      <Button class="px-[20px] py-2 rounded-full w-[215px]" type="neutral" on:click={connectWallet}>
+        <span class="body-regular f-items-center space-x-2">
+          {#if web3modalOpen}
+            <Spinner />
+            <span>{$t('wallet.status.connecting')}</span>
+          {:else}
+            <Icon type="user-circle" class="md-show-block" />
+            <span>{$t('wallet.connect')}</span>
+          {/if}
+        </span>
+      </Button>
+    {/if}
+
     <label for={drawerToggleId} class="md:hidden">
       <Icon type="bars-menu" />
     </label>
   </div>
-
-  <!-- TODO: think about the possibility of actually using w3m-core-button component -->
-  <!-- <w3m-core-button balance="show" icon="hide" /> -->
 </header>

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

@@ -0,0 +1,13 @@
+<script lang="ts">
+  import { classNames } from '$libs/util/classNames';
+
+  const classes = classNames(
+    'w-6 h-6',
+    'animate-spin',
+    'box-border inline-block',
+    'border-[3px] border-b-transparent rounded-full',
+    $$props.class,
+  );
+</script>
+
+<span class={classes} />

packages/bridge-ui-v2/src/components/Spinner/index.ts

@@ -0,0 +1 @@
+export { default as Spinner } from './Spinner.svelte';

packages/bridge-ui-v2/src/i18n/en.json

@@ -88,11 +88,11 @@
   },
 
   "wallet": {
-    "connect": "Connect Wallet",
+    "connect": "Connect wallet",
     "status": {
       "disconnected": "Disconnected",
       "connected": "Connected",
-      "connecting": "Connecting..."
+      "connecting": "Connecting"
     }
   }
 }

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

@@ -1,7 +1,7 @@
 import { EthereumClient } from '@web3modal/ethereum';
 import { Web3Modal } from '@web3modal/html';
 
-import { PUBLIC_WALLETCONNECT_PROJECT_ID } from '$env/static/public';
+import { PUBLIC_L1_CHAIN_ID, PUBLIC_L2_CHAIN_ID, PUBLIC_WALLETCONNECT_PROJECT_ID } from '$env/static/public';
 import { chains } from '$libs/chain';
 import { wagmiConfig } from '$libs/wagmi';
 
@@ -12,18 +12,54 @@ const ethereumClient = new EthereumClient(wagmiConfig, chains);
 export const web3modal = new Web3Modal(
   {
     projectId,
+    chainImages: {
+      [PUBLIC_L1_CHAIN_ID]: '/ethereum-chain.png',
+      [PUBLIC_L2_CHAIN_ID]: '/taiko-chain.png',
+    },
     // TODO: can we bring these vars into Tailwind theme?
     themeVariables: {
-      '--w3m-background-border-radius': '1.25rem',
-      '--w3m-container-border-radius': '0rem',
-      '--w3m-font-family': 'Public Sans, system-ui, sans-serif',
-      '--w3m-button-border-radius': '9999px',
+      '--w3m-font-family': '"Public Sans", sans-serif',
+      '--w3m-font-feature-settings': 'normal',
+
       '--w3m-accent-color': 'var(--primary-interactive)',
       '--w3m-accent-fill-color': 'var(--primary-content)',
+
+      '--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(--neutral-background)',
-      // '--w3m-color-bg-1': 'var(--primary-background)',
+      '--w3m-overlay-background-color': 'var(--overlay-background)',
+      '--w3m-background-border-radius': '20px',
+      '--w3m-container-border-radius': '0',
+
       // TODO: customize the rest of the theme variables
+
+      // Unofficial variables
+      // @ts-ignore
+      '--w3m-color-fg-1': 'var(--primary-content)',
+      // '--w3m-color-fg-2': '',
+      // '--w3m-color-fg-3': '',
+      '--w3m-color-bg-1': 'var(--primary-background)',
+      '--w3m-color-bg-2': 'var(--neutral-background)',
+      // '--w3m-color-bg-3': '',
+      // '--w3m-color-overlay': 'var(--neutral-background)',
     },
+    themeMode: (localStorage.getItem('theme') as 'dark' | 'light') ?? 'dark',
   },
   ethereumClient,
 );

packages/bridge-ui-v2/src/routes/+layout.svelte

@@ -7,13 +7,16 @@
   import { Header } from '$components/Header';
   import { SideNavigation } from '$components/SideNavigation';
   import { startWatching, stopWatching } from '$libs/wagmi';
+  import { account } from '$stores/account';
+
+  $: connected = Boolean($account?.isConnected);
 
   onMount(startWatching);
   onDestroy(stopWatching);
 </script>
 
 <SideNavigation>
-  <Header />
+  <Header {connected} />
   <main>
     <slot />
   </main>

packages/bridge-ui-v2/src/styles/base.css

@@ -2,7 +2,7 @@
 
 @layer base {
   html {
-    font-family: Public Sans, system-ui, sans-serif;
+    font-family: 'Public Sans', sans-serif;
   }
 
   html,

packages/bridge-ui-v2/src/styles/utilities.css

@@ -21,11 +21,8 @@
     @apply sticky top-0;
   }
 
-  /* TODO: shadow color, vertical length and blur radius are hardcoded */
-  .hide-under-b {
-    /* primary-background[#0B101B => grey-900] */
-    @apply shadow-[0_5px_10px_0_#0B101B];
-    clip-path: inset(0px 0px -10px 0px);
+  .glassy-primary-background {
+    @apply bg-grey-900/60 backdrop-filter backdrop-blur-sm;
   }
 
   /* Flex shortcuts */