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