Merge branch 'main' into FET-1640

.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

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) {

package.json

@@ -45,16 +45,15 @@
     "generate:coinMapper": "ts-node ./scripts/coin-mapper.ts",
     "compose": "cp ./node_modules/@ensdomains/ens-test-env/src/docker-compose.yml ./docker-compose.yml",
     "subgraph:update": "ens-test-env subgraph --var NEXT_PUBLIC_DEPLOYMENT_ADDRESSES",
-    "knip": "npx knip",
-    "knip:fix": "npx knip --fix --allow-remove-files"
+    "knip": "knip",
+    "knip:fix": "knip --fix --allow-remove-files"
   },
   "dependencies": {
     "@ensdomains/address-encoder": "1.1.1",
     "@ensdomains/content-hash": "^3.0.0-beta.5",
     "@ensdomains/ens-contracts": "1.2.0-beta.0",
     "@ensdomains/ensjs": "4.0.0",
     "@ensdomains/thorin": "0.6.50",
-    "@metamask/mobile-provider": "^2.1.0",
     "@metamask/post-message-stream": "^6.1.2",
     "@metamask/providers": "^14.0.2",
     "@noble/hashes": "^1.3.2",
@@ -70,7 +69,6 @@
     "@walletconnect/modal": "^2.6.2",
     "calendar-link": "^2.2.0",
     "dns-packet": "^5.4.0",
-    "glob": "^8.0.3",
     "graphql-request": "5.1.0",
     "i18next": "^21.9.1",
     "i18next-browser-languagedetector": "^6.1.5",
@@ -85,7 +83,6 @@
     "react": "^18.2.0",
     "react-confetti": "^6.1.0",
     "react-dom": "^18.2.0",
-    "react-ga": "^3.3.1",
     "react-hook-form": "7.51.0",
     "react-i18next": "^11.18.5",
     "react-is": "^17.0.2",
@@ -94,6 +91,7 @@
     "react-use-error-boundary": "^3.0.0",
     "react-use-intercom": "^5.1.4",
     "styled-components": "^5.3.5",
+    "tinyglobby": "^0.2.6",
     "ts-pattern": "^4.2.2",
     "use-immer": "^0.7.0",
     "viem": "2.19.4",
@@ -104,13 +102,11 @@
     "react-dom": "*"
   },
   "devDependencies": {
-    "@adraffy/ens-normalize": "^1.10.1",
     "@cloudflare/workers-types": "^3.14.1",
     "@ensdomains/buffer": "^0.1.1",
     "@ensdomains/ens-test-env": "^0.5.0-beta.1",
     "@ensdomains/headless-web3-provider": "^1.0.8",
     "@ethersproject/abi": "^5.4.0",
-    "@ethersproject/contracts": "^5.4.0",
     "@ianvs/prettier-plugin-sort-imports": "^4.1.0",
     "@next/bundle-analyzer": "^13.4.19",
     "@nomiclabs/hardhat-ethers": "npm:hardhat-deploy-ethers@^0.3.0-beta.13",
@@ -121,7 +117,6 @@
     "@testing-library/react": "^14.0.0",
     "@testing-library/react-hooks": "^8.0.1",
     "@testing-library/user-event": "^14.5.2",
-    "@types/glob": "^7.2.0",
     "@types/lodash": "^4.14.184",
     "@types/node": "^18.7.13",
     "@types/pako": "^2.0.0",
@@ -169,10 +164,7 @@
     "next-dev-https": "^0.1.2",
     "next-router-mock": "^0.9.10",
     "next-transpile-modules": "^9.1.0",
-    "node-fetch": "2.6.1",
-    "node-fetch-commonjs": "^3.1.1",
     "pako": "^2.1.0",
-    "polyfill-crypto.getrandomvalues": "^1.0.0",
     "postcss-scss": "^4.0.4",
     "prettier": "3.0.3",
     "sitemap": "^7.1.1",

public/locales/en/transactionFlow.json

@@ -14,6 +14,10 @@
             "unknown": "Unknown NFT",
             "loadError": "NFT cannot be loaded",
             "noNFTs": "No NFTs found for this address.",
+            "address": {
+              "owned": "Owned",
+              "other": "Other"
+            },
             "selected": {
               "title": "Selected NFT",
               "subtitle": "Are you sure you want to use this NFT?"

scripts/generate-site-map.mjs

@@ -2,7 +2,6 @@ import { createReadStream, createWriteStream, existsSync } from 'fs'
 import { Transform } from 'stream'
 
 import { gql, request } from 'graphql-request'
-import fetch from 'node-fetch'
 import {
   parseSitemap,
   parseSitemapIndex,
@@ -114,12 +113,13 @@ const main = async () => {
         ? sitemapIndex.url
         : sitemapIndex.url.replace(`${baseURL}/`, `${baseURL}/sitemaps/`)
       const res = await fetch(url)
-      // only allow normalised names from backlog
-      res.body.pipe(new XMLToSitemapItemStream()).pipe(normaliseTransform).pipe(sitemap, {
-        end: false,
+
+      await res.body.pipeThrough(normaliseTransform).pipeTo(sitemap, {
+        preventClose: true,
       })
+
       await new Promise((resolve) => {
-        normaliseTransform.on('end', resolve)
+        normaliseTransform.readable.getReader().closed.then(resolve)
       })
     }
   }

src/components/@molecules/ProfileEditor/Avatar/AvatarNFT.test.tsx

@@ -1,16 +1,21 @@
 /* eslint-disable @typescript-eslint/naming-convention */
 import { fireEvent, mockFunction, render, screen, userEvent, waitFor } from '@app/test-utils'
 
+import * as ReactQuery from '@tanstack/react-query'
 import { beforeEach, describe, expect, it, Mock, vi } from 'vitest'
 import { useAccount, useClient } from 'wagmi'
 
 import * as ThorinComponents from '@ensdomains/thorin'
 
-import { AvatarNFT } from './AvatarNFT'
+import * as UseInfiniteQuery from '@app/utils/query/useInfiniteQuery'
+
 import { makeMockIntersectionObserver } from '../../../../../test/mock/makeMockIntersectionObserver'
+import { AvatarNFT } from './AvatarNFT'
 
 vi.mock('wagmi')
-
+vi.mock('@app/hooks/chain/useCurrentBlockTimestamp', () => ({
+  default: () => new Date(),
+}))
 vi.mock('@app/hooks/chain/useChainName', () => ({
   useChainName: () => 'mainnet',
 }))
@@ -24,6 +29,7 @@ const mockHandleCancel = vi.fn()
 makeMockIntersectionObserver()
 
 const props = {
+  name: 'test',
   handleSubmit: mockHandleSubmit,
   handleCancel: mockHandleCancel,
 }
@@ -64,7 +70,7 @@ const generateNFT = (withMedia: boolean, contractAddress?: string) => (_: any, i
   },
 })
 
-const mockFetch = vi.fn().mockImplementation(() =>
+let mockFetch = vi.fn().mockImplementation(() =>
   Promise.resolve({
     ownedNfts: Array.from({ length: 5 }, generateNFT(true)),
     totalCount: 5,
@@ -75,6 +81,7 @@ global.fetch = vi.fn(() => Promise.resolve({ json: mockFetch }))
 
 beforeEach(() => {
   mockFetch.mockClear()
+  mockFetch = vi.fn()
   mockUseAccount.mockReturnValue({ address: `0x${Date.now()}` })
   mockUseClient.mockReturnValue({
     chain: {
@@ -97,6 +104,12 @@ describe('<AvatarNFT />', () => {
     address: '0x0000000000000000000000000000000000000001',
   })
   it('should show detail on click', async () => {
+    mockFetch.mockImplementation(() =>
+      Promise.resolve({
+        ownedNfts: Array.from({ length: 5 }, generateNFT(true)),
+        totalCount: 5,
+      }),
+    )
     render(<AvatarNFT {...props} />)
 
     await waitFor(() => expect(screen.getByTestId('nft-0-0x0')).toBeVisible())
@@ -108,6 +121,12 @@ describe('<AvatarNFT />', () => {
     })
   })
   it('should correctly call submit callback', async () => {
+    mockFetch.mockImplementation(() =>
+      Promise.resolve({
+        ownedNfts: Array.from({ length: 5 }, generateNFT(true)),
+        totalCount: 5,
+      }),
+    )
     render(<AvatarNFT {...props} />)
 
     await waitFor(() => expect(screen.getByTestId('nft-0-0x0')).toBeVisible())
@@ -125,9 +144,15 @@ describe('<AvatarNFT />', () => {
     )
   })
   it('should display all NFTs', async () => {
+    mockFetch.mockImplementation(() =>
+      Promise.resolve({
+        ownedNfts: Array.from({ length: 5 }, generateNFT(true)),
+        totalCount: 5,
+      }),
+    )
     render(<AvatarNFT {...props} />)
 
-    await waitFor(() => expect(mockFetch).toHaveBeenCalledTimes(1))
+    await waitFor(() => expect(mockFetch).toHaveBeenCalled())
     await waitFor(() => expect(screen.getByTestId('nft-0-0x0')).toBeVisible())
     expect(screen.getByText('NFT 0')).toBeVisible()
     expect(screen.getByTestId('nft-1-0x1')).toBeVisible()
@@ -148,7 +173,7 @@ describe('<AvatarNFT />', () => {
 
     render(<AvatarNFT {...props} />)
 
-    await waitFor(() => expect(mockFetch).toHaveBeenCalledTimes(1))
+    await waitFor(() => expect(mockFetch).toHaveBeenCalledTimes(2))
     await waitFor(() =>
       expect(
         screen.queryByTestId('nft-0-0x57f1887a8bf19b14fc0df6fd9b2acc9af147ea85'),
@@ -164,18 +189,26 @@ describe('<AvatarNFT />', () => {
     )
     render(<AvatarNFT {...props} />)
 
-    await waitFor(() => expect(mockFetch).toHaveBeenCalledTimes(1))
+    await waitFor(() => expect(mockFetch).toHaveBeenCalled())
     await waitFor(() => expect(screen.queryByTestId('nft-0-0x0')).not.toBeInTheDocument())
   })
-  it.skip('show load more data on page load trigger', async () => {
-    mockFetch.mockImplementationOnce(() =>
-      Promise.resolve({
-        ownedNfts: Array.from({ length: 5 }, generateNFT(true)),
-        totalCount: 10,
-        pageKey: 'test123',
-      }),
-    )
-
+  it('show load more data on page load trigger', async () => {
+    const useInfiniteQuerySpy = vi.spyOn(UseInfiniteQuery, 'useInfiniteQuery')
+    mockFetch
+      .mockImplementationOnce(() =>
+        Promise.resolve({
+          ownedNfts: Array.from({ length: 5 }, generateNFT(true)),
+          totalCount: 5,
+          pageKey: 'test123',
+        }),
+      )
+      .mockImplementation(() =>
+        Promise.resolve({
+          ownedNfts: Array.from({ length: 5 }, generateNFT(true)),
+          totalCount: 5,
+          pageKey: 'test456',
+        }),
+      )
     vi.spyOn(ThorinComponents, 'ScrollBox').mockImplementationOnce(
       ({ children, onReachedBottom }) => {
         onReachedBottom!()
@@ -184,23 +217,23 @@ describe('<AvatarNFT />', () => {
     )
 
     render(<AvatarNFT {...props} />)
+    await waitFor(() => expect(mockFetch).toHaveBeenCalled())
+    expect(useInfiniteQuerySpy).toHaveBeenCalledTimes(2)
 
-    await waitFor(() => expect(mockFetch).toHaveBeenCalledTimes(2))
-    await waitFor(
-      () =>
-        // @ts-ignore
-        expect(fetch.mock.lastCall[1]).toEqual({
-          method: 'GET',
-          redirect: 'follow',
-        }),
-      // expect(mockedFetch.mock.lastCall).toEqual([
-      //   `https://ens-nft-worker.ens-cf.workers.dev/v1/mainnet/getNfts/?owner=0x0000000000000000000000000000000000000001&filters%5B%5D=SPAM&pageKey=test123`,
-      //   {
-      //     method: 'GET',
-      //     redirect: 'follow',
-      //   },
-      // ]),
-    )
+    const lastCall = useInfiniteQuerySpy.mock.lastCall
+    if (!lastCall) {
+      throw new Error('useInfiniteQuery was not called as expected')
+    }
+    const options = lastCall[0]
+    if (typeof options !== 'object' || !options || !('queryFn' in options)) {
+      throw new Error('useInfiniteQuery options do not contain queryFn')
+    }
+    const { queryFn } = options as { queryFn: ReactQuery.QueryFunction }
+    const mockContext = {
+      pageParam: 'test123',
+    }
+    await queryFn(mockContext as any)
+    await waitFor(() => expect(mockFetch).toHaveBeenCalledTimes(3))
     // @ts-ignore
     expect(fetch.mock.lastCall[0]).toMatch(/pageKey=test123/)
   })
@@ -222,7 +255,7 @@ describe('<AvatarNFT />', () => {
 
     render(<AvatarNFT {...props} />)
 
-    await waitFor(() => expect(mockFetch).toHaveBeenCalledTimes(1))
+    await waitFor(() => expect(mockFetch).toHaveBeenCalled())
   })
 
   it('should show message if search returns no results', async () => {
@@ -241,7 +274,7 @@ describe('<AvatarNFT />', () => {
       )
 
     render(<AvatarNFT {...props} />)
-    await waitFor(() => expect(mockFetch).toHaveBeenCalledTimes(1))
+    await waitFor(() => expect(mockFetch).toHaveBeenCalled())
     const searchInput = screen.getByTestId('avatar-search-input')
     await userEvent.type(searchInput, 'blahblahblah')
     await waitFor(() =>