fix: resolved new assets page bugs (#1055)

* fix: close the modal after claiming EVM withdrawal * fix: close the modal after claiming EVM withdrawal (2) * fix: ModalVesting.vue * fix: link to subscan for WASM projects * feat: added Reserved section * feat: added Reserved section (2) * fix: words * fix: refactor
AstarNetwork · Nov 28, 2023 · 9f42378 · 9f42378
1 parent 20ec748
commit 9f42378
Show file tree

Hide file tree

Showing 8 changed files with 70 additions and 38 deletions.
diff --git a/src/components/assets/NativeAssetList.vue b/src/components/assets/NativeAssetList.vue
@@ -15,7 +15,7 @@
         <div class="row--header__right">
           <div v-if="!isSkeleton" class="column--balance">
             <div class="column--amount text--amount">
-              {{ isTruncate ? $n(truncate(bal, 3)) : Number(bal) }}
+              {{ $n(truncate(bal, 3)) }}
             </div>
             <div class="column--symbol text--symbol">{{ nativeTokenSymbol }}</div>
           </div>
@@ -35,7 +35,7 @@
           </div>
           <div v-if="!isSkeleton" class="column--balance">
             <span class="column--amount text--amount">
-              {{ isTruncate ? $n(truncate(transferableBalance, 3)) : Number(transferableBalance) }}
+              {{ $n(truncate(transferableBalance, 3)) }}
             </span>
             <span class="column--symbol text--symbol">{{ nativeTokenSymbol }}</span>
           </div>
@@ -94,7 +94,7 @@
             </div>
             <div v-if="!isSkeleton" class="column--balance">
               <span class="column--amount text--amount">
-                {{ isTruncate ? $n(truncate(numEvmDeposit, 3)) : Number(numEvmDeposit) }}
+                {{ $n(truncate(numEvmDeposit, 3)) }}
               </span>
               <span class="column--symbol text--symbol">{{ nativeTokenSymbol }}</span>
             </div>
@@ -121,7 +121,7 @@
             </div>
             <div v-if="!isSkeleton" class="column--balance">
               <div class="column--amount text--amount">
-                {{ $n(truncate(lockInDappStaking + vestingTtl, 3)) }}
+                {{ $n(truncate(lockInDappStaking + vestingTtl + reservedTtl, 3)) }}
               </div>
               <div class="column--symbol text--symbol">
                 {{ nativeTokenSymbol }}
@@ -161,7 +161,7 @@
                 <div class="column--balance">
                   <template v-if="!isSkeleton">
                     <div class="column--amount text--amount">
-                      {{ isTruncate ? $n(truncate(vestingTtl, 3)) : Number(vestingTtl) }}
+                      {{ $n(truncate(vestingTtl, 3)) }}
                     </div>
                     <div class="column--symbol text--symbol">
                       {{ nativeTokenSymbol }}
@@ -181,16 +181,36 @@
               </div>
             </div>
 
+            <!-- Reserved -->
+            <div class="row--expand">
+              <div class="row--expand__info">
+                <div class="column--label text--label">{{ $t('assets.reserved') }}</div>
+                <div class="column--balance">
+                  <template v-if="!isSkeleton">
+                    <div class="column--amount text--amount">
+                      {{ $n(truncate(reservedTtl, 3)) }}
+                    </div>
+                    <div class="column--symbol text--symbol">
+                      {{ nativeTokenSymbol }}
+                    </div>
+                  </template>
+                  <template v-else>
+                    <div class="skeleton--right">
+                      <q-skeleton animation="fade" class="skeleton--md" />
+                    </div>
+                  </template>
+                </div>
+              </div>
+            </div>
+
             <!-- Staking -->
             <div class="row--expand">
               <div class="row--expand__info">
                 <div class="column--label text--label">{{ $t('common.staking') }}</div>
                 <div class="column--balance">
                   <template v-if="!isSkeleton">
                     <div class="column--amount text--amount">
-                      {{
-                        isTruncate ? $n(truncate(lockInDappStaking, 3)) : Number(lockInDappStaking)
-                      }}
+                      {{ $n(truncate(lockInDappStaking, 3)) }}
                     </div>
                     <div class="column--symbol text--symbol">
                       {{ nativeTokenSymbol }}
@@ -249,9 +269,7 @@ import ModalEvmWithdraw from 'src/components/assets/modals/ModalEvmWithdraw.vue'
 import ModalFaucet from 'src/components/assets/modals/ModalFaucet.vue';
 import ModalVesting from 'src/components/assets/modals/ModalVesting.vue';
 import { Path } from 'src/router';
-import TokenBalance from 'src/components/common/TokenBalance.vue';
 import { faucetBalRequirement } from 'src/config/wallets';
-import Balloon from 'src/components/common/Balloon.vue';
 
 export default defineComponent({
   components: {
@@ -267,6 +285,7 @@ export default defineComponent({
     const bal = ref<number>(0);
     const balUsd = ref<number | null>(null);
     const vestingTtl = ref<number>(0);
+    const reservedTtl = ref<number>(0);
     const lockInDappStaking = ref<number>(0);
     const isRocstar = ref<boolean>(false);
     const isShibuya = ref<boolean>(false);
@@ -337,7 +356,7 @@ export default defineComponent({
       // Memo: `vesting ` -> there has been inputted 1 space here
       const vesting = accountDataRef.locks.find((it) => u8aToString(it.id) === 'vesting ');
       const dappStake = accountDataRef.locks.find((it) => u8aToString(it.id) === 'dapstake');
-
+      const reserved = accountDataRef.reserved;
       if (vesting) {
         const amount = String(vesting.amount);
         vestingTtl.value = Number(ethers.utils.formatEther(amount));
@@ -346,6 +365,11 @@ export default defineComponent({
         const amount = String(dappStake.amount);
         lockInDappStaking.value = Number(ethers.utils.formatEther(amount));
       }
+
+      if (reserved) {
+        const amount = reserved.toString();
+        reservedTtl.value = Number(ethers.utils.formatEther(amount));
+      }
     });
 
     // Ref: https://stackoverflow.com/questions/48143381/css-expand-contract-animation-to-show-hide-content
@@ -361,8 +385,6 @@ export default defineComponent({
 
     const { width, screenSize } = useBreakpoints();
 
-    const isTruncate = !nativeTokenSymbol.value.toUpperCase().includes('BTC');
-
     return {
       bal,
       nativeTokenSymbol,
@@ -388,10 +410,9 @@ export default defineComponent({
       isExpand,
       isBalloonNativeToken,
       isBalloonNativeTokenClosing,
-
       width,
       screenSize,
-      isTruncate,
+      reservedTtl,
       truncate,
       buildTransferPageLink,
       handleModalVesting,

diff --git a/src/components/assets/Rewards.vue b/src/components/assets/Rewards.vue
@@ -80,6 +80,7 @@ export default defineComponent({
 
       if (pendingRewards.value > 0 && canClaimWithoutError.value) {
         await claimAll();
+        await setPendingRewards();
         return;
       }
 

diff --git a/src/components/assets/modals/ModalEvmWithdraw.vue b/src/components/assets/modals/ModalEvmWithdraw.vue
@@ -21,7 +21,7 @@
         <astar-button
           :disabled="0 >= numEvmDeposit"
           class="button--confirm"
-          @click="sendTransaction"
+          @click="handleWithdraw"
         >
           {{ $t('confirm') }}
         </astar-button>
@@ -64,10 +64,16 @@ export default defineComponent({
     };
     const { numEvmDeposit, sendTransaction, selectedTip, nativeTipPrice, setSelectedTip } =
       useEvmDeposit();
+
+    const handleWithdraw = async (): Promise<void> => {
+      await closeModal();
+      await sendTransaction();
+    };
+
     return {
       closeModal,
       numEvmDeposit,
-      sendTransaction,
+      handleWithdraw,
       isClosingModal,
       selectedTip,
       nativeTipPrice,

diff --git a/src/components/assets/modals/ModalVesting.vue b/src/components/assets/modals/ModalVesting.vue
@@ -50,7 +50,7 @@
         <astar-button
           :disabled="0 >= info.claimableAmount"
           class="button-unlock"
-          @click="sendTransaction"
+          @click="handleSendTransaction"
         >
           {{ $t('assets.modals.unlock') }}
         </astar-button>
@@ -98,11 +98,16 @@ export default defineComponent({
     };
     const { info, sendTransaction, selectedTip, nativeTipPrice, setSelectedTip } = useVesting();
 
+    const handleSendTransaction = async (): Promise<void> => {
+      await closeModal();
+      await sendTransaction();
+    };
+
     return {
       info,
       isClosingModal,
       closeModal,
-      sendTransaction,
+      handleSendTransaction,
       selectedTip,
       nativeTipPrice,
       setSelectedTip,

diff --git a/src/components/dapp-staking/dapp/ProjectDetails.vue b/src/components/dapp-staking/dapp/ProjectDetails.vue
@@ -65,13 +65,15 @@
                 <span class="text--tooltip">{{ $t('copy') }}</span>
               </q-tooltip>
             </button>
-            <a :href="blockscout + dapp.dapp.address" target="_blank" rel="noopener noreferrer">
+            <a :href="explorerUrl" target="_blank" rel="noopener noreferrer">
               <button class="box--share btn--primary">
                 <div class="icon--primary">
                   <astar-icon-external-link />
                 </div>
                 <q-tooltip>
-                  <span class="text--tooltip">{{ $t('blockscout') }}</span>
+                  <span class="text--tooltip">
+                    {{ $t(dapp.dapp.address.startsWith('0x') ? 'blockscout' : 'subscan') }}
+                  </span>
                 </q-tooltip>
               </button>
             </a>
@@ -223,9 +225,15 @@ export default defineComponent({
     const { currentNetworkIdx } = useNetworkInfo();
     const store = useStore();
     const { t } = useI18n();
-    const blockscout = computed<string>(
-      () => `${providerEndpoints[currentNetworkIdx.value].blockscout}/address/`
-    );
+
+    const explorerUrl = computed<string>(() => {
+      const address = props.dapp.dapp.address;
+      const blockscout = `${providerEndpoints[currentNetworkIdx.value].blockscout}/address/`;
+      const subscan = `${providerEndpoints[currentNetworkIdx.value].subscan}/account/`;
+      const explorer = address.startsWith('0x') ? blockscout : subscan;
+      return explorer + address;
+    });
+
     const copyAddress = (address: string): void => {
       copy(address);
       store.dispatch('general/showAlertMsg', {
@@ -263,7 +271,7 @@ export default defineComponent({
       getShortenAddress,
       copyAddress,
       goLink,
-      blockscout,
+      explorerUrl,
       communities,
       virtualMachineTags,
       CommunityType,

diff --git a/src/components/sidenav/styles/sidebar-desktop.scss b/src/components/sidenav/styles/sidebar-desktop.scss
@@ -25,13 +25,12 @@
 
 .sidebar {
   position: relative;
-  z-index: 1;
+  z-index: 100;
   width: 224px;
   padding-top: 24px;
   background: #081029;
   display: flex;
   flex-direction: column;
-  z-index: 1;
 }
 
 .sidebar--height-decentralized {

diff --git a/src/hooks/useEvmDeposit.ts b/src/hooks/useEvmDeposit.ts
@@ -7,27 +7,18 @@ import { container } from 'src/v2/common';
 import { IAssetsService } from 'src/v2/services';
 import { Symbols } from 'src/v2/symbols';
 import { computed, ref, watch } from 'vue';
-import { useI18n } from 'vue-i18n';
 
 export function useEvmDeposit() {
   const evmDeposit = ref<string>('0');
   const numEvmDeposit = ref<number>(0);
   const isEvmDeposit = ref<boolean>(false);
   const { currentAccount } = useAccount();
   const store = useStore();
-  const { t } = useI18n();
   const isLoading = computed(() => store.getters['general/isLoading']);
   const isH160 = computed(() => store.getters['general/isH160Formatted']);
   const { selectedTip, nativeTipPrice, setSelectedTip } = useGasPrice();
 
-  const sendTransaction = async (amount: number) => {
-    if (Number(amount) === 0) {
-      store.dispatch('general/showAlertMsg', {
-        msg: t('toast.amountMustNotBeZero'),
-        alertType: 'error',
-      });
-      return;
-    }
+  const sendTransaction = async () => {
     const assetsService = container.get<IAssetsService>(Symbols.AssetsService);
     await assetsService.evmWithdraw({
       amount: evmDeposit.value,

diff --git a/src/i18n/en-US/index.ts b/src/i18n/en-US/index.ts
@@ -492,11 +492,12 @@ export default {
     reward: 'Reward',
     lockedTokens: 'Locked tokens',
     vesting: 'Vesting',
+    reserved: 'Reserved',
     favorite: 'Favorite',
     addToFavorite: 'Add to favorite',
     removeFromFavorite: 'Remove from favorite',
     unifyAccounts: 'Unify accounts',
-    yourEstimatedRewards: 'Claim your estimated Rewards',
+    yourEstimatedRewards: 'Claim your estimated rewards',
     toast: {
       completedMessage: 'You have sent {transferAmt} {symbol} to {toAddress}',
       completedBridgeMessage: 'You have sent {transferAmt} {symbol} from {fromChain} to {toChain}',