Display accountIndex on SideBar (as available) (#3140)

* Display accountIndex on SideBar (as available)

* accountIndex cache

* Cleanup accountIndex re-renders

* Unneeded accountIndex effect dep

packages/page-accounts/src/Sidebar/Sidebar.tsx

@@ -24,7 +24,7 @@ interface Props {
 
 function Sidebar ({ address, className = '', onClose, onUpdateName }: Props): React.ReactElement<Props> {
   const { t } = useTranslation();
-  const { flags, identity, isEditingName, isEditingTags, meta, name, onForgetAddress, onSaveName, onSaveTags, setName, setTags, tags, toggleIsEditingName, toggleIsEditingTags } = useAccountInfo(address);
+  const { accountIndex, flags, identity, isEditingName, isEditingTags, meta, name, onForgetAddress, onSaveName, onSaveTags, setName, setTags, tags, toggleIsEditingName, toggleIsEditingTags } = useAccountInfo(address);
   const [isHoveringButton, toggleIsHoveringButton] = useToggle();
   const [isTransferOpen, toggleIsTransferOpen] = useToggle();
 
@@ -61,6 +61,11 @@ function Sidebar ({ address, className = '', onClose, onUpdateName }: Props): Re
         <div className='ui--AddressMenu-addr'>
           {address}
         </div>
+        {accountIndex && (
+          <div className='ui--AddressMenu-addr'>
+            {accountIndex}
+          </div>
+        )}
         <AccountName
           onClick={(flags.isEditable && !isEditingName) ? toggleIsEditingName : undefined}
           override={
@@ -233,10 +238,15 @@ export default React.memo(styled(Sidebar)`
     font-family: monospace;
     margin: 0.5rem 0;
     overflow: hidden;
+    text-align: center;
     text-overflow: ellipsis;
     width: 100%;
   }
 
+  .ui--AddressMenu-addr+.ui--AddressMenu-addr {
+    margin-top: -0.25rem;
+  }
+
   section {
     &:not(:last-child) {
       margin-bottom: 1.4rem;

packages/react-hooks/src/useAccountInfo.ts

@@ -57,11 +57,14 @@ export default function useAccountInfo (value: string | null, isContract = false
   }, [accountFlags]);
 
   useEffect((): void => {
-    const { accountIndex: anAccountIndex, identity, nickname } = accountInfo || {};
+    const { accountIndex, identity, nickname } = accountInfo || {};
+    const newIndex = accountIndex?.toString();
 
-    if (anAccountIndex && accountIndex !== anAccountIndex.toString()) {
-      setAccountIndex(anAccountIndex.toString());
-    }
+    setAccountIndex((oldIndex) =>
+      oldIndex !== newIndex
+        ? newIndex
+        : oldIndex
+    );
 
     let name;
 
@@ -97,7 +100,7 @@ export default function useAccountInfo (value: string | null, isContract = false
     } else {
       setIdentity(undefined);
     }
-  }, [accountIndex, accountInfo, api]);
+  }, [accountInfo, api]);
 
   useEffect((): void => {
     if (value) {