Display identity names, set identity modal (#2054)
* Display identity names, set identity modal * Update AddressRow types * useToggle in accounts modal
This commit is contained in:
Jaco Greeff
GitHub
parent
b624118c38
commit
717c80b665
@ -10,10 +10,10 @@
|
||||
"packages/*"
|
||||
],
|
||||
"resolutions": {
|
||||
"@polkadot/api": "^0.100.0-beta.1",
|
||||
"@polkadot/api-contract": "^0.100.0-beta.1",
|
||||
"@polkadot/api": "^0.100.0-beta.2",
|
||||
"@polkadot/api-contract": "^0.100.0-beta.2",
|
||||
"@polkadot/keyring": "^1.7.1",
|
||||
"@polkadot/types": "^0.100.0-beta.1",
|
||||
"@polkadot/types": "^0.100.0-beta.2",
|
||||
"@polkadot/util": "^1.7.1",
|
||||
"@polkadot/util-crypto": "^1.7.1",
|
||||
"babel-core": "^7.0.0-bridge.0",
|
||||
|
||||
@ -9,12 +9,13 @@ import React, { useState, useEffect } from 'react';
|
||||
import { Label } from 'semantic-ui-react';
|
||||
import styled from 'styled-components';
|
||||
import { AddressInfo, AddressSmall, Button, ChainLock, Forget, Icon, InputTags, LinkPolkascan, Menu, Popup, Input } from '@polkadot/react-components';
|
||||
import { useApi } from '@polkadot/react-hooks';
|
||||
import { useApi, useToggle } from '@polkadot/react-hooks';
|
||||
import keyring from '@polkadot/ui-keyring';
|
||||
|
||||
import Backup from './modals/Backup';
|
||||
import ChangePass from './modals/ChangePass';
|
||||
import Derive from './modals/Derive';
|
||||
import Identity from './modals/Identity';
|
||||
import Transfer from './modals/Transfer';
|
||||
import translate from './translate';
|
||||
|
||||
@ -31,16 +32,17 @@ function Account ({ address, allowTags, className, isFavorite, t, toggleFavorite
|
||||
const [tags, setTags] = useState<string[]>([]);
|
||||
const [accName, setAccName] = useState('');
|
||||
const [genesisHash, setGenesisHash] = useState<string | null>(null);
|
||||
const [isBackupOpen, setIsBackupOpen] = useState(false);
|
||||
const [isEditingName, setIsEditingName] = useState(false);
|
||||
const [isEditingTags, setIsEditingTags] = useState(false);
|
||||
const [{ isDevelopment, isEditable, isExternal }, setFlags] = useState({ isDevelopment: false, isEditable: false, isExternal: false });
|
||||
const [isDeriveOpen, setIsDeriveOpen] = useState(false);
|
||||
const [isForgetOpen, setIsForgetOpen] = useState(false);
|
||||
const [isPasswordOpen, setIsPasswordOpen] = useState(false);
|
||||
const [isSettingPopupOpen, setIsSettingPopupOpen] = useState(false);
|
||||
const [isTransferOpen, setIsTransferOpen] = useState(false);
|
||||
const [isVisible, setIsVisible] = useState(true);
|
||||
const [isEditingName, toggleEditName] = useToggle();
|
||||
const [isEditingTags, toggleEditTags] = useToggle();
|
||||
const [isBackupOpen, toggleBackup] = useToggle();
|
||||
const [isDeriveOpen, toggleDerive] = useToggle();
|
||||
const [isForgetOpen, toggleForget] = useToggle();
|
||||
const [isIdentityOpen, toggleIdentity] = useToggle();
|
||||
const [isPasswordOpen, togglePassword] = useToggle();
|
||||
const [isSettingsOpen, toggleSettings] = useToggle();
|
||||
const [isTransferOpen, toggleTransfer] = useToggle();
|
||||
|
||||
const _setTags = (tags: string[]): void => setTags(tags.sort());
|
||||
|
||||
@ -73,16 +75,8 @@ function Account ({ address, allowTags, className, isFavorite, t, toggleFavorite
|
||||
return null;
|
||||
}
|
||||
|
||||
const _toggleEditName = (): void => setIsEditingName(!isEditingName);
|
||||
const _toggleEditTags = (): void => setIsEditingTags(!isEditingTags);
|
||||
const _toggleBackup = (): void => setIsBackupOpen(!isBackupOpen);
|
||||
const _toggleDerive = (): void => setIsDeriveOpen(!isDeriveOpen);
|
||||
const _toggleForget = (): void => setIsForgetOpen(!isForgetOpen);
|
||||
const _togglePass = (): void => setIsPasswordOpen(!isPasswordOpen);
|
||||
const _toggleSettingPopup = (): void => setIsSettingPopupOpen(!isSettingPopupOpen);
|
||||
const _toggleTransfer = (): void => setIsTransferOpen(!isTransferOpen);
|
||||
const _saveName = (): void => {
|
||||
_toggleEditName();
|
||||
toggleEditName();
|
||||
|
||||
const meta = { name: accName, whenEdited: Date.now() };
|
||||
|
||||
@ -97,7 +91,7 @@ function Account ({ address, allowTags, className, isFavorite, t, toggleFavorite
|
||||
}
|
||||
};
|
||||
const _saveTags = (): void => {
|
||||
_toggleEditTags();
|
||||
toggleEditTags();
|
||||
|
||||
const meta = { tags, whenEdited: Date.now() };
|
||||
|
||||
@ -165,7 +159,7 @@ function Account ({ address, allowTags, className, isFavorite, t, toggleFavorite
|
||||
)
|
||||
: undefined
|
||||
}
|
||||
onClickName={_toggleEditName}
|
||||
onClickName={toggleEditName}
|
||||
toggle={isEditingName}
|
||||
value={address}
|
||||
/>
|
||||
@ -173,14 +167,14 @@ function Account ({ address, allowTags, className, isFavorite, t, toggleFavorite
|
||||
<Backup
|
||||
address={address}
|
||||
key='modal-backup-account'
|
||||
onClose={_toggleBackup}
|
||||
onClose={toggleBackup}
|
||||
/>
|
||||
)}
|
||||
{isDeriveOpen && (
|
||||
<Derive
|
||||
from={address}
|
||||
key='modal-derive-account'
|
||||
onClose={_toggleDerive}
|
||||
onClose={toggleDerive}
|
||||
/>
|
||||
)}
|
||||
{isForgetOpen && (
|
||||
@ -188,20 +182,27 @@ function Account ({ address, allowTags, className, isFavorite, t, toggleFavorite
|
||||
address={address}
|
||||
onForget={_onForget}
|
||||
key='modal-forget-account'
|
||||
onClose={_toggleForget}
|
||||
onClose={toggleForget}
|
||||
/>
|
||||
)}
|
||||
{isIdentityOpen && (
|
||||
<Identity
|
||||
address={address}
|
||||
key='modal-identity'
|
||||
onClose={toggleIdentity}
|
||||
/>
|
||||
)}
|
||||
{isPasswordOpen && (
|
||||
<ChangePass
|
||||
address={address}
|
||||
key='modal-change-pass'
|
||||
onClose={_togglePass}
|
||||
onClose={togglePassword}
|
||||
/>
|
||||
)}
|
||||
{isTransferOpen && (
|
||||
<Transfer
|
||||
key='modal-transfer'
|
||||
onClose={_toggleTransfer}
|
||||
onClose={toggleTransfer}
|
||||
senderId={address}
|
||||
/>
|
||||
)}
|
||||
@ -221,7 +222,7 @@ function Account ({ address, allowTags, className, isFavorite, t, toggleFavorite
|
||||
/>
|
||||
)
|
||||
: (
|
||||
<div className='tags--toggle' onClick={_toggleEditTags}>
|
||||
<div className='tags--toggle' onClick={toggleEditTags}>
|
||||
{tags.length
|
||||
? tags.map((tag): React.ReactNode => (
|
||||
<Label key={tag} size='tiny' color='grey'>{tag}</Label>
|
||||
@ -252,19 +253,19 @@ function Account ({ address, allowTags, className, isFavorite, t, toggleFavorite
|
||||
icon='paper plane'
|
||||
isPrimary
|
||||
label={t('send')}
|
||||
onClick={_toggleTransfer}
|
||||
onClick={toggleTransfer}
|
||||
size='small'
|
||||
tooltip={t('Send funds from this account')}
|
||||
/>
|
||||
<Popup
|
||||
className='theme--default'
|
||||
onClose={_toggleSettingPopup}
|
||||
open={isSettingPopupOpen}
|
||||
onClose={toggleSettings}
|
||||
open={isSettingsOpen}
|
||||
position='bottom right'
|
||||
trigger={
|
||||
<Button
|
||||
icon='setting'
|
||||
onClick={_toggleSettingPopup}
|
||||
onClick={toggleSettings}
|
||||
size='small'
|
||||
/>
|
||||
}
|
||||
@ -272,32 +273,35 @@ function Account ({ address, allowTags, className, isFavorite, t, toggleFavorite
|
||||
<Menu
|
||||
vertical
|
||||
text
|
||||
onClick={_toggleSettingPopup}
|
||||
onClick={toggleSettings}
|
||||
>
|
||||
<Menu.Item
|
||||
disabled={!isEditable || isExternal}
|
||||
onClick={_toggleDerive}
|
||||
disabled={!api.api.tx.identity?.setIdentity}
|
||||
onClick={toggleIdentity}
|
||||
>
|
||||
{t('Derive account from source')}
|
||||
{t('Set on-chain identity')}
|
||||
</Menu.Item>
|
||||
<Menu.Item disabled>
|
||||
{t('Change on-chain nickname')}
|
||||
<Menu.Item
|
||||
disabled={!isEditable || isExternal}
|
||||
onClick={toggleDerive}
|
||||
>
|
||||
{t('Derive account via derivation path')}
|
||||
</Menu.Item>
|
||||
<Menu.Item
|
||||
disabled={!isEditable || isExternal || isDevelopment}
|
||||
onClick={_toggleBackup}
|
||||
onClick={toggleBackup}
|
||||
>
|
||||
{t('Create a backup file for this account')}
|
||||
</Menu.Item>
|
||||
<Menu.Item
|
||||
disabled={!isEditable || isExternal || isDevelopment}
|
||||
onClick={_togglePass}
|
||||
onClick={togglePassword}
|
||||
>
|
||||
{t("Change this account's password")}
|
||||
</Menu.Item>
|
||||
<Menu.Item
|
||||
disabled={!isEditable || isDevelopment}
|
||||
onClick={_toggleForget}
|
||||
onClick={toggleForget}
|
||||
>
|
||||
{t('Forget this account')}
|
||||
</Menu.Item>
|
||||
|
||||
230
packages/app-accounts/src/modals/Identity.tsx
Normal file
230
packages/app-accounts/src/modals/Identity.tsx
Normal file
@ -0,0 +1,230 @@
|
||||
// Copyright 2017-2019 @polkadot/app-accounts 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 { Registration } from '@polkadot/types/interfaces';
|
||||
|
||||
import React, { useEffect, useState } from 'react';
|
||||
import styled from 'styled-components';
|
||||
import { Button, Input, Modal, Toggle, TxButton } from '@polkadot/react-components';
|
||||
import { useApi, useCall } from '@polkadot/react-hooks';
|
||||
import { Data, Option } from '@polkadot/types';
|
||||
import { u8aToString } from '@polkadot/util';
|
||||
|
||||
import { useTranslation } from '../translate';
|
||||
|
||||
interface Props {
|
||||
address: string;
|
||||
className?: string;
|
||||
onClose: () => void;
|
||||
}
|
||||
|
||||
interface WrapProps {
|
||||
children: React.ReactNode;
|
||||
onChange: (isChecked: boolean) => void;
|
||||
value: boolean;
|
||||
}
|
||||
|
||||
function setData (data: Data, setActive: null | ((isActive: boolean) => void), setVal: (val: string) => void): void {
|
||||
if (data.isRaw) {
|
||||
setActive && setActive(true);
|
||||
setVal(u8aToString(data.asRaw.toU8a(true)));
|
||||
}
|
||||
}
|
||||
|
||||
function WrapToggle ({ children, onChange, value }: WrapProps): React.ReactElement<WrapProps> {
|
||||
const { t } = useTranslation();
|
||||
|
||||
return (
|
||||
<div className='toggle-Wrap'>
|
||||
{children}
|
||||
<Toggle
|
||||
className='toggle-Toggle'
|
||||
label={
|
||||
value
|
||||
? t('include value')
|
||||
: t('exclude value')
|
||||
}
|
||||
onChange={onChange}
|
||||
value={value}
|
||||
/>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
function Identity ({ address, className, onClose }: Props): React.ReactElement<Props> {
|
||||
const { t } = useTranslation();
|
||||
const { api } = useApi();
|
||||
const identityOpt = useCall<Option<Registration>>(api.query.identity.identityOf, [address]);
|
||||
const [info, setInfo] = useState<any>({});
|
||||
const [hasEmail, setHasEmail] = useState(false);
|
||||
// const [hasImg, setHasImg] = useState(false);
|
||||
const [hasLegal, setHasLegal] = useState(false);
|
||||
// const [hasPgp, setHasPgp] = useState(false);
|
||||
const [hasRiot, setHasRiot] = useState(false);
|
||||
const [hasWeb, setHasWeb] = useState(false);
|
||||
const [valDisplay, setValDisplay] = useState('');
|
||||
const [valEmail, setValEmail] = useState('');
|
||||
// const [{ errImg, valImg }, setValImg] = useState<{ errImg: boolean; valImg: string }>({ errImg: true, valImg: '' });
|
||||
const [valLegal, setValLegal] = useState('');
|
||||
// const [{ errPgp, valPgp }, setValPgp] = useState<{ errPgp: boolean; valPgp: string }>({ errPgp: true, valPgp: '' });
|
||||
const [valRiot, setValRiot] = useState('');
|
||||
const [valWeb, setValWeb] = useState('');
|
||||
|
||||
useEffect((): void => {
|
||||
if (identityOpt?.isSome) {
|
||||
const { info } = identityOpt.unwrap();
|
||||
|
||||
setData(info.display, null, setValDisplay);
|
||||
setData(info.email, setHasEmail, setValEmail);
|
||||
setData(info.legal, setHasLegal, setValLegal);
|
||||
setData(info.riot, setHasRiot, setValRiot);
|
||||
setData(info.web, setHasWeb, setValWeb);
|
||||
}
|
||||
}, [identityOpt]);
|
||||
|
||||
useEffect((): void => {
|
||||
setInfo({
|
||||
display: { [valDisplay ? 'raw' : 'none']: valDisplay || null },
|
||||
email: { [hasEmail ? 'raw' : 'none']: hasEmail ? valEmail : null },
|
||||
legal: { [hasLegal ? 'raw' : 'none']: hasLegal ? valLegal : null },
|
||||
riot: { [hasRiot ? 'raw' : 'none']: hasRiot ? valRiot : null },
|
||||
web: { [hasWeb ? 'raw' : 'none']: hasWeb ? valWeb : null }
|
||||
// image: { [hasImg ? 'sha256' : 'none']: hasImg ? valImg : null },
|
||||
// pgpFingerprint: hasPgp ? valPgp : null
|
||||
});
|
||||
// errImg, errPgp, hasImg, hasPgp, valImg, valPgp,
|
||||
}, [hasEmail, hasLegal, hasRiot, hasWeb, valDisplay, valEmail, valLegal, valRiot, valWeb]);
|
||||
|
||||
return (
|
||||
<Modal
|
||||
className={className}
|
||||
header={t('Register identity')}
|
||||
open
|
||||
>
|
||||
<Modal.Content>
|
||||
<Input
|
||||
autoFocus
|
||||
help={t('The name that will be displayed in your accounts list.')}
|
||||
label={t('display name')}
|
||||
onChange={setValDisplay}
|
||||
maxLength={32}
|
||||
value={valDisplay}
|
||||
/>
|
||||
<WrapToggle
|
||||
onChange={setHasLegal}
|
||||
value={hasLegal}
|
||||
>
|
||||
<Input
|
||||
help={t('The legal name for this identity.')}
|
||||
isDisabled={!hasLegal}
|
||||
label={t('legal name')}
|
||||
onChange={setValLegal}
|
||||
maxLength={32}
|
||||
value={hasLegal ? valLegal : '<none>'}
|
||||
/>
|
||||
</WrapToggle>
|
||||
<WrapToggle
|
||||
onChange={setHasEmail}
|
||||
value={hasEmail}
|
||||
>
|
||||
<Input
|
||||
help={t('The email address associated with this identity.')}
|
||||
isDisabled={!hasEmail}
|
||||
label={t('email')}
|
||||
onChange={setValEmail}
|
||||
maxLength={32}
|
||||
value={hasEmail ? valEmail : '<none>'}
|
||||
/>
|
||||
</WrapToggle>
|
||||
<WrapToggle
|
||||
onChange={setHasWeb}
|
||||
value={hasWeb}
|
||||
>
|
||||
<Input
|
||||
help={t('An URL that is linked to this identity.')}
|
||||
isDisabled={!hasWeb}
|
||||
label={t('web')}
|
||||
onChange={setValWeb}
|
||||
maxLength={32}
|
||||
value={hasWeb ? valWeb : '<none>'}
|
||||
/>
|
||||
</WrapToggle>
|
||||
<WrapToggle
|
||||
onChange={setHasRiot}
|
||||
value={hasRiot}
|
||||
>
|
||||
<Input
|
||||
help={t('a riot name linked to this identity')}
|
||||
isDisabled={!hasRiot}
|
||||
label={t('riot name')}
|
||||
onChange={setValRiot}
|
||||
maxLength={32}
|
||||
value={hasRiot ? valRiot : '<none>'}
|
||||
/>
|
||||
</WrapToggle>
|
||||
{/* <WrapToggle
|
||||
onChange={setHasImg}
|
||||
value={hasImg}
|
||||
>
|
||||
<Input
|
||||
isDisabled={!hasImg}
|
||||
isError={hasImg && errImg}
|
||||
label={t('sha2 image hash')}
|
||||
onChange={_onChangeImg}
|
||||
placeholder={t('0x...')}
|
||||
maxLength={66}
|
||||
value={hasImg ? valImg : '<none>'}
|
||||
/>
|
||||
</WrapToggle>
|
||||
<WrapToggle
|
||||
onChange={setHasPgp}
|
||||
value={hasPgp}
|
||||
>
|
||||
<Input
|
||||
isDisabled={!hasPgp}
|
||||
isError={hasPgp && errPgp}
|
||||
label={t('pgp hash')}
|
||||
onChange={_onChangePgp}
|
||||
placeholder={t('0x...')}
|
||||
maxLength={42}
|
||||
value={hasPgp ? valPgp : '<none>'}
|
||||
/>
|
||||
</WrapToggle> */}
|
||||
</Modal.Content>
|
||||
<Modal.Actions>
|
||||
<Button.Group>
|
||||
<Button
|
||||
icon='cancel'
|
||||
isNegative
|
||||
label={t('Cancel')}
|
||||
onClick={onClose}
|
||||
/>
|
||||
<Button.Or />
|
||||
<TxButton
|
||||
accountId={address}
|
||||
icon='send'
|
||||
isPrimary
|
||||
label={t('Set Identity')}
|
||||
onStart={onClose}
|
||||
params={[info]}
|
||||
tx='identity.setIdentity'
|
||||
withSpinner={false}
|
||||
/>
|
||||
</Button.Group>
|
||||
</Modal.Actions>
|
||||
</Modal>
|
||||
);
|
||||
}
|
||||
|
||||
export default styled(Identity)`
|
||||
.toggle-Wrap {
|
||||
position: relative;
|
||||
|
||||
.toggle-Toggle {
|
||||
position: absolute;
|
||||
right: 3.5rem;
|
||||
top: 0.5rem;
|
||||
}
|
||||
}
|
||||
`;
|
||||
@ -11,7 +11,7 @@
|
||||
"license": "Apache-2.0",
|
||||
"dependencies": {
|
||||
"@babel/runtime": "^7.7.5",
|
||||
"@polkadot/api-contract": "^0.100.0-beta.1",
|
||||
"@polkadot/api-contract": "^0.100.0-beta.2",
|
||||
"@polkadot/react-components": "^0.39.0-beta.4"
|
||||
}
|
||||
}
|
||||
|
||||
@ -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.1",
|
||||
"@polkadot/api": "^0.100.0-beta.2",
|
||||
"@polkadot/extension-dapp": "^0.14.1",
|
||||
"edgeware-node-types": "^1.0.10",
|
||||
"rxjs-compat": "^6.5.3"
|
||||
|
||||
@ -45,6 +45,11 @@ export interface Props extends I18nProps, RowProps {
|
||||
const DEFAULT_ADDR = '5'.padEnd(16, 'x');
|
||||
const ICON_SIZE = 48;
|
||||
const ICON_SIZE_SMALL = 32;
|
||||
const EMPTY_INFO: DeriveAccountInfo = {
|
||||
identity: {
|
||||
judgements: []
|
||||
}
|
||||
};
|
||||
|
||||
class AddressRow extends Row<ApiProps & Props, State> {
|
||||
public state: State;
|
||||
@ -55,7 +60,7 @@ class AddressRow extends Row<ApiProps & Props, State> {
|
||||
this.state = this.createState();
|
||||
}
|
||||
|
||||
public static getDerivedStateFromProps ({ accounts_info = {}, defaultName, isEditable, noDefaultNameOpacity, type, value }: Props, prevState: State): State | null {
|
||||
public static getDerivedStateFromProps ({ accounts_info = EMPTY_INFO, defaultName, isEditable, noDefaultNameOpacity, type, value }: Props, prevState: State): State | null {
|
||||
const accountId = accounts_info.accountId || value;
|
||||
const address = accountId
|
||||
? accountId.toString()
|
||||
@ -86,7 +91,7 @@ class AddressRow extends Row<ApiProps & Props, State> {
|
||||
}
|
||||
|
||||
public render (): React.ReactNode {
|
||||
const { accounts_info = {}, className, isContract, isDisabled, isInline, label, overlay, style } = this.props;
|
||||
const { accounts_info = EMPTY_INFO, className, isContract, isDisabled, isInline, label, overlay, style } = this.props;
|
||||
const { accountId, accountIndex } = accounts_info;
|
||||
const isValid = this.props.isValid || accountId || accountIndex;
|
||||
|
||||
@ -113,7 +118,7 @@ class AddressRow extends Row<ApiProps & Props, State> {
|
||||
}
|
||||
|
||||
private createState (): State {
|
||||
const { accounts_info = {}, defaultName, type, value } = this.props;
|
||||
const { accounts_info = EMPTY_INFO, defaultName, type, value } = this.props;
|
||||
const accountId = accounts_info.accountId || value;
|
||||
const address = accountId
|
||||
? accountId.toString()
|
||||
@ -145,7 +150,7 @@ class AddressRow extends Row<ApiProps & Props, State> {
|
||||
}
|
||||
|
||||
private renderAddress (): React.ReactNode {
|
||||
const { accounts_info = {}, withIndexOrAddress = true } = this.props;
|
||||
const { accounts_info = EMPTY_INFO, withIndexOrAddress = true } = this.props;
|
||||
const { address } = this.state;
|
||||
const { accountIndex } = accounts_info;
|
||||
|
||||
@ -166,7 +171,7 @@ class AddressRow extends Row<ApiProps & Props, State> {
|
||||
}
|
||||
|
||||
private renderAccountIndex (): React.ReactNode {
|
||||
const { accounts_info = {}, withIndex = true, withIndexOrAddress = true, withSmallIcon } = this.props;
|
||||
const { accounts_info = EMPTY_INFO, withIndex = true, withIndexOrAddress = true, withSmallIcon } = this.props;
|
||||
const { accountIndex } = accounts_info;
|
||||
|
||||
if (withSmallIcon || !accountIndex || !(withIndex || withIndexOrAddress)) {
|
||||
@ -181,7 +186,7 @@ class AddressRow extends Row<ApiProps & Props, State> {
|
||||
}
|
||||
|
||||
private renderBalances (): React.ReactNode {
|
||||
const { accounts_info = {}, extraInfo, stakingInfo, withBalance, withValidatorPrefs } = this.props;
|
||||
const { accounts_info = EMPTY_INFO, extraInfo, stakingInfo, withBalance, withValidatorPrefs } = this.props;
|
||||
const { accountId } = accounts_info;
|
||||
|
||||
if (!(withBalance || withValidatorPrefs) || !accountId) {
|
||||
@ -202,7 +207,7 @@ class AddressRow extends Row<ApiProps & Props, State> {
|
||||
}
|
||||
|
||||
private renderIcon (): React.ReactNode {
|
||||
const { accounts_info = {}, iconInfo, systemName, withIcon = true, withSmallIcon = false } = this.props;
|
||||
const { accounts_info = EMPTY_INFO, iconInfo, systemName, withIcon = true, withSmallIcon = false } = this.props;
|
||||
const { address } = this.state;
|
||||
const { accountId } = accounts_info;
|
||||
|
||||
|
||||
@ -6,7 +6,7 @@ import { DeriveAccountInfo } from '@polkadot/api-derive/types';
|
||||
import { BareProps } from '@polkadot/react-api/types';
|
||||
import { AccountId, AccountIndex, Address } from '@polkadot/types/interfaces';
|
||||
|
||||
import React, { useState, useEffect } from 'react';
|
||||
import React, { useEffect, useMemo, useState } from 'react';
|
||||
import { getAddressName } from '@polkadot/react-components/util';
|
||||
import { useCall, useApi } from '@polkadot/react-hooks';
|
||||
|
||||
@ -23,8 +23,8 @@ interface Props extends BareProps {
|
||||
|
||||
const nameCache: Map<string, string> = new Map();
|
||||
|
||||
function defaultOrAddr (defaultName = '', _address?: AccountId | AccountIndex | Address | string | null | Uint8Array, _accountIndex?: AccountIndex | null): string {
|
||||
const accountId = (_address || '').toString();
|
||||
function defaultOrAddr (defaultName = '', _address: AccountId | AccountIndex | Address | string | Uint8Array, _accountIndex?: AccountIndex | null): string {
|
||||
const accountId = _address.toString();
|
||||
const cached = nameCache.get(accountId);
|
||||
|
||||
if (cached) {
|
||||
@ -46,18 +46,20 @@ function defaultOrAddr (defaultName = '', _address?: AccountId | AccountIndex |
|
||||
export default function AccountName ({ children, className, defaultName, label, onClick, override, style, toggle, value, withShort }: Props): React.ReactElement<Props> {
|
||||
const { api } = useApi();
|
||||
const info = useCall<DeriveAccountInfo>(api.derive.accounts.info as any, [value]);
|
||||
const [name, setName] = useState(defaultOrAddr(defaultName, value));
|
||||
const address = useMemo((): string => (value || '').toString(), [value]);
|
||||
const [name, setName] = useState(defaultOrAddr(defaultName, address));
|
||||
|
||||
useEffect((): void => {
|
||||
const { accountId, accountIndex, nickname } = info || {};
|
||||
const { accountId, accountIndex, identity, nickname } = info || {};
|
||||
const retrieved = identity?.displayName || nickname;
|
||||
|
||||
if (nickname) {
|
||||
const name = nickname.toUpperCase();
|
||||
if (retrieved) {
|
||||
const name = retrieved.toUpperCase();
|
||||
|
||||
nameCache.set((value || '').toString(), name);
|
||||
nameCache.set(address, name);
|
||||
setName(name);
|
||||
} else {
|
||||
setName(defaultOrAddr(defaultName, accountId || value, withShort ? null : accountIndex));
|
||||
setName(defaultOrAddr(defaultName, accountId || address, withShort ? null : accountIndex));
|
||||
}
|
||||
}, [info, toggle]);
|
||||
|
||||
|
||||
92
yarn.lock
92
yarn.lock
@ -2044,35 +2044,35 @@
|
||||
dependencies:
|
||||
"@types/node" ">= 8"
|
||||
|
||||
"@polkadot/api-contract@^0.100.0-beta.1":
|
||||
version "0.100.0-beta.1"
|
||||
resolved "https://registry.yarnpkg.com/@polkadot/api-contract/-/api-contract-0.100.0-beta.1.tgz#1387f30b3e63b5779d787123bcfe8bd34d21182f"
|
||||
integrity sha512-0qA0GddJIvaACM7bVV9qd42lUZiX9NMmqEdmbREltRZ8W+7nt29XGOJDZ15SmVFp0oH9ZdH08kRIn1V38l3tjQ==
|
||||
"@polkadot/api-contract@^0.100.0-beta.2":
|
||||
version "0.100.0-beta.2"
|
||||
resolved "https://registry.yarnpkg.com/@polkadot/api-contract/-/api-contract-0.100.0-beta.2.tgz#d8383979cfd34544db5a13ee2a5c1d08eefe3d50"
|
||||
integrity sha512-UuSUpfkvrhQVqcGaAqBae83kmCkPZCD3YjcUcv8WyJmljerdvIqhjHl1csAdnEKs5r6hm9+Nk/5sXcDvDdNS5Q==
|
||||
dependencies:
|
||||
"@babel/runtime" "^7.7.6"
|
||||
"@polkadot/types" "^0.100.0-beta.1"
|
||||
"@polkadot/types" "^0.100.0-beta.2"
|
||||
|
||||
"@polkadot/api-derive@^0.100.0-beta.1":
|
||||
version "0.100.0-beta.1"
|
||||
resolved "https://registry.yarnpkg.com/@polkadot/api-derive/-/api-derive-0.100.0-beta.1.tgz#8bf3e3baf8785fe7e703d6866fdf537cdc7ca3b3"
|
||||
integrity sha512-9liZMg3Z6xb5xIHpalmt30otTC54aE9jA3TZQsQcT+s9T9v2yHqUS+TnsZk+JuHblV9vcEbzECJmbCH/h48V8g==
|
||||
"@polkadot/api-derive@^0.100.0-beta.2":
|
||||
version "0.100.0-beta.2"
|
||||
resolved "https://registry.yarnpkg.com/@polkadot/api-derive/-/api-derive-0.100.0-beta.2.tgz#22b1b3bbe531a98b84aad0fecbf69be4f6dcdd61"
|
||||
integrity sha512-O8pbaKvBdHZkB/czxC1+cEkapgwCFvcpc3iMFqrpq19ECLTiWRWu80ljXTcDIRNLASZl6JrmNwgJI1+1lOEL6g==
|
||||
dependencies:
|
||||
"@babel/runtime" "^7.7.6"
|
||||
"@polkadot/api" "^0.100.0-beta.1"
|
||||
"@polkadot/types" "^0.100.0-beta.1"
|
||||
"@polkadot/api" "^0.100.0-beta.2"
|
||||
"@polkadot/types" "^0.100.0-beta.2"
|
||||
|
||||
"@polkadot/api@^0.100.0-beta.1":
|
||||
version "0.100.0-beta.1"
|
||||
resolved "https://registry.yarnpkg.com/@polkadot/api/-/api-0.100.0-beta.1.tgz#73f5aa00497595f4e381ee0fc49c4716c6c3060d"
|
||||
integrity sha512-Nzxdl3eolhGa1DpW5RFzlZ3F+jBXSh0TyCOrrziRw+osPyvl3qPyy1HWDhQyc+QcdeXdV4PK0QkwPae3aVUo/w==
|
||||
"@polkadot/api@^0.100.0-beta.2":
|
||||
version "0.100.0-beta.2"
|
||||
resolved "https://registry.yarnpkg.com/@polkadot/api/-/api-0.100.0-beta.2.tgz#c79edca730b4af2017f4a29ef7931d9eb38ca31a"
|
||||
integrity sha512-y3GlpR0/Z8QgLrmaZIljcE+RzO+zQJjLmYtIy/48V15s6AiXKkSmRUsvNTcC1zlEt3wesqGJYayI4ZIfPJ72Ow==
|
||||
dependencies:
|
||||
"@babel/runtime" "^7.7.6"
|
||||
"@polkadot/api-derive" "^0.100.0-beta.1"
|
||||
"@polkadot/api-derive" "^0.100.0-beta.2"
|
||||
"@polkadot/keyring" "^1.7.1"
|
||||
"@polkadot/metadata" "^0.100.0-beta.1"
|
||||
"@polkadot/rpc-core" "^0.100.0-beta.1"
|
||||
"@polkadot/rpc-provider" "^0.100.0-beta.1"
|
||||
"@polkadot/types" "^0.100.0-beta.1"
|
||||
"@polkadot/metadata" "^0.100.0-beta.2"
|
||||
"@polkadot/rpc-core" "^0.100.0-beta.2"
|
||||
"@polkadot/rpc-provider" "^0.100.0-beta.2"
|
||||
"@polkadot/types" "^0.100.0-beta.2"
|
||||
"@polkadot/util-crypto" "^1.7.1"
|
||||
|
||||
"@polkadot/dev-react@^0.32.0-beta.19":
|
||||
@ -2177,10 +2177,10 @@
|
||||
dependencies:
|
||||
"@babel/runtime" "^7.7.5"
|
||||
|
||||
"@polkadot/jsonrpc@^0.100.0-beta.1":
|
||||
version "0.100.0-beta.1"
|
||||
resolved "https://registry.yarnpkg.com/@polkadot/jsonrpc/-/jsonrpc-0.100.0-beta.1.tgz#0015e84f641f43e24b84b0e67b15160715e76645"
|
||||
integrity sha512-IHLCiEExcS2RK0jimLSk67+agMVZeyVSQkms+wYTHfbTtqTHoR2UcWBq8/TAtoB7SidCHLoDy16kpwcDpKfQYA==
|
||||
"@polkadot/jsonrpc@^0.100.0-beta.2":
|
||||
version "0.100.0-beta.2"
|
||||
resolved "https://registry.yarnpkg.com/@polkadot/jsonrpc/-/jsonrpc-0.100.0-beta.2.tgz#a2e0242d46c803557d8f00de12e6a342c812a242"
|
||||
integrity sha512-1VWzkMnDJHHwHW+uDpL3eaye9rMMvEiFLI+LvN07Ufch0Poy5LnHV9kKadV0zNXNY9j02QxqPEWFnE2Ee2PHUg==
|
||||
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.1":
|
||||
version "0.100.0-beta.1"
|
||||
resolved "https://registry.yarnpkg.com/@polkadot/metadata/-/metadata-0.100.0-beta.1.tgz#c80367d439c6750f7e173e5c8345f830d7c3c721"
|
||||
integrity sha512-wWavc/pjyH5mRYm7zao7aiDXSLhIQdhpfZTg5u5DVwiP8u1qh0gk1rfG0XkmFSnASgo19wsd5ipjSSIgN1ZWyg==
|
||||
"@polkadot/metadata@^0.100.0-beta.2":
|
||||
version "0.100.0-beta.2"
|
||||
resolved "https://registry.yarnpkg.com/@polkadot/metadata/-/metadata-0.100.0-beta.2.tgz#56e2348056b49750a5d29e43412a2c2fe70c528c"
|
||||
integrity sha512-9LmPnlab2ckkyvEYKvQQeSrtBfC937DioKsTHX1mbf1Hk0pxK5w0Fim2TE/fmx0B9ykENiYe0MIF6oBcj5wmWg==
|
||||
dependencies:
|
||||
"@babel/runtime" "^7.7.6"
|
||||
"@polkadot/types" "^0.100.0-beta.1"
|
||||
"@polkadot/types" "^0.100.0-beta.2"
|
||||
"@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.1":
|
||||
version "0.100.0-beta.1"
|
||||
resolved "https://registry.yarnpkg.com/@polkadot/rpc-core/-/rpc-core-0.100.0-beta.1.tgz#5c5b614ec013b69fdc348129635363dec0f89422"
|
||||
integrity sha512-4pvvBKIwf31vkb8ZwRkWYj+yWLFzClk7qCcvulNLrXmXCAD26QDyzT6gZADktJxzFjvzs24R9SH7kRSW8bHXtw==
|
||||
"@polkadot/rpc-core@^0.100.0-beta.2":
|
||||
version "0.100.0-beta.2"
|
||||
resolved "https://registry.yarnpkg.com/@polkadot/rpc-core/-/rpc-core-0.100.0-beta.2.tgz#0dc8151476c5029776b16057903d041d828772e3"
|
||||
integrity sha512-XP4KiWADZEmZ6U6m52Xaw5tcRrLP01sJV6Q0F7VKf0QW3HiG5K/YxzX+zGKGpVw+b7MPWxFPwKPej5hpwX1bEw==
|
||||
dependencies:
|
||||
"@babel/runtime" "^7.7.6"
|
||||
"@polkadot/jsonrpc" "^0.100.0-beta.1"
|
||||
"@polkadot/rpc-provider" "^0.100.0-beta.1"
|
||||
"@polkadot/types" "^0.100.0-beta.1"
|
||||
"@polkadot/jsonrpc" "^0.100.0-beta.2"
|
||||
"@polkadot/rpc-provider" "^0.100.0-beta.2"
|
||||
"@polkadot/types" "^0.100.0-beta.2"
|
||||
"@polkadot/util" "^1.7.1"
|
||||
rxjs "^6.5.3"
|
||||
|
||||
"@polkadot/rpc-provider@^0.100.0-beta.1":
|
||||
version "0.100.0-beta.1"
|
||||
resolved "https://registry.yarnpkg.com/@polkadot/rpc-provider/-/rpc-provider-0.100.0-beta.1.tgz#844b206687c6e3a91e382f43477b40ef15858e19"
|
||||
integrity sha512-qWk4YuG3u6Uei4Q6rYloOteB/sbkuI4zA9pHx/XQpvO3v2ROZxhbE7K8j39fyEc0HF/lJfVmpnxE1pgi+hQudQ==
|
||||
"@polkadot/rpc-provider@^0.100.0-beta.2":
|
||||
version "0.100.0-beta.2"
|
||||
resolved "https://registry.yarnpkg.com/@polkadot/rpc-provider/-/rpc-provider-0.100.0-beta.2.tgz#027ddc64b4711fb6e2904b90ca0fce5e1d69df67"
|
||||
integrity sha512-cOl+3Nu1Wt/QNcwc9NHMNwwm43hLRVjrT2+8rXJUNdGdiW8q+0u7ZdOsqwEG5cKF8h37blNbYM/+yXXPkEwCOQ==
|
||||
dependencies:
|
||||
"@babel/runtime" "^7.7.6"
|
||||
"@polkadot/metadata" "^0.100.0-beta.1"
|
||||
"@polkadot/metadata" "^0.100.0-beta.2"
|
||||
"@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.1":
|
||||
version "0.100.0-beta.1"
|
||||
resolved "https://registry.yarnpkg.com/@polkadot/types/-/types-0.100.0-beta.1.tgz#d2d4b80581a55e2d2a58654de193a5c3b7b345e7"
|
||||
integrity sha512-xulH3ubVK6xGkAlDFVkEY66ipNzqFLO+vkjtsHapNzJS98i+dxdDVisuqgjabfv675Q5Ia95cAWug3iUFr/EVw==
|
||||
"@polkadot/types@^0.100.0-beta.2":
|
||||
version "0.100.0-beta.2"
|
||||
resolved "https://registry.yarnpkg.com/@polkadot/types/-/types-0.100.0-beta.2.tgz#19b54a3da4f979a28fca236ab85b843965e052a0"
|
||||
integrity sha512-IT8m7P0kJbFtUEc8CUnya2UFhCB8SAyNS5NC0IvHzl7iUDnuqN29iIdM/VrhYq0zTZfye/NkbLVLJorX7+spSw==
|
||||
dependencies:
|
||||
"@babel/runtime" "^7.7.6"
|
||||
"@polkadot/metadata" "^0.100.0-beta.1"
|
||||
"@polkadot/metadata" "^0.100.0-beta.2"
|
||||
"@polkadot/util" "^1.7.1"
|
||||
"@polkadot/util-crypto" "^1.7.1"
|
||||
"@types/memoizee" "^0.4.3"
|
||||
|
||||
Loading…
Reference in New Issue
Block a user