chore: Update Basename naming (#1110)

Author: cpcramer

.changeset/nasty-wolves-remember.md

@@ -0,0 +1,5 @@
+---
+"@coinbase/onchainkit": patch
+---
+
+-**chore**: Update all cases of BaseName to Basename. Update WalletDropdownBaseName to WalletDropdownBasename. Update the identity type BaseName to Basename. Update WalletDropdownBaseNameReact to WalletDropdownBasenameReact. By @cpcramer #1110

src/identity/index.ts

@@ -17,7 +17,7 @@ export type {
   AvatarReact,
   BadgeReact,
   BaseMainnetName,
-  BaseName,
+  Basename,
   BaseSepoliaName,
   EASChainDefinition,
   EASSchemaUid,

src/identity/types.ts

@@ -55,7 +55,7 @@ export type BaseMainnetName = `${string}.base.eth`;
 /**
  * Note: exported as public Type
  */
-export type BaseName = BaseMainnetName | BaseSepoliaName;
+export type Basename = BaseMainnetName | BaseSepoliaName;
 
 /**
  * Note: exported as public Type
@@ -126,7 +126,7 @@ export type GetName = {
 /**
  * Note: exported as public Type
  */
-export type GetNameReturnType = string | BaseName | null;
+export type GetNameReturnType = string | Basename | null;
 
 /**
  * Note: exported as public Type

src/identity/utils/getAvatar.ts

@@ -4,7 +4,7 @@ import { isBase } from '../../isBase';
 import { isEthereum } from '../../isEthereum';
 import { getChainPublicClient } from '../../network/getChainPublicClient';
 import { RESOLVER_ADDRESSES_BY_CHAIN_ID } from '../constants';
-import type { BaseName, GetAvatar, GetAvatarReturnType } from '../types';
+import type { Basename, GetAvatar, GetAvatarReturnType } from '../types';
 import { getBaseDefaultProfilePicture } from './getBaseDefaultProfilePicture';
 import { isBasename } from './isBasename';
 
@@ -57,9 +57,9 @@ export const getAvatar = async ({
     return mainnetEnsAvatar;
   }
 
-  // 3. If username is a basename (.base.eth / .basetest.eth), use default basename avatars
+  // 3. If username is a Basename (.base.eth / .basetest.eth), use default Basename avatars
   if (usernameIsBasename) {
-    return getBaseDefaultProfilePicture(ensName as BaseName);
+    return getBaseDefaultProfilePicture(ensName as Basename);
   }
 
   // 4. No avatars to display

src/identity/utils/getBaseDefaultProfilePicture.tsx

@@ -1,8 +1,8 @@
 import { BASE_DEFAULT_PROFILE_PICTURES } from '../constants';
-import type { BaseName } from '../types';
+import type { Basename } from '../types';
 import { getBaseDefaultProfilePictureIndex } from './getBaseDefaultProfilePictureIndex';
 
-export const getBaseDefaultProfilePicture = (username: BaseName) => {
+export const getBaseDefaultProfilePicture = (username: Basename) => {
   const profilePictureIndex = getBaseDefaultProfilePictureIndex(
     username,
     BASE_DEFAULT_PROFILE_PICTURES.length,

src/identity/utils/getName.ts

@@ -4,7 +4,7 @@ import { isEthereum } from '../../isEthereum';
 import { getChainPublicClient } from '../../network/getChainPublicClient';
 import L2ResolverAbi from '../abis/L2ResolverAbi';
 import { RESOLVER_ADDRESSES_BY_CHAIN_ID } from '../constants';
-import type { BaseName, GetName, GetNameReturnType } from '../types';
+import type { Basename, GetName, GetNameReturnType } from '../types';
 import { convertReverseNodeToBytes } from './convertReverseNodeToBytes';
 
 /**
@@ -32,14 +32,14 @@ export const getName = async ({
   if (chainIsBase) {
     const addressReverseNode = convertReverseNodeToBytes(address, base.id);
     try {
-      const baseName = await client.readContract({
+      const basename = await client.readContract({
         abi: L2ResolverAbi,
         address: RESOLVER_ADDRESSES_BY_CHAIN_ID[chain.id],
         functionName: 'name',
         args: [addressReverseNode],
       });
-      if (baseName) {
-        return baseName as BaseName;
+      if (basename) {
+        return basename as Basename;
       }
     } catch (_error) {
       // This is a best effort attempt, so we don't need to do anything here.

src/internal/svg/baseNameSvg.tsx renamed to src/internal/svg/basenameSvg.tsx

@@ -1,8 +1,8 @@
 import { fill } from '../../styles/theme';
 
-export const baseNameSvg = (
+export const basenameSvg = (
   <svg
-    data-testid="ockbaseNameSvg"
+    data-testid="ockBasenameSvg"
     role="img"
     aria-label="ock-base-name"
     width="100%"

src/wallet/components/WalletDropdownBaseName.test.tsx renamed to src/wallet/components/WalletDropdownBasename.test.tsx

@@ -5,7 +5,7 @@ import { base } from 'viem/chains';
 import { describe, expect, it, vi } from 'vitest';
 import { useAccount } from 'wagmi';
 import { useName } from '../../identity/hooks/useName';
-import { WalletDropdownBaseName } from './WalletDropdownBaseName';
+import { WalletDropdownBasename } from './WalletDropdownBasename';
 import { useWalletContext } from './WalletProvider';
 
 vi.mock('wagmi', () => ({
@@ -20,7 +20,7 @@ vi.mock('./WalletProvider', () => ({
   useWalletContext: vi.fn(),
 }));
 
-describe('WalletDropdownBaseName', () => {
+describe('WalletDropdownBasename', () => {
   it('should render "Claim Basename" when no basename', () => {
     (useAccount as vi.Mock<[], Partial<GetAccountReturnType>>).mockReturnValue({
       address: '0x1234' as `0x${string}`,
@@ -38,7 +38,7 @@ describe('WalletDropdownBaseName', () => {
       error: null,
     });
 
-    render(<WalletDropdownBaseName />);
+    render(<WalletDropdownBasename />);
     expect(screen.getByText('Claim Basename')).toBeInTheDocument();
     expect(screen.getByText('NEW')).toBeInTheDocument();
   });
@@ -60,7 +60,7 @@ describe('WalletDropdownBaseName', () => {
       error: null,
     });
 
-    render(<WalletDropdownBaseName />);
+    render(<WalletDropdownBasename />);
     expect(screen.getByText('Profile')).toBeInTheDocument();
     expect(screen.queryByText('NEW')).not.toBeInTheDocument();
   });
@@ -82,7 +82,7 @@ describe('WalletDropdownBaseName', () => {
       error: null,
     });
 
-    render(<WalletDropdownBaseName />);
+    render(<WalletDropdownBasename />);
     expect(screen.getByTestId('ockSpinner')).toBeInTheDocument();
     expect(screen.queryByText('Claim Basename')).not.toBeInTheDocument();
     expect(screen.queryByText('Profile')).not.toBeInTheDocument();
@@ -98,7 +98,7 @@ describe('WalletDropdownBaseName', () => {
       chain: base,
     });
 
-    const { container } = render(<WalletDropdownBaseName />);
+    const { container } = render(<WalletDropdownBasename />);
     expect(container.firstChild).toBeNull();
   });
 });

src/wallet/components/WalletDropdownBaseName.tsx renamed to src/wallet/components/WalletDropdownBasename.tsx

@@ -1,30 +1,30 @@
 import { useAccount } from 'wagmi';
 import { useName } from '../../identity/hooks/useName';
 import { Spinner } from '../../internal/components/Spinner';
-import { baseNameSvg } from '../../internal/svg/baseNameSvg';
+import { basenameSvg } from '../../internal/svg/basenameSvg';
 import { cn, pressable, text } from '../../styles/theme';
-import type { WalletDropdownBaseNameReact } from '../types';
+import type { WalletDropdownBasenameReact } from '../types';
 import { useWalletContext } from './WalletProvider';
 
-export function WalletDropdownBaseName({
+export function WalletDropdownBasename({
   className,
-}: WalletDropdownBaseNameReact) {
+}: WalletDropdownBasenameReact) {
   const { address } = useAccount();
   const { chain } = useWalletContext();
 
   if (!address || !chain) {
     return null;
   }
 
-  const { data: baseName, isLoading } = useName({
+  const { data: basename, isLoading } = useName({
     address,
     chain,
   });
 
-  const hasBaseUserName = !!baseName;
+  const hasBaseUserName = !!basename;
   const title = hasBaseUserName ? 'Profile' : 'Claim Basename';
   const href = hasBaseUserName
-    ? `https://www.base.org/name/${baseName}`
+    ? `https://www.base.org/name/${basename}`
     : 'https://www.base.org/names';
 
   return (
@@ -39,7 +39,7 @@ export function WalletDropdownBaseName({
       rel="noopener noreferrer"
     >
       <div className="-translate-y-1/2 absolute top-1/2 left-4 flex h-[1.125rem] w-[1.125rem] items-center justify-center">
-        {baseNameSvg}
+        {basenameSvg}
       </div>
       <div className="flex w-full items-center pl-6">
         {isLoading ? (

src/wallet/index.ts

@@ -2,7 +2,7 @@
 export { ConnectWallet } from './components/ConnectWallet';
 export { Wallet } from './components/Wallet';
 export { WalletDropdown } from './components/WalletDropdown';
-export { WalletDropdownBaseName } from './components/WalletDropdownBaseName';
+export { WalletDropdownBasename } from './components/WalletDropdownBasename';
 export { WalletDropdownDisconnect } from './components/WalletDropdownDisconnect';
 export { WalletDropdownFundLink } from './components/WalletDropdownFundLink';
 export { WalletDropdownLink } from './components/WalletDropdownLink';
@@ -14,7 +14,7 @@ export type {
   IsWalletACoinbaseSmartWalletOptions,
   IsWalletACoinbaseSmartWalletResponse,
   WalletContextType,
-  WalletDropdownBaseNameReact,
+  WalletDropdownBasenameReact,
   WalletDropdownDisconnectReact,
   WalletDropdownFundLinkReact,
   WalletDropdownLinkReact,

src/wallet/types.ts

@@ -84,7 +84,7 @@ export type WalletBottomSheetReact = {
 /**
  * Note: exported as public Type
  */
-export type WalletDropdownBaseNameReact = {
+export type WalletDropdownBasenameReact = {
   className?: string; // Optional className override for the element
 };