From b62f767988f912d9018f3128e378063ac7926835 Mon Sep 17 00:00:00 2001
From: Alissa Crane <alissa.crane@coinbase.com>
Date: Wed, 25 Sep 2024 09:08:14 -0700
Subject: [PATCH 1/5] add wallet default component

---
 .../components/AppProvider.tsx                |  1 +
 .../nextjs-app-router/components/Demo.tsx     |  9 +++-
 .../components/demo/WalletDefault.tsx         | 11 +++++
 .../components/form/active-component.tsx      |  3 ++
 src/wallet/components/WalletDefault.tsx       | 41 +++++++++++++++++++
 src/wallet/index.ts                           |  1 +
 6 files changed, 64 insertions(+), 2 deletions(-)
 create mode 100644 playground/nextjs-app-router/components/demo/WalletDefault.tsx
 create mode 100644 src/wallet/components/WalletDefault.tsx

diff --git a/playground/nextjs-app-router/components/AppProvider.tsx b/playground/nextjs-app-router/components/AppProvider.tsx
index c6c37f7126..c737ac1381 100644
--- a/playground/nextjs-app-router/components/AppProvider.tsx
+++ b/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 {
diff --git a/playground/nextjs-app-router/components/Demo.tsx b/playground/nextjs-app-router/components/Demo.tsx
index 807ad913a8..66ee85b3ee 100644
--- a/playground/nextjs-app-router/components/Demo.tsx
+++ b/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';
 
@@ -57,13 +58,17 @@ function Demo() {
     if (activeComponent === OnchainKitComponent.Swap) {
       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 <></>;
diff --git a/playground/nextjs-app-router/components/demo/WalletDefault.tsx b/playground/nextjs-app-router/components/demo/WalletDefault.tsx
new file mode 100644
index 0000000000..f94f1fb3a1
--- /dev/null
+++ b/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>
+  );
+}
diff --git a/playground/nextjs-app-router/components/form/active-component.tsx b/playground/nextjs-app-router/components/form/active-component.tsx
index bfc3498b18..5044f959c1 100644
--- a/playground/nextjs-app-router/components/form/active-component.tsx
+++ b/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>
diff --git a/src/wallet/components/WalletDefault.tsx b/src/wallet/components/WalletDefault.tsx
new file mode 100644
index 0000000000..ac85baf08a
--- /dev/null
+++ b/src/wallet/components/WalletDefault.tsx
@@ -0,0 +1,41 @@
+import { Address, Avatar, EthBalance, Identity, Name } from '../../identity';
+import { color } from '../../styles/theme';
+import {
+  ConnectWallet,
+  ConnectWalletText,
+  Wallet,
+  WalletDropdown,
+  WalletDropdownDisconnect,
+  WalletDropdownLink,
+} from '../index';
+import { useAccount } from 'wagmi';
+
+export function WalletDefault() {
+  const { address } = useAccount();
+
+  return (
+    <Wallet>
+      <ConnectWallet>
+        <ConnectWalletText>Connect Wallet</ConnectWalletText>
+        <Avatar address={address} 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>
+  );
+}
diff --git a/src/wallet/index.ts b/src/wallet/index.ts
index c4ba3fb03a..a2b84bfca5 100644
--- a/src/wallet/index.ts
+++ b/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';

From 88ea5283c12f4737fd38d6d30d2d3f93ab7f50f0 Mon Sep 17 00:00:00 2001
From: Alissa Crane <alissa.crane@coinbase.com>
Date: Tue, 1 Oct 2024 11:10:28 -0700
Subject: [PATCH 2/5] fix lint

---
 src/wallet/components/WalletDefault.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/wallet/components/WalletDefault.tsx b/src/wallet/components/WalletDefault.tsx
index ac85baf08a..ffafa9b2f2 100644
--- a/src/wallet/components/WalletDefault.tsx
+++ b/src/wallet/components/WalletDefault.tsx
@@ -1,3 +1,4 @@
+import { useAccount } from 'wagmi';
 import { Address, Avatar, EthBalance, Identity, Name } from '../../identity';
 import { color } from '../../styles/theme';
 import {
@@ -8,7 +9,6 @@ import {
   WalletDropdownDisconnect,
   WalletDropdownLink,
 } from '../index';
-import { useAccount } from 'wagmi';
 
 export function WalletDefault() {
   const { address } = useAccount();

From 1a001d6e721d7a11e942f1d453f14fb543db9759 Mon Sep 17 00:00:00 2001
From: Alissa Crane <alissa.crane@coinbase.com>
Date: Tue, 1 Oct 2024 11:38:05 -0700
Subject: [PATCH 3/5] add test coverage

---
 src/wallet/components/WalletDefault.test.tsx | 82 ++++++++++++++++++++
 src/wallet/components/WalletDefault.tsx      |  5 +-
 2 files changed, 83 insertions(+), 4 deletions(-)
 create mode 100644 src/wallet/components/WalletDefault.test.tsx

diff --git a/src/wallet/components/WalletDefault.test.tsx b/src/wallet/components/WalletDefault.test.tsx
new file mode 100644
index 0000000000..0cea7a65de
--- /dev/null
+++ b/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 { WalletDefault } from './WalletDefault';
+import { useWalletContext } from './WalletProvider';
+import { useName } from '../../identity/hooks/useName';
+import { useAvatar } from '../../identity/hooks/useAvatar';
+
+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();
+  });
+});
diff --git a/src/wallet/components/WalletDefault.tsx b/src/wallet/components/WalletDefault.tsx
index ffafa9b2f2..1fbe5212bd 100644
--- a/src/wallet/components/WalletDefault.tsx
+++ b/src/wallet/components/WalletDefault.tsx
@@ -1,4 +1,3 @@
-import { useAccount } from 'wagmi';
 import { Address, Avatar, EthBalance, Identity, Name } from '../../identity';
 import { color } from '../../styles/theme';
 import {
@@ -11,13 +10,11 @@ import {
 } from '../index';
 
 export function WalletDefault() {
-  const { address } = useAccount();
-
   return (
     <Wallet>
       <ConnectWallet>
         <ConnectWalletText>Connect Wallet</ConnectWalletText>
-        <Avatar address={address} className="h-6 w-6" />
+        <Avatar className="h-6 w-6" />
         <Name />
       </ConnectWallet>
       <WalletDropdown>

From b5260f1fca1a4373dcbea97aedfd8cb0ac2808b7 Mon Sep 17 00:00:00 2001
From: Alissa Crane <alissa.crane@coinbase.com>
Date: Tue, 1 Oct 2024 22:05:49 -0700
Subject: [PATCH 4/5] fix lint

---
 playground/nextjs-app-router/components/Demo.tsx | 1 +
 src/wallet/components/WalletDefault.test.tsx     | 4 ++--
 2 files changed, 3 insertions(+), 2 deletions(-)

diff --git a/playground/nextjs-app-router/components/Demo.tsx b/playground/nextjs-app-router/components/Demo.tsx
index 66ee85b3ee..ff3f586d39 100644
--- a/playground/nextjs-app-router/components/Demo.tsx
+++ b/playground/nextjs-app-router/components/Demo.tsx
@@ -42,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 />;
diff --git a/src/wallet/components/WalletDefault.test.tsx b/src/wallet/components/WalletDefault.test.tsx
index 0cea7a65de..9661e812c6 100644
--- a/src/wallet/components/WalletDefault.test.tsx
+++ b/src/wallet/components/WalletDefault.test.tsx
@@ -1,10 +1,10 @@
 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';
-import { useName } from '../../identity/hooks/useName';
-import { useAvatar } from '../../identity/hooks/useAvatar';
 
 vi.mock('../../useBreakpoints', () => ({
   useBreakpoints: vi.fn(),

From 3200735a312ac85a7797ebd085e46509181f7737 Mon Sep 17 00:00:00 2001
From: Alissa Crane <alissa.crane@coinbase.com>
Date: Thu, 3 Oct 2024 12:53:13 -0700
Subject: [PATCH 5/5] format

---
 playground/nextjs-app-router/components/Demo.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/playground/nextjs-app-router/components/Demo.tsx b/playground/nextjs-app-router/components/Demo.tsx
index ff3f586d39..1166182c9f 100644
--- a/playground/nextjs-app-router/components/Demo.tsx
+++ b/playground/nextjs-app-router/components/Demo.tsx
@@ -59,7 +59,7 @@ function Demo() {
     if (activeComponent === OnchainKitComponent.Swap) {
       return <SwapDemo />;
     }
-    
+
     if (activeComponent === OnchainKitComponent.SwapDefault) {
       return <SwapDefaultDemo />;
     }