feat(BA-2875): Update primary name resolution in Web to use ENSIP-19

apps/web/app/CryptoProviders.tsx

@@ -50,7 +50,7 @@ const config = createConfig({
   transports: {
     [base.id]: http(cdpBaseRpcEndpoint),
     [baseSepolia.id]: http(cdpBaseSepoliaRpcEndpoint),
-    [mainnet.id]: http(),
+    [mainnet.id]: http(process.env.NEXT_PUBLIC_MAINNET_RPC_URL),
   },
   ssr: true,
 });

apps/web/app/api/ensip19/reverseName/route.ts

@@ -0,0 +1,36 @@
+import 'server-only';
+import { NextRequest } from 'next/server';
+import { Address, createPublicClient, http } from 'viem';
+import { base, mainnet } from 'viem/chains';
+import { convertChainIdToCoinTypeUint } from 'apps/web/src/utils/usernames';
+
+export const dynamic = 'force-dynamic';
+
+export async function GET(req: NextRequest) {
+  try {
+    const { searchParams } = new URL(req.url);
+    const address = searchParams.get('address') as Address | null;
+    if (!address) {
+      return new Response(JSON.stringify({ error: 'Missing address' }), { status: 400 });
+    }
+
+    const mainnetRpcUrl = process.env.MAINNET_RPC_URL || process.env.NEXT_PUBLIC_MAINNET_RPC_URL;
+    const client = createPublicClient({
+      chain: mainnet,
+      transport: http(mainnetRpcUrl),
+    });
+
+    const coinType = BigInt(convertChainIdToCoinTypeUint(base.id));
+    const name = await client.getEnsName({ address, coinType });
+
+    return new Response(JSON.stringify({ name: name ?? null }), {
+      status: 200,
+      headers: { 'content-type': 'application/json' },
+    });
+  } catch (e) {
+    return new Response(JSON.stringify({ name: null }), {
+      status: 200,
+      headers: { 'content-type': 'application/json' },
+    });
+  }
+}

apps/web/package.json

@@ -97,8 +97,8 @@
     "typed.js": "^2.1.0",
     "usehooks-ts": "^3.1.0",
     "uuid": "^10.0.0",
