Staking panels and leaderboard (#1056)

* Get contract stake

* Initial leaderboard version

* voting call refactoring

* Tier rewards updates

* Leaderboard rendering fix

* My staking components

* Staking components logic done

* Re-lock unlocking chunks

* Unbonding modal

* Bonus rewards calculation bug fix

* Minor navigation refactoring

* Display total stake

* PropType fix

* Total stake calculation fix

src/App.vue

@@ -63,15 +63,12 @@ import { container } from 'src/v2/common';
 import { Symbols } from 'src/v2/symbols';
 import { useAccount, useAppRouter } from 'src/hooks';
 import { LOCAL_STORAGE } from 'src/config/localStorage';
-import { ETHEREUM_EXTENSION } from 'src/hooks';
 import {
   AccountLedgerChangedMessage,
   IDappStakingRepository,
-  IDappStakingService,
   ProtocolStateChangedMessage,
-  StakerInfoChangedMessage,
 } from './staking-v3';
-import { useDappStaking } from './staking-v3/hooks';
+import { useDappStaking, useDapps } from './staking-v3/hooks';
 
 export default defineComponent({
   name: 'App',
@@ -88,7 +85,9 @@ export default defineComponent({
     useAppRouter();
     const store = useStore();
     const { currentAccountName, currentAccount } = useAccount();
-    const { getAllRewards, getCurrentEraInfo, getDappTiers } = useDappStaking();
+    const { getAllRewards, getCurrentEraInfo, getDappTiers, fetchStakerInfoToStore } =
+      useDappStaking();
+    const { fetchStakeAmountsToStore } = useDapps();
 
     const isLoading = computed(() => store.getters['general/isLoading']);
     const showAlert = computed(() => store.getters['general/showAlert']);
@@ -107,7 +106,7 @@ export default defineComponent({
       showDisclaimerModal.value = isOpen;
     };
 
-    // Handle busy and extrisnsic call status messages.
+    // Handle busy and extrinsic call status messages.
     const eventAggregator = container.get<IEventAggregator>(Symbols.EventAggregator);
     eventAggregator.subscribe(ExtrinsicStatusMessage.name, (m) => {
       const message = m as ExtrinsicStatusMessage;
@@ -148,6 +147,8 @@ export default defineComponent({
         getAllRewards(),
         getCurrentEraInfo(),
         getDappTiers(message.state.era - 1),
+        fetchStakeAmountsToStore(),
+        fetchStakerInfoToStore(),
       ]);
     });
 
@@ -157,11 +158,6 @@ export default defineComponent({
       console.log('ledger', message.ledger);
     });
 
-    eventAggregator.subscribe(StakerInfoChangedMessage.name, (m) => {
-      const message = m as StakerInfoChangedMessage;
-      store.commit('stakingV3/setStakerInfo', message.stakerInfo, { root: true });
-    });
-
     // **** end dApp staking v3
 
     // Handle wallet change so we can inject proper wallet
@@ -174,10 +170,8 @@ export default defineComponent({
         container
           .get<IDappStakingRepository>(Symbols.DappStakingRepositoryV3)
           .startAccountLedgerSubscription(currentAccount.value);
-
-        container
-          .get<IDappStakingRepository>(Symbols.DappStakingRepositoryV3)
-          .startGetStakerInfoSubscription(currentAccount.value);
+        fetchStakerInfoToStore();
+        getAllRewards();
 
         previousAddress = currentAccount.value;
       }

src/components/common/TokenBalanceNative.vue

@@ -0,0 +1,42 @@
+<template>
+  <token-balance
+    :balance="ethers.utils.formatEther(balance)"
+    :text="text"
+    :decimals="decimals"
+    :symbol="nativeTokenSymbol"
+  />
+</template>
+
+<script lang="ts">
+import { defineComponent } from 'vue';
+import { ethers } from 'ethers';
+import TokenBalance from './TokenBalance.vue';
+import { useNetworkInfo } from 'src/hooks';
+
+export default defineComponent({
+  components: {
+    TokenBalance,
+  },
+  props: {
+    balance: {
+      type: String,
+      required: true,
+    },
+    text: {
+      type: String,
+      required: false,
+      default: '',
+    },
+    decimals: {
+      type: Number,
+      required: false,
+      default: 3,
+    },
+  },
+  setup() {
+    const { nativeTokenSymbol } = useNetworkInfo();
+
+    return { nativeTokenSymbol, ethers };
+  },
+});
+</script>

src/i18n/en-US/index.ts

@@ -736,6 +736,24 @@ export default {
     vote: 'Vote',
     voteToday: 'Vote today and be eligible for  bonus rewards',
     stakeOn: 'Stake on {name}',
+    tier: 'Tier',
+    tierLeaderboard: 'Tier Leaderboard',
+    myStaking: 'My Staking',
+    myDapps: 'My dApps',
+    unbonding: 'Unbonding',
+    totalEstimatedRewards: 'Total estimated rewards',
+    claim: 'Claim',
+    dApp: 'dApp',
+    stakedAmount: 'Staked amount',
+    bonusReward: 'Bonus reward',
+    manage: 'Manage',
+    add: 'Add',
+    unbond: 'Unbond',
+    index: 'Index',
+    chunk: 'Chunk',
+    unbondingAmount: 'Unbonding amount',
+    withdraw: 'Withdraw',
+    relock: 'Re-lock',
   },
   bridge: {
     bridge: 'Bridge',

src/router/routes.ts

@@ -13,7 +13,7 @@ import Dashboard from 'src/pages/Dashboard.vue';
 import RegisterDapp from 'src/pages/RegisterDapp.vue';
 import StakeManage from 'src/pages/StakeManage.vue';
 import DappPage from 'src/pages/DappPage.vue';
-import { Vote } from 'src/staking-v3';
+import Vote from 'src/staking-v3/components/Vote.vue';
 import DiscoverV3 from 'src/staking-v3/components/DiscoverV3.vue';
 import { RouteRecordRaw } from 'vue-router';
 

src/staking-v3/components/Dapps.vue

@@ -1,7 +1,7 @@
 <template>
   <div class="wrapper--dapps">
     <div v-for="(dapp, index) in registeredDapps" :key="index">
-      <div v-if="dapp" class="card--dapp" @click="goDappPageLink(dapp.basic.address)">
+      <div v-if="dapp" class="card--dapp" @click="navigateDappPage(dapp.basic.address)">
         <div class="card__top">
           <div>
             <img :src="dapp.basic.iconUrl" alt="icon" class="icon--dapp" />
@@ -18,7 +18,9 @@
             <span class="text--label">2,432</span>
           </div>
           <div>
-            <span class="text--label">1.078M ASTR</span>
+            <span class="text--label">
+              <token-balance-native :balance="dapp.chain.totalStake?.toString() ?? '0'" />
+            </span>
           </div>
         </div>
       </div>
@@ -27,24 +29,20 @@
 </template>
 
 <script lang="ts">
-import { Path, networkParam } from 'src/router/routes';
 import { defineComponent } from 'vue';
-import { useDappStaking, useDapps } from '../hooks';
-import { useRouter } from 'vue-router';
+import { useDappStaking, useDappStakingNavigation, useDapps } from '../hooks';
+import TokenBalanceNative from 'src/components/common/TokenBalanceNative.vue';
 
 export default defineComponent({
+  components: {
+    TokenBalanceNative,
+  },
   setup() {
     const { registeredDapps } = useDapps();
     const { getDappTier } = useDappStaking();
-    const router = useRouter();
-
-    const goDappPageLink = (address: string): void => {
-      const base = networkParam + Path.DappStaking + Path.Dapp;
-      const url = `${base}?dapp=${address?.toLowerCase()}`;
-      router.push(url);
-    };
+    const { navigateDappPage } = useDappStakingNavigation();
 
-    return { registeredDapps, getDappTier, goDappPageLink };
+    return { registeredDapps, getDappTier, navigateDappPage };
   },
 });
 </script>

src/staking-v3/components/DiscoverV3.vue

@@ -1,26 +1,30 @@
 <template>
   <div class="wrapper--discover">
     <!-- Todo: Delete -->
-    <staking-home />
+    <!-- <staking-home /> -->
     <feature-dapp />
+    <staking />
+    <leaderboard />
     <ad />
     <dapps />
   </div>
 </template>
 
 <script lang="ts">
 import { defineComponent } from 'vue';
-import StakingHome from './StakingHome.vue';
 import FeatureDapp from './FeatureDapp.vue';
 import Ad from './Ad.vue';
 import Dapps from './Dapps.vue';
+import Leaderboard from './leaderboard/Leaderboard.vue';
+import Staking from './my-staking/Staking.vue';
 
 export default defineComponent({
   components: {
-    StakingHome,
     FeatureDapp,
     Ad,
     Dapps,
+    Leaderboard,
+    Staking,
   },
   setup() {
     return {};

src/staking-v3/components/FeatureDapp.vue

@@ -36,21 +36,19 @@
       </kpi-card>
     </div>
     <div v-if="!isVotingPeriod" class="row--start-staking">
-      <button class="button--staking">
-        <span class="text--start-staking" @click="navigateToVote()">Start Staking Now</span>
+      <button class="button--staking" @click="navigateToVote()">
+        <span class="text--start-staking">Start Staking Now</span>
       </button>
     </div>
   </div>
 </template>
 
 <script lang="ts">
 import { defineComponent, computed } from 'vue';
-import { useDappStaking, useDapps, useCampaign } from '../hooks';
+import { useDappStaking, useDapps, useCampaign, useDappStakingNavigation } from '../hooks';
 import { Campaign } from 'src/v2/models';
-import { Path, networkParam } from 'src/router/routes';
 import FormatBalance from 'src/components/common/FormatBalance.vue';
 import KpiCard from './KpiCard.vue';
-import { useRouter } from 'vue-router';
 
 export default defineComponent({
   components: {
@@ -61,7 +59,7 @@ export default defineComponent({
     const { constants, currentEraInfo, isVotingPeriod } = useDappStaking();
     const { registeredDapps } = useDapps();
     const { newListings } = useCampaign();
-    const router = useRouter();
+    const { navigateToVote } = useDappStakingNavigation();
     // const { totalSupply } = useTokenCirculation();
 
     // const tvlPercentage = computed<number>(
@@ -74,11 +72,6 @@ export default defineComponent({
       newListings.value.length ? newListings.value[0] : undefined
     );
 
-    const navigateToVote = (dAppAddress: string | undefined = undefined): void => {
-      const base = networkParam + Path.DappStaking + Path.Vote;
-      router.push(`${base}?dappAddress=${dAppAddress ?? ''}`);
-    };
-
     return {
       constants,
       registeredDapps,

src/staking-v3/components/StakingHome.vue

@@ -22,14 +22,11 @@
 <script lang="ts">
 import { defineComponent, onMounted, watch } from 'vue';
 import { useAccount } from 'src/hooks';
-import { useDappStaking, useDapps } from '../hooks';
-import { Path, networkParam } from 'src/router/routes';
-import { useRouter } from 'vue-router';
+import { useDappStaking, useDapps, useDappStakingNavigation } from '../hooks';
 
 export default defineComponent({
   components: {},
   setup() {
-    const router = useRouter();
     const { registeredDapps, fetchDappsToStore, fetchDappToStore } = useDapps();
     const {
       protocolState,
@@ -44,13 +41,9 @@ export default defineComponent({
       claimBonusRewards,
       getAllRewards,
     } = useDappStaking();
+    const { navigateToVote } = useDappStakingNavigation();
     const { currentAccount } = useAccount();
 
-    const navigateToVote = (): void => {
-      const base = networkParam + Path.DappStaking + Path.Vote;
-      router.push(base);
-    };
-
     onMounted(async () => {
       await fetchDappsToStore();
     });