From ec56e5a3f6cca14a72e89a8205b1c7371ec517ee Mon Sep 17 00:00:00 2001
From: Alissa Crane <alissa.crane@coinbase.com>
Date: Tue, 17 Dec 2024 12:32:45 -0800
Subject: [PATCH] update buy button

---
 src/buy/components/Buy.test.tsx       | 22 +++++++++++++++
 src/buy/components/BuyButton.test.tsx | 39 +++++++++++++++++++++++++++
 src/buy/components/BuyButton.tsx      |  6 +++++
 3 files changed, 67 insertions(+)

diff --git a/src/buy/components/Buy.test.tsx b/src/buy/components/Buy.test.tsx
index ba3606f6da..de5a64b406 100644
--- a/src/buy/components/Buy.test.tsx
+++ b/src/buy/components/Buy.test.tsx
@@ -1,5 +1,11 @@
 import { fireEvent, render, screen } from '@testing-library/react';
 import { type Mock, beforeEach, describe, expect, it, vi } from 'vitest';
+import {
+  type Config,
+  type UseConnectReturnType,
+  useAccount,
+  useConnect,
+} from 'wagmi';
 import { useOnchainKit } from '../../core-react/useOnchainKit';
 import { degenToken } from '../../token/constants';
 import { useOutsideClick } from '../../ui/react/internal/hooks/useOutsideClick';
@@ -29,6 +35,11 @@ vi.mock('../../core-react/useOnchainKit', () => ({
   useOnchainKit: vi.fn(),
 }));
 
+vi.mock('wagmi', () => ({
+  useAccount: vi.fn(),
+  useConnect: vi.fn(),
+}));
+
 type useOutsideClickType = ReturnType<
   typeof vi.fn<
     (
@@ -58,8 +69,19 @@ describe('Buy', () => {
         amount: 10,
         setAmount: vi.fn(),
       },
+      address: '0x123',
     });
 
+    (useAccount as Mock).mockReturnValue({
+      address: '0x123',
+    });
+
+    vi.mocked(useConnect).mockReturnValue({
+      connectors: [{ id: 'mockConnector' }],
+      connect: vi.fn(),
+      status: 'connected',
+    } as unknown as UseConnectReturnType<Config, unknown>);
+
     (useOutsideClick as unknown as useOutsideClickType).mockImplementation(
       (_, callback) => {
         mockOutsideClickCallback = callback;
diff --git a/src/buy/components/BuyButton.test.tsx b/src/buy/components/BuyButton.test.tsx
index af4dfa0613..4a3ec26d5a 100644
--- a/src/buy/components/BuyButton.test.tsx
+++ b/src/buy/components/BuyButton.test.tsx
@@ -1,5 +1,12 @@
 import { fireEvent, render, screen } from '@testing-library/react';
 import { type Mock, beforeEach, describe, expect, it, vi } from 'vitest';
+import {
+  type Config,
+  type UseAccountReturnType,
+  type UseConnectReturnType,
+  useAccount,
+  useConnect,
+} from 'wagmi';
 import { BuyButton } from './BuyButton';
 import { useBuyContext } from './BuyProvider';
 
@@ -15,6 +22,11 @@ vi.mock('../../internal/svg/checkmarkSvg', () => ({
   checkmarkSvg: <svg data-testid="checkmarkSvg" />,
 }));
 
+vi.mock('wagmi', () => ({
+  useAccount: vi.fn(),
+  useConnect: vi.fn(),
+}));
+
 describe('BuyButton', () => {
   const mockSetIsDropdownOpen = vi.fn();
 
@@ -27,6 +39,7 @@ describe('BuyButton', () => {
       fromUSDC: { loading: false },
       to: { loading: false, amount: 10, token: 'ETH' },
       lifecycleStatus: { statusName: 'idle' },
+      address: '0x123',
     });
   });
 
@@ -47,6 +60,7 @@ describe('BuyButton', () => {
       fromUSDC: { loading: false },
       to: { loading: false, amount: 10, token: 'ETH' },
       lifecycleStatus: { statusName: 'idle' },
+      address: '0x123',
     });
 
     render(<BuyButton />);
@@ -62,6 +76,7 @@ describe('BuyButton', () => {
       fromUSDC: { loading: false },
       to: { loading: false, amount: 10, token: 'ETH' },
       lifecycleStatus: { statusName: 'success' },
+      address: '0x123',
     });
 
     render(<BuyButton />);
@@ -77,6 +92,7 @@ describe('BuyButton', () => {
       fromUSDC: { loading: false },
       to: { loading: false, amount: null, token: null },
       lifecycleStatus: { statusName: 'idle' },
+      address: '0x123',
     });
 
     render(<BuyButton />);
@@ -93,4 +109,27 @@ describe('BuyButton', () => {
 
     expect(mockSetIsDropdownOpen).toHaveBeenCalledWith(true);
   });
+
+  it('should render ConnectWallet if disconnected and no missing fields', () => {
+    (useBuyContext as Mock).mockReturnValue({
+      setIsDropdownOpen: mockSetIsDropdownOpen,
+      from: { loading: false },
+      fromETH: { loading: false },
+      fromUSDC: { loading: false },
+      to: { loading: false, amount: 10, token: 'ETH' },
+      lifecycleStatus: { statusName: 'idle' },
+    });
+    vi.mocked(useAccount).mockReturnValue({
+      address: '',
+      status: 'disconnected',
+    } as unknown as UseAccountReturnType<Config>);
+    vi.mocked(useConnect).mockReturnValue({
+      connectors: [{ id: 'mockConnector' }],
+      connect: vi.fn(),
+      status: 'idle',
+    } as unknown as UseConnectReturnType<Config, unknown>);
+    render(<BuyButton />);
+    const button = screen.getByTestId('ockConnectWallet_Container');
+    expect(button).toBeDefined();
+  });
 });
diff --git a/src/buy/components/BuyButton.tsx b/src/buy/components/BuyButton.tsx
index b741e7bac7..0592832077 100644
--- a/src/buy/components/BuyButton.tsx
+++ b/src/buy/components/BuyButton.tsx
@@ -9,10 +9,12 @@ import {
   pressable,
   text,
 } from '../../styles/theme';
+import { ConnectWallet } from '../../wallet';
 import { useBuyContext } from './BuyProvider';
 
 export function BuyButton() {
   const {
+    address,
     setIsDropdownOpen,
     from,
     fromETH,
@@ -41,6 +43,10 @@ export function BuyButton() {
     return 'Buy';
   }, [statusName]);
 
+  if (!isDisabled && !address) {
+    return <ConnectWallet text="Buy" className="h-12 w-24 min-w-24" />;
+  }
+
   return (
     <button
       type="button"