From 83ca62b10877b52371bf4e105affee38c465a303 Mon Sep 17 00:00:00 2001
From: storywithoutend <storywithoutend@gmail.com>
Date: Sat, 16 Sep 2023 12:35:28 +0800
Subject: [PATCH] first round of unit tests

---
 .../ExpandableSection.test.tsx                |  14 ++
 .../PseudoActionButton.test.tsx               |  43 ++++++
 .../PseudoActionButton/PseudoActionButton.tsx |  17 ++-
 .../AvatarWithIdentifier.test.tsx             |  62 +++++++++
 .../AvatarWithIdentifier.tsx                  |  16 +--
 .../QuestionTooltip/QuestionTooltip.test.tsx  |  19 +++
 .../QuestionTooltip/QuestionTooltip.tsx       |   2 +-
 .../hooks/useOwnershipWarning.test.tsx        | 127 ++++++++++++++++++
 .../hooks/useOwnershipWarning.tsx             |  11 +-
 .../ContractSection/ContractSection.test.tsx  |  29 ++++
 .../ContractSection/ContractSection.tsx       |  13 +-
 .../components/ExpiryPanel.test.tsx           |  14 ++
 .../ExpirySection/components/ExpiryPanel.tsx  |  12 +-
 .../ExpirySection/hooks/useExpiryActions.tsx  |   6 +-
 .../ExpirySection/hooks/useExpiryDetails.ts   |   7 +-
 .../RolesSection/hooks/useRoleActions.tsx     |   4 +-
 .../useRoles/utils/getAvailableRoles.test.ts  |   2 +-
 .../components/SearchViewResult.tsx           |   7 +-
 src/utils/date.test.ts                        |  21 +++
 src/utils/date.ts                             |   1 +
 src/utils/name.test.ts                        |  33 +++++
 src/utils/name.ts                             |   5 +
 22 files changed, 429 insertions(+), 36 deletions(-)
 create mode 100644 src/components/@atoms/ExpandableSection/ExpandableSection.test.tsx
 create mode 100644 src/components/@atoms/PseudoActionButton/PseudoActionButton.test.tsx
 create mode 100644 src/components/@molecules/AvatarWithIdentifier/AvatarWithIdentifier.test.tsx
 create mode 100644 src/components/@molecules/QuestionTooltip/QuestionTooltip.test.tsx
 create mode 100644 src/components/pages/profile/[name]/tabs/OwnershipTab/hooks/useOwnershipWarning.test.tsx
 create mode 100644 src/components/pages/profile/[name]/tabs/OwnershipTab/sections/ContractSection/ContractSection.test.tsx
 create mode 100644 src/components/pages/profile/[name]/tabs/OwnershipTab/sections/ExpirySection/components/ExpiryPanel.test.tsx
 create mode 100644 src/utils/date.test.ts
 create mode 100644 src/utils/name.test.ts

diff --git a/src/components/@atoms/ExpandableSection/ExpandableSection.test.tsx b/src/components/@atoms/ExpandableSection/ExpandableSection.test.tsx
new file mode 100644
index 000000000..bd4dd4910
--- /dev/null
+++ b/src/components/@atoms/ExpandableSection/ExpandableSection.test.tsx
@@ -0,0 +1,14 @@
+import { render, screen, userEvent} from '@app/test-utils'
+import { ExpandableSection } from './ExpandableSection'
+
+describe('ExpandableSection', () => {
+  it('should expand and close when header is clicked', async () => {
+    render(<ExpandableSection title="Test">CONTENT</ExpandableSection>)
+    const header = screen.getByRole('button', { name: /Test/i })
+    expect(screen.getByText('CONTENT')).not.toBeVisible()
+    await userEvent.click(header)
+    expect(screen.getByText('CONTENT')).toBeVisible()
+    await userEvent.click(header)
+    expect(screen.getByText('CONTENT')).not.toBeVisible()
+  })
+})
\ No newline at end of file
diff --git a/src/components/@atoms/PseudoActionButton/PseudoActionButton.test.tsx b/src/components/@atoms/PseudoActionButton/PseudoActionButton.test.tsx
new file mode 100644
index 000000000..c54104f37
--- /dev/null
+++ b/src/components/@atoms/PseudoActionButton/PseudoActionButton.test.tsx
@@ -0,0 +1,43 @@
+import { act, render, screen, userEvent, waitFor} from '@app/test-utils'
+import { PseudoActionButton } from './PseudoActionButton'
+
+beforeAll(() => {
+  jest.useFakeTimers()
+})
+
+afterAll(() => {
+  jest.useRealTimers()
+})
+
+describe('PseudoActionButton', () => {
+  it('should show loading state when clicked and reset after timeout has been run', async () => {
+    const testIcon = <div data-testid="icon"/>
+    render(<PseudoActionButton prefix={testIcon} timeout={500}>Test</PseudoActionButton>)
+    const user = userEvent.setup({ advanceTimers: jest.advanceTimersByTime})
+    const button = screen.getByRole('button', { name: /Test/i })
+    const icon = screen.getByTestId('icon')
+    expect(icon).toBeVisible()
+    await user.click(button)
+    expect(icon).not.toBeVisible()
+    act(() => {
+      jest.runAllTimers()
+    })
+    await waitFor(() => {
+      expect(screen.getByTestId('icon')).toBeVisible()
+    })
+  })
+
+  it('should maintain loading state if loading is set to true', async () => {
+    const testIcon = <div data-testid="icon"/>
+    render(<PseudoActionButton loading prefix={testIcon} timeout={500}>Test</PseudoActionButton>)
+    const user = userEvent.setup({ advanceTimers: jest.advanceTimersByTime})
+    const button = screen.getByRole('button', { name: /Test/i })
+    expect(screen.queryByTestId('icon')).toEqual(null)
+    await user.click(button)
+    expect(screen.queryByTestId('icon')).toEqual(null)
+    act(() => {
+      jest.runAllTimers()
+    })
+    expect(screen.queryByTestId('icon')).toEqual(null)
+  })
+})
\ No newline at end of file
diff --git a/src/components/@atoms/PseudoActionButton/PseudoActionButton.tsx b/src/components/@atoms/PseudoActionButton/PseudoActionButton.tsx
index 267bd52c6..beb66c1ba 100644
--- a/src/components/@atoms/PseudoActionButton/PseudoActionButton.tsx
+++ b/src/components/@atoms/PseudoActionButton/PseudoActionButton.tsx
@@ -1,20 +1,27 @@
-import { ComponentProps, useEffect, useState } from 'react'
+import { ComponentProps, useEffect, useRef, useState } from 'react'
 
 import { Button } from '@ensdomains/thorin'
 
