Redenomination banner (#3351)

packages/page-accounts/src/Accounts/Banner.tsx

@@ -13,7 +13,7 @@ interface Props {
 
 function Banner ({ children, className = '', type }: Props): React.ReactElement<Props> | null {
   return (
-    <article className={`${className} ${type} nomargin`}>
+    <article className={`${className} ${type}`}>
       <div className='box'>
         {children}
       </div>
@@ -22,12 +22,14 @@ function Banner ({ children, className = '', type }: Props): React.ReactElement<
 }
 
 export default React.memo(styled(Banner)`
-  &+& {
-    margin-top: 0.5rem;
+  max-width: 75rem;
+  margin: 0.5rem auto !important;
+
+  &+.ui--Button-Group {
+    margin-top: 2rem;
   }
 
   .box {
-    max-width: 50rem;
     padding: 0 0.5rem;
   }
 `);

packages/page-accounts/src/Accounts/BannerDOT.tsx

@@ -0,0 +1,31 @@
+// Copyright 2017-2020 @polkadot/app-accounts authors & contributors
+// This software may be modified and distributed under the terms
+// of the Apache-2.0 license. See the LICENSE file for details.
+
+import React, { useState } from 'react';
+import { Trans } from 'react-i18next';
+import { useApi } from '@polkadot/react-hooks';
+
+import Banner from './Banner';
+
+function BannerDOT (): React.ReactElement | null {
+  const { api } = useApi();
+  const [isPolkadot] = useState(api.genesisHash.eq('0x91b171bb158e2d3848fa23a9f1c25182fb8e20313b2c1eb49219da7a70ce90c3'));
+
+  if (!isPolkadot) {
+    return null;
+  }
+
+  return (
+    <Banner type='warning'>
+      <p><Trans key='dotRenom1'>On approximately August 21st at 13:15 UTC (block number 1,248,328), the DOT token will undergo a <a href='#/poll'>redenomination</a> from its original sale.</Trans></p>
+      <p><Trans key='dotRenom2'>New DOTs will be 100x smaller than DOTs (old). Therefore, your DOT balance will be 100x higher and the price per DOT will be 100x lower. The percentage of the DOTs you own relative to total supply will be unchanged. This will not affect the total value of your position. See the <a
+        href='https://polkadot.network/the-results-are-in/'
+        rel='noopener noreferrer'
+        target='_blank'
+      >Polkadot blog post</a> for more information.</Trans></p>
+    </Banner>
+  );
+}
+
+export default React.memo(BannerDOT);

packages/page-accounts/src/Accounts/index.tsx

@@ -24,6 +24,7 @@ import Proxy from './modals/ProxiedAdd';
 import Qr from './modals/Qr';
 import Account from './Account';
 import BannerClaims from './BannerClaims';
+import BannerDOT from './BannerDOT';
 import BannerExtension from './BannerExtension';
 import { sortAccounts } from '../util';
 
@@ -162,6 +163,7 @@ function Overview ({ className = '', onStatusChange }: Props): React.ReactElemen
 
   return (
     <div className={className}>
+      <BannerDOT />
       <BannerExtension />
       <BannerClaims />
       {isCreateOpen && (