hotfix: merge the hotfix to main branch (#1216)

* fix: modified dApp staking for zkEVM and caption for Ethereum bridge (#1215) * fix: caption for Ethereum bridge * fix: updated dApp staking page * fix: modified words on the top banner (#1217) * fix: updated words * fix: updated words (2) * feat: add relay link to the list of bridges (#1218) * add relay link * new row for celer bridge * explicit white background on light theme for bridge card * no need for now * Update bridge-selection.scss * fix: words and styling --------- Co-authored-by: impelcrypto <[email protected]> * remove italic text, change bridge descriptions * feat: include transaction fee into calculation of ETH balance (#1220) * feat: check account balance before clicking the bridge button * feat: update logic * Update index.ts * fix: styling --------- Co-authored-by: Gregory Luneau <[email protected]> * feat: Add yoki origins modal (#1219) * yoki origins modal * initial modal commit * move background to div * move links to doclinks * alternatives to click * fix chip colors * z-index the title * update yoki modal styles * fix scoped --------- Co-authored-by: Ayumi Takahashi <[email protected]> * yoki origins banner for all networks * Revert "yoki origins banner for all networks" This reverts commit fcec5f0. * update yoki origins banner (#1221) * fix: disabled releay bridge (#1223) * fix: disable site suggested fee in MetaMask (#1225) * fix: disable site suggested fee in MetaMask * fix: clean up * fix: clean up (2) * re-enable relay link bridge (#1226) * Staker rewards calculation fix (#1224) * fix the header banner color for zkEVM (#1227) * fix: removed non Astar zkEVM history (#1222) * feat: added ASTR into Astar zkEVM (#1228) * styling: updated styling * feat: added astr * feat: updated ASTR for zkEVM * fix: avoid selecting EVM wallet twice for the first time visitor * fix: avoid selecting EVM wallet twice for the first time visitor (2) * fix: styling * fix: added stargate link * fix: disabled invalid wallet condition for zkEVM (#1231) * fix: enable layerzero bridge button (#1232) * fix: enable layerzero bridge button * fix: wallet connect * fix: clean up * fix account background color for zkEVM mainnet (#1230) * fix: total USD value (#1234) * feat: added layerswap (#1235) * fix: avoid reloading the page after changing network (#1233) * fix: avoid reloading the page after changing network * fix: use i18 in service file * Fix for tier display to show more than 2 pages (#1229) * Fix for tier display to show more than 2 pages * Fill in all tier slots * Fixed tier item height * Get dApp tier fix * feat: updated layerswap url --------- Co-authored-by: Gregory Luneau <[email protected]> Co-authored-by: Gregory Luneau <[email protected]> Co-authored-by: Ayumi Takahashi <[email protected]> Co-authored-by: Bobo <[email protected]>
AstarNetwork · Mar 15, 2024 · 02d71c2 · 02d71c2
1 parent 1a8db6e
commit 02d71c2
Show file tree

Hide file tree

Showing 56 changed files with 1,264 additions and 529 deletions.
diff --git a/src/App.vue b/src/App.vue
@@ -34,6 +34,12 @@
       :show="showOnboardingModal"
     /> -->
 
+    <modal-yoki-origins
+      v-if="showYokiOriginsModal"
+      :set-is-open="setYokiOriginsModal"
+      :show="showYokiOriginsModal"
+    />
+
     <modal-disclaimer
       v-if="showDisclaimerModal"
       :set-is-open="setShowDisclaimerModal"
@@ -56,6 +62,7 @@ import { defineComponent, computed, ref, watch, onMounted } from 'vue';
 import DashboardLayout from 'layouts/DashboardLayout.vue';
 import { useStore } from 'src/store';
 import ModalLoading from 'components/common/ModalLoading.vue';
+import ModalYokiOrigins from 'components/common/ModalYokiOrigins.vue';
 import AlertBox from 'components/common/AlertBox.vue';
 import CookiePolicy from 'components/common/CookiePolicy.vue';
 import ModalDisclaimer from 'components/common/ModalDisclaimer.vue';
@@ -91,6 +98,7 @@ export default defineComponent({
     ModalLoading,
     AlertBox,
     CookiePolicy,
+    ModalYokiOrigins,
     ModalDisclaimer,
     NotificationStack,
     ModalOnboarding,
@@ -152,6 +160,18 @@ export default defineComponent({
     //   showOnboardingModal.value = isOpen;
     // };
 
+    // Yoki Origins modal
+    const showYokiOriginsModal = ref<boolean>(false);
+    if (!localStorage.getItem(LOCAL_STORAGE.CLOSE_YOKI_ORIGINS_MODAL)) {
+      setTimeout(() => {
+        showYokiOriginsModal.value = true;
+      }, 2000);
+    }
+
+    const setYokiOriginsModal = (isOpen: boolean): void => {
+      showYokiOriginsModal.value = isOpen;
+    };
+
     const setShowDecommissionModal = (isOpen: boolean): void => {
       showDecommissionModal.value = isOpen;
     };
@@ -276,6 +296,8 @@ export default defineComponent({
       showAlert,
       showDisclaimerModal,
       showDecommissionModal,
+      showYokiOriginsModal,
+      setYokiOriginsModal,
       setShowDisclaimerModal,
       setShowDecommissionModal,
     };

diff --git a/src/assets/img/account_bg_testnet_zk.webp b/src/assets/img/account_bg_testnet_zk.webp
diff --git a/src/assets/img/account_bg_zk.webp b/src/assets/img/account_bg_zk.webp
diff --git a/src/assets/img/layerswap_logo.svg b/src/assets/img/layerswap_logo.svg
diff --git a/src/assets/img/layerzero_bridge_logo.svg b/src/assets/img/layerzero_bridge_logo.svg
diff --git a/src/assets/img/relay_bridge_logo.svg b/src/assets/img/relay_bridge_logo.svg
diff --git a/src/assets/img/yoki-origins-background.png b/src/assets/img/yoki-origins-background.png
diff --git a/src/assets/img/yoki-origins-logo.png b/src/assets/img/yoki-origins-logo.png
diff --git a/src/components/assets/Account.vue b/src/components/assets/Account.vue
@@ -144,30 +144,30 @@
   </div>
 </template>
 <script lang="ts">
-import { getShortenAddress, isValidEvmAddress } from '@astar-network/astar-sdk-core';
+import { getShortenAddress, isValidEvmAddress, wait } from '@astar-network/astar-sdk-core';
 import { FrameSystemAccountInfo } from '@polkadot/types/lookup';
 import copy from 'copy-to-clipboard';
 import { ethers } from 'ethers';
 import { $api } from 'src/boot/api';
+import ModalLockdropWarning from 'src/components/assets/modals/ModalLockdropWarning.vue';
 import AuIcon from 'src/components/header/modals/account-unification/AuIcon.vue';
 import { endpointKey, providerEndpoints } from 'src/config/chainEndpoints';
 import { SupportWallet, supportWalletObj } from 'src/config/wallets';
 import {
   ETHEREUM_EXTENSION,
   useAccount,
+  useAccountUnification,
   useBalance,
+  useConnectWallet,
   useNetworkInfo,
-  usePrice,
   useWalletIcon,
-  useAccountUnification,
-  useConnectWallet,
 } from 'src/hooks';
 import { useEvmAccount } from 'src/hooks/custom-signature/useEvmAccount';
 import { getEvmMappedSs58Address, setAddressMapping } from 'src/hooks/helper/addressUtils';
+import { useDappStaking } from 'src/staking-v3';
 import { useStore } from 'src/store';
 import { computed, defineComponent, ref, watch, watchEffect } from 'vue';
 import { useI18n } from 'vue-i18n';
-import ModalLockdropWarning from 'src/components/assets/modals/ModalLockdropWarning.vue';
 
 export default defineComponent({
   components: {
@@ -183,6 +183,11 @@ export default defineComponent({
       type: Number,
       required: true,
     },
+    nativeTokenUsd: {
+      type: Number,
+      required: false,
+      default: 0,
+    },
   },
   setup(props) {
     const balUsd = ref<number | null>(null);
@@ -198,9 +203,10 @@ export default defineComponent({
       isAccountUnification,
     } = useAccount();
 
+    const { ledger } = useDappStaking();
+
     const { toggleEvmWalletSchema } = useConnectWallet();
     const { balance, isLoadingBalance } = useBalance(currentAccount);
-    const { nativeTokenUsd } = usePrice();
     const { requestSignature } = useEvmAccount();
     const { iconWallet } = useWalletIcon();
     const { unifiedAccount, isAccountUnified } = useAccountUnification();
@@ -245,7 +251,7 @@ export default defineComponent({
     };
 
     const isSkeleton = computed<boolean>(() => {
-      if (!nativeTokenUsd.value) return false;
+      if (!props.nativeTokenUsd) return false;
       return isLoadingBalance.value;
     });
 
@@ -254,19 +260,17 @@ export default defineComponent({
     };
 
     watch(
-      [balance, nativeTokenUsd, currentAccount, isH160],
+      [balance, props, currentAccount, ledger, isZkEvm],
       () => {
         balUsd.value = null;
-        const isEvmShiden = currentNetworkIdx.value === endpointKey.SHIDEN && isH160.value;
-        if (!balance.value || !nativeTokenUsd.value) return;
-        if (isEvmShiden) {
-          // Memo: get the value from cbridge hooks
-          balUsd.value = 0;
-          return;
-        }
-
-        const bal = Number(ethers.utils.formatEther(balance.value.toString()));
-        balUsd.value = nativeTokenUsd.value * bal;
+        const h160LockedBal =
+          isZkEvm.value || !isH160.value ? '0' : String(ledger?.value?.locked.toString());
+        if (!balance.value || !props.nativeTokenUsd) return;
+
+        const bal =
+          Number(ethers.utils.formatEther(balance.value.toString())) +
+          Number(ethers.utils.formatEther(h160LockedBal));
+        balUsd.value = props.nativeTokenUsd * bal;
       },
       { immediate: true }
     );
@@ -275,6 +279,8 @@ export default defineComponent({
       try {
         if (!isH160.value || !isValidEvmAddress(currentAccount.value)) return;
         isCheckingSignature.value = true;
+        // Memo: to avoid display signature request twice while changing network
+        await wait(2000);
         await setAddressMapping({ evmAddress: currentAccount.value, requestSignature });
       } catch (error: any) {
         console.error(error.message);
@@ -322,16 +328,15 @@ export default defineComponent({
       shiden: require('/src/assets/img/account_bg_shiden.webp'),
       testnet: require('/src/assets/img/account_bg_testnet.webp'),
       zk: require('/src/assets/img/account_bg_zk.webp'),
-      testnet_zk: require('/src/assets/img/account_bg_testnet_zk.webp'),
     };
 
     const bg = computed<String>(() => {
       if (currentNetworkIdx.value === endpointKey.ASTAR) {
         return bg_img.native;
       } else if (currentNetworkIdx.value === endpointKey.SHIDEN) {
         return bg_img.shiden;
-      } else if (currentNetworkIdx.value === endpointKey.ZKATANA) {
-        return bg_img.testnet_zk;
+      } else if (currentNetworkIdx.value === endpointKey.ASTAR_ZKEVM) {
+        return bg_img.zk;
       }
       return bg_img.testnet;
     });

diff --git a/src/components/assets/Assets.vue b/src/components/assets/Assets.vue
@@ -8,6 +8,7 @@
           :ttl-native-xcm-usd-amount="ttlNativeXcmUsdAmount"
           :is-loading-erc20-amount="isLoading"
           :is-loading-xcm-assets-amount="isLoadingXcmAssetsAmount"
+          :native-token-usd="nativeTokenUsd"
         />
 
         <anchor-links
@@ -21,19 +22,19 @@
 
         <template v-if="isH160">
           <div ref="nativeSection">
-            <evm-native-token class="container" />
+            <evm-native-token class="container" :native-token-usd="nativeTokenUsd" />
           </div>
-          <zk-astr v-if="isZkEvm" class="container" />
+          <zk-astr v-if="isAstarZkEvm && astr" :astr="astr" class="container" />
         </template>
         <template v-else>
           <div ref="nativeSection">
-            <native-asset-list class="container" />
+            <native-asset-list class="container" :native-token-usd="nativeTokenUsd" />
           </div>
         </template>
 
         <template v-if="isDappStakingV3 && !isZkEvm">
           <div ref="stakingSection">
-            <staking />
+            <staking :native-token-usd="nativeTokenUsd" />
           </div>
         </template>
 
@@ -45,7 +46,10 @@
 
         <div v-if="!isLoading" ref="assetsSection">
           <template v-if="isH160">
-            <evm-asset-list :tokens="evmAssets.assets" class="container" />
+            <evm-asset-list
+              :tokens="isAstarZkEvm ? zkErcTokens : evmAssets.assets"
+              class="container"
+            />
           </template>
           <template v-else>
             <!-- Memo: hide xvm panel because AA might replace it -->
@@ -80,7 +84,9 @@ import ZkAstr from 'src/components/assets/ZkAstr.vue';
 import AstarDomains from 'src/components/header/mobile/AstarDomains.vue';
 import { providerEndpoints } from 'src/config/chainEndpoints';
 import { LOCAL_STORAGE } from 'src/config/localStorage';
-import { useAccount, useBalance, useDispatchGetDapps, useNetworkInfo } from 'src/hooks';
+import { useAccount, useBalance, useDispatchGetDapps, useNetworkInfo, usePrice } from 'src/hooks';
+import { Erc20Token } from 'src/modules/token';
+import { addressAstrZkEvm } from 'src/modules/zk-evm-bridge';
 import { CombinedDappInfo, useDappStaking, useDapps } from 'src/staking-v3';
 import RegisterBanner from 'src/staking-v3/components/RegisterBanner.vue';
 import Staking from 'src/staking-v3/components/my-staking/Staking.vue';
@@ -114,10 +120,17 @@ export default defineComponent({
     const { currentAccount } = useAccount();
 
     const { accountData } = useBalance(currentAccount);
-    const { isMainnet, currentNetworkIdx, evmNetworkIdx, isZkEvm, nativeTokenSymbol } =
-      useNetworkInfo();
+    const {
+      isMainnet,
+      currentNetworkIdx,
+      evmNetworkIdx,
+      isZkEvm,
+      isAstarZkEvm,
+      nativeTokenSymbol,
+    } = useNetworkInfo();
     // Memo: load the dApps data in advance, so that users can access to dApp staging page smoothly
     useDispatchGetDapps();
+    const { nativeTokenUsd } = usePrice();
 
     const evmNetworkId = computed(() => {
       return Number(providerEndpoints[currentNetworkIdx.value].evmChainId);
@@ -138,6 +151,22 @@ export default defineComponent({
       }
     });
 
+    const astr = computed<Erc20Token | undefined>(() => {
+      return (
+        evmAssets.value &&
+        evmAssets.value.assets &&
+        evmAssets.value.assets.find((t) => t.address === addressAstrZkEvm)
+      );
+    });
+
+    const zkErcTokens = computed<Erc20Token[] | undefined>(() => {
+      return (
+        evmAssets.value &&
+        evmAssets.value.assets &&
+        evmAssets.value.assets.filter((t) => t.address !== addressAstrZkEvm)
+      );
+    });
+
     const handleUpdateNativeTokenAssets = () => {
       if (currentAccount.value && evmNetworkIdx.value) {
         store.dispatch('assets/getAssets', { address: currentAccount.value, isFetchUsd: true });
@@ -249,6 +278,10 @@ export default defineComponent({
       stakingSection,
       projectSection,
       assetsSection,
+      isAstarZkEvm,
+      astr,
+      zkErcTokens,
+      nativeTokenUsd,
     };
   },
 });