-type Props = ComponentProps<typeof Button>
+type Props = { timeout?: number } & ComponentProps<typeof Button>
 
-export const PseudoActionButton = ({ loading, onClick, ...props }: Props) => {
+export const PseudoActionButton = ({ loading, onClick, timeout = 3000, ...props }: Props) => {
   const [pseudoLoading, setPseudoLoading] = useState(false)
+
+  const timerRef = useRef<ReturnType<typeof setTimeout> | null>(null)
   useEffect(() => {
-    if (pseudoLoading) setTimeout(() => setPseudoLoading(false), 5000)
-  }, [pseudoLoading, setPseudoLoading])
+    return () => {
+      if (timerRef.current) clearTimeout(timerRef.current)
+    }
+  }, [])
+
   return (
     <Button
       {...props}
       loading={loading || pseudoLoading}
       onClick={(e) => {
         setPseudoLoading(true)
+        if (timerRef.current) clearTimeout(timerRef.current)
+        timerRef.current = setTimeout(() => setPseudoLoading(false), timeout)
         onClick?.(e)
       }}
     />
diff --git a/src/components/@molecules/AvatarWithIdentifier/AvatarWithIdentifier.test.tsx b/src/components/@molecules/AvatarWithIdentifier/AvatarWithIdentifier.test.tsx
new file mode 100644
index 000000000..753d7ab84
--- /dev/null
+++ b/src/components/@molecules/AvatarWithIdentifier/AvatarWithIdentifier.test.tsx
@@ -0,0 +1,62 @@
+import { render, screen} from '@app/test-utils'
+
+import { AvatarWithIdentifier } from './AvatarWithIdentifier'
+
+const mockUsePrimary = jest.fn().mockImplementation((address) => {
+  console.log('mockUsePrimary', address)
+  return ({
+  data: address === '0xaddressWithoutAPrimaryName' ? undefined : { beautifiedName: 'test.eth', name: 'test.eth' },
+  isLoading: false
+})})
+jest.mock('@app/hooks/usePrimary', () => ({
+  usePrimary: (address: unknown, skip: boolean) => skip ? {isLoading: false} : mockUsePrimary(address)
+}))
+
+jest.mock('@app/components/AvatarWithZorb', () => ({
+  AvatarWithZorb: () => <div>ZORB</div>
+}))
+
+afterEach(() => {
+  jest.clearAllMocks()
+})
+
+describe('AvatarWithIdentifier', () => {
+  it('should render', async () => {
+    render(<AvatarWithIdentifier address="0x1234" />)
+  })
+
+  it('should render name and address', async () => {
+    render(<AvatarWithIdentifier address="0x1234" />)
+    expect(screen.getByText('test.eth')).toBeVisible()
+    expect(screen.getByText('0x1234')).toBeVisible()
+  })
+
+  it('should overwrite subtitle if prop is provided', async () => {
+    render(<AvatarWithIdentifier address="0x1234" subtitle='subtitle'/>)
+    expect(screen.getByText('test.eth')).toBeVisible()
+    expect(screen.getByText('subtitle')).toBeVisible()
+    expect(screen.queryByText('0x1234')).toEqual(null)
+  })
+
+  it('should display shortened address as title if address does not have primary name', async () => {
+    render(<AvatarWithIdentifier address="0xaddressWithoutAPrimaryName"/>)
+    expect(screen.getByTestId('avatar-label-title')).toHaveTextContent('0xadd...yName')
+  })
+
+  it('should display full address as title if address does not have primary name and shortenAddressAsTitle is false', async () => {
+    render(<AvatarWithIdentifier address="0xaddressWithoutAPrimaryName" shortenAddressAsTitle={false}/>)
+    expect(screen.getByTestId('avatar-label-title')).toHaveTextContent('0xaddressWithoutAPrimaryName')
+  })
+
+  it('should display subtitle and address as title if address does not have primary name and subtitle is provided', async () => {
+    render(<AvatarWithIdentifier address="0xaddressWithoutAPrimaryName" subtitle='subtitle'/>)
+    expect(screen.getByTestId('avatar-label-title')).toHaveTextContent('0xadd...yName')
+    expect(screen.getByText('subtitle')).toBeVisible()
+  })
+
+  it('should not call usePrimary if name is provided', async () => {
+    render(<AvatarWithIdentifier address="0x1234" name="name.eth" />)
+    expect(mockUsePrimary).not.toHaveBeenCalled()
+    expect(screen.getByText('name.eth')).toBeVisible()
+  })
+})
\ No newline at end of file
diff --git a/src/components/@molecules/AvatarWithIdentifier/AvatarWithIdentifier.tsx b/src/components/@molecules/AvatarWithIdentifier/AvatarWithIdentifier.tsx
index d6e15ab2b..eb4b6ab51 100644
--- a/src/components/@molecules/AvatarWithIdentifier/AvatarWithIdentifier.tsx
+++ b/src/components/@molecules/AvatarWithIdentifier/AvatarWithIdentifier.tsx
@@ -1,9 +1,9 @@
 import styled, { css } from 'styled-components'
-import { useChainId } from 'wagmi'
 
 import { Typography } from '@ensdomains/thorin'
 
 import { AvatarWithZorb } from '@app/components/AvatarWithZorb'
+import { useChainId } from '@app/hooks/useChainId'
 import { usePrimary } from '@app/hooks/usePrimary'
 import { QuerySpace } from '@app/types'
 import { emptyAddress } from '@app/utils/constants'
@@ -41,7 +41,7 @@ type Props = {
   name?: string
   subtitle?: string
   size?: QuerySpace
-  shorten?: boolean
+  shortenAddressAsTitle?: boolean
 }
 
 export const AvatarWithIdentifier = ({
@@ -49,31 +49,31 @@ export const AvatarWithIdentifier = ({
   address,
   subtitle,
   size = '10',
-  shorten = true,
+  shortenAddressAsTitle = true,
 }: Props) => {
   const primary = usePrimary(address, !address || !!name || address === emptyAddress)
   const network = useChainId()
 
   const _name = name || primary.data?.beautifiedName
-  const _title = _name || (shorten ? shortenAddress(address) : address)
+  const _title = _name || (shortenAddressAsTitle ? shortenAddress(address) : address)
   const _subtitle =
     subtitle || (primary.data?.beautifiedName || name ? shortenAddress(address) : undefined)
 
-  const isTitleFullAddress = !shorten && !_name
+  const isTitleFullAddress = !shortenAddressAsTitle && !_name
 
   return (
     <Container>
       <AvatarWithZorb label={_title} address={address} name={_name} size={size} network={network} />
       <TextContainer>
         {isTitleFullAddress ? (
-          <AddressTitleContainer>{_title}</AddressTitleContainer>
+          <AddressTitleContainer data-testid="avatar-label-title">{_title}</AddressTitleContainer>
         ) : (
-          <Typography fontVariant="bodyBold" ellipsis data-testid="avatar-label-name">
+          <Typography fontVariant="bodyBold" ellipsis data-testid="avatar-label-title">
             {_title}
           </Typography>
         )}
         {_subtitle && (
-          <Typography fontVariant="extraSmall" color="grey" data-testid="avatar-label-address">
+          <Typography fontVariant="extraSmall" color="grey" data-testid="avatar-label-subtitle">
             {_subtitle}
           </Typography>
         )}
diff --git a/src/components/@molecules/QuestionTooltip/QuestionTooltip.test.tsx b/src/components/@molecules/QuestionTooltip/QuestionTooltip.test.tsx
new file mode 100644
index 000000000..385a024b5
--- /dev/null
+++ b/src/components/@molecules/QuestionTooltip/QuestionTooltip.test.tsx
@@ -0,0 +1,19 @@
+import { render, screen, userEvent} from '@app/test-utils'
+
+import { QuestionTooltip } from './QuestionTooltip'
+
+describe('QuestionTooltip', () => {
+  it('should render and show tooltip', async () => {
+    render(<QuestionTooltip content="CONTENT"/>)
+    await userEvent.hover(screen.getByTestId('question-icon'))
+    expect(screen.getByText('CONTENT')).toBeVisible()
+    expect(screen.queryByText('action.learnMore')).toEqual(null)
+  })
+
+  it('should render and show tooltip with link', async () => {
+    render(<QuestionTooltip content="CONTENT" link="https://google.com"/>)
+    await userEvent.hover(screen.getByTestId('question-icon'))
+    expect(screen.getByText('CONTENT')).toBeVisible()
+    expect(screen.getByText('action.learnMore')).toBeVisible()
+  })
+})
\ No newline at end of file
diff --git a/src/components/@molecules/QuestionTooltip/QuestionTooltip.tsx b/src/components/@molecules/QuestionTooltip/QuestionTooltip.tsx
index b1cd6d908..2ede74150 100644
--- a/src/components/@molecules/QuestionTooltip/QuestionTooltip.tsx
+++ b/src/components/@molecules/QuestionTooltip/QuestionTooltip.tsx
@@ -65,7 +65,7 @@ export const QuestionTooltip = ({ content, link, ...props }: Props) => {
   )
   return (
     <Tooltip {...props} content={_content} background="indigoSurface">
-      <IconWrapper>
+      <IconWrapper data-testid="question-icon">
         <QuestionCircleSVG />
       </IconWrapper>
     </Tooltip>
diff --git a/src/components/pages/profile/[name]/tabs/OwnershipTab/hooks/useOwnershipWarning.test.tsx b/src/components/pages/profile/[name]/tabs/OwnershipTab/hooks/useOwnershipWarning.test.tsx
new file mode 100644
index 000000000..9ca448cb4
--- /dev/null
+++ b/src/components/pages/profile/[name]/tabs/OwnershipTab/hooks/useOwnershipWarning.test.tsx
@@ -0,0 +1,127 @@
+import { renderHook } from '@app/test-utils'
+
+import { useOwnershipWarning } from './useOwnershipWarning'
+
+jest.mock('@app/hooks/useAccountSafely', () => ({
+  useAccountSafely: () => ({
+    address: '0x1234'
+  })
+}))
+
+jest.mock('@app/hooks/useParentBasicName', () => () => ({
+    isLoading: false,
+    ownerData: {
+      owner: '0x456'
+    }
+}))
+
+describe('useOwnershipWarning', () => {
+  it('should return a warning if user is owner not manager of 2ld eth name ', async () => {
+    const { result } = renderHook(() => useOwnershipWarning({
+      name: 'test.eth',
+      nameType: {
+        data: 'eth-unwrapped-2ld',
+        isLoading: false
+      } as any,
+      details: {
+        isLoading: false,
+        ownerData: {
+          registrant: '0x1234',
+          owner: '0x456'
+        },
+        dnsOwner: '0x1234'
+      } as any
+    }))
+    expect(result.current.data).toEqual('tabs.ownership.warning.ownerNotManager')
+  })
+
+  it('should return a warning if user is dns owner not manager of 2ld dns name ', async () => {
+    const { result } = renderHook(() => useOwnershipWarning({
+      name: 'test.com',
+      nameType: {
+        data: 'dns-unwrapped-2ld',
+        isLoading: false
+      } as any,
+      details: {
+        isLoading: false,
+        ownerData: {
+          owner: '0x456'
+        },
+        dnsOwner: '0x1234'
+      } as any
+    }))
+    expect(result.current.data).toEqual('tabs.ownership.warning.dnsOwnerNotManager')
+  })
+
+  it('should return a warning if user is manager not dns owner of 2ld dns name ', async () => {
+    const { result } = renderHook(() => useOwnershipWarning({
+      name: 'test.com',
+      nameType: {
+        data: 'dns-unwrapped-2ld',
+        isLoading: false
+      } as any,
+      details: {
+        isLoading: false,
+        ownerData: {
+          owner: '0x1234'
+        },
+        dnsOwner: '0x456'
+      } as any
+    }))
+    expect(result.current.data).toEqual('tabs.ownership.warning.managerNotDNSOwner')
+  })
+
+  it('should return a warning if user is manager not dns owner of 2ld dns name ', async () => {
+    const { result } = renderHook(() => useOwnershipWarning({
+      name: 'test.com',
+      nameType: {
+        data: 'dns-unwrapped-2ld',
+        isLoading: false
+      } as any,
+      details: {
+        isLoading: false,
+        ownerData: {
+          owner: '0x1234'
+        },
+        dnsOwner: '0x456'
+      } as any
+    }))
+    expect(result.current.data).toEqual('tabs.ownership.warning.managerNotDNSOwner')
+  })
+
+  it('should return a warning if user is manager not owner of unwrapped subname ', async () => {
+    const { result } = renderHook(() => useOwnershipWarning({
+      name: 'test.com',
+      nameType: {
+        data: 'dns-unwrapped-subname',
+        isLoading: false
+      } as any,
+      details: {
+        isLoading: false,
+        ownerData: {
+          owner: '0x1234'
+        },
+        dnsOwner: ''
+      } as any
+    }))
+    expect(result.current.data).not.toBeUndefined()
+  })
+
+  it('should return undefined if user is not owner or manager of subname ', async () => {
+    const { result } = renderHook(() => useOwnershipWarning({
+      name: 'test.com',
+      nameType: {
+        data: 'dns-unwrapped-subname',
+        isLoading: false
+      } as any,
+      details: {
+        isLoading: false,
+        ownerData: {
+          owner: '0x456'
+        },
+        dnsOwner: ''
+      } as any
+    }))
+    expect(result.current.data).toBeUndefined()
+  })
+})
\ No newline at end of file
diff --git a/src/components/pages/profile/[name]/tabs/OwnershipTab/hooks/useOwnershipWarning.tsx b/src/components/pages/profile/[name]/tabs/OwnershipTab/hooks/useOwnershipWarning.tsx
index 1dc268605..fc963be11 100644
--- a/src/components/pages/profile/[name]/tabs/OwnershipTab/hooks/useOwnershipWarning.tsx
+++ b/src/components/pages/profile/[name]/tabs/OwnershipTab/hooks/useOwnershipWarning.tsx
@@ -6,8 +6,7 @@ import { useAccountSafely } from '@app/hooks/useAccountSafely'
 import type { useNameDetails } from '@app/hooks/useNameDetails'
 import type { useNameType } from '@app/hooks/useNameType'
 import useParentBasicName from '@app/hooks/useParentBasicName'
-
-const getParentNameFromName = (name: string) => name.split('.').slice(1).join('.')
+import { parentName } from '@app/utils/name'
 
 type Input = {
   name: string
@@ -48,7 +47,7 @@ export const useOwnershipWarning = ({ name, nameType, details }: Input) => {
         [
           P.union('dns-unwrapped-2ld', 'dns-wrapped-2ld'),
           {
-            isRegistrant: P._,
+            isRegistrant: false,
             isManager: true,
             isParentOwner: P._,
             isDNSOwner: false,
@@ -60,7 +59,7 @@ export const useOwnershipWarning = ({ name, nameType, details }: Input) => {
         [
           P.union('dns-unwrapped-2ld', 'dns-wrapped-2ld'),
           {
-            isRegistrant: P._,
+            isRegistrant: false,
             isManager: false,
             isParentOwner: P._,
             isDNSOwner: true,
@@ -77,7 +76,7 @@ export const useOwnershipWarning = ({ name, nameType, details }: Input) => {
             'dns-wrapped-subname',
           ),
           {
-            isRegistrant: P._,
+            isRegistrant: false,
             isManager: true,
             isParentOwner: false,
             isDNSOwner: P._,
@@ -87,7 +86,7 @@ export const useOwnershipWarning = ({ name, nameType, details }: Input) => {
           <Trans
             t={t}
             i18nKey="tabs.ownership.warning.managerNotParentOwner"
-            values={{ parent: getParentNameFromName(name) }}
+            values={{ parent: parentName(name) }}
           />
         ),
       )
diff --git a/src/components/pages/profile/[name]/tabs/OwnershipTab/sections/ContractSection/ContractSection.test.tsx b/src/components/pages/profile/[name]/tabs/OwnershipTab/sections/ContractSection/ContractSection.test.tsx
new file mode 100644
index 000000000..b90ecf81c
--- /dev/null
+++ b/src/components/pages/profile/[name]/tabs/OwnershipTab/sections/ContractSection/ContractSection.test.tsx
@@ -0,0 +1,29 @@
+import { render, screen} from '@app/test-utils'
+import { ContractSection } from './ContractSection'
+import { BreakpointProvider, useBreakpoint } from '@app/utils/BreakpointProvider';
+
+jest.mock('@app/hooks/useContractAddress', () => ({
+  useContractAddress: () => '0xnamewrapper'
+}))
+
+jest.mock('@app/utils/BreakpointProvider', () => ({
+  useBreakpoint: () => ({
+  xs: true,
+  sm: true,
+  md: true,
+  lg: false,
+  xl: false,
+  })
+}))
+
+describe('ContractSection', () => {
+  it('should display if details.isWrapped is true', async () => {
+    render(<ContractSection details={{ isWrapped: true} as any} />)
+    expect(screen.getByText('0xnamewrapper')).toBeVisible()
+  })
+
+  it('should not display if details.isWrapped is false', async () => {
+    render(<ContractSection details={{ isWrapped: false } as any} />)
+    expect(screen.queryByText('0xnamewrapper')).toEqual(null)
+  })
+})
\ No newline at end of file
diff --git a/src/components/pages/profile/[name]/tabs/OwnershipTab/sections/ContractSection/ContractSection.tsx b/src/components/pages/profile/[name]/tabs/OwnershipTab/sections/ContractSection/ContractSection.tsx
index 08408e448..e476e17ae 100644
--- a/src/components/pages/profile/[name]/tabs/OwnershipTab/sections/ContractSection/ContractSection.tsx
+++ b/src/components/pages/profile/[name]/tabs/OwnershipTab/sections/ContractSection/ContractSection.tsx
@@ -2,9 +2,11 @@ import { useTranslation } from 'react-i18next'
 
 import { Card, Helper, RecordItem } from '@ensdomains/thorin'
 
+import { useChainName } from '@app/hooks/useChainName'
 import { useContractAddress } from '@app/hooks/useContractAddress'
 import type { useNameDetails } from '@app/hooks/useNameDetails'
 import { useBreakpoint } from '@app/utils/BreakpointProvider'
+import { makeEtherscanLink } from '@app/utils/utils'
 
 import { Header } from './components/Header'
 
@@ -15,17 +17,16 @@ type Props = {
 export const ContractSection = ({ details }: Props) => {
   const { t } = useTranslation('profile')
   const address = useContractAddress('NameWrapper')
+  const chainName = useChainName()
   const breakpoint = useBreakpoint()
 
-  if (!details.isWrapped) return null
+  const { isLoading } = details
+
+  if (!details.isWrapped || isLoading) return null
   return (
     <Card>
       <Header />
-      <RecordItem
-        as="a"
-        value=""
-        link="https://etherscan.io/address/0x57f1887a8BF19b14fC0dF6Fd9B2acc9Af147eA85"
-      >
+      <RecordItem as="a" value={address} link={makeEtherscanLink(address, chainName, 'address')}>
         {address}
       </RecordItem>
       <Helper type="info" alignment={breakpoint.sm ? 'horizontal' : 'vertical'}>
diff --git a/src/components/pages/profile/[name]/tabs/OwnershipTab/sections/ExpirySection/components/ExpiryPanel.test.tsx b/src/components/pages/profile/[name]/tabs/OwnershipTab/sections/ExpirySection/components/ExpiryPanel.test.tsx
new file mode 100644
index 000000000..85e6d4364
--- /dev/null
+++ b/src/components/pages/profile/[name]/tabs/OwnershipTab/sections/ExpirySection/components/ExpiryPanel.test.tsx
@@ -0,0 +1,14 @@
+import { render, screen } from "@app/test-utils"
+import { ExpiryPanel } from "./ExpiryPanel"
+
+describe('ExpiryPanel', () => {
+  it('should render', async () => {
+    render(<ExpiryPanel type="expiry" date={new Date(3255803954000)}/>)
+    expect(screen.getByTestId('expiry-panel-expiry')).toHaveTextContent(/Mar (2|3|4), 2073/)
+  })
+
+  it('should not throw error if date object is corrupted', async () => {
+    render(<ExpiryPanel type="expiry" date={'3255803954000' as any}/>)
+    expect(screen.getByTestId('expiry-panel-expiry')).toHaveTextContent(/Mar (2|3|4), 2073/)
+  })
+})
\ No newline at end of file
diff --git a/src/components/pages/profile/[name]/tabs/OwnershipTab/sections/ExpirySection/components/ExpiryPanel.tsx b/src/components/pages/profile/[name]/tabs/OwnershipTab/sections/ExpirySection/components/ExpiryPanel.tsx
index e50eebea8..83b8c4b83 100644
--- a/src/components/pages/profile/[name]/tabs/OwnershipTab/sections/ExpirySection/components/ExpiryPanel.tsx
+++ b/src/components/pages/profile/[name]/tabs/OwnershipTab/sections/ExpirySection/components/ExpiryPanel.tsx
@@ -4,6 +4,7 @@ import styled, { css } from 'styled-components'
 import { OutlinkSVG, Typography, mq } from '@ensdomains/thorin'
 
 import { QuestionTooltip } from '@app/components/@molecules/QuestionTooltip/QuestionTooltip'
+import { safeDateObj } from '@app/utils/date'
 
 type Props = {
   type: 'expiry' | 'grace-period' | 'registration' | 'parent-expiry' | 'parent-grace-period'
@@ -59,7 +60,8 @@ const Body = styled.div(
 
 export const ExpiryPanel = ({ type, date, link, tooltip }: Props) => {
   const { t } = useTranslation('profile')
-  const timestamp = type === 'expiry' ? date.getTime() : undefined
+  const _date = safeDateObj(date)
+  const timestamp = type === 'expiry' ? _date?.getTime() : undefined
   return (
     <Container data-testid={`expiry-panel-${type}`} data-timestamp={timestamp}>
       <Header>
@@ -83,10 +85,14 @@ export const ExpiryPanel = ({ type, date, link, tooltip }: Props) => {
       </Header>
       <Body>
         <Typography fontVariant="body" color="text">
-          {date.toLocaleDateString(undefined, { year: 'numeric', month: 'short', day: 'numeric' })}
+          {_date?.toLocaleDateString(undefined, {
+            year: 'numeric',
+            month: 'short',
+            day: 'numeric',
+          })}
         </Typography>
         <Typography fontVariant="small" color="grey">
-          {date.toLocaleTimeString(undefined, {
+          {_date?.toLocaleTimeString(undefined, {
             hour: 'numeric',
             minute: 'numeric',
             second: 'numeric',
diff --git a/src/components/pages/profile/[name]/tabs/OwnershipTab/sections/ExpirySection/hooks/useExpiryActions.tsx b/src/components/pages/profile/[name]/tabs/OwnershipTab/sections/ExpirySection/hooks/useExpiryActions.tsx
index 4be0b361a..87cad8194 100644
--- a/src/components/pages/profile/[name]/tabs/OwnershipTab/sections/ExpirySection/hooks/useExpiryActions.tsx
+++ b/src/components/pages/profile/[name]/tabs/OwnershipTab/sections/ExpirySection/hooks/useExpiryActions.tsx
@@ -4,6 +4,7 @@ import { CalendarSVG, FastForwardSVG } from '@ensdomains/thorin'
 
 import { useAbilities } from '@app/hooks/abilities/useAbilities'
 import { useTransactionFlow } from '@app/transaction-flow/TransactionFlowProvider'
+import { nameLevel } from '@app/utils/name'
 
 import type { useExpiryDetails } from './useExpiryDetails'
 
@@ -19,8 +20,11 @@ export const useExpiryActions = ({
   const { prepareDataInput } = useTransactionFlow()
   const showExtendNamesInput = prepareDataInput('ExtendNames')
 
+  // TODO: remove this when we add support for extending wrapped subnames
+  const is2ld = nameLevel(name) === '2ld'
+
   const expiryDate = expiryDetails?.find(({ type }) => type === 'expiry')?.date
-  if (!expiryDate) return null
+  if (!expiryDate || !is2ld) return null
   return [
     {
       label: t('action.setReminder'),
diff --git a/src/components/pages/profile/[name]/tabs/OwnershipTab/sections/ExpirySection/hooks/useExpiryDetails.ts b/src/components/pages/profile/[name]/tabs/OwnershipTab/sections/ExpirySection/hooks/useExpiryDetails.ts
index b7fe625fa..bd81dc961 100644
--- a/src/components/pages/profile/[name]/tabs/OwnershipTab/sections/ExpirySection/hooks/useExpiryDetails.ts
+++ b/src/components/pages/profile/[name]/tabs/OwnershipTab/sections/ExpirySection/hooks/useExpiryDetails.ts
@@ -8,6 +8,7 @@ import { useNameType } from '@app/hooks/useNameType'
 import useParentBasicName from '@app/hooks/useParentBasicName'
 import useRegistrationData from '@app/hooks/useRegistrationData'
 import { GRACE_PERIOD } from '@app/utils/constants'
+import { safeDateObj } from '@app/utils/date'
 import { makeEtherscanLink } from '@app/utils/utils'
 
 type Input = {
@@ -37,8 +38,10 @@ export const useExpiryDetails = ({ name, details }: Input, options: Options = {}
   const data = useMemo(
     () => {
       if (isLoading) return undefined
-      const expiry = details.expiryDate || details.wrapperData?.expiryDate
-      const parentExpiry = parentData?.expiryDate || parentData?.wrapperData?.expiryDate
+      const expiry = safeDateObj(details.expiryDate || details.wrapperData?.expiryDate)
+      const parentExpiry = safeDateObj(
+        parentData?.expiryDate || parentData?.wrapperData?.expiryDate,
+      )
 
       return match(nameType.data!)
         .with(P.union('eth-unwrapped-2ld', 'eth-emancipated-2ld', 'eth-locked-2ld'), () => [
diff --git a/src/components/pages/profile/[name]/tabs/OwnershipTab/sections/RolesSection/hooks/useRoleActions.tsx b/src/components/pages/profile/[name]/tabs/OwnershipTab/sections/RolesSection/hooks/useRoleActions.tsx
index a91a4f296..9761467ff 100644
--- a/src/components/pages/profile/[name]/tabs/OwnershipTab/sections/RolesSection/hooks/useRoleActions.tsx
+++ b/src/components/pages/profile/[name]/tabs/OwnershipTab/sections/RolesSection/hooks/useRoleActions.tsx
@@ -54,6 +54,7 @@ export const useRoleActions = ({ name, roles, details }: Props) => {
     const canSend = checkCanSend({ abilities: abilities.data, nameType: nameType.data })
     const canSendDNS = canSend && nameType.data?.startsWith('dns')
     const canSendEth = canSend && nameType.data?.startsWith('eth')
+    const canRefreshDNS = !!account.address && nameType.data?.startsWith('dns')
     const showSyncManager = checkCanSyncManager({
       address: account.address,
       nameType: nameType.data,
@@ -72,7 +73,7 @@ export const useRoleActions = ({ name, roles, details }: Props) => {
             onClick: () => showSendNameInput(`send-name`, { name }),
           }
         : null,
-      canSendDNS
+      canRefreshDNS
         ? {
             type: 'refresh-dns',
             icon: <CounterClockwiseArrowSVG />,
@@ -106,7 +107,6 @@ export const useRoleActions = ({ name, roles, details }: Props) => {
             icon: <PersonSVG />,
             label: t('action.editRoles'),
             primary: true,
-            disabled: availableRoles.length === 0,
             onClick: () => showEditRolesInput(`edit-roles`, { name }),
           }
         : null,
diff --git a/src/hooks/ownership/useRoles/utils/getAvailableRoles.test.ts b/src/hooks/ownership/useRoles/utils/getAvailableRoles.test.ts
index e5d1e0331..f7eab4239 100644
--- a/src/hooks/ownership/useRoles/utils/getAvailableRoles.test.ts
+++ b/src/hooks/ownership/useRoles/utils/getAvailableRoles.test.ts
@@ -27,6 +27,6 @@ describe('getAvailableRoles', () => {
     expect(getAvailableRoles({
       roles: [{address: '0x123', role: 'owner'}, {address: '0x456', role: 'manager'}, {address: '0x123', role: 'eth-record'}],
       abilities: {} as any
-    })).toEqual([{address: '0x123', role: 'owner'}, {address: '0x456', role: 'manager'}, {address: '0x123', role: 'eth-record'}])
+    })).toEqual([])
   })
 })
\ No newline at end of file
diff --git a/src/transaction-flow/input/SendName/views/SearchView/components/SearchViewResult.tsx b/src/transaction-flow/input/SendName/views/SearchView/components/SearchViewResult.tsx
index ba3206235..03c6e2d87 100644
--- a/src/transaction-flow/input/SendName/views/SearchView/components/SearchViewResult.tsx
+++ b/src/transaction-flow/input/SendName/views/SearchView/components/SearchViewResult.tsx
@@ -79,7 +79,12 @@ export const SearchViewResult = ({ address, name, excludeRole: role, roles, ...p
       {...props}
     >
       <LeftContainer>
-        <AvatarWithIdentifier address={address} name={name} shorten={false} size="8" />
+        <AvatarWithIdentifier
+          address={address}
+          name={name}
+          shortenAddressAsTitle={false}
+          size="8"
+        />
       </LeftContainer>
       {markers.primaryRole && (
         <RightContainer>
diff --git a/src/utils/date.test.ts b/src/utils/date.test.ts
new file mode 100644
index 000000000..c122fc9c3
--- /dev/null
+++ b/src/utils/date.test.ts
@@ -0,0 +1,21 @@
+import { safeDateObj } from './date'
+
+describe('safeDateObj', () => {
+  it('should return a date object for a date object', () => {
+    expect(safeDateObj(new Date(3255803954000))?.getTime()).toEqual(new Date(3255803954000).getTime())
+  })
+
+  it('should return a date object for a timestamp', () => {
+    expect(safeDateObj(3255803954000)?.getTime()).toEqual(new Date(3255803954000).getTime())
+  })
+
+  it('should return a date object for a string timestamp', () => {
+    const test = new Date('3255803954000')
+    console.log(!Number.isNaN(test))
+    expect(safeDateObj('3255803954000')?.getTime()).toEqual(new Date(3255803954000).getTime())
+  })
+
+  it('should return a date object for a date string', () => {
+    expect(safeDateObj('2073-03-03T21:59:14.000Z')?.getTime()).toEqual(new Date(3255803954000).getTime())
+  })
+})
\ No newline at end of file
diff --git a/src/utils/date.ts b/src/utils/date.ts
index 5c5e95e49..794be0658 100644
--- a/src/utils/date.ts
+++ b/src/utils/date.ts
@@ -1,5 +1,6 @@
 export const safeDateObj = (date: Date | string | number | undefined) => {
   if (!date) return undefined
+  if (typeof date === 'string' && /^\d+$/.test(date)) return new Date(parseInt(date))
   const dateObj = date instanceof Date ? date : new Date(date)
   if (Number.isNaN(dateObj)) return undefined
   return dateObj
diff --git a/src/utils/name.test.ts b/src/utils/name.test.ts
new file mode 100644
index 000000000..e632d6b41
--- /dev/null
+++ b/src/utils/name.test.ts
@@ -0,0 +1,33 @@
+import { nameLevel, parentName } from './name'
+
+describe('nameLevel', () => {
+  it('should return correct value for a subname ', () => {
+    expect(nameLevel('subname.test.eth')).toEqual('subname')
+  })
+
+  it('should return correct value for a 2ld ', () => {
+    expect(nameLevel('test.eth')).toEqual('2ld')
+  })
+
+  it('should return correct value for a tld', () => {
+    expect(nameLevel('eth')).toEqual('tld')
+  })
+
+  it('should return the correct value for [root]', () => {
+    expect(nameLevel('[root]')).toEqual('root')
+  })
+})
+
+describe('parentName', () => {
+  it('should return a 2ld name for a subname', () => {
+    expect(parentName('subname.test.eth')).toEqual('test.eth')
+  })
+  
+  it('should return a tld for a 2ld name', () => {
+    expect(parentName('test.eth')).toEqual('eth')
+  })
+
+  it('should return a root for a tld', () => {
+    expect(parentName('eth')).toEqual('[root]')
+  })
+})
\ No newline at end of file
diff --git a/src/utils/name.ts b/src/utils/name.ts
index 7bd738b60..430aedbe6 100644
--- a/src/utils/name.ts
+++ b/src/utils/name.ts
@@ -18,3 +18,8 @@ export const nameLevel = (name: string) => {
     )
     .otherwise(() => (name === '[root]' ? ('root' as const) : ('tld' as const)))
 }
+
+export const parentName = (name: string) => {
+  const parts = name.split('.').slice(1)
+  return parts.length ? parts.join('.') : '[root]'
+}