neptune/ghost-portal
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Minor AddressName cleanups (#2302)

Browse Source 
* Minor AddressName cleanups

* Split Judgement modal

* Re-add undefined
This commit is contained in:
Jaco Greeff 2020-02-25 17:18:10 +01:00 committed by GitHub
parent ca3aedf1c3
commit 8d812116b7
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
2 changed files with 126 additions and 96 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

129
packages/react-components/src/AccountName.tsx
View File

@ -13,14 +13,10 @@ import { Option } from '@polkadot/types';
import { useTranslation } from './translate';
import { getAddressName } from './util';
import AccountNameJudgement from './AccountNameJudgement';
import AddressMini from './AddressMini';
import Badge from './Badge';
import Dropdown from './Dropdown';
import Icon from './Icon';
import Input from './Input';
import InputAddress from './InputAddress';
import Modal from './Modal';
import TxButton from './TxButton';
interface Props extends BareProps {
children?: React.ReactNode;
@ -29,24 +25,20 @@ interface Props extends BareProps {
onClick?: () => void;
override?: React.ReactNode;
toggle?: any;
value?: AccountId | AccountIndex | Address | string | null | Uint8Array;
withShort?: boolean;
value: AccountId | AccountIndex | Address | string | Uint8Array | null | undefined;
}
const JUDGEMENT_ENUM = [
{ value: 0, text: 'Unknown' },
{ value: 1, text: 'Fee paid' },
{ value: 2, text: 'Reasonable' },
{ value: 3, text: 'Known good' },
{ value: 4, text: 'Out of date' },
{ value: 5, text: 'Low quality' }
];
const DISPLAY_KEYS = ['display', 'legal', 'email', 'web', 'twitter', 'riot'];
const nameCache: Map<string, [boolean, [React.ReactNode, React.ReactNode | null]]> = new Map();
function defaultOrAddr (defaultName = '', _address: AccountId | AccountIndex | Address | string | Uint8Array, _accountIndex?: AccountIndex | null): [[React.ReactNode, React.ReactNode | null], boolean, boolean] {
const accountId = _address.toString();
const accountIndex = (_accountIndex || '').toString();
if (!accountId) {
return [[defaultName, null], false, false];
}
const [isAddressExtracted,, extracted] = getAddressName(accountId, null, defaultName);
const [isAddressCached, nameCached] = nameCache.get(accountId) || [false, [null, null]];
@ -63,35 +55,30 @@ function defaultOrAddr (defaultName = '', _address: AccountId | AccountIndex | A
return [[extracted, null], !isAddressExtracted, isAddressExtracted];
}
function AccountName ({ children, className, defaultName, label, onClick, override, style, toggle, value, withShort }: Props): React.ReactElement<Props> {
function extractName (address: AccountId | string, accountIndex?: AccountIndex, defaultName?: string): React.ReactNode {
const [[displayFirst, displaySecond], isLocal, isAddress] = defaultOrAddr(defaultName, address, accountIndex);
return (
<div className='via-identity'>
<span className={`name ${isLocal ? 'isLocal' : (isAddress ? 'isAddress' : '')}`}>{
displaySecond
? <><span className='top'>{displayFirst}</span><span className='sub'>/{displaySecond}</span></>
: displayFirst
}</span>
</div>
);
}
function AccountName ({ children, className, defaultName, label, onClick, override, style, toggle, value }: Props): React.ReactElement<Props> {
const { t } = useTranslation();
const { api } = useApi();
const { allAccounts } = useAccounts();
const [isJudgementOpen, toggleJudgement] = useToggle();
const registrars = useCall<Option<RegistrarInfo>[]>(api.query.identity?.registrars, []);
const info = useCall<DeriveAccountInfo>(api.derive.accounts.info as any, [value]);
const [accountId, setAccountId] = useState<string | null>(null);
const [isRegistrar, setIsRegistrar] = useState(false);
const [judgementAccountId, setJudgementAccountId] = useState<string | null>(null);
const [judgementEnum, setJudgementEnum] = useState(2); // Reasonable
const [registrarIndex, setRegistrarIndex] = useState(-1);
const address = useMemo((): string => (value || '').toString(), [value]);
const _extractName = (accountId?: AccountId, accountIndex?: AccountIndex): React.ReactNode => {
const [[displayFirst, displaySecond], isLocal, isAddress] = defaultOrAddr(defaultName, accountId || address, withShort ? null : accountIndex);
return (
<div className='via-identity'>
<span className={`name ${isLocal ? 'isLocal' : (isAddress ? 'isAddress' : '')}`}>{
displaySecond
? <><span className='top'>{displayFirst}</span><span className='sub'>/{displaySecond}</span></>
: displayFirst
}</span>
</div>
);
};
const [name, setName] = useState<React.ReactNode>((): React.ReactNode => _extractName());
const [name, setName] = useState<React.ReactNode>((): React.ReactNode => extractName((value || '').toString(), undefined, defaultName));
// determine if we have a registrar or not - registrars are allowed to approve
useEffect((): void => {
@ -108,31 +95,10 @@ function AccountName ({ children, className, defaultName, label, onClick, overri
}
}, [allAccounts, registrars]);
// find the id of our registrar in the list
useEffect((): void => {
if (registrars && judgementAccountId) {
setRegistrarIndex(
registrars
.map((registrar): string| null =>
registrar.isSome
? registrar.unwrap().account.toString()
: null
)
.indexOf(judgementAccountId)
);
} else {
setRegistrarIndex(-1);
}
}, [judgementAccountId, registrars]);
// set the actual nickname, localname, accountIndex, accountId
// set the actual nickname, local name, accountIndex, accountId
useEffect((): void => {
const { accountId, accountIndex, identity, nickname } = info || {};
if (accountId) {
setAccountId(accountId.toString());
}
if (api.query.identity?.identityOf) {
if (identity?.display) {
const judgements = identity.judgements.filter(([, judgement]): boolean => !judgement.isFeePaid);
@ -213,55 +179,26 @@ function AccountName ({ children, className, defaultName, label, onClick, overri
</div>
);
nameCache.set(address, [false, displayParent ? [displayParent, displayName] : [displayName, null]]);
nameCache.set((accountId || address).toString(), [false, displayParent ? [displayParent, displayName] : [displayName, null]]);
setName((): React.ReactNode => name);
} else {
setName((): React.ReactNode => _extractName(accountId, accountIndex));
setName((): React.ReactNode => extractName(accountId || address, accountIndex));
}
} else if (nickname) {
nameCache.set(address, [false, [nickname, null]]);
nameCache.set((accountId || address).toString(), [false, [nickname, null]]);
setName(nickname);
} else {
setName(defaultOrAddr(defaultName, accountId || address, withShort ? null : accountIndex));
setName(defaultOrAddr(defaultName, accountId || address, accountIndex));
}
}, [info, toggle]);
}, [address, info, toggle]);
return (
<>
{isJudgementOpen && (
<Modal
header={t('Provide judgement')}
size='small'
>
<Modal.Content>
<InputAddress
label={t('registrar account')}
onChange={setJudgementAccountId}
/>
<Input
isDisabled
label={t('registrar index')}
value={registrarIndex === -1 ? t('invalid/unknown registrar account') : registrarIndex}
/>
<Dropdown
label={t('judgement')}
onChange={setJudgementEnum}
options={JUDGEMENT_ENUM}
value={judgementEnum}
/>
</Modal.Content>
<Modal.Actions onCancel={toggleJudgement}>
<TxButton
accountId={judgementAccountId}
icon='check'
isDisabled={registrarIndex === -1}
label={t('Judge')}
onStart={toggleJudgement}
params={[registrarIndex, accountId, judgementEnum]}
tx='identity.provideJudgement'
/>
</Modal.Actions>
</Modal>
<AccountNameJudgement
address={address}
toggleJudgement={toggleJudgement}
/>
)}
<div
className={`ui--AccountName ${className}`}

93
packages/react-components/src/AccountNameJudgement.tsx Normal file
View File

@ -0,0 +1,93 @@
// Copyright 2017-2020 @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 { BareProps } from '@polkadot/react-api/types';
import { RegistrarInfo } from '@polkadot/types/interfaces';
import React, { useEffect, useState } from 'react';
import { useCall, useApi } from '@polkadot/react-hooks';
import { Option } from '@polkadot/types';
import { useTranslation } from './translate';
import Dropdown from './Dropdown';
import Input from './Input';
import InputAddress from './InputAddress';
import Modal from './Modal';
import TxButton from './TxButton';
interface Props extends BareProps {
address: string;
toggleJudgement: () => void;
}
const JUDGEMENT_ENUM = [
{ value: 0, text: 'Unknown' },
{ value: 1, text: 'Fee paid' },
{ value: 2, text: 'Reasonable' },
{ value: 3, text: 'Known good' },
{ value: 4, text: 'Out of date' },
{ value: 5, text: 'Low quality' }
];
export default function AccountNameJudgement ({ address, toggleJudgement }: Props): React.ReactElement<Props> {
const { t } = useTranslation();
const { api } = useApi();
const registrars = useCall<Option<RegistrarInfo>[]>(api.query.identity?.registrars, []);
const [judgementAccountId, setJudgementAccountId] = useState<string | null>(null);
const [judgementEnum, setJudgementEnum] = useState(2); // Reasonable
const [registrarIndex, setRegistrarIndex] = useState(-1);
// find the id of our registrar in the list
useEffect((): void => {
if (registrars && judgementAccountId) {
setRegistrarIndex(
registrars
.map((registrar): string| null =>
registrar.isSome
? registrar.unwrap().account.toString()
: null
)
.indexOf(judgementAccountId)
);
} else {
setRegistrarIndex(-1);
}
}, [judgementAccountId, registrars]);
return (
<Modal
header={t('Provide judgement')}
size='small'
>
<Modal.Content>
<InputAddress
label={t('registrar account')}
onChange={setJudgementAccountId}
/>
<Input
isDisabled
label={t('registrar index')}
value={registrarIndex === -1 ? t('invalid/unknown registrar account') : registrarIndex}
/>
<Dropdown
label={t('judgement')}
onChange={setJudgementEnum}
options={JUDGEMENT_ENUM}
value={judgementEnum}
/>
</Modal.Content>
<Modal.Actions onCancel={toggleJudgement}>
<TxButton
accountId={judgementAccountId}
icon='check'
isDisabled={registrarIndex === -1}
label={t('Judge')}
onStart={toggleJudgement}
params={[registrarIndex, address, judgementEnum]}
tx='identity.provideJudgement'
/>
</Modal.Actions>
</Modal>
);
}