feat: IdentityCard and Socials components (#1489)

Author: cpcramer

.changeset/twenty-lies-allow.md

@@ -0,0 +1,5 @@
+---
+'@coinbase/onchainkit': patch
+---
+
+-**feat**: Added `IdentityCard` and `Socials` components. By @cpcramer #1489

playground/nextjs-app-router/components/AppProvider.tsx

@@ -10,6 +10,7 @@ import { WalletPreference } from './form/wallet-type';
 export enum OnchainKitComponent {
   Fund = 'fund',
   Identity = 'identity',
+  IdentityCard = 'identity-card',
   Checkout = 'checkout',
   Swap = 'swap',
   SwapDefault = 'swap-default',

playground/nextjs-app-router/components/Demo.tsx

@@ -6,6 +6,7 @@ import DemoOptions from './DemoOptions';
 import CheckoutDemo from './demo/Checkout';
 import FundDemo from './demo/Fund';
 import IdentityDemo from './demo/Identity';
+import { IdentityCardDemo } from './demo/IdentityCard';
 import NFTCardDemo from './demo/NFTCard';
 import NFTMintCardDemo from './demo/NFTMintCard';
 import SwapDemo from './demo/Swap';
@@ -88,6 +89,10 @@ function Demo() {
       return <NFTCardDemo />;
     }
 
+    if (activeComponent === OnchainKitComponent.IdentityCard) {
+      return <IdentityCardDemo />;
+    }
+
     return <></>;
   }
 

playground/nextjs-app-router/components/demo/Identity.tsx

@@ -4,12 +4,13 @@ import {
   Badge,
   Identity,
   Name,
+  Socials,
   useAddress,
   useAvatar,
   useName,
 } from '@coinbase/onchainkit/identity';
 import { useEffect } from 'react';
-import { base } from 'viem/chains';
+import { base, mainnet } from 'viem/chains';
 import { useAccount } from 'wagmi';
 
 export default function IdentityDemo() {
@@ -50,24 +51,26 @@ export default function IdentityDemo() {
                 Default Chain
               </h2>
               <div className="flex items-center space-x-4">
-                <Identity address={address}>
+                <Identity address={address} chain={mainnet}>
                   <Avatar />
                   <Name>
                     <Badge />
                   </Name>
                   <Address />
+                  <Socials />
                 </Identity>
               </div>
             </div>
             <div className="space-y-2">
               <h2 className="font-medium text-gray-500 text-sm">Base Chain</h2>
               <div className="flex items-center space-x-4">
-                <Identity address={address}>
-                  <Avatar chain={base} />
-                  <Name chain={base}>
+                <Identity address={address} chain={base}>
+                  <Avatar />
+                  <Name>
                     <Badge />
                   </Name>
                   <Address />
+                  <Socials />
                 </Identity>
               </div>
             </div>

playground/nextjs-app-router/components/demo/IdentityCard.tsx

@@ -0,0 +1,30 @@
+'use client';
+
+import { IdentityCard } from '@coinbase/onchainkit/identity';
+import { base, mainnet } from 'viem/chains';
+import { useAccount } from 'wagmi';
+
+export function IdentityCardDemo() {
+  const { address } = useAccount();
+
+  if (!address) {
+    return null;
+  }
+
+  return (
+    <div className="mx-auto max-w-2xl p-4">
+      <div className="grid grid-cols-2 gap-6">
+        <div className="space-y-2">
+          <h2 className="font-medium text-gray-500 text-sm">
+            Mainnet Identity
+          </h2>
+          <IdentityCard address={address} chain={mainnet} />
+        </div>
+        <div className="space-y-2">
+          <h2 className="font-medium text-gray-500 text-sm">Base Identity</h2>
+          <IdentityCard address={address} chain={base} />
+        </div>
+      </div>
+    </div>
+  );
+}

playground/nextjs-app-router/components/demo/Wallet.tsx

@@ -4,6 +4,7 @@ import {
   EthBalance,
   Identity,
   Name,
+  Socials,
 } from '@coinbase/onchainkit/identity';
 import { color } from '@coinbase/onchainkit/theme';
 import {
@@ -28,11 +29,12 @@ function WalletComponent() {
           <Name />
         </ConnectWallet>
         <WalletDropdown>
-          <Identity className="px-4 pt-3 pb-2" hasCopyAddressOnClick={true}>
+          <Identity className="px-4 pt-3 pb-2" hasCopyAddressOnClick={false}>
             <Avatar />
             <Name />
             <Address className={color.foregroundMuted} />
             <EthBalance />
+            <Socials />
           </Identity>
           <WalletDropdownBasename />
           <WalletDropdownLink

playground/nextjs-app-router/components/form/active-component.tsx

@@ -27,6 +27,9 @@ export function ActiveComponent() {
         <SelectContent>
           <SelectItem value={OnchainKitComponent.Fund}>Fund</SelectItem>
           <SelectItem value={OnchainKitComponent.Identity}>Identity</SelectItem>
+          <SelectItem value={OnchainKitComponent.IdentityCard}>
+            IdentityCard
+          </SelectItem>
           <SelectItem value={OnchainKitComponent.Checkout}>Checkout</SelectItem>
           <SelectItem value={OnchainKitComponent.Transaction}>
             Transaction

src/identity/components/Address.test.tsx

@@ -1,4 +1,4 @@
-import { render, screen } from '@testing-library/react';
+import { fireEvent, render, screen } from '@testing-library/react';
 import { type Mock, beforeEach, describe, expect, it, vi } from 'vitest';
 import '@testing-library/jest-dom';
 import { getSlicedAddress } from '../utils/getSlicedAddress';
@@ -14,74 +14,117 @@ vi.mock('../utils/getSlicedAddress', () => ({
 }));
 
 vi.mock('./IdentityProvider', () => ({
-  useIdentityContext: vi.fn(),
+  useIdentityContext: vi.fn(() => ({
+    address: undefined,
+    ensName: undefined,
+    loading: false,
+    error: null,
+  })),
 }));
 
 const useIdentityContextMock = mock(useIdentityContext);
 
 const mockGetSlicedAddress = (addr: string) =>
   `${addr.slice(0, 5)}...${addr.slice(-4)}`;
 
+const mockClipboard = {
+  writeText: vi.fn().mockResolvedValue(undefined),
+};
+
+Object.defineProperty(navigator, 'clipboard', {
+  value: mockClipboard,
+  configurable: true,
+});
+
 describe('Address component', () => {
   const testIdentityProviderAddress = '0xIdentityAddress';
   const testAddressComponentAddress =
     '0x1234567890abcdef1234567890abcdef12345678';
 
   beforeEach(() => {
     vi.clearAllMocks();
+    mockClipboard.writeText.mockClear();
+    useIdentityContextMock.mockReturnValue({
+      address: undefined,
+      ensName: undefined,
+      loading: false,
+      error: null,
+    });
   });
 
   it('should console.error and return null when no address is provided', () => {
-    vi.mocked(useIdentityContext).mockReturnValue({});
+    useIdentityContextMock.mockReturnValue({
+      address: undefined,
+      ensName: undefined,
+      loading: false,
+      error: null,
+    });
+
     const consoleErrorSpy = vi
       .spyOn(console, 'error')
       .mockImplementation(() => {});
     const { container } = render(<Address />);
+
     expect(consoleErrorSpy).toHaveBeenCalledWith(
       'Address: an Ethereum address must be provided to the Identity or Address component.',
     );
     expect(container.firstChild).toBeNull();
+
+    consoleErrorSpy.mockRestore();
   });
 
   it('renders the sliced address when address supplied to Identity', () => {
     useIdentityContextMock.mockReturnValue({
       address: testAddressComponentAddress,
+      ensName: undefined,
+      loading: false,
+      error: null,
     });
     (getSlicedAddress as Mock).mockReturnValue(
       mockGetSlicedAddress(testAddressComponentAddress),
     );
 
-    const { getByText } = render(<Address />);
+    render(<Address />);
+    expect(getSlicedAddress).toHaveBeenCalledWith(testAddressComponentAddress);
     expect(
-      getByText(mockGetSlicedAddress(testAddressComponentAddress)),
+      screen.getByText(mockGetSlicedAddress(testAddressComponentAddress)),
     ).toBeInTheDocument();
   });
 
-  it('renders the sliced address when address supplied to Identity', () => {
-    useIdentityContextMock.mockReturnValue({});
+  it('renders the sliced address when address supplied directly to component', () => {
+    useIdentityContextMock.mockReturnValue({
+      address: undefined,
+      ensName: undefined,
+      loading: false,
+      error: null,
+    });
     (getSlicedAddress as Mock).mockReturnValue(
       mockGetSlicedAddress(testAddressComponentAddress),
     );
 
-    const { getByText } = render(
-      <Address address={testAddressComponentAddress} />,
-    );
+    render(<Address address={testAddressComponentAddress} />);
+    expect(getSlicedAddress).toHaveBeenCalledWith(testAddressComponentAddress);
     expect(
-      getByText(mockGetSlicedAddress(testAddressComponentAddress)),
+      screen.getByText(mockGetSlicedAddress(testAddressComponentAddress)),
     ).toBeInTheDocument();
   });
 
-  it('displays sliced address when ENS name is not available and isSliced is set to true', () => {
-    useIdentityContextMock.mockReturnValue({});
+  it('displays sliced address when ENS name is not available and isSliced is true', () => {
+    useIdentityContextMock.mockReturnValue({
+      address: undefined,
+      ensName: undefined,
+      loading: false,
+      error: null,
+    });
     (getSlicedAddress as Mock).mockReturnValue(
       mockGetSlicedAddress(testAddressComponentAddress),
     );
 
     render(<Address address={testAddressComponentAddress} isSliced={true} />);
+    expect(getSlicedAddress).toHaveBeenCalledWith(testAddressComponentAddress);
     expect(
       screen.getByText(mockGetSlicedAddress(testAddressComponentAddress)),
     ).toBeInTheDocument();
-    expect(getSlicedAddress).toHaveBeenCalledWith(testAddressComponentAddress);
   });
 
   it('displays full address when isSliced is false and ENS name is not available', () => {
@@ -91,7 +134,7 @@ describe('Address component', () => {
     expect(getSlicedAddress).not.toHaveBeenCalled();
   });
 
-  it('use identity context address if provided', () => {
+  it('uses identity context address if provided', () => {
     useIdentityContextMock.mockReturnValue({
       address: testIdentityProviderAddress,
     });
@@ -100,12 +143,78 @@ describe('Address component', () => {
     expect(getSlicedAddress).not.toHaveBeenCalled();
   });
 
-  it('use component address over identity context if both are provided', () => {
+  it('prioritizes component address over identity context address if both are provided', () => {
     useIdentityContextMock.mockReturnValue({
       address: testIdentityProviderAddress,
     });
     render(<Address address={testAddressComponentAddress} isSliced={false} />);
     expect(screen.getByText(testAddressComponentAddress)).toBeInTheDocument();
     expect(getSlicedAddress).not.toHaveBeenCalled();
   });
+
+  describe('clipboard functionality', () => {
+    const testAddress = '0x1234567890abcdef';
+
+    beforeEach(() => {
+      vi.clearAllMocks();
+      useIdentityContextMock.mockReturnValue({
+        address: undefined,
+        ensName: undefined,
+        loading: false,
+        error: null,
+      });
+    });
+
+    it('copies address to clipboard on click', () => {
+      render(<Address address={testAddress} />);
+      const element = screen.getByTestId('ockAddress');
+      fireEvent.click(element);
+      expect(mockClipboard.writeText).toHaveBeenCalledWith(testAddress);
+    });
+
+    it('shows Copied text after clicking', async () => {
+      render(<Address address={testAddress} />);
+      const element = screen.getByTestId('ockAddress');
+
+      const tooltipSpan = element.querySelector('span');
+      expect(tooltipSpan).toHaveTextContent('Copy');
+
+      fireEvent.click(element);
+
+      await vi.waitFor(() => {
+        expect(tooltipSpan).toHaveTextContent('Copied');
+      });
+    });
+
+    it('handles clipboard error', async () => {
+      mockClipboard.writeText.mockRejectedValueOnce(new Error('Failed'));
+      const consoleSpy = vi
+        .spyOn(console, 'error')
+        .mockImplementation(() => {});
+
+      render(<Address address={testAddress} />);
+      const element = screen.getByTestId('ockAddress');
+      fireEvent.click(element);
+
+      await vi.waitFor(() => {
+        expect(consoleSpy).toHaveBeenCalled();
+      });
+
+      consoleSpy.mockRestore();
+    });
+
+    it('copies on Enter key', () => {
+      render(<Address address={testAddress} />);
+      const element = screen.getByTestId('ockAddress');
+      fireEvent.keyDown(element, { key: 'Enter' });
+      expect(mockClipboard.writeText).toHaveBeenCalledWith(testAddress);
+    });
+
+    it('copies on Space key', () => {
+      render(<Address address={testAddress} />);
+      const element = screen.getByTestId('ockAddress');
+      fireEvent.keyDown(element, { key: ' ' });
+      expect(mockClipboard.writeText).toHaveBeenCalledWith(testAddress);
+    });
+  });
 });