diff --git a/public/locales/en/profile.json b/public/locales/en/profile.json index 2fe6d014e..2e85a2b20 100644 --- a/public/locales/en/profile.json +++ b/public/locales/en/profile.json @@ -310,6 +310,7 @@ "wrapName": "Wrap Name", "unwrap": "Unwrap Name", "unwrapWarning": "This name has revoked the permissions needed for this action.", + "tooltip": "The Name Wrapper enables additional functionality on ENS names.", "status": { "unwrapped": "Unwrapped", "wrapped": "Wrapped" diff --git a/src/components/pages/profile/[name]/tabs/MoreTab/NameWrapper.tsx b/src/components/pages/profile/[name]/tabs/MoreTab/NameWrapper.tsx index cfa1e0181..cad2f195d 100644 --- a/src/components/pages/profile/[name]/tabs/MoreTab/NameWrapper.tsx +++ b/src/components/pages/profile/[name]/tabs/MoreTab/NameWrapper.tsx @@ -9,6 +9,7 @@ import { AlertSVG, CheckSVG, LockSVG, mq, Typography } from '@ensdomains/thorin' import { cacheableComponentStyles } from '@app/components/@atoms/CacheableComponent' import { DisabledButtonWithTooltip } from '@app/components/@molecules/DisabledButtonWithTooltip' +import { QuestionTooltip } from '@app/components/@molecules/QuestionTooltip/QuestionTooltip' import { NameWrapperState } from '@app/hooks/fuses/useFusesStates' import type { Profile } from '@app/types' @@ -87,6 +88,14 @@ const HeaderContainer = styled.div` justify-content: space-between; ` +const Header = styled.div( + ({ theme }) => css` + display: flex; + align-items: center; + gap: ${theme.space[2]}; + `, +) + const getFuseStateFromWrapperData = (wrapperData?: GetWrapperDataReturnType): NameWrapperState => match(wrapperData) .with(P.nullish, () => 'unwrapped' as const) @@ -119,7 +128,10 @@ export const NameWrapper = ({ return ( - {t('tabs.more.token.nameWrapper')} +
+ {t('tabs.more.token.nameWrapper')} + +
{isButtonDisplayed ? ( isWrapped ? ( status === 'locked' ? (