Skip to content

Commit

Permalink
Display all identity info on hover (polkadot-js#2077)
Browse files Browse the repository at this point in the history 
* Display all identity info on hover

* Bump API

* displayName linting
  • Loading branch information
@jacogr @KarishmaBothara
jacogr authored and KarishmaBothara committed Feb 20, 2020
1 parent 779dd8e commit 4e989b5
Show file tree
Hide file tree
Showing 8 changed files with 122 additions and 74 deletions.
6 changes: 3 additions & 3 deletions package.json
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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",
Expand Down
3 changes: 1 addition & 2 deletions packages/app-contracts/package.json
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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"
}
}
2 changes: 1 addition & 1 deletion packages/react-api/package.json
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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"
Expand Down
2 changes: 1 addition & 1 deletion packages/react-components/src/AddressToggle.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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;
}
}
Expand Down
22 changes: 20 additions & 2 deletions packages/react-components/src/Tooltip.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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';

Expand All @@ -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 => {
Expand All @@ -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}
Expand All @@ -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;
}
}
`;
58 changes: 39 additions & 19 deletions packages/react-query/src/AccountName.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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;
Expand Down Expand Up @@ -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]);
Expand All @@ -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>
);

Expand All @@ -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>
);

Expand Down Expand Up @@ -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;
Expand Down
11 changes: 11 additions & 0 deletions packages/react-query/src/translate.ts
View file
Original file line number Diff line number Diff line change
@@ -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 changes: 46 additions & 46 deletions yarn.lock
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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":
Expand Down Expand Up @@ -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"

Expand All @@ -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"

Expand Down Expand Up @@ -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"
Expand All @@ -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"
Expand Down

0 comments on commit 4e989b5

Please sign in to comment.