neptune/ghost-portal
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Add countdown for redenom (#3434)

Browse Source 
* Add countdown for redenom

* in

* Rework countdown ordering

* Remove at
This commit is contained in:
Jaco Greeff 2020-08-18 09:05:24 +02:00 committed by GitHub
parent d4c24e35a7
commit cc3af6e05c
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
2 changed files with 35 additions and 7 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

33
packages/page-accounts/src/Accounts/BannerDOT.tsx
View File

@ -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<BN>(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 (
<Banner type='warning'>
<p><Trans key='dotRenom1'>On approximately August 21st at 13:15 UTC (block number {formatNumber(POLKADOT_DENOM_BLOCK)}), the DOT token will undergo a <a href='#/poll'>redenomination</a> from its original sale.</Trans></p>
<p><Trans key='dotRenom2'>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.</Trans></p>
<p><Trans key='dotRenom3'>See the <a
<p>{
endDate
? <Trans key='dotRenomGoing'>On approximately {endDate} (block number {formatNumber(POLKADOT_DENOM_BLOCK)} in <BlockToTime
blocks={remaining}
isInline
/>), the DOT token will undergo a <a href='#/poll'>redenomination</a> from its original sale.</Trans>
: <Trans key='dotRenomDone'>At block number {formatNumber(POLKADOT_DENOM_BLOCK)} the DOT token underwent a <a href='#/poll'>redenomination</a> from its original sale.</Trans>
}</p>
<p>{
endDate
? <Trans key='dotRenomSizeGoing'>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.</Trans>
: <Trans key='dotRenomSizeDone'>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.</Trans>
}</p>
<p><Trans key='dotRenomLink'>See the <a
href='https://polkadot.network/the-results-are-in/'
rel='noopener noreferrer'
target='_blank'

9
packages/react-query/src/BlockToTime.tsx
View File

@ -11,10 +11,11 @@ interface Props {
blocks?: BN;
children?: React.ReactNode;
className?: string;
isInline?: boolean;
label?: React.ReactNode;
}
function BlockToTime ({ blocks, children, className = '', label }: Props): React.ReactElement<Props> | null {
function BlockToTime ({ blocks, children, className = '', isInline, label }: Props): React.ReactElement<Props> | null {
const [, text] = useBlockTime(blocks);
if (blocks?.ltn(0)) {
@ -22,7 +23,7 @@ function BlockToTime ({ blocks, children, className = '', label }: Props): React
}
return (
<div className={className}>
<div className={`${className}${isInline ? ' isInline' : ''}`}>
{label || ''}{text.split(' ').map((v, index) => index % 2 === 0
? <span key={index}>{` ${v} `}</span>
: (
@ -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;
}