dApp staking v3 period 2 updates (#1302)

* New staking component (#1291) * Basic selectable components * Categories and dApps lists * Basic navigation flow * Enter amount and dapp search * Started with useVote and OverviewPanel * Review panel * Chose amount updates * Working sample * Go back button * Optimize for mobile * Preselect a dApp to vote * Cleanup * Transfer stake * Minor styling and logic updated * PR comments resolved * Sub period info components (#1301) * Period info component * Period info component * Show only on voting period * Build and earn period component * Remove data toggle button * Null ref fix * Period stats component (#1306) * Components definition * Merge * Period statistics component and data fetching * Default API improvements, TVL ratio calculation * Put toggle button back * Update dapp staking v3 period2 styling (#1309) * add background image to the dApp staking top page * adjust info width and mergin * update leaderboard styles * update dapps list style * update data style * update dark style * fix width and margin * staking flow styling for desktop * fix dapp card whitespace * update voting wizard mobile style * update voting page styles * update stats styles * add go back button * replace values to placeholder * add voting note to voting wizard component * voting period info styles * update text color for the dark theme * Add missing values * Display previous period number --------- Co-authored-by: Bobo <[email protected]> * APR calculations at given block + voting period ad (#1310) * APR calculations for the given block * Apr hook refactoring * Tokens to be burned calculation for any block * Voting period ad * adjust banner styling * Added missing values * Fix calculation if current period is 1 (no previous period) --------- Co-authored-by: Ayumi Takahashi <[email protected]> * Navigate to assets after voting * Display tier threshold * Strings update * Fix for assets page error (BitInt) * Show message to console * Check received message type * Revert usePrice * Bonus reward calculation fix * Clear category on go back * Tier styling fix * Staking period styling fixes * fix leaderboard tier layout * add step background color for mobile * Claim rewards messages update * Fix/dapp staking animation (#1314) * add three.js dependency * refacor to not use iframe * update iframe styles * fix renderer small issue * update renderer size to reduce period of only depp blue * Vote banner update --------- Co-authored-by: Ayumi Takahashi <[email protected]> Co-authored-by: Taegeon Alan Go <[email protected]>
AstarNetwork · Jun 13, 2024 · 06454e2 · 06454e2
1 parent e010848
commit 06454e2
Show file tree

Hide file tree

Showing 101 changed files with 4,640 additions and 947 deletions.
diff --git a/package.json b/package.json
@@ -82,6 +82,7 @@
     "store": "^2.0.12",
     "stream": "^0.0.2",
     "swiper": "^11.0.3",
+    "three": "^0.165.0",
     "v-odometer": "^2.0.1",
     "validator": "^13.7.0",
     "vue-i18n": "^9.2.2",
@@ -117,6 +118,7 @@
     "@types/node": "^16.11.9",
     "@types/query-string": "^6.3.0",
     "@types/store": "^2.0.2",
+    "@types/three": "^0.165.0",
     "@types/validator": "^13.7.11",
     "@typescript-eslint/eslint-plugin": "^4.16.1",
     "@typescript-eslint/parser": "^4.16.1",

diff --git a/src/App.vue b/src/App.vue
@@ -118,16 +118,18 @@ export default defineComponent({
     // Handle busy and extrinsic call status messages.
     const eventAggregator = container.get<IEventAggregator>(Symbols.EventAggregator);
     eventAggregator.subscribe(ExtrinsicStatusMessage.name, (m) => {
-      const message = m as ExtrinsicStatusMessage;
-      store.dispatch(
-        'general/showAlertMsg',
-        {
-          msg: message.getMessage(),
-          alertType: message.isSuccess() ? 'success' : 'error',
-          explorerUrl: message.getExplorerUrl() || '',
-        },
-        { root: true }
-      );
+      if (m instanceof ExtrinsicStatusMessage) {
+        const message = m as ExtrinsicStatusMessage;
+        store.dispatch(
+          'general/showAlertMsg',
+          {
+            msg: message.getMessage(),
+            alertType: message.isSuccess() ? 'success' : 'error',
+            explorerUrl: message.getExplorerUrl() || '',
+          },
+          { root: true }
+        );
+      }
     });
 
     eventAggregator.subscribe(BusyMessage.name, (m) => {

diff --git a/src/assets/dapp_staking_period002_bg.webp b/src/assets/dapp_staking_period002_bg.webp
diff --git a/src/components/assets/Assets.vue b/src/components/assets/Assets.vue
@@ -68,13 +68,15 @@
       </div>
 
       <div class="column--links">
+        <voting-period-side-add />
         <side-ads />
         <astar-domains />
       </div>
     </div>
   </div>
 </template>
 <script lang="ts">
+import { computed, defineComponent, onUnmounted, ref, watch, watchEffect } from 'vue';
 import { isValidEvmAddress } from '@astar-network/astar-sdk-core';
 import Account from 'src/components/assets/Account.vue';
 import AnchorLinks from 'src/components/assets/AnchorLinks.vue';
@@ -97,7 +99,7 @@ import Staking from 'src/staking-v3/components/my-staking/Staking.vue';
 import { useStore } from 'src/store';
 import { EvmAssets, XcmAssets, XvmAssets } from 'src/store/assets/state';
 import { Asset } from 'src/v2/models';
-import { computed, defineComponent, onUnmounted, ref, watch, watchEffect } from 'vue';
+import VotingPeriodSideAdd from 'src/staking-v3/components/VotingPeriodSideAdd.vue';
 
 export default defineComponent({
   components: {
@@ -113,6 +115,7 @@ export default defineComponent({
     ZkAstr,
     AnchorLinks,
     RegisterBanner,
+    VotingPeriodSideAdd,
   },
   setup() {
     const token = ref<Asset | null>(null);

diff --git a/src/components/common/styles/back-to-page.scss b/src/components/common/styles/back-to-page.scss
@@ -13,7 +13,7 @@
   }
   @media (min-width: $lg) {
     padding-top: 0;
-    margin-top: -10px;
+    margin-top: -12px;
   }
   &:hover {
     transition: all 0.3s ease 0s;

diff --git a/src/consts.ts b/src/consts.ts
@@ -0,0 +1,5 @@
+export const PERIOD1_START_BLOCKS = new Map<string, number>([
+  ['astar', 5514935],
+  ['shiden', 5876079],
+  ['shibuya', 5335616],
+]);
diff --git a/src/hooks/useInflation.ts b/src/hooks/useInflation.ts
@@ -1,14 +1,14 @@
 import { computed, watch, ref, Ref, ComputedRef } from 'vue';
+import { useI18n } from 'vue-i18n';
 import { useStore } from 'src/store';
 import { container } from 'src/v2/common';
-import { IInflationRepository, ISubscanRepository } from 'src/v2/repositories';
+import { IBalancesRepository, IInflationRepository } from 'src/v2/repositories';
 import { Symbols } from 'src/v2/symbols';
 import { InflationConfiguration } from 'src/v2/models';
-import { $api } from 'src/boot/api';
 import { InflationParam, useDappStaking } from 'src/staking-v3';
 import { ethers } from 'ethers';
 import { useNetworkInfo } from './useNetworkInfo';
-import { useI18n } from 'vue-i18n';
+import { PERIOD1_START_BLOCKS } from 'src/consts';
 
 type UseInflation = {
   activeInflationConfiguration: ComputedRef<InflationConfiguration>;
@@ -22,12 +22,6 @@ type UseInflation = {
   getInflationParameters: () => Promise<InflationParam>;
 };
 
-const period1StartBlocks = new Map<string, number>([
-  ['astar', 5514935],
-  ['shiden', 5876079],
-  ['shibuya', 5335616],
-]);
-
 export function useInflation(): UseInflation {
   const store = useStore();
   const { t } = useI18n();
@@ -71,77 +65,75 @@ export function useInflation(): UseInflation {
   const estimateRealizedInflation = async (): Promise<number | undefined> => {
     let inflation: number | undefined;
 
-    if ($api) {
-      try {
-        const period1StartBlock = period1StartBlocks.get(networkNameSubstrate.value.toLowerCase());
-
-        if (!period1StartBlock) {
-          console.warn(
-            t('dashboard.inflation.wrongNetwork', { network: networkNameSubstrate.value })
-          );
-          return;
-        }
-
-        const initialIssuanceBlockHash = await $api.rpc.chain.getBlockHash(period1StartBlock - 1);
-        const apiAt = await $api.at(initialIssuanceBlockHash);
-        const initialTotalIssuance = await apiAt.query.balances.totalIssuance();
-        const realizedTotalIssuance = await $api.query.balances.totalIssuance();
-        const {
-          periodsPerCycle,
-          standardEraLength,
-          standardErasPerBuildAndEarnPeriod,
-          standardErasPerVotingPeriod,
-        } = eraLengths.value;
-        const cycleLengthInBlocks =
-          standardEraLength *
-          periodsPerCycle *
-          (standardErasPerBuildAndEarnPeriod + standardErasPerVotingPeriod);
-        const blockDifference = BigInt(currentBlock.value - period1StartBlock);
-        const slope =
-          BigInt(realizedTotalIssuance.sub(initialTotalIssuance).toString()) / blockDifference;
-
-        // Estimate total issuance at the end of the current cycle.
-        const endOfCycleBlock = period1StartBlock + cycleLengthInBlocks;
-        const endOfCycleTotalIssuance = Number(
-          ethers.utils.formatEther(
-            slope * BigInt(endOfCycleBlock - period1StartBlock) + initialTotalIssuance.toBigInt()
-          )
-        );
+    try {
+      const period1StartBlock = PERIOD1_START_BLOCKS.get(networkNameSubstrate.value.toLowerCase());
 
-        // Estimated inflation at the end of the current cycle.
-        inflation =
-          (100 *
-            (endOfCycleTotalIssuance -
-              Number(ethers.utils.formatEther(initialTotalIssuance.toString())))) /
-          endOfCycleTotalIssuance;
-
-        // Calculate maximum and realized inflation for each era in the cycle.
-        calculateMaximumInflationData(
-          period1StartBlock,
-          endOfCycleBlock,
-          initialTotalIssuance.toBigInt(),
-          cycleLengthInBlocks,
-          inflationParameters.value.maxInflationRate,
-          eraLengths.value.standardEraLength
+      if (!period1StartBlock) {
+        console.warn(
+          t('dashboard.inflation.wrongNetwork', { network: networkNameSubstrate.value })
         );
+        return;
+      }
 
-        calculateRealizedInflationData(
-          period1StartBlock,
-          currentBlock.value,
-          slope,
-          eraLengths.value.standardEraLength,
-          initialTotalIssuance.toBigInt()
-        );
+      const balancesRepository = container.get<IBalancesRepository>(Symbols.BalancesRepository);
+      const initialTotalIssuance = await balancesRepository.getTotalIssuance(period1StartBlock - 1);
+      const realizedTotalIssuance = await balancesRepository.getTotalIssuance();
+
+      const {
+        periodsPerCycle,
+        standardEraLength,
+        standardErasPerBuildAndEarnPeriod,
+        standardErasPerVotingPeriod,
+      } = eraLengths.value;
+      const cycleLengthInBlocks =
+        standardEraLength *
+        periodsPerCycle *
+        (standardErasPerBuildAndEarnPeriod + standardErasPerVotingPeriod);
+      const blockDifference = BigInt(currentBlock.value - period1StartBlock);
+      const slope =
+        BigInt((realizedTotalIssuance - initialTotalIssuance).toString()) / blockDifference;
+
+      // Estimate total issuance at the end of the current cycle.
+      const endOfCycleBlock = period1StartBlock + cycleLengthInBlocks;
+      const endOfCycleTotalIssuance = Number(
+        ethers.utils.formatEther(
+          slope * BigInt(endOfCycleBlock - period1StartBlock) + initialTotalIssuance
+        )
+      );
 
-        calculateAdjustableStakerRewards(
-          realizedTotalIssuance.toBigInt(),
-          currentEraInfo.value?.currentStakeAmount.totalStake ?? BigInt(0),
-          inflationParameters.value.adjustableStakersPart,
-          inflationParameters.value.idealStakingRate
-        );
-      } catch (error) {
-        console.error('Error calculating realized inflation', error);
-      }
+      // Estimated inflation at the end of the current cycle.
+      inflation =
+        (100 *
+          (endOfCycleTotalIssuance -
+            Number(ethers.utils.formatEther(initialTotalIssuance.toString())))) /
+        endOfCycleTotalIssuance;
+
+      // Calculate maximum and realized inflation for each era in the cycle.
+      calculateMaximumInflationData(
+        period1StartBlock,
+        endOfCycleBlock,
+        initialTotalIssuance,
+        cycleLengthInBlocks,
+        inflationParameters.value.maxInflationRate,
+        eraLengths.value.standardEraLength
+      );
+
+      calculateRealizedInflationData(
+        period1StartBlock,
+        currentBlock.value,
+        slope,
+        eraLengths.value.standardEraLength,
+        initialTotalIssuance
+      );
+
+      calculateAdjustableStakerRewards(
+        realizedTotalIssuance,
+        currentEraInfo.value?.currentStakeAmount.totalStake ?? BigInt(0),
+        inflationParameters.value.adjustableStakersPart,
+        inflationParameters.value.idealStakingRate
+      );
+    } catch (error) {
+      console.error('Error calculating realized inflation', error);
     }
 
     return inflation;

diff --git a/src/hooks/useNetworkInfo.ts b/src/hooks/useNetworkInfo.ts
@@ -7,6 +7,7 @@ import {
 } from 'src/config/chain';
 import { endpointKey, getProviderIndex, providerEndpoints } from 'src/config/chainEndpoints';
 import { polkadotJsUrl } from 'src/links';
+import { getTokenImage } from 'src/modules/token';
 import { useStore } from 'src/store';
 import { computed } from 'vue';
 
@@ -94,6 +95,10 @@ export function useNetworkInfo() {
     return chainInfo ? chainInfo.tokenSymbol : '';
   });
 
+  const nativeTokenImg = computed<string>(() =>
+    getTokenImage({ isNativeToken: true, symbol: nativeTokenSymbol.value })
+  );
+
   const isSupportAuTransfer = computed<boolean>(() => {
     return !isMainnet.value && !isZkEvm.value;
   });
@@ -123,5 +128,6 @@ export function useNetworkInfo() {
     isAstar,
     dappStakingCurrency,
     isH160,
+    nativeTokenImg,
   };
 }