Display a dApp tier rank

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 }

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: {},

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 : ''}`;
 };

src/i18n/en-US/index.ts

@@ -869,7 +869,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',
@@ -933,6 +933,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.',

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>

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>

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%);
+  }
+}

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,