Display names for society/treasury (#2326)

* Display names for society/treasury

* Consistent balance formats

* Adjust top-level sizing
This commit is contained in:
Jaco Greeff 2020-03-03 11:58:36 +01:00 committed by GitHub
parent 866e864d3c
commit 1c0dd98b03
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
8 changed files with 123 additions and 98 deletions

View File

@ -8,11 +8,11 @@
"packages/*"
],
"resolutions": {
"@polkadot/api": "^1.5.0-beta.22",
"@polkadot/api-contract": "^1.5.0-beta.22",
"@polkadot/api": "^1.5.0-beta.28",
"@polkadot/api-contract": "^1.5.0-beta.28",
"@polkadot/keyring": "^2.6.1",
"@polkadot/typegen": "^1.5.0-beta.22",
"@polkadot/types": "^1.5.0-beta.22",
"@polkadot/typegen": "^1.5.0-beta.28",
"@polkadot/types": "^1.5.0-beta.28",
"@polkadot/util": "^2.6.1",
"@polkadot/util-crypto": "^2.6.1",
"babel-core": "^7.0.0-bridge.0",
@ -39,7 +39,7 @@
"@babel/runtime": "^7.8.4",
"@polkadot/dev": "^0.50.16",
"@polkadot/ts": "^0.3.6",
"@polkadot/typegen": "^1.5.0-beta.22",
"@polkadot/typegen": "^1.5.0-beta.28",
"@types/bn.js": "^4.11.6",
"@types/chart.js": "^2.9.14",
"@types/file-saver": "^2.0.1",

View File

@ -12,6 +12,6 @@
"license": "Apache-2.0",
"dependencies": {
"@babel/runtime": "^7.8.4",
"@polkadot/api-contract": "^1.5.0-beta.22"
"@polkadot/api-contract": "^1.5.0-beta.28"
}
}

View File

@ -31,7 +31,7 @@
"homepage": "https://github.com/polkadot-js/ui/tree/master/packages/ui-reactive#readme",
"dependencies": {
"@babel/runtime": "^7.8.4",
"@polkadot/api": "^1.5.0-beta.22",
"@polkadot/api": "^1.5.0-beta.28",
"@polkadot/extension-dapp": "^0.22.0-beta.10",
"rxjs-compat": "^6.5.4"
}

View File

