From 1c0dd98b03a46291bd74889cb3dde6650d8d9f6f Mon Sep 17 00:00:00 2001 From: Jaco Greeff Date: Tue, 3 Mar 2020 11:58:36 +0100 Subject: [PATCH] Display names for society/treasury (#2326) * Display names for society/treasury * Consistent balance formats * Adjust top-level sizing --- package.json | 10 +- packages/page-contracts/package.json | 2 +- packages/react-api/package.json | 2 +- packages/react-components/src/AccountName.tsx | 35 ++++- packages/react-components/src/Badge.tsx | 6 +- packages/react-components/src/CardSummary.tsx | 4 +- packages/react-query/src/FormatBalance.tsx | 30 ++-- yarn.lock | 132 +++++++++--------- 8 files changed, 123 insertions(+), 98 deletions(-) diff --git a/package.json b/package.json index f6cbbecd83..93abdc7da3 100644 --- a/package.json +++ b/package.json @@ -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", diff --git a/packages/page-contracts/package.json b/packages/page-contracts/package.json index 51f46562a0..10e5796291 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.8.4", - "@polkadot/api-contract": "^1.5.0-beta.22" + "@polkadot/api-contract": "^1.5.0-beta.28" } } diff --git a/packages/react-api/package.json b/packages/react-api/package.json index 356113431b..7bef28c260 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.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" } diff --git a/packages/react-components/src/AccountName.tsx b/packages/react-components/src/AccountName.tsx index 27d636c3d2..3d21b22b8c 100644 --- a/packages/react-components/src/AccountName.tsx +++ b/packages/react-components/src/AccountName.tsx @@ -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 = 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 (
- { + {isSpecial && ( + } + isInline + isSmall + type='green' + /> + )} + { displaySecond ? <>{displayFirst}/{displaySecond} : displayFirst diff --git a/packages/react-components/src/Badge.tsx b/packages/react-components/src/Badge.tsx index fe4dc0b9c4..79c0d88b01 100644 --- a/packages/react-components/src/Badge.tsx +++ b/packages/react-components/src/Badge.tsx @@ -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; diff --git a/packages/react-components/src/CardSummary.tsx b/packages/react-components/src/CardSummary.tsx index bcb39162c8..274e9f9158 100644 --- a/packages/react-components/src/CardSummary.tsx +++ b/packages/react-components/src/CardSummary.tsx @@ -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; > * { diff --git a/packages/react-query/src/FormatBalance.tsx b/packages/react-query/src/FormatBalance.tsx index f091082e76..75e235d3ae 100644 --- a/packages/react-query/src/FormatBalance.tsx +++ b/packages/react-query/src/FormatBalance.tsx @@ -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 | BN | string, currency: string): React.ReactNode { +function format (value: Compact | 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}.{`000${postfix || ''}`.slice(-3)} {currency}; + return <>{prefix}{!isShort && (<>.{`000${postfix || ''}`.slice(-3)})} {currency}; } -function formatSi (value: Compact | BN | string): React.ReactNode { - const strValue = ((value as Compact).toBn ? (value as Compact).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 | BN | string): React.ReactNode { +// const strValue = ((value as Compact).toBn ? (value as Compact).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}.{`000${postfix || ''}`.slice(-3)}{unit === '-' ? '' : unit}; -} +// return <>{prefix}.{`000${postfix || ''}`.slice(-3)}{unit === '-' ? '' : unit}; +// } function FormatBalance ({ children, className, label, value, withSi }: Props): React.ReactElement { 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}
diff --git a/yarn.lock b/yarn.lock index 4996354a3d..6ae665acfa 100644 --- a/yarn.lock +++ b/yarn.lock @@ -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