diff --git a/src/components/ProfileSnippet.tsx b/src/components/ProfileSnippet.tsx
index c6474fb8a..3bc233c43 100644
--- a/src/components/ProfileSnippet.tsx
+++ b/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,14 +161,12 @@ 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
@@ -174,6 +174,8 @@ export const ProfileSnippet = ({
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={}
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 = ({
)
// eslint-disable-next-line react-hooks/exhaustive-deps
- }, [button, name, canEdit])
+ }, [button, name, abilities.data])
return (
@@ -231,7 +236,7 @@ export const ProfileSnippet = ({
label={name}
name={name}
network={network}
- noCache={canEdit}
+ noCache={abilities.data?.canEdit}
/>
{ActionButton && {ActionButton}}
diff --git a/src/components/pages/profile/[name]/tabs/MoreTab/Miscellaneous/ExtendButton.tsx b/src/components/pages/profile/[name]/tabs/MoreTab/Miscellaneous/ExtendButton.tsx
index 922b4988b..e210ed82c 100644
--- a/src/components/pages/profile/[name]/tabs/MoreTab/Miscellaneous/ExtendButton.tsx
+++ b/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={}
diff --git a/src/components/pages/profile/[name]/tabs/ProfileTab.tsx b/src/components/pages/profile/[name]/tabs/ProfileTab.tsx
index 5701e9b3c..8b9d5f0c1 100644
--- a/src/components/pages/profile/[name]/tabs/ProfileTab.tsx
+++ b/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 && (
diff --git a/src/hooks/abilities/useAbilities.ts b/src/hooks/abilities/useAbilities.ts
index d3be9d472..f6ece6448 100644
--- a/src/hooks/abilities/useAbilities.ts
+++ b/src/hooks/abilities/useAbilities.ts
@@ -56,7 +56,7 @@ export type SendAbilities = {
canSendError?: string
}
-type Abilities = ExtendAbilities &
+export type Abilities = ExtendAbilities &
DeleteAbilities &
EditAbilities &
ReclaimAbilities &
diff --git a/src/utils/abilities/shouldShowExtendWarning.test.ts b/src/utils/abilities/shouldShowExtendWarning.test.ts
new file mode 100644
index 000000000..d3c9f6ce1
--- /dev/null
+++ b/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)
+})
\ No newline at end of file
diff --git a/src/utils/abilities/shouldShowExtendWarning.ts b/src/utils/abilities/shouldShowExtendWarning.ts
new file mode 100644
index 000000000..84881d075
--- /dev/null
+++ b/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
+}