feat: add WalletDefault component (#1302)

Co-authored-by: Alissa Crane <alissa.crane@coinbase.com>

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

@@ -12,6 +12,7 @@ export enum OnchainKitComponent {
   SwapDefault = 'swap-default',
   Transaction = 'transaction',
   Wallet = 'wallet',
+  WalletDefault = 'wallet-default',
 }
 
 export enum TransactionTypes {

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

@@ -11,6 +11,7 @@ import SwapDemo from './demo/Swap';
 import SwapDefaultDemo from './demo/SwapDefault';
 import TransactionDemo from './demo/Transaction';
 import WalletDemo from './demo/Wallet';
+import WalletDefaultDemo from './demo/WalletDefault';
 import { ActiveComponent } from './form/active-component';
 import { TransactionOptions } from './form/transaction-options';
 
@@ -41,6 +42,7 @@ function Demo() {
       : 'border-gray-300 bg-white text-black hover:bg-gray-100'
   }`;
 
+  // biome-ignore lint/complexity/noExcessiveCognitiveComplexity: TODO: refactor
   function renderActiveComponent() {
     if (activeComponent === OnchainKitComponent.Fund) {
       return <FundDemo />;
@@ -58,12 +60,16 @@ function Demo() {
       return <SwapDemo />;
     }
 
+    if (activeComponent === OnchainKitComponent.SwapDefault) {
+      return <SwapDefaultDemo />;
+    }
+
     if (activeComponent === OnchainKitComponent.Wallet) {
       return <WalletDemo />;
     }
 
-    if (activeComponent === OnchainKitComponent.SwapDefault) {
-      return <SwapDefaultDemo />;
+    if (activeComponent === OnchainKitComponent.WalletDefault) {
+      return <WalletDefaultDemo />;
     }
 
     return <></>;

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

@@ -0,0 +1,11 @@
+import { WalletDefault } from '@coinbase/onchainkit/wallet';
+
+export default function WalletDemo() {
+  return (
+    <div className="mx-auto">
+      <div className="flex justify-end">
+        <WalletDefault />
+      </div>
+    </div>
+  );
+}

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

@@ -35,6 +35,9 @@ export function ActiveComponent() {
             SwapDefault
           </SelectItem>
           <SelectItem value={OnchainKitComponent.Wallet}>Wallet</SelectItem>
+          <SelectItem value={OnchainKitComponent.WalletDefault}>
+            WalletDefault
+          </SelectItem>
         </SelectContent>
       </Select>
     </div>

src/wallet/components/WalletDefault.test.tsx

@@ -0,0 +1,82 @@
+import { render, screen } from '@testing-library/react';
+import { type Mock, describe, expect, it, vi } from 'vitest';
+import { useAccount, useConnect } from 'wagmi';
+import { useAvatar } from '../../identity/hooks/useAvatar';
+import { useName } from '../../identity/hooks/useName';
+import { WalletDefault } from './WalletDefault';
+import { useWalletContext } from './WalletProvider';
+
+vi.mock('../../useBreakpoints', () => ({
+  useBreakpoints: vi.fn(),
+}));
+
+vi.mock('wagmi', () => ({
+  useAccount: vi.fn(),
+  useConnect: vi.fn(),
+  useConfig: vi.fn(),
+}));
+
+vi.mock('./WalletProvider', () => ({
+  WalletProvider: ({ children }) => (
+    <div data-testid="mock-WalletProvider">{children}</div>
+  ),
+  useWalletContext: vi.fn(),
+}));
+
+vi.mock('../../identity/hooks/useName', () => ({
+  useName: vi.fn(),
+}));
+vi.mock('../../identity/hooks/useAvatar', () => ({
+  useAvatar: vi.fn(),
+}));
+
+function mock<T>(func: T) {
+  return func as Mock;
+}
+const useNameMock = mock(useName);
+const useAvatarMock = mock(useAvatar);
+
+describe('WalletDefault Component', () => {
+  beforeEach(() => {
+    (useConnect as ReturnType<typeof vi.fn>).mockReturnValue({
+      connectors: [],
+      status: 'disconnected',
+    });
+    (useAccount as ReturnType<typeof vi.fn>).mockReturnValue({
+      status: 'disconnected',
+      address: '',
+    });
+    (useWalletContext as Mock).mockReturnValue({
+      isOpen: false,
+    });
+    useNameMock.mockReturnValue({ data: null, isLoading: true });
+    useAvatarMock.mockReturnValue({ data: null, isLoading: true });
+  });
+
+  it('renders the ConnectWallet component when disconnected', () => {
+    render(<WalletDefault />);
+    expect(screen.getByText('Connect Wallet')).toBeInTheDocument();
+    expect(
+      screen.getByTestId('ockConnectWallet_Container'),
+    ).toBeInTheDocument();
+  });
+
+  it('renders the wallet address when connected', () => {
+    (useAccount as ReturnType<typeof vi.fn>).mockReturnValue({
+      status: 'connected',
+      address: '0x123',
+    });
+    (useConnect as ReturnType<typeof vi.fn>).mockReturnValue({
+      connectors: [],
+      status: 'connected',
+    });
+    (useWalletContext as Mock).mockReturnValue({
+      isOpen: false,
+      address: '0x123',
+    });
+    useNameMock.mockReturnValue({ data: null, isLoading: false });
+    render(<WalletDefault />);
+    const address = screen.getByText('0x123...x123');
+    expect(address).toBeDefined();
+  });
+});

src/wallet/components/WalletDefault.tsx

@@ -0,0 +1,38 @@
+import { Address, Avatar, EthBalance, Identity, Name } from '../../identity';
+import { color } from '../../styles/theme';
+import {
+  ConnectWallet,
+  ConnectWalletText,
+  Wallet,
+  WalletDropdown,
+  WalletDropdownDisconnect,
+  WalletDropdownLink,
+} from '../index';
+
+export function WalletDefault() {
+  return (
+    <Wallet>
+      <ConnectWallet>
+        <ConnectWalletText>Connect Wallet</ConnectWalletText>
+        <Avatar className="h-6 w-6" />
+        <Name />
+      </ConnectWallet>
+      <WalletDropdown>
+        <Identity className="px-4 pt-3 pb-2" hasCopyAddressOnClick={true}>
+          <Avatar />
+          <Name />
+          <Address className={color.foregroundMuted} />
+          <EthBalance />
+        </Identity>
+        <WalletDropdownLink
+          icon="wallet"
+          href="https://keys.coinbase.com"
+          target="_blank"
+        >
+          Wallet
+        </WalletDropdownLink>
+        <WalletDropdownDisconnect />
+      </WalletDropdown>
+    </Wallet>
+  );
+}

src/wallet/index.ts

@@ -2,6 +2,7 @@
 export { ConnectWallet } from './components/ConnectWallet';
 export { ConnectWalletText } from './components/ConnectWalletText';
 export { Wallet } from './components/Wallet';
+export { WalletDefault } from './components/WalletDefault';
 export { WalletDropdown } from './components/WalletDropdown';
 export { WalletDropdownBasename } from './components/WalletDropdownBasename';
 export { WalletDropdownDisconnect } from './components/WalletDropdownDisconnect';