Merge branch 'main' of https://github.com/ensdomains/ens-app-v3 into …

…thorin-v1

.github/workflows/knip.yaml

@@ -14,7 +14,7 @@ jobs:
       - name: Install Node.js
         uses: actions/setup-node@v3
         with:
-          node-version: 18
+          node-version: 20
           cache: 'pnpm'
 
       - run: pnpm install --frozen-lockfile

.github/workflows/pages-deployment.yaml

@@ -3,6 +3,7 @@ name: Cloudflare Pages
 env:
   SENTRY_AUTH_TOKEN: ${{ secrets.SENTRY_AUTH_TOKEN }}
   NEXT_PUBLIC_INTERCOM_ID: re9q5yti
+  NEXT_PUBLIC_DRPC_KEY: ${{ github.ref == 'refs/heads/main' && AnmpasF2C0JBqeAEzxVO8aTteiMlrW4R75hpDonbV6cR || '' }}
 
 on: [push]
 jobs:
@@ -66,16 +67,20 @@ jobs:
         run: |
           mkdir -p ./out/sitemaps
           pnpm generate:sitemaps
+        env:
+          SITEMAP_GRAPH_KEY: ${{ secrets.SITEMAP_GRAPH_KEY }}
 
       - name: Publish
-        uses: cloudflare/pages-action@v1
+        uses: cloudflare/wrangler-action@v3
         with:
           apiToken: ${{ secrets.CLOUDFLARE_API_TOKEN }}
           accountId: ${{ secrets.CLOUDFLARE_ACCOUNT_ID }}
-          projectName: ens-app-v3
-          directory: out
-          gitHubToken: ${{ secrets.GITHUB_TOKEN }}
-          wranglerVersion: '3'
+          wranglerVersion: 'v3.57.1'
+          command: pages deploy --project-name=ens-app-v3
+          secrets: |
+            GITHUB_TOKEN
+        env:
+          GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}
 
       - name: Submit sitemap
         if: ${{ github.ref == 'refs/heads/main' }}

.github/workflows/test.yaml

@@ -97,7 +97,7 @@ jobs:
     runs-on: ubuntu-latest
     strategy:
       matrix:
-        shard: [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15, 16, 17, 18, 19, 20, 21, 22, 23, 24, 25, 26, 27, 28]
+        shard: [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15, 16, 17, 18, 19, 20, 21, 22, 23, 24, 25, 26, 27, 28, 29]
     steps:
       - uses: actions/checkout@v3
 

README.md

@@ -123,8 +123,8 @@ have developed a design system in order to ensure consistent styling across the
 Pages folder has basic route layout and basic react needed for rendering pages. These
 files should be kept relatively simple
 
-Components that pages consume are kept in the components folder. This folder has a strucutre
-that mimicks the strucutre of the pages folder. If a component is only used on a specific page
+Components that pages consume are kept in the components folder. This folder has a structure
+that mimics the structure of the pages folder. If a component is only used on a specific page
 then it goes into the corresponding folder in the components folder.
 
 If a component is used across multiple pages and other components,
@@ -254,7 +254,7 @@ Once exited, you can commit the data to your branch. You do not need to run a se
 
 #### Stateless vs Stateful
 
-Our e2e tests are split into two categories, stateless and stateful. Stateless test use the development environment, are faster, and is the general recommended way to write integration tests. Occasionally, you may need to test a feature that requires an external api or service. In this case, you can use the stateful tests. These tests are slower, 
+Our e2e tests are split into two categories, stateless and stateful. Stateless test use the development environment, are faster, and is the general recommended way to write integration tests. Occasionally, you may need to test a feature that requires an external API or service. In this case, you can use the stateful tests. These tests are slower, 
 
 #### Running the tests
 

deploy/00_deploy_multicall.ts

@@ -3,7 +3,6 @@ import { existsSync, mkdirSync } from 'fs'
 import { readFile, writeFile } from 'fs/promises'
 import { DeployFunction } from 'hardhat-deploy/types'
 import { HardhatRuntimeEnvironment } from 'hardhat/types'
