From c0f6e84e0dec62532e1acc0fe8538338480fcd61 Mon Sep 17 00:00:00 2001
From: Jaco Greeff <jacogr@gmail.com>
Date: Wed, 8 Apr 2020 22:46:32 +0200
Subject: [PATCH] Update amount display (with hover info) (#2535)

* Update amount display (with hover info)

* css lint

* It is getting late... and the linter is notiving m being slow...
---
 package.json                                  |   6 +-
 packages/page-contracts/package.json          |   2 +-
 .../src/Overview/Referendum.tsx               |   2 +
 .../src/Overview/ReferendumVotes.tsx          |  61 +++++++++-
 packages/react-api/package.json               |   2 +-
 packages/react-query/src/FormatBalance.tsx    |   9 +-
 yarn.lock                                     | 112 +++++++++---------
 7 files changed, 123 insertions(+), 71 deletions(-)

diff --git a/package.json b/package.json
index 80daf40506..39d12a6306 100644
--- a/package.json
+++ b/package.json
@@ -8,10 +8,10 @@
     "packages/*"
   ],
   "resolutions": {
-    "@polkadot/api": "^1.10.0-beta.18",
-    "@polkadot/api-contract": "^1.10.0-beta.18",
+    "@polkadot/api": "^1.10.0-beta.19",
+    "@polkadot/api-contract": "^1.10.0-beta.19",
     "@polkadot/keyring": "^2.8.0-beta.7",
-    "@polkadot/types": "^1.10.0-beta.18",
+    "@polkadot/types": "^1.10.0-beta.19",
     "@polkadot/util": "^2.8.0-beta.7",
     "@polkadot/util-crypto": "^2.8.0-beta.7",
     "babel-core": "^7.0.0-bridge.0",
diff --git a/packages/page-contracts/package.json b/packages/page-contracts/package.json
index 6500142837..f72cd26250 100644
--- a/packages/page-contracts/package.json
+++ b/packages/page-contracts/package.json
@@ -12,6 +12,6 @@
   "license": "Apache-2.0",
   "dependencies": {
     "@babel/runtime": "^7.9.2",
-    "@polkadot/api-contract": "^1.10.0-beta.18"
+    "@polkadot/api-contract": "^1.10.0-beta.19"
   }
 }
