Skip Tooltip on noLookup in AccountName (#2562)

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 (
+    <div className='via-identity'>
+      <Badge
+        hover={hoverElem}
+        info={infoElem}
+        isInline
+        isSmall
+        isTooltip
+        onClick={onJudge}
+        type={badgeType}
+      />
+      {nameElem}
+    </div>
+  );
+}
+
 function extractIdentity (address: string, identity: DeriveAccountRegistration, onJudge: undefined | (() => void), t: (key: string, opts?: object) => string): React.ReactNode {
   const judgements = identity.judgements.filter(([, judgement]): boolean => !judgement.isFeePaid);
   const isGood = judgements.some(([, judgement]): boolean => judgement.isKnownGood || judgement.isReasonable);
   const isBad = judgements.some(([, judgement]): boolean => judgement.isErroneous || judgement.isLowQuality);
   const waitCount = identity.judgements.length - judgements.length;
-  const hover = (
+  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 hoverElem = (
     <div>
       <div>
         {
@@ -140,56 +167,24 @@ function extractIdentity (address: string, identity: DeriveAccountRegistration,
       </table>
     </div>
   );
-
-  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
+    ? <span className={`name ${isGood && 'isGood'}`}><span className='top'>{displayParent}</span><span className='sub'>/{displayName}</span></span>
+    : <span className={`name ${isGood && 'isGood'}`}>{displayName}</span>;
+  const infoElem = <Icon name={identity.parent ? 'caret square up outline' : (isGood ? 'check' : 'minus')} />;
+  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 = (
-    <div className='via-identity'>
-      <Badge
-        hover={hover}
-        info={<Icon name={identity.parent ? 'caret square up outline' : (isGood ? 'check' : 'minus')} />}
-        isInline
-        isSmall
-        isTooltip
-        onClick={onJudge}
-        type={
-          isGood
-            ? 'green'
-            : isBad
-              ? 'brown'
-              : 'gray'
-        }
-      />
-      {
-        displayParent
-          ? <span className={`name ${isGood && 'isGood'}`}><span className='top'>{displayParent}</span><span className='sub'>/{displayName}</span></span>
-          : <span className={`name ${isGood && 'isGood'}`}>{displayName}</span>
-      }
-    </div>
-  );
-
-  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<Props> {
+function AccountName ({ children, className, defaultName, label, noLookup, onClick, override, toggle, value }: Props): React.ReactElement<Props> {
   const { t } = useTranslation();
   const { api } = useApi();
-  const { isRegistrar, registrars } = useRegistrars(noName);
+  const { isRegistrar, registrars } = useRegistrars(noLookup);
   const [isJudgementOpen, toggleJudgement] = useToggle();
-  const info = useCall<DeriveAccountInfo>(!noName && api.derive.accounts.info, [value]);
+  const info = useCall<DeriveAccountInfo>(!noLookup && api.derive.accounts.info, [value]);
   const [name, setName] = useState<React.ReactNode>(() => extractName((value || '').toString(), undefined, defaultName));
 
   // set the actual nickname, local name, accountIndex, accountId

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<Props> | 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<Props> | null {
   if (!value) {
     return null;
   }
@@ -65,7 +65,7 @@ function AddressMini ({ balance, bonded, children, className, iconInfo, isPadded
             {withName
               ? (
                 <AccountName
-                  noName={noName}
+                  noLookup={noLookup}
                   value={value}
                 />
               )

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<Props> | null {
+function AddressToggle ({ address, className, filter, isHidden, noLookup, noToggle, onChange, value }: Props): React.ReactElement<Props> | null {
   const { api } = useApi();
-  const info = useCall<DeriveAccountInfo>(!noName && api.derive.accounts.info, [address]);
+  const info = useCall<DeriveAccountInfo>(!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
     >
       <AddressMini
         className='ui--AddressToggle-address'
-        noName={noName}
+        noLookup={noLookup}
         value={address}
       />
       {!noToggle && (

packages/react-components/src/InputAddressMulti/Available.tsx

@@ -27,7 +27,7 @@ function Available ({ address, filter, isHidden, onSelect }: Props): React.React
     <AddressToggle
       address={address}
       filter={filter}
-      noName
+      noLookup
       noToggle
       onChange={_onSelect}
     />

packages/react-components/src/InputAddressMulti/Selected.tsx

@@ -27,7 +27,7 @@ function Selected ({ address, filter, isHidden, onDeselect }: Props): React.Reac
     <AddressToggle
       address={address}
       filter={filter}
-      noName
+      noLookup
       noToggle
       onChange={_onDeselect}
     />