Merge branch 'main' into default-toggle-off

src/components/ProfileSnippet.tsx

@@ -5,8 +5,10 @@ import styled, { css } from 'styled-components'
 import { Button, NametagSVG, Tag, Typography, mq } from '@ensdomains/thorin'
 
 import FastForwardSVG from '@app/assets/FastForward.svg'
+import { useAbilities } from '@app/hooks/abilities/useAbilities'
 import useBeautifiedName from '@app/hooks/useBeautifiedName'
 import { useRouterWithHistory } from '@app/hooks/useRouterWithHistory'
+import { shouldShowExtendWarning } from '@app/utils/abilities/shouldShowExtendWarning'
 
 import { useTransactionFlow } from '../transaction-flow/TransactionFlowProvider'
 import { NameAvatar } from './AvatarWithZorb'
@@ -159,21 +161,21 @@ export const ProfileSnippet = ({
   getTextRecord,
   button,
   network,
-  canEdit,
   isPrimary,
   children,
 }: {
   name: string
   getTextRecord?: (key: string) => { value: string } | undefined
   button?: 'viewProfile' | 'extend' | 'register'
-  canEdit?: boolean
   isPrimary?: boolean
   network: number
   children?: React.ReactNode
 }) => {
   const router = useRouterWithHistory()
   const { t } = useTranslation('common')
 
+  const abilities = useAbilities(name)
+
   const { prepareDataInput } = useTransactionFlow()
   const showExtendNamesInput = prepareDataInput('ExtendNames')
 
@@ -194,7 +196,10 @@ export const ProfileSnippet = ({
           prefix={<FastForwardSVG />}
           data-testid="extend-button"
           onClick={() => {
-            showExtendNamesInput(`extend-names-${name}`, { names: [name], isSelf: canEdit })
+            showExtendNamesInput(`extend-names-${name}`, {
+              names: [name],
+              isSelf: shouldShowExtendWarning(abilities.data),
+            })
           }}
         >
           {t('action.extend', { ns: 'common' })}
@@ -221,7 +226,7 @@ export const ProfileSnippet = ({
         </Button>
       )
     // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [button, name, canEdit])
+  }, [button, name, abilities.data])
 
   return (
     <Container $banner={banner} data-testid="profile-snippet">
@@ -231,7 +236,7 @@ export const ProfileSnippet = ({
           label={name}
           name={name}
           network={network}
-          noCache={canEdit}
+          noCache={abilities.data?.canEdit}
         />
         <ButtonStack>
           {ActionButton && <DetailButtonWrapper>{ActionButton}</DetailButtonWrapper>}

src/components/pages/profile/[name]/tabs/MoreTab/Miscellaneous/ExtendButton.tsx

@@ -5,6 +5,7 @@ import { Button, FastForwardSVG, mq } from '@ensdomains/thorin'
 
 import { useAbilities } from '@app/hooks/abilities/useAbilities'
 import { useTransactionFlow } from '@app/transaction-flow/TransactionFlowProvider'
+import { shouldShowExtendWarning } from '@app/utils/abilities/shouldShowExtendWarning'
 
 const FastForwardIcon = styled.svg(
   ({ theme }) => css`
@@ -43,7 +44,7 @@ export const ExtendButton = ({ name }: { name: string }) => {
         onClick={() => {
           showExtendNamesInput(`extend-names-${name}`, {
             names: [name],
-            isSelf: abilities.data?.canEdit,
+            isSelf: shouldShowExtendWarning(abilities.data),
           })
         }}
         prefix={<FastForwardIcon as={FastForwardSVG} />}

src/components/pages/profile/[name]/tabs/ProfileTab.tsx

@@ -92,7 +92,6 @@ const ProfileTab = ({ nameDetails, name }: Props) => {
         network={chainId}
         getTextRecord={getTextRecord}
         button={snippetButton}
-        canEdit={abilities.data?.canEdit}
         isPrimary={name === primaryData?.name}
       >
         {nameDetails.isNonASCII && (

src/hooks/abilities/useAbilities.ts

@@ -56,7 +56,7 @@ export type SendAbilities = {
   canSendError?: string
 }
 
-type Abilities = ExtendAbilities &
+export type Abilities = ExtendAbilities &
   DeleteAbilities &
   EditAbilities &
   ReclaimAbilities &

src/utils/abilities/shouldShowExtendWarning.test.ts

@@ -0,0 +1,17 @@
+import { shouldShowExtendWarning } from "./shouldShowExtendWarning"
+
+it('should return true when can edit', () => {
+  expect(shouldShowExtendWarning({ canEdit: true } as any)).toBe(true)
+})
+
+it('should return true when can send', () => {
+  expect(shouldShowExtendWarning({ canSend: true } as any)).toBe(true)
+})
+
+it('should return false when no abilities', () => {
+  expect(shouldShowExtendWarning(undefined)).toBe(false)
+})
+
+it('should return false when no edit or send abilities', () => {
+  expect(shouldShowExtendWarning({ canEdit: false, canSend: false } as any)).toBe(false)
+})

src/utils/abilities/shouldShowExtendWarning.ts

@@ -0,0 +1,6 @@
+import { Abilities } from '@app/hooks/abilities/useAbilities'
+
+export const shouldShowExtendWarning = (abilities: Abilities | undefined) => {
+  if (!abilities) return false
+  return abilities?.canEdit || abilities.canSend
+}