From 911c701ae738a9f2e12c14455c23951845d0c4c2 Mon Sep 17 00:00:00 2001
From: Francisco Ramos <jscriptcoder@gmail.com>
Date: Sat, 24 Jun 2023 02:54:34 +0200
Subject: [PATCH] feat(bridge-ui-v2): use web3modal (#14043)

---
 lefthook.yml                                  |  3 +
 packages/bridge-ui-v2/.env.example            |  8 ++-
 packages/bridge-ui-v2/.vscode/extensions.json |  3 +
 packages/bridge-ui-v2/.vscode/settings.json   |  7 ++
 packages/bridge-ui-v2/package.json            |  2 +
 packages/bridge-ui-v2/src/app.html            |  2 +-
 .../src/components/Button/Button.svelte       |  4 +-
 .../src/components/Header/Header.svelte       | 19 ++++--
 .../src/components/Icon/Icon.svelte           | 10 ++-
 .../components/LinkButton/LinkButton.svelte   | 13 ++--
 .../src/components/Logo/LogoWithText.svelte   |  2 +-
 .../SideNavigation/SideNavigation.svelte      | 20 +++---
 .../bridge-ui-v2/src/libs/classNames/index.ts |  1 -
 .../bridge-ui-v2/src/libs/connect/index.ts    |  1 +
 .../src/libs/connect/web3modal.ts             | 28 ++++++++
 packages/bridge-ui-v2/src/libs/i18n/en.json   | 18 +++++
 packages/bridge-ui-v2/src/libs/i18n/i18n.ts   | 14 ++++
 packages/bridge-ui-v2/src/libs/i18n/index.ts  |  1 +
 .../{classNames => util}/classNames.test.ts   |  0
 .../libs/{classNames => util}/classNames.ts   |  0
 packages/bridge-ui-v2/src/libs/util/logger.ts |  5 ++
 .../bridge-ui-v2/src/libs/wagmi/client.ts     | 68 +++++++++++++++++++
 packages/bridge-ui-v2/src/libs/wagmi/index.ts |  2 +
 .../bridge-ui-v2/src/libs/wagmi/watcher.ts    | 33 +++++++++
 .../bridge-ui-v2/src/routes/+layout.svelte    |  6 +-
 packages/bridge-ui-v2/src/routes/+layout.ts   |  5 ++
 packages/bridge-ui-v2/tailwind.config.js      |  4 ++
 packages/bridge-ui-v2/tsconfig.json           |  4 +-
 pnpm-lock.yaml                                | 29 ++++++--
 29 files changed, 273 insertions(+), 39 deletions(-)
 create mode 100644 packages/bridge-ui-v2/.vscode/extensions.json
 create mode 100644 packages/bridge-ui-v2/.vscode/settings.json
 delete mode 100644 packages/bridge-ui-v2/src/libs/classNames/index.ts
 create mode 100644 packages/bridge-ui-v2/src/libs/connect/index.ts
 create mode 100644 packages/bridge-ui-v2/src/libs/connect/web3modal.ts
 create mode 100644 packages/bridge-ui-v2/src/libs/i18n/en.json
 create mode 100644 packages/bridge-ui-v2/src/libs/i18n/i18n.ts
 create mode 100644 packages/bridge-ui-v2/src/libs/i18n/index.ts
 rename packages/bridge-ui-v2/src/libs/{classNames => util}/classNames.test.ts (100%)
 rename packages/bridge-ui-v2/src/libs/{classNames => util}/classNames.ts (100%)
 create mode 100644 packages/bridge-ui-v2/src/libs/util/logger.ts
 create mode 100644 packages/bridge-ui-v2/src/libs/wagmi/client.ts
 create mode 100644 packages/bridge-ui-v2/src/libs/wagmi/index.ts
 create mode 100644 packages/bridge-ui-v2/src/libs/wagmi/watcher.ts

diff --git a/lefthook.yml b/lefthook.yml
index d63dedfe182..f8ec27262a7 100644
--- a/lefthook.yml
+++ b/lefthook.yml
@@ -5,6 +5,9 @@ pre-commit:
     bridge-ui:
       glob: "packages/bridge-ui/**.{js,svelte,ts}"
       run: pnpm -F bridge-ui lint:fix && git add {staged_files}
+    bridge-ui-v2:
+      glob: "packages/bridge-ui-v2/**.{js,ts,css,svelte}"
+      run: pnpm -F bridge-ui-v2 lint:fix && git add {staged_files}
     protocol_sol:
       glob: "packages/protocol/**.{sol}"
       run: pnpm -F protocol lint:sol && git add {staged_files}
diff --git a/packages/bridge-ui-v2/.env.example b/packages/bridge-ui-v2/.env.example
index 282ca9d172c..8eb1d37b6cb 100644
--- a/packages/bridge-ui-v2/.env.example
+++ b/packages/bridge-ui-v2/.env.example
@@ -1,6 +1,6 @@
 # Chain Names
-export export PUBLIC_L1_CHAIN_NAME=""
-export export PUBLIC_L2_CHAIN_NAME=""
+export PUBLIC_L1_CHAIN_NAME=""
+export PUBLIC_L2_CHAIN_NAME=""
 export PUBLIC_L3_CHAIN_NAME=""
 
 
@@ -58,6 +58,10 @@ export PUBLIC_L3_SIGNAL_SERVICE_ADDRESS=0x
 export PUBLIC_TEST_ERC20=[]
 
 
+# Web3Modal Project ID
+export PUBLIC_WEB3_MODAL_PROJECT_ID=""
+
+
 # Sentry
 export PUBLIC_SENTRY_DSN=https://
 
diff --git a/packages/bridge-ui-v2/.vscode/extensions.json b/packages/bridge-ui-v2/.vscode/extensions.json
new file mode 100644
index 00000000000..0fbc6ecd261
--- /dev/null
+++ b/packages/bridge-ui-v2/.vscode/extensions.json
@@ -0,0 +1,3 @@
+{
+  "recommendations": ["esbenp.prettier-vscode", "eslint.vscode-eslint"]
+}
diff --git a/packages/bridge-ui-v2/.vscode/settings.json b/packages/bridge-ui-v2/.vscode/settings.json
new file mode 100644
index 00000000000..f8f6dcce47e
--- /dev/null
+++ b/packages/bridge-ui-v2/.vscode/settings.json
@@ -0,0 +1,7 @@
+{
+  "editor.defaultFormatter": "esbenp.prettier-vscode",
+  "editor.formatOnSave": true,
+  "editor.codeActionsOnSave": {
+    "source.fixAll.eslint": true
+  }
+}
diff --git a/packages/bridge-ui-v2/package.json b/packages/bridge-ui-v2/package.json
index d03290e2c23..6efdc52d928 100644
--- a/packages/bridge-ui-v2/package.json
+++ b/packages/bridge-ui-v2/package.json
@@ -21,6 +21,7 @@
     "@sveltejs/adapter-auto": "^2.0.0",
     "@sveltejs/adapter-static": "^2.0.2",
     "@sveltejs/kit": "^1.5.0",
+    "@types/debug": "^4.1.7",
     "@typescript-eslint/eslint-plugin": "^5.45.0",
     "@typescript-eslint/parser": "^5.45.0",
     "autoprefixer": "^10.4.14",
@@ -47,6 +48,7 @@
     "@web3modal/ethereum": "^2.4.7",
     "@web3modal/html": "^2.4.7",
     "debug": "^4.3.4",
+    "svelte-i18n": "^3.5.1",
     "viem": "^1.0.7"
   }
 }
