fix: rename onchainname component to name (#86)

.changeset/itchy-glasses-add.md

@@ -0,0 +1,27 @@
+---
+'@coinbase/onchainkit': minor
+---
+
+- **feat**: Rename the component from `OnchainName` in our Identity Kit. This is a breaking change. `OnchainName` is being renamed to `Name` for simplicity and clarity.
+
+BREAKING CHANGES
+
+To enhance usability and intuitiveness, the component name has been simplified. `OnchainName` is now renamed to `Name`.
+
+Before
+
+```ts
+import { OnchainName } from '@coinbase/onchainkit';
+
+...
+<OnchainName address="0x1234">
+```
+
+After
+
+```ts
+import { Name } from '@coinbase/onchainkit';
+
+...
+<Name address="0x1234">
+```

README.md

@@ -355,20 +355,20 @@ type FrameMetadataResponse = Record<string, string>;
 
 ## Identity Kit 👨‍🚀
 
-### OnchainName
+### Name
 
-The `OnchainName` component is used to display ENS names associated with Ethereum addresses. When an ENS name is not available, it defaults to showing a truncated version of the address.
+The `Name` component is used to display ENS names associated with Ethereum addresses. When an ENS name is not available, it defaults to showing a truncated version of the address.
 
 ```tsx
-import { OnchainName } from '@coinbase/onchainkit';
+import { Name } from '@coinbase/onchainkit';
 
-<OnchainName address="0x1234567890abcdef1234567890abcdef12345678" sliced={false} />;
+<Name address="0x1234567890abcdef1234567890abcdef12345678" sliced={false} />;
 ```
 
 **@Props**
 
 ```ts
-type UseOnchainName = {
+type UseName = {
   // Ethereum address to be resolved from ENS.
   address: Address;
   // Optional CSS class for custom styling.

src/components/OnchainName.test.tsx → src/components/Name.test.tsx

@@ -3,13 +3,13 @@
  */
 import React from 'react';
 import { render, screen } from '@testing-library/react';
-import { OnchainName } from './OnchainName';
-import { useOnchainName } from '../hooks/useOnchainName';
+import { Name } from './Name';
+import { useName } from '../hooks/useName';
 import { getSlicedAddress } from '../core/address';
 
 // Mocking the hooks and utilities
-jest.mock('../hooks/useOnchainName', () => ({
-  useOnchainName: jest.fn(),
+jest.mock('../hooks/useName', () => ({
+  useName: jest.fn(),
 }));
 jest.mock('../core/address', () => ({
   getSlicedAddress: jest.fn(),
@@ -27,35 +27,35 @@ describe('OnchainAddress', () => {
   });
 
   it('displays ENS name when available', () => {
-    (useOnchainName as jest.Mock).mockReturnValue({ ensName: testName, isLoading: false });
+    (useName as jest.Mock).mockReturnValue({ ensName: testName, isLoading: false });
 
-    render(<OnchainName address={testAddress} />);
+    render(<Name address={testAddress} />);
 
     expect(screen.getByText(testName)).toBeInTheDocument();
     expect(getSlicedAddress).toHaveBeenCalledTimes(0);
   });
 
   it('displays sliced address when ENS name is not available and sliced is true as default', () => {
-    (useOnchainName as jest.Mock).mockReturnValue({ ensName: null, isLoading: false });
+    (useName as jest.Mock).mockReturnValue({ ensName: null, isLoading: false });
 
-    render(<OnchainName address={testAddress} />);
+    render(<Name address={testAddress} />);
 
     expect(screen.getByText(mockSliceAddress(testAddress))).toBeInTheDocument();
   });
 
   it('displays empty when ens still fetching', () => {
-    (useOnchainName as jest.Mock).mockReturnValue({ ensName: null, isLoading: true });
+    (useName as jest.Mock).mockReturnValue({ ensName: null, isLoading: true });
 
-    render(<OnchainName address={testAddress} />);
+    render(<Name address={testAddress} />);
 
     expect(screen.queryByText(mockSliceAddress(testAddress))).not.toBeInTheDocument();
     expect(getSlicedAddress).toHaveBeenCalledTimes(0);
   });
 
   it('displays full address when ENS name is not available and sliced is false', () => {
-    (useOnchainName as jest.Mock).mockReturnValue({ ensName: null, isLoading: false });
+    (useName as jest.Mock).mockReturnValue({ ensName: null, isLoading: false });
 
-    render(<OnchainName address={testAddress} sliced={false} />);
+    render(<Name address={testAddress} sliced={false} />);
 
     expect(screen.getByText(testAddress)).toBeInTheDocument();
   });

src/components/OnchainName.tsx → src/components/Name.tsx

@@ -1,17 +1,17 @@
 import React, { useMemo } from 'react';
 import { getSlicedAddress } from '../core/address';
-import { useOnchainName } from '../hooks/useOnchainName';
+import { useName } from '../hooks/useName';
 import type { Address } from 'viem';
 
-type OnchainNameProps = {
+type NameProps = {
   address: Address;
   className?: string;
   sliced?: boolean;
   props?: React.HTMLAttributes<HTMLSpanElement>;
 };
 
 /**
- * OnchainName is a React component that renders the user name from an Ethereum address.
+ * Name is a React component that renders the user name from an Ethereum address.
  * It displays the ENS name if available; otherwise, it shows either a sliced version of the address
  * or the full address, based on the 'sliced' prop. By default, 'sliced' is set to true.
  *
@@ -20,8 +20,8 @@ type OnchainNameProps = {
  * @param {boolean} [sliced=true] - Determines if the address should be sliced when no ENS name is available.
  * @param {React.HTMLAttributes<HTMLSpanElement>} [props] - Additional HTML attributes for the span element.
  */
-export function OnchainName({ address, className, sliced = true, props }: OnchainNameProps) {
-  const { ensName, isLoading } = useOnchainName(address);
+export function Name({ address, className, sliced = true, props }: NameProps) {
+  const { ensName, isLoading } = useName(address);
 
   // wrapped in useMemo to prevent unnecessary recalculations.
   const normalizedAddress = useMemo(() => {

src/hooks/useOnchainName.test.ts → src/hooks/useName.test.ts

@@ -4,13 +4,13 @@
 
 import { renderHook, waitFor } from '@testing-library/react';
 import { publicClient } from '../network/client';
-import { useOnchainName, ensNameAction } from './useOnchainName';
+import { useName, ensNameAction } from './useName';
 import { useOnchainActionWithCache } from './useOnchainActionWithCache';
 
 jest.mock('../network/client');
 jest.mock('./useOnchainActionWithCache');
 
-describe('useOnchainName', () => {
+describe('useName', () => {
   const mockGetEnsName = publicClient.getEnsName as jest.Mock;
   const mockUseOnchainActionWithCache = useOnchainActionWithCache as jest.Mock;
 
@@ -31,8 +31,8 @@ describe('useOnchainName', () => {
       };
     });
 
-    // Use the renderHook function to create a test harness for the useOnchainName hook
-    const { result } = renderHook(() => useOnchainName(testAddress));
+    // Use the renderHook function to create a test harness for the useName hook
+    const { result } = renderHook(() => useName(testAddress));
 
     // Wait for the hook to finish fetching the ENS name
     await waitFor(() => {
@@ -54,8 +54,8 @@ describe('useOnchainName', () => {
       };
     });
 
-    // Use the renderHook function to create a test harness for the useOnchainName hook
-    const { result } = renderHook(() => useOnchainName(testAddress));
+    // Use the renderHook function to create a test harness for the useName hook
+    const { result } = renderHook(() => useName(testAddress));
 
     // Wait for the hook to finish fetching the ENS name
     await waitFor(() => {

src/hooks/useOnchainName.ts → src/hooks/useName.ts

@@ -27,7 +27,7 @@ export const ensNameAction = (address: Address) => async (): Promise<GetEnsNameR
  *  - `ensName`: The fetched ENS name for the provided address, or null if not found or in case of an error.
  *  - `isLoading`: A boolean indicating whether the ENS name is currently being fetched.
  */
-export const useOnchainName = (address: Address) => {
+export const useName = (address: Address) => {
   const ensActionKey = `ens-name-${address}`;
   const { data: ensName, isLoading } = useOnchainActionWithCache(
     ensNameAction(address),

src/index.ts

@@ -4,6 +4,6 @@ export { getFrameHtmlResponse } from './core/getFrameHtmlResponse';
 export { getFrameMetadata } from './core/getFrameMetadata';
 export { getFrameMessage } from './core/getFrameMessage';
 export { FrameMetadata } from './components/FrameMetadata';
-export { OnchainName } from './components/OnchainName';
-export { useOnchainName } from './hooks/useOnchainName';
+export { Name } from './components/Name';
+export { useName } from './hooks/useName';
 export type { FrameMetadataType, FrameRequest, FrameValidationData } from './core/types';