From a4ce84339e349cf0cef798177684aa45bee731a1 Mon Sep 17 00:00:00 2001 From: Jaco Greeff Date: Fri, 20 Dec 2019 12:44:34 +0100 Subject: [PATCH] Cleanup display from identity (#2081) * Cleanup display from identity * Bump API --- package.json | 6 +- packages/app-123code/src/AccountSelector.tsx | 4 +- packages/app-contracts/package.json | 2 +- packages/react-api/package.json | 2 +- .../src/AccountIndex.tsx | 15 ++- packages/react-components/src/AccountName.tsx | 22 +++-- packages/react-components/src/AddressRow.tsx | 13 ++- .../react-components/src/AddressSmall.tsx | 2 +- packages/react-components/src/Row.tsx | 4 - packages/react-components/src/index.tsx | 1 + packages/react-query/src/index.ts | 1 - yarn.lock | 92 +++++++++---------- 12 files changed, 86 insertions(+), 78 deletions(-) rename packages/{react-query => react-components}/src/AccountIndex.tsx (68%) diff --git a/package.json b/package.json index 5d5747505c..bcc5088862 100644 --- a/package.json +++ b/package.json @@ -10,10 +10,10 @@ "packages/*" ], "resolutions": { - "@polkadot/api": "^0.100.0-beta.12", - "@polkadot/api-contract": "^0.100.0-beta.12", + "@polkadot/api": "^0.100.0-beta.14", + "@polkadot/api-contract": "^0.100.0-beta.14", "@polkadot/keyring": "^1.7.1", - "@polkadot/types": "^0.100.0-beta.12", + "@polkadot/types": "^0.100.0-beta.14", "@polkadot/util": "^1.7.1", "@polkadot/util-crypto": "^1.7.1", "babel-core": "^7.0.0-bridge.0", diff --git a/packages/app-123code/src/AccountSelector.tsx b/packages/app-123code/src/AccountSelector.tsx index b20e6b7e5c..4f17880371 100644 --- a/packages/app-123code/src/AccountSelector.tsx +++ b/packages/app-123code/src/AccountSelector.tsx @@ -4,8 +4,8 @@ import React, { useEffect, useState } from 'react'; import styled from 'styled-components'; -import { Bubble, InputAddress } from '@polkadot/react-components'; -import { AccountIndex, Balance, Nonce } from '@polkadot/react-query'; +import { AccountIndex, Bubble, InputAddress } from '@polkadot/react-components'; +import { Balance, Nonce } from '@polkadot/react-query'; interface Props { className?: string; diff --git a/packages/app-contracts/package.json b/packages/app-contracts/package.json index aea0be20e0..83ae74fba7 100644 --- a/packages/app-contracts/package.json +++ b/packages/app-contracts/package.json @@ -11,6 +11,6 @@ "license": "Apache-2.0", "dependencies": { "@babel/runtime": "^7.7.5", - "@polkadot/api-contract": "^0.100.0-beta.12" + "@polkadot/api-contract": "^0.100.0-beta.14" } } diff --git a/packages/react-api/package.json b/packages/react-api/package.json index e0a7403d45..c0c79df6a9 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.7.6", - "@polkadot/api": "^0.100.0-beta.12", + "@polkadot/api": "^0.100.0-beta.14", "@polkadot/extension-dapp": "^0.14.1", "edgeware-node-types": "^1.0.10", "rxjs-compat": "^6.5.3" diff --git a/packages/react-query/src/AccountIndex.tsx b/packages/react-components/src/AccountIndex.tsx similarity index 68% rename from packages/react-query/src/AccountIndex.tsx rename to packages/react-components/src/AccountIndex.tsx index a2a61c305b..2bf6c95532 100644 --- a/packages/react-query/src/AccountIndex.tsx +++ b/packages/react-components/src/AccountIndex.tsx @@ -1,4 +1,4 @@ -// Copyright 2017-2019 @polkadot/react-query authors & contributors +// Copyright 2017-2019 @polkadot/react-components authors & contributors // This software may be modified and distributed under the terms // of the Apache-2.0 license. See the LICENSE file for details. @@ -7,6 +7,7 @@ import { DeriveAccountInfo } from '@polkadot/api-derive/types'; import { BareProps } from '@polkadot/react-api/types'; import React, { useState, useEffect } from 'react'; +import styled from 'styled-components'; import { useApi, useCall } from '@polkadot/react-hooks'; interface Props extends BareProps { @@ -16,7 +17,7 @@ interface Props extends BareProps { value?: string | AccountId | Address | null | Uint8Array; } -export default function AccountIndexDisplay ({ children, className, defaultValue, label, style, value }: Props): React.ReactElement { +function AccountIndex ({ children, className, defaultValue, label, style, value }: Props): React.ReactElement { const { api } = useApi(); const info = useCall(api.derive.accounts.info as any, [value]); const [accountIndex, setAccountIndex] = useState(null); @@ -31,10 +32,16 @@ export default function AccountIndexDisplay ({ children, className, defaultValue return (
- {label || ''}{accountIndex || defaultValue || '-'}{children} + {label || ''}
{accountIndex || defaultValue || '-'}
{children}
); } + +export default styled(AccountIndex)` + .account-index { + font-family: monospace; + } +`; diff --git a/packages/react-components/src/AccountName.tsx b/packages/react-components/src/AccountName.tsx index aa16800cfa..4b104045ac 100644 --- a/packages/react-components/src/AccountName.tsx +++ b/packages/react-components/src/AccountName.tsx @@ -74,7 +74,7 @@ function AccountName ({ children, className, defaultName, label, onClick, overri return (
-
{name}
+
{name}
); }; @@ -162,6 +162,10 @@ function AccountName ({ children, className, defaultName, label, onClick, overri ); + const displayName = isGood + ? identity.display + : identity.display.replace(/[^\x20-\x7E]/g, ''); + const name = (
-
{identity.display.toUpperCase()}
+
{displayName.toUpperCase()}
); - nameCache.set(address, name); + nameCache.set(address, displayName); setName((): React.ReactNode => name); } else { setName((): React.ReactNode => _extractName(accountId, accountIndex)); @@ -273,15 +277,17 @@ export default styled(AccountName)` .name { display: inline-block; + font-weight: normal !important; filter: grayscale(100%); + opacity: 0.75; - &.other { - font-weight: 100; - opacity: 0.6; + &.isAddress { + font-family: monospace; } - &:not(.other) { - font-weight: normal; + &.isGood, + &.isLocal { + opacity: 1; } } diff --git a/packages/react-components/src/AddressRow.tsx b/packages/react-components/src/AddressRow.tsx index 4102a2007e..26722e157f 100644 --- a/packages/react-components/src/AddressRow.tsx +++ b/packages/react-components/src/AddressRow.tsx @@ -17,7 +17,6 @@ import keyring from '@polkadot/ui-keyring'; import AddressInfo, { BalanceActiveType, ValidatorPrefsType } from './AddressInfo'; import { classes, getAddressName, getAddressTags, toShortAddress } from './util'; -import CopyButton from './CopyButton'; import IdentityIcon, { getIdentityTheme } from './IdentityIcon'; import Row, { RowProps, RowState as State, styles } from './Row'; import translate from './translate'; @@ -160,12 +159,7 @@ class AddressRow extends Row { return (
- - {toShortAddress(address)} - + {toShortAddress(address)}
); } @@ -293,6 +287,11 @@ export default withMulti( .ui--Row-placeholder { opacity: 0.5; } + + .ui--Row-accountId, + .ui--Row-accountIndex { + font-family: monospace; + } `, translate, withCalls( diff --git a/packages/react-components/src/AddressSmall.tsx b/packages/react-components/src/AddressSmall.tsx index 91af0f51c5..1cfe1c4ea1 100644 --- a/packages/react-components/src/AddressSmall.tsx +++ b/packages/react-components/src/AddressSmall.tsx @@ -6,8 +6,8 @@ import { Address, AccountId } from '@polkadot/types/interfaces'; import React from 'react'; import styled from 'styled-components'; -import { AccountIndex } from '@polkadot/react-query'; +import AccountIndex from './AccountIndex'; import AccountName from './AccountName'; import IdentityIcon from './IdentityIcon'; diff --git a/packages/react-components/src/Row.tsx b/packages/react-components/src/Row.tsx index 95403b204d..8572c97b8e 100644 --- a/packages/react-components/src/Row.tsx +++ b/packages/react-components/src/Row.tsx @@ -68,10 +68,6 @@ export const styles = ` margin-bottom: 0.25rem; } - .ui--Row-accountIndex { - font-style: italic; - } - .ui--Row-balances { display: flex; .column { diff --git a/packages/react-components/src/index.tsx b/packages/react-components/src/index.tsx index 99c6828636..078b3213a5 100644 --- a/packages/react-components/src/index.tsx +++ b/packages/react-components/src/index.tsx @@ -2,6 +2,7 @@ // This software may be modified and distributed under the terms // of the Apache-2.0 license. See the LICENSE file for details. +export { default as AccountIndex } from './AccountIndex'; export { default as AccountName } from './AccountName'; export { default as ActionItem } from './ActionItem'; export { default as AddressInfo } from './AddressInfo'; diff --git a/packages/react-query/src/index.ts b/packages/react-query/src/index.ts index cd8e484c58..5c09043267 100644 --- a/packages/react-query/src/index.ts +++ b/packages/react-query/src/index.ts @@ -2,7 +2,6 @@ // This software may be modified and distributed under the terms // of the Apache-2.0 license. See the LICENSE file for details. -export { default as AccountIndex } from './AccountIndex'; export { default as Available } from './Available'; export { default as Balance } from './Balance'; export { default as BalanceFree } from './BalanceFree'; diff --git a/yarn.lock b/yarn.lock index f2955cb2ab..ed50c5f4dc 100644 --- a/yarn.lock +++ b/yarn.lock @@ -2044,35 +2044,35 @@ dependencies: "@types/node" ">= 8" -"@polkadot/api-contract@^0.100.0-beta.12": - version "0.100.0-beta.12" - resolved "https://registry.npmjs.org/@polkadot/api-contract/-/api-contract-0.100.0-beta.12.tgz#d391aaa137322eeb218303eb0ef97c8be03a1523" - integrity sha512-Q9ENxTrI5y63hPmH+cbbC/i381OqzA16wiseTCSNfhTC9P7wJ609rYJ4eJqRKAtgtc53Lwa/0frunGd4pgRpsw== +"@polkadot/api-contract@^0.100.0-beta.14": + version "0.100.0-beta.14" + resolved "https://registry.npmjs.org/@polkadot/api-contract/-/api-contract-0.100.0-beta.14.tgz#a1a608cebb43ef0ac993038064c3f31a64c4de27" + integrity sha512-A0PA8sa8mni5mlqFYwB4zB3GoXPMT71q3WSY1yM0biRhA/nKU0rO6BGjwM04ABaMzwOtP99GJ4TSq5AN9lyVBw== dependencies: "@babel/runtime" "^7.7.6" - "@polkadot/types" "^0.100.0-beta.12" + "@polkadot/types" "^0.100.0-beta.14" -"@polkadot/api-derive@^0.100.0-beta.12": - version "0.100.0-beta.12" - resolved "https://registry.npmjs.org/@polkadot/api-derive/-/api-derive-0.100.0-beta.12.tgz#ffc934acc662cf6cb92589999fb25e2b3e1449ce" - integrity sha512-/xUc3y5hzLUJWQ5E4ZnYTd+V9fNDPEn0K/Sj0s3Q1n4586QmkgMJQAA7doOwIBdRlZpedWfwvyKQ7V2/892U5Q== +"@polkadot/api-derive@^0.100.0-beta.14": + version "0.100.0-beta.14" + resolved "https://registry.npmjs.org/@polkadot/api-derive/-/api-derive-0.100.0-beta.14.tgz#4829f3a512a63e68346a3c9337c646e8a183c802" + integrity sha512-Fuz9ULI0ciqbEdBgIFjKbXfuHH/oKaGnSBD7bgdbzy1GfCoH+1cuHGcAsTdnikG8Xs/2hmzZ54oBGLudRqLBpQ== dependencies: "@babel/runtime" "^7.7.6" - "@polkadot/api" "^0.100.0-beta.12" - "@polkadot/types" "^0.100.0-beta.12" + "@polkadot/api" "^0.100.0-beta.14" + "@polkadot/types" "^0.100.0-beta.14" -"@polkadot/api@^0.100.0-beta.12": - version "0.100.0-beta.12" - resolved "https://registry.npmjs.org/@polkadot/api/-/api-0.100.0-beta.12.tgz#c89bca47ca9c12d098acc648e73d0230987dc133" - integrity sha512-bf2Tz21ak47Ag3HjYxTOIVs9livHUz/O8+wmUt0FKZNj/edYrDS75gqLuDo5290ACSJ57epSN1ZuQDBrkZH4ow== +"@polkadot/api@^0.100.0-beta.14": + version "0.100.0-beta.14" + resolved "https://registry.npmjs.org/@polkadot/api/-/api-0.100.0-beta.14.tgz#fd6e04ebeca946af6479436860c1557769db2004" + integrity sha512-fNhRyw0RLL2we8JCbrl5oErfcnK6OqgucveyJmekqkE9FXzkHuwiYwnpeCmyqCZchHJqSS5/XhZRURE1GkgAEg== dependencies: "@babel/runtime" "^7.7.6" - "@polkadot/api-derive" "^0.100.0-beta.12" + "@polkadot/api-derive" "^0.100.0-beta.14" "@polkadot/keyring" "^1.7.1" - "@polkadot/metadata" "^0.100.0-beta.12" - "@polkadot/rpc-core" "^0.100.0-beta.12" - "@polkadot/rpc-provider" "^0.100.0-beta.12" - "@polkadot/types" "^0.100.0-beta.12" + "@polkadot/metadata" "^0.100.0-beta.14" + "@polkadot/rpc-core" "^0.100.0-beta.14" + "@polkadot/rpc-provider" "^0.100.0-beta.14" + "@polkadot/types" "^0.100.0-beta.14" "@polkadot/util-crypto" "^1.7.1" "@polkadot/dev-react@^0.32.13": @@ -2177,10 +2177,10 @@ dependencies: "@babel/runtime" "^7.7.5" -"@polkadot/jsonrpc@^0.100.0-beta.12": - version "0.100.0-beta.12" - resolved "https://registry.npmjs.org/@polkadot/jsonrpc/-/jsonrpc-0.100.0-beta.12.tgz#d48c1fb4c8ef3df9316d1e4b871c23e6644bc36c" - integrity sha512-tH/sOllaqgleuto4rcl7Y8JUR1KCGyBtjG9LlIa/g0JsPZQ9VL8tPVBq7oNshw2Vc3VReQKeirENsp3GDefhEw== +"@polkadot/jsonrpc@^0.100.0-beta.14": + version "0.100.0-beta.14" + resolved "https://registry.npmjs.org/@polkadot/jsonrpc/-/jsonrpc-0.100.0-beta.14.tgz#283602b64692eb57559000d2b2477b33cceaf4c0" + integrity sha512-JEAMuG0SqAcE1qJpnkZa54MAz8so0mDYfanwIyWTtTW3X03y3cF4wrIajx6v8qQxsyg12QEbymYwnNhGzkoaHA== dependencies: "@babel/runtime" "^7.7.6" @@ -2193,13 +2193,13 @@ "@polkadot/util" "^1.7.1" "@polkadot/util-crypto" "^1.7.1" -"@polkadot/metadata@^0.100.0-beta.12": - version "0.100.0-beta.12" - resolved "https://registry.npmjs.org/@polkadot/metadata/-/metadata-0.100.0-beta.12.tgz#d040e02e84933ffb081506cd4ad4425810ef88b4" - integrity sha512-qpur+29l9vD8Zj0xQ5a/4OkCgRxf/1GK2xKxxm+v56JW7MTKTLijCFMYXgXoWlWwAtwGAQ+9FcIbMLRTDFuxcw== +"@polkadot/metadata@^0.100.0-beta.14": + version "0.100.0-beta.14" + resolved "https://registry.npmjs.org/@polkadot/metadata/-/metadata-0.100.0-beta.14.tgz#10423a1d37c242f1bc09ab07b7bd2d0e10fce0f6" + integrity sha512-98a+nX7268XTU3q1w4Edg/uQ9UeUMWUGGGb0BDvnna4CECE3aYJK3xMgnXCI5YhAxhaTwFDfiQiJel09rsbEiQ== dependencies: "@babel/runtime" "^7.7.6" - "@polkadot/types" "^0.100.0-beta.12" + "@polkadot/types" "^0.100.0-beta.14" "@polkadot/util" "^1.7.1" "@polkadot/util-crypto" "^1.7.1" @@ -2228,25 +2228,25 @@ qrcode-generator "^1.4.4" react-qr-reader "^2.2.1" -"@polkadot/rpc-core@^0.100.0-beta.12": - version "0.100.0-beta.12" - resolved "https://registry.npmjs.org/@polkadot/rpc-core/-/rpc-core-0.100.0-beta.12.tgz#6056abf3495416742e8171e29fa9dbc71946991f" - integrity sha512-IvPNtyOTGbSxSz2N/g/hpeOqGcwU2KUDorsKAZiNBKiyEVxOpQsPRi+fkyikJ3UNc2cttF00i1nzl5TJ2LdiDg== +"@polkadot/rpc-core@^0.100.0-beta.14": + version "0.100.0-beta.14" + resolved "https://registry.npmjs.org/@polkadot/rpc-core/-/rpc-core-0.100.0-beta.14.tgz#113019e4614782603313dbb7d9f1d9fe3ee8e7d4" + integrity sha512-zZjNCxOwnX9oEadWfm8Xfz8iV42qg++ee6Wm4NfIOVwdbB/KlwNKkYvq+EpQe9OqcYKax4DsYXBTSSE1Fm1uwQ== dependencies: "@babel/runtime" "^7.7.6" - "@polkadot/jsonrpc" "^0.100.0-beta.12" - "@polkadot/rpc-provider" "^0.100.0-beta.12" - "@polkadot/types" "^0.100.0-beta.12" + "@polkadot/jsonrpc" "^0.100.0-beta.14" + "@polkadot/rpc-provider" "^0.100.0-beta.14" + "@polkadot/types" "^0.100.0-beta.14" "@polkadot/util" "^1.7.1" rxjs "^6.5.3" -"@polkadot/rpc-provider@^0.100.0-beta.12": - version "0.100.0-beta.12" - resolved "https://registry.npmjs.org/@polkadot/rpc-provider/-/rpc-provider-0.100.0-beta.12.tgz#a55d1a9b73d832f296b249210d7f7390ff20e44c" - integrity sha512-171aMdg9nbzABJwFCugYDkfe6TCbbfkTSo5Ax+69SpCwOxi71bIQcpE5hROOiRdPrAypOD0iOI7m80CNsCNjjQ== +"@polkadot/rpc-provider@^0.100.0-beta.14": + version "0.100.0-beta.14" + resolved "https://registry.npmjs.org/@polkadot/rpc-provider/-/rpc-provider-0.100.0-beta.14.tgz#928364095a44cd5cd1bf3af3626c338e4e4f311e" + integrity sha512-qH6OIdGesvXtTYZZqjJ2lm805wuZuZOesd3UZ6kgDdXKMqPnyFZ97ubq5kByv8QaDM4Zqbk1e140MSJMYKIH0A== dependencies: "@babel/runtime" "^7.7.6" - "@polkadot/metadata" "^0.100.0-beta.12" + "@polkadot/metadata" "^0.100.0-beta.14" "@polkadot/util" "^1.7.1" "@polkadot/util-crypto" "^1.7.1" eventemitter3 "^4.0.0" @@ -2260,13 +2260,13 @@ dependencies: "@types/chrome" "^0.0.91" -"@polkadot/types@^0.100.0-beta.12": - version "0.100.0-beta.12" - resolved "https://registry.npmjs.org/@polkadot/types/-/types-0.100.0-beta.12.tgz#5fa0501be0655cf59ee0bc31cded5ae12826d78e" - integrity sha512-FC+rfjX3+cyESwTMZsOsjnrGzhzByrA7kmBFF3Qd0MJnlZPyYMh/7bqdoGSumSlDB6pc82v8yRgmBOMnYq9qsQ== +"@polkadot/types@^0.100.0-beta.14": + version "0.100.0-beta.14" + resolved "https://registry.npmjs.org/@polkadot/types/-/types-0.100.0-beta.14.tgz#65a511b11421a0d8ccb8e0c53e813a21cd227ef9" + integrity sha512-Ud8sZxUCja0Kpjgk8/JwezlNIz7VSoSyejG++2v+OHjpTq8AlLrL+0ULJfigvfxxsY4ysCeeegaBjYJFoXJ+vw== dependencies: "@babel/runtime" "^7.7.6" - "@polkadot/metadata" "^0.100.0-beta.12" + "@polkadot/metadata" "^0.100.0-beta.14" "@polkadot/util" "^1.7.1" "@polkadot/util-crypto" "^1.7.1" "@types/memoizee" "^0.4.3"