From aeefe348b217d3efdb4d33a9c6743dafc5fea233 Mon Sep 17 00:00:00 2001
From: Bobo <bobo.kovacevic@gmail.com>
Date: Tue, 27 Aug 2024 11:59:11 +0200
Subject: [PATCH] Display a dApp tier rank (#1363)

* Display a dApp tier rank

* PR comments fixes
---
 src/components/common/Balance.vue             |   8 +-
 src/components/common/FormatBalance.vue       |  13 +-
 src/hooks/helper/plasmUtils.ts                |   8 +-
 src/i18n/en-US/index.ts                       |   3 +-
 src/staking-v3/components/FeatureDapp.vue     | 128 ------------------
 src/staking-v3/components/KpiCard.vue         |   4 +-
 .../components/dapp/DappStatistics.vue        |  28 +++-
 .../dapp/styles/dapp-statistics.scss          |  12 ++
 src/staking-v3/hooks/useDappStaking.ts        |   6 +
 9 files changed, 61 insertions(+), 149 deletions(-)
 delete mode 100644 src/staking-v3/components/FeatureDapp.vue

diff --git a/src/components/common/Balance.vue b/src/components/common/Balance.vue
index 732e354ef..34f2b0c75 100644
--- a/src/components/common/Balance.vue
+++ b/src/components/common/Balance.vue
@@ -4,7 +4,6 @@
 <script lang="ts">
 import { defineComponent, watch, ref } from 'vue';
 import { BN } from '@polkadot/util';
-import { formatBalance } from '@polkadot/util';
 import { balanceFormatter } from 'src/hooks/helper/plasmUtils';
 export default defineComponent({
   props: {
@@ -22,12 +21,7 @@ export default defineComponent({
       () => props.balance,
       (balance) => {
         if (balance) {
-          const formatted = formatBalance(props.balance, {
-            withSiFull: true,
-            decimals: props.decimals,
-          });
-
-          formattedBalance.value = balanceFormatter(props.balance);
+          formattedBalance.value = balanceFormatter(props.balance, props.decimals, !!props.unit);
         }
       },
       { immediate: true }
diff --git a/src/components/common/FormatBalance.vue b/src/components/common/FormatBalance.vue
index c7fa130b9..52dc3aab1 100644
--- a/src/components/common/FormatBalance.vue
+++ b/src/components/common/FormatBalance.vue
@@ -1,8 +1,8 @@
 <template>
-  <balance :balance="balance" :decimals="decimal" :unit="defaultUnitToken" />
+  <balance :balance="balance" :decimals="decimal" :unit="tokenUnit" />
 </template>
 <script lang="ts">
-import { defineComponent, toRefs } from 'vue';
+import { defineComponent, computed } from 'vue';
 import { useChainMetadata } from 'src/hooks';
 import { BN } from '@polkadot/util';
 
@@ -15,14 +15,19 @@ export default defineComponent({
       type: [BN, String],
       required: true,
     },
+    showTokenUnit: {
+      type: Boolean,
+      required: false,
+      default: true,
+    },
   },
   setup(props) {
     const { defaultUnitToken, decimal } = useChainMetadata();
+    const tokenUnit = computed<string>(() => (props.showTokenUnit ? defaultUnitToken.value : ''));
 
     return {
-      defaultUnitToken,
       decimal,
-      ...toRefs(props),
+      tokenUnit,
     };
   },
   methods: {},
diff --git a/src/hooks/helper/plasmUtils.ts b/src/hooks/helper/plasmUtils.ts
index 538562fd1..eeb8c0dad 100644
--- a/src/hooks/helper/plasmUtils.ts
+++ b/src/hooks/helper/plasmUtils.ts
@@ -13,10 +13,14 @@ import { LOCAL_STORAGE } from 'src/config/localStorage';
  * @param decimal eg: 18
  * @returns '0.244 SDN'
  */
-export const balanceFormatter = (bal: BN | string, decimal = ASTAR_DECIMALS): string => {
+export const balanceFormatter = (
+  bal: BN | string,
+  decimal = ASTAR_DECIMALS,
+  includeCurrency = true
+): string => {
   let amount;
   amount = defaultAmountWithDecimals(bal.toString(), decimal);
 
   const defaultCurrency = localStorage.getItem(LOCAL_STORAGE.DEFAULT_CURRENCY);
-  return `${nFormatter(Number(amount))} ${defaultCurrency}`;
+  return `${nFormatter(Number(amount))} ${includeCurrency ? defaultCurrency : ''}`;
 };
diff --git a/src/i18n/en-US/index.ts b/src/i18n/en-US/index.ts
index 50789d60b..8f6679403 100644
--- a/src/i18n/en-US/index.ts
+++ b/src/i18n/en-US/index.ts
@@ -856,7 +856,7 @@ export default {
     unlockingAmount: 'Unlocking amount',
     withdraw: 'Withdraw',
     relock: 'Re-lock',
-    currentTier: 'Current Tier',
+    currentTier: 'Current Tier / Rank',
     numberOfStakers: 'Number of stakers',
     totalEarned: 'Total Earned',
     yourDashboard: 'Your Dashboard',
@@ -920,6 +920,7 @@ export default {
       'Real time amount of tokens that are entitled to receive bonus rewards.',
     bonusPool: 'Bonus pool',
     bonusPoolDescription: 'Fixed bonus allocation from block rewards. Check our ',
+    dappTierDescription: 'dApp tier and rank. Check our ',
     dAppsSlots: 'dApps slots',
     dAppsSlotsDescription:
       'Number of project rewards for the slots filled by projects in the current era.',
diff --git a/src/staking-v3/components/FeatureDapp.vue b/src/staking-v3/components/FeatureDapp.vue
deleted file mode 100644
index b941faa07..000000000
--- a/src/staking-v3/components/FeatureDapp.vue
+++ /dev/null
@@ -1,128 +0,0 @@
-<template>
-  <div :class="`wrapper--promo ${isVotingPeriod && 'voting-period'}`">
-    <div class="wrapper--promo__inner">
-      <div class="row--title">
-        <span class="text--promo-title">{{
-          isVotingPeriod ? $t('stakingV3.votingNow') : $t('stakingV3.buildAndEarn')
-        }}</span>
-      </div>
-      <div v-if="isVotingPeriod" class="row--countdown">
-        <span>{{ timeLeftFormatted }}</span>
-      </div>
-      <div class="text--promo-description">
-        <span>{{
-          isVotingPeriod ? $t('stakingV3.voteToday') : $t('stakingV3.innovativeWayOfStaking')
-        }}</span>
-      </div>
-
-      <!-- MEMO: temporary show the general hero -->
-      <div v-if="false" class="row--button">
-        <astar-button
-          v-if="!isVotingPeriod"
-          class="button--link outlined--button"
-          @click="navigateToVote(promotedDapp?.address)"
-        >
-          {{ $t('stakingV3.stakeOn', { name: promotedDapp?.name }) }}
-          <astar-icon-arrow-up-right />
-        </astar-button>
-      </div>
-
-      <div class="row--data">
-        <button
-          v-if="isVotingPeriod"
-          :disabled="isZkEvm"
-          class="button--vote-stake"
-          @click="navigateToVote()"
-        >
-          <span>{{ $t('stakingV3.voteStakeToday') }}</span>
-          <vote-stake-button-bg />
-        </button>
-        <kpi-card :title="periodName" :description="$t('stakingV3.periodDescription')">
-          <span class="text--value">{{ periodCurrentDay }}</span>
-          <span class="text--value-small">/ {{ periodDuration }}</span>
-        </kpi-card>
-        <kpi-card
-          :title="$t('stakingV3.basicRewards')"
-          :description="$t('stakingV3.basicRewardsDescription')"
-        >
-          <span class="text--value">{{ stakerApr ? $n(truncate(stakerApr, 2)) : '-' }}</span>
-          <span class="text--value-small">%</span>
-        </kpi-card>
-        <kpi-card
-          :title="$t('stakingV3.bonusRewards')"
-          :description="$t('stakingV3.bonusRewardsDescription')"
-        >
-          <span class="text--value">{{ bonusApr ? $n(truncate(bonusApr, 2)) : '-' }}</span>
-          <span class="text--value-small">%</span>
-        </kpi-card>
-        <div v-if="!isVotingPeriod" class="row--start-staking">
-          <button :disabled="isZkEvm" class="button--vote-stake" @click="navigateToVote()">
-            <span>{{ $t('stakingV3.startStakingNow') }}</span>
-            <vote-stake-button-bg />
-          </button>
-        </div>
-      </div>
-    </div>
-    <div v-if="isVotingPeriod" class="bg--voting-period">
-      <img :src="require('/src/staking-v3/assets/vote_hero_bg.webp')" alt="" />
-    </div>
-  </div>
-</template>
-
-<script lang="ts">
-import { truncate } from '@astar-network/astar-sdk-core';
-import { Campaign } from 'src/v2/models';
-import { computed, defineComponent } from 'vue';
-import {
-  useAprV3,
-  useCampaign,
-  useDappStaking,
-  useDappStakingNavigation,
-  useDapps,
-  usePeriod,
-  useVotingCountdown,
-} from '../hooks';
-import KpiCard from './KpiCard.vue';
-import VoteStakeButtonBg from './VoteStakeButtonBg.vue';
-import { useNetworkInfo } from 'src/hooks';
-
-export default defineComponent({
-  components: {
-    KpiCard,
-    VoteStakeButtonBg,
-  },
-  setup() {
-    const { constants, isVotingPeriod } = useDappStaking();
-    const { stakerApr, bonusApr } = useAprV3({ isWatch: true });
-    const { registeredDapps } = useDapps();
-    const { newListings } = useCampaign();
-    const { navigateToVote } = useDappStakingNavigation();
-    const { periodCurrentDay, periodDuration, periodName } = usePeriod();
-    const { timeLeftFormatted } = useVotingCountdown();
-    const { isZkEvm } = useNetworkInfo();
-
-    const promotedDapp = computed<Campaign | undefined>(() =>
-      newListings.value.length ? newListings.value[0] : undefined
-    );
-
-    return {
-      constants,
-      registeredDapps,
-      promotedDapp,
-      isVotingPeriod,
-      periodCurrentDay,
-      periodDuration,
-      periodName,
-      stakerApr,
-      bonusApr,
-      timeLeftFormatted,
-      isZkEvm,
-      navigateToVote,
-      truncate,
-    };
-  },
-});
-</script>
-<style lang="scss" scoped>
-@use './styles/feature-dapp.scss';
-</style>
diff --git a/src/staking-v3/components/KpiCard.vue b/src/staking-v3/components/KpiCard.vue
index dd2884a5d..c3cc97a47 100644
--- a/src/staking-v3/components/KpiCard.vue
+++ b/src/staking-v3/components/KpiCard.vue
@@ -1,5 +1,5 @@
 <template>
-  <div :class="`wrapper--kpi-card ${description !== '' ? 'flip' : ''}`">
+  <div :class="`wrapper--kpi-card ${description !== '' || $slots.description ? 'flip' : ''}`">
     <div class="card--inner">
       <div class="card--front">
         <div class="card__top">
@@ -10,7 +10,7 @@
         </div>
       </div>
       <div class="card--back">
-        <div>{{ description }}</div>
+        <slot name="description">{{ description }}</slot>
       </div>
     </div>
   </div>
diff --git a/src/staking-v3/components/dapp/DappStatistics.vue b/src/staking-v3/components/dapp/DappStatistics.vue
index d39b2eebe..cd9ec5b16 100644
--- a/src/staking-v3/components/dapp/DappStatistics.vue
+++ b/src/staking-v3/components/dapp/DappStatistics.vue
@@ -11,10 +11,27 @@
       </button>
 
       <kpi-card v-if="!small" :title="$t('dappStaking.dappPage.totalStaked')">
-        <format-balance :balance="dapp.chain.totalStake?.toString() || '0'" />
+        <format-balance
+          :balance="dapp.chain.totalStake?.toString() || '0'"
+          :show-token-unit="false"
+        />
+        <span class="unit">{{ defaultUnitToken }}</span>
       </kpi-card>
       <kpi-card v-if="!small" :title="$t('stakingV3.currentTier')">
-        <span>{{ getDappTier(dapp.chain.id) ?? '--' }}</span>
+        <span>{{ getDappTier(dapp.chain.id) ?? '--' }}</span> /
+        <span>{{ getDappRank(dapp.chain.id) ?? '--' }}</span>
+        <template #description>
+          <span>
+            {{ $t('stakingV3.dappTierDescription') }}
+            <a
+              href="https://docs.astar.network/docs/learn/dapp-staking/dapp-staking-protocol#tier-system"
+              target="_blank"
+              class="text--link"
+              rel="noopener noreferrer"
+              >{{ $t('common.docs') }}</a
+            >
+          </span>
+        </template>
       </kpi-card>
       <kpi-card v-if="!small" :title="$t('stakingV3.numberOfStakers')">
         <span>{{ dapp.dappDetails?.stakersCount ?? '--' }}</span>
@@ -29,7 +46,7 @@ import { defineComponent, PropType } from 'vue';
 import KpiCard from '../KpiCard.vue';
 import VoteStakeButtonBg from '../VoteStakeButtonBg.vue';
 import FormatBalance from 'components/common/FormatBalance.vue';
-import { useNetworkInfo } from 'src/hooks';
+import { useChainMetadata, useNetworkInfo } from 'src/hooks';
 
 export default defineComponent({
   components: {
@@ -49,11 +66,12 @@ export default defineComponent({
     },
   },
   setup(props) {
-    const { getDappTier } = useDappStaking();
+    const { getDappTier, getDappRank } = useDappStaking();
     const { isZkEvm } = useNetworkInfo();
     const { navigateToVote } = useDappStakingNavigation();
+    const { defaultUnitToken } = useChainMetadata();
 
-    return { getDappTier, navigateToVote, isZkEvm };
+    return { getDappTier, getDappRank, navigateToVote, defaultUnitToken, isZkEvm };
   },
 });
 </script>
diff --git a/src/staking-v3/components/dapp/styles/dapp-statistics.scss b/src/staking-v3/components/dapp/styles/dapp-statistics.scss
index c29fdf71a..81f704f0b 100644
--- a/src/staking-v3/components/dapp/styles/dapp-statistics.scss
+++ b/src/staking-v3/components/dapp/styles/dapp-statistics.scss
@@ -65,3 +65,15 @@
     }
   }
 }
+
+.unit {
+  font-size: 16px;
+}
+
+.text--link {
+  color: $astar-blue-dark;
+  text-transform: lowercase;
+  &:hover {
+    color: lighten($astar-blue-dark, 15%);
+  }
+}
diff --git a/src/staking-v3/hooks/useDappStaking.ts b/src/staking-v3/hooks/useDappStaking.ts
index 8744f5deb..e4ddfd027 100644
--- a/src/staking-v3/hooks/useDappStaking.ts
+++ b/src/staking-v3/hooks/useDappStaking.ts
@@ -579,6 +579,11 @@ export function useDappStaking() {
     return tier !== undefined ? tier.tierId + 1 : undefined;
   };
 
+  const getDappRank = (dappId: number): number | undefined => {
+    const tier = leaderboard.value?.get(dappId);
+    return tier?.rank;
+  };
+
   const fetchStakerInfoToStore = async (): Promise<void> => {
     if (!currentAccount.value) {
       return;
@@ -676,6 +681,7 @@ export function useDappStaking() {
     getCurrentEraInfo,
     getDappTiers,
     getDappTier,
+    getDappRank,
     fetchStakerInfoToStore,
     fetchTiersConfigurationToStore,
     withdraw,