From f505ef41b247744b197529a313c4dbeb1f676349 Mon Sep 17 00:00:00 2001
From: Jaco Greeff <jacogr@gmail.com>
Date: Wed, 19 Aug 2020 09:59:52 +0200
Subject: [PATCH] Remove conviction genesis override (#3440)

* Remove conviction genesis override

* Ordering

* Simplify unit formatting
---
 .../src/ConvictionDropdown.tsx                | 27 +++++++------------
 packages/react-query/src/FormatBalance.tsx    | 13 +++++----
 2 files changed, 15 insertions(+), 25 deletions(-)

diff --git a/packages/react-components/src/ConvictionDropdown.tsx b/packages/react-components/src/ConvictionDropdown.tsx
index af6ecd9d74..b6a5e56c09 100644
--- a/packages/react-components/src/ConvictionDropdown.tsx
+++ b/packages/react-components/src/ConvictionDropdown.tsx
@@ -3,8 +3,7 @@
 // of the Apache-2.0 license. See the LICENSE file for details.
 
 import BN from 'bn.js';
-import React, { useState, useMemo } from 'react';
-import { POLKADOT_GENESIS } from '@polkadot/apps-config/api/constants';
+import React, { useRef } from 'react';
 import { useApi } from '@polkadot/react-hooks';
 
 import Dropdown from './Dropdown';
@@ -18,34 +17,26 @@ export interface Props {
   value?: number;
 }
 
-const CONVICTIONS: [number, number][] = [1, 2, 4, 8, 16, 32].map((lock, index) => [index + 1, lock]);
+const CONVICTIONS: [number, number, BN][] = [1, 2, 4, 8, 16, 32].map((lock, index) => [index + 1, lock, new BN(lock)]);
 const SEC_DAY = 60 * 60 * 24;
 
-// REMOVE once Polkadot is upgraded with the correct conviction
-const PERIODS: Record<string, BN> = {
-  [POLKADOT_GENESIS]: new BN(403200)
-};
-
-function AvailableDisplay ({ className = '', help, label, onChange, value }: Props): React.ReactElement<Props> | null {
+function Convictions ({ className = '', help, label, onChange, value }: Props): React.ReactElement<Props> | null {
   const { api } = useApi();
   const { t } = useTranslation();
-  const [enact] = useState(
-    ((PERIODS[api.genesisHash.toHex()] || api.consts.democracy.enactmentPeriod).toNumber() * api.consts.timestamp.minimumPeriod.toNumber() / 1000 * 2) / SEC_DAY
-  );
 
-  const convictionOpts = useMemo(() => [
+  const optionsRef = useRef([
     { text: t<string>('0.1x voting balance, no lockup period'), value: 0 },
-    ...CONVICTIONS.map(([value, lock]): { text: string; value: number } => ({
+    ...CONVICTIONS.map(([value, lock, bnLock]): { text: string; value: number } => ({
       text: t<string>('{{value}}x voting balance, locked for {{lock}}x enactment ({{period}} days)', {
         replace: {
           lock,
-          period: (enact * lock).toFixed(2),
+          period: (bnLock.mul(api.consts.democracy.enactmentPeriod.mul(api.consts.timestamp.minimumPeriod.muln(2)).divn(1000)).toNumber() / SEC_DAY).toFixed(2),
           value
         }
       }),
       value
     }))
-  ], [t, enact]);
+  ]);
 
   return (
     <Dropdown
@@ -53,10 +44,10 @@ function AvailableDisplay ({ className = '', help, label, onChange, value }: Pro
       help={help}
       label={label}
       onChange={onChange}
-      options={convictionOpts}
+      options={optionsRef.current}
       value={value}
     />
   );
 }
 
-export default React.memo(AvailableDisplay);
+export default React.memo(Convictions);
diff --git a/packages/react-query/src/FormatBalance.tsx b/packages/react-query/src/FormatBalance.tsx
index 8f053f7bbe..822af7cdb5 100644
--- a/packages/react-query/src/FormatBalance.tsx
+++ b/packages/react-query/src/FormatBalance.tsx
@@ -3,7 +3,7 @@
 // of the Apache-2.0 license. See the LICENSE file for details.
 
 import BN from 'bn.js';
-import React, { useState } from 'react';
+import React from 'react';
 import styled from 'styled-components';
 import { Compact } from '@polkadot/types';
 import { formatBalance } from '@polkadot/util';
@@ -25,10 +25,10 @@ interface Props {
 const M_LENGTH = 6 + 1;
 const K_LENGTH = 3 + 1;
 
-function format (value: Compact<any> | BN | string, currency: string | null, withSi?: boolean, _isShort?: boolean, labelPost?: string): React.ReactNode {
+function format (value: Compact<any> | BN | string, withCurrency = true, withSi?: boolean, _isShort?: boolean, labelPost?: string): React.ReactNode {
   const [prefix, postfix] = formatBalance(value, { forceUnit: '-', withSi: false }).split('.');
   const isShort = _isShort || (withSi && prefix.length >= K_LENGTH);
-  const unitPost = currency ? <span className='ui--FormatBalance-unit'> {currency}</span> : '';
+  const unitPost = withCurrency ? <span className='ui--FormatBalance-unit'> {formatBalance.getDefaults().unit}</span> : '';
 
   if (prefix.length > M_LENGTH) {
     const [major, rest] = formatBalance(value, { withUnit: false }).split('.');
@@ -38,12 +38,11 @@ function format (value: Compact<any> | BN | string, currency: string | null, wit
     return <>{major}.<span className='ui--FormatBalance-postfix'>{minor}</span>{unit}{unitPost}{labelPost || ''}</>;
   }
 
-  return <>{`${prefix}${isShort ? '' : '.'}`}{!isShort && (<><span className='ui--FormatBalance-postfix'>{`000${postfix || ''}`.slice(-3)}</span></>)}{unitPost}{labelPost || ''}</>;
+  return <>{`${prefix}${isShort ? '' : '.'}`}{!isShort && <span className='ui--FormatBalance-postfix'>{`000${postfix || ''}`.slice(-3)}</span>}{unitPost}{labelPost || ''}</>;
 }
 
-function FormatBalance ({ children, className = '', isShort, label, labelPost, value, withCurrency = true, withSi }: Props): React.ReactElement<Props> {
+function FormatBalance ({ children, className = '', isShort, label, labelPost, value, withCurrency, withSi }: Props): React.ReactElement<Props> {
   const { t } = useTranslation();
-  const [currency] = useState(withCurrency ? formatBalance.getDefaults().unit : null);
 
   // labelPost here looks messy, however we ensure we have one less text node
   return (
@@ -52,7 +51,7 @@ function FormatBalance ({ children, className = '', isShort, label, labelPost, v
         value
           ? value === 'all'
             ? t<string>('everything{{labelPost}}', { replace: { labelPost } })
-            : format(value, currency, withSi, isShort, labelPost)
+            : format(value, withCurrency, withSi, isShort, labelPost)
           : `-${labelPost || ''}`
       }</span>{children}
     </div>