diff --git a/src/components/AppLayout/Header/components/ProviderDetails/UserDetails.tsx b/src/components/AppLayout/Header/components/ProviderDetails/UserDetails.tsx
index 10e1894e88..301dd1d45e 100644
--- a/src/components/AppLayout/Header/components/ProviderDetails/UserDetails.tsx
+++ b/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 = ({
)}
+ {ensName && (
+
+ {ensName}
+
+ )}
{userAddress ? (
{
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}`}
-
+
{connected ? (
-
+ ensName ? (
+
+ {ensName}
+
+ ) : (
+
+ )
) : (
Connection Error
diff --git a/src/components/AppLayout/Header/index.tsx b/src/components/AppLayout/Header/index.tsx
index b1782813cc..75aad66807 100644
--- a/src/components/AppLayout/Header/index.tsx
+++ b/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}
/>
)
}
diff --git a/src/logic/wallets/store/selectors/index.ts b/src/logic/wallets/store/selectors/index.ts
index b412337e10..80946bc79e 100644
--- a/src/logic/wallets/store/selectors/index.ts
+++ b/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