Add function to get expected block time from different constants

src/components/AverageBlockTime/AverageBlockTime.tsx

@@ -17,6 +17,7 @@ import { PolkadotNetwork } from "../../types"
 import {
   estimateStartBlockNumber,
   formatDate,
+  getExpectedBlockTime,
 } from "../../utils/UtilsFunctions"
 import { ApiContext, ApiContextData, connectToApi } from "../utils/ApiProvider"
 import "./AverageBlockTime.less"
@@ -66,7 +67,7 @@ function AverageBlockTime(): React.ReactElement {
         network || ({} as PolkadotNetwork)
       )
 
-      const timeMs = auxApi.consts?.babe?.expectedBlockTime.toNumber() || 0
+      const timeMs = getExpectedBlockTime(auxApi)
 
       // Get current block number
       const latestBlock = await auxApi.rpc.chain.getHeader()

src/components/BlockAuthor/BlockAuthor.tsx

@@ -16,7 +16,7 @@ import {
 import React, { useContext, useEffect, useState } from "react"
 import { useAppSelector } from "../../store/hooks"
 import { PolkadotNetwork } from "../../types"
-import { estimateStartBlockNumber, findAuthorName } from "../../utils/UtilsFunctions"
+import { estimateStartBlockNumber, findAuthorName, getExpectedBlockTime } from "../../utils/UtilsFunctions"
 import { ApiContext, ApiContextData, connectToApi } from "../utils/ApiProvider"
 import "./BlockAuthor.less"
 
@@ -68,7 +68,7 @@ function BlockAuthor(): React.ReactElement {
         network || ({} as PolkadotNetwork)
       )
 
-      const timeMs = auxApi.consts?.babe?.expectedBlockTime.toNumber() || 0
+      const timeMs = getExpectedBlockTime(auxApi)
 
       // Get current block number
       const latestBlock = await auxApi.rpc.chain.getHeader()

src/components/BlockTime/BlockTime.tsx

@@ -15,7 +15,7 @@ import {
 import { Moment } from "moment"
 import React, { useContext, useEffect, useState } from "react"
 import { useAppSelector } from "../../store/hooks"
-import { formatDate, toUnixTimestamp } from "../../utils/UtilsFunctions"
+import { formatDate, getExpectedBlockTime, toUnixTimestamp } from "../../utils/UtilsFunctions"
 import { ApiContext, ApiContextData, connectToApi } from "../utils/ApiProvider"
 import "./BlockTime.less"
 
@@ -61,7 +61,7 @@ function BlockTime(): React.ReactElement {
       )
 
       const newDefaults = apis.map(auxApi =>
-        auxApi.consts?.babe?.expectedBlockTime.toNumber()
+        getExpectedBlockTime(auxApi)
       )
 
       formBlocks.setFieldsValue({

src/utils/UtilsFunctions.ts

@@ -1,7 +1,13 @@
 import moment, { Moment } from "moment"
 import { encodeAddress } from "@polkadot/util-crypto/address"
+import {
+  BN,
+  BN_THOUSAND,
+  BN_TWO,
+} from "@polkadot/util"
 import { SubstrateAddress, TransformedSubstrateAddress } from "../types"
 import * as prefixes from "../utils/ss58-registry.json"
+import { ApiPromise } from "@polkadot/api"
 
 export const replaceText = (
   key: string,
@@ -104,3 +110,28 @@ export const estimateStartBlockNumber = (
     endBlockNumber - (currentUnix - estimatedUnix) / estimatedBlockTime
   )
 }
+
+const EXPECTED_TIME_THRESHOLD = BN_THOUSAND.div(BN_TWO)
+
+const EXPECTED_TIME_DEFAULT = new BN(6_000)
+
+export const getExpectedBlockTime = (api: ApiPromise): number => {
+  // https://github.com/polkadot-js/apps/blob/8ef4ed18dd281adfef3ce9e8f0bede8a82e62ec9/packages/react-hooks/src/useBlockTime.ts#L26
+  return (
+    // Babe
+    (
+      api.consts.babe?.expectedBlockTime ||
+      // POW, eg. Kulupu
+      api.consts.difficulty?.targetBlockTime ||
+      // Check against threshold to determine value validity
+      (api.consts.timestamp?.minimumPeriod.gte(EXPECTED_TIME_THRESHOLD)
+        ? // Default minimum period config
+          api.consts.timestamp.minimumPeriod.mul(BN_TWO)
+        : api.query.parachainSystem
+        ? // default guess for a parachain
+          EXPECTED_TIME_DEFAULT.mul(BN_TWO)
+        : // default guess for others
+          EXPECTED_TIME_DEFAULT)
+    ).toNumber()
+  )
+}