From cc3af6e05c1625a40269462fa820215430fe950b Mon Sep 17 00:00:00 2001
From: Jaco Greeff <jacogr@gmail.com>
Date: Tue, 18 Aug 2020 09:05:24 +0200
Subject: [PATCH] Add countdown for redenom (#3434)

* Add countdown for redenom

* in

* Rework countdown ordering

* Remove at
---
 .../page-accounts/src/Accounts/BannerDOT.tsx  | 33 ++++++++++++++++---
 packages/react-query/src/BlockToTime.tsx      |  9 +++--
 2 files changed, 35 insertions(+), 7 deletions(-)

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<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'
diff --git a/packages/react-query/src/BlockToTime.tsx b/packages/react-query/src/BlockToTime.tsx
index 8f4b8eeb6c..5bf44ea308 100644
--- a/packages/react-query/src/BlockToTime.tsx
+++ b/packages/react-query/src/BlockToTime.tsx
@@ -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;
   }