diff --git a/packages/bridge-ui-v2/src/app.html b/packages/bridge-ui-v2/src/app.html
index ff9d5e137ce..be167ec1d9b 100644
--- a/packages/bridge-ui-v2/src/app.html
+++ b/packages/bridge-ui-v2/src/app.html
@@ -25,6 +25,6 @@
     </script>
   </head>
   <body data-sveltekit-preload-data="hover">
-    %sveltekit.body%
+    <div style="display: contents">%sveltekit.body%</div>
   </body>
 </html>
diff --git a/packages/bridge-ui-v2/src/components/Button/Button.svelte b/packages/bridge-ui-v2/src/components/Button/Button.svelte
index 4b04c59208a..a81c6abde31 100644
--- a/packages/bridge-ui-v2/src/components/Button/Button.svelte
+++ b/packages/bridge-ui-v2/src/components/Button/Button.svelte
@@ -1,5 +1,5 @@
 <script lang="ts">
-  import { classNames } from '@libs/classNames';
+  import { classNames } from '$libs/util/classNames';
 
   type ButtonType = 'neutral' | 'primary' | 'secondary' | 'accent' | 'info' | 'success' | 'warning' | 'error' | 'ghost';
   type ButtonSize = 'lg' | 'md' | 'sm' | 'xs';
@@ -41,7 +41,7 @@
   };
 
   const classes = classNames(
-    'btn',
+    'btn btn-sm md:btn-md',
     type ? typeMap[type] : null,
     size ? sizeMap[size] : null,
     shape ? shapeMap[shape] : null,
diff --git a/packages/bridge-ui-v2/src/components/Header/Header.svelte b/packages/bridge-ui-v2/src/components/Header/Header.svelte
index 3cb9adefef1..628e762758a 100644
--- a/packages/bridge-ui-v2/src/components/Header/Header.svelte
+++ b/packages/bridge-ui-v2/src/components/Header/Header.svelte
@@ -1,17 +1,26 @@
 <script lang="ts">
+  import { web3modal } from '$libs/connect';
+  import { t } from '$libs/i18n';
+
   import Button from '../Button';
   import Icon from '../Icon';
-  import Logo from '../Logo';
+  import { LogoWithText } from '../Logo';
   import { drawerToogleId } from '../SideNavigation';
 </script>
 
-<header class="sticky md:px-10 md:py-7 flex justify-between">
+<header class="sticky p-2 md:px-10 md:py-7 flex justify-between md:justify-end items-center">
   <div class="flex space-x-2 items-center md:hidden">
-    <label for={drawerToogleId} class="btn btn-ghost drawer-button">
+    <label for={drawerToogleId} class="btn btn-sm md:btn-md btn-ghost drawer-button">
       <Icon type="bars-menu" />
     </label>
-    <Logo />
+    <LogoWithText class="w-[88px] h-[24px]" />
   </div>
 
-  <Button>Connect Wallet</Button>
+  <!-- <Button on:click={() => web3modal.openModal()} class="rounded-full" type="neutral">
+    <Icon type="user-circle" />
+    <span>{$t('wallet.connect')}</span>
+  </Button> -->
+
+  <!-- TODO: think about the possibility of actually using w3m-core-button component -->
+  <w3m-core-button balance="show" icon="hide" />
 </header>
diff --git a/packages/bridge-ui-v2/src/components/Icon/Icon.svelte b/packages/bridge-ui-v2/src/components/Icon/Icon.svelte
index 7e58622bb19..670ab80dee8 100644
--- a/packages/bridge-ui-v2/src/components/Icon/Icon.svelte
+++ b/packages/bridge-ui-v2/src/components/Icon/Icon.svelte
@@ -1,5 +1,5 @@
 <script lang="ts">
-  type IconType = 'bridge' | 'faucet' | 'activities' | 'explorer' | 'guide' | 'bars-menu';
+  type IconType = 'bridge' | 'faucet' | 'activities' | 'explorer' | 'guide' | 'bars-menu' | 'user-circle';
 
   export let type: IconType;
   export let width = 20;
@@ -7,7 +7,7 @@
   export let fillClass = 'fill-primary-icon';
 </script>
 
-<svg {width} {height} viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
+<svg {width} {height} class={$$props.class} viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
   {#if type === 'bridge'}
     <path
       class={fillClass}
@@ -49,5 +49,11 @@
       fill-rule="evenodd"
       clip-rule="evenodd"
       d="M2 4.75C2 4.33579 2.33579 4 2.75 4H17.25C17.6642 4 18 4.33579 18 4.75C18 5.16421 17.6642 5.5 17.25 5.5H2.75C2.33579 5.5 2 5.16421 2 4.75ZM2 10C2 9.58579 2.33579 9.25 2.75 9.25H17.25C17.6642 9.25 18 9.58579 18 10C18 10.4142 17.6642 10.75 17.25 10.75H2.75C2.33579 10.75 2 10.4142 2 10ZM2 15.25C2 14.8358 2.33579 14.5 2.75 14.5H17.25C17.6642 14.5 18 14.8358 18 15.25C18 15.6642 17.6642 16 17.25 16H2.75C2.33579 16 2 15.6642 2 15.25Z" />
+  {:else if type === 'user-circle'}
+    <path
+      class={fillClass}
+      fill-rule="evenodd"
+      clip-rule="evenodd"
+      d="M18 10C18 14.4183 14.4183 18 10 18C5.58172 18 2 14.4183 2 10C2 5.58172 5.58172 2 10 2C14.4183 2 18 5.58172 18 10ZM12.5 7.5C12.5 8.88071 11.3807 10 10 10C8.61929 10 7.5 8.88071 7.5 7.5C7.5 6.11929 8.61929 5 10 5C11.3807 5 12.5 6.11929 12.5 7.5ZM10 12C8.04133 12 6.30187 12.9385 5.20679 14.3904C6.39509 15.687 8.1026 16.5 10 16.5C11.8974 16.5 13.6049 15.687 14.7932 14.3904C13.6981 12.9385 11.9587 12 10 12Z" />
   {/if}
 </svg>
diff --git a/packages/bridge-ui-v2/src/components/LinkButton/LinkButton.svelte b/packages/bridge-ui-v2/src/components/LinkButton/LinkButton.svelte
index 6883ea183a8..5bd86f6b774 100644
--- a/packages/bridge-ui-v2/src/components/LinkButton/LinkButton.svelte
+++ b/packages/bridge-ui-v2/src/components/LinkButton/LinkButton.svelte
@@ -1,18 +1,19 @@
 <script lang="ts">
-  import { classNames } from '@libs/classNames';
-
-  type LinkTarget = '_blank' | '_self';
+  import { classNames } from '$libs/util/classNames';
 
   export let active = false;
   export let href = '/';
-  export let target: LinkTarget = '_self';
+  export let external = false;
 
   $: activeClass = active ? 'bg-primary-interactive hover:bg-primary-interactive-hover' : '';
 </script>
 
 <a
   {href}
-  {target}
-  class={classNames('btn btn-ghost rounded-full body-bold flex justify-start content-center', activeClass)}>
+  target={external ? '_blank' : null}
+  class={classNames(
+    'btn btn-sm md:btn-md btn-ghost p-3 rounded-full body-bold flex justify-start content-center',
+    activeClass,
+  )}>
   <slot />
 </a>
diff --git a/packages/bridge-ui-v2/src/components/Logo/LogoWithText.svelte b/packages/bridge-ui-v2/src/components/Logo/LogoWithText.svelte
index 7e2c5c320a4..0b871cf7f53 100644
--- a/packages/bridge-ui-v2/src/components/Logo/LogoWithText.svelte
+++ b/packages/bridge-ui-v2/src/components/Logo/LogoWithText.svelte
@@ -7,7 +7,7 @@
   export let height = 34;
 </script>
 
-<svg {width} {height} viewBox="0 0 830 228" fill="none" xmlns="http://www.w3.org/2000/svg">
+<svg {width} {height} class={$$props.class} viewBox="0 0 830 228" fill="none" xmlns="http://www.w3.org/2000/svg">
   <path
     class={textFillClass}
     d="M467.907 180.22C463.762 186.119 458.262 190.503 451.406 193.373C444.55 196.084 436.897 197.439 428.447 197.439C421.751 197.439 415.613 196.642 410.032 195.047C404.612 193.453 399.829 191.061 395.683 187.873C391.538 184.525 388.27 180.459 385.878 175.676C383.486 170.734 382.291 165.153 382.291 158.935C382.291 152.08 383.646 146.26 386.356 141.477C389.067 136.535 392.734 132.549 397.357 129.519C402.14 126.49 407.721 124.258 414.098 122.823C420.475 121.229 427.172 120.432 434.187 120.432H466.473C466.473 111.184 464.4 104.01 460.255 98.9079C456.109 93.8059 448.855 91.1753 438.492 91.0158C432.433 91.0158 427.172 92.0521 422.708 94.1248C418.403 96.1975 415.533 99.6253 414.098 104.408H386.117C387.074 97.7121 389.226 92.0521 392.574 87.4285C396.082 82.8049 400.227 78.9784 405.01 75.9492C409.953 72.9199 415.374 70.7675 421.273 69.4921C427.331 68.2166 433.39 67.5788 439.448 67.5788C447.261 67.5788 454.515 68.6151 461.211 70.6878C467.907 72.7605 473.727 76.268 478.669 81.2105C484.25 86.9502 487.996 93.8059 489.91 101.778C491.823 109.749 492.779 118.439 492.779 127.845V195.765H469.103L467.907 180.22ZM466.473 139.803H440.166C435.542 139.803 430.918 140.202 426.295 140.999C421.671 141.637 417.685 143.311 414.337 146.021C411.148 148.572 409.554 152.319 409.554 157.261C409.554 163.32 411.707 167.943 416.011 171.132C420.475 174.161 425.896 175.676 432.274 175.676C437.216 175.676 441.76 175.038 445.905 173.763C450.21 172.487 453.877 170.415 456.906 167.545C459.936 164.516 462.247 160.769 463.842 156.305C465.596 151.681 466.473 146.18 466.473 139.803Z" />
diff --git a/packages/bridge-ui-v2/src/components/SideNavigation/SideNavigation.svelte b/packages/bridge-ui-v2/src/components/SideNavigation/SideNavigation.svelte
index ef59e7520a4..0c49fc9c065 100644
--- a/packages/bridge-ui-v2/src/components/SideNavigation/SideNavigation.svelte
+++ b/packages/bridge-ui-v2/src/components/SideNavigation/SideNavigation.svelte
@@ -4,6 +4,7 @@
 
 <script lang="ts">
   import { PUBLIC_GUIDE_URL, PUBLIC_L2_EXPLORER_URL } from '$env/static/public';
+  import { t } from '$libs/i18n';
 
   import Icon from '../Icon';
   import LinkButton from '../LinkButton';
@@ -20,39 +21,40 @@
   <div class="drawer-side z-1 bg-primary-background">
     <label for={drawerToogleId} class="drawer-overlay bg-overlay-background" />
 
-    <aside class="w-[226px] md:px-4 md:py-8 md:border-r md:border-r-grey-600 h-full">
-      <a href="/" class="hidden md:block">
+    <aside class="w-[226px] p-2 md:px-4 md:py-8 md:border-r md:border-r-grey-600 h-full">
+      <a href="/" class="hidden md:inline-block">
         <LogoWithText />
       </a>
+
       <ul class="menu md:pt-10 space-y-2">
         <li>
           <LinkButton active>
             <Icon type="bridge" fillClass="fill-white" />
-            <span>Bridge</span>
+            <span>{$t('nav.bridge')}</span>
           </LinkButton>
         </li>
         <li>
           <LinkButton href="/faucet">
             <Icon type="faucet" />
-            <span>Faucet</span>
+            <span>{$t('nav.faucet')}</span>
           </LinkButton>
         </li>
         <li>
           <LinkButton href="/activities">
             <Icon type="activities" />
-            <span>Activities</span>
+            <span>{$t('nav.activities')}</span>
           </LinkButton>
         </li>
         <li>
-          <LinkButton href={PUBLIC_L2_EXPLORER_URL} target="_blank">
+          <LinkButton href={PUBLIC_L2_EXPLORER_URL} external>
             <Icon type="explorer" />
-            <span>Exploreer</span>
+            <span>{$t('nav.explorer')}</span>
           </LinkButton>
         </li>
         <li>
-          <LinkButton href={PUBLIC_GUIDE_URL} target="_blank">
+          <LinkButton href={PUBLIC_GUIDE_URL} external>
             <Icon type="guide" />
-            <span>Guide</span>
+            <span>{$t('nav.guide')}</span>
           </LinkButton>
         </li>
       </ul>
diff --git a/packages/bridge-ui-v2/src/libs/classNames/index.ts b/packages/bridge-ui-v2/src/libs/classNames/index.ts
deleted file mode 100644
index b27a95c767a..00000000000
--- a/packages/bridge-ui-v2/src/libs/classNames/index.ts
+++ /dev/null
@@ -1 +0,0 @@
-export { classNames } from './classNames';
diff --git a/packages/bridge-ui-v2/src/libs/connect/index.ts b/packages/bridge-ui-v2/src/libs/connect/index.ts
new file mode 100644
index 00000000000..d898c11b320
--- /dev/null
+++ b/packages/bridge-ui-v2/src/libs/connect/index.ts
@@ -0,0 +1 @@
+export { web3modal } from './web3modal';
diff --git a/packages/bridge-ui-v2/src/libs/connect/web3modal.ts b/packages/bridge-ui-v2/src/libs/connect/web3modal.ts
new file mode 100644
index 00000000000..367afd9dd38
--- /dev/null
+++ b/packages/bridge-ui-v2/src/libs/connect/web3modal.ts
@@ -0,0 +1,28 @@
+import { EthereumClient } from '@web3modal/ethereum';
+import { Web3Modal } from '@web3modal/html';
+
+import { PUBLIC_WEB3_MODAL_PROJECT_ID } from '$env/static/public';
+import { chains, wagmiConfig } from '$libs/wagmi';
+
+const projectId = PUBLIC_WEB3_MODAL_PROJECT_ID;
+
+const ethereumClient = new EthereumClient(wagmiConfig, chains);
+
+export const web3modal = new Web3Modal(
+  {
+    projectId,
+    // 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-accent-color': 'var(--primary-interactive)',
+      '--w3m-accent-fill-color': 'var(--primary-content)',
+      '--w3m-background-color': 'var(--neutral-background)',
+      // '--w3m-color-bg-1': 'var(--primary-background)',
+      // TODO: customize the rest of the theme variables
+    },
+  },
+  ethereumClient,
+);
diff --git a/packages/bridge-ui-v2/src/libs/i18n/en.json b/packages/bridge-ui-v2/src/libs/i18n/en.json
new file mode 100644
index 00000000000..98603f5067e
--- /dev/null
+++ b/packages/bridge-ui-v2/src/libs/i18n/en.json
@@ -0,0 +1,18 @@
+{
+  "nav": {
+    "bridge": "Bridge",
+    "faucet": "Faucet",
+    "activities": "Activities",
+    "explorer": "Explorer",
+    "guide": "Guide"
+  },
+
+  "wallet": {
+    "connect": "Connect Wallet",
+    "status": {
+      "disconnected": "Disconnected",
+      "connected": "Connected",
+      "connecting": "Connecting..."
+    }
+  }
+}
diff --git a/packages/bridge-ui-v2/src/libs/i18n/i18n.ts b/packages/bridge-ui-v2/src/libs/i18n/i18n.ts
new file mode 100644
index 00000000000..a02cf03c0f7
--- /dev/null
+++ b/packages/bridge-ui-v2/src/libs/i18n/i18n.ts
@@ -0,0 +1,14 @@
+import { addMessages, getLocaleFromNavigator, init } from 'svelte-i18n';
+
+import en from './en.json';
+// TODO: import other languages here...
+
+export { _ } from 'svelte-i18n';
+
+addMessages('en', en);
+// TODO: add other languages here...
+
+init({
+  fallbackLocale: 'en',
+  initialLocale: getLocaleFromNavigator(),
+});
diff --git a/packages/bridge-ui-v2/src/libs/i18n/index.ts b/packages/bridge-ui-v2/src/libs/i18n/index.ts
new file mode 100644
index 00000000000..fe7480b1ca6
--- /dev/null
+++ b/packages/bridge-ui-v2/src/libs/i18n/index.ts
@@ -0,0 +1 @@
+export { _ as t } from './i18n';
diff --git a/packages/bridge-ui-v2/src/libs/classNames/classNames.test.ts b/packages/bridge-ui-v2/src/libs/util/classNames.test.ts
similarity index 100%
rename from packages/bridge-ui-v2/src/libs/classNames/classNames.test.ts
rename to packages/bridge-ui-v2/src/libs/util/classNames.test.ts
diff --git a/packages/bridge-ui-v2/src/libs/classNames/classNames.ts b/packages/bridge-ui-v2/src/libs/util/classNames.ts
similarity index 100%
rename from packages/bridge-ui-v2/src/libs/classNames/classNames.ts
rename to packages/bridge-ui-v2/src/libs/util/classNames.ts
diff --git a/packages/bridge-ui-v2/src/libs/util/logger.ts b/packages/bridge-ui-v2/src/libs/util/logger.ts
new file mode 100644
index 00000000000..fa4b5eebc6a
--- /dev/null
+++ b/packages/bridge-ui-v2/src/libs/util/logger.ts
@@ -0,0 +1,5 @@
+import debug from 'debug';
+
+export function getLogger(namesapce: string) {
+  return debug(`bridge:${namesapce}`);
+}
diff --git a/packages/bridge-ui-v2/src/libs/wagmi/client.ts b/packages/bridge-ui-v2/src/libs/wagmi/client.ts
new file mode 100644
index 00000000000..e8e24df5129
--- /dev/null
+++ b/packages/bridge-ui-v2/src/libs/wagmi/client.ts
@@ -0,0 +1,68 @@
+import { type Chain, configureChains, createConfig } from '@wagmi/core';
+import { w3mConnectors, w3mProvider } from '@web3modal/ethereum';
+
+import {
+  PUBLIC_L1_CHAIN_ID,
+  PUBLIC_L1_CHAIN_NAME,
+  PUBLIC_L1_EXPLORER_URL,
+  PUBLIC_L1_RPC_URL,
+  PUBLIC_L2_CHAIN_ID,
+  PUBLIC_L2_CHAIN_NAME,
+  PUBLIC_L2_EXPLORER_URL,
+  PUBLIC_L2_RPC_URL,
+  PUBLIC_WEB3_MODAL_PROJECT_ID,
+} from '$env/static/public';
+
+const projectId = PUBLIC_WEB3_MODAL_PROJECT_ID;
+
+const mainnet: Chain = {
+  id: parseInt(PUBLIC_L1_CHAIN_ID),
+  name: PUBLIC_L1_CHAIN_NAME,
+  network: 'L1',
+  nativeCurrency: {
+    name: 'Ether',
+    symbol: 'ETH',
+    decimals: 18,
+  },
+  rpcUrls: {
+    public: { http: [PUBLIC_L1_RPC_URL] },
+    default: { http: [PUBLIC_L1_RPC_URL] },
+  },
+  blockExplorers: {
+    default: {
+      name: 'Main',
+      url: PUBLIC_L1_EXPLORER_URL,
+    },
+  },
+};
+
+const taiko: Chain = {
+  id: parseInt(PUBLIC_L2_CHAIN_ID),
+  name: PUBLIC_L2_CHAIN_NAME,
+  network: 'L2',
+  nativeCurrency: {
+    name: 'Ether',
+    symbol: 'ETH',
+    decimals: 18,
+  },
+  rpcUrls: {
+    public: { http: [PUBLIC_L2_RPC_URL] },
+    default: { http: [PUBLIC_L2_RPC_URL] },
+  },
+  blockExplorers: {
+    default: {
+      name: 'Main',
+      url: PUBLIC_L2_EXPLORER_URL,
+    },
+  },
+};
+
+export const chains = [mainnet, taiko];
+
+export const { publicClient } = configureChains(chains, [w3mProvider({ projectId })]);
+
+export const wagmiConfig = createConfig({
+  autoConnect: true,
+  connectors: w3mConnectors({ projectId, version: 2, chains }),
+  publicClient,
+});
diff --git a/packages/bridge-ui-v2/src/libs/wagmi/index.ts b/packages/bridge-ui-v2/src/libs/wagmi/index.ts
new file mode 100644
index 00000000000..5186d053b22
--- /dev/null
+++ b/packages/bridge-ui-v2/src/libs/wagmi/index.ts
@@ -0,0 +1,2 @@
+export * from './client';
+export { startWatching, stopWatching } from './watcher';
diff --git a/packages/bridge-ui-v2/src/libs/wagmi/watcher.ts b/packages/bridge-ui-v2/src/libs/wagmi/watcher.ts
new file mode 100644
index 00000000000..a9149be9cd6
--- /dev/null
+++ b/packages/bridge-ui-v2/src/libs/wagmi/watcher.ts
@@ -0,0 +1,33 @@
+import { watchAccount, watchNetwork, watchPublicClient, watchWalletClient } from '@wagmi/core';
+
+import { getLogger } from '$libs/util/logger';
+
+const log = getLogger('wagmi/watcher');
+
+let isWatching = false;
+let unWatchNetwork: () => void;
+let unWatchAccount: () => void;
+
+export function startWatching() {
+  if (!isWatching) {
+    // Action for subscribing to network changes.
+    // See https://wagmi.sh/core/actions/watchNetwork
+    unWatchNetwork = watchNetwork((data) => {
+      log('Network changed', data);
+    });
+
+    // Action for subscribing to account changes.
+    // See https://wagmi.sh/core/actions/watchAccount
+    unWatchAccount = watchAccount((data) => {
+      log('Account changed', data);
+    });
+
+    isWatching = true;
+  }
+}
+
+export function stopWatching() {
+  unWatchNetwork();
+  unWatchAccount();
+  isWatching = false;
+}
diff --git a/packages/bridge-ui-v2/src/routes/+layout.svelte b/packages/bridge-ui-v2/src/routes/+layout.svelte
index dbeaca9ae28..8d65d94a27f 100644
--- a/packages/bridge-ui-v2/src/routes/+layout.svelte
+++ b/packages/bridge-ui-v2/src/routes/+layout.svelte
@@ -1,13 +1,13 @@
 <script lang="ts">
   import '../app.css';
 
-  import Header from '@components/Header';
-  import SideNavigation from '@components/SideNavigation';
+  import Header from '$components/Header';
+  import SideNavigation from '$components/SideNavigation';
 </script>
 
 <SideNavigation>
   <Header />
-  <main class="md:px-10 md:py-7">
+  <main class="flex justify-center md:px-10 md:py-7 mt-8 md:mt-14">
     <slot />
   </main>
 </SideNavigation>
diff --git a/packages/bridge-ui-v2/src/routes/+layout.ts b/packages/bridge-ui-v2/src/routes/+layout.ts
index aa0759303be..92d449c4cde 100644
--- a/packages/bridge-ui-v2/src/routes/+layout.ts
+++ b/packages/bridge-ui-v2/src/routes/+layout.ts
@@ -2,7 +2,12 @@
  * Entry point
  */
 
+import { startWatching } from '$libs/wagmi';
+
 // When setting this to false your entire app will only be rendered on the client,
 // which essentially means you turn your app into an SPA.
 // See https://kit.svelte.dev/docs/page-options#ssr
 export const ssr = false;
+
+// Start watching for network and account changes
+startWatching();
diff --git a/packages/bridge-ui-v2/tailwind.config.js b/packages/bridge-ui-v2/tailwind.config.js
index c9c5c38b697..e52c13fbed6 100644
--- a/packages/bridge-ui-v2/tailwind.config.js
+++ b/packages/bridge-ui-v2/tailwind.config.js
@@ -194,6 +194,10 @@ export default {
           'primary-focus': '#E81899', // pink-400
           'primary-content': '#F3F3F3', // grey-10
 
+          neutral: '#2B303B', // grey-700
+          'neutral-focus': '#444A55', // grey-600
+          'neutral-content': '#F3F3F3', // grey-10
+
           'base-100': '#0B101B', // grey-900
           'base-content': '#F3F3F3', // grey-10
 
diff --git a/packages/bridge-ui-v2/tsconfig.json b/packages/bridge-ui-v2/tsconfig.json
index e7077ce86cd..3b1aad995cb 100644
--- a/packages/bridge-ui-v2/tsconfig.json
+++ b/packages/bridge-ui-v2/tsconfig.json
@@ -11,8 +11,8 @@
     "strict": true,
 
     "paths": {
-      "@components/*": ["./src/components/*"],
-      "@libs/*": ["./src/libs/*"]
+      "$components/*": ["./src/components/*"],
+      "$libs/*": ["./src/libs/*"]
     },
 
     // https://vitest.dev/config/#globals
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index 0a300d9fa0a..e53dcc4aacb 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -214,6 +214,9 @@ importers:
       debug:
         specifier: ^4.3.4
         version: 4.3.4
+      svelte-i18n:
+        specifier: ^3.5.1
+        version: 3.5.2(svelte@3.59.1)
       viem:
         specifier: ^1.0.7
         version: 1.0.7(typescript@5.1.3)
@@ -230,6 +233,9 @@ importers:
       '@sveltejs/kit':
         specifier: ^1.5.0
         version: 1.20.4(svelte@3.59.1)(vite@4.3.9)
+      '@types/debug':
+        specifier: ^4.1.7
+        version: 4.1.8
       '@typescript-eslint/eslint-plugin':
         specifier: ^5.45.0
         version: 5.59.11(@typescript-eslint/parser@5.59.11)(eslint@8.42.0)(typescript@5.1.3)
@@ -5334,7 +5340,7 @@ packages:
   /@types/connect@3.4.35:
     resolution: {integrity: sha512-cdeYyv4KWoEgpBISTxWvqYsVy444DOqehiF3fM3ne10AmJ62RSyNkUnxMJXHQWRQQX2eR94m5y1IZyDwBjV9FQ==}
     dependencies:
-      '@types/node': 12.20.55
+      '@types/node': 20.3.1
 
   /@types/cookie@0.5.1:
     resolution: {integrity: sha512-COUnqfB2+ckwXXSFInsFdOAWQzCCx+a5hq2ruyj+Vjund94RJQd4LG2u9hnvJrTgunKAaax7ancBYlDrNYxA0g==}
@@ -5350,7 +5356,6 @@ packages:
     resolution: {integrity: sha512-/vPO1EPOs306Cvhwv7KfVfYvOJqA/S/AXjaHQiJboCZzcNDb+TIJFN9/2C9DZ//ijSKWioNyUxD792QmDJ+HKQ==}
     dependencies:
       '@types/ms': 0.7.31
-    dev: false
 
   /@types/eslint-scope@3.7.4:
     resolution: {integrity: sha512-9K4zoImiZc3HlIp6AVUDE4CWYx22a+lhSZMYNpbjW04+YF0KWj4pJXnEMjdnFTiQibFFmElcsasJXDbdI/EPhA==}
@@ -5684,7 +5689,7 @@ packages:
   /@types/ws@7.4.7:
     resolution: {integrity: sha512-JQbbmxZTZehdc2iszGKs5oC3NFnjeay7mtAWrdt7qNtAVK0g19muApzAy4bm9byz79xa2ZnO/BOBC2R8RC5Lww==}
     dependencies:
-      '@types/node': 12.20.55
+      '@types/node': 20.3.1
 
   /@types/yargs-parser@21.0.0:
     resolution: {integrity: sha512-iO9ZQHkZxHn4mSakYV0vFHAVDyEOIJQrV2uZ06HxEPcx+mt8swXoZHIbaaJ2crJYFfErySgktuTZ3BeLz+XmFA==}
@@ -10883,7 +10888,6 @@ packages:
   /deepmerge@4.3.1:
     resolution: {integrity: sha512-3sUqbMEc77XqpdNO7FRyRog+eW3ph+GYCbj+rK+uYyRMuwsVy0rMiVtPn+QJlKFvWP/1PYpapqYn0Me2knFn+A==}
     engines: {node: '>=0.10.0'}
-    dev: true
 
   /defaults@1.0.4:
     resolution: {integrity: sha512-eFuaLoy/Rxalv2kr+lqMlUnrDWV+3j4pljOIJgLIhI058IQfWJ7vXhyEIHu+HtC738klGALYxOKDO0bQP3tg8A==}
@@ -22338,6 +22342,22 @@ packages:
       tiny-glob: 0.2.9
     dev: false
 
+  /svelte-i18n@3.5.2(svelte@3.59.1):
+    resolution: {integrity: sha512-7Ub895Fqo2KRUCBAYSGjBQzaCOfDdgg6VwBT/mq6/EJqyP18DNIcNzeE2tiZejJ46R70npBR31Q1p9ywQ8L7BA==}
+    engines: {node: '>= 16'}
+    hasBin: true
+    peerDependencies:
+      svelte: ^3.25.1
+    dependencies:
+      cli-color: 2.0.3
+      deepmerge: 4.3.1
+      estree-walker: 2.0.2
+      intl-messageformat: 9.13.0
+      sade: 1.8.1
+      svelte: 3.59.1
+      tiny-glob: 0.2.9
+    dev: false
+
   /svelte-jester@2.3.2(jest@27.5.1)(svelte@3.53.1):
     resolution: {integrity: sha512-JtxSz4FWAaCRBXbPsh4LcDs4Ua7zdXgLC0TZvT1R56hRV0dymmNP+abw67DTPF7sQPyNxWsOKd0Sl7Q8SnP8kg==}
     engines: {node: '>=14'}
@@ -22583,7 +22603,6 @@ packages:
   /svelte@3.59.1:
     resolution: {integrity: sha512-pKj8fEBmqf6mq3/NfrB9SLtcJcUvjYSWyePlfCqN9gujLB25RitWK8PvFzlwim6hD/We35KbPlRteuA6rnPGcQ==}
     engines: {node: '>= 8'}
-    dev: true
 
   /swarm-js@0.1.42:
     resolution: {integrity: sha512-BV7c/dVlA3R6ya1lMlSSNPLYrntt0LUq4YMgy3iwpCIc6rZnS5W2wUoctarZ5pXlpKtxDDf9hNziEkcfrxdhqQ==}