-    "viem": "2.x",
-    "wagmi": "2.14.12",
+    "viem": "2.36.0",
+    "wagmi": "2.21.0",
     "zustand": "^5.0.5"
   },
   "devDependencies": {

apps/web/src/abis/L2ReverseRegistrarAbi.ts

@@ -1,4 +1,23 @@
 export default [
+  {
+    type: 'function',
+    name: 'nameForAddr',
+    inputs: [
+      {
+        name: 'addr',
+        type: 'address',
+        internalType: 'address',
+      },
+    ],
+    outputs: [
+      {
+        name: 'name',
+        type: 'string',
+        internalType: 'string',
+      },
+    ],
+    stateMutability: 'view',
+  },
   {
     type: 'function',
     name: 'setName',

apps/web/src/components/ConnectWalletButton/ConnectWalletButton.tsx

@@ -23,6 +23,7 @@ import { useCallback, useEffect, useState } from 'react';
 import { useCopyToClipboard, useMediaQuery } from 'usehooks-ts';
 import { useAccount, useSwitchChain } from 'wagmi';
 import { DynamicCryptoProviders } from 'apps/web/app/CryptoProviders.dynamic';
+import useBaseEnsName from 'apps/web/src/hooks/useBaseEnsName';
 
 export enum ConnectWalletButtonVariants {
   BaseOrg,
@@ -64,6 +65,7 @@ export function ConnectWalletButton({
   const { address, connector, isConnected, isConnecting, isReconnecting, chain } = useAccount();
   const chainSupported = !!chain && supportedChainIds.includes(chain.id);
   const { basenameChain } = useBasenameChain();
+  const { data: primaryName } = useBaseEnsName({ address: address as `0x${string}` | undefined });
   const [, copy] = useCopyToClipboard();
   const copyAddress = useCallback(() => void copy(address ?? ''), [address, copy]);
 
@@ -140,7 +142,14 @@ export function ConnectWalletButton({
       <ConnectWallet className={buttonClasses}>
         <div className="flex items-center gap-2">
           <UserAvatar />
-          {isDesktop && <Name chain={basenameChain} className={userAddressClasses} />}
+          {isDesktop && (
+            <Name
+              chain={basenameChain}
+              className={userAddressClasses}
+              // Override with ENSIP-19 or L2 fallback primary name if available
+              name={primaryName ?? undefined}
+            />
+          )}
         </div>
       </ConnectWallet>
 
@@ -151,6 +160,7 @@ export function ConnectWalletButton({
             onClick={copyAddress}
             chain={basenameChain}
             className="cursor-pointer font-display transition-all hover:opacity-65"
+            name={primaryName ?? undefined}
           />
           <EthBalance className="font-display" />
         </Identity>

apps/web/src/components/ConnectWalletButton/CustomWalletAdvancedAddressDetails.tsx

@@ -4,9 +4,11 @@ import classNames from 'classnames';
 import { useCallback, useState } from 'react';
 import { useAccount } from 'wagmi';
 import { useCopyToClipboard } from 'usehooks-ts';
+import useBaseEnsName from 'apps/web/src/hooks/useBaseEnsName';
 
 export function CustomWalletAdvancedAddressDetails() {
   const { address, chain } = useAccount();
+  const { data: primaryName } = useBaseEnsName({ address: address as `0x${string}` | undefined });
   const [copyText, setCopyText] = useState('Copy');
 
   const [, copy] = useCopyToClipboard();
@@ -52,6 +54,7 @@ export function CustomWalletAdvancedAddressDetails() {
             className={classNames(
               'hover:text-[var(--ock-text-foreground-muted)] active:text-[var(--ock-text-primary)]',
             )}
+            name={primaryName ?? undefined}
           />
         </button>
         <button

apps/web/src/hooks/useBaseEnsName.ts

@@ -1,6 +1,11 @@
-import { Address, isAddress } from 'viem';
+import { Address, createPublicClient, http, isAddress } from 'viem';
 import useBasenameChain from 'apps/web/src/hooks/useBasenameChain';
 import { Basename, useName } from '@coinbase/onchainkit/identity';
+import { base, mainnet } from 'viem/chains';
+import { useEffect, useMemo, useState } from 'react';
+import L2ReverseRegistrarAbi from 'apps/web/src/abis/L2ReverseRegistrarAbi';
+import { USERNAME_L2_REVERSE_REGISTRAR_ADDRESSES } from 'apps/web/src/addresses/usernames';
+import { convertChainIdToCoinTypeUint } from 'apps/web/src/utils/usernames';
 
 export type UseBaseEnsNameProps = {
   address?: Address;
@@ -12,23 +17,78 @@ export type BaseEnsNameData = Basename | undefined;
 export default function useBaseEnsName({ address }: UseBaseEnsNameProps) {
   const { basenameChain } = useBasenameChain();
 
-  const { data, isLoading, refetch, isFetching } = useName(
+  // Existing OCK name for backwards compatibility (may be legacy resolver)
+  const ock = useName(
     {
-      // @ts-expect-error: query is disabled without an address
-      address: address,
+      address: address as Address,
       chain: basenameChain,
     },
     {
       enabled: !!address && isAddress(address),
     },
   );
 
-  const ensNameTyped = data ? (data as Basename) : undefined;
+  const [ensip19Name, setEnsip19Name] = useState<string | null>(null);
+  const [l2DirectName, setL2DirectName] = useState<string | null>(null);
+  const [loading, setLoading] = useState(false);
+
+  useEffect(() => {
+    if (!address || !isAddress(address)) {
+      setEnsip19Name(null);
+      setL2DirectName(null);
+      setLoading(false);
+      return;
+    }
+
+    const run = async () => {
+      setLoading(true);
+      let hasEnsip19 = false;
+      try {
+        const res = await fetch(`/api/ensip19/reverseName?address=${address}`, {
+          cache: 'no-store',
+        });
+        const json = (await res.json()) as { name: string | null };
+        setEnsip19Name(json?.name ?? null);
+        hasEnsip19 = !!json?.name;
+      } catch (err) {
+        setEnsip19Name(null);
+      }
+
+      if (!hasEnsip19) {
+        try {
+          const l2Client = createPublicClient({ chain: basenameChain, transport: http() });
+          const l2ReverseRegistrarAddress =
+            USERNAME_L2_REVERSE_REGISTRAR_ADDRESSES[basenameChain.id];
+          const nameViaDirectLookup = await l2Client.readContract({
+            address: l2ReverseRegistrarAddress,
+            abi: L2ReverseRegistrarAbi,
+            functionName: 'nameForAddr',
+            args: [address],
+          });
+          const val = String(nameViaDirectLookup ?? '');
+          setL2DirectName(val.length > 0 ? val : null);
+        } catch (_) {
+          setL2DirectName(null);
+        }
+      } else {
+        setL2DirectName(null);
+      }
+
+      setLoading(false);
+    };
+
+    run();
+  }, [address, basenameChain]);
+
+  const resolved = useMemo(() => {
+    const ockName = ock.data ? (ock.data as Basename) : undefined;
+    return (ensip19Name ?? l2DirectName ?? ockName) as Basename | undefined;
+  }, [ensip19Name, l2DirectName, ock.data]);
 
   return {
-    data: ensNameTyped,
-    isLoading,
-    isFetching,
-    refetch,
+    data: resolved,
+    isLoading: loading || ock.isLoading,
+    isFetching: ock.isFetching,
+    refetch: ock.refetch,
   };
 }