From b666bd29c2915f325e2dd06b6340c634ce3b739f Mon Sep 17 00:00:00 2001
From: tate <tate@ens.domains>
Date: Tue, 23 Jan 2024 10:56:06 +1100
Subject: [PATCH] exclude namewrapper nfts from nft avatar selection

---
 .../ProfileEditor/Avatar/AvatarNFT.tsx         | 15 ++++++++++++++-
 src/constants/chains.ts                        |  2 ++
 src/hooks/usePublicClient.ts                   |  4 +++-
 src/types/index.ts                             |  4 +++-
 src/utils/getSupportedChainContractAddress.ts  | 18 ++++++++++++++++++
 5 files changed, 40 insertions(+), 3 deletions(-)
 create mode 100644 src/utils/getSupportedChainContractAddress.ts

diff --git a/src/components/@molecules/ProfileEditor/Avatar/AvatarNFT.tsx b/src/components/@molecules/ProfileEditor/Avatar/AvatarNFT.tsx
index 1962cbad4..285e9a41a 100644
--- a/src/components/@molecules/ProfileEditor/Avatar/AvatarNFT.tsx
+++ b/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
     },
diff --git a/src/constants/chains.ts b/src/constants/chains.ts
index 3fe2a4b2b..00acbfb77 100644
--- a/src/constants/chains.ts
+++ b/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
diff --git a/src/hooks/usePublicClient.ts b/src/hooks/usePublicClient.ts
index b82297d3e..5e0738ed7 100644
--- a/src/hooks/usePublicClient.ts
+++ b/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
diff --git a/src/types/index.ts b/src/types/index.ts
index a73d2de0a..55195ef36 100644
--- a/src/types/index.ts
+++ b/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<
diff --git a/src/utils/getSupportedChainContractAddress.ts b/src/utils/getSupportedChainContractAddress.ts
new file mode 100644
index 000000000..e9d958377
--- /dev/null
+++ b/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,
+  })