feat: support zkEVM mainnet (#1208)

* feat: support zkEVM mainnet * feat: disabled withdrawal * fix: clean up * fix: getShortNetworkName * feat: check provider's chain ID * fix: fetch native token price * fix: use watchEffect for 'setBonus' fn * fix: disabled bridging WETH * fix: words * feat: added zkEVM to WC configuration * feat: added WETH (Astar zkEVM) * feat: added banner for zkEVM * fix: clean up * fix: clean up (2) * fix: condition for variable * fix: updated colors * feat: added default tokens * fix: matic image * fix: added coming soon * feat: enables withdrawal from L2 (#1214) * fix: enabled withdrawal * fix: clean up
AstarNetwork · Mar 6, 2024 · 1a8db6e · 1a8db6e
1 parent 5ca0680
commit 1a8db6e
Show file tree

Hide file tree

Showing 42 changed files with 1,679 additions and 174 deletions.
diff --git a/src/components/assets/Account.vue b/src/components/assets/Account.vue
@@ -13,30 +13,47 @@
           </div>
           <div v-else />
           <div class="wallet-tab__bg">
-            <!-- EVM -->
             <template v-if="isH160">
-              <!-- zkEVM -->
               <template v-if="isZkEvm">
-                <a class="btn" href="/shibuya-testnet/assets"> Shibuya EVM (L1) </a>
-                <div v-if="isZkEvm" class="btn active">Astar zKatana</div>
+                <template v-if="currentNetworkIdx === endpointKey.ASTAR_ZKEVM">
+                  <a class="btn" href="/astar/assets"> Astar EVM (L1) </a>
+                  <div class="btn active">Astar zkEVM</div>
+                </template>
+                <template v-if="currentNetworkIdx === endpointKey.ZKATANA">
+                  <a class="btn" href="/shibuya-testnet/assets"> Shibuya EVM (L1) </a>
+                  <div class="btn active">Astar zKatana</div>
+                </template>
               </template>
 
-              <!-- Astar EVM -->
               <template v-else>
                 <div class="btn active">
                   {{ currentNetworkName.replace('Network', '') }}
                   EVM (L1)
                 </div>
-                <a v-if="currentNetworkIdx === 2" class="btn" href="/zkatana-testnet/assets">
+                <a
+                  v-if="currentNetworkIdx === endpointKey.SHIBUYA"
+                  class="btn"
+                  href="/zkatana-testnet/assets"
+                >
                   Astar zKatana
                 </a>
-                <a v-else-if="currentNetworkIdx !== 1" class="btn" disabled>Astar zkEVM</a>
+                <a
+                  v-else-if="currentNetworkIdx === endpointKey.ASTAR"
+                  href="/astar-zkevm/assets"
+                  class="btn"
+                >
+                  Astar zkEVM
+                </a>
               </template>
             </template>
 
             <!-- Native -->
             <div v-else class="btn active">
-              {{ currentNetworkIdx === 4 ? 'Astar' : currentNetworkName.replace('Network', '') }}
+              {{
+                currentNetworkIdx === endpointKey.ZKATANA
+                  ? 'Astar'
+                  : currentNetworkName.replace('Network', '')
+              }}
               {{ $t('native') }}
             </div>
           </div>
@@ -348,6 +365,7 @@ export default defineComponent({
       isModalLockdropWarning,
       isAllowLockdropDispatch,
       isWalletConnect,
+      endpointKey,
       handleModalLockdropWarning,
       getShortenAddress,
       copyAddress,

diff --git a/src/components/assets/Assets.vue b/src/components/assets/Assets.vue
@@ -198,7 +198,7 @@ export default defineComponent({
     );
 
     const handleEvmAssetLoader = (): void => {
-      if (isMainnet.value && isH160.value) {
+      if (isMainnet.value && isH160.value && !isZkEvm.value) {
         const isAssets = evmAssets.value.assets.length > 0;
         store.commit('general/setLoading', !isAssets);
       }

diff --git a/src/components/assets/EvmAssetList.vue b/src/components/assets/EvmAssetList.vue
@@ -51,6 +51,7 @@ import { useNetworkInfo } from 'src/hooks';
 import { Erc20Token } from 'src/modules/token';
 import { PropType, computed, defineComponent, ref } from 'vue';
 import { useStore } from 'src/store';
+import { LOCAL_STORAGE } from 'src/config/localStorage';
 
 export default defineComponent({
   components: {
@@ -71,8 +72,19 @@ export default defineComponent({
     const symbol = ref<string>('');
     const isSearch = ref<boolean>(false);
     const search = ref<string>('');
-    const { isMainnet } = useNetworkInfo();
-    const isListReady = computed<boolean>(() => !!(!isMainnet.value || props.tokens.length > 0));
+    const { isMainnet, isZkEvm } = useNetworkInfo();
+    const isListReady = computed<boolean>(() => {
+      const importedEvmTokens = localStorage.getItem(LOCAL_STORAGE.EVM_TOKEN_IMPORTS);
+      const tokensData = importedEvmTokens ? JSON.parse(importedEvmTokens) : [];
+      const isImportedTokens = tokensData.length > 0;
+      const baseCondition = !isMainnet.value || props.tokens.length > 0;
+
+      if (isImportedTokens) {
+        return !!baseCondition;
+      } else {
+        return !!(baseCondition || isZkEvm.value);
+      }
+    });
 
     const filteredTokens = computed<Erc20Token[] | []>(() => {
       if (!props.tokens) return [];
@@ -90,6 +102,15 @@ export default defineComponent({
           return isFoundToken ? token : undefined;
         })
         .filter((it) => it !== undefined)
+        .sort((a, b) => {
+          if (a!.symbol < b!.symbol) {
+            return -1;
+          }
+          if (a!.symbol > b!.symbol) {
+            return 1;
+          }
+          return 0;
+        })
         .sort((a, b) => Number(b?.userBalanceUsd) - Number(a?.userBalanceUsd)) as Erc20Token[];
       return result.length > 0 ? result : [];
     });

diff --git a/src/components/assets/ZkAstr.vue b/src/components/assets/ZkAstr.vue
@@ -26,7 +26,8 @@
           </button>
           <span class="text--mobile-menu">{{ $t('assets.bridge') }}</span>
           <q-tooltip>
-            <span class="text--tooltip">{{ $t('assets.bridge') }}</span>
+            <!-- <span class="text--tooltip">{{ $t('assets.bridge') }}</span> -->
+            <span class="text--tooltip">Coming soon!</span>
           </q-tooltip>
         </router-link>
 
@@ -36,7 +37,8 @@
           </button>
           <span class="text--mobile-menu">{{ $t('assets.send') }}</span>
           <q-tooltip>
-            <span class="text--tooltip">{{ $t('assets.send') }}</span>
+            <!-- <span class="text--tooltip">{{ $t('assets.send') }}</span> -->
+            <span class="text--tooltip">Coming soon!</span>
           </q-tooltip>
         </router-link>
       </div>
@@ -45,7 +47,6 @@
 </template>
 <script lang="ts">
 import { getUsdBySymbol, truncate } from '@astar-network/astar-sdk-core';
-import TokenBalance from 'src/components/common/TokenBalance.vue';
 import { ASTAR_NATIVE_TOKEN } from 'src/config/chain';
 import { useNetworkInfo } from 'src/hooks';
 import { getTokenImage } from 'src/modules/token';

diff --git a/src/components/assets/styles/account.scss b/src/components/assets/styles/account.scss
@@ -121,7 +121,7 @@
   // zkEVM
   &.network-3 {
     .text--address {
-      background: linear-gradient(90deg, #226dff 25%, #703ac2 100%);
+      background: linear-gradient(90deg, #0047ff 0%, #00d4ff 98%);
       background-clip: text;
       -webkit-background-clip: text;
       -webkit-text-fill-color: transparent;
@@ -328,7 +328,7 @@
     .wallet-tab {
       .btn {
         &.active {
-          background: linear-gradient(270deg, #226dff 25%, #703ac2 100%);
+          background: linear-gradient(90deg, #0047ff 0%, #00d4ff 98%);
         }
       }
     }

diff --git a/src/components/bridge/BridgeSelection.vue b/src/components/bridge/BridgeSelection.vue
@@ -143,7 +143,7 @@ export default defineComponent({
     });
 
     const isEnableEthBridge = computed<boolean>(() => {
-      if (!isZkEvm.value || currentNetworkName.value === EthBridgeNetworkName.AstarZk) {
+      if (!isZkEvm.value) {
         return false;
       }
       return true;

diff --git a/src/components/bridge/common/ImportTokenInfo.vue b/src/components/bridge/common/ImportTokenInfo.vue
@@ -127,7 +127,7 @@
           <span> {{ $t('bridge.tokenInfo.tokenHasBeenAdded') }}</span>
         </span>
         <span v-else-if="isBlackListToken" class="text--error">
-          {{ $t('bridge.tokenInfo.tokenNotSupported') }}
+          {{ $t('bridge.tokenInfo.tokenNotSupported', { network: fromChainName }) }}
         </span>
         <span v-else class="text--error">{{ $t('bridge.tokenInfo.interactCarefully') }}</span>
       </div>

diff --git a/src/components/bridge/ethereum/L1Bridge.vue b/src/components/bridge/ethereum/L1Bridge.vue
@@ -23,14 +23,24 @@
           </div>
         </div>
       </div>
-      <div class="row--reverse">
+      <div v-if="isEnabledWithdrawal" class="row--reverse">
         <button
           class="icon--reverse cursor-pointer"
           @click="() => reverseChain(fromChainName, toChainName)"
         >
           <astar-icon-sync size="20" />
         </button>
       </div>
+      <div v-else class="row--reverse">
+        <button class="icon--reverse" disabled>
+          <astar-icon-sync size="20" />
+        </button>
+        <q-tooltip>
+          <span class="text--tooltip">
+            {{ $t('bridge.disabledWithdrawal', { network: fromChainName }) }}
+          </span>
+        </q-tooltip>
+      </div>
       <div class="box--input-field">
         <div class="box__space-between">
           <span> {{ $t('to') }}</span>
@@ -154,7 +164,7 @@
 import { wait } from '@astar-network/astar-sdk-core';
 import { isHex } from '@polkadot/util';
 import TokenBalance from 'src/components/common/TokenBalance.vue';
-import { useAccount } from 'src/hooks';
+import { useAccount, useNetworkInfo } from 'src/hooks';
 import { EthBridgeNetworkName, ZkToken, zkBridgeIcon } from 'src/modules/zk-evm-bridge';
 import { useStore } from 'src/store';
 import { PropType, defineComponent, watch, ref, computed } from 'vue';
@@ -245,9 +255,11 @@ export default defineComponent({
   },
   setup(props) {
     const { currentAccount } = useAccount();
+    const { isZkatana } = useNetworkInfo();
     const store = useStore();
     const isHandling = ref<boolean>(false);
     const isLoading = computed<boolean>(() => store.getters['general/isLoading']);
+    const isEnabledWithdrawal = computed<boolean>(() => true);
 
     const bridge = async (): Promise<void> => {
       isHandling.value = true;
@@ -292,6 +304,7 @@ export default defineComponent({
       EthBridgeNetworkName,
       isHandling,
       isLoading,
+      isEnabledWithdrawal,
       bridge,
       approve,
     };

diff --git a/src/components/bridge/ethereum/L1History.vue b/src/components/bridge/ethereum/L1History.vue
@@ -249,7 +249,7 @@ export default defineComponent({
         case EthBridgeNetworkName.Zkatana:
           return blockExplorerUrls[EVM.ZKATANA_TESTNET] + txUrl;
         case EthBridgeNetworkName.AstarZk:
-          return blockExplorerUrls[EVM.SEPOLIA_TESTNET] + txUrl;
+          return blockExplorerUrls[EVM.ASTAR_ZKEVM_MAINNET] + txUrl;
 
         default:
           return blockExplorerUrls[EVM.SEPOLIA_TESTNET] + txUrl;

diff --git a/src/components/common/ModalConnectionTrouble.vue b/src/components/common/ModalConnectionTrouble.vue
@@ -110,11 +110,10 @@
 import { truncate, wait } from '@astar-network/astar-sdk-core';
 import { fadeDuration } from '@astar-network/astar-ui';
 import ModalWrapper from 'src/components/common/ModalWrapper.vue';
-import { defineComponent, ref, computed } from 'vue';
-import { docsUrl, polkadotJsUrl, socialUrl } from 'src/links';
 import { useBreakpoints, useNetworkInfo } from 'src/hooks';
-import { endpointKey } from 'src/config/chainEndpoints';
+import { docsUrl, socialUrl } from 'src/links';
 import { useStore } from 'src/store';
+import { defineComponent, ref } from 'vue';
 import { useI18n } from 'vue-i18n';
 
 export default defineComponent({

diff --git a/src/components/header/HeaderComp.vue b/src/components/header/HeaderComp.vue
@@ -51,26 +51,27 @@ export default defineComponent({
     height: 6rem;
   }
 
+  // Memo: hide the border bottom as we have header message with background color
   // shibuya, zkyoto, local
-  border-image: linear-gradient(90deg, #6c6c6c 25%, #b7b7b7 100%);
-  border-image-slice: 1;
+  /* border-image: linear-gradient(90deg, #6c6c6c 25%, #b7b7b7 100%); */
+  /* border-image-slice: 1; */
 
   // astar native
   &.header__border-0 {
-    border-image: linear-gradient(90deg, #e6007a 25%, #ff9dd1 100%);
-    border-image-slice: 1;
+    /* border-image: linear-gradient(90deg, #e6007a 25%, #ff9dd1 100%); */
+    /* border-image-slice: 1; */
   }
 
   // shiden
   &.header__border-1 {
-    border-image: linear-gradient(90deg, #5928b1 25%, #b092ea 100%);
-    border-image-slice: 1;
+    /* border-image: linear-gradient(90deg, #5928b1 25%, #b092ea 100%); */
+    /* border-image-slice: 1; */
   }
 
   // zkEVM
   &.header__border-3 {
-    border-image: linear-gradient(90deg, #703ac2 25%, #226dff 100%);
-    border-image-slice: 1;
+    /* border-image: linear-gradient(90deg, #703ac2 25%, #226dff 100%); */
+    /* border-image-slice: 1; */
   }
 }
 

diff --git a/src/components/header/YokiBanner.vue b/src/components/header/YokiBanner.vue
@@ -0,0 +1,68 @@
+<template>
+  <div>
+    <!-- Memo: add this line later -->
+    <!-- <a href="https://yoki.astar.network/" target="_blank" rel="noopener noreferrer" class="banner"> -->
+    <div class="banner">
+      <span>
+        <span class="text--ledger-users">{{ $t('warning.yoki') }}</span>
+        <span>
+          {{ $t('warning.yokiSignUp') }}
+        </span>
+      </span>
+      <astar-icon-arrow-right />
+      <!-- </a> -->
+    </div>
+  </div>
+</template>
+
+<script lang="ts">
+import { defineComponent } from 'vue';
+import { endpointKey } from 'src/config/chainEndpoints';
+
+export default defineComponent({
+  setup() {
+    return { endpointKey };
+  },
+});
+</script>
+
+<style lang="scss" scoped>
+@import 'src/css/quasar.variables.scss';
+
+.banner {
+  color: $gray-2;
+  font-weight: 600;
+  padding: 4px 8px 8px 8px;
+  font-size: 12px;
+  position: relative;
+  z-index: 2;
+  display: flex;
+  align-items: center;
+  @media (min-width: $sm) {
+    font-size: 14px;
+    padding: 4px 16px 8px 16px;
+  }
+
+  &.banner {
+    background: linear-gradient(90deg, #0047ff 0%, #00d4ff 98%);
+  }
+}
+
+a.banner {
+  transition: all 0.2s ease;
+  &:hover {
+    filter: brightness(1.1);
+  }
+}
+
+.text--ledger-users {
+  font-weight: 800;
+  padding: 3px 9px;
+  border-radius: 4px;
+  border: 1px solid $gray-2;
+  margin-right: 4px;
+  @media (min-width: $sm) {
+    margin-right: 8px;
+  }
+}
+</style>
diff --git a/src/components/header/modals/SelectAccount.vue b/src/components/header/modals/SelectAccount.vue
@@ -305,6 +305,8 @@ export default defineComponent({
             isLedgerReady.value = true;
             const transport = (ledgerData as any).__internal__app.transport;
             transport.close();
+            localStorage.setItem(LOCAL_STORAGE.IS_LEDGER, isLedger.toString());
+            store.commit('general/setIsLedger', isLedger);
           }
         } catch (error: any) {
           console.error(error);

diff --git a/src/components/header/modals/SelectNetwork.vue b/src/components/header/modals/SelectNetwork.vue
@@ -13,7 +13,6 @@
 
       <button
         class="card--astar box--hover--active"
-        :disabled="true"
         :class="selNetworkId === endpointKey.ASTAR_ZKEVM && 'border--active'"
         @click="setSelNetwork(endpointKey.ASTAR_ZKEVM)"
       >

diff --git a/src/components/header/styles/modal-network-wallet.scss b/src/components/header/styles/modal-network-wallet.scss
@@ -73,7 +73,7 @@
 }
 
 .bottom--zkevm {
-  background: linear-gradient(270deg, #703ac2 26.04%, #226dff 100%);
+  background: linear-gradient(90deg, #0047ff 0%, #00d4ff 98%);
 }
 
 .container--other-networks {