feat: bridge ERC20 tokens between L1 and L2 (#974)

* styling: added L1 bridge page

* styling: remove icon-expand

* feat: added Akiba in the network

* feat: added Astar zkEVM(dummy)

* feat: fetch bridge balance

* feat: added bridge logic

* feat: added history UI

* feat: added history UI (2)

* feat: updated bridge function

* feat: updated global web3 instanse to accept zkEVM parameter

* feat: updated checkIsClaimRequired function

* feat: updated token transfer feature

* fix: avoid request duplicated change network request in MetaMask

* feat: added Action Required flag

* feat: added claim function

* feat: updated explorer links

* feat: updated sidebar

* feat: added ZkAstr component

* fix: clean up

* fix: clean up (2)

* feat: added bridge page

* refactor: updated BridgeSelection UI

* fix: updated isSetGasByWallet property

* feat: added select-token logic

* feat: added bridge ERC20 logic

* feat: test importing tokens

* feat: updated endpoint from Akiba to zKatana

* fix: clean up

* fix: clean up (2)

* fix: gives some time for synching in the bridge API

* fix: gives some time for synching in the bridge API (2)

* fix: update the number of display the recent transactions

* wip

* feat: added Sepolia faucet

* refactor: updated api.ts

* refactor: updated words

* Invalid balance fix

* fix: updated approve logic

* fix: conflicts (2)

* fix: conflicts (2)

* fix: words

* fix: words

* fix: remove ZK_Bridge_IMPORT_TOKENS

* feat: added explorer link

* feat: added approve logic

* feat: approve checkbox

* feat: apply i18

* feat: added blacklist

* fix: updated zKatana logo

* fix: added token selection modal for mobile devices

* fix: useL1History

* fix: updted fetching history

* fix: copy icon color

* fix: updated ETH logo

* fix: updated token logo

* fix: clean up

* fix: updated input placeholder

* fix: clean up

* fix: avoid double clicking

* fix: update inputHandler

* fix: display 2 buttons

* fix: clean up

* fix: updated token image logic

* fix: words

* fix: word size

* test: log the allowance

* fix: check the token existing

---------

Co-authored-by: Bobo <bobo.kovacevic@gmail.com>

src/components/assets/Assets.vue

@@ -47,7 +47,7 @@ import Account from 'src/components/assets/Account.vue';
 import DynamicLinks from 'src/components/assets/DynamicLinks.vue';
 import EvmAssetList from 'src/components/assets/EvmAssetList.vue';
 import XcmNativeAssetList from 'src/components/assets/XcmNativeAssetList.vue';
-import { endpointKey, providerEndpoints } from 'src/config/chainEndpoints';
+import { providerEndpoints } from 'src/config/chainEndpoints';
 import { LOCAL_STORAGE } from 'src/config/localStorage';
 import { isValidEvmAddress } from '@astar-network/astar-sdk-core';
 import { useAccount, useBalance, useDispatchGetDapps, useNetworkInfo } from 'src/hooks';

src/components/assets/Erc20Currency.vue

@@ -7,7 +7,7 @@
           <div class="column--currency">
             <div class="token-logo">
               <jazzicon
-                v-if="token.image.includes('custom-token')"
+                v-if="token.image && token.image.includes('custom-token')"
                 :address="token.address"
                 :diameter="24"
               />
@@ -30,7 +30,10 @@
               </div>
             </div>
           </div>
-          <div class="column--asset-buttons column--buttons--multi">
+          <div
+            class="column--asset-buttons"
+            :class="isZkEvm ? 'column--buttons--zkevm' : 'column--buttons--multi'"
+          >
             <!-- Memo: test checking if styling won't break -->
             <!-- <div v-if="token.isXC20" /> -->
             <router-link :to="buildTransferPageLink(token.symbol)">
@@ -43,6 +46,11 @@
                 <button class="btn btn--sm">{{ $t('assets.wrap') }}</button>
               </a>
             </div>
+            <div v-if="isZkEvm">
+              <router-link :to="buildEthereumBridgePageLink()">
+                <button class="btn btn--sm">{{ $t('assets.bridge') }}</button>
+              </router-link>
+            </div>
             <div class="screen--xl">
               <a
                 class="box--explorer"
@@ -83,11 +91,11 @@
             </div>
             <div v-if="isImportedToken" class="screen--xl">
               <button
-                class="btn btn--sm btn--delete adjuster--width"
+                class="btn btn--sm adjuster--width"
                 @click="handleDeleteStoredToken(token.address)"
               >
-                <div class="adjuster--width icon--delete">
-                  <astar-icon-delete size="22" />
+                <div class="adjuster--width">
+                  <astar-icon-delete size="20" />
                 </div>
               </button>
               <q-tooltip>
@@ -112,10 +120,11 @@ import {
   getErc20Explorer,
   getStoredERC20Tokens,
 } from 'src/modules/token';
-import { buildTransferPageLink } from 'src/router/routes';
+import { buildTransferPageLink, buildEthereumBridgePageLink } from 'src/router/routes';
 import { useStore } from 'src/store';
 import { computed, defineComponent, PropType } from 'vue';
 import Jazzicon from 'vue3-jazzicon/src/components';
+
 export default defineComponent({
   components: {
     [Jazzicon.name]: Jazzicon,
@@ -134,7 +143,7 @@ export default defineComponent({
   },
   setup({ token }) {
     const store = useStore();
-    const { currentNetworkIdx, evmNetworkIdx } = useNetworkInfo();
+    const { currentNetworkIdx, evmNetworkIdx, isZkEvm } = useNetworkInfo();
 
     const explorerLink = computed(() => {
       const tokenAddress = token.address;
@@ -162,9 +171,11 @@ export default defineComponent({
       explorerLink,
       isImportedToken,
       provider,
+      isZkEvm,
       buildTransferPageLink,
       addToEvmProvider,
       handleDeleteStoredToken,
+      buildEthereumBridgePageLink,
     };
   },
 });

src/components/assets/EvmAssetList.vue

@@ -28,6 +28,9 @@
       <div v-if="search.length > 0 && filteredTokens.length === 0" class="box--no-result">
         <span class="text--xl">{{ $t('assets.noResults') }}</span>
       </div>
+      <div v-else-if="filteredTokens.length === 0" class="box--no-result">
+        <span class="text--xl">{{ $t('assets.letsImportToken') }}</span>
+      </div>
     </div>
   </div>
 </template>

src/components/assets/styles/asset-list.scss

@@ -267,6 +267,19 @@
   }
 }
 
+.column--buttons--zkevm {
+  @media (min-width: $xl) {
+    display: grid;
+    width: 400px;
+    grid-template-columns: auto auto 60px 60px 60px;
+    justify-content: end;
+    column-gap: 8px;
+  }
+  @media (min-width: $xxl) {
+    column-gap: 24px;
+  }
+}
+
 .adjuster--width {
   @media (min-width: $xl) {
     width: 70px !important;
@@ -402,14 +415,6 @@
   }
 }
 
-.btn--delete {
-  margin-top: 4px;
-}
-
-.icon--delete {
-  margin-top: 1px;
-}
-
 .row--menu {
   display: flex;
   align-items: center;

src/components/assets/transfer/LocalTransfer.vue

@@ -143,7 +143,7 @@
               </span>
             </div>
             <span
-              v-if="isH160 && !isNativeToEvm"
+              v-if="isZkEvm || (isH160 && !isNativeToEvm)"
               :class="isChecked ? 'color--gray1' : 'color--not-checked'"
             >
               <div class="row--warning-title">
@@ -205,7 +205,7 @@ import SpeedConfiguration from 'src/components/common/SpeedConfiguration.vue';
 import TokenBalance from 'src/components/common/TokenBalance.vue';
 import { useAccount, useNetworkInfo, useTokenTransfer, useWalletIcon } from 'src/hooks';
 import { Asset } from 'src/v2/models';
-import { PropType, computed, defineComponent, watchEffect } from 'vue';
+import { PropType, computed, defineComponent } from 'vue';
 import Jazzicon from 'vue3-jazzicon/src/components';
 
 export default defineComponent({
@@ -228,7 +228,8 @@ export default defineComponent({
   setup(props) {
     const { iconWallet } = useWalletIcon();
     const { currentAccount, currentAccountName, multisig } = useAccount();
-    const { nativeTokenSymbol, currentNetworkName, isSupportAuTransfer } = useNetworkInfo();
+    const { nativeTokenSymbol, currentNetworkName, isSupportAuTransfer, isZkEvm } =
+      useNetworkInfo();
     const t = computed<Asset>(() => props.token);
     const {
       selectedTip,
@@ -287,6 +288,7 @@ export default defineComponent({
       isTransferNativeToken,
       isNativeToEvm,
       multisig,
+      isZkEvm,
       currentNetworkName,
       isSupportAuTransfer,
       isValidEvmAddress,