Merge branch 'main' into FET1573-names-pagination-with-identical-expi…

…ry-and-creation-dates

e2e/specs/stateless/extendNames.spec.ts

@@ -11,7 +11,7 @@ import { daysToSeconds } from '@app/utils/time'
 
 import { test } from '../../../playwright'
 
-test('should be able to extend multiple names on the address page', async ({
+test('should be able to extend multiple names (including names in grace preiod) on the address page', async ({
   page,
   accounts,
   login,
@@ -26,11 +26,13 @@ test('should be able to extend multiple names on the address page', async ({
       label: 'extend-legacy',
       type: 'legacy',
       owner: 'user2',
+      duration: -24 * 60 * 60,
     },
     {
       label: 'wrapped',
       type: 'wrapped',
       owner: 'user2',
+      duration: -24 * 60 * 60,
     },
   ])
 
@@ -65,31 +67,28 @@ test('should be able to extend multiple names on the address page', async ({
 
   // warning message
   await expect(page.getByText('You do not own all these names')).toBeVisible()
-  await page.locator('button:has-text("I understand")').click()
+  await page.getByTestId('extend-names-confirm').click()
 
   // name list
-  await page.waitForLoadState('networkidle')
   await expect(page.getByText(`Extend ${extendableNameItems.length} Names`)).toBeVisible()
-  page.locator('button:has-text("Next")').waitFor({ state: 'visible' })
+  await page.locator('button:has-text("Next")').waitFor({ state: 'visible' })
   await page.locator('button:has-text("Next")').click()
 
   // check the invoice details
-  await page.waitForLoadState('networkidle')
-  await expect(page.getByText('1 year extension', { exact: true })).toBeVisible()
-  // increment and save
+  // TODO: Reimplement when date duration bug is fixed
+  // await expect(page.getByText('1 year extension', { exact: true })).toBeVisible()
+  await expect(page.getByTestId('plus-minus-control-label')).toHaveText('1 year')
   await page.getByTestId('plus-minus-control-plus').click()
+  await expect(page.getByTestId('plus-minus-control-label')).toHaveText('2 years')
   await page.getByTestId('plus-minus-control-plus').click()
-  await page.waitForLoadState('networkidle')
-  await expect(page.getByTestId('invoice-item-0-amount')).not.toBeEmpty()
-  await expect(page.getByTestId('invoice-item-1-amount')).not.toBeEmpty()
-  await expect(page.getByTestId('invoice-total')).not.toBeEmpty()
-
-  page.locator('button:has-text("Next")').waitFor({ state: 'visible' })
-  await page.locator('button:has-text("Next")').click()
-  await page.waitForLoadState('networkidle')
+  await expect(page.getByTestId('plus-minus-control-label')).toHaveText('3 years')
+  await expect(page.getByTestId('invoice-item-0-amount')).not.toHaveText('0.0000 ETH')
+  await expect(page.getByTestId('invoice-item-1-amount')).not.toHaveText('0.0000 ETH')
+  await expect(page.getByTestId('invoice-total')).not.toHaveText('0.0000 ETH')
 
+  await page.getByTestId('extend-names-confirm').click()
+  await expect(transactionModal.transactionModal).toBeVisible({ timeout: 10000 })
   await transactionModal.autoComplete()
-  await page.waitForLoadState('networkidle')
 
   await expect(page.getByText('Your "Extend names" transaction was successful')).toBeVisible({
     timeout: 10000,
@@ -374,7 +373,7 @@ test('should be able to extend a name by a month', async ({
   await test.step('should show the correct price data', async () => {
     await expect(extendNamesModal.getInvoiceExtensionFee).toContainText('0.0003')
     await expect(extendNamesModal.getInvoiceTransactionFee).toContainText('0.0001')
-    await expect(extendNamesModal.getInvoiceTotal).toContainText('0.0004')
+    await expect(extendNamesModal.getInvoiceTotal).toContainText(/0\.000[3|4]/)
     await expect(page.getByText(/1 month .* extension/)).toBeVisible()
   })
 

package.json

@@ -117,7 +117,7 @@
     "@nomiclabs/hardhat-ethers": "npm:hardhat-deploy-ethers@^0.3.0-beta.13",
     "@openzeppelin/contracts": "^4.7.3",
     "@openzeppelin/test-helpers": "^0.5.16",
-    "@playwright/test": "^1.48.0",
+    "@playwright/test": "^1.48.2",
     "@testing-library/jest-dom": "^6.4.2",
     "@testing-library/react": "^14.0.0",
     "@testing-library/react-hooks": "^8.0.1",

src/components/@atoms/PlusMinusControl/PlusMinusControl.tsx

@@ -252,7 +252,9 @@ export const PlusMinusControl = forwardRef(
             }}
             onBlur={handleBlur}
           />
-          <Label $highlighted={highlighted}>{t(`unit.${unit}`, { count: value })}</Label>
+          <Label data-testid="plus-minus-control-label" $highlighted={highlighted}>
+            {t(`unit.${unit}`, { count: value })}
+          </Label>
         </LabelContainer>
         <Button
           type="button"

src/components/@molecules/NameListView/NameListView.tsx

@@ -149,7 +149,8 @@ export const NameListView = ({ address, selfAddress, setError, setLoading }: Nam
     // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [stage])
 
-  const isNameExtendable = (name: Name) => name.parentName === 'eth'
+  const isNameExtendable = (name: Name) =>
+    name.parentName === 'eth' && !!name.name && !name.name.includes('Invalid ENS Name')
 
   const isNameDisabled = useCallback(
     (name: Name) => {

src/transaction-flow/input/ExtendNames/ExtendNames-flow.test.tsx

@@ -1,18 +1,28 @@
 import { mockFunction, render, screen } from '@app/test-utils'
 
 import { describe, expect, it, vi } from 'vitest'
+import { useAccount, useBalance } from 'wagmi'
 
 import { useEstimateGasWithStateOverride } from '@app/hooks/chain/useEstimateGasWithStateOverride'
+import { useExpiry } from '@app/hooks/ensjs/public/useExpiry'
 import { usePrice } from '@app/hooks/ensjs/public/usePrice'
+import { useEthPrice } from '@app/hooks/useEthPrice'
 
 import { makeMockIntersectionObserver } from '../../../../test/mock/makeMockIntersectionObserver'
 import ExtendNames from './ExtendNames-flow'
 
 vi.mock('@app/hooks/chain/useEstimateGasWithStateOverride')
 vi.mock('@app/hooks/ensjs/public/usePrice')
+vi.mock('wagmi')
+vi.mock('@app/hooks/ensjs/public/useExpiry')
+vi.mock('@app/hooks/useEthPrice')
 
 const mockUseEstimateGasWithStateOverride = mockFunction(useEstimateGasWithStateOverride)
 const mockUsePrice = mockFunction(usePrice)
+const mockUseAccount = mockFunction(useAccount)
+const mockUseBalance = mockFunction(useBalance)
+const mockUseEthPrice = mockFunction(useEthPrice)
+const mockUseExpiry = mockFunction(useExpiry)
 
 vi.mock('@ensdomains/thorin', async () => {
   const originalModule = await vi.importActual('@ensdomains/thorin')
@@ -45,6 +55,10 @@ describe('Extendnames', () => {
     },
     isLoading: false,
   })
+  mockUseAccount.mockReturnValue({ address: '0x1234', isConnected: true })
+  mockUseBalance.mockReturnValue({ data: { balance: 100n }, isLoading: false })
+  mockUseEthPrice.mockReturnValue({ data: 100n, isLoading: false })
+  mockUseExpiry.mockReturnValue({ data: { expiry: { date: new Date() } }, isLoading: false })
   it('should render', async () => {
     render(
       <ExtendNames
@@ -72,17 +86,14 @@ describe('Extendnames', () => {
     const { parentElement } = optionBar
     expect(parentElement).toHaveStyle('opacity: 0.5')
   })
-  it('should disabled next button if gas limit estimation is still loading', () => {
-    mockUseEstimateGasWithStateOverride.mockReturnValueOnce({
-      data: { gasEstimate: 21000n, gasCost: 100n },
-      gasPrice: 100n,
-      error: null,
+  it('should disabled next button if the price data is loading ', () => {
+    mockUsePrice.mockReturnValueOnce({
       isLoading: true,
     })
     render(
       <ExtendNames
         {...{
-          data: { names: ['nick.eth'], isSelf: false },
+          data: { names: ['nick.eth'], isSelf: true },
           dispatch: () => null,
           onDismiss: () => null,
         }}