advanced editor fix: abi, rebuilding state, delete addresses

e2e/specs/stateless/advancedEditor.spec.ts

@@ -0,0 +1,79 @@
+import { expect } from '@playwright/test'
+import { test } from '@root/playwright'
+
+test('should be able to maintain state when returning from transaction modal to advanced editor', async ({
+  login,
+  makeName,
+  makePageObject,
+}) => {
+  const name = await makeName({
+    label: 'profile',
+    type: 'legacy',
+    records: {
+      texts: [{ key: 'text', value: 'text' }],
+      coinTypes: [{ key: 'SOL', value: 'HN7cABqLq46Es1jh92dQQisAq662SmxELLLsHHe4YWrH' }],
+      contentHash: 'ipfs://bafybeico3uuyj3vphxpvbowchdwjlrlrh62awxscrnii7w7flu5z6fk77y',
+      abi: {
+        contentType: 1,
+        data: '{"test":"test"}',
+      },
+    },
+  })
+
+  const recordsPage = makePageObject('RecordsPage')
+  const advancedEditor = makePageObject('AdvancedEditorModal')
+  const transactionModal = makePageObject('TransactionModal')
+
+  await recordsPage.goto(name)
+  await login.connect()
+
+  // Validate records
+  await expect(recordsPage.getRecordValue('text', 'text')).toHaveText('text')
+  await expect(recordsPage.getRecordValue('address', 'sol')).toHaveText(
+    'HN7cABqLq46Es1jh92dQQisAq662SmxELLLsHHe4YWrH',
+  )
+  await expect(recordsPage.getRecordValue('contentHash')).toHaveText(
+    'ipfs://bafybeico3uuyj3vphxpvbowchdwjlrlrh62awxscrnii7w7flu5z6fk77y',
+  )
+  await expect(recordsPage.getRecordValue('abi')).toHaveText('"{\\"test\\":\\"test\\"}"')
+
+  await recordsPage.editRecordsButton.click()
+
+  // Validate advanced editor
+  await expect(await advancedEditor.recordInput('text', 'text')).toHaveValue('text')
+  await expect(await advancedEditor.recordInput('address', 'SOL')).toHaveValue(
+    'HN7cABqLq46Es1jh92dQQisAq662SmxELLLsHHe4YWrH',
+  )
+  await expect(await advancedEditor.recordInput('contentHash')).toHaveValue(
+    'ipfs://bafybeico3uuyj3vphxpvbowchdwjlrlrh62awxscrnii7w7flu5z6fk77y',
+  )
+  await expect(await advancedEditor.recordInput('abi')).toHaveValue('"{\\"test\\":\\"test\\"}"')
+
+  await advancedEditor.recordClearButton('text', 'text').then((button) => button.click())
+  await advancedEditor.recordClearButton('address', 'SOL').then((button) => button.click())
+  await advancedEditor.recordInput('contentHash').then((input) => input.fill(''))
+  await advancedEditor.recordInput('abi').then((input) => input.fill(''))
+
+  await advancedEditor.saveButton.click()
+
+  // Validate transaction display item
+  await expect(transactionModal.displayItem('update')).toHaveText('4 records')
+
+  await transactionModal.backButton.click()
+
+  // Validate inputs have been rebuilt correctly
+  await expect(await advancedEditor.recordComponent('text', 'text')).toHaveCount(0)
+  await expect(await advancedEditor.recordComponent('address', 'SOL')).toHaveCount(0)
+  await expect(await advancedEditor.recordInput('contentHash')).toHaveValue('')
+  await expect(await advancedEditor.recordInput('abi')).toHaveValue('')
+
+  await advancedEditor.saveButton.click()
+
+  await transactionModal.autoComplete()
+
+  // Validate change in records
+  await expect(recordsPage.getRecordButton('text', 'text')).toHaveCount(0)
+  await expect(recordsPage.getRecordButton('address', 'sol')).toHaveCount(0)
+  await expect(recordsPage.getRecordButton('contentHash')).toHaveCount(0)
+  await expect(recordsPage.getRecordButton('abi')).toHaveCount(0)
+})

