Display all identity info on hover (#2077)
* Display all identity info on hover * Bump API * displayName linting
This commit is contained in:
Jaco Greeff
GitHub
parent
8ab6153e7c
commit
dbad609e27
@ -10,10 +10,10 @@
|
||||
"packages/*"
|
||||
],
|
||||
"resolutions": {
|
||||
"@polkadot/api": "^0.100.0-beta.9",
|
||||
"@polkadot/api-contract": "^0.100.0-beta.9",
|
||||
"@polkadot/api": "^0.100.0-beta.11",
|
||||
"@polkadot/api-contract": "^0.100.0-beta.11",
|
||||
"@polkadot/keyring": "^1.7.1",
|
||||
"@polkadot/types": "^0.100.0-beta.9",
|
||||
"@polkadot/types": "^0.100.0-beta.11",
|
||||
"@polkadot/util": "^1.7.1",
|
||||
"@polkadot/util-crypto": "^1.7.1",
|
||||
"babel-core": "^7.0.0-bridge.0",
|
||||
|
||||
@ -11,7 +11,6 @@
|
||||
"license": "Apache-2.0",
|
||||
"dependencies": {
|
||||
"@babel/runtime": "^7.7.5",
|
||||
"@polkadot/api-contract": "^0.100.0-beta.9",
|
||||
"@polkadot/react-components": "^0.39.0-beta.19"
|
||||
"@polkadot/api-contract": "^0.100.0-beta.11"
|
||||
}
|
||||
}
|
||||
|
||||
@ -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.9",
|
||||
"@polkadot/api": "^0.100.0-beta.11",
|
||||
"@polkadot/extension-dapp": "^0.14.1",
|
||||
"edgeware-node-types": "^1.0.10",
|
||||
"rxjs-compat": "^6.5.3"
|
||||
|
||||
@ -37,7 +37,7 @@ function AddressToggle ({ address, className, filter, onChange, value }: Props):
|
||||
const { accountId, accountIndex, identity, nickname } = info;
|
||||
const filterLower = filter.toLowerCase();
|
||||
|
||||
if (identity.displayName?.toLowerCase().includes(filterLower) || accountId?.toString().includes(filter) || accountIndex?.toString().includes(filter) || nickname?.toLowerCase().includes(filterLower)) {
|
||||
if (identity.display?.toLowerCase().includes(filterLower) || accountId?.toString().includes(filter) || accountIndex?.toString().includes(filter) || nickname?.toLowerCase().includes(filterLower)) {
|
||||
isFiltered = false;
|
||||
}
|
||||
}
|
||||
|
||||
@ -7,6 +7,7 @@ import { BareProps } from './types';
|
||||
import React, { useEffect, useState } from 'react';
|
||||
import ReactDOM from 'react-dom';
|
||||
import ReactTooltip from 'react-tooltip';
|
||||
import styled from 'styled-components';
|
||||
|
||||
import { classes } from './util';
|
||||
|
||||
@ -26,7 +27,7 @@ interface Props extends BareProps {
|
||||
trigger: string;
|
||||
}
|
||||
|
||||
export default function Tooltip ({ className, effect = 'solid', offset, place = 'bottom', text, trigger }: Props): React.ReactElement<Props> | null {
|
||||
function Tooltip ({ className, effect = 'solid', offset, place = 'bottom', text, trigger }: Props): React.ReactElement<Props> | null {
|
||||
const [tooltipContainer] = useState(document.createElement('div'));
|
||||
|
||||
useEffect((): () => void => {
|
||||
@ -44,7 +45,6 @@ export default function Tooltip ({ className, effect = 'solid', offset, place =
|
||||
return ReactDOM.createPortal(
|
||||
<ReactTooltip
|
||||
id={trigger}
|
||||
delayShow={250}
|
||||
effect={effect}
|
||||
offset={offset}
|
||||
place={place}
|
||||
@ -55,3 +55,21 @@ export default function Tooltip ({ className, effect = 'solid', offset, place =
|
||||
tooltipContainer
|
||||
);
|
||||
}
|
||||
|
||||
export default styled(Tooltip)`
|
||||
table {
|
||||
border: 0;
|
||||
margin-top: 0.75rem;
|
||||
|
||||
td {
|
||||
text-align: left;
|
||||
}
|
||||
|
||||
td:first-child {
|
||||
opacity: 0.75;
|
||||
padding-right: 0.25rem;
|
||||
text-align: right;
|
||||
white-space: nowrap;
|
||||
}
|
||||
}
|
||||
`;
|
||||
|
||||
@ -12,6 +12,8 @@ import { Badge, Icon } from '@polkadot/react-components';
|
||||
import { getAddressName } from '@polkadot/react-components/util';
|
||||
import { useCall, useApi } from '@polkadot/react-hooks';
|
||||
|
||||
import { useTranslation } from './translate';
|
||||
|
||||
interface Props extends BareProps {
|
||||
children?: React.ReactNode;
|
||||
defaultName?: string;
|
||||
@ -46,6 +48,7 @@ function defaultOrAddr (defaultName = '', _address: AccountId | AccountIndex | A
|
||||
}
|
||||
|
||||
function AccountName ({ children, className, defaultName, label, onClick, override, style, toggle, value, withShort }: Props): React.ReactElement<Props> {
|
||||
const { t } = useTranslation();
|
||||
const { api } = useApi();
|
||||
const info = useCall<DeriveAccountInfo>(api.derive.accounts.info as any, [value]);
|
||||
const address = useMemo((): string => (value || '').toString(), [value]);
|
||||
@ -66,14 +69,46 @@ function AccountName ({ children, className, defaultName, label, onClick, overri
|
||||
const { accountId, accountIndex, identity, nickname } = info || {};
|
||||
|
||||
if (api.query.identity?.identityOf) {
|
||||
if (identity?.displayName) {
|
||||
if (identity?.display) {
|
||||
const isGood = identity.judgements.some(([, judgement]): boolean => judgement.isKnownGood || judgement.isReasonable);
|
||||
const isBad = identity.judgements.some(([, judgement]): boolean => judgement.isErroneous || judgement.isLowQuality);
|
||||
|
||||
// FIXME This needs to be i18n, with plurals
|
||||
const hover = (
|
||||
<div className='hover-identity'>
|
||||
<div className='header'>{`${identity.judgements.length ? identity.judgements.length : 'no'} judgement${identity.judgements.length === 1 ? '' : 's'}${identity.judgements.length ? ': ' : ''}${identity.judgements.map(([, judgement]): string => judgement.toString()).join(', ')}`}</div>
|
||||
<div>
|
||||
<div>{`${identity.judgements.length ? identity.judgements.length : 'no'} judgement${identity.judgements.length === 1 ? '' : 's'}${identity.judgements.length ? ': ' : ''}${identity.judgements.map(([, judgement]): string => judgement.toString()).join(', ')}`}</div>
|
||||
<table>
|
||||
<tbody>
|
||||
<tr>
|
||||
<td>{t('display')}</td>
|
||||
<td>{identity.display}</td>
|
||||
</tr>
|
||||
{identity.legal && (
|
||||
<tr>
|
||||
<td>{t('legal')}</td>
|
||||
<td>{identity.legal}</td>
|
||||
</tr>
|
||||
)}
|
||||
{identity.email && (
|
||||
<tr>
|
||||
<td>{t('email')}</td>
|
||||
<td>{identity.email}</td>
|
||||
</tr>
|
||||
)}
|
||||
{identity.web && (
|
||||
<tr>
|
||||
<td>{t('www')}</td>
|
||||
<td>{identity.web}</td>
|
||||
</tr>
|
||||
)}
|
||||
{identity.riot && (
|
||||
<tr>
|
||||
<td>{t('riot')}</td>
|
||||
<td>{identity.riot}</td>
|
||||
</tr>
|
||||
)}
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
);
|
||||
|
||||
@ -93,7 +128,7 @@ function AccountName ({ children, className, defaultName, label, onClick, overri
|
||||
: 'gray'
|
||||
}
|
||||
/>
|
||||
<div className='name'>{identity.displayName.toUpperCase()}</div>
|
||||
<div className='name'>{identity.display.toUpperCase()}</div>
|
||||
</div>
|
||||
);
|
||||
|
||||
@ -128,21 +163,6 @@ function AccountName ({ children, className, defaultName, label, onClick, overri
|
||||
}
|
||||
|
||||
export default styled(AccountName)`
|
||||
.hover-identity {
|
||||
div+div {
|
||||
margin-top: 0.75rem;
|
||||
}
|
||||
|
||||
table {
|
||||
border: 0;
|
||||
|
||||
td:first-child {
|
||||
padding-right: 0.25rem;
|
||||
text-align: right;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.via-identity {
|
||||
display: inline-block;
|
||||
|
||||
|
||||
11
packages/react-query/src/translate.ts
Normal file
11
packages/react-query/src/translate.ts
Normal file
@ -0,0 +1,11 @@
|
||||
// Copyright 2017-2019 @polkadot/react-query authors & contributors
|
||||
// This software may be modified and distributed under the terms
|
||||
// of the Apache-2.0 license. See the LICENSE file for details.
|
||||
|
||||
import { useTranslation as useTranslationBase, UseTranslationResponse, withTranslation } from 'react-i18next';
|
||||
|
||||
export function useTranslation (): UseTranslationResponse {
|
||||
return useTranslationBase('react-query');
|
||||
}
|
||||
|
||||
export default withTranslation(['react-query']);
|
||||
92
yarn.lock
92
yarn.lock
@ -2044,35 +2044,35 @@
|
||||
dependencies:
|
||||
"@types/node" ">= 8"
|
||||
|
||||
"@polkadot/api-contract@^0.100.0-beta.9":
|
||||
version "0.100.0-beta.9"
|
||||
resolved "https://registry.yarnpkg.com/@polkadot/api-contract/-/api-contract-0.100.0-beta.9.tgz#d700f41f8304cce143ca921311cb102ca411527f"
|
||||
integrity sha512-qz5mqht59iOj53+VbNA2/mKA1Ly4x58NFdx/XtNYLfTtT4H/o1IHJzrk5VCAN30a0RyHP2ujcgC3UG6lICwo7g==
|
||||
"@polkadot/api-contract@^0.100.0-beta.11":
|
||||
version "0.100.0-beta.11"
|
||||
resolved "https://registry.npmjs.org/@polkadot/api-contract/-/api-contract-0.100.0-beta.11.tgz#efa33d336e1b29e57be2e64477ccbe167e869cde"
|
||||
integrity sha512-OH1IONBCvEWFnfJjayUGjrzAqB/VSNpGnVmfxpq6IyDTlCATJfEofmalDcVS+CRH2MyzNlnR1azPQId0mUrgkA==
|
||||
dependencies:
|
||||
"@babel/runtime" "^7.7.6"
|
||||
"@polkadot/types" "^0.100.0-beta.9"
|
||||
"@polkadot/types" "^0.100.0-beta.11"
|
||||
|
||||
"@polkadot/api-derive@^0.100.0-beta.9":
|
||||
version "0.100.0-beta.9"
|
||||
resolved "https://registry.yarnpkg.com/@polkadot/api-derive/-/api-derive-0.100.0-beta.9.tgz#9d54d20656e4a14724cf832a2e72071466caf7d9"
|
||||
integrity sha512-kc38OJzGuHWc5J4MRJaAfb6x8AZoImy+6UczvWCYV1qzymS0iM6oMT5rHhmhobwtWCgqwx8G2G0JSrwvFvRESw==
|
||||
"@polkadot/api-derive@^0.100.0-beta.11":
|
||||
version "0.100.0-beta.11"
|
||||
resolved "https://registry.npmjs.org/@polkadot/api-derive/-/api-derive-0.100.0-beta.11.tgz#cee5a3c41ab1e4eb760d8a7fc0e0639ce795e63c"
|
||||
integrity sha512-lVMLZ/IcUKU0vAKVtkIHN2ISoTe7fEoM9byiFDBmqitrvXeOV6ykebDy4dlNmKw6pPrpyz7YXGoghPu088o0mg==
|
||||
dependencies:
|
||||
"@babel/runtime" "^7.7.6"
|
||||
"@polkadot/api" "^0.100.0-beta.9"
|
||||
"@polkadot/types" "^0.100.0-beta.9"
|
||||
"@polkadot/api" "^0.100.0-beta.11"
|
||||
"@polkadot/types" "^0.100.0-beta.11"
|
||||
|
||||
"@polkadot/api@^0.100.0-beta.9":
|
||||
version "0.100.0-beta.9"
|
||||
resolved "https://registry.yarnpkg.com/@polkadot/api/-/api-0.100.0-beta.9.tgz#8df172d785d26278b843d2f292b27c2921f9db85"
|
||||
integrity sha512-fYglpueYgE5dHh8PkUSwXl4aEGvt+1WE+ZHhojLei+b2//HmT6Msa1JX+rPRnWDEJXHMVi/k/oJ0jYFb7biZXA==
|
||||
"@polkadot/api@^0.100.0-beta.11":
|
||||
version "0.100.0-beta.11"
|
||||
resolved "https://registry.npmjs.org/@polkadot/api/-/api-0.100.0-beta.11.tgz#2ea12d6d9950dc01d74900754448ecbdcb4e2c35"
|
||||
integrity sha512-17ykzWJ/f8g0/zNvqIFgsKENSS8lTX6eQuJnG7lsH+Y56Nq3/9IRbOtfR0AUoKwFsPpP5FxXtHW9q6GcYIFdcA==
|
||||
dependencies:
|
||||
"@babel/runtime" "^7.7.6"
|
||||
"@polkadot/api-derive" "^0.100.0-beta.9"
|
||||
"@polkadot/api-derive" "^0.100.0-beta.11"
|
||||
"@polkadot/keyring" "^1.7.1"
|
||||
"@polkadot/metadata" "^0.100.0-beta.9"
|
||||
"@polkadot/rpc-core" "^0.100.0-beta.9"
|
||||
"@polkadot/rpc-provider" "^0.100.0-beta.9"
|
||||
"@polkadot/types" "^0.100.0-beta.9"
|
||||
"@polkadot/metadata" "^0.100.0-beta.11"
|
||||
"@polkadot/rpc-core" "^0.100.0-beta.11"
|
||||
"@polkadot/rpc-provider" "^0.100.0-beta.11"
|
||||
"@polkadot/types" "^0.100.0-beta.11"
|
||||
"@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.9":
|
||||
version "0.100.0-beta.9"
|
||||
resolved "https://registry.yarnpkg.com/@polkadot/jsonrpc/-/jsonrpc-0.100.0-beta.9.tgz#00c508158b90307e64d2c3a6b6e2e3f07b6f3597"
|
||||
integrity sha512-yVsXR4ahmL/I8ipdHqQ+rAPhRt2fBfLi3O38B4PgVOkcQlIhU2RQfm9bxzbPyPfK294vjWTqg4JrAjZ7yuxU/Q==
|
||||
"@polkadot/jsonrpc@^0.100.0-beta.11":
|
||||
version "0.100.0-beta.11"
|
||||
resolved "https://registry.npmjs.org/@polkadot/jsonrpc/-/jsonrpc-0.100.0-beta.11.tgz#59a3c513aa7b7bb1e6f251ce62c4a2b72fed935b"
|
||||
integrity sha512-T6am+/2zuA8Cttxoixj48LOQx6DXmOmKmKF8TRXm3XSPpuoOinDbNEKvlLTbfd/faHbPbBX8b8nFsO1T/zZ2tQ==
|
||||
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.9":
|
||||
version "0.100.0-beta.9"
|
||||
resolved "https://registry.yarnpkg.com/@polkadot/metadata/-/metadata-0.100.0-beta.9.tgz#b968b19a0d24392461bc5e4d3be9c31d2593c581"
|
||||
integrity sha512-ahk2zPvAnAR1B4XbfG5qROO1UgY/BXwKiQhiBYf9C9atgZZhUNLBoyqeK9WqH5VTEEDrID+K5SmXdTGbXNDvtA==
|
||||
"@polkadot/metadata@^0.100.0-beta.11":
|
||||
version "0.100.0-beta.11"
|
||||
resolved "https://registry.npmjs.org/@polkadot/metadata/-/metadata-0.100.0-beta.11.tgz#2b5d85097ddcb797782da8a6ee5bf6173cdd825a"
|
||||
integrity sha512-NfLFjP7J0+GkUgx9Jjus8JSkvxaHPtM+Tkj8vuQhxhWUVu+VdDEV88oy1EbV6mVDgrGPH8no4tK0xHzSNimT6g==
|
||||
dependencies:
|
||||
"@babel/runtime" "^7.7.6"
|
||||
"@polkadot/types" "^0.100.0-beta.9"
|
||||
"@polkadot/types" "^0.100.0-beta.11"
|
||||
"@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.9":
|
||||
version "0.100.0-beta.9"
|
||||
resolved "https://registry.yarnpkg.com/@polkadot/rpc-core/-/rpc-core-0.100.0-beta.9.tgz#3358e1232645d48646c3280a468340abd7639471"
|
||||
integrity sha512-gxJKmldWMIGTfQuSbfVqucwSztYLlefD44VAGhOsLVXzZvTNv7UgMJfS9XYlMBKKaEI4wcybKTq2YWVgtciwTQ==
|
||||
"@polkadot/rpc-core@^0.100.0-beta.11":
|
||||
version "0.100.0-beta.11"
|
||||
resolved "https://registry.npmjs.org/@polkadot/rpc-core/-/rpc-core-0.100.0-beta.11.tgz#dbe5dfc8c2ccdf0ccc4ab32e97260c1891383f6c"
|
||||
integrity sha512-UShRSAeSXDtXoHhdOnQrPCQ3EDF/oBr7cuJZu+QO6p0yqPJHaN4I7N66j1z3SdA7hB/7N/oj3jXXzhQvOkvveA==
|
||||
dependencies:
|
||||
"@babel/runtime" "^7.7.6"
|
||||
"@polkadot/jsonrpc" "^0.100.0-beta.9"
|
||||
"@polkadot/rpc-provider" "^0.100.0-beta.9"
|
||||
"@polkadot/types" "^0.100.0-beta.9"
|
||||
"@polkadot/jsonrpc" "^0.100.0-beta.11"
|
||||
"@polkadot/rpc-provider" "^0.100.0-beta.11"
|
||||
"@polkadot/types" "^0.100.0-beta.11"
|
||||
"@polkadot/util" "^1.7.1"
|
||||
rxjs "^6.5.3"
|
||||
|
||||
"@polkadot/rpc-provider@^0.100.0-beta.9":
|
||||
version "0.100.0-beta.9"
|
||||
resolved "https://registry.yarnpkg.com/@polkadot/rpc-provider/-/rpc-provider-0.100.0-beta.9.tgz#9a970e28a6257ef383a7504b57d719d26a627bb2"
|
||||
integrity sha512-46vgYteShsCIQX2aTxQGSunBkUxHwugcFArXo4k+Fa9uBA6eR+98A/sa3G5DHv0J5wAOvGBNNnFtpTNn8RVpQA==
|
||||
"@polkadot/rpc-provider@^0.100.0-beta.11":
|
||||
version "0.100.0-beta.11"
|
||||
resolved "https://registry.npmjs.org/@polkadot/rpc-provider/-/rpc-provider-0.100.0-beta.11.tgz#cc564e436772d6a5b0587ab60a2bd0f8f12f8f03"
|
||||
integrity sha512-0/ascHy/5JDXT65kD2WT5D4dnQJ6NyTPCq6YwD/29zCPtnln3uRJZV9VWO9m0Pf2kGDb2OPiyIgmzHQApTRGsw==
|
||||
dependencies:
|
||||
"@babel/runtime" "^7.7.6"
|
||||
"@polkadot/metadata" "^0.100.0-beta.9"
|
||||
"@polkadot/metadata" "^0.100.0-beta.11"
|
||||
"@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.9":
|
||||
version "0.100.0-beta.9"
|
||||
resolved "https://registry.yarnpkg.com/@polkadot/types/-/types-0.100.0-beta.9.tgz#93d1d804f452e16a3297c95fc0f12922d6720346"
|
||||
integrity sha512-uK4tTgJj6N9vLMiu8WedxFRseXYAmJyT4I/mHkw7dKWUrM60hAc3ic7kuhqu5tXOnXwR1HE0mUblaD22XCYnKw==
|
||||
"@polkadot/types@^0.100.0-beta.11":
|
||||
version "0.100.0-beta.11"
|
||||
resolved "https://registry.npmjs.org/@polkadot/types/-/types-0.100.0-beta.11.tgz#a2489f53c0d1e61f967435832c30aa370118e951"
|
||||
integrity sha512-xzQbjPnJmSB+A/WSFrTAb/h34JN8BZ29F2KA0hUCfyruAuXreZAAVvmBLPpqY906AJgU4O07QNpdbuZsTi2TzQ==
|
||||
dependencies:
|
||||
"@babel/runtime" "^7.7.6"
|
||||
"@polkadot/metadata" "^0.100.0-beta.9"
|
||||
"@polkadot/metadata" "^0.100.0-beta.11"
|
||||
"@polkadot/util" "^1.7.1"
|
||||
"@polkadot/util-crypto" "^1.7.1"
|
||||
"@types/memoizee" "^0.4.3"
|
||||
|
||||
Loading…
Reference in New Issue
Block a user