@ -8,8 +8,10 @@ import { AccountId, AccountIndex, Address, RegistrarInfo } from '@polkadot/types
import React, { useEffect, useMemo, useState } from 'react';
import styled from 'styled-components';
import registry from '@polkadot/react-api/typeRegistry';
import { useCall, useAccounts, useApi, useToggle } from '@polkadot/react-hooks';
import { Option } from '@polkadot/types';
import { stringToU8a } from '@polkadot/util';
import { useTranslation } from './translate';
import { getAddressName } from './util';
@ -28,15 +30,26 @@ interface Props extends BareProps {
value: AccountId | AccountIndex | Address | string | Uint8Array | null | undefined;
}
const KNOWN: [AccountId, string][] = [
[registry.createType('AccountId', stringToU8a('modlpy/socie'.padEnd(32, '\0'))), 'Society'],
[registry.createType('AccountId', stringToU8a('modlpy/trsry'.padEnd(32, '\0'))), 'Treasury']
];
const DISPLAY_KEYS = ['display', 'legal', 'email', 'web', 'twitter', 'riot'];
const nameCache: Map<string, [boolean, [React.ReactNode, React.ReactNode | null]]> = new Map();
function defaultOrAddr (defaultName = '', _address: AccountId | AccountIndex | Address | string | Uint8Array, _accountIndex?: AccountIndex | null): [[React.ReactNode, React.ReactNode | null], boolean, boolean] {
function defaultOrAddr (defaultName = '', _address: AccountId | AccountIndex | Address | string | Uint8Array, _accountIndex?: AccountIndex | null): [[React.ReactNode, React.ReactNode | null], boolean, boolean, boolean] {
const known = KNOWN.find(([known]) => known.eq(_address));
if (known) {
return [[known[1], null], false, false, true];
}
const accountId = _address.toString();
const accountIndex = (_accountIndex || '').toString();
if (!accountId) {
return [[defaultName, null], false, false];
return [[defaultName, null], false, false, false];
}
const [isAddressExtracted,, extracted] = getAddressName(accountId, null, defaultName);
@ -45,22 +58,30 @@ function defaultOrAddr (defaultName = '', _address: AccountId | AccountIndex | A
if (extracted && isAddressCached && !isAddressExtracted) {
// skip, default return
} else if (nameCached[0]) {
return [nameCached, false, isAddressCached];
return [nameCached, false, isAddressCached, false];
} else if (isAddressExtracted && accountIndex) {
nameCache.set(accountId, [true, [accountIndex, null]]);
return [[accountIndex, null], false, true];
return [[accountIndex, null], false, true, false];
}
return [[extracted, null], !isAddressExtracted, isAddressExtracted];
return [[extracted, null], !isAddressExtracted, isAddressExtracted, false];
}
function extractName (address: AccountId | string, accountIndex?: AccountIndex, defaultName?: string): React.ReactNode {
const [[displayFirst, displaySecond], isLocal, isAddress] = defaultOrAddr(defaultName, address, accountIndex);
const [[displayFirst, displaySecond], isLocal, isAddress, isSpecial] = defaultOrAddr(defaultName, address, accountIndex);
return (
<div className='via-identity'>
<span className={`name ${isLocal ? 'isLocal' : (isAddress ? 'isAddress' : '')}`}>{
{isSpecial && (
<Badge
info={<Icon name='simplybuilt' />}
isInline
isSmall
type='green'
/>
)}
<span className={`name ${(isLocal || isSpecial) ? 'isLocal' : (isAddress ? 'isAddress' : '')}`}>{
displaySecond
? <><span className='top'>{displayFirst}</span><span className='sub'>/{displaySecond}</span></>
: displayFirst

View File

@ -16,7 +16,7 @@ interface Props {
isSmall?: boolean;
isTooltip?: boolean;
onClick?: () => void;
type: 'counter' | 'online' | 'offline' | 'next' | 'runnerup' | 'selected' | 'green' | 'blue' | 'brown' | 'gray';
type: 'counter' | 'online' | 'offline' | 'next' | 'runnerup' | 'selected' | 'green' | 'blue' | 'brown' | 'gray' | 'purple';
}
let badgeId = 0;
@ -121,6 +121,10 @@ export default styled(Badge)`
background: green;
}
&.purple {
background: indigo;
}
& > * {
line-height: 22px;
overflow: hidden;

View File

@ -92,10 +92,10 @@ export default styled(CardSummary)`
}
> div {
font-size: 2.1rem;
font-size: 1.85rem;
font-weight: 100;
position: relative;
line-height: 2.1rem;
line-height: 1.85rem;
text-align: right;
> * {

View File

@ -21,29 +21,31 @@ interface Props extends BareProps {
// for million, 2 * 3-grouping + comma
const M_LENGTH = 6 + 1;
const K_LENGTH = 3 + 1;
function format (value: Compact<any> | BN | string, currency: string): React.ReactNode {
function format (value: Compact<any> | BN | string, currency: string, withSi?: boolean): React.ReactNode {
const [prefix, postfix] = formatBalance(value, { forceUnit: '-', withSi: false }).split('.');
const isShort = withSi && prefix.length >= K_LENGTH;
if (prefix.length > M_LENGTH) {
// TODO Format with balance-postfix
return formatBalance(value);
}
return <>{prefix}.<span className='balance-postfix'>{`000${postfix || ''}`.slice(-3)}</span> {currency}</>;
return <>{prefix}{!isShort && (<>.<span className='balance-postfix'>{`000${postfix || ''}`.slice(-3)}</span></>)} {currency}</>;
}
function formatSi (value: Compact<any> | BN | string): React.ReactNode {
const strValue = ((value as Compact<any>).toBn ? (value as Compact<any>).toBn() : value).toString();
const [prefix, postfix] = strValue === '0'
? ['0', '0']
: formatBalance(value, { withSi: false }).split('.');
const unit = strValue === '0'
? ''
: formatBalance.calcSi(strValue).value;
// function formatSi (value: Compact<any> | BN | string): React.ReactNode {
// const strValue = ((value as Compact<any>).toBn ? (value as Compact<any>).toBn() : value).toString();
// const [prefix, postfix] = strValue === '0'
// ? ['0', '0']
// : formatBalance(value, { withSi: false }).split('.');
// const unit = strValue === '0'
// ? ''
// : formatBalance.calcSi(strValue).value;
return <>{prefix}.<span className='balance-postfix'>{`000${postfix || ''}`.slice(-3)}</span>{unit === '-' ? '' : unit}</>;
}
// return <>{prefix}.<span className='balance-postfix'>{`000${postfix || ''}`.slice(-3)}</span>{unit === '-' ? '' : unit}</>;
// }
function FormatBalance ({ children, className, label, value, withSi }: Props): React.ReactElement<Props> {
const { t } = useTranslation();
@ -55,9 +57,7 @@ function FormatBalance ({ children, className, label, value, withSi }: Props): R
value
? value === 'all'
? t('all available')
: withSi
? formatSi(value)
: format(value, currency)
: format(value, currency, withSi)
: '-'
}{children}
</div>

132
yarn.lock
View File

@ -2755,56 +2755,56 @@ __metadata:
languageName: node
linkType: hard
"@polkadot/api-contract@npm:^1.5.0-beta.22":
version: 1.5.0-beta.22
resolution: "@polkadot/api-contract@npm:1.5.0-beta.22"
"@polkadot/api-contract@npm:^1.5.0-beta.28":
version: 1.5.0-beta.28
resolution: "@polkadot/api-contract@npm:1.5.0-beta.28"
dependencies:
"@babel/runtime": ^7.8.4
"@polkadot/api": 1.5.0-beta.22
"@polkadot/rpc-core": 1.5.0-beta.22
"@polkadot/types": 1.5.0-beta.22
"@polkadot/api": 1.5.0-beta.28
"@polkadot/rpc-core": 1.5.0-beta.28
"@polkadot/types": 1.5.0-beta.28
"@polkadot/util": ^2.6.1
bn.js: ^5.1.1
rxjs: ^6.5.4
checksum: 2/0f2a9f278cdceb02afd1eaec9611bf967863d8820e3eab7426469f843a163823e6e8cf1c20ba5d802ea70fa528c4fda454221cbe6315f4c5f560e93d5f937576
checksum: 2/4e4cbec876760349e2e3f22785e6773f7dc8331ef9401951065b064fa4e91044a09d752fe2fd1f6c3e13f14d65a928bc0acd9da8bbcc3a2331bf5b86e043e8c9
languageName: node
linkType: hard
"@polkadot/api-derive@npm:1.5.0-beta.22":
version: 1.5.0-beta.22
resolution: "@polkadot/api-derive@npm:1.5.0-beta.22"
"@polkadot/api-derive@npm:1.5.0-beta.28":
version: 1.5.0-beta.28
resolution: "@polkadot/api-derive@npm:1.5.0-beta.28"
dependencies:
"@babel/runtime": ^7.8.4
"@polkadot/api": 1.5.0-beta.22
"@polkadot/rpc-core": 1.5.0-beta.22
"@polkadot/rpc-provider": 1.5.0-beta.22
"@polkadot/types": 1.5.0-beta.22
"@polkadot/api": 1.5.0-beta.28
"@polkadot/rpc-core": 1.5.0-beta.28
"@polkadot/rpc-provider": 1.5.0-beta.28
"@polkadot/types": 1.5.0-beta.28
"@polkadot/util": ^2.6.1
"@polkadot/util-crypto": ^2.6.1
bn.js: ^5.1.1
memoizee: ^0.4.14
rxjs: ^6.5.4
checksum: 2/7acac15a5678454ef8554ba3874db99af7e660f054a730ccd700740008282baf12b9710a4ac7193409d74d525f791cd1d5973a840da10acc23abfa5cc6e868d8
checksum: 2/a8ac984656d95d0ca0ea52c4c07f0ed19442790c1fe9bebfba11aa5bb9c03d28d751507ad857c7cbd2171b9af7a8749d9fb81a3e39d92ee8d719eb5f546e2718
languageName: node
linkType: hard
"@polkadot/api@npm:^1.5.0-beta.22":
version: 1.5.0-beta.22
resolution: "@polkadot/api@npm:1.5.0-beta.22"
"@polkadot/api@npm:^1.5.0-beta.28":
version: 1.5.0-beta.28
resolution: "@polkadot/api@npm:1.5.0-beta.28"
dependencies:
"@babel/runtime": ^7.8.4
"@polkadot/api-derive": 1.5.0-beta.22
"@polkadot/api-derive": 1.5.0-beta.28
"@polkadot/keyring": ^2.6.1
"@polkadot/metadata": 1.5.0-beta.22
"@polkadot/rpc-core": 1.5.0-beta.22
"@polkadot/rpc-provider": 1.5.0-beta.22
"@polkadot/types": 1.5.0-beta.22
"@polkadot/metadata": 1.5.0-beta.28
"@polkadot/rpc-core": 1.5.0-beta.28
"@polkadot/rpc-provider": 1.5.0-beta.28
"@polkadot/types": 1.5.0-beta.28
"@polkadot/util": ^2.6.1
"@polkadot/util-crypto": ^2.6.1
bn.js: ^5.1.1
eventemitter3: ^4.0.0
rxjs: ^6.5.4
checksum: 2/8a5963f9b222aa73dcc468cee2e32c9ae15f73b603d70905d99d9ca34cc661ef759c546704c1beb901193f9fbe5789191e13f02475f10c16601d29d78ed57ef9
checksum: 2/b212c9d75dfa59afc9822f8c262a80343c93e0291883e738f332b39f3209fa720022f403ae3e246772b77ab6ef401365c095a662bc47f39857568e4c590c6f45
languageName: node
linkType: hard
@ -2854,7 +2854,7 @@ __metadata:
resolution: "@polkadot/app-contracts@workspace:packages/page-contracts"
dependencies:
"@babel/runtime": ^7.8.4
"@polkadot/api-contract": ^1.5.0-beta.22
"@polkadot/api-contract": ^1.5.0-beta.28
languageName: unknown
linkType: soft
@ -3165,14 +3165,14 @@ __metadata:
languageName: node
linkType: hard
"@polkadot/jsonrpc@npm:1.5.0-beta.22":
version: 1.5.0-beta.22
resolution: "@polkadot/jsonrpc@npm:1.5.0-beta.22"
"@polkadot/jsonrpc@npm:1.5.0-beta.28":
version: 1.5.0-beta.28
resolution: "@polkadot/jsonrpc@npm:1.5.0-beta.28"
dependencies:
"@babel/runtime": ^7.8.4
"@polkadot/types": 1.5.0-beta.22
"@polkadot/types": 1.5.0-beta.28
"@polkadot/util": ^2.6.1
checksum: 2/6f67fdb7fdfd93ffc38574c6daa95a0168085c7ed5fb9e9d363dbf77781dab50009922748921540737e3eaaac1baebfe52842fb72056dfaeb14ca58f97f07585
checksum: 2/d076d84f3a397465734016984073ab7c454b1852ff0fe9e7dd3e4535289c563ca1aeb78c5c3f50f13afd10ee9d4d45e4b54fd47f121f65b62a16ba5c6f25d748
languageName: node
linkType: hard
@ -3187,16 +3187,16 @@ __metadata:
languageName: node
linkType: hard
"@polkadot/metadata@npm:1.5.0-beta.22":
version: 1.5.0-beta.22
resolution: "@polkadot/metadata@npm:1.5.0-beta.22"
"@polkadot/metadata@npm:1.5.0-beta.28":
version: 1.5.0-beta.28
resolution: "@polkadot/metadata@npm:1.5.0-beta.28"
dependencies:
"@babel/runtime": ^7.8.4
"@polkadot/types": 1.5.0-beta.22
"@polkadot/types": 1.5.0-beta.28
"@polkadot/util": ^2.6.1
"@polkadot/util-crypto": ^2.6.1
bn.js: ^5.1.1
checksum: 2/a2b020bdfc4f628c5c871a566410be535e77f657e3c51446d708c391ffd88fe50687637f819c1c0490024015dbf889b573f7658028c0c45c644ef44e89ced35a
checksum: 2/1e266a25ec484705226ca5125fce8033bbfe73006dfe645ec9304d2ea00d0bcc40d87ec3d262896ce340d946011f7916f9a617a2f9518e70e7ae2cd2cc467d1f
languageName: node
linkType: hard
@ -3205,7 +3205,7 @@ __metadata:
resolution: "@polkadot/react-api@workspace:packages/react-api"
dependencies:
"@babel/runtime": ^7.8.4
"@polkadot/api": ^1.5.0-beta.22
"@polkadot/api": ^1.5.0-beta.28
"@polkadot/extension-dapp": ^0.22.0-beta.10
rxjs-compat: ^6.5.4
languageName: unknown
@ -3316,37 +3316,37 @@ __metadata:
languageName: unknown
linkType: soft
"@polkadot/rpc-core@npm:1.5.0-beta.22":
version: 1.5.0-beta.22
resolution: "@polkadot/rpc-core@npm:1.5.0-beta.22"
"@polkadot/rpc-core@npm:1.5.0-beta.28":
version: 1.5.0-beta.28
resolution: "@polkadot/rpc-core@npm:1.5.0-beta.28"
dependencies:
"@babel/runtime": ^7.8.4
"@polkadot/jsonrpc": 1.5.0-beta.22
"@polkadot/metadata": 1.5.0-beta.22
"@polkadot/rpc-provider": 1.5.0-beta.22
"@polkadot/types": 1.5.0-beta.22
"@polkadot/jsonrpc": 1.5.0-beta.28
"@polkadot/metadata": 1.5.0-beta.28
"@polkadot/rpc-provider": 1.5.0-beta.28
"@polkadot/types": 1.5.0-beta.28
"@polkadot/util": ^2.6.1
memoizee: ^0.4.14
rxjs: ^6.5.4
checksum: 2/8c938661731d30678043609814caa235456d940b3fbd651aafaf90d8ccd92f875a00db40c5ad2fbf19e8305ff186f83bdaf306bfe26cab13199e4ae1de4921d9
checksum: 2/62d31b09393e37fd65fa0769fc3c88fc8bb4727494ea3f707f2df29a2d767dc3e3e0c0ac8d1abf3d75d879767eb13f941e8a25e71706ebfa8ce90b9ee8c8c8b4
languageName: node
linkType: hard
"@polkadot/rpc-provider@npm:1.5.0-beta.22":
version: 1.5.0-beta.22
resolution: "@polkadot/rpc-provider@npm:1.5.0-beta.22"
"@polkadot/rpc-provider@npm:1.5.0-beta.28":
version: 1.5.0-beta.28
resolution: "@polkadot/rpc-provider@npm:1.5.0-beta.28"
dependencies:
"@babel/runtime": ^7.8.4
"@polkadot/jsonrpc": 1.5.0-beta.22
"@polkadot/metadata": 1.5.0-beta.22
"@polkadot/types": 1.5.0-beta.22
"@polkadot/jsonrpc": 1.5.0-beta.28
"@polkadot/metadata": 1.5.0-beta.28
"@polkadot/types": 1.5.0-beta.28
"@polkadot/util": ^2.6.1
"@polkadot/util-crypto": ^2.6.1
bn.js: ^5.1.1
eventemitter3: ^4.0.0
isomorphic-fetch: ^2.2.1
websocket: ^1.0.31
checksum: 2/9f25e66d76fb808b85bb33d8dc74cf4b34efa30d148c6cbf6c9f26e0bc7f90099acdd71d056af0790cfba3ca2067875e6c66d0908c4828aafddcaff519194193
checksum: 2/0bcf3834e6adf001ef5035d63638cc04185ec6d87f18d1998e71555242509d1e17653847ee2101e54cdf3ac02fe7607c181a58defe97f971979139124cb22ad8
languageName: node
linkType: hard
@ -3359,18 +3359,18 @@ __metadata:
languageName: node
linkType: hard
"@polkadot/typegen@npm:^1.5.0-beta.22":
version: 1.5.0-beta.22
resolution: "@polkadot/typegen@npm:1.5.0-beta.22"
"@polkadot/typegen@npm:^1.5.0-beta.28":
version: 1.5.0-beta.28
resolution: "@polkadot/typegen@npm:1.5.0-beta.28"
dependencies:
"@babel/core": ^7.8.3
"@babel/register": ^7.8.3
"@babel/runtime": ^7.8.4
"@polkadot/api": 1.5.0-beta.22
"@polkadot/jsonrpc": 1.5.0-beta.22
"@polkadot/metadata": 1.5.0-beta.22
"@polkadot/rpc-provider": 1.5.0-beta.22
"@polkadot/types": 1.5.0-beta.22
"@polkadot/api": 1.5.0-beta.28
"@polkadot/jsonrpc": 1.5.0-beta.28
"@polkadot/metadata": 1.5.0-beta.28
"@polkadot/rpc-provider": 1.5.0-beta.28
"@polkadot/types": 1.5.0-beta.28
"@polkadot/util": ^2.6.1
websocket: ^1.0.31
yargs: ^15.1.0
@ -3380,23 +3380,23 @@ __metadata:
polkadot-types-from-defs: scripts/polkadot-types-from-defs.js
polkadot-types-internal-interfaces: scripts/polkadot-types-internal-interfaces.js
polkadot-types-internal-metadata: scripts/polkadot-types-internal-metadata.js
checksum: 2/9654a0818924ee323d71eaa98cf16d9487dd91bbfd6a37180e93cca7588eb57d9b797126557f9df1438936519a27e4e54e8b2163ba151438fb6c1e7855de756b
checksum: 2/94d7cc51136998034dbb6fba6084da71b50f8739ca017a74db31d51541db1690439b21dea236cc397d2674dcc946a85e1462d31b8aba7b51c0f5a8a244a5dc59
languageName: node
linkType: hard
"@polkadot/types@npm:^1.5.0-beta.22":
version: 1.5.0-beta.22
resolution: "@polkadot/types@npm:1.5.0-beta.22"
"@polkadot/types@npm:^1.5.0-beta.28":
version: 1.5.0-beta.28
resolution: "@polkadot/types@npm:1.5.0-beta.28"
dependencies:
"@babel/runtime": ^7.8.4
"@polkadot/metadata": 1.5.0-beta.22
"@polkadot/metadata": 1.5.0-beta.28
"@polkadot/util": ^2.6.1
"@polkadot/util-crypto": ^2.6.1
"@types/bn.js": ^4.11.6
bn.js: ^5.1.1
memoizee: ^0.4.14
rxjs: ^6.5.4
checksum: 2/166bb3997fdbd0c9e84010180a5b363613dabe4bdafaddcc304001db2f80284daa7bfa232dcbe363f8c623af41eddf6ebe1c637e8605ba792022e596d1b7a305
checksum: 2/b61561bb63d22833abc4dcb65526eab46f39c3c30e45499e25fd59886c0a4107ee843ca6333ddb98b44e617ee409db1db9919aaa5d3067130aec5d1cfce14d94
languageName: node
linkType: hard
@ -17876,7 +17876,7 @@ __metadata:
"@babel/runtime": ^7.8.4
"@polkadot/dev": ^0.50.16
"@polkadot/ts": ^0.3.6
"@polkadot/typegen": ^1.5.0-beta.22
"@polkadot/typegen": ^1.5.0-beta.28
"@types/bn.js": ^4.11.6
"@types/chart.js": ^2.9.14
"@types/file-saver": ^2.0.1