feat: add bridge luanguage and update ui

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 />

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'),

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,
+    }
   },
 };
 

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}

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">

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>

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>

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>
 

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>