diff --git a/.changeset/itchy-glasses-add.md b/.changeset/itchy-glasses-add.md new file mode 100644 index 0000000000..65d25de817 --- /dev/null +++ b/.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'; + +... + +``` + +After + +```ts +import { Name } from '@coinbase/onchainkit'; + +... + +``` diff --git a/README.md b/README.md index 63a88aab05..bb7608098b 100644 --- a/README.md +++ b/README.md @@ -355,20 +355,20 @@ type FrameMetadataResponse = Record; ## 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'; -; +; ``` **@Props** ```ts -type UseOnchainName = { +type UseName = { // Ethereum address to be resolved from ENS. address: Address; // Optional CSS class for custom styling. diff --git a/src/components/OnchainName.test.tsx b/src/components/Name.test.tsx similarity index 64% rename from src/components/OnchainName.test.tsx rename to src/components/Name.test.tsx index fa557b5ae7..0a42aec516 100644 --- a/src/components/OnchainName.test.tsx +++ b/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(); + render(); 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(); + render(); 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(); + render(); 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(); + render(); expect(screen.getByText(testAddress)).toBeInTheDocument(); }); diff --git a/src/components/OnchainName.tsx b/src/components/Name.tsx similarity index 78% rename from src/components/OnchainName.tsx rename to src/components/Name.tsx index 548d053bfa..8f610923f8 100644 --- a/src/components/OnchainName.tsx +++ b/src/components/Name.tsx @@ -1,9 +1,9 @@ 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; @@ -11,7 +11,7 @@ type OnchainNameProps = { }; /** - * 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} [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(() => { diff --git a/src/hooks/useOnchainName.test.ts b/src/hooks/useName.test.ts similarity index 91% rename from src/hooks/useOnchainName.test.ts rename to src/hooks/useName.test.ts index aa1275578d..5e64411c0e 100644 --- a/src/hooks/useOnchainName.test.ts +++ b/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(() => { diff --git a/src/hooks/useOnchainName.ts b/src/hooks/useName.ts similarity index 96% rename from src/hooks/useOnchainName.ts rename to src/hooks/useName.ts index e6bb695cb4..44c802d9e7 100644 --- a/src/hooks/useOnchainName.ts +++ b/src/hooks/useName.ts @@ -27,7 +27,7 @@ export const ensNameAction = (address: Address) => async (): Promise { +export const useName = (address: Address) => { const ensActionKey = `ens-name-${address}`; const { data: ensName, isLoading } = useOnchainActionWithCache( ensNameAction(address), diff --git a/src/index.ts b/src/index.ts index 7d9dce1873..b31ae29dd5 100644 --- a/src/index.ts +++ b/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';