diff --git a/packages/react-components/src/AccountName.tsx b/packages/react-components/src/AccountName.tsx
index 1fa406f8f4..dacae1e64e 100644
--- a/packages/react-components/src/AccountName.tsx
+++ b/packages/react-components/src/AccountName.tsx
@@ -23,7 +23,7 @@ interface Props extends BareProps {
children?: React.ReactNode;
defaultName?: string;
label?: React.ReactNode;
- noName?: boolean;
+ noLookup?: boolean;
onClick?: () => void;
override?: React.ReactNode;
// this is used by app-account/addresses to toggle editing
@@ -98,12 +98,39 @@ function extractName (address: string, accountIndex?: AccountIndex, defaultName?
);
}
+function createIdElem (badgeType: 'green' | 'brown' | 'gray', nameElem: React.ReactNode, infoElem: React.ReactNode, hoverElem?: React.ReactNode, onJudge?: undefined | (() => void)): React.ReactNode {
+ return (
+
{
@@ -140,56 +167,24 @@ function extractIdentity (address: string, identity: DeriveAccountRegistration,
);
-
- const displayName = isGood
- ? identity.display
- : (identity.display || '').replace(/[^\x20-\x7E]/g, '');
- const displayParent = identity.displayParent
- ? (
- isGood
- ? identity.displayParent
- : identity.displayParent.replace(/[^\x20-\x7E]/g, '')
- )
- : undefined;
+ const nameElem = displayParent
+ ?
{displayParent}/{displayName}
+ :
{displayName};
+ const infoElem =
;
+ const badgeType = isGood ? 'green' : (isBad ? 'brown' : 'gray');
nameCache.set(address, [false, displayParent ? [displayParent, displayName] : [displayName, null]]);
+ displayCache.set(address, createIdElem(badgeType, nameElem, infoElem));
- const element = (
-
- }
- isInline
- isSmall
- isTooltip
- onClick={onJudge}
- type={
- isGood
- ? 'green'
- : isBad
- ? 'brown'
- : 'gray'
- }
- />
- {
- displayParent
- ? {displayParent}/{displayName}
- : {displayName}
- }
-
- );
-
- displayCache.set(address, element);
-
- return element;
+ return createIdElem(badgeType, nameElem, infoElem, hoverElem, onJudge);
}
-function AccountName ({ children, className, defaultName, label, noName, onClick, override, toggle, value }: Props): React.ReactElement
{
+function AccountName ({ children, className, defaultName, label, noLookup, onClick, override, toggle, value }: Props): React.ReactElement {
const { t } = useTranslation();
const { api } = useApi();
- const { isRegistrar, registrars } = useRegistrars(noName);
+ const { isRegistrar, registrars } = useRegistrars(noLookup);
const [isJudgementOpen, toggleJudgement] = useToggle();
- const info = useCall(!noName && api.derive.accounts.info, [value]);
+ const info = useCall(!noLookup && api.derive.accounts.info, [value]);
const [name, setName] = useState(() => extractName((value || '').toString(), undefined, defaultName));
// set the actual nickname, local name, accountIndex, accountId
diff --git a/packages/react-components/src/AddressMini.tsx b/packages/react-components/src/AddressMini.tsx
index e0e915bdd2..11bae2de2a 100644
--- a/packages/react-components/src/AddressMini.tsx
+++ b/packages/react-components/src/AddressMini.tsx
@@ -26,7 +26,7 @@ interface Props extends BareProps {
isShort?: boolean;
label?: React.ReactNode;
labelBalance?: React.ReactNode;
- noName?: boolean;
+ noLookup?: boolean;
summary?: React.ReactNode;
type?: KeyringItemType;
value?: AccountId | AccountIndex | Address | string | null | Uint8Array;
@@ -38,7 +38,7 @@ interface Props extends BareProps {
withShrink?: boolean;
}
-function AddressMini ({ balance, bonded, children, className, iconInfo, isPadded = true, label, labelBalance, noName, summary, value, withAddress = true, withBalance = false, withBonded = false, withLockedVote = false, withName = true, withShrink = false }: Props): React.ReactElement | null {
+function AddressMini ({ balance, bonded, children, className, iconInfo, isPadded = true, label, labelBalance, noLookup, summary, value, withAddress = true, withBalance = false, withBonded = false, withLockedVote = false, withName = true, withShrink = false }: Props): React.ReactElement | null {
if (!value) {
return null;
}
@@ -65,7 +65,7 @@ function AddressMini ({ balance, bonded, children, className, iconInfo, isPadded
{withName
? (
)
diff --git a/packages/react-components/src/AddressToggle.tsx b/packages/react-components/src/AddressToggle.tsx
index 1841d9fa7a..09fab824e1 100644
--- a/packages/react-components/src/AddressToggle.tsx
+++ b/packages/react-components/src/AddressToggle.tsx
@@ -17,7 +17,7 @@ interface Props {
className?: string;
isHidden?: boolean;
filter?: string;
- noName?: boolean;
+ noLookup?: boolean;
noToggle?: boolean;
onChange?: (isChecked: boolean) => void;
value?: boolean;
@@ -46,9 +46,9 @@ function getIsFiltered (address: string, filter?: string, info?: DeriveAccountIn
return true;
}
-function AddressToggle ({ address, className, filter, isHidden, noName, noToggle, onChange, value }: Props): React.ReactElement | null {
+function AddressToggle ({ address, className, filter, isHidden, noLookup, noToggle, onChange, value }: Props): React.ReactElement | null {
const { api } = useApi();
- const info = useCall(!noName && api.derive.accounts.info, [address]);
+ const info = useCall(!noLookup && api.derive.accounts.info, [address]);
const [isFiltered, setIsFiltered] = useState(false);
useEffect((): void => {
@@ -67,7 +67,7 @@ function AddressToggle ({ address, className, filter, isHidden, noName, noToggle
>
{!noToggle && (
diff --git a/packages/react-components/src/InputAddressMulti/Available.tsx b/packages/react-components/src/InputAddressMulti/Available.tsx
index b6ae8a5317..95cce082aa 100644
--- a/packages/react-components/src/InputAddressMulti/Available.tsx
+++ b/packages/react-components/src/InputAddressMulti/Available.tsx
@@ -27,7 +27,7 @@ function Available ({ address, filter, isHidden, onSelect }: Props): React.React
diff --git a/packages/react-components/src/InputAddressMulti/Selected.tsx b/packages/react-components/src/InputAddressMulti/Selected.tsx
index 3c92664aff..d8d5558dbd 100644
--- a/packages/react-components/src/InputAddressMulti/Selected.tsx
+++ b/packages/react-components/src/InputAddressMulti/Selected.tsx
@@ -27,7 +27,7 @@ function Selected ({ address, filter, isHidden, onDeselect }: Props): React.Reac