-import fetch from 'node-fetch-commonjs'
 import { resolve } from 'path'
 
 const func: DeployFunction = async function (hre: HardhatRuntimeEnvironment) {

e2e/specs/stateful/address.spec.ts

@@ -18,7 +18,6 @@ test('should go to the address page', async ({ page, login }) => {
   await page.goto('/')
   await login.connect()
 
-  await page.pause()
   await page
     .getByPlaceholder('Search for a name')
     .fill('0xFc5958B4B6F9a06D21E06429c8833f865577acf0')

e2e/specs/stateless/importName.spec.ts → e2e/specs/stateless/_importName.spec.ts

@@ -2,8 +2,33 @@ import { expect } from '@playwright/test'
 
 import { test } from '../../../playwright'
 
-test('should allow claim (owned by user)', async ({ page, login, accounts, makePageObject }) => {
+// When testing locally, reducers will be run twice because of strict mode
+const strictModeEventCount = process.env.CI ? 1 : 2
+
+test('should allow claim (owned by user)', async ({
+  page,
+  login,
+  accounts,
+  makePageObject,
+  consoleListener,
+}) => {
+  console.log(strictModeEventCount)
   const name = 'swagabc.xyz'
+  await consoleListener.initialize({
+    regex: new RegExp(
+      `Event triggered on local development.*?(${[
+        'search_selected_dns',
+        'dns_selected_import_type',
+        'dns_sec_enabled',
+        'dns_verified_ownership',
+        'dns_claim_started',
+        'dns_claimed',
+        'dns_approve_registrar_wallet_opened',
+        'dns_import_wallet_opened',
+        'dns_claim_wallet_opened',
+      ].join('|')})`,
+    ),
+  })
 
   const homePage = makePageObject('HomePage')
   const importPage = makePageObject('ImportPage')
@@ -14,7 +39,17 @@ test('should allow claim (owned by user)', async ({ page, login, accounts, makeP
 
   // should redirect to registration page
   await homePage.searchInput.fill(name)
+  await page.locator(`[data-testid="search-result-name"]`, { hasText: name }).waitFor()
+  await page.locator(`[data-testid="search-result-name"]`, { hasText: 'Not Imported' }).waitFor()
   await homePage.searchInput.press('Enter')
+
+  await test.step('should fire DNS import tracking event: search_selected_dns', async () => {
+    await expect(consoleListener.getMessages()).toHaveLength(1)
+
+    await expect(consoleListener.getMessages().toString()).toContain('search_selected_dns')
+    consoleListener.clearMessages()
+  })
+
   await expect(importPage.heading).toHaveText(`Claim ${name}`)
 
   // no type should be checked yet
@@ -31,6 +66,15 @@ test('should allow claim (owned by user)', async ({ page, login, accounts, makeP
   // should jump straight to transaction step
   await expect(importPage.heading).toHaveText('Claim your domain')
 
+  await test.step('should fire DNS import tracking event: dns_selected_import_type', async () => {
+    await expect(consoleListener.getMessages()).toHaveLength(strictModeEventCount)
+
+    await expect(consoleListener.getMessages().toString()).toMatch(
+      new RegExp(`dns_selected_import_type.*?${name}`),
+    )
+    consoleListener.clearMessages()
+  })
+
   // should show cost value above 0
   await expect(importPage.getCost()).resolves.toBeGreaterThan(0)
 
@@ -39,10 +83,26 @@ test('should allow claim (owned by user)', async ({ page, login, accounts, makeP
 
   await importPage.nextButton.click()
 
+  await test.step('should fire DNS import tracking event: dns_claim_started', async () => {
+    await expect(consoleListener.getMessages()).toHaveLength(1)
+
+    await expect(consoleListener.getMessages().toString()).toContain('dns_claim_started')
+    consoleListener.clearMessages()
+  })
+
   // should be two steps: approve and claim
   await expect(transactionModal.getStepCount()).resolves.toEqual(2)
 
   await transactionModal.confirm()
+
+  await test.step('should fire DNS import tracking event: dns_approve_registrar_wallet_opened', async () => {
+    await expect(consoleListener.getMessages()).toHaveLength(1)
+    await expect(consoleListener.getMessages().toString()).toContain(
+      'dns_approve_registrar_wallet_opened',
+    )
+    consoleListener.clearMessages()
+  })
+
   await transactionModal.complete()
 
   // should save transaction status on refresh
@@ -59,6 +119,12 @@ test('should allow claim (owned by user)', async ({ page, login, accounts, makeP
   await expect(page.getByText('Open Wallet')).toBeVisible()
   await transactionModal.confirm()
 
+  await test.step('should fire DNS import tracking event: dns_claim_wallet_opened', async () => {
+    await expect(consoleListener.getMessages()).toHaveLength(1)
+    await expect(consoleListener.getMessages().toString()).toContain('dns_claim_wallet_opened')
+    consoleListener.clearMessages()
+  })
+
   // should show complete step
   await expect(page.getByText('Congratulations!')).toBeVisible()
   await expect(page.getByText(`You are now the owner of ${name}`)).toBeVisible()
@@ -69,9 +135,24 @@ test('should allow claim (owned by user)', async ({ page, login, accounts, makeP
   )
 })
 
-test('should allow import (not owned by user)', async ({ page, login, makePageObject }) => {
+test('should allow import (not owned by user)', async ({
+  page,
+  login,
+  makePageObject,
+  consoleListener,
+}) => {
   const name = 'taytems.xyz'
 
+  await consoleListener.initialize({
+    regex: new RegExp(
+      `Event triggered on local development.*?(${[
+        'search_selected_dns',
+        'dns_selected_import_type',
+        'dns_verified_ownership',
+      ].join('|')})`,
+    ),
+  })
+
   const homePage = makePageObject('HomePage')
   const importPage = makePageObject('ImportPage')
   const transactionModal = makePageObject('TransactionModal')
@@ -81,7 +162,19 @@ test('should allow import (not owned by user)', async ({ page, login, makePageOb
 
   // should redirect to registration page
   await homePage.searchInput.fill(name)
+  await page.locator(`[data-testid="search-result-name"]`, { hasText: name }).waitFor()
+  await page.locator(`[data-testid="search-result-name"]`, { hasText: 'Not Imported' }).waitFor()
   await homePage.searchInput.press('Enter')
+
+  await test.step('should fire DNS import tracking event: search_selected_dns', async () => {
+    await expect(consoleListener.getMessages()).toHaveLength(1)
+
+    await expect(consoleListener.getMessages().toString()).toMatch(
+      new RegExp(`search_selected_dns.*?${name}`),
+    )
+    consoleListener.clearMessages()
+  })
+
   await expect(importPage.heading).toHaveText(`Claim ${name}`)
 
   // no type should be checked yet
@@ -95,6 +188,15 @@ test('should allow import (not owned by user)', async ({ page, login, makePageOb
   await expect(importPage.nextButton).toBeEnabled({ timeout: 15000 })
   await importPage.nextButton.click()
 
+  await test.step('should fire DNS import tracking event: dns_selected_import_type', async () => {
+    await expect(consoleListener.getMessages()).toHaveLength(strictModeEventCount)
+
+    await expect(consoleListener.getMessages().toString()).toMatch(
+      new RegExp(`dns_selected_import_type.*?${name}`),
+    )
+    consoleListener.clearMessages()
+  })
+
   // should show verify ownership step with error message
   await expect(importPage.heading).toHaveText('Verify Ownership')
   await expect(
@@ -107,6 +209,13 @@ test('should allow import (not owned by user)', async ({ page, login, makePageOb
 
   await importPage.nextButton.click()
 
+  await test.step('should fire DNS import tracking event: dns_verified_ownership', async () => {
+    await expect(consoleListener.getMessages()).toHaveLength(strictModeEventCount)
+
+    await expect(consoleListener.getMessages().toString()).toContain('dns_verified_ownership')
+    consoleListener.clearMessages()
+  })
+
   // should go to transaction step
   await expect(importPage.heading).toHaveText('Import this domain')
 

e2e/specs/stateless/advancedEditor.spec.ts

@@ -152,7 +152,6 @@ test('should maintain state and when returning from transaction modal when addin
 
   await recordsPage.goto(name)
   await login.connect()
-  await page.pause()
 
   // Validate records
   await expect(recordsPage.getRecordValue('text', 'name')).toHaveText('Bob')
@@ -257,7 +256,7 @@ test('should maintain state and when returning from transaction modal when addin
   await transactionModal.autoComplete()
 
   // Validate change in records
-  await page.pause()
+
   await expect(recordsPage.getRecordValue('text', 'name')).toHaveText('Nick')
   await expect(recordsPage.getRecordValue('text', 'another text')).toHaveText('another record')
   await expect(recordsPage.getRecordValue('address', 'bnb')).toHaveText(
@@ -266,7 +265,7 @@ test('should maintain state and when returning from transaction modal when addin
   await expect(recordsPage.getRecordValue('address', 'eth')).toHaveText(
     '0x70997970C51812dc3A010C7d01b50e0d17dc79C8',
   )
-  await page.pause()
+
   await expect(recordsPage.getRecordValue('contentHash')).toHaveText(
     'bzz://e40101fa011b20d1de9994b4d039f6548d191eb26786769f580809256b4685ef316805265ea162'.toLowerCase(),
   )