playwright/pageObjects/advancedEditorModal.ts

@@ -0,0 +1,37 @@
+/* eslint-disable import/no-extraneous-dependencies */
+import { Locator, Page } from '@playwright/test'
+
+export class AdvancedEditorModal {
+  readonly page: Page
+
+  readonly saveButton: Locator
+
+  constructor(page: Page) {
+    this.page = page
+    this.saveButton = this.page.getByTestId('advanced-editor').getByRole('button', { name: 'Save' })
+  }
+
+  tab(tab: 'text' | 'address' | 'other') {
+    return this.page.getByTestId(`${tab}-tab`)
+  }
+
+  async recordComponent(type: 'text' | 'address' | 'contentHash' | 'abi', key?: string) {
+    if (['text', 'address'].includes(type)) {
+      await this.tab(type as 'text' | 'other').click()
+      return this.page.getByTestId(`record-input-${key}`)
+    }
+    await this.tab('other').click()
+    const _key = type === 'contentHash' ? 'Content Hash' : 'ABI'
+    return this.page.getByTestId(`record-input-${_key}`)
+  }
+
+  async recordInput(type: 'text' | 'address' | 'contentHash' | 'abi', key?: string) {
+    const component = await this.recordComponent(type, key)
+    return component.locator('input')
+  }
+
+  async recordClearButton(type: 'text' | 'address', key: string) {
+    const component = await this.recordComponent(type, key)
+    return component.locator('button')
+  }
+}

playwright/pageObjects/index.ts

@@ -3,13 +3,15 @@ import { Page } from '@playwright/test'
 import { Web3ProviderBackend } from 'headless-web3-provider'
 
 import { AddressPage } from './addressPage'
+import { AdvancedEditorModal } from './advancedEditorModal'
 import { EditRolesModal } from './editRolesModal'
 import { ExtendNamesModal } from './extendNamesModal'
 import { HomePage } from './homePage'
 import { MorePage } from './morePage'
 import { OwnershipPage } from './ownershipPage'
 import { PermissionsPage } from './permissionsPage'
 import { ProfilePage } from './profilePage'
+import { RecordsPage } from './recordsPage'
 import { RegistrationPage } from './registrationPage'
 import { SendNameModal } from './sendNameModal'
 import { SubnamesPage } from './subnamePage'
@@ -30,6 +32,8 @@ const pageObjects = {
   SendNameModal,
   SubnamesPage,
   TransactionModal,
+  RecordsPage,
+  AdvancedEditorModal,
 }
 
 type PageObjects = typeof pageObjects

playwright/pageObjects/recordsPage.ts

@@ -0,0 +1,26 @@
+/* eslint-disable import/no-extraneous-dependencies */
+import { Locator, Page } from '@playwright/test'
+
+export class RecordsPage {
+  readonly page: Page
+
+  readonly editRecordsButton: Locator
+
+  constructor(page: Page) {
+    this.page = page
+    this.editRecordsButton = this.page.getByRole('button', { name: 'Edit records' })
+  }
+
+  async goto(name: string) {
+    await this.page.goto(`/${name}?tab=records`)
+  }
+
+  getRecordButton(type: 'text' | 'address' | 'contentHash' | 'abi', key?: string) {
+    const testId = key ? `name-details-${type}-${key.toLowerCase()}` : `name-details-${type}`
+    return this.page.getByTestId(testId)
+  }
+
+  getRecordValue(type: 'text' | 'address' | 'contentHash' | 'abi', key?: string) {
+    return this.getRecordButton(type, key).locator('> div').last()
+  }
+}

playwright/pageObjects/transactionModal.ts

