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

…into viem-test

.vscode/settings.json

@@ -19,7 +19,5 @@
     "editor.defaultFormatter": "jock.svg"
   },
   "jest.jestCommandLine": "pnpm run test",
-  "cSpell.words": [
-    "ensjs"
-  ]
+  "cSpell.words": ["ensjs"]
 }

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

@@ -10,6 +10,8 @@ import MagnifyingGlassSVG from '@app/assets/MagnifyingGlass.svg'
 import { InnerDialog } from '@app/components/@atoms/InnerDialog'
 import { ScrollBoxWithSpinner, SpinnerRow } from '@app/components/@molecules/ScrollBoxWithSpinner'
 import { useChainName } from '@app/hooks/chain/useChainName'
+import { usePublicClient } from '@app/hooks/usePublicClient'
+import { getSupportedChainContractAddress } from '@app/utils/getSupportedChainContractAddress'
 
 type OwnedNFT = {
   contract: {
@@ -168,6 +170,8 @@ export const AvatarNFT = ({
   const { address: _address } = useAccount()
   const address = _address!
 
+  const publicClient = usePublicClient()
+
   const {
     data: NFTPages,
     fetchNextPage,
@@ -191,7 +195,16 @@ export const AvatarNFT = ({
         ownedNfts: response.ownedNfts.filter(
           (nft) =>
             (nft.media[0].thumbnail || nft.media[0].gateway) &&
-            nft.contract.address !== '0x57f1887a8bf19b14fc0df6fd9b2acc9af147ea85',
+            nft.contract.address !==
+              getSupportedChainContractAddress({
+                client: publicClient,
+                contract: 'ensBaseRegistrarImplementation',
+              }) &&
+            nft.contract.address !==
+              getSupportedChainContractAddress({
+                client: publicClient,
+                contract: 'ensNameWrapper',
+              }),
         ),
       } as NFTResponse
     },

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

@@ -117,7 +117,7 @@ describe('<AvatarUpload />', () => {
     mockHandleSubmit.mockClear()
     global.fetch = jest.fn().mockImplementation(() =>
       Promise.resolve({
-        json: () => ({ message: 'failed' }),
+        json: () => ({ error: 'failed', status: 500 }),
       }),
     )
 
@@ -128,4 +128,22 @@ describe('<AvatarUpload />', () => {
     await waitFor(() => expect(global.fetch).toBeCalled())
     await waitFor(() => expect(mockHandleSubmit).not.toHaveBeenCalled())
   })
+  it('shows error when upload fails', async () => {
+    mockHandleSubmit.mockClear()
+    global.fetch = jest.fn().mockImplementation(() =>
+      Promise.resolve({
+        json: () => ({ error: 'failed', status: 500 }),
+      }),
+    )
+
+    render(<AvatarUpload {...props} />)
+    fireEvent.click(screen.getByTestId('continue-button'))
+    fireEvent.click(screen.getByTestId('upload-button'))
+
+    await waitFor(() => expect(global.fetch).toBeCalled())
+    await waitFor(() => expect(mockHandleSubmit).not.toHaveBeenCalled())
+
+    expect(screen.getByTestId('avatar-upload-error')).toBeVisible()
+    expect(screen.getByTestId('avatar-upload-error')).toHaveTextContent('failed')
+  })
 })

src/components/@molecules/ProfileEditor/Avatar/AvatarUpload.tsx

@@ -6,7 +6,7 @@ import styled, { css } from 'styled-components'
 import { bytesToHex } from 'viem'
 import { useMutation, useQueryClient, useSignTypedData } from 'wagmi'
 
-import { Button, Dialog, mq } from '@ensdomains/thorin'
+import { Button, Dialog, Helper, mq } from '@ensdomains/thorin'
 
 import { useChainName } from '@app/hooks/chain/useChainName'
 
@@ -38,6 +38,15 @@ const dataURLToBytes = (dataURL: string) => {
   return bytes
 }
 
+type AvatarUploadResult =
+  | {
+      message: string
+    }
+  | {
+      error: string
+      status: number
+    }
+
 const UploadComponent = ({
   dataURL,
   handleCancel,
@@ -77,7 +86,11 @@ const UploadComponent = ({
     },
   })
 
-  const { mutate: signAndUpload, isLoading } = useMutation(async () => {
+  const {
+    mutate: signAndUpload,
+    isLoading,
+    error,
+  } = useMutation<void, Error>(async () => {
     let baseURL = process.env.NEXT_PUBLIC_AVUP_ENDPOINT || `https://euc.li`
     if (network !== 'mainnet') {
       baseURL = `${baseURL}/${network}`
@@ -96,9 +109,9 @@ const UploadComponent = ({
         dataURL,
         sig,
       }),
-    }).then((res) => res.json())) as any
+    }).then((res) => res.json())) as AvatarUploadResult
 
-    if (fetched.message === 'uploaded') {
+    if ('message' in fetched && fetched.message === 'uploaded') {
       queryClient.invalidateQueries({
         predicate: (query) => {
           const {
@@ -112,7 +125,12 @@ const UploadComponent = ({
       })
       return handleSubmit('upload', endpoint, dataURL)
     }
-    throw new Error(fetched.message)
+
+    if ('error' in fetched) {
+      throw new Error(fetched.error)
+    }
+
+    throw new Error('Unknown error')
   })
 
   return (
@@ -124,11 +142,23 @@ const UploadComponent = ({
       <Container>
         <CroppedImagePreview data-testid="cropped-image-preview" src={dataURL} />
       </Container>
+      {error && (
+        <Helper data-testid="avatar-upload-error" type="error">
+          {error.message}
+        </Helper>
+      )}
       <Dialog.Footer
         leading={<AvCancelButton handleCancel={handleCancel} />}
         trailing={
-          <Button disabled={isLoading} onClick={() => signAndUpload()} data-testid="upload-button">
-            {t('input.profileEditor.tabs.avatar.image.upload.action')}
+          <Button
+            disabled={isLoading}
+            colorStyle={error ? 'redSecondary' : undefined}
+            onClick={() => signAndUpload()}
+            data-testid="upload-button"
+          >
+            {error
+              ? t('action.tryAgain', { ns: 'common' })
+              : t('input.profileEditor.tabs.avatar.image.upload.action')}
           </Button>
         }
       />

src/constants/chains.ts

@@ -70,3 +70,5 @@ export const localhostWithEns = {
 export const mainnetWithEns = addEnsContracts(mainnet)
 export const goerliWithEns = addEnsContracts(goerli)
 export const sepoliaWithEns = addEnsContracts(sepolia)
+
+export type SupportedChain = typeof mainnetWithEns | typeof goerliWithEns | typeof sepoliaWithEns

src/hooks/usePublicClient.ts

@@ -3,6 +3,8 @@ import { usePublicClient as usePublicClient_ } from 'wagmi'
 
 import { PublicClientWithChain } from '@app/types'
 
-export const usePublicClient = usePublicClient_ as <TPublicClient extends PublicClientWithChain>(
+export const usePublicClient = usePublicClient_ as <
+  TPublicClient extends PublicClientWithChain = PublicClientWithChain,
+>(
   args?: Partial<GetPublicClientArgs>,
 ) => TPublicClient

src/types/index.ts

@@ -22,6 +22,8 @@ import {
 } from '@ensdomains/ensjs/utils'
 import { Helper, Space } from '@ensdomains/thorin'
 
+import { SupportedChain } from '@app/constants/chains'
+
 export type Profile = Partial<
   GetRecordsReturnType &
     Pick<NonNullable<GetSubgraphRecordsReturnType>, 'isMigrated' | 'createdAt'> & {
@@ -161,7 +163,7 @@ export type Prettify<T> = {
   [K in keyof T]: T[K]
 } & {}
 
-export type PublicClientWithChain = PublicClient<Transport, ChainWithEns>
+export type PublicClientWithChain = PublicClient<Transport, SupportedChain>
 export type WalletClientWithAccount = WalletClient<Transport, ChainWithEns, Account>
 
 export type QueryConfig<TData, TError, TSelectData = TData> = Pick<

src/utils/getSupportedChainContractAddress.ts

@@ -0,0 +1,18 @@
+import { Client, getChainContractAddress, Transport } from 'viem'
+
+import { SupportedChain } from '@app/constants/chains'
+
+export const getSupportedChainContractAddress = <
+  const TClient extends Client<Transport, SupportedChain>,
+  TContract extends Extract<keyof TClient['chain']['contracts'], string>,
+>({
+  client,
+  contract,
+}: {
+  client: TClient
+  contract: TContract
+}) =>
+  getChainContractAddress({
+    chain: client.chain,
+    contract,
+  })

src/validators/validateAddress.ts

@@ -11,9 +11,7 @@ export const validateCryptoAddress = ({
 }) => {
   try {
     if (!address) return 'addressRequired'
-
     const _address = normalizeCoinAddress({ coin, address })
-
     const coinTypeInstance = getCoderByCoinName(coin)
     coinTypeInstance.decode(_address)
     return true