minor fix

src/components/pages/profile/[name]/Profile.tsx

@@ -254,7 +254,7 @@ const ProfileContent = ({ isSelf, isLoading: parentIsLoading, name }: Props) =>
                   </TabButton>
                 ))}
               </TabButtonContainer>
-              <ProfileEmptyBanner name={normalisedName} addresses={profile?.coins || []} />
+              <ProfileEmptyBanner name={normalisedName} />
             </>
           ),
           titleExtra: profile?.address ? (

src/components/pages/profile/[name]/ProfileEmptyBanner.test.tsx

@@ -1,53 +1,68 @@
-import { render, screen } from '@app/test-utils'
+import { mockFunction, render, screen } from '@app/test-utils'
 
 import { describe, expect, it, vi } from 'vitest'
 
-import { AddressRecord } from '@app/types'
+import { useProfile } from '@app/hooks/useProfile'
 
 import { ProfileEmptyBanner } from './ProfileEmptyBanner'
 
-vi.mock('@app/hooks/abilities/useAbilities', () => ({
-  useAbilities: () => ({
-    data: {
-      canSendOwner: true,
-      canSendManager: true,
-      canEditRecords: true,
-      sendNameFunctionCallDetails: {
-        sendManager: {
-          contract: 'contract',
-        },
-        sendOwner: {
-          contract: 'contract',
-        },
-      },
-    },
-    isLoading: false,
-  }),
-}))
 vi.mock('@app/hooks/useProtectedRoute', () => ({
   useProtectedRoute: vi.fn(),
 }))
 vi.mock('@app/utils/BreakpointProvider')
 vi.mock('next/router', async () => await vi.importActual('next-router-mock'))
+vi.mock('@app/hooks/useProfile')
+
+const mockUseProfile = mockFunction(useProfile)
 
 describe('ProfileEmptyBanner', () => {
-  it('should not display banner if have addresses', () => {
+  it('should not display banner if have records', () => {
     const name = 'test'
-    const addresses: AddressRecord[] = [
-      {
-        id: 1,
-        name: 'ADR1',
-        value: 'addr1-value',
+
+    mockUseProfile.mockImplementation(() => ({
+      data: {
+        texts: [
+          {
+            key: 'avatar',
+            value: 'http://localhost:3000',
+          },
+        ],
+        coins: [
+          {
+            id: 60,
+            name: 'eth',
+            value: '0x8327FcD61f5e90e1E05A3F49DCbc9346b7d111111',
+          },
+        ],
+        contentHash: null,
+        abi: null,
+        resolverAddress: '0x8327FcD61f5e90e1E05A3F49DCbc9346b7d111112',
+        isMigrated: true,
+        createdAt: {
+          date: '2024-08-02T10:33:00.000Z',
+          value: 1722594780000,
+        },
+        address: '0x8327FcD61f5e90e1E05A3F49DCbc9346b7d175f7',
       },
-    ]
-    render(<ProfileEmptyBanner name={name} addresses={addresses} />)
+      isLoading: false,
+    }))
+
+    render(<ProfileEmptyBanner name={name} />)
     expect(screen.queryByTestId('profile-empty-banner')).not.toBeInTheDocument()
   })
-  it('should display banner if have no addresses', () => {
+
+  it('should display banner if have no records', () => {
     const name = 'test'
-    const addresses: AddressRecord[] = []
 
-    render(<ProfileEmptyBanner name={name} addresses={addresses} />)
+    mockUseProfile.mockImplementation(() => ({
+      data: {
+        text: [],
+        coins: [],
+      },
+      isLoading: false,
+    }))
+
+    render(<ProfileEmptyBanner name={name} />)
     expect(screen.queryByTestId('profile-empty-banner')).toBeInTheDocument()
   })
 })

src/components/pages/profile/[name]/ProfileEmptyBanner.tsx

@@ -1,12 +1,13 @@
-import { useMemo } from 'react'
 import { useTranslation } from 'react-i18next'
 import styled, { css } from 'styled-components'
 
 import { Button, mq, Typography } from '@ensdomains/thorin'
 
 import StarsSVG from '@app/assets/Stars.svg'
 import { useProfileActions } from '@app/hooks/pages/profile/[name]/profile/useProfileActions/useProfileActions'
-import { AddressRecord } from '@app/types'
+import { useProfile } from '@app/hooks/useProfile'
+
+import { profileToProfileRecords } from './registration/steps/Profile/profileRecordUtils'
 
 const Container = styled.div(
   ({ theme }) => css`
@@ -30,22 +31,18 @@ const Container = styled.div(
   `,
 )
 
-export function ProfileEmptyBanner({
-  name,
-  addresses,
-}: {
-  addresses: AddressRecord[]
-  name: string
-}) {
+export function ProfileEmptyBanner({ name }: { name: string }) {
   const { t } = useTranslation('profile')
 
+  const { data: profile, isLoading: isProfileLoading } = useProfile({ name })
+  const existingRecords = profileToProfileRecords(profile)
   const profileActions = useProfileActions({
     name,
   })
 
-  const filteredAddresses = useMemo(() => addresses.filter(({ value }) => value), [addresses])
+  const records = existingRecords.filter(({ value }) => value)
 
-  if (filteredAddresses.length) return null
+  if (records.length || isProfileLoading) return null
 
   const action = (profileActions.profileActions ?? []).find(
     (i) => i.label === t('tabs.profile.actions.editProfile.label'),