Shown era duration correctly in staking (#11972)

* fix: era duration in staking

* fix: vesting schedule timer

Author: ap211unitech

packages/page-staking-async/src/Validators/SummarySession.tsx

@@ -53,10 +53,12 @@ function SummarySession ({ className, withEra = true, withSession = true }: Prop
 
   const eraDuration = useMemo(
     () => {
-      // default to 1800 blocks i.e. 6 hours
-      return new BN(6 * 60 * 60 * 1000).div(blockTime);
+      const epochDuration = rcApi?.consts.babe?.epochDuration;
+      const sessionsPerEra = api?.consts.staking?.sessionsPerEra;
+
+      return epochDuration?.mul(sessionsPerEra);
     },
-    [blockTime]
+    [api?.consts.staking?.sessionsPerEra, rcApi?.consts.babe?.epochDuration]
   );
 
   return (
@@ -91,6 +93,7 @@ function SummarySession ({ className, withEra = true, withSession = true }: Prop
               )
           )}
           <CardSummary
+            apiOverride={rcApi}
             className={className}
             label={eraLabel}
             progress={{

packages/react-components/src/AddressInfo.tsx

@@ -1,6 +1,7 @@
 // Copyright 2017-2025 @polkadot/react-components authors & contributors
 // SPDX-License-Identifier: Apache-2.0
 
+import type { ApiPromise } from '@polkadot/api';
 import type { DeriveBalancesAccountData, DeriveBalancesAll, DeriveDemocracyLock, DeriveStakingAccount } from '@polkadot/api-derive/types';
 import type { Raw } from '@polkadot/types';
 import type { BlockNumber, ValidatorPrefsTo145, Voting } from '@polkadot/types/interfaces';
@@ -10,7 +11,7 @@ import type { BN } from '@polkadot/util';
 import React, { useRef } from 'react';
 
 import { withCalls, withMulti } from '@polkadot/react-api/hoc';
-import { useBestNumberRelay } from '@polkadot/react-hooks';
+import { useBestNumberRelay, useStakingAsyncApis } from '@polkadot/react-hooks';
 import { BlockToTime, FormatBalance } from '@polkadot/react-query';
 import { BN_MAX_INTEGER, BN_ZERO, bnMax, formatBalance, formatNumber, isObject } from '@polkadot/util';
 
@@ -50,6 +51,7 @@ export interface ValidatorPrefsType {
 }
 
 interface Props {
+  apiOverride?: ApiPromise;
   address: string;
   balancesAll?: DeriveBalancesAll;
   children?: React.ReactNode;
@@ -237,7 +239,7 @@ function renderValidatorPrefs ({ stakingInfo, withValidatorPrefs = false }: Prop
   );
 }
 
-function createBalanceItems (formatIndex: number, lookup: Record<string, string>, t: TFunction, { address, balanceDisplay, balancesAll, bestNumber, convictionLocks, democracyLocks, isAllLocked, otherBonded, ownBonded, stakingInfo, votingOf, withBalanceToggle, withLabel }: { address: string; balanceDisplay: BalanceActiveType; balancesAll?: DeriveBalancesAll | DeriveBalancesAccountData; bestNumber?: BlockNumber; convictionLocks?: RefLock[]; democracyLocks?: DeriveDemocracyLock[]; isAllLocked: boolean; otherBonded: BN[]; ownBonded: BN; stakingInfo?: DeriveStakingAccount; votingOf?: Voting; withBalanceToggle: boolean, withLabel: boolean }): React.ReactNode {
+function createBalanceItems (formatIndex: number, lookup: Record<string, string>, t: TFunction, { address, apiOverride, balanceDisplay, balancesAll, bestNumber, convictionLocks, democracyLocks, isAllLocked, otherBonded, ownBonded, stakingInfo, votingOf, withBalanceToggle, withLabel }: { address: string; apiOverride: ApiPromise | undefined, balanceDisplay: BalanceActiveType; balancesAll?: DeriveBalancesAll | DeriveBalancesAccountData; bestNumber?: BlockNumber; convictionLocks?: RefLock[]; democracyLocks?: DeriveDemocracyLock[]; isAllLocked: boolean; otherBonded: BN[]; ownBonded: BN; stakingInfo?: DeriveStakingAccount; votingOf?: Voting; withBalanceToggle: boolean, withLabel: boolean }): React.ReactNode {
   const allItems: React.ReactNode[] = [];
   const deriveBalances = balancesAll as DeriveBalancesAll;
 
@@ -293,7 +295,10 @@ function createBalanceItems (formatIndex: number, lookup: Record<string, string>
               >
                 <div>
                   <p>{formatBalance(locked, { forceUnit: '-' })} {t('fully vested in')}</p>
-                  <BlockToTime value={endBlock.sub(bestNumber)} />
+                  <BlockToTime
+                    api={apiOverride}
+                    value={endBlock.sub(bestNumber)}
+                  />
                 </div>
                 <div className='middle'>
                   (Block {formatNumber(endBlock)} @ {formatBalance(perBlock)}/block)
@@ -526,7 +531,7 @@ function createBalanceItems (formatIndex: number, lookup: Record<string, string>
   );
 }
 
-function renderBalances (props: Props, lookup: Record<string, string>, bestNumber: BlockNumber | undefined, t: TFunction): React.ReactNode[] {
+function renderBalances (props: Props, lookup: Record<string, string>, bestNumber: BlockNumber | undefined, apiOverride: ApiPromise | undefined, t: TFunction): React.ReactNode[] {
   const { address, balancesAll, convictionLocks, democracyLocks, stakingInfo, votingOf, withBalance = true, withBalanceToggle = false, withLabel = false } = props;
   const balanceDisplay = withBalance === true
     ? DEFAULT_BALANCES
@@ -538,7 +543,7 @@ function renderBalances (props: Props, lookup: Record<string, string>, bestNumbe
 
   const [ownBonded, otherBonded] = calcBonded(stakingInfo, balanceDisplay.bonded);
   const isAllLocked = !!balancesAll && balancesAll.lockedBreakdown.some(({ amount }): boolean => amount?.isMax());
-  const baseOpts = { address, balanceDisplay, bestNumber, convictionLocks, democracyLocks, isAllLocked, otherBonded, ownBonded, votingOf, withBalanceToggle, withLabel };
+  const baseOpts = { address, apiOverride, balanceDisplay, bestNumber, convictionLocks, democracyLocks, isAllLocked, otherBonded, ownBonded, votingOf, withBalanceToggle, withLabel };
   const items = [createBalanceItems(0, lookup, t, { ...baseOpts, balancesAll, stakingInfo })];
 
   withBalanceToggle && balancesAll?.additional.length && balancesAll.additional.forEach((balancesAll, index): void => {
@@ -551,6 +556,7 @@ function renderBalances (props: Props, lookup: Record<string, string>, bestNumbe
 function AddressInfo (props: Props): React.ReactElement<Props> {
   const { t } = useTranslation();
   const bestNumber = useBestNumberRelay();
+  const { isStakingAsync, rcApi } = useStakingAsyncApis();
   const { children, className = '', extraInfo, withBalanceToggle, withHexSessionId } = props;
 
   const lookup = useRef<Record<string, string>>({
@@ -564,7 +570,7 @@ function AddressInfo (props: Props): React.ReactElement<Props> {
   return (
     <div className={`${className} ui--AddressInfo ${withBalanceToggle ? 'ui--AddressInfo-expander' : ''}`}>
       <div className={`column${withBalanceToggle ? ' column--expander' : ''}`}>
-        {renderBalances(props, lookup.current, bestNumber, t)}
+        {renderBalances(props, lookup.current, bestNumber, isStakingAsync ? rcApi : undefined, t)}
         {withHexSessionId?.[0] && (
           <>
             <Label label={t('session keys')} />