From 10e2d2b6d2d40a9358d7158c2b4d8559a85f18c7 Mon Sep 17 00:00:00 2001
From: Jaco <jacogr@gmail.com>
Date: Wed, 1 Feb 2023 14:22:36 +0200
Subject: [PATCH] Adjust AccountName display for address-only (#8915)

---
 packages/react-components/src/AccountName.tsx | 29 ++++++++++++++-----
 1 file changed, 21 insertions(+), 8 deletions(-)

diff --git a/packages/react-components/src/AccountName.tsx b/packages/react-components/src/AccountName.tsx
index 6cca195cb1..8582e94a8c 100644
--- a/packages/react-components/src/AccountName.tsx
+++ b/packages/react-components/src/AccountName.tsx
@@ -80,7 +80,7 @@ export function getParentAccount (value: string): string | undefined {
   return parentCache.get(value);
 }
 
-function defaultOrAddr (defaultName = '', _address: AccountId | AccountIndex | Address | string | Uint8Array, _accountIndex?: AccountIndex | null): [React.ReactNode, boolean, boolean, boolean] {
+function defaultOrAddr (defaultName = '', _address: AccountId | AccountIndex | Address | string | Uint8Array, _accountIndex?: AccountIndex | null): [displayName: React.ReactNode, isLocal: boolean, isAddress: boolean, isSpecial: boolean] {
   let known: string | null = null;
 
   for (let i = 0; known === null && i < MATCHERS.length; i++) {
@@ -109,6 +109,14 @@ function defaultOrAddr (defaultName = '', _address: AccountId | AccountIndex | A
   return [extracted, !isAddressExtracted, isAddressExtracted, false];
 }
 
+function defaultOrAddrNode (defaultName = '', address: AccountId | AccountIndex | Address | string | Uint8Array, accountIndex?: AccountIndex | null): React.ReactNode {
+  const [node,, isAddress] = defaultOrAddr(defaultName, address, accountIndex);
+
+  return isAddress
+    ? <span className='isAddress'>{node}</span>
+    : node;
+}
+
 function extractName (address: string, accountIndex?: AccountIndex, defaultName?: string): React.ReactNode {
   const displayCached = displayCache.get(address);
 
@@ -195,12 +203,12 @@ function AccountName ({ children, className = '', defaultName, label, onClick, o
     } else if (nickname) {
       setName(nickname);
     } else {
-      setName(defaultOrAddr(defaultName, cacheAddr, accountIndex));
+      setName(defaultOrAddrNode(defaultName, cacheAddr, accountIndex));
     }
   }, [api, defaultName, info, toggle, value]);
 
   const _onNameEdit = useCallback(
-    () => setName(defaultOrAddr(defaultName, (value || '').toString())),
+    () => setName(defaultOrAddrNode(defaultName, (value || '').toString())),
     [defaultName, value]
   );
 
@@ -235,6 +243,16 @@ const StyledSpan = styled.span`
     cursor: help !important;
   }
 
+  .isAddress {
+    display: inline-block;
+    min-width: var(--width-shortaddr);
+    max-width: var(--width-shortaddr);
+    overflow: hidden;
+    text-overflow: ellipsis;
+    text-transform: none;
+    white-space: nowrap;
+  }
+
   .via-identity {
     word-break: break-all;
 
@@ -250,12 +268,7 @@ const StyledSpan = styled.span`
       }
 
       &.isAddress {
-        display: inline-block;
-        min-width: var(--width-shortaddr);
-        max-width: var(--width-shortaddr);
         opacity: var(--opacity-light);
-        text-transform: none;
-        white-space: nowrap;
       }
 
       .sub,