@@ -17,6 +17,8 @@ export class TransactionModal {
 
   readonly transactionModal: Locator
 
+  readonly backButton: Locator
+
   constructor(page: Page, wallet: Web3ProviderBackend) {
     this.page = page
     this.wallet = wallet
@@ -25,6 +27,7 @@ export class TransactionModal {
     this.completeButton = this.page.getByTestId('transaction-modal-complete-button')
     this.closeButton = this.page.getByTestId('close-icon')
     this.transactionModal = this.page.getByTestId('transaction-modal-inner')
+    this.backButton = this.page.locator('body .modal').getByRole('button', { name: 'Back' })
   }
 
   async authorize() {
@@ -53,4 +56,8 @@ export class TransactionModal {
     } while (isModalVisible)
     /* eslint-enable no-await-in-loop */
   }
+
+  displayItem(key: string, option = 'normal') {
+    return this.page.getByTestId(`display-item-${key}-${option}`).locator('> div').last()
+  }
 }

src/components/@molecules/AdvancedEditor/AdvancedEditorTabContent.tsx

@@ -25,6 +25,7 @@ const TabContentContainer = styled.div(
     display: flex;
     flex-direction: column;
     gap: ${theme.space['3']};
+    padding-right: ${theme.space['1']};
     overflow: hidden;
     flex: 1;
   `,

src/components/RecordItem.tsx

@@ -11,7 +11,7 @@ const RecordItem = ({
   itemKey?: string
   value: string
   showLegacy?: boolean
-  type: 'text' | 'address' | 'contentHash'
+  type: 'text' | 'address' | 'contentHash' | 'abi'
 }) => {
   const breakpoint = useBreakpoint()
   const keyLabel = showLegacy && itemKey ? itemKey?.replace('_LEGACY', '') : itemKey

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

@@ -261,7 +261,7 @@ export const RecordsTab = ({
               )}
             </SectionTitleContainer>
           </SectionHeader>
-          {abi && <RecordItem type="text" value={abi.data} />}
+          {abi && <RecordItem type="abi" value={abi.data} />}
         </RecordSection>
       </AllRecords>
       {canEdit && resolverAddress !== emptyAddress && (

src/hooks/useAdvancedEditor.test.ts

@@ -0,0 +1,54 @@
+import { normalizeAbi } from './useAdvancedEditor'
+
+describe('normalizeAbi', () => {
+  it('should normalize abi that is a string', () => {
+    expect(normalizeAbi("test")).toEqual({ contentType: 1, data: 'test' })
+  })
+
+  it('should normalize abi that is an empty string', () => {
+    expect(normalizeAbi("")).toEqual({ contentType: 1, data: '' })
+  })
+
+  it('should normalize abi with a string for data', () => {
+    expect(normalizeAbi({ data: 'test' })).toEqual({ contentType: 1, data: 'test' })
+  })
+
+  it('should normalize abi with an empty string for data', () => {
+    expect(normalizeAbi({ data: '' })).toEqual({ contentType: 1, data: '' })
+  })
+
+  it('should normalize abi with an object for data', () => {
+    expect(normalizeAbi({ data: {test: 'test'} })).toEqual({ contentType: 1, data: '{"test":"test"}' })
+  })
+  it('should normalize abi with an array for data', () => {
+    expect(normalizeAbi({ data: ['test'] })).toEqual({ contentType: 1, data: '["test"]' })
+  })
+
+  it('should normalize abi with an object for data', () => {
+    expect(normalizeAbi({ data: {test: 'test'} })).toEqual({ contentType: 1, data: '{"test":"test"}' })
+  })
+
+  it('should NOT normalize abi that is a number', () => {
+    expect(normalizeAbi(5 as any)).toBeUndefined()
+  })
+
+  it('should NOT normalize abi that is null', () => {
+    expect(normalizeAbi(null as any)).toBeUndefined()
+  })
+
+  it('should NOT normalize abi that is undefined', () => {
+    expect(normalizeAbi(undefined as any)).toBeUndefined()
+  })
+
+  it('should NOT normalize abi with null for data', () => {
+    expect(normalizeAbi({ data: null as any})).toBeUndefined()
+  })
+
+  it('should NOT normalize abi with undefined for data', () => {
+    expect(normalizeAbi({ data: undefined as any})).toBeUndefined()
+  })
+
+  it('should NOT normalize abi with a number for data', () => {
+    expect(normalizeAbi({ data: 5 as any})).toBeUndefined()
+  })
+})