Merge remote-tracking branch 'origin/mxc-wannsee-alpha3'

MXCzkEVM · Oct 29, 2023 · c45e3e2 · c45e3e2
2 parents 105f495 + d7f72b6
commit c45e3e2
Show file tree

Hide file tree

Showing 46 changed files with 1,224 additions and 316 deletions.
diff --git a/.vscode/extensions.json b/.vscode/extensions.json
diff --git a/.vscode/settings.json b/.vscode/settings.json
diff --git 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
@@ -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
diff --git 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/AddressDropdown.svelte b/packages/bridge-ui/src/components/AddressDropdown.svelte
@@ -17,7 +17,6 @@
   import { errorToast, successToast } from './NotificationToast.svelte';
   import { L2_CHAIN_ID } from '../constants/envVars';
 
-
   let address: string = '';
   let addressAvatarImgData: string = '';
   let tokenBalance: string = '';
@@ -81,7 +80,9 @@
 <!-- Makes no sense to render anything here without signer  -->
 {#if $signer}
   <div class="dropdown dropdown-bottom dropdown-end">
-    <button class="btn justify-around">
+    <!-- svelte-ignore a11y-label-has-associated-control -->
+    <!-- svelte-ignore a11y-no-noninteractive-tabindex -->
+    <label tabindex="0" class="btn justify-around">
       <span class="font-normal flex-1 text-left flex items-center">
         {#if pendingTx}
           <div class="inline-block ml-2">
@@ -101,7 +102,7 @@
         {/if}
       </span>
       <ChevronDown size="20" />
-    </button>
+    </label>
     <ul
       role="listbox"
       tabindex="0"
@@ -112,8 +113,8 @@
           <div class="text-lg mt-2">
             {tokenBalance.length > 10
               ? `${truncateString(tokenBalance)}…`
-              : tokenBalance} 
-              {$srcChain.id == L2_CHAIN_ID ? 'MXC' : 'ETH'}
+              : tokenBalance}
+            {$srcChain.id == L2_CHAIN_ID ? 'MXC' : 'ETH'}
           </div>
         {:else}
           <!-- <div class="text-lg mt-2">-- ETH</div> -->

diff --git 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
@@ -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">