Feature: display ENS name in connected wallet info

src/components/AppLayout/Header/components/ProviderDetails/UserDetails.tsx

@@ -37,6 +37,10 @@ const styles = createStyles({
     padding: '9px',
     lineHeight: 1,
   },
+  ens: {
+    paddingBottom: md,
+    fontWeight: 'bold',
+  },
   details: {
     padding: `0 ${md}`,
     height: '20px',
@@ -98,6 +102,7 @@ type Props = {
   openDashboard?: (() => void | null) | boolean
   provider?: string
   userAddress: string
+  ensName: string
 }
 
 const useStyles = makeStyles(styles)
@@ -108,6 +113,7 @@ export const UserDetails = ({
   openDashboard,
   provider,
   userAddress,
+  ensName,
 }: Props): React.ReactElement => {
   const connectedNetwork = useSelector(networkSelector)
   const classes = useStyles()
@@ -122,6 +128,11 @@ export const UserDetails = ({
             <KeyRing circleSize={75} dotRight={25} dotSize={25} dotTop={50} hideDot keySize={30} mode="warning" />
           )}
         </Row>
+        {ensName && (
+          <Block className={classes.ens} justify="center">
+            {ensName}
+          </Block>
+        )}
         <Block className={classes.user} justify="center">
           {userAddress ? (
             <PrefixedEthHashInfo

src/components/AppLayout/Header/components/ProviderInfo/ProviderAccessible.tsx

@@ -9,7 +9,7 @@ import PrefixedEthHashInfo from 'src/components/PrefixedEthHashInfo'
 import WalletIcon from '../WalletIcon'
 import { connected as connectedBg, screenSm, sm } from 'src/theme/variables'
 import { KeyRing } from 'src/components/AppLayout/Header/components/KeyRing'
-import { networkSelector } from 'src/logic/wallets/store/selectors'
+import { networkSelector, userEnsSelector } from 'src/logic/wallets/store/selectors'
 import { getChainById } from 'src/config'
 
 const useStyles = makeStyles({
@@ -42,12 +42,6 @@ const useStyles = makeStyles({
       display: 'block',
     },
   },
-  providerContainer: {
-    display: 'flex',
-    flex: 1,
-    alignItems: 'center',
-    width: '100px',
-  },
   account: {
     alignItems: 'start',
     display: 'flex',
@@ -72,6 +66,7 @@ interface ProviderInfoProps {
 const ProviderInfo = ({ connected, provider, userAddress }: ProviderInfoProps): React.ReactElement => {
   const classes = useStyles()
   const currentNetwork = useSelector(networkSelector)
+  const ensName = useSelector(userEnsSelector)
   const chain = getChainById(currentNetwork)
   const addressColor = connected ? 'text' : 'warning'
   return (
@@ -90,16 +85,22 @@ const ProviderInfo = ({ connected, provider, userAddress }: ProviderInfoProps):
           {provider}
           {chain?.chainName && ` @ ${chain.chainName}`}
         </Paragraph>
-        <div className={classes.providerContainer}>
+        <div>
           {connected ? (
-            <PrefixedEthHashInfo
-              hash={userAddress}
-              shortenHash={4}
-              showAvatar
-              avatarSize="xs"
-              textColor={addressColor}
-              textSize="sm"
-            />
+            ensName ? (
+              <Text strong size="sm">
+                {ensName}
+              </Text>
+            ) : (
+              <PrefixedEthHashInfo
+                hash={userAddress}
+                shortenHash={4}
+                showAvatar
+                avatarSize="xs"
+                textColor={addressColor}
+                textSize="sm"
+              />
+            )
           ) : (
             <Text size="md" color={addressColor}>
               Connection Error

src/components/AppLayout/Header/index.tsx

@@ -12,6 +12,7 @@ import {
   loadedSelector,
   providerNameSelector,
   userAccountSelector,
+  userEnsSelector,
 } from 'src/logic/wallets/store/selectors'
 import { removeProvider } from 'src/logic/wallets/store/actions'
 import onboard from 'src/logic/wallets/onboard'
@@ -21,6 +22,7 @@ const HeaderComponent = (): React.ReactElement => {
   const provider = useSelector(providerNameSelector)
   const chainId = useSelector(currentChainId)
   const userAddress = useSelector(userAccountSelector)
+  const ensName = useSelector(userEnsSelector)
   const loaded = useSelector(loadedSelector)
   const available = useSelector(availableSelector)
   const dispatch = useDispatch()
@@ -65,6 +67,7 @@ const HeaderComponent = (): React.ReactElement => {
         openDashboard={openDashboard()}
         provider={provider}
         userAddress={userAddress}
+        ensName={ensName}
       />
     )
   }

src/logic/wallets/store/selectors/index.ts

@@ -12,6 +12,11 @@ export const userAccountSelector = createSelector(providerSelector, (provider: P
   return account || ''
 })
 
+export const userEnsSelector = createSelector(providerSelector, (provider: ProviderState): string => {
+  const ensName = provider.get('ensDomain')
+  return ensName || ''
+})
+
 export const providerNameSelector = createSelector(providerSelector, (provider: ProviderState): string | undefined => {
   const name = provider.get('name')
   return name ? name.toLowerCase() : undefined