update buy button

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;

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();
+  });
 });

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"