hotfix: merge the hotfix to main branch (#1332)

* Add dApp staking categories description (#1316)

* Fix dApp swiper configuration (#1317)

* Fix dApp swiper configuration

* Rewards earned sort fix

* TVL ratio for previous period calculation fix

* Hide period stats

* Cast to bigint

* Hide period stats

* Fix for filtering dApps in other category (#1322)

* Category filter fix, take 2 (#1323)

* add airlyft to promotions (#1319)

* Show estimated staker + bonus rewards on vote info banner (#1329)

* Show estimated staker + bonus rewards on vote info banner

* Text update

* dApp Staking ranked tier update (#1324)

* Fetch rank rewards

* Add Hydration to XCM (#1315)

* Add rank reward calculation

* Map rankTier

* Type bug fix

* voting banner wording fix

---------

Co-authored-by: green-jay <75261756+green-jay@users.noreply.github.com>

* Tier display fix (#1331)

* hotfix: added maintenance mode condition to disable the bridge feature (#1330)

* Add Hydration to XCM (#1315)

* hotfix: disabled zKyoto bridge

---------

Co-authored-by: green-jay <75261756+green-jay@users.noreply.github.com>

---------

Co-authored-by: Bobo <bobo.kovacevic@gmail.com>
Co-authored-by: Rachit Magon <rachit.magon@gmail.com>
Co-authored-by: green-jay <75261756+green-jay@users.noreply.github.com>

src/components/bridge/BridgeSelection.vue

@@ -6,9 +6,9 @@
       </div>
       <div class="container--selection">
         <div class="column--selection">
-          <button :disabled="!isEnableEthBridge">
+          <button :disabled="!isEnableEthBridge || isBridgeMaintenanceMode">
             <component
-              :is="isEnableEthBridge ? 'router-link' : 'div'"
+              :is="isEnableEthBridge && !isBridgeMaintenanceMode ? 'router-link' : 'div'"
               :to="buildEthereumBridgePageLink()"
               class="button--bridge"
             >
@@ -39,6 +39,9 @@
           <p v-if="!isEnableEthBridge" class="text--bridge-details">
             {{ $t('bridge.ethereumBridge.text2') }}
           </p>
+          <p v-if="isBridgeMaintenanceMode" class="text--bridge-details">
+            {{ $t('bridge.bridgeMaintenanceMode') }}
+          </p>
         </div>
 
         <div class="column--selection">
@@ -201,8 +204,16 @@ export default defineComponent({
   components: {},
   setup() {
     const { currentAccount } = useAccount();
-    const { isZkEvm, networkNameSubstrate, isMainnet, isZkyoto, isAstarZkEvm, isAstar, isH160 } =
-      useNetworkInfo();
+    const {
+      isZkEvm,
+      networkNameSubstrate,
+      isMainnet,
+      isZkyoto,
+      isAstarZkEvm,
+      isAstar,
+      isH160,
+      isBridgeMaintenanceMode,
+    } = useNetworkInfo();
 
     const l1Name = computed<string>(() => {
       return isZkyoto.value ? EthBridgeNetworkName.Sepolia : EthBridgeNetworkName.Ethereum;
@@ -241,6 +252,7 @@ export default defineComponent({
       zKatanaBridgeUrl,
       isZkyoto,
       isEnableLzBridge,
+      isBridgeMaintenanceMode,
     };
   },
 });

src/data/dapp_promotions.json

@@ -1,4 +1,10 @@
 [
+  {
+    "name": "AirLyft Stake Campaign",
+    "shortDescription": "Stake on AirLyft and get a chance to share extra reward!",
+    "link": "https://airlyft.one/community/astar-stake-on-airlyft",
+    "img": "images/dapp_promotions/airlyft_stake_campaign.png"
+  },
   {
     "name": "Ledger - dApp Staking V3",
     "shortDescription": "Join dApp Staking V3 with your Ledger device using the new Astar Native app.",

src/hooks/bridge/useL1Bridge.ts

@@ -3,7 +3,7 @@ import { debounce } from 'lodash-es';
 import { endpointKey } from 'src/config/chainEndpoints';
 import { LOCAL_STORAGE } from 'src/config/localStorage';
 import { checkAllowance, getTokenBal, setupNetwork } from 'src/config/web3';
-import { useAccount } from 'src/hooks';
+import { useAccount, useNetworkInfo } from 'src/hooks';
 import { Erc20Token } from 'src/modules/token';
 import { astarNativeTokenErcAddr } from 'src/modules/xcm';
 import {
@@ -17,10 +17,12 @@ import { useStore } from 'src/store';
 import { container } from 'src/v2/common';
 import { IZkBridgeService } from 'src/v2/services';
 import { Symbols } from 'src/v2/symbols';
-import { WatchCallback, computed, onUnmounted, ref, watch } from 'vue';
+import { WatchCallback, computed, onUnmounted, ref, watch, watchEffect } from 'vue';
 import { useI18n } from 'vue-i18n';
 import { useEthProvider } from '../custom-signature/useEthProvider';
 import { EthereumProvider } from '../types/CustomSignature';
+import { Path } from 'src/router';
+import { useRouter } from 'vue-router';
 
 const eth = {
   symbol: 'ETH',
@@ -77,6 +79,8 @@ export const useL1Bridge = () => {
   const { t } = useI18n();
   const { currentAccount } = useAccount();
   const { web3Provider, ethProvider } = useEthProvider();
+  const router = useRouter();
+  const { isBridgeMaintenanceMode } = useNetworkInfo();
 
   const isLoading = computed<boolean>(() => store.getters['general/isLoading']);
   const fromChainId = computed<number>(
@@ -417,6 +421,13 @@ export const useL1Bridge = () => {
     isApproving.value ? 5 : 30 * 1000
   );
 
+  // Memo: the app goes to assets page if users access to the bridge page by inputting URL directly
+  watchEffect(() => {
+    if (isBridgeMaintenanceMode.value) {
+      router.push(Path.Assets);
+    }
+  });
+
   onUnmounted(() => {
     clearInterval(autoFetchAllowanceHandler);
   });

src/hooks/useNetworkInfo.ts

@@ -112,6 +112,10 @@ export function useNetworkInfo() {
       : shibuya;
   });
 
+  const isBridgeMaintenanceMode = computed<boolean>(() => {
+    return isZkyoto.value;
+  });
+
   return {
     isMainnet,
     currentNetworkChain,
@@ -129,5 +133,6 @@ export function useNetworkInfo() {
     dappStakingCurrency,
     isH160,
     nativeTokenImg,
+    isBridgeMaintenanceMode,
   };
 }

src/i18n/en-US/index.ts

@@ -1047,10 +1047,20 @@ export default {
     moreInfoFor: 'More info for',
     bonusRewards: 'Bonus Rewards',
     threshold: 'Threshold',
-    percentageStaked: 'Percentage of Supply Staked',
+    percentageLocked: 'Percentage of Supply Locked',
     unclaimedRewards: 'Unclaimed rewards',
     rewardsClaimedOnStake: 'Rewards will be claimed when stake',
-    ifYouStakeNow: 'If you stake now',
+    ifYouStakeNow: 'Basic APR + Bonus (If you stake now)',
+    defiDescription: 'Discover the world of decentralized finance solutions on Astar.',
+    'unstoppable-grantsDescription':
+      'Support projects in the Unstoppable Community Grants program, powered by dApp staking.',
+    nftDescription: 'Find and support creative communities with Astar’s NFT dApps.',
+    toolingDescription:
+      'Support powerful tools and frameworks designed to accelerate network growth.',
+    utilityDescription:
+      'Stake to essential projects that enhance the productivity and functionality of Web3.',
+    othersDescription: 'Explore a diverse set of blockchain dApps.',
+    basicAprPlusBonus: 'Basic APR + Bonus',
   },
   bridge: {
     selectBridge: 'Select a Bridge',
@@ -1064,6 +1074,7 @@ export default {
     approvalMaxAmount: 'Approve Max Amount (option)',
     disabledWithdrawal: 'Bridge to {network} is temporarily disabled',
     thirdPartyBridge: '3rd Party Bridge',
+    bridgeMaintenanceMode: 'Bridge is currently under maintenance mode. Please come back later.',
     ethereumBridge: {
       title: 'Native Bridge',
       tag: 'ERC20',

src/staking-v3/components/PeriodInfoVote.vue

@@ -45,7 +45,7 @@
             <div>{{ $t('stakingV3.ifYouStakeNow') }}</div>
           </div>
           <div class="percentage">
-            <span>15<small>%+</small></span>
+            <span>{{ totalApr.toFixed(1) }}<small>%</small></span>
           </div>
         </div>
       </div>
@@ -54,8 +54,8 @@
 </template>
 
 <script lang="ts">
-import { defineComponent } from 'vue';
-import { useDappStaking, useDappStakingNavigation, useVotingCountdown } from '../hooks';
+import { defineComponent, computed } from 'vue';
+import { useAprV3, useDappStaking, useDappStakingNavigation, useVotingCountdown } from '../hooks';
 import { PeriodType } from 'src/staking-v3/logic';
 import TokenBalanceNative from 'src/components/common/TokenBalanceNative.vue';
 
@@ -67,12 +67,16 @@ export default defineComponent({
     const { protocolState, totalStakerRewards, claimStakerAndBonusRewards } = useDappStaking();
     const { navigateToAssets } = useDappStakingNavigation();
     const { timeLeftFormatted } = useVotingCountdown();
+    const { stakerApr, bonusApr } = useAprV3({ isWatch: true });
+
+    const totalApr = computed<number>(() => stakerApr.value + bonusApr.value);
 
     return {
       protocolState,
       timeLeftFormatted,
       PeriodType,
       totalStakerRewards,
+      totalApr,
       navigateToAssets,
       claimStakerAndBonusRewards,
     };

src/staking-v3/components/PeriodStats.vue

@@ -1,5 +1,5 @@
 <template>
-  <div class="wrapper--period-stats">
+  <div v-if="false" class="wrapper--period-stats">
     <div class="title">
       <span>{{ period.toString().padStart(3, '0') }}</span>
       <span>{{ $t('stakingV3.stats') }}</span>
@@ -25,7 +25,7 @@
           </div>
         </div>
         <div class="period-kpi-container">
-          <div class="kpi-title">{{ $t('stakingV3.percentageStaked') }}</div>
+          <div class="kpi-title">{{ $t('stakingV3.percentageLocked') }}</div>
           <div class="value-unit">
             <span>{{ tvlRatio ? (tvlRatio * 100).toFixed(1) : '--' }}<small>%</small></span>
           </div>
@@ -88,7 +88,7 @@ export default defineComponent({
         .map((x) => ({
           name: x.name,
           iconUrl: x.iconUrl,
-          amount: BigInt(x.stakeAmount),
+          amount: x.stakeAmount,
           address: x.address,
         }))
         .sort((a, b) => sort(a.amount, b.amount))

src/staking-v3/components/vote/choose-dapps/ChooseCategory.vue

@@ -14,7 +14,9 @@
         >
           {{ category.label }}
         </div>
-        <div class="category-description"></div>
+        <div class="category-description">
+          {{ $t(`stakingV3["${category.value}Description"]`) }}
+        </div>
       </div>
       <div class="icon"><astar-icon-arrow-right /></div>
     </div>

src/staking-v3/components/vote/choose-dapps/DappsList.vue

@@ -3,7 +3,7 @@
     <swiper
       class="swiper--voting-dapps"
       :slides-per-view="2"
-      :slides-per-group="4"
+      :slides-per-group="2"
       :space-between="8"
       :navigation="true"
       :grid="{
@@ -12,7 +12,7 @@
       :breakpoints="{
         '768': {
           slidesPerView: 3,
-          slidesPerGroup: 32,
+          slidesPerGroup: 3,
           grid: {
             rows: 3,
           },
@@ -83,18 +83,20 @@ export default defineComponent({
   setup(props) {
     const { constants } = useDappStaking();
 
+    const categoryFilter = (dapp: DappVote, category?: string): boolean =>
+      dapp.mainCategory?.toLowerCase() === category?.toLowerCase() ||
+      (dapp.mainCategory === undefined && category?.toLowerCase() === 'others');
+
     const filteredDapps = computed<DappVote[]>(() => {
       if (props.category && props.filter) {
         return props.dapps.filter(
           (dapp) =>
-            dapp.mainCategory?.toLowerCase() === props.category?.toLowerCase() &&
+            categoryFilter(dapp, props.category) &&
             dapp.name.toLowerCase().includes(props.filter.toLowerCase())
         );
       }
       if (props.category) {
-        return props.dapps.filter(
-          (dapp) => dapp.mainCategory?.toLowerCase() === props.category?.toLowerCase()
-        );
+        return props.dapps.filter((dapp) => categoryFilter(dapp, props.category));
       } else if (props.filter) {
         return props.dapps.filter((dapp) =>
           dapp.name.toLowerCase().includes(props.filter.toLowerCase())

src/staking-v3/components/vote/styles/choose-category.scss

@@ -58,12 +58,21 @@
 
 .text {
   width: 100%;
+  display: flex;
+  flex-direction: column;
+  gap: 8px;
 }
 
 .category-description {
+  height: 40px;
   font-size: 12px;
   font-weight: 400;
   color: $white;
+  display: none;
+
+  @media (min-width: $lg) {
+    display: block;
+  }
 }
 
 .icon {

src/staking-v3/hooks/useDappStaking.ts

@@ -5,6 +5,7 @@ import {
   AccountLedger,
   CombinedDappInfo,
   Constants,
+  DAppTier,
   DAppTierRewards,
   DappStakeInfo,
   EraInfo,
@@ -141,7 +142,7 @@ export function useDappStaking() {
     () => store.getters['stakingV3/getTiersConfiguration'] ?? initialTiersConfiguration
   );
 
-  const leaderboard = computed<Map<number, number>>(
+  const leaderboard = computed<Map<number, DAppTier>>(
     () => store.getters['stakingV3/getLeaderboard']
   );
 
@@ -574,7 +575,7 @@ export function useDappStaking() {
 
   const getDappTier = (dappId: number): number | undefined => {
     const tier = leaderboard.value?.get(dappId);
-    return tier !== undefined ? tier + 1 : undefined;
+    return tier !== undefined ? tier.tierId + 1 : undefined;
   };
 
   const fetchStakerInfoToStore = async (): Promise<void> => {

src/staking-v3/hooks/useLeaderboard.ts

@@ -1,5 +1,5 @@
 import { watch, ref, computed } from 'vue';
-import { CombinedDappInfo, PeriodType, useDappStaking, useDapps } from '..';
+import { CombinedDappInfo, DAppTier, PeriodType, useDappStaking, useDapps } from '..';
 import { useStore } from 'src/store';
 import { sort } from 'src/v2/common';
 
@@ -9,7 +9,7 @@ export function useLeaderboard() {
   const { dAppTiers, protocolState, eraLengths } = useDappStaking();
   // Map key is a dApp tier.
   const leaderBoards = ref<Map<number, CombinedDappInfo[]>>(new Map());
-  const leaderboard = computed<Map<number, number>>(
+  const leaderboard = computed<Map<number, DAppTier>>(
     () => store.getters['stakingV3/getLeaderboard']
   );
 
@@ -43,8 +43,8 @@ export function useLeaderboard() {
     ]);
 
     sortedDapps.value.forEach((dapp) => {
-      const tier = leaderboard.value.get(dapp.chain.id);
-      tier !== undefined && leaderBoards.value.get(tier + 1)?.push(dapp);
+      const dappTier = leaderboard.value.get(dapp.chain.id);
+      dappTier !== undefined && leaderBoards.value.get(dappTier.tierId + 1)?.push(dapp);
     });
   };
 

src/staking-v3/hooks/usePeriodStats.ts

@@ -8,6 +8,7 @@ import { DappState, IDappStakingRepository, IDappStakingService } from '../logic
 import { PERIOD1_START_BLOCKS } from 'src/consts';
 import { useDappStaking } from './useDappStaking';
 import { useDataCalculations } from './useDataCalculations';
+import { ethers } from 'ethers';
 
 export type DappStatistics = {
   name: string;
@@ -86,7 +87,9 @@ export function usePeriodStats(period: Ref<number>) {
       dappStakingRepository.getCurrentEraInfo(block),
     ]);
     periodData.value = stats;
-    tvlRatio.value = 1 / Number(totalIssuance / periodInfo.totalLocked);
+    const issuance = Number(ethers.utils.formatEther(totalIssuance));
+    const locked = Number(ethers.utils.formatEther(periodInfo.totalLocked));
+    tvlRatio.value = locked / issuance;
   };
 
   watch(

src/staking-v3/logic/interfaces/DappStakingV3.ts

@@ -110,6 +110,7 @@ export interface PalletDappStakingV3DAppTierRewards extends Struct {
   readonly dapps: BTreeMap<Compact<u16>, Compact<u8>>;
   readonly rewards: Vec<u128>;
   readonly period: Compact<u32>;
+  readonly rankRewards: Vec<u128>;
 }
 
 export interface PalletDappStakingV3EraInfo extends Struct {

src/staking-v3/logic/models/DappStaking.ts

@@ -139,11 +139,13 @@ export interface DAppTierRewards {
   readonly dapps: DAppTier[];
   readonly rewards: bigint[];
   readonly period: number;
+  readonly rankRewards: bigint[];
 }
 
 export interface DAppTier {
   readonly dappId: number;
-  readonly tierId: number | undefined;
+  readonly tierId: number;
+  readonly rank: number;
 }
 
 export interface Rewards {