feature: add active address in the top nav

src/libs/layout/header/header-connection-status.tsx

@@ -1,25 +1,25 @@
 import React from 'react';
 import styled from 'styled-components';
 import { useSelector } from 'react-redux';
-import { useTranslation } from 'react-i18next';
 
-import { AccountList, Modal, SvgIcon, Typography } from '@libs/ui';
+import { AccountList, Hash, HashVariant, Modal, SvgIcon } from '@libs/ui';
 import { AlignedFlexRow, SpacingSize } from '@libs/layout';
-import { selectCountOfConnectedAccountsWithActiveOrigin } from '@src/background/redux/vault/selectors';
+import { selectVaultActiveAccount } from '@src/background/redux/vault/selectors';
 
 const ConnectionStatusContainer = styled(AlignedFlexRow)`
   width: fit-content;
 
   background-color: rgb(0, 0, 0, 0.16);
-  padding: 4px 8px;
-  border-radius: ${({ theme }) => theme.borderRadius.hundred}px;
+  padding: 6px 8px 6px 14px;
+  border-top-right-radius: ${({ theme }) => theme.borderRadius.hundred}px;
+  border-bottom-right-radius: ${({ theme }) => theme.borderRadius.hundred}px;
+
+  position: relative;
+  left: -2px;
 `;
 
 export function HeaderConnectionStatus() {
-  const { t } = useTranslation();
-  const countOfConnectedAccounts = useSelector(
-    selectCountOfConnectedAccountsWithActiveOrigin
-  );
+  const activeAccount = useSelector(selectVaultActiveAccount);
 
   return (
     <Modal
@@ -29,11 +29,15 @@ export function HeaderConnectionStatus() {
       )}
       children={({ isOpen }) => (
         <ConnectionStatusContainer gap={SpacingSize.Tiny}>
-          <Typography uppercase type="formFieldStatus" color="contentOnFill">
-            {countOfConnectedAccounts > 0
-              ? `${countOfConnectedAccounts} ${t('Connected')}`
-              : t('Disconnected')}
-          </Typography>
+          <Hash
+            value={activeAccount?.publicKey!}
+            variant={HashVariant.ListSubtextHash}
+            truncatedSize="small"
+            truncated
+            withoutTooltip
+            color="contentOnFill"
+            withCopyOnSelfClick={false}
+          />
           <SvgIcon
             size={16}
             src="assets/icons/chevron-up.svg"

src/libs/layout/header/header-network-switcher.tsx

@@ -12,7 +12,7 @@ import { NetworkSetting } from '@src/constants';
 
 const NetworkSwitcherContainer = styled(AlignedFlexRow)`
   background-color: ${({ theme }) => hexToRGBA(theme.color.black, '0.16')};
-  padding: 4px 8px;
+  padding: 6px 8px;
   border-radius: ${({ theme }) => theme.borderRadius.hundred}px;
 `;
 

src/libs/layout/header/index.tsx

@@ -3,13 +3,12 @@ import styled from 'styled-components';
 import { useSelector } from 'react-redux';
 
 import {
+  AlignedFlexRow,
   AlignedSpaceBetweenFlexRow,
-  FlexRow,
   HeaderContainer,
   LeftAlignedCenteredFlexRow,
   Logo,
-  LogoContainer,
-  SpacingSize
+  LogoContainer
 } from '@src/libs/layout';
 import { Avatar, SvgIcon } from '@libs/ui';
 import {
@@ -68,7 +67,7 @@ export function PopupHeader({
     <>
       <HeaderContainer>
         {withConnectionStatus && activeAccount?.publicKey ? (
-          <FlexRow gap={SpacingSize.Small}>
+          <AlignedFlexRow>
             <Avatar
               size={32}
               publicKey={activeAccount.publicKey}
@@ -77,7 +76,7 @@ export function PopupHeader({
               displayContext="header"
             />
             <HeaderConnectionStatus />
-          </FlexRow>
+          </AlignedFlexRow>
         ) : (
           <>
             <SvgIconContainer>

src/libs/ui/components/avatar/avatar.tsx

@@ -34,6 +34,7 @@ const IconHashWrapper = styled(CenteredFlexRow)(({ theme }) => ({
 
 const ConnectionStatusBadgeContainer = styled(AlignedFlexRow)`
   position: relative;
+  z-index: 1;
 `;
 
 export const BackgroundWrapper = styled.div(

src/libs/ui/components/hash/hash.tsx

@@ -16,7 +16,8 @@ import { truncateKey, TruncateKeySize } from './utils';
 
 export enum HashVariant {
   CaptionHash = 'captionHash',
-  BodyHash = 'bodyHash'
+  BodyHash = 'bodyHash',
+  ListSubtextHash = 'listSubtextHash'
 }
 
 interface HashContainerProps {

src/libs/ui/components/typography/typography.tsx

@@ -23,7 +23,8 @@ export type TypographyType =
   | 'CSPRBold'
   | 'listSubtext'
   | 'formFieldStatus' // TODO: Temporary name. Make a better name
-  | 'subtitle';
+  | 'subtitle'
+  | 'listSubtextHash';
 
 export type CSPRSize = '2.8rem' | '2.4rem' | '2rem' | '1.8rem';
 
@@ -200,6 +201,14 @@ const StyledTypography = styled('span').withConfig({
         fontWeight: theme.typography.fontWeight.bold
       };
 
+    case 'listSubtextHash':
+      return {
+        ...CSPRBase,
+        fontSize: '1.2rem',
+        lineHeight: '1.6rem',
+        fontWeight: theme.typography.fontWeight.medium
+      };
+
     default:
       throw new Error('Unknown type of Typography');
   }