diff --git a/packages/page-accounts/src/Accounts/BannerDOT.tsx b/packages/page-accounts/src/Accounts/BannerDOT.tsx index 91839d91f4..05d7ce9065 100644 --- a/packages/page-accounts/src/Accounts/BannerDOT.tsx +++ b/packages/page-accounts/src/Accounts/BannerDOT.tsx @@ -2,27 +2,50 @@ // This software may be modified and distributed under the terms // of the Apache-2.0 license. See the LICENSE file for details. +import BN from 'bn.js'; import React, { useState } from 'react'; import { Trans } from 'react-i18next'; import { POLKADOT_DENOM_BLOCK, POLKADOT_GENESIS } from '@polkadot/apps-config/api/constants'; -import { useApi } from '@polkadot/react-hooks'; +import { useApi, useCall } from '@polkadot/react-hooks'; +import { BlockToTime } from '@polkadot/react-query'; import { formatNumber } from '@polkadot/util'; import Banner from './Banner'; function BannerDOT (): React.ReactElement | null { const { api } = useApi(); + const bestNumber = useCall(api.derive.chain.bestNumber); const [isPolkadot] = useState(api.genesisHash.eq(POLKADOT_GENESIS)); - if (!isPolkadot) { + if (!isPolkadot || !bestNumber) { return null; } + const remaining = POLKADOT_DENOM_BLOCK.sub(bestNumber); + const endDate = remaining.gtn(0) + ? new Date(Date.now() + (remaining.toNumber() * 6000)) + .toUTCString() + .replace('GMT', 'UTC') + .replace(/^[a-zA-Z]{3}, /, '') + .replace(/:[0-9]{2} UTC/, ' UTC') + : null; + return ( -

On approximately August 21st at 13:15 UTC (block number {formatNumber(POLKADOT_DENOM_BLOCK)}), the DOT token will undergo a redenomination from its original sale.

-

New DOT will be 100x smaller than DOT (old). Therefore, your DOT balance will be 100x higher and the price per DOT will be 100x lower. The percentage of the DOT you own relative to total supply will be unchanged. This will not affect the total value of your position.

-

See the { + endDate + ? On approximately {endDate} (block number {formatNumber(POLKADOT_DENOM_BLOCK)} in ), the DOT token will undergo a redenomination from its original sale. + : At block number {formatNumber(POLKADOT_DENOM_BLOCK)} the DOT token underwent a redenomination from its original sale. + }

+

{ + endDate + ? New DOT will be 100x smaller than DOT (old). Therefore, your DOT balance will be 100x higher and the price per DOT will be 100x lower. The percentage of the DOT you own relative to total supply will be unchanged. This will not affect the total value of your position. + : New DOT are 100x smaller than DOT (old). Therefore, your DOT balance is 100x higher and the price per DOT is 100x lower. The percentage of the DOT you own relative to total supply is unchanged. This does not affect the total value of your position. + }

+

See the | null { +function BlockToTime ({ blocks, children, className = '', isInline, label }: Props): React.ReactElement | null { const [, text] = useBlockTime(blocks); if (blocks?.ltn(0)) { @@ -22,7 +23,7 @@ function BlockToTime ({ blocks, children, className = '', label }: Props): React } return ( -

+
{label || ''}{text.split(' ').map((v, index) => index % 2 === 0 ? {` ${v} `} : ( @@ -37,6 +38,10 @@ function BlockToTime ({ blocks, children, className = '', label }: Props): React } export default React.memo(styled(BlockToTime)` + &.isInline { + display: inline-block; + } + span.timeUnits { font-size: 0.9em; }