update link setup

ensdomains · Sep 20, 2023 · 130513b · 130513b
1 parent a2970e8
commit 130513b
Show file tree

Hide file tree

Showing 9 changed files with 109 additions and 53 deletions.
diff --git a/public/locales/en/profile.json b/public/locales/en/profile.json
@@ -85,8 +85,23 @@
           }
         },
         "contract": {
+          "title": "Contract address",
+          "tooltip": "The address of the contract that enables Wrapped ENS names.",
           "warning": "Some apps may show the contract address as the owner. This doesn't affect your ownership."
         }
+      },
+      "tooltips": {
+        "owner": "The owner of this name. The owner cannot change the profile.",
+        "owner-emancipated": "The owner of this name.",
+        "parent-owner": "The owner of this name's parent ({{parent}}).",
+        "dns-owner": "The owner of this name, as set by DNS records. The owner cannot change the profile.",
+        "manager": "The address that can change the profile, settings and profile editors.",
+        "profile-editor": "An addres that can only change the profile",
+        "subname-manager": "An address or contract responsible for subname renewals.",
+        "eth-record": "The address that will recieve funds sent to this name on mainnet.",
+        "grace-period": "A 90 day grace window after expiration, when the name can still be extended but not re-registered.",
+        "contract-address": "The address of the contract that enables Wrapped ENS names.",
+        "namewrapper": "The contract that enables Wrapped ENS names."
       }
     },
     "subnames": {

diff --git a/src/components/@molecules/QuestionTooltip/QuestionTooltip.tsx b/src/components/@molecules/QuestionTooltip/QuestionTooltip.tsx
@@ -54,7 +54,7 @@ export const QuestionTooltip = ({ content, link, ...props }: Props) => {
       <QuestionCircleSVG />
       <CenteredTypography fontVariant="small"> {content}</CenteredTypography>
       {link && (
-        <Link>
+        <Link href={link} target="_blank" rel="noreferrer noopener">
           <Typography fontVariant="smallBold" color="indigo">
             {t('action.learnMore')}
           </Typography>

diff --git a/...nts/pages/profile/[name]/tabs/OwnershipTab/sections/ContractSection/components/Header.tsx b/...nts/pages/profile/[name]/tabs/OwnershipTab/sections/ContractSection/components/Header.tsx
@@ -1,8 +1,10 @@
+import { useTranslation } from 'react-i18next'
 import styled, { css } from 'styled-components'
 
 import { Typography } from '@ensdomains/thorin'
 
 import { QuestionTooltip } from '@app/components/@molecules/QuestionTooltip/QuestionTooltip'
+import { getSupportLink } from '@app/utils/supportLinks'
 
 export const Container = styled.div(
   ({ theme }) => css`
@@ -13,10 +15,16 @@ export const Container = styled.div(
 )
 
 export const Header = () => {
+  const { t } = useTranslation('profile')
   return (
     <Container>
-      <Typography fontVariant="headingFour">Contract address</Typography>
-      <QuestionTooltip content="The address of the contract that enables Wrapped ENS names." />
+      <Typography fontVariant="headingFour">
+        {t('tabs.ownership.sections.contract.title')}
+      </Typography>
+      <QuestionTooltip
+        content={t('tabs.ownership.sections.contract.tooltip')}
+        link={getSupportLink('contract-address')}
+      />
     </Container>
   )
 }
diff --git a/.../pages/profile/[name]/tabs/OwnershipTab/sections/ExpirySection/components/ExpiryPanel.tsx b/.../pages/profile/[name]/tabs/OwnershipTab/sections/ExpirySection/components/ExpiryPanel.tsx
@@ -11,6 +11,7 @@ type Props = {
   date: Date
   link?: string
   tooltip?: string
+  supportLink?: string
 }
 
 const Container = styled.div(({ theme }) => [
@@ -58,7 +59,7 @@ const Body = styled.div(
   `,
 )
 
-export const ExpiryPanel = ({ type, date, link, tooltip }: Props) => {
+export const ExpiryPanel = ({ type, date, link, tooltip, supportLink }: Props) => {
   const { t } = useTranslation('profile')
   const _date = safeDateObj(date)
   const timestamp = type === 'expiry' ? _date?.getTime() : undefined
@@ -81,7 +82,7 @@ export const ExpiryPanel = ({ type, date, link, tooltip }: Props) => {
             <OutlinkSVG />
           </Link>
         )}
-        {tooltip && <QuestionTooltip content={tooltip} />}
+        {tooltip && <QuestionTooltip content={tooltip} link={supportLink} />}
       </Header>
       <Body>
         <Typography fontVariant="body" color="text">

diff --git a/...s/pages/profile/[name]/tabs/OwnershipTab/sections/ExpirySection/hooks/useExpiryDetails.ts b/...s/pages/profile/[name]/tabs/OwnershipTab/sections/ExpirySection/hooks/useExpiryDetails.ts
@@ -10,6 +10,7 @@ import useRegistrationData from '@app/hooks/useRegistrationData'
 import { GRACE_PERIOD } from '@app/utils/constants'
 import { safeDateObj } from '@app/utils/date'
 import { parentName } from '@app/utils/name'
+import { getSupportLink } from '@app/utils/supportLinks'
 import { makeEtherscanLink } from '@app/utils/utils'
 
 type Input = {
@@ -51,43 +52,67 @@ export const useExpiryDetails = ({ name, details }: Input, options: Options = {}
 
       return match(nameType.data!)
         .with(P.union('eth-unwrapped-2ld', 'eth-emancipated-2ld', 'eth-locked-2ld'), () => [
-          {
-            type: 'expiry',
-            date: expiry,
-          },
-          {
-            type: 'grace-period',
-            date: expiry ? new Date(expiry.getTime() + GRACE_PERIOD) : undefined,
-            tooltip: t('tabs.ownership.sections.expiry.panel.grace-period.tooltip'),
-          },
-          {
-            type: 'registration',
-            date: registrationData?.data?.registrationDate,
-            link: makeEtherscanLink(registrationData?.data?.transactionHash!, chainName),
-          },
+          ...(expiry
+            ? [
+                {
+                  type: 'expiry',
+                  date: expiry,
+                },
+                {
+                  type: 'grace-period',
+                  date: expiry ? new Date(expiry.getTime() + GRACE_PERIOD) : undefined,
+                  tooltip: t('tabs.ownership.sections.expiry.panel.grace-period.tooltip'),
+                  supportLink: getSupportLink('grace-period'),
+                },
+              ]
+            : []),
+          ...(registrationData?.data
+            ? [
+                {
+                  type: 'registration',
+                  date: registrationData?.data?.registrationDate,
+                  link: makeEtherscanLink(registrationData?.data?.transactionHash!, chainName),
+                },
+              ]
+            : []),
         ])
         .with(P.union('eth-emancipated-subname', 'eth-locked-subname'), () => [
-          {
-            type: 'expiry',
-            date: expiry,
-          },
-          {
-            type: 'parent-expiry',
-            date: parentExpiry,
-          },
+          ...(expiry
+            ? [
+                {
+                  type: 'expiry',
+                  date: expiry,
+                },
+              ]
+            : []),
+          ...(parentExpiry
+            ? [
+                {
+                  type: 'parent-expiry',
+                  date: parentExpiry,
+                },
+              ]
+            : []),
         ])
         .with(
           P.union('eth-unwrapped-subname', 'eth-wrapped-subname', 'eth-pcc-expired-subname'),
-          () => [
-            {
-              type: 'parent-expiry',
-              date: parentExpiry,
-            },
-            {
-              type: 'parent-grace-period',
-              date: parentExpiry ? new Date(parentExpiry.getTime() + GRACE_PERIOD) : undefined,
-            },
-          ],
+          () =>
+            parentExpiry
+              ? [
+                  {
+                    type: 'parent-expiry',
+                    date: parentExpiry,
+                  },
+                  {
+                    type: 'parent-grace-period',
+                    date: parentExpiry
+                      ? new Date(parentExpiry.getTime() + GRACE_PERIOD)
+                      : undefined,
+                    tooltip: t('tabs.ownership.sections.expiry.panel.grace-period.tooltip'),
+                    supportLink: getSupportLink('grace-period'),
+                  },
+                ]
+              : [],
         )
         .with(
           P.union(

diff --git a/src/components/pages/profile/[name]/tabs/OwnershipTab/sections/RolesSection/RolesSection.tsx b/src/components/pages/profile/[name]/tabs/OwnershipTab/sections/RolesSection/RolesSection.tsx
@@ -44,6 +44,7 @@ export const RolesSection = ({ name, roles, details }: Props) => {
           {...role}
           actions={actions.data}
           isWrapped={details.isWrapped}
+          isEmancipated={!!details.wrapperData?.parent.PARENT_CANNOT_CONTROL}
         />
       ))}
       <Footer>

diff --git a/...nents/pages/profile/[name]/tabs/OwnershipTab/sections/RolesSection/components/RoleRow.tsx b/...nents/pages/profile/[name]/tabs/OwnershipTab/sections/RolesSection/components/RoleRow.tsx
@@ -63,9 +63,10 @@ type Props = {
   roles: Role[]
   actions: ReturnType<typeof useRoleActions>['data']
   isWrapped: boolean
+  isEmancipated: boolean
 }
 
-export const RoleRow = ({ address, roles, actions, isWrapped }: Props) => {
+export const RoleRow = ({ address, roles, actions, isWrapped, isEmancipated }: Props) => {
   const router = useRouterWithHistory()
   const { t } = useTranslation('common')
 
@@ -145,7 +146,7 @@ export const RoleRow = ({ address, roles, actions, isWrapped }: Props) => {
           <AvatarWithIdentifier name={primary.data?.name} address={address} size="10" />
           <RoleTagContainer data-testid="role-tag-container">
             {roles?.map((role) => (
-              <RoleTag key={role} role={role} />
+              <RoleTag key={role} role={role} isEmancipated={isEmancipated} />
             ))}
           </RoleTagContainer>
         </InnerContainer>

diff --git a/...nents/pages/profile/[name]/tabs/OwnershipTab/sections/RolesSection/components/RoleTag.tsx b/...nents/pages/profile/[name]/tabs/OwnershipTab/sections/RolesSection/components/RoleTag.tsx
@@ -4,10 +4,9 @@ import styled, { css } from 'styled-components'
 
 import { OutlinkSVG, QuestionCircleSVG, Tooltip, Typography } from '@ensdomains/thorin'
 
+import { Role } from '@app/hooks/ownership/useRoles/useRoles'
 import { getSupportLink } from '@app/utils/supportLinks'
 
-import { Role } from '../../../../../../../../../hooks/ownership/useRoles/useRoles'
-
 const TooltipContent = styled.div(
   ({ theme }) => css`
     display: flex;
@@ -49,9 +48,10 @@ const Container = styled.button(
   `,
 )
 
-export const RoleTag = ({ role }: { role: Role }) => {
-  const { t } = useTranslation('common')
-  const link = getSupportLink(role)
+export const RoleTag = ({ role, isEmancipated }: { role: Role; isEmancipated: boolean }) => {
+  const { t } = useTranslation('profile')
+  const _role = isEmancipated && role === 'owner' ? 'owner-emancipated' : role
+  const link = getSupportLink(_role)
   const [open, setOpen] = useState<true | undefined>()
   return (
     <Tooltip
@@ -60,12 +60,12 @@ export const RoleTag = ({ role }: { role: Role }) => {
         <TooltipContent onMouseLeave={() => setOpen(undefined)}>
           <QuestionCircleSVG />
           <Typography color="text" fontVariant="small">
-            {t(`roles.${role}.description`)}
+            {t(`tabs.ownership.tooltips.${_role}`)}
           </Typography>
           {link && (
-            <Link href={link}>
+            <Link href={link} target="_blank" rel="noreferrer noopener">
               <Typography color="indigo" fontVariant="small">
-                {t('action.learnMore')}
+                {t('action.learnMore', { ns: 'common' })}
               </Typography>
               <OutlinkSVG />
             </Link>
@@ -80,7 +80,7 @@ export const RoleTag = ({ role }: { role: Role }) => {
         onClick={() => setOpen((_open) => (_open ? undefined : true))}
       >
         <RoleLabel fontVariant="smallBold" color="indigo">
-          {t(`roles.${role}.title`)}
+          {t(`roles.${role}.title`, { ns: 'common' })}
         </RoleLabel>
       </Container>
     </Tooltip>

diff --git a/src/utils/supportLinks.ts b/src/utils/supportLinks.ts
@@ -8,11 +8,16 @@ const SUPPORT_LINKS = {
   fuses: 'https://support.ens.domains/en/articles/7902567-fuses',
   primaryName: 'https://support.ens.domains/en/articles/7902188-managing-a-name#h_b2baf0c02b',
   nameWrapper: 'https://support.ens.domains/en/articles/7902188-managing-a-name#h_cae4f1dea6',
-  owner: 'https://support.ens.domains',
-  manager: 'https://support.ens.domains',
-  'parent-owner': 'https://support.ens.domains',
-  'dns-owner': 'https://support.ens.domains',
-  'eth-record': 'https://support.ens.domains',
+  owner: undefined,
+  'owner-emancipated': undefined,
+  'parent-owner': undefined,
+  'dns-owner': undefined,
+  manager: undefined,
+  'profile-editor': undefined,
+  'subname-manager': undefined,
+  'eth-record': undefined,
+  'grace-period': undefined,
+  'contract-address': undefined,
 }
 
 type SupportTopic = keyof typeof SUPPORT_LINKS