From aec6b8165930e4ed1458c4a55135eb7a30af037b Mon Sep 17 00:00:00 2001
From: wuzhenbin <1137057407@qq.com>
Date: Tue, 29 Aug 2023 16:52:55 +0800
Subject: [PATCH] feat: add bridge luanguage and update ui

---
 packages/bridge-ui/src/App.svelte             |  19 +-
 packages/bridge-ui/src/app.ts                 |  18 +-
 packages/bridge-ui/src/assets/locales.svg     |   1 +
 packages/bridge-ui/src/chain/chains.ts        |   7 +
 .../BridgeForm/ActionButtons.svelte           |  53 ++-
 .../BridgeForm/AddCustomERC20.svelte          |  12 +-
 .../src/components/BridgeForm/Memo.svelte     |  11 +-
 .../BridgeForm/ProcessingFee.svelte           |   6 +-
 .../src/components/ConnectWallet.svelte       |   2 +-
 .../src/components/LanguageModal.svelte       |  54 +++
 .../bridge-ui/src/components/Navbar.svelte    |  62 ++--
 .../src/components/NoticeModal.svelte         |   5 +-
 packages/bridge-ui/src/i18n.ts                |  53 +--
 packages/bridge-ui/src/i18nLocal.ts           |  55 +++
 packages/bridge-ui/src/locales/en.json        |  66 ++++
 packages/bridge-ui/src/locales/zh_CN.json     |  50 +++
 packages/bridge-ui/src/pages/home/Home.svelte |  24 +-
 .../src/pages/home/HomeMainnet.svelte         | 303 -----------------
 .../src/pages/home/HomeTestnet.svelte         | 313 ------------------
 packages/bridge-ui/src/store/modalLanguage.ts |   3 +
 packages/bridge-ui/src/styles/app.css         |  19 ++
 packages/bridge-ui/src/styles/common.css      | 226 +++++++++++++
 .../bridge-ui/src/styles/lanuageModal.css     |  46 +++
 packages/bridge-ui/src/styles/override.css    |   4 +
 24 files changed, 662 insertions(+), 750 deletions(-)
 create mode 100644 packages/bridge-ui/src/assets/locales.svg
 create mode 100644 packages/bridge-ui/src/components/LanguageModal.svelte
 create mode 100644 packages/bridge-ui/src/i18nLocal.ts
 create mode 100644 packages/bridge-ui/src/locales/en.json
 create mode 100644 packages/bridge-ui/src/locales/zh_CN.json
 delete mode 100644 packages/bridge-ui/src/pages/home/HomeMainnet.svelte
 delete mode 100644 packages/bridge-ui/src/pages/home/HomeTestnet.svelte
 create mode 100644 packages/bridge-ui/src/store/modalLanguage.ts
 create mode 100644 packages/bridge-ui/src/styles/common.css
 create mode 100644 packages/bridge-ui/src/styles/lanuageModal.css

diff --git a/packages/bridge-ui/src/App.svelte b/packages/bridge-ui/src/App.svelte
index 5f976b9ed..ab4da1cc7 100644
--- a/packages/bridge-ui/src/App.svelte
+++ b/packages/bridge-ui/src/App.svelte
@@ -1,11 +1,14 @@
 <script lang="ts">
-  import { onDestroy, onMount } from 'svelte';
+import { onDestroy, onMount } from 'svelte';
 
-  import Navbar from './components/Navbar.svelte';
-  import NotificationToast from './components/NotificationToast.svelte';
-  import Router from './components/Router.svelte';
-  import SwitchChainModal from './components/SwitchChainModal.svelte';
-  import { startWatching, stopWatching } from './wagmi/watcher';
+import Navbar from './components/Navbar.svelte';
+import NotificationToast from './components/NotificationToast.svelte';
+import Router from './components/Router.svelte';
+import SwitchChainModal from './components/SwitchChainModal.svelte';
+import { startWatching, stopWatching } from './wagmi/watcher';
+import LanguageDialog from './components/LanguageModal.svelte';
+
+import { isLanguageModalOpen } from './store/modalLanguage';
 
   onMount(startWatching);
   onDestroy(stopWatching);
@@ -14,6 +17,10 @@
 <main>
   <Navbar />
   <Router />
