From a4c54ff953206cd6d81de61904d39a5bd41dc611 Mon Sep 17 00:00:00 2001
From: lynn <41491154+lynnshaoyu@users.noreply.github.com>
Date: Wed, 7 Dec 2022 14:38:40 -0500
Subject: [PATCH] fix: show ens in wallet dropdown too if available (#5564)

* done

* handle no ENS case
---
 .../WalletDropdown/AuthenticatedHeader.tsx    | 40 ++++++++++++++++---
 1 file changed, 35 insertions(+), 5 deletions(-)

diff --git a/src/components/WalletDropdown/AuthenticatedHeader.tsx b/src/components/WalletDropdown/AuthenticatedHeader.tsx
index 3f0a802661..87e60d576e 100644
--- a/src/components/WalletDropdown/AuthenticatedHeader.tsx
+++ b/src/components/WalletDropdown/AuthenticatedHeader.tsx
@@ -17,7 +17,8 @@ import { Text } from 'rebass'
 import { useCurrencyBalanceString } from 'state/connection/hooks'
 import { useAppDispatch } from 'state/hooks'
 import { updateSelectedWallet } from 'state/user/reducer'
-import styled from 'styled-components/macro'
+import styled, { css } from 'styled-components/macro'
+import { ThemedText } from 'theme'
 
 import { shortenAddress } from '../../nft/utils/address'
 import { useCloseModal, useToggleModal } from '../../state/application/hooks'
@@ -82,6 +83,30 @@ const FlexContainer = styled.div`
 const StatusWrapper = styled.div`
   display: inline-block;
   margin-top: 4px;
+  width: 70%;
+`
+
+const TruncatedTextStyle = css`
+  text-overflow: ellipsis;
+  overflow: hidden;
+  white-space: nowrap;
+`
+
+const AccountNamesWrapper = styled.div`
+  ${TruncatedTextStyle}
+  margin-right: 8px;
+`
+
+const ENSNameContainer = styled(ThemedText.SubHeader)`
+  ${TruncatedTextStyle}
+  color: ${({ theme }) => theme.textPrimary};
+  margin-top: 2.5px;
+`
+
+const AccountContainer = styled(ThemedText.BodySmall)`
+  ${TruncatedTextStyle}
+  color: ${({ theme }) => theme.textSecondary};
+  margin-top: 2.5px;
 `
 
 const BalanceWrapper = styled.div`
@@ -99,7 +124,7 @@ const AuthenticatedHeaderWrapper = styled.div`
 `
 
 const AuthenticatedHeader = () => {
-  const { account, chainId, connector } = useWeb3React()
+  const { account, chainId, connector, ENSName } = useWeb3React()
   const [isCopied, setCopied] = useCopyClipboard()
   const copy = useCallback(() => {
     setCopied(account || '')
@@ -153,9 +178,14 @@ const AuthenticatedHeader = () => {
         <StatusWrapper>
           <FlexContainer>
             <StatusIcon connectionType={connectionType} size={24} />
-            <Text fontSize={16} fontWeight={600} marginTop="2.5px">
-              {account && shortenAddress(account, 2, 4)}
-            </Text>
+            {ENSName ? (
+              <AccountNamesWrapper>
+                <ENSNameContainer>{ENSName}</ENSNameContainer>
+                <AccountContainer>{account && shortenAddress(account, 2, 4)}</AccountContainer>
+              </AccountNamesWrapper>
+            ) : (
+              <ThemedText.SubHeader marginTop="2.5px">{account && shortenAddress(account, 2, 4)}</ThemedText.SubHeader>
+            )}
           </FlexContainer>
         </StatusWrapper>
         <IconContainer>