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...
This commit is contained in:
Jaco Greeff
GitHub
parent
658ee7f35b
commit
c0f6e84e0d
@ -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",
|
||||
|
||||
@ -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"
|
||||
}
|
||||
}
|
||||
|
||||
@ -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}
|
||||
|
||||
@ -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;
|
||||
}
|
||||
}
|
||||
`);
|
||||
|
||||
@ -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"
|
||||
}
|
||||
|
||||
@ -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>
|
||||
|
||||
112
yarn.lock
112
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
|
||||
|
||||
|
||||
Loading…
Reference in New Issue
Block a user