From 687d5fcbc0b556285606fdd0857d0b4c6f161503 Mon Sep 17 00:00:00 2001
From: Jaco Greeff <jacogr@gmail.com>
Date: Thu, 6 Aug 2020 11:27:48 +0200
Subject: [PATCH] Redenomination banner (#3351)

---
 .../page-accounts/src/Accounts/Banner.tsx     | 10 +++---
 .../page-accounts/src/Accounts/BannerDOT.tsx  | 31 +++++++++++++++++++
 packages/page-accounts/src/Accounts/index.tsx |  2 ++
 3 files changed, 39 insertions(+), 4 deletions(-)
 create mode 100644 packages/page-accounts/src/Accounts/BannerDOT.tsx

diff --git a/packages/page-accounts/src/Accounts/Banner.tsx b/packages/page-accounts/src/Accounts/Banner.tsx
index f6c74a1cfe..0340a8aca8 100644
--- a/packages/page-accounts/src/Accounts/Banner.tsx
+++ b/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;
   }
 `);
diff --git a/packages/page-accounts/src/Accounts/BannerDOT.tsx b/packages/page-accounts/src/Accounts/BannerDOT.tsx
new file mode 100644
index 0000000000..5f23186f14
--- /dev/null
+++ b/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);
diff --git a/packages/page-accounts/src/Accounts/index.tsx b/packages/page-accounts/src/Accounts/index.tsx
index 790913aa7b..f5979abd91 100644
--- a/packages/page-accounts/src/Accounts/index.tsx
+++ b/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 && (