+  {#if $isLanguageModalOpen}
+  <LanguageDialog />
+  {/if}
+  
 </main>
 
 <NotificationToast />
diff --git a/packages/bridge-ui/src/app.ts b/packages/bridge-ui/src/app.ts
index 0532d66bc..aa496b126 100644
--- a/packages/bridge-ui/src/app.ts
+++ b/packages/bridge-ui/src/app.ts
@@ -1,11 +1,25 @@
 import './styles/app.css';
 
 import { Buffer } from 'buffer';
-
 import App from './App.svelte';
 import { setupI18n } from './i18n';
+import { register, init, getLocaleFromNavigator } from 'svelte-i18n';
+import { browserLangToLocaleKey } from './i18nLocal'
+import { locales } from './i18nLocal'
+
+
+Object.keys(locales).map(item => {
+  register(item, () => import(`./locales/${item}.json`));
+})
+
+const initlang = browserLangToLocaleKey[getLocaleFromNavigator()]
+
+init({
+  fallbackLocale: 'en',
+  initialLocale: initlang,
+});
 
-setupI18n({ withLocale: 'en' });
+setupI18n({ withLocale: initlang });
 
 const app = new App({
   target: document.getElementById('app'),
diff --git a/packages/bridge-ui/src/assets/locales.svg b/packages/bridge-ui/src/assets/locales.svg
new file mode 100644
index 000000000..8da23be29
--- /dev/null
+++ b/packages/bridge-ui/src/assets/locales.svg
@@ -0,0 +1 @@
+<svg stroke="currentColor" fill="#fff" stroke-width="0" viewBox="0 0 24 24" aria-hidden="true" height="22px" width="22px" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" d="M9 2.25a.75.75 0 01.75.75v1.506a49.38 49.38 0 015.343.371.75.75 0 11-.186 1.489c-.66-.083-1.323-.151-1.99-.206a18.67 18.67 0 01-2.969 6.323c.317.384.65.753.998 1.107a.75.75 0 11-1.07 1.052A18.902 18.902 0 019 13.687a18.823 18.823 0 01-5.656 4.482.75.75 0 11-.688-1.333 17.323 17.323 0 005.396-4.353A18.72 18.72 0 015.89 8.598a.75.75 0 011.388-.568A17.21 17.21 0 009 11.224a17.17 17.17 0 002.391-5.165 48.038 48.038 0 00-8.298.307.75.75 0 01-.186-1.489 49.159 49.159 0 015.343-.371V3A.75.75 0 019 2.25zM15.75 9a.75.75 0 01.68.433l5.25 11.25a.75.75 0 01-1.36.634l-1.198-2.567h-6.744l-1.198 2.567a.75.75 0 01-1.36-.634l5.25-11.25A.75.75 0 0115.75 9zm-2.672 8.25h5.344l-2.672-5.726-2.672 5.726z" clip-rule="evenodd"></path></svg>
\ No newline at end of file
diff --git a/packages/bridge-ui/src/chain/chains.ts b/packages/bridge-ui/src/chain/chains.ts
index 433e5a9be..02d8e9b80 100644
--- a/packages/bridge-ui/src/chain/chains.ts
+++ b/packages/bridge-ui/src/chain/chains.ts
@@ -66,12 +66,19 @@ export const mainnetWagmiChain: WagmiChain = {
     default: {
       http: [L1_RPC],
     },
+    public: {
+      http: [L1_RPC],
+    }
   },
   blockExplorers: {
     default: {
       name: 'Main',
       url: L1_EXPLORER_URL,
     },
+    public: {
+      name: 'Main',
+      url: L1_EXPLORER_URL,
+    }
   },
 };
 
diff --git a/packages/bridge-ui/src/components/BridgeForm/ActionButtons.svelte b/packages/bridge-ui/src/components/BridgeForm/ActionButtons.svelte
index 637d5656f..270a722f4 100644
--- a/packages/bridge-ui/src/components/BridgeForm/ActionButtons.svelte
+++ b/packages/bridge-ui/src/components/BridgeForm/ActionButtons.svelte
@@ -10,7 +10,8 @@
   import Button from '../Button.svelte';
   import Loading from '../Loading.svelte';
   import { L1_CHAIN_ID } from '../../constants/envVars';
-
+  import { _ } from 'svelte-i18n';
+  import { get } from 'svelte/store';
 
   export let token: Token;
 
@@ -29,6 +30,10 @@
   export let approve: (token: Token, isMxc: boolean = false) => Promise<void>;
   export let bridge: (token: Token) => Promise<void>;
 
+  /* 
+  remove button type="accent"
+  */
+
   let approving = false;
   let bridging = false;
 
@@ -93,67 +98,61 @@
 {#if showSteps}
   <div class="flex space-x-4 items-center">
     {#if loading}
-      <Button type="accent" class="flex-1" disabled={true}>
+      <Button class="action-button flex-1" disabled={true}>
         {#if approving}
-          <Loading text="Approving…" />
+          <Loading text={$_("bridgeForm.approving")} />
         {:else}
-          ✓ Approved
+          ✓ {$_('bridgeForm.approved')}
         {/if}
       </Button>
       <ArrowRight />
-      <Button type="accent" class="flex-1" disabled={true}>
+      <Button class="action-button flex-1" disabled={true}>
         {#if bridging}
-          <Loading text="Bridging…" />
+          <Loading text={$_('bridgeForm.bridging')}  />
         {:else}
-          Bridge
+          {$_('bridgeForm.bridge')}
         {/if}
       </Button>
     {:else}
-      <Button
-        type="accent"
-        class="flex-1"
+      <Button class="action-button flex-1"
         on:click={clickApprove}
         disabled={!requiresAllowance || actionDisabled}>
         {requiresAllowance
-          ? 'Approve token'
+          ? get(_)('bridgeForm.approveToken')
           : !computingAllowance && amountEntered
-          ? '✓ Approved'
-          : 'Approve'}
+          ? `✓ ${get(_)('bridgeForm.approved')}`
+          : get(_)('bridgeForm.approve')}
       </Button>
       <ArrowRight />
       {#if requiresAllowanceMxc}
-        <Button
-                type="accent"
-                class="flex-1"
+        <Button class="action-button flex-1"
                 on:click={clickApproveMxc}
                 disabled={!requiresAllowanceMxc || actionDisabled}>
           {requiresAllowanceMxc
-                  ? 'Approve MXC'
+                  ? `${get(_)('bridgeForm.approve')} MXC`
                   : !computingAllowance && amountEntered
-                          ? '✓ Approved MXC'
-                          : 'Approve MXC'}
+                          ? `✓ ${get(_)('bridgeForm.approved')}} MXC`
+                          : `${get(_)('bridgeForm.approve')} MXC`}
         </Button>
         <ArrowRight />
       {/if}
       <Button
-        type="accent"
-        class="flex-1"
+        class="action-button flex-1"
         on:click={clickBridge}
         disabled={requiresAllowance || actionDisabled}>
-        Bridge
+        {$_('bridgeForm.bridge')}
       </Button>
     {/if}
   </div>
 {:else if bridging}
-  <Button type="accent" class="w-full" disabled={true}>
-    <Loading text="Bridging…" />
+  <Button class="action-button w-full" disabled={true}>
+    <Loading text={$_('bridgeForm.bridging')} />
   </Button>
 {:else}
   <Button
-    type="accent"
-    class="w-full"
+    class="action-button w-full"
     on:click={clickBridge}
     disabled={actionDisabled}>
-    Bridge
+    {$_('bridgeForm.bridge')}
   </Button>
 {/if}
diff --git a/packages/bridge-ui/src/components/BridgeForm/AddCustomERC20.svelte b/packages/bridge-ui/src/components/BridgeForm/AddCustomERC20.svelte
index f12fa5a49..5e300d55c 100644
--- a/packages/bridge-ui/src/components/BridgeForm/AddCustomERC20.svelte
+++ b/packages/bridge-ui/src/components/BridgeForm/AddCustomERC20.svelte
@@ -15,6 +15,8 @@
   import Loading from '../Loading.svelte';
   import Modal from '../Modal.svelte';
   import { errorToast } from '../NotificationToast.svelte';
+  import { get } from 'svelte/store';
+  import { _ } from 'svelte-i18n';
 
   const log = getLogger('component:AddCustomERC20');
 
@@ -69,13 +71,13 @@
       } catch (error) {
         console.error(error);
 
-        tokenError = 'Could not fetch token details.';
+        tokenError = get(_)('bridgeForm.notFetchToken');
         errorToast(tokenError);
       } finally {
         loadingTokenDetails = false;
       }
     } else {
-      tokenError = tokenAddress ? 'Invalid token address.' : '';
+      tokenError = tokenAddress ? get(_)('bridgeForm.invalidAddress') : '';
       tokenDetails = null;
     }
   }
@@ -90,7 +92,7 @@
     <div class="mt-4 mb-2">
       <input
         type="text"
-        placeholder="Enter valid ERC20 Address"
+        placeholder={$_('bridgeForm.enterAddress')}
         class="input input-primary bg-dark-2 input-md md:input-lg w-full focus:ring-0 border-dark-2 rounded-md"
         name="customTokenAddress"
         bind:value={tokenAddress} />
@@ -118,14 +120,14 @@
       </button>
     {:else}
       <button class="btn" type="submit" disabled={Boolean(tokenError)}>
-        Add
+        {$_('button.add')}
       </button>
     {/if}
   </form>
 
   {#if customTokens.length > 0}
     <div class="flex h-full w-full flex-col justify-between bg-none mt-6">
-      <h3>Tokens already added</h3>
+      <h3>{$_('bridgeForm.tokenAreadyAdd')}</h3>
       {#each customTokens as customToken (customToken.symbol)}
         <div class="flex items-center justify-between">
           <div class="flex items-center">
diff --git a/packages/bridge-ui/src/components/BridgeForm/Memo.svelte b/packages/bridge-ui/src/components/BridgeForm/Memo.svelte
index 9375183bc..ad709d80f 100644
--- a/packages/bridge-ui/src/components/BridgeForm/Memo.svelte
+++ b/packages/bridge-ui/src/components/BridgeForm/Memo.svelte
@@ -1,6 +1,8 @@
 <script lang="ts">
   import ButtonWithTooltip from '../ButtonWithTooltip.svelte';
   import TooltipModal from '../TooltipModal.svelte';
+  import { get } from 'svelte/store';
+  import { _ } from 'svelte-i18n';
 
   export let memo: string = '';
   export let error: string = '';
@@ -11,7 +13,7 @@
   function checkSizeLimit(input: string) {
     const bytes = new TextEncoder().encode(input).length;
     if (bytes > 128) {
-      error = 'Max limit reached';
+      error = get(_)('bridgeForm.mxcLimit')
     } else {
       error = null;
     }
@@ -23,7 +25,7 @@
 <div class="label flex flex-row justify-between items-center">
   <label for="memo">
     <ButtonWithTooltip onClick={() => (tooltipOpen = true)}>
-      <span slot="buttonText">Memo</span>
+      <span slot="buttonText">{$_('bridgeForm.memo')}</span>
     </ButtonWithTooltip>
   </label>
 
@@ -41,7 +43,7 @@
   <div class="form-control">
     <input
       type="text"
-      placeholder="Enter memo here…"
+      placeholder={$_('bridgeForm.enterMemo')}
       class="input input-primary bg-dark-2 input-md md:input-lg w-full focus:ring-0 border-dark-2 rounded-md"
       name="memo"
       bind:value={memo} />
@@ -57,8 +59,7 @@
 <TooltipModal title="Memo" bind:isOpen={tooltipOpen}>
   <span slot="body">
     <p class="text-left">
-      You can attach an arbitrary message to your bridge transaction by using a
-      memo — it will slightly increase gas costs.
+      {$_('bridgeForm.memoDesc')}
     </p>
   </span>
 </TooltipModal>
diff --git a/packages/bridge-ui/src/components/BridgeForm/ProcessingFee.svelte b/packages/bridge-ui/src/components/BridgeForm/ProcessingFee.svelte
index 08a45bcc1..fdf363f7e 100644
--- a/packages/bridge-ui/src/components/BridgeForm/ProcessingFee.svelte
+++ b/packages/bridge-ui/src/components/BridgeForm/ProcessingFee.svelte
@@ -102,7 +102,7 @@
     <div class="px-1 py-0 flex flex-row">
       <span class="mt-2 text-sm">
         {#if cannotCompute}
-          <span class="text-error">⚠ Error computing</span>
+          <span class="text-error">⚠ {$_('bridgeForm.errorComp')}</span>
         {:else}
           <!-- {amount} ETH -->
           {amount}
@@ -131,8 +131,6 @@
 <NoticeModal bind:show={showNoneFeeTooltip} name="NoneFeeTooltip">
   <!-- TODO: translations? -->
   <div class="text-center">
-    Selecting <strong>None</strong> means that you'll require MXC on the receiving
-    chain in order to claim the bridged token. Please, come back later to manually
-    claim.
+    {@html $_('bridgeForm.selectNoneDesc')}
   </div>
 </NoticeModal>
diff --git a/packages/bridge-ui/src/components/ConnectWallet.svelte b/packages/bridge-ui/src/components/ConnectWallet.svelte
index 333876a85..72698676d 100644
--- a/packages/bridge-ui/src/components/ConnectWallet.svelte
+++ b/packages/bridge-ui/src/components/ConnectWallet.svelte
@@ -54,7 +54,7 @@
   };
 </script>
 
-<button class="btn" on:click={() => (isConnectWalletModalOpen = true)}>
+<button class="btn connect-button" on:click={() => (isConnectWalletModalOpen = true)}>
   {$_('nav.connect')}
 </button>
 
diff --git a/packages/bridge-ui/src/components/LanguageModal.svelte b/packages/bridge-ui/src/components/LanguageModal.svelte
new file mode 100644
index 000000000..6216741dc
--- /dev/null
+++ b/packages/bridge-ui/src/components/LanguageModal.svelte
@@ -0,0 +1,54 @@
+<script>
+import { isLanguageModalOpen } from '../store/modalLanguage';
+import { locales } from '../i18nLocal'
+import { locale } from 'svelte-i18n';
+
+function closeLangModal() {
+    $isLanguageModalOpen = false
+}
+
+const onWindowKeydownPressed = (event) => {
+    if (event.key === 'Escape') {
+        $isLanguageModalOpen = false
+    }
+};
+
+const switchLang = (value)=>{
+    locale.set(value);
+    isLanguageModalOpen.set(false);
+}
+</script>
+  
+  
+<svelte:window on:keydown={onWindowKeydownPressed} />
+
+<div class="language_modal">
+    <div class="inner">
+        <div class="Modal-header-wrapper">
+            <div class="Modal-title-bar">
+                <div class="Modal-title">Select Language</div>
+                <div class="Modal-close-button">
+                    <button type="button" class="cursor-pointer font-sans text-lg"
+                        on:click={closeLangModal}>
+                        &times;
+                    </button>
+                </div>
+            </div>
+        </div>
+        <div class="dividerline"></div>
+        <div class="languagebox">
+            {#each Object.keys(locales) as item (item)}
+                <div class="menu-item flexbox" on:keydown={onWindowKeydownPressed} on:click={() => switchLang(item)}>
+                    <div class="menu-item-group fs12">{locales[item]}</div>
+                    <div class="network-dropdown-menu-item-img flexbox">
+                        {#if $locale === item}
+                            <button type="button" class="cursor-pointer font-sans text-lg">
+                                &check;
+                            </button>
+                        {/if}
+                    </div>
+                </div>
+            {/each}
+        </div>
+    </div>
+</div>
\ No newline at end of file
diff --git a/packages/bridge-ui/src/components/Navbar.svelte b/packages/bridge-ui/src/components/Navbar.svelte
index 531253636..745a93f02 100644
--- a/packages/bridge-ui/src/components/Navbar.svelte
+++ b/packages/bridge-ui/src/components/Navbar.svelte
@@ -1,39 +1,47 @@
 <script lang="ts">
-  import { fly } from 'svelte/transition';
-  import { Moon, Sun } from 'svelte-heros-v2';
+  // import { fly } from 'svelte/transition';
+  // import { Moon, Sun } from 'svelte-heros-v2';
 
   import { signer } from '../store/signer';
   import AddressDropdown from './AddressDropdown.svelte';
   import ChainDropdown from './ChainDropdown.svelte';
   import ConnectWallet from './ConnectWallet.svelte';
-  import TaikoLight from './icons/TaikoLight.svelte';
-  import TaikoLogo from './icons/TaikoLogo.svelte';
-  import Tko from './icons/TKO.svelte';
+  // import TaikoLight from './icons/TaikoLight.svelte';
+  // import TaikoLogo from './icons/TaikoLogo.svelte';
+  // import Tko from './icons/TKO.svelte';
 
   import Logo from '../assets/mxc-logo.svg'
+  import iconLocales from '../assets/locales.svg'
 
-  let isDarkMode = localStorage.getItem('theme') === 'dark';
+  import { isLanguageModalOpen } from '../store/modalLanguage';
 
-  function switchToLightMode() {
-    if (!document) {
-      return;
-    }
-    document.documentElement.setAttribute('data-theme', 'light');
-    localStorage.setItem('theme', 'light');
-    isDarkMode = false;
-  }
 
-  function switchToDarkMode() {
-    if (!document) {
-      return;
-    }
-    document.documentElement.setAttribute('data-theme', 'dark');
-    localStorage.setItem('theme', 'dark');
-    isDarkMode = true;
+  // let isDarkMode = localStorage.getItem('theme') === 'dark';
+
+  // function switchToLightMode() {
+  //   if (!document) {
+  //     return;
+  //   }
+  //   document.documentElement.setAttribute('data-theme', 'light');
+  //   localStorage.setItem('theme', 'light');
+  //   isDarkMode = false;
+  // }
+
+  // function switchToDarkMode() {
+  //   if (!document) {
+  //     return;
+  //   }
+  //   document.documentElement.setAttribute('data-theme', 'dark');
+  //   localStorage.setItem('theme', 'dark');
+  //   isDarkMode = true;
+  // }
+
+  function toggleDialog() {
+    isLanguageModalOpen.update(value => !value);
   }
 </script>
-
-<div class="navbar md:px-6 bg-base-100">
+<!-- bg-base-100 -->
+<div class="navbar md:px-6">
   <div class="flex-1 items-end">
     <span class="taiko-light-logo">
       <!-- <TaikoLight width={120} /> -->
@@ -86,7 +94,11 @@
     {/if}
 
     <div class="ml-2">
-      {#if isDarkMode}
+      <!-- svelte-ignore a11y-click-events-have-key-events -->
+      <div class="localicon csp" on:click={toggleDialog}>
+        <img src={iconLocales} alt="" />
+      </div>
+      <!-- {#if isDarkMode}
         <button in:fly={{ y: 10, duration: 500 }} class="btn btn-sm btn-circle">
           <Moon on:click={switchToLightMode} />
         </button>
@@ -96,7 +108,7 @@
           class="btn btn-sm btn-circle bg-base-100 hover:bg-base-100 text-neutral border-none">
           <Sun on:click={switchToDarkMode} class="text-gray-800" />
         </button>
-      {/if}
+      {/if} -->
     </div>
   </div>
 </div>
diff --git a/packages/bridge-ui/src/components/NoticeModal.svelte b/packages/bridge-ui/src/components/NoticeModal.svelte
index 5257afb03..aa21afb6f 100644
--- a/packages/bridge-ui/src/components/NoticeModal.svelte
+++ b/packages/bridge-ui/src/components/NoticeModal.svelte
@@ -4,6 +4,7 @@
   import type { NoticeModalOpenMethod } from '../domain/modal';
   import Button from './Button.svelte';
   import Modal from './Modal.svelte';
+  import { _ } from 'svelte-i18n';
 
   const STORAGE_PREFIX = 'notice-modal';
 
@@ -99,11 +100,11 @@
         id="noShowAgain_{name}"
         bind:checked={noShowAgainCheckbox}
         class="checkbox checkbox-secundary mr-2" />
-      <label for="noShowAgain_{name}">Do not show this message again</label>
+      <label for="noShowAgain_{name}">{$_("bridgeForm.notShowMessage")}</label>
     </div>
 
     <div class="flex justify-center">
-      <Button type="accent" on:click={onConfirmNotice}>Confirm</Button>
+      <Button type="accent" on:click={onConfirmNotice}>{$_("button.confirm")}</Button>
     </div>
   </div>
 </Modal>
diff --git a/packages/bridge-ui/src/i18n.ts b/packages/bridge-ui/src/i18n.ts
index a1c873601..d4a3a013e 100644
--- a/packages/bridge-ui/src/i18n.ts
+++ b/packages/bridge-ui/src/i18n.ts
@@ -1,57 +1,6 @@
-import { _, dictionary, locale } from 'svelte-i18n';
+import { _, locale } from 'svelte-i18n';
 
 function setupI18n({ withLocale: _locale } = { withLocale: 'en' }) {
-  dictionary.set({
-    en: {
-      home: {
-        title: 'Taiko Bridge',
-        selectToken: 'Select Token',
-        to: 'To',
-        bridge: 'Bridge',
-        approve: 'Approve',
-      },
-      bridgeForm: {
-        fieldLabel: 'Amount',
-        maxLabel: 'Max',
-        balance: 'Balance',
-        processingFeeLabel: 'Processing Fee',
-        bridge: 'Bridge',
-        approve: 'Approve',
-      },
-      nav: {
-        connect: 'Connect Wallet',
-      },
-      transaction: {
-        pending: 'Pending',
-        claim: 'Claim',
-        retry: 'Retry',
-        release: 'Release',
-        claimed: 'Claimed',
-        released: 'Released',
-        failed: 'Failed',
-      },
-      toast: {
-        transactionSent: 'Transaction sent',
-        transactionCompleted: 'Transaction completed!',
-        errorWrongNetwork:
-          'You are connected to the wrong chain in your wallet',
-        errorSendingTransaction: 'Error sending transaction',
-        errorDisconnecting: 'Could not disconnect',
-        errorInsufficientBalance: 'Insufficient ETH balance',
-        errorCheckingAllowance: 'Error checking allowance',
-        fundsClaimed: 'Funds claimed successfully!',
-        fundsReleased: 'Funds released successfully!',
-      },
-      switchChainModal: {
-        title: 'Not on the right network',
-        subtitle: 'Your current network is not supported. Please select one:',
-      },
-      connectModal: {
-        title: 'Connect Wallet',
-      },
-    },
-  });
-
   locale.set(_locale);
 }
 
diff --git a/packages/bridge-ui/src/i18nLocal.ts b/packages/bridge-ui/src/i18nLocal.ts
new file mode 100644
index 000000000..0150ab64b
--- /dev/null
+++ b/packages/bridge-ui/src/i18nLocal.ts
@@ -0,0 +1,55 @@
+
+export const locales: any = {
+    en: "English",
+    de: "Deutsch",
+    nl: "Nederlands",
+    tr: "Türkçe",
+    zh_CN: "简体中文",
+    zh_TW: "繁体中文",
+    ko: "한국어",
+    ro: "Română",
+    es: "Español",
+    fr: "Français",
+    it: "Italiano",
+    ja: "日本語",
+    ru: "Русский",
+    pt: "Portugués",
+    id: "Indonesio",
+    vi: "Tiếng Việt",
+};
+
+
+export const browserLangToLocaleKey = {
+    'en': 'en',
+    'en-US': 'en',
+    'en-GB': 'en',
+    'de': 'de',
+    'de-DE': 'de',
+    'nl': 'nl',
+    'nl-NL': 'nl',
+    'tr': 'tr',
+    'tr-TR': 'tr',
+    'zh-CN': 'zh_CN',
+    'zh-TW': 'zh_TW',
+    'ko': 'ko',
+    'ko-KR': 'ko',
+    'ro': 'ro',
+    'ro-RO': 'ro',
+    'es': 'es',
+    'es-ES': 'es',
+    'fr': 'fr',
+    'fr-FR': 'fr',
+    'it': 'it',
+    'it-IT': 'it',
+    'ja': 'ja',
+    'ja-JP': 'ja',
+    'ru': 'ru',
+    'ru-RU': 'ru',
+    'pt': 'pt',
+    'pt-PT': 'pt',
+    'pt-BR': 'pt',
+    'id': 'id',
+    'id-ID': 'id',
+    'vi': 'vi',
+    'vi-VN': 'vi'
+}
diff --git a/packages/bridge-ui/src/locales/en.json b/packages/bridge-ui/src/locales/en.json
new file mode 100644
index 000000000..3e18271b2
--- /dev/null
+++ b/packages/bridge-ui/src/locales/en.json
@@ -0,0 +1,66 @@
+{
+    "home": {
+        "title": "Wannsee Bridge",
+        "selectToken": "Select Token",
+        "to": "To",
+        "bridge": "Bridge",
+        "approve": "Approve"
+    },
+    "buttton": {
+        "add": "Add",
+        "confirm": "Confirm"
+    },
+    "bridgeForm": {
+        "fieldLabel": "Amount",
+        "maxLabel": "Max",
+        "balance": "Balance",
+        "processingFeeLabel": "Processing Fee",
+        "bridge": "Bridge",
+        "approve": "Approve",
+        "approved": "Approved",
+        "approving": "Approving…",
+        "bridging": "Bridging…",
+        "approveToken": "Approve token",
+        "notFetchToken": "Could not fetch token details.",
+        "invalidAddress": "Invalid token address.",
+        "enterAddress": "Enter valid ERC20 Address",
+        "tokenAreadyAdd": "Tokens already added",
+        "memo": "Memo",
+        "enterMemo": "Enter memo here…",
+        "mxcLimit": "Max limit reached",
+        "memoDesc": "You can attach an arbitrary message to your bridge transaction by using a memo — it will slightly increase gas costs.",
+        "errorComp": "Error computing",
+        "selectNoneDesc": "Selecting <strong>None</strong> means that you'll require MXC on the receiving chain in order to claim the bridged token. Please, come back later to manually claim.",
+        "notShowMessage": "Do not show this message again"
+    },
+    "nav": {
+        "connect": "Connect Wallet"
+    },
+    "transaction": {
+        "pending": "Pending",
+        "claim": "Claim",
+        "retry": "Retry",
+        "release": "Release",
+        "claimed": "Claimed",
+        "released": "Released",
+        "failed": "Failed"
+    },
+    "toast": {
+        "transactionSent": "Transaction sent",
+        "transactionCompleted": "Transaction completed!",
+        "errorWrongNetwork": "You are connected to the wrong chain in your wallet",
+        "errorSendingTransaction": "Error sending transaction",
+        "errorDisconnecting": "Could not disconnect",
+        "errorInsufficientBalance": "Insufficient ETH balance",
+        "errorCheckingAllowance": "Error checking allowance",
+        "fundsClaimed": "Funds claimed successfully!",
+        "fundsReleased": "Funds released successfully!"
+    },
+    "switchChainModal": {
+        "title": "Not on the right network",
+        "subtitle": "Your current network is not supported. Please select one:"
+    },
+    "connectModal": {
+        "title": "Connect Wallet"
+    }
+}
\ No newline at end of file
diff --git a/packages/bridge-ui/src/locales/zh_CN.json b/packages/bridge-ui/src/locales/zh_CN.json
new file mode 100644
index 000000000..c67077fad
--- /dev/null
+++ b/packages/bridge-ui/src/locales/zh_CN.json
@@ -0,0 +1,50 @@
+{
+    "home": {
+        "title": "Wannsee Bridge",
+        "selectToken": "Select Token",
+        "to": "To",
+        "bridge": "Bridge",
+        "approve": "Approve"
+    },
+    "test": {
+        "hello": "你好世界"
+    },
+    "bridgeForm": {
+        "fieldLabel": "数量",
+        "maxLabel": "最高",
+        "balance": "余额",
+        "processingFeeLabel": "交易费用",
+        "bridge": "桥接",
+        "approve": "授权"
+    },
+    "nav": {
+        "connect": "Connect Wallet"
+    },
+    "transaction": {
+        "pending": "Pending",
+        "claim": "Claim",
+        "retry": "Retry",
+        "release": "Release",
+        "claimed": "Claimed",
+        "released": "Released",
+        "failed": "Failed"
+    },
+    "toast": {
+        "transactionSent": "Transaction sent",
+        "transactionCompleted": "Transaction completed!",
+        "errorWrongNetwork": "You are connected to the wrong chain in your wallet",
+        "errorSendingTransaction": "Error sending transaction",
+        "errorDisconnecting": "Could not disconnect",
+        "errorInsufficientBalance": "Insufficient ETH balance",
+        "errorCheckingAllowance": "Error checking allowance",
+        "fundsClaimed": "Funds claimed successfully!",
+        "fundsReleased": "Funds released successfully!"
+    },
+    "switchChainModal": {
+        "title": "Not on the right network",
+        "subtitle": "Your current network is not supported. Please select one:"
+    },
+    "connectModal": {
+        "title": "Connect Wallet"
+    }
+}
\ No newline at end of file
diff --git a/packages/bridge-ui/src/pages/home/Home.svelte b/packages/bridge-ui/src/pages/home/Home.svelte
index 2698cf482..e6a595cbd 100644
--- a/packages/bridge-ui/src/pages/home/Home.svelte
+++ b/packages/bridge-ui/src/pages/home/Home.svelte
@@ -3,7 +3,7 @@
 
   import BridgeForm from '../../components/BridgeForm';
   import SelectChain from '../../components/BridgeForm/SelectChain.svelte';
-  //   import Faucet from '../../components/Faucet/Faucet.svelte';
+  import Faucet from '../../components/Faucet/Faucet.svelte';
   import Loading from '../../components/Loading.svelte';
   import { Tab, TabList, TabPanel, Tabs } from '../../components/Tabs';
   import Transactions from '../../components/Transactions';
@@ -38,7 +38,10 @@
     warningToast,
   } from '../../components/NotificationToast.svelte';
 
-  // const is_testnet = ISTESTNET == '1';
+  import { _ } from 'svelte-i18n';
+  import { get } from 'svelte/store';
+
+  const isTestnet = ISTESTNET == '1';
 
   enum LogLevel {
     DEBUG = 'DEBUG',
@@ -167,9 +170,9 @@
   const tabsRoute = [
     { name: 'bridge', href: '/' },
     { name: 'transactions', href: '/transactions' },
+    { name: 'faucet', href: '/faucet' },
     { name: 'stake', href: '/stake' },
-    // Add more tabs if needed
-  ];
+  ]
 
   async function setBridge() {
     // in l1, set the BridgeType.ERC20
@@ -200,9 +203,11 @@
         md:min-h-[650px]
         p-2"
     bind:activeTab>
+    
     {@const tab1 = tabsRoute[0]}
     {@const tab2 = tabsRoute[1]}
     {@const tab3 = tabsRoute[2]}
+    {@const tab4 = tabsRoute[3]}
 
     <TabList class="block mb-4 w-full">
       <Tab name={tab1.name} href={tab1.href}>Bridge</Tab>
@@ -214,8 +219,11 @@
           (<Loading />)
         {/if}
       </Tab>
+      {#if isTestnet}
+        <Tab name={tab3.name} href={tab3.href}>Faucet</Tab>
+      {/if}
       {#if $srcChain && $srcChain.id == L1_CHAIN_ID}
-        <Tab name={tab3.name} href={tab3.href}>Stake</Tab>
+        <Tab name={tab4.name} href={tab4.href}>Stake</Tab>
       {/if}
     </TabList>
 
@@ -235,6 +243,12 @@
     </TabPanel>
 
     <TabPanel tab={tab3.name}>
+      <div class="md:w-[440px] px-4 flex flex-col items-center justify-center">
+        <Faucet />
+      </div>
+    </TabPanel>
+
+    <TabPanel tab={tab4.name}>
       <Stake />
     </TabPanel>
   </Tabs>
diff --git a/packages/bridge-ui/src/pages/home/HomeMainnet.svelte b/packages/bridge-ui/src/pages/home/HomeMainnet.svelte
deleted file mode 100644
index 2698cf482..000000000
--- a/packages/bridge-ui/src/pages/home/HomeMainnet.svelte
+++ /dev/null
@@ -1,303 +0,0 @@
-<script lang="ts">
-  import { location } from 'svelte-spa-router';
-
-  import BridgeForm from '../../components/BridgeForm';
-  import SelectChain from '../../components/BridgeForm/SelectChain.svelte';
-  //   import Faucet from '../../components/Faucet/Faucet.svelte';
-  import Loading from '../../components/Loading.svelte';
-  import { Tab, TabList, TabPanel, Tabs } from '../../components/Tabs';
-  import Transactions from '../../components/Transactions';
-  import { paginationInfo } from '../../store/relayerApi';
-  import { srcChain } from '../../store/chain';
-  import { signer } from '../../store/signer';
-  import { transactions } from '../../store/transaction';
-  import { L1_CHAIN_ID } from '../../constants/envVars';
-  import Stake from '../../components/Stake/index.svelte';
-  import { bridgeType } from '../../store/bridge';
-  import { BridgeType } from '../../domain/bridge';
-
-  import { ethers, Contract, type Signer, BigNumber } from 'ethers';
-  import {
-    L1MXCCROSSTOKEN,
-    L1MXCTOKEN,
-    ISTESTNET,
-  } from '../../constants/envVars';
-  import TooltipModal from '../../components/TooltipModal.svelte';
-  import Button from '../../components/Button.svelte';
-  import MXCCrossTokenAbi from '../../constants/abis/MXCCrossToken';
-  import MXCTokenAbi from '../../constants/abis/MXCToken';
-  import { LottiePlayer } from '@lottiefiles/svelte-lottie-player';
-
-  import {
-    pendingTransactions,
-    transactions as transactionsStore,
-  } from '../../store/transaction';
-  import {
-    errorToast,
-    successToast,
-    warningToast,
-  } from '../../components/NotificationToast.svelte';
-
-  // const is_testnet = ISTESTNET == '1';
-
-  enum LogLevel {
-    DEBUG = 'DEBUG',
-    INFO = 'INFO',
-    WARNING = 'WARNING',
-    ERROR = 'ERROR',
-    OFF = 'OFF',
-  }
-  ethers.utils.Logger.setLogLevel(LogLevel.OFF);
-
-  const parseEther = ethers.utils.parseEther;
-  const formatEther = ethers.utils.formatEther;
-
-  let address: string = '';
-  let tooltipOpen: boolean = false;
-  let showClose: boolean = false;
-  let mxcCrossVal: BigNumber = parseEther('0');
-  let isApprove: boolean = false;
-  let loadingClaim: boolean = false;
-  let loadingApprove: boolean = false;
-
-  async function approve() {
-    loadingApprove = true;
-    try {
-      const MXCCrossToken = new Contract(
-        L1MXCCROSSTOKEN,
-        MXCCrossTokenAbi,
-        $signer,
-      );
-
-      const tx = await MXCCrossToken.approve(L1MXCTOKEN, mxcCrossVal);
-
-      successToast('Transaction sent to approve tokens transfer.');
-      isApprove = false;
-      await pendingTransactions.add(tx, $signer);
-      successToast(`<strong>Tokens transfer approved!</strong><br />`);
-    } catch (error) {
-      console.error(error);
-      isApprove = true;
-      const headerError = '<strong>Failed to approve</strong><br />';
-      if (error.cause?.status === 0) {
-        console.log(111);
-        const explorerUrl = `${$srcChain.explorerUrl}/tx/${error.cause.transactionHash}`;
-        const htmlLink = `<a href="${explorerUrl}" target="_blank"><b><u>here</u></b></a>`;
-        errorToast(
-          `${headerError}Click ${htmlLink} to see more details on the explorer.`,
-          true, // dismissible
-        );
-      } else if (
-        [error.code, error.cause?.code].includes(ethers.errors.ACTION_REJECTED)
-      ) {
-        warningToast(`Transaction has been rejected.`);
-      } else {
-        errorToast(`${headerError}Try again later.`);
-      }
-    }
-    loadingApprove = false;
-  }
-
-  async function claim() {
-    loadingClaim = true;
-    const MXCToken = new Contract(L1MXCTOKEN, MXCTokenAbi, $signer);
-    try {
-      const tx = await MXCToken.exchange(address, mxcCrossVal);
-
-      successToast('Transaction sent to exchange tokens transfer.');
-      await pendingTransactions.add(tx, $signer);
-      successToast(`<strong>Tokens exchange completed!</strong><br />`);
-      tooltipOpen = false;
-    } catch (error) {
-      console.error(error);
-      const headerError = '<strong>Failed to exchange</strong><br />';
-      if (error.cause?.status === 0) {
-        const explorerUrl = `${$srcChain.explorerUrl}/tx/${error.cause.transactionHash}`;
-        const htmlLink = `<a href="${explorerUrl}" target="_blank"><b><u>here</u></b></a>`;
-        errorToast(
-          `${headerError}Click ${htmlLink} to see more details on the explorer.`,
-          true, // dismissible
-        );
-      } else if (
-        [error.code, error.cause?.code].includes(ethers.errors.ACTION_REJECTED)
-      ) {
-        warningToast(`Transaction has been rejected.`);
-      } else {
-        errorToast(`${headerError}Try again later.`);
-      }
-    }
-    loadingClaim = false;
-  }
-
-  async function checkMxcCross() {
-    // console.log(L1MXCCROSSTOKEN,$signer)
-    try {
-      const MXCCrossToken = new Contract(
-        L1MXCCROSSTOKEN,
-        MXCCrossTokenAbi,
-        $signer,
-      );
-      mxcCrossVal = await MXCCrossToken.balanceOf(address);
-      let allowance = await MXCCrossToken.allowance(address, L1MXCTOKEN);
-      if (mxcCrossVal.gt(0)) {
-        tooltipOpen = true;
-      } else {
-        tooltipOpen = false;
-      }
-      if (mxcCrossVal.gt(allowance)) {
-        isApprove = true;
-      } else {
-        isApprove = false;
-      }
-    } catch (e) {
-      console.error(e);
-    }
-  }
-
-  $: setAddress($signer).catch((e) => console.error(e));
-  async function setAddress(signer: Signer) {
-    try {
-      address = await signer.getAddress();
-      await checkMxcCross();
-    } catch (error) {}
-  }
-
-  // List of tab's name <=> route association
-  // TODO: add this into a general configuration.
-  const tabsRoute = [
-    { name: 'bridge', href: '/' },
-    { name: 'transactions', href: '/transactions' },
-    { name: 'stake', href: '/stake' },
-    // Add more tabs if needed
-  ];
-
-  async function setBridge() {
-    // in l1, set the BridgeType.ERC20
-    bridgeType.set(BridgeType.ERC20);
-  }
-
-  $: activeTab =
-    $location === '/' ? tabsRoute[0].name : $location.replace('/', '');
-
-  $: if ($srcChain && $srcChain.id === L1_CHAIN_ID) {
-    setBridge();
-  }
-</script>
-
-<div class="container mx-auto text-center my-10">
-  <Tabs
-    class="
-        tabs 
-        md:bg-tabs 
-        md:border-2 
-        md:dark:border-1 
-        md:border-gray-200 
-        md:dark:border-gray-800 
-        md:shadow-md 
-        md:rounded-3xl 
-        md:p-6 
-        md:inline-block 
-        md:min-h-[650px]
-        p-2"
-    bind:activeTab>
-    {@const tab1 = tabsRoute[0]}
-    {@const tab2 = tabsRoute[1]}
-    {@const tab3 = tabsRoute[2]}
-
-    <TabList class="block mb-4 w-full">
-      <Tab name={tab1.name} href={tab1.href}>Bridge</Tab>
-      <Tab name={tab2.name} href={tab2.href}>
-        <span>Transactions</span>
-        {#if $paginationInfo || !$signer}
-          ({$transactions.length})
-        {:else}
-          (<Loading />)
-        {/if}
-      </Tab>
-      {#if $srcChain && $srcChain.id == L1_CHAIN_ID}
-        <Tab name={tab3.name} href={tab3.href}>Stake</Tab>
-      {/if}
-    </TabList>
-
-    <TabPanel tab={tab1.name}>
-      <div class="rounded-lg py-4 flex flex-col items-center justify-center">
-        <SelectChain />
-      </div>
-      <div class="md:w-[440px] px-4 flex flex-col items-center justify-center">
-        <BridgeForm />
-      </div>
-    </TabPanel>
-
-    <TabPanel tab={tab2.name}>
-      <div class="md:min-w-[440px]">
-        <Transactions />
-      </div>
-    </TabPanel>
-
-    <TabPanel tab={tab3.name}>
-      <Stake />
-    </TabPanel>
-  </Tabs>
-
-  <TooltipModal
-    title="Warning"
-    bind:isOpen={tooltipOpen}
-    bind:showXButton={showClose}>
-    <span slot="body">
-      <p class="text-left">
-        The current bridge is incompatible with L1 MXC. Please click "Claim" to
-        transform your L1 MXC into the latest version of L2 MXC, which will then
-        allow you to seamlessly bridge to L3 zkEVM.
-      </p>
-      {#if loadingApprove}
-        <Button type="accent" size="lg" class="w-4/12 mr-3" disabled={true}>
-          <LottiePlayer
-            src="/lottie/loader.json"
-            ,
-            autoplay={true}
-            loop={true}
-            controls={false}
-            renderer="svg"
-            background="transparent"
-            height={26}
-            width={26}
-            controlsLayout={[]} />
-        </Button>
-      {:else}
-        <Button
-          type="accent"
-          size="lg"
-          class="w-4/12 mr-3"
-          disabled={!isApprove}
-          on:click={approve}>
-          Approve
-        </Button>
-      {/if}
-
-      {#if loadingClaim}
-        <Button type="accent" size="lg" class="w-4/12 mr-3" disabled={true}>
-          <LottiePlayer
-            src="/lottie/loader.json"
-            ,
-            autoplay={true}
-            loop={true}
-            controls={false}
-            renderer="svg"
-            background="transparent"
-            height={26}
-            width={26}
-            controlsLayout={[]} />
-        </Button>
-      {:else}
-        <Button
-          type="accent"
-          size="lg"
-          class="w-4/12"
-          disabled={isApprove}
-          on:click={claim}>
-          Claim
-        </Button>
-      {/if}
-    </span>
-  </TooltipModal>
-</div>
diff --git a/packages/bridge-ui/src/pages/home/HomeTestnet.svelte b/packages/bridge-ui/src/pages/home/HomeTestnet.svelte
deleted file mode 100644
index c758c1a63..000000000
--- a/packages/bridge-ui/src/pages/home/HomeTestnet.svelte
+++ /dev/null
@@ -1,313 +0,0 @@
-<script lang="ts">
-  import { location } from 'svelte-spa-router';
-
-  import BridgeForm from '../../components/BridgeForm';
-  import SelectChain from '../../components/BridgeForm/SelectChain.svelte';
-  import Faucet from '../../components/Faucet/Faucet.svelte';
-  import Loading from '../../components/Loading.svelte';
-  import { Tab, TabList, TabPanel, Tabs } from '../../components/Tabs';
-  import Transactions from '../../components/Transactions';
-  import { paginationInfo } from '../../store/relayerApi';
-  import { srcChain } from '../../store/chain';
-  import { signer } from '../../store/signer';
-  import { transactions } from '../../store/transaction';
-  import { L1_CHAIN_ID } from '../../constants/envVars';
-  import Stake from '../../components/Stake/index.svelte';
-  import { bridgeType } from '../../store/bridge';
-  import { BridgeType } from '../../domain/bridge';
-
-  import { ethers, Contract, type Signer, BigNumber } from 'ethers';
-  import {
-    L1MXCCROSSTOKEN,
-    L1MXCTOKEN,
-    ISTESTNET,
-  } from '../../constants/envVars';
-  import TooltipModal from '../../components/TooltipModal.svelte';
-  import Button from '../../components/Button.svelte';
-  import MXCCrossTokenAbi from '../../constants/abis/MXCCrossToken';
-  import MXCTokenAbi from '../../constants/abis/MXCToken';
-  import { LottiePlayer } from '@lottiefiles/svelte-lottie-player';
-
-  import {
-    pendingTransactions,
-    transactions as transactionsStore,
-  } from '../../store/transaction';
-  import {
-    errorToast,
-    successToast,
-    warningToast,
-  } from '../../components/NotificationToast.svelte';
-
-  // const is_testnet = ISTESTNET == '1';
-
-  enum LogLevel {
-    DEBUG = 'DEBUG',
-    INFO = 'INFO',
-    WARNING = 'WARNING',
-    ERROR = 'ERROR',
-    OFF = 'OFF',
-  }
-  ethers.utils.Logger.setLogLevel(LogLevel.OFF);
-
-  const parseEther = ethers.utils.parseEther;
-  const formatEther = ethers.utils.formatEther;
-
-  let address: string = '';
-  let tooltipOpen: boolean = false;
-  let showClose: boolean = false;
-  let mxcCrossVal: BigNumber = parseEther('0');
-  let isApprove: boolean = false;
-  let loadingClaim: boolean = false;
-  let loadingApprove: boolean = false;
-
-  async function approve() {
-    loadingApprove = true;
-    try {
-      const MXCCrossToken = new Contract(
-        L1MXCCROSSTOKEN,
-        MXCCrossTokenAbi,
-        $signer,
-      );
-
-      const tx = await MXCCrossToken.approve(L1MXCTOKEN, mxcCrossVal);
-
-      successToast('Transaction sent to approve tokens transfer.');
-      isApprove = false;
-      await pendingTransactions.add(tx, $signer);
-      successToast(`<strong>Tokens transfer approved!</strong><br />`);
-    } catch (error) {
-      console.error(error);
-      isApprove = true;
-      const headerError = '<strong>Failed to approve</strong><br />';
-      if (error.cause?.status === 0) {
-        console.log(111);
-        const explorerUrl = `${$srcChain.explorerUrl}/tx/${error.cause.transactionHash}`;
-        const htmlLink = `<a href="${explorerUrl}" target="_blank"><b><u>here</u></b></a>`;
-        errorToast(
-          `${headerError}Click ${htmlLink} to see more details on the explorer.`,
-          true, // dismissible
-        );
-      } else if (
-        [error.code, error.cause?.code].includes(ethers.errors.ACTION_REJECTED)
-      ) {
-        warningToast(`Transaction has been rejected.`);
-      } else {
-        errorToast(`${headerError}Try again later.`);
-      }
-    }
-    loadingApprove = false;
-  }
-
-  async function claim() {
-    loadingClaim = true;
-    const MXCToken = new Contract(L1MXCTOKEN, MXCTokenAbi, $signer);
-    try {
-      const tx = await MXCToken.exchange(address, mxcCrossVal);
-
-      successToast('Transaction sent to exchange tokens transfer.');
-      await pendingTransactions.add(tx, $signer);
-      successToast(`<strong>Tokens exchange completed!</strong><br />`);
-      tooltipOpen = false;
-    } catch (error) {
-      console.error(error);
-      const headerError = '<strong>Failed to exchange</strong><br />';
-      if (error.cause?.status === 0) {
-        const explorerUrl = `${$srcChain.explorerUrl}/tx/${error.cause.transactionHash}`;
-        const htmlLink = `<a href="${explorerUrl}" target="_blank"><b><u>here</u></b></a>`;
-        errorToast(
-          `${headerError}Click ${htmlLink} to see more details on the explorer.`,
-          true, // dismissible
-        );
-      } else if (
-        [error.code, error.cause?.code].includes(ethers.errors.ACTION_REJECTED)
-      ) {
-        warningToast(`Transaction has been rejected.`);
-      } else {
-        errorToast(`${headerError}Try again later.`);
-      }
-    }
-    loadingClaim = false;
-  }
-
-  async function checkMxcCross() {
-    // console.log(L1MXCCROSSTOKEN,$signer)
-    try {
-      const MXCCrossToken = new Contract(
-        L1MXCCROSSTOKEN,
-        MXCCrossTokenAbi,
-        $signer,
-      );
-      mxcCrossVal = await MXCCrossToken.balanceOf(address);
-      let allowance = await MXCCrossToken.allowance(address, L1MXCTOKEN);
-      if (mxcCrossVal.gt(0)) {
-        tooltipOpen = true;
-      } else {
-        tooltipOpen = false;
-      }
-      if (mxcCrossVal.gt(allowance)) {
-        isApprove = true;
-      } else {
-        isApprove = false;
-      }
-    } catch (e) {
-      console.error(e);
-    }
-  }
-
-  $: setAddress($signer).catch((e) => console.error(e));
-  async function setAddress(signer: Signer) {
-    try {
-      address = await signer.getAddress();
-      await checkMxcCross();
-    } catch (error) {}
-  }
-
-  // List of tab's name <=> route association
-  // TODO: add this into a general configuration.
-  const tabsRoute = [
-    { name: 'bridge', href: '/' },
-    { name: 'transactions', href: '/transactions' },
-    { name: 'faucet', href: '/faucet' },
-    { name: 'stake', href: '/stake' },
-    // Add more tabs if needed
-  ];
-
-  async function setBridge() {
-    // in l1, set the BridgeType.ERC20
-    bridgeType.set(BridgeType.ERC20);
-  }
-
-  $: activeTab =
-    $location === '/' ? tabsRoute[0].name : $location.replace('/', '');
-
-  $: if ($srcChain && $srcChain.id === L1_CHAIN_ID) {
-    setBridge();
-  }
-</script>
-
-<div class="container mx-auto text-center my-10">
-  <Tabs
-    class="
-        tabs 
-        md:bg-tabs 
-        md:border-2 
-        md:dark:border-1 
-        md:border-gray-200 
-        md:dark:border-gray-800 
-        md:shadow-md 
-        md:rounded-3xl 
-        md:p-6 
-        md:inline-block 
-        md:min-h-[650px]
-        p-2"
-    bind:activeTab>
-    {@const tab1 = tabsRoute[0]}
-    {@const tab2 = tabsRoute[1]}
-    {@const tab3 = tabsRoute[2]}
-    {@const tab4 = tabsRoute[3]}
-
-    <TabList class="block mb-4 w-full">
-      <Tab name={tab1.name} href={tab1.href}>Bridge</Tab>
-      <Tab name={tab2.name} href={tab2.href}>
-        <span>Transactions</span>
-        {#if $paginationInfo || !$signer}
-          ({$transactions.length})
-        {:else}
-          (<Loading />)
-        {/if}
-      </Tab>
-      <Tab name={tab3.name} href={tab3.href}>Faucet</Tab>
-      {#if $srcChain && $srcChain.id == L1_CHAIN_ID}
-        <Tab name={tab4.name} href={tab4.href}>Stake</Tab>
-        <!-- <Tab name={tab3.name} href={tab3.href}>Stake</Tab> -->
-      {/if}
-    </TabList>
-
-    <TabPanel tab={tab1.name}>
-      <div class="rounded-lg py-4 flex flex-col items-center justify-center">
-        <SelectChain />
-      </div>
-      <div class="md:w-[440px] px-4 flex flex-col items-center justify-center">
-        <BridgeForm />
-      </div>
-    </TabPanel>
-
-    <TabPanel tab={tab2.name}>
-      <div class="md:min-w-[440px]">
-        <Transactions />
-      </div>
-    </TabPanel>
-
-    <TabPanel tab={tab3.name}>
-      <div class="md:w-[440px] px-4 flex flex-col items-center justify-center">
-        <Faucet />
-      </div>
-    </TabPanel>
-
-    <TabPanel tab={tab4.name}>
-      <Stake />
-    </TabPanel>
-  </Tabs>
-
-  <TooltipModal
-    title="Warning"
-    bind:isOpen={tooltipOpen}
-    bind:showXButton={showClose}>
-    <span slot="body">
-      <p class="text-left">
-        The current bridge is incompatible with L1 MXC. Please click "Claim" to
-        transform your L1 MXC into the latest version of L2 MXC, which will then
-        allow you to seamlessly bridge to L3 zkEVM.
-      </p>
-      {#if loadingApprove}
-        <Button type="accent" size="lg" class="w-4/12 mr-3" disabled={true}>
-          <LottiePlayer
-            src="/lottie/loader.json"
-            ,
-            autoplay={true}
-            loop={true}
-            controls={false}
-            renderer="svg"
-            background="transparent"
-            height={26}
-            width={26}
-            controlsLayout={[]} />
-        </Button>
-      {:else}
-        <Button
-          type="accent"
-          size="lg"
-          class="w-4/12 mr-3"
-          disabled={!isApprove}
-          on:click={approve}>
-          Approve
-        </Button>
-      {/if}
-
-      {#if loadingClaim}
-        <Button type="accent" size="lg" class="w-4/12 mr-3" disabled={true}>
-          <LottiePlayer
-            src="/lottie/loader.json"
-            ,
-            autoplay={true}
-            loop={true}
-            controls={false}
-            renderer="svg"
-            background="transparent"
-            height={26}
-            width={26}
-            controlsLayout={[]} />
-        </Button>
-      {:else}
-        <Button
-          type="accent"
-          size="lg"
-          class="w-4/12"
-          disabled={isApprove}
-          on:click={claim}>
-          Claim
-        </Button>
-      {/if}
-    </span>
-  </TooltipModal>
-</div>
diff --git a/packages/bridge-ui/src/store/modalLanguage.ts b/packages/bridge-ui/src/store/modalLanguage.ts
new file mode 100644
index 000000000..7d9ce50ce
--- /dev/null
+++ b/packages/bridge-ui/src/store/modalLanguage.ts
@@ -0,0 +1,3 @@
+import { writable } from 'svelte/store';
+
+export const isLanguageModalOpen = writable<boolean>(false);
diff --git a/packages/bridge-ui/src/styles/app.css b/packages/bridge-ui/src/styles/app.css
index 68a72ee33..ecf1279c3 100644
--- a/packages/bridge-ui/src/styles/app.css
+++ b/packages/bridge-ui/src/styles/app.css
@@ -4,6 +4,8 @@
 
 @import './override.css';
 @import './logo.css';
+@import './common.css';
+@import './lanuageModal.css';
 
 [data-theme='dark'] .switch-to-dark-mode {
   display: none;
@@ -12,3 +14,20 @@
 [data-theme='light'] .switch-to-light-mode {
   display: none;
 }
+
+.connect-button,
+.connect-button:hover {
+  background-color: #f43178;
+}
+
+button.border-accent {
+  border: 1px solid #6300ff;
+}
+
+button.action-button {
+  background-color: #6300ff;
+}
+
+button[disabled].action-button {
+  background-color: #5b5b5b38;
+}
diff --git a/packages/bridge-ui/src/styles/common.css b/packages/bridge-ui/src/styles/common.css
new file mode 100644
index 000000000..ba26bed20
--- /dev/null
+++ b/packages/bridge-ui/src/styles/common.css
@@ -0,0 +1,226 @@
+.dividerline {
+  border-bottom: 1px solid #ffffff29;
+}
+
+.circle-marker {
+  text-align: center;
+  line-height: 10px;
+}
+
+/*换行省略*/
+.break_ellipsis {
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+/*多行省略*/
+.break_ellipsis_more {
+  display: -webkit-box;
+  -webkit-box-orient: vertical;
+  -webkit-line-clamp: 2;
+  overflow: hidden;
+}
+
+.usn {
+  user-select: none;
+}
+
+.tlc {
+  text-align: center;
+}
+.tll {
+  text-align: left;
+}
+.tlr {
+  text-align: right;
+}
+
+/*换行*/
+.wbb {
+  word-break: break-all;
+}
+
+.bbox {
+  box-sizing: border-box;
+}
+
+.csp {
+  cursor: pointer;
+}
+
+/* color S*/
+.c000 {
+  color: #000;
+}
+.c333 {
+  color: #333;
+}
+.c666 {
+  color: #666;
+}
+.c999 {
+  color: #999;
+}
+.c_white {
+  color: #fff;
+}
+.c_red {
+  color: #ff0101;
+}
+.c_gray {
+  color: #9fa4b9;
+}
+/* color E */
+
+/* width S */
+.w100 {
+  width: 100%;
+}
+.w14 {
+  width: 14px;
+}
+.w16 {
+  width: 16px;
+}
+.w18 {
+  width: 18px;
+}
+/* width E */
+
+/* padding S*/
+.pd5 {
+  padding: 5px;
+}
+.pd10 {
+  padding: 10px;
+}
+.pd15 {
+  padding: 15px;
+}
+/* padding E*/
+
+/* margin S */
+.mr10 {
+  margin-right: 10px;
+}
+.mt5 {
+  margin-top: 5px;
+}
+.mt8 {
+  margin-top: 8px;
+}
+.mt10 {
+  margin-top: 10px;
+}
+/* margin E */
+
+/* font size S */
+.fs10 {
+  font-size: 10px;
+}
+.fs11 {
+  font-size: 11px;
+}
+.fs12 {
+  font-size: 12px;
+}
+.fs13 {
+  font-size: 13px;
+}
+.fs14 {
+  font-size: 14px;
+}
+.fs15 {
+  font-size: 15px;
+}
+.fs16 {
+  font-size: 16px;
+}
+.fs17 {
+  font-size: 17px;
+}
+.fs18 {
+  font-size: 18px;
+}
+.fs20 {
+  font-size: 20px;
+}
+.fs21 {
+  font-size: 21px;
+}
+.fs24 {
+  font-size: 24px;
+}
+.fs30 {
+  font-size: 30px;
+}
+.fw400 {
+  font-weight: 400;
+}
+.fw500 {
+  font-weight: 500;
+}
+.fw600 {
+  font-weight: 600;
+}
+.fwb {
+  font-weight: bold;
+}
+/* font size E */
+
+/* flex S */
+.flex {
+  display: flex;
+}
+.flexbox {
+  display: flex;
+  align-items: center;
+}
+.flex1 {
+  flex: 1;
+}
+.flex_c {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+.flex_s {
+  display: flex;
+  justify-content: space-between;
+}
+.flex_cs {
+  display: flex;
+  align-items: center;
+}
+.flex_sc {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+}
+.flex_ec {
+  display: flex;
+  align-items: center;
+  justify-content: flex-end;
+}
+.flex_wrap {
+  display: flex;
+  flex-wrap: wrap;
+}
+.flex_wrap_sb {
+  display: flex;
+  flex-wrap: wrap;
+  justify-content: space-between;
+}
+.flex_y_js {
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+}
+.flex_css {
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  align-items: center;
+}
+/* flex  E */
diff --git a/packages/bridge-ui/src/styles/lanuageModal.css b/packages/bridge-ui/src/styles/lanuageModal.css
new file mode 100644
index 000000000..0d2a6fabd
--- /dev/null
+++ b/packages/bridge-ui/src/styles/lanuageModal.css
@@ -0,0 +1,46 @@
+.language_modal {
+  position: absolute;
+  width: 100%;
+  height: 100%;
+  left: 0;
+  top: 0;
+  z-index: 100;
+  background: #000000e6;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+.language_modal .inner {
+  width: 320px;
+  background-color: #16182e;
+  border-radius: 4px;
+}
+.language_modal .Modal-header-wrapper {
+  margin: 10px 15px;
+}
+.language_modal .Modal-title-bar {
+  align-items: center;
+  display: flex;
+  justify-content: space-between;
+}
+.language_modal .Modal-title {
+  font-size: 15px;
+  line-height: 1;
+  text-align: left;
+}
+.language_modal .Modal-close-button {
+  text-align: right;
+  position: relative;
+}
+.language_modal .languagebox {
+  padding: 15px;
+  grid-gap: 1rem;
+  display: grid;
+  grid-template-columns: repeat(2, 1fr);
+}
+.language_modal .menu-item {
+  border: 1px solid #ffffff29;
+  cursor: pointer;
+  justify-content: space-between;
+  padding: 5px 8px;
+}
diff --git a/packages/bridge-ui/src/styles/override.css b/packages/bridge-ui/src/styles/override.css
index f3a501d72..cd943fe51 100644
--- a/packages/bridge-ui/src/styles/override.css
+++ b/packages/bridge-ui/src/styles/override.css
@@ -1,5 +1,9 @@
 /* Remove Arrows/Spinners */
 
+html, body, :root {
+  background-color: #2a0f69;
+}
+
 /* Chrome, Safari, Edge, Opera */
 input::-webkit-outer-spin-button,
 input::-webkit-inner-spin-button {