diff --git a/packages/page-democracy/src/Overview/Referendum.tsx b/packages/page-democracy/src/Overview/Referendum.tsx
index ef16a8111d..0b6545fd25 100644
--- a/packages/page-democracy/src/Overview/Referendum.tsx
+++ b/packages/page-democracy/src/Overview/Referendum.tsx
@@ -57,6 +57,7 @@ function Referendum ({ className, value: { allAye, allNay, changeAye, changeNay,
       <ReferendumVotes
         change={changeAye}
         count={voteCountAye}
+        index={index}
         isWinning={isPassing}
         total={votedAye}
         votes={allAye}
@@ -64,6 +65,7 @@ function Referendum ({ className, value: { allAye, allNay, changeAye, changeNay,
       <ReferendumVotes
         change={changeNay}
         count={voteCountNay}
+        index={index}
         isWinning={!isPassing}
         total={votedNay}
         votes={allNay}
diff --git a/packages/page-democracy/src/Overview/ReferendumVotes.tsx b/packages/page-democracy/src/Overview/ReferendumVotes.tsx
index 4088c10efa..ffcfc34cac 100644
--- a/packages/page-democracy/src/Overview/ReferendumVotes.tsx
+++ b/packages/page-democracy/src/Overview/ReferendumVotes.tsx
@@ -6,23 +6,31 @@ import { DeriveReferendumVote } from '@polkadot/api-derive/types';
 
 import BN from 'bn.js';
 import React, { useEffect, useState } from 'react';
-import { Expander, Icon } from '@polkadot/react-components';
+import styled from 'styled-components';
+import { Expander, Icon, Tooltip } from '@polkadot/react-components';
 import { FormatBalance } from '@polkadot/react-query';
 import { formatNumber } from '@polkadot/util';
 
+import { useTranslation } from '../translate';
 import ReferendumVote from './ReferendumVote';
 
 interface Props {
   change: BN;
+  className?: string;
   count: number;
   isWinning: boolean;
+  index: BN;
   total: BN;
   votes: DeriveReferendumVote[];
 }
 
 const LOCKS = [1, 10, 20, 30, 40, 50, 60];
 
-function ReferendumVotes ({ change, count, isWinning, total, votes }: Props): React.ReactElement<Props> {
+let id = 0;
+
+function ReferendumVotes ({ change, className, count, index, isWinning, total, votes }: Props): React.ReactElement<Props> {
+  const { t } = useTranslation();
+  const [trigger] = useState(`votes-${index}-${++id}`);
   const [sorted, setSorted] = useState<DeriveReferendumVote[]>([]);
 
   useEffect((): void => {
@@ -37,10 +45,45 @@ function ReferendumVotes ({ change, count, isWinning, total, votes }: Props): Re
   }, [votes]);
 
   return (
-    <td className='number'>
+    <td className={`${className} number`}>
       <Expander
-        summary={<><FormatBalance value={total} />{count ? ` (${formatNumber(count)})` : '' }</>}
-        summarySub={change.gtn(0) ? <><Icon name={isWinning ? 'arrow alternate circle up outline' : 'arrow alternate circle down outline'} /><FormatBalance value={change} /></> : ''}
+        summary={
+          <>
+            <FormatBalance value={total} />
+            {count ? ` (${formatNumber(count)})` : '' }
+          </>
+        }
+        summarySub={
+          change.gtn(0)
+            ? (
+              <>
+                <Icon
+                  className='double-icon'
+                  data-for={trigger}
+                  data-tip
+                  name='info circle'
+                />
+                <Icon
+                  className='double-icon'
+                  name={isWinning ? 'arrow alternate circle down outline' : 'arrow alternate circle up outline'}
+                />
+                <FormatBalance
+                  isShort
+                  label='~'
+                  value={change}
+                />
+                <Tooltip
+                  text={
+                    isWinning
+                      ? t('That amount this total can be reduced by to change the referendum outcome, assuming 1x conviction changes on the removed votes.')
+                      : t('The amount this total should be increased by to change the referendum outcome, assuming 1x convictions on the added votes.')
+                  }
+                  trigger={trigger}
+                />
+              </>
+            )
+            : ''
+        }
       >
         {sorted.map((vote) =>
           <ReferendumVote
@@ -53,4 +96,10 @@ function ReferendumVotes ({ change, count, isWinning, total, votes }: Props): Re
   );
 }
 
-export default React.memo(ReferendumVotes);
+export default React.memo(styled(ReferendumVotes)`
+  .ui--Expander-summary {
+    i.icon+i.icon {
+      margin-left: -0.375rem;
+    }
+  }
+`);
diff --git a/packages/react-api/package.json b/packages/react-api/package.json
index 79e5e78ee3..3d46fc8b79 100644
--- a/packages/react-api/package.json
+++ b/packages/react-api/package.json
@@ -31,7 +31,7 @@
   "homepage": "https://github.com/polkadot-js/ui/tree/master/packages/ui-reactive#readme",
   "dependencies": {
     "@babel/runtime": "^7.9.2",
-    "@polkadot/api": "^1.10.0-beta.18",
+    "@polkadot/api": "^1.10.0-beta.19",
     "@polkadot/extension-dapp": "^0.24.0-beta.17",
     "rxjs-compat": "^6.5.5"
   }
diff --git a/packages/react-query/src/FormatBalance.tsx b/packages/react-query/src/FormatBalance.tsx
index 3aeda58e69..b084e01eaa 100644
--- a/packages/react-query/src/FormatBalance.tsx
+++ b/packages/react-query/src/FormatBalance.tsx
@@ -14,6 +14,7 @@ import { useTranslation } from './translate';
 
 interface Props extends BareProps {
   children?: React.ReactNode;
+  isShort?: boolean;
   label?: React.ReactNode;
   value?: Compact<any> | BN | string | null | 'all';
   withSi?: boolean;
@@ -23,9 +24,9 @@ interface Props extends BareProps {
 const M_LENGTH = 6 + 1;
 const K_LENGTH = 3 + 1;
 
-function format (value: Compact<any> | BN | string, currency: string, withSi?: boolean): React.ReactNode {
+function format (value: Compact<any> | BN | string, currency: string, withSi?: boolean, _isShort?: boolean): React.ReactNode {
   const [prefix, postfix] = formatBalance(value, { forceUnit: '-', withSi: false }).split('.');
-  const isShort = withSi && prefix.length >= K_LENGTH;
+  const isShort = _isShort || (withSi && prefix.length >= K_LENGTH);
 
   if (prefix.length > M_LENGTH) {
     // TODO Format with balance-postfix
@@ -47,7 +48,7 @@ function format (value: Compact<any> | BN | string, currency: string, withSi?: b
 //   return <>{prefix}.<span className='balance-postfix'>{`000${postfix || ''}`.slice(-3)}</span>{unit === '-' ? '' : unit}</>;
 // }
 
-function FormatBalance ({ children, className, label, value, withSi }: Props): React.ReactElement<Props> {
+function FormatBalance ({ children, className, isShort, label, value, withSi }: Props): React.ReactElement<Props> {
   const { t } = useTranslation();
   const [currency] = useState(formatBalance.getDefaults().unit);
 
@@ -57,7 +58,7 @@ function FormatBalance ({ children, className, label, value, withSi }: Props): R
         value
           ? value === 'all'
             ? t('everything')
-            : format(value, currency, withSi)
+            : format(value, currency, withSi, isShort)
           : '-'
       }</span>{children}
     </div>
diff --git a/yarn.lock b/yarn.lock
index 6cd764f4b9..ad7f3ee3fb 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -2836,57 +2836,57 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@polkadot/api-contract@npm:^1.10.0-beta.18":
-  version: 1.10.0-beta.18
-  resolution: "@polkadot/api-contract@npm:1.10.0-beta.18"
+"@polkadot/api-contract@npm:^1.10.0-beta.19":
+  version: 1.10.0-beta.19
+  resolution: "@polkadot/api-contract@npm:1.10.0-beta.19"
   dependencies:
     "@babel/runtime": ^7.9.2
-    "@polkadot/api": 1.10.0-beta.18
-    "@polkadot/rpc-core": 1.10.0-beta.18
-    "@polkadot/types": 1.10.0-beta.18
+    "@polkadot/api": 1.10.0-beta.19
+    "@polkadot/rpc-core": 1.10.0-beta.19
+    "@polkadot/types": 1.10.0-beta.19
     "@polkadot/util": ^2.8.0-beta.7
     bn.js: ^5.1.1
     rxjs: ^6.5.5
-  checksum: 2/377a5faeca0f9a55d883876a5c2e4aca1b50ddce2356b970e5ae697df1dacf40a0a3f30639c089492c4d21cf2a03f8e3170b99144e9214d1522a681507f45ff3
+  checksum: 2/53e43226b2b4859bbf96f5820103cc9642ed32bb0c40593eae777195ccc8363d9fd5d65a9e3d1b21fb88274d239983e0f5c0262cae4b1008a8fca2ebf35cc819
   languageName: node
   linkType: hard
 
-"@polkadot/api-derive@npm:1.10.0-beta.18":
-  version: 1.10.0-beta.18
-  resolution: "@polkadot/api-derive@npm:1.10.0-beta.18"
+"@polkadot/api-derive@npm:1.10.0-beta.19":
+  version: 1.10.0-beta.19
+  resolution: "@polkadot/api-derive@npm:1.10.0-beta.19"
   dependencies:
     "@babel/runtime": ^7.9.2
-    "@polkadot/api": 1.10.0-beta.18
-    "@polkadot/rpc-core": 1.10.0-beta.18
-    "@polkadot/rpc-provider": 1.10.0-beta.18
-    "@polkadot/types": 1.10.0-beta.18
+    "@polkadot/api": 1.10.0-beta.19
+    "@polkadot/rpc-core": 1.10.0-beta.19
+    "@polkadot/rpc-provider": 1.10.0-beta.19
+    "@polkadot/types": 1.10.0-beta.19
     "@polkadot/util": ^2.8.0-beta.7
     "@polkadot/util-crypto": ^2.8.0-beta.7
     bn.js: ^5.1.1
     memoizee: ^0.4.14
     rxjs: ^6.5.5
-  checksum: 2/5bca9ef1dbfde3c5a12074be6a3045e335aef4fe12d8ced8a5d9e8eac5edb83318b44b216b2c7f6410e95c6a129acdc9f8643a445a572516a49c909e49727db0
+  checksum: 2/b6baac19eedbe9cdfa325f2c693d896c4fea08e30a2121b0800de0515fcece2d15743cd18cfc89e4ba8068f80aece0650e5694ad88207db22defa0d7c0bda1f1
   languageName: node
   linkType: hard
 
-"@polkadot/api@npm:^1.10.0-beta.18":
-  version: 1.10.0-beta.18
-  resolution: "@polkadot/api@npm:1.10.0-beta.18"
+"@polkadot/api@npm:^1.10.0-beta.19":
+  version: 1.10.0-beta.19
+  resolution: "@polkadot/api@npm:1.10.0-beta.19"
   dependencies:
     "@babel/runtime": ^7.9.2
-    "@polkadot/api-derive": 1.10.0-beta.18
+    "@polkadot/api-derive": 1.10.0-beta.19
     "@polkadot/keyring": ^2.8.0-beta.7
-    "@polkadot/metadata": 1.10.0-beta.18
-    "@polkadot/rpc-core": 1.10.0-beta.18
-    "@polkadot/rpc-provider": 1.10.0-beta.18
-    "@polkadot/types": 1.10.0-beta.18
-    "@polkadot/types-known": 1.10.0-beta.18
+    "@polkadot/metadata": 1.10.0-beta.19
+    "@polkadot/rpc-core": 1.10.0-beta.19
+    "@polkadot/rpc-provider": 1.10.0-beta.19
+    "@polkadot/types": 1.10.0-beta.19
+    "@polkadot/types-known": 1.10.0-beta.19
     "@polkadot/util": ^2.8.0-beta.7
     "@polkadot/util-crypto": ^2.8.0-beta.7
     bn.js: ^5.1.1
     eventemitter3: ^4.0.0
     rxjs: ^6.5.5
-  checksum: 2/762356d094d3ddc5b3a39228b51ef846f5257334b583308adf1235866d5dbbcd14bc02ae6cfc11f563e9f3f8229741ce1726f225422cdc1558346784e3006d32
+  checksum: 2/e38a32d0312ac1b6ab780511cd33c227a65460728b4a917fa70430db8b448cf9f1a8d135e3dafefb42e46687fabd8eba52ede91d4de198476f0c1fe9bd651f45
   languageName: node
   linkType: hard
 
@@ -2927,7 +2927,7 @@ __metadata:
   resolution: "@polkadot/app-contracts@workspace:packages/page-contracts"
   dependencies:
     "@babel/runtime": ^7.9.2
-    "@polkadot/api-contract": ^1.10.0-beta.18
+    "@polkadot/api-contract": ^1.10.0-beta.19
   languageName: unknown
   linkType: soft
 
@@ -3252,17 +3252,17 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@polkadot/metadata@npm:1.10.0-beta.18":
-  version: 1.10.0-beta.18
-  resolution: "@polkadot/metadata@npm:1.10.0-beta.18"
+"@polkadot/metadata@npm:1.10.0-beta.19":
+  version: 1.10.0-beta.19
+  resolution: "@polkadot/metadata@npm:1.10.0-beta.19"
   dependencies:
     "@babel/runtime": ^7.9.2
-    "@polkadot/types": 1.10.0-beta.18
-    "@polkadot/types-known": 1.10.0-beta.18
+    "@polkadot/types": 1.10.0-beta.19
+    "@polkadot/types-known": 1.10.0-beta.19
     "@polkadot/util": ^2.8.0-beta.7
     "@polkadot/util-crypto": ^2.8.0-beta.7
     bn.js: ^5.1.1
-  checksum: 2/d16cc008be82dc9d7b1c6e57e924cad24f1e04ca8ac34a606236f01a91756b502fbb01292f89b6b456075786c3296faf6459b18a15d68d7e7eebb4d90d0899f4
+  checksum: 2/a04c5d6a45ed89e8d0d35b592c50ea27c16b239785b20ee3997a9d90b9bb7f2a2b01d12161600685d30a9e3ef8cea86bebae2dc53c6a9a609766040ca4811b35
   languageName: node
   linkType: hard
 
@@ -3271,7 +3271,7 @@ __metadata:
   resolution: "@polkadot/react-api@workspace:packages/react-api"
   dependencies:
     "@babel/runtime": ^7.9.2
-    "@polkadot/api": ^1.10.0-beta.18
+    "@polkadot/api": ^1.10.0-beta.19
     "@polkadot/extension-dapp": ^0.24.0-beta.17
     rxjs-compat: ^6.5.5
   languageName: unknown
@@ -3388,35 +3388,35 @@ __metadata:
   languageName: unknown
   linkType: soft
 
-"@polkadot/rpc-core@npm:1.10.0-beta.18":
-  version: 1.10.0-beta.18
-  resolution: "@polkadot/rpc-core@npm:1.10.0-beta.18"
+"@polkadot/rpc-core@npm:1.10.0-beta.19":
+  version: 1.10.0-beta.19
+  resolution: "@polkadot/rpc-core@npm:1.10.0-beta.19"
   dependencies:
     "@babel/runtime": ^7.9.2
-    "@polkadot/metadata": 1.10.0-beta.18
-    "@polkadot/rpc-provider": 1.10.0-beta.18
-    "@polkadot/types": 1.10.0-beta.18
+    "@polkadot/metadata": 1.10.0-beta.19
+    "@polkadot/rpc-provider": 1.10.0-beta.19
+    "@polkadot/types": 1.10.0-beta.19
     "@polkadot/util": ^2.8.0-beta.7
     memoizee: ^0.4.14
     rxjs: ^6.5.5
-  checksum: 2/f647c7a3553f7fe40c5b390caf7194efdabf54881897dd59b22004992f3a17919aefc529ece6afab6aa60cd27fa6f3e6c86535489bb4078d107a53340ef876d3
+  checksum: 2/f7c6e4b044cca6fe886bd8b502f54c7cb0af2e3dbb85412c7cc9ed22fb80e330fbbe8f4acd620de2c60ae9f03d81bbd13bedcce4993c3e1d7c4dcad87926d1b1
   languageName: node
   linkType: hard
 
-"@polkadot/rpc-provider@npm:1.10.0-beta.18":
-  version: 1.10.0-beta.18
-  resolution: "@polkadot/rpc-provider@npm:1.10.0-beta.18"
+"@polkadot/rpc-provider@npm:1.10.0-beta.19":
+  version: 1.10.0-beta.19
+  resolution: "@polkadot/rpc-provider@npm:1.10.0-beta.19"
   dependencies:
     "@babel/runtime": ^7.9.2
-    "@polkadot/metadata": 1.10.0-beta.18
-    "@polkadot/types": 1.10.0-beta.18
+    "@polkadot/metadata": 1.10.0-beta.19
+    "@polkadot/types": 1.10.0-beta.19
     "@polkadot/util": ^2.8.0-beta.7
     "@polkadot/util-crypto": ^2.8.0-beta.7
     bn.js: ^5.1.1
     eventemitter3: ^4.0.0
     isomorphic-fetch: ^2.2.1
     websocket: ^1.0.31
-  checksum: 2/a24ad83f4514fef8f5f189235d86448241079b79c845177e4a50f2d21d1da4d72e77bdac0e730c326d65a1eab0a46f840aa0ea197902c8f4890db9910dfbb1df
+  checksum: 2/95e0028600a8118d7832a3cf2e9fc76b951bdbed070e9eb64c4b946c512a4584cda6edb6f80d9f786778d7c552cb8d2685ec9e0fd2cabdc812b603072abcd9a5
   languageName: node
   linkType: hard
 
@@ -3429,31 +3429,31 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@polkadot/types-known@npm:1.10.0-beta.18":
-  version: 1.10.0-beta.18
-  resolution: "@polkadot/types-known@npm:1.10.0-beta.18"
+"@polkadot/types-known@npm:1.10.0-beta.19":
+  version: 1.10.0-beta.19
+  resolution: "@polkadot/types-known@npm:1.10.0-beta.19"
   dependencies:
     "@babel/runtime": ^7.9.2
-    "@polkadot/types": 1.10.0-beta.18
+    "@polkadot/types": 1.10.0-beta.19
     "@polkadot/util": ^2.8.0-beta.7
     bn.js: ^5.1.1
-  checksum: 2/8f84781b7ed714a8359b79b5c7b7d7487057a58a299670a766ebda25a4fd7791a3e01fb02ccee3ab075ecfa5afc0693cc363d15d8939e1c937b5118ed8cb61c2
+  checksum: 2/53cbc5e47da6cc8cd23c5940e9607eea2aef5af2a5f118158f9412ef4ece04cbe586ae38f58376969a0f918c56736474cb7807a6086bcd93f3bc93f49884e2ba
   languageName: node
   linkType: hard
 
-"@polkadot/types@npm:^1.10.0-beta.18":
-  version: 1.10.0-beta.18
-  resolution: "@polkadot/types@npm:1.10.0-beta.18"
+"@polkadot/types@npm:^1.10.0-beta.19":
+  version: 1.10.0-beta.19
+  resolution: "@polkadot/types@npm:1.10.0-beta.19"
   dependencies:
     "@babel/runtime": ^7.9.2
-    "@polkadot/metadata": 1.10.0-beta.18
+    "@polkadot/metadata": 1.10.0-beta.19
     "@polkadot/util": ^2.8.0-beta.7
     "@polkadot/util-crypto": ^2.8.0-beta.7
     "@types/bn.js": ^4.11.6
     bn.js: ^5.1.1
     memoizee: ^0.4.14
     rxjs: ^6.5.5
-  checksum: 2/5ac362f8c2d34fff39c92199a2696a442e68f6f55bee7a30dfe4c2575a20568a56ba37e2a7ad2be6726fc83f0fee42c14f8293d363e166c21b5d87fab5c980e1
+  checksum: 2/cb90bf69b8294418846bcac596f546175c254ceb91697328fe269502fda1f15e160b41a19808c546db727be3357a09c207189dc60aced52624e5bce8675911e9
   languageName: node
   linkType: hard