feat: added 'total claimed rewards' amount on 'Your Rewards' panel (#376

)

* feat: added rewards panel on the dashboard page

* refactor: use 'wait' function instead of 'setTimeout'

* feat: added holder panel

* feat: added claimed rewards information on 'Your Rewards' panel

* refactor: clean up

* feat: update the rewards amount after claiming

* fix: reset claimedRewardsAmount whenever users changed their account

src/boot/api.ts

@@ -43,13 +43,19 @@ export default boot(async ({ store }) => {
 
   let endpoint = selectedEndpoint.hasOwnProperty(networkIdx.value)
     ? selectedEndpoint[networkIdx.value]
+      ? selectedEndpoint[networkIdx.value]
+      : randomEndpoint
     : randomEndpoint;
 
   if (networkIdx.value === endpointKey.CUSTOM) {
     const customEndpoint = computed(() => store.getters['general/customEndpoint']);
     endpoint = customEndpoint.value;
   }
 
+  if (networkIdx.value === endpointKey.LOCAL) {
+    endpoint = providerEndpoints[networkIdx.value].endpoints[0].endpoint;
+  }
+
   // set metadata header
   const favicon = providerEndpoints[Number(networkIdx.value)].favicon;
   useMeta({

src/components/assets/Assets.vue

@@ -23,6 +23,7 @@ import { useStore } from 'src/store';
 import { defineComponent, computed, ref, watchEffect } from 'vue';
 import { useCbridgeV2 } from 'src/hooks';
 import { LOCAL_STORAGE } from 'src/config/localStorage';
+import { wait } from 'src/hooks/helper/common';
 
 export default defineComponent({
   components: {
@@ -37,15 +38,14 @@ export default defineComponent({
     const selectedAddress = computed(() => store.getters['general/selectedAddress']);
     const isH160 = computed(() => store.getters['general/isH160Formatted']);
 
-    const setIsDisplay = (): void => {
+    const setIsDisplay = async (): Promise<void> => {
       const address = localStorage.getItem(LOCAL_STORAGE.SELECTED_ADDRESS);
       const isEthereumExtension = address === 'Ethereum Extension';
       if (!isDisplay.value && isEthereumExtension) {
         // Memo: Wait for update the `isH160` state
         const secDelay = 1 * 1000;
-        setTimeout(() => {
-          isDisplay.value = true;
-        }, secDelay);
+        await wait(secDelay);
+        isDisplay.value = true;
       } else {
         isDisplay.value = true;
       }

src/components/assets/modals/ModalEvmWithdraw.vue

@@ -24,6 +24,7 @@
 import { useEvmDeposit } from 'src/hooks';
 import { defineComponent, ref } from 'vue';
 import { fadeDuration } from '@astar-network/astar-ui';
+import { wait } from 'src/hooks/helper/common';
 
 export default defineComponent({
   props: {
@@ -42,12 +43,11 @@ export default defineComponent({
   },
   setup(props) {
     const isClosingModal = ref<boolean>(false);
-    const closeModal = (): void => {
+    const closeModal = async (): Promise<void> => {
       isClosingModal.value = true;
-      setTimeout(() => {
-        props.handleModalEvmWithdraw({ isOpen: false });
-        isClosingModal.value = false;
-      }, fadeDuration);
+      await wait(fadeDuration);
+      props.handleModalEvmWithdraw({ isOpen: false });
+      isClosingModal.value = false;
     };
     const { numEvmDeposit, sendTransaction } = useEvmDeposit(closeModal);
     return {

src/components/assets/modals/ModalFaucet.vue

@@ -43,6 +43,7 @@
 import { useFaucet } from 'src/hooks';
 import { defineComponent, computed, ref } from 'vue';
 import { fadeDuration } from '@astar-network/astar-ui';
+import { wait } from 'src/hooks/helper/common';
 
 export default defineComponent({
   props: {
@@ -61,13 +62,12 @@ export default defineComponent({
     const { requestFaucet, isLoading, unit, isAbleToFaucet, countDown, faucetAmount } =
       useFaucet(isModalFaucet);
 
-    const closeModal = (): void => {
+    const closeModal = async (): Promise<void> => {
       isClosingModal.value = true;
 
-      setTimeout(() => {
-        props.handleModalFaucet({ isOpen: false });
-        isClosingModal.value = false;
-      }, fadeDuration);
+      await wait(fadeDuration);
+      props.handleModalFaucet({ isOpen: false });
+      isClosingModal.value = false;
     };
 
     const handleRequest = async () => {

src/components/assets/modals/ModalSelectAccount.vue

@@ -56,6 +56,7 @@
 </template>
 <script lang="ts">
 import { isValidEvmAddress } from 'src/config/web3';
+import { wait } from 'src/hooks/helper/common';
 import { getSelectedAccount } from 'src/hooks/helper/wallet';
 import { useStore } from 'src/store';
 import { SubstrateAccount } from 'src/store/general/state';
@@ -98,10 +99,11 @@ export default defineComponent({
     const isEthWallet = computed(() => store.getters['general/isEthWallet']);
     const selAddress = ref(!isH160 ? (account?.address as string) : '');
 
-    const closeOption = () => {
-      setTimeout(() => {
-        openOption.value = false;
-      }, 400);
+    const closeOption = async (): Promise<void> => {
+      // Memo: load the account data before closing
+      const delay = 400;
+      await wait(delay);
+      openOption.value = false;
     };
 
     const changeAddress = (e: any) => {

src/components/assets/modals/ModalTransfer.vue

@@ -119,6 +119,7 @@ import Web3 from 'web3';
 import ModalSelectAccount from './ModalSelectAccount.vue';
 import { registeredErc20Tokens } from 'src/modules/token';
 import { fadeDuration } from '@astar-network/astar-ui';
+import { wait } from 'src/hooks/helper/common';
 
 export default defineComponent({
   components: { ModalSelectAccount },
@@ -236,13 +237,12 @@ export default defineComponent({
       isErc20Transfer.value = isH160.value && !isNativeToken.value;
     };
 
-    const closeModal = (): void => {
+    const closeModal = async (): Promise<void> => {
       isClosingModal.value = true;
       resetStates();
-      setTimeout(() => {
-        props.handleModalTransfer({ isOpen: false, currency: '' });
-        isClosingModal.value = false;
-      }, fadeDuration);
+      await wait(fadeDuration);
+      props.handleModalTransfer({ isOpen: false, currency: '' });
+      isClosingModal.value = false;
     };
 
     const toMaxAmount = async (): Promise<void> => {

src/components/assets/modals/ModalVesting.vue

@@ -55,6 +55,7 @@
 import { AccountData, useVesting } from 'src/hooks';
 import { defineComponent, PropType, ref } from 'vue';
 import { fadeDuration } from '@astar-network/astar-ui';
+import { wait } from 'src/hooks/helper/common';
 
 export default defineComponent({
   props: {
@@ -78,12 +79,11 @@ export default defineComponent({
   },
   setup(props) {
     const isClosingModal = ref<boolean>(false);
-    const closeModal = (): void => {
+    const closeModal = async (): Promise<void> => {
       isClosingModal.value = true;
-      setTimeout(() => {
-        props.handleModalVesting({ isOpen: false });
-        isClosingModal.value = false;
-      }, fadeDuration);
+      await wait(fadeDuration);
+      props.handleModalVesting({ isOpen: false });
+      isClosingModal.value = false;
     };
     const { info, sendTransaction } = useVesting(closeModal);
 

src/components/common/ModalSelectAccount.vue

@@ -93,6 +93,7 @@ import { useStore } from 'src/store';
 import { SubstrateAccount } from 'src/store/general/state';
 import { computed, defineComponent, ref, watch, watchEffect } from 'vue';
 import ModalSelectAccountOption from 'src/components/common/ModalSelectAccountOption.vue';
+import { wait } from 'src/hooks/helper/common';
 
 enum Role {
   FromAddress = 'FromAddress',
@@ -173,10 +174,11 @@ export default defineComponent({
           : isH160.value;
     });
 
-    const closeOption = () => {
-      setTimeout(() => {
-        openOption.value = false;
-      }, 400);
+    const closeOption = async (): Promise<void> => {
+      // Memo: load the account data before closing
+      const delay = 400;
+      await wait(delay);
+      openOption.value = false;
     };
 
     const valueAddressOrWallet = ref<string>('');

src/components/dapp-staking/DiscoverDappsTab.vue

@@ -142,6 +142,10 @@ export default defineComponent({
   align-items: center;
   justify-content: center;
   width: 100%;
+  margin-bottom: 24px;
+  @media (min-width: $sm) {
+    margin-bottom: 0px;
+  }
 }
 
 .warning-text-container {

src/components/dapp-staking/UserRewards.vue

@@ -2,7 +2,20 @@
   <div v-if="isStaker" class="wrapper--user-rewards-container">
     <div class="container user-rewards-container dark:tw-bg-darkGray-800">
       <div class="row">
-        <span class="title container--title--color">Your Rewards</span>
+        <div>
+          <span class="title container--title--color">{{ $t('dappStaking.yourRewards') }}</span>
+        </div>
+        <div v-if="currentAccount" class="container--claimed">
+          <span class="text--lg"> {{ textClaimedRewards }} </span>
+
+          <div v-if="isLoadingClaimed">
+            <q-skeleton class="skeleton--rewards" />
+          </div>
+          <div v-else class="column--rewards-meter">
+            <vue-odometer class="text--title" format=",ddd" animation="smooth" :value="claimed" />
+            <span class="text--title text--symbol">{{ symbol }}</span>
+          </div>
+        </div>
       </div>
       <div class="user-rewards-panel">
         <ClaimAll />
@@ -14,26 +27,97 @@
   </div>
 </template>
 
-<script>
-import CompoundReward from 'src/components/dapp-staking/statistics/CompoundReward.vue';
+<script lang="ts">
 import ClaimAll from 'src/components/dapp-staking/ClaimAll.vue';
+import CompoundReward from 'src/components/dapp-staking/statistics/CompoundReward.vue';
 import Withdraw from 'src/components/dapp-staking/statistics/Withdraw.vue';
+import { useAccount, useBreakpoints } from 'src/hooks';
 import { useCompoundRewards } from 'src/hooks/dapps-staking/useCompoundRewards';
-
-export default {
+import { getClaimedAmount } from 'src/modules/token-api';
+import { useStore } from 'src/store';
+import { computed, defineComponent, ref, watchEffect } from 'vue';
+import { useI18n } from 'vue-i18n';
+import VueOdometer from 'v-odometer/src';
+import { wait } from 'src/hooks/helper/common';
+export default defineComponent({
   components: {
     CompoundReward,
     ClaimAll,
     Withdraw,
+    'vue-odometer': VueOdometer,
   },
   setup() {
+    const store = useStore();
+    const { t } = useI18n();
     const { isStaker } = useCompoundRewards();
+    const { width, screenSize } = useBreakpoints();
+    const { currentAccount } = useAccount();
+    const pastClaimed = ref<number>(0);
+    const isLoadingClaimed = ref<boolean>(false);
+    const isH160 = computed(() => store.getters['general/isH160Formatted']);
+
+    const claimed = computed(() => {
+      // Memo: update the number of claimed rewards after users invoking claim action
+      const claimedAmount = store.getters['dapps/getClaimedRewards'];
+      return claimedAmount + pastClaimed.value;
+    });
+
+    const symbol = computed(() => {
+      const chainInfo = store.getters['general/chainInfo'];
+      return chainInfo ? chainInfo.tokenSymbol : '';
+    });
+
+    const currentNetworkName = computed(() => {
+      const chainInfo = store.getters['general/chainInfo'];
+      const chain = chainInfo ? chainInfo.chain : '';
+      return chain === 'Shibuya Testnet' ? 'Shibuya' : chain;
+    });
+
+    const textClaimedRewards = computed(() => {
+      const text =
+        width.value > screenSize.sm
+          ? 'dappStaking.claimedRewards.long'
+          : 'dappStaking.claimedRewards.short';
+      return t(text);
+    });
+
+    const setClaimedAmount = async () => {
+      const isLocalNode = currentNetworkName.value === 'Development';
+      const isFetch =
+        currentNetworkName.value && currentAccount.value && !isH160.value && !isLocalNode;
+      try {
+        if (isFetch) {
+          const result = await getClaimedAmount({
+            network: currentNetworkName.value.toLowerCase(),
+            account: currentAccount.value,
+          });
+          const animationDelay = 2000;
+          await wait(animationDelay);
+          pastClaimed.value = result;
+          isLoadingClaimed.value = false;
+        }
+      } catch (error) {
+        console.error(error);
+        isLoadingClaimed.value = false;
+      }
+    };
+
+    watchEffect(async () => {
+      await setClaimedAmount();
+    });
 
     return {
       isStaker,
+      width,
+      screenSize,
+      textClaimedRewards,
+      currentAccount,
+      claimed,
+      symbol,
+      isLoadingClaimed,
     };
   },
-};
+});
 </script>
 
 <style lang="scss" scoped>