Address comments

src/fund/components/FundCard.tsx

@@ -3,7 +3,6 @@ import { Children, useMemo } from 'react';
 import { useTheme } from '../../core-react/internal/hooks/useTheme';
 import { background, border, cn, color, text } from '../../styles/theme';
 import { DEFAULT_PAYMENT_METHODS } from '../constants';
-import { useExchangeRate } from '../hooks/useExchangeRate';
 import { useFundCardFundingUrl } from '../hooks/useFundCardFundingUrl';
 import { useFundCardSetupOnrampEventListeners } from '../hooks/useFundCardSetupOnrampEventListeners';
 import type { FundCardContentPropsReact, FundCardPropsReact } from '../types';
@@ -88,11 +87,6 @@ function FundCardContent({
   paymentMethods = DEFAULT_PAYMENT_METHODS,
   submitButtonComponent,
 }: FundCardContentPropsReact) {
-  /**
-   * Fetches and sets the exchange rate for the asset
-   */
-  useExchangeRate(assetSymbol);
-
   const {
     setFundAmountFiat,
     fundAmountFiat,

src/fund/components/FundCardAmountInput.tsx

@@ -107,7 +107,7 @@ export const FundCardAmountInput = ({
         `}
       </style>
 
-      <div className="flex" style={{ height: '78px' }}>
+      <div className="flex h-20">
         {/* Display the fiat currency sign before the input*/}
         {inputType === 'fiat' && currencySign && (
           <FundCardCurrencyLabel
@@ -120,7 +120,7 @@ export const FundCardAmountInput = ({
           className={cn(
             text.body,
             'border-none bg-transparent',
-            'text-[3.75rem] leading-none outline-none',
+            'text-6xl leading-none outline-none',
           )}
           type="number"
           value={value}
@@ -153,7 +153,7 @@ export const FundCardAmountInput = ({
         className={cn(
           text.body,
           'border-none bg-transparent',
-          'text-[3.75rem] leading-none outline-none',
+          'text-6xl leading-none outline-none',
         )}
         style={{
           position: 'absolute',

src/fund/components/FundCardPaymentMethodSelectRow.tsx

@@ -25,7 +25,7 @@ export const FundCardPaymentMethodSelectRow = memo(
       >
         <span className="flex items-center gap-3">
           {!hideImage && (
-            <FundCardPaymentMethodImage paymentMethod={paymentMethod} />
+            <FundCardPaymentMethodImage paymentMethod={paymentMethod} className='h-4 w-4'/>
           )}
           <span className="flex flex-col items-start">
             <span className={cn(text.headline)}>{paymentMethod.name}</span>

src/fund/components/FundCardPaymentMethodSelectorToggle.tsx

@@ -31,7 +31,7 @@ export const FundCardPaymentMethodSelectorToggle = forwardRef(
         data-testid="ockFundCardPaymentMethodSelectorToggle"
       >
         <div className="w-4">
-          <FundCardPaymentMethodImage paymentMethod={paymentMethod} />
+          <FundCardPaymentMethodImage paymentMethod={paymentMethod} className='h-4 w-4'/>
         </div>
         <span
           className={cn(text.headline, color.foreground, 'flex w-full')}

src/fund/components/FundCardProvider.tsx

@@ -1,10 +1,12 @@
-import { createContext, useContext, useState } from 'react';
+import { createContext, useContext, useEffect, useState } from 'react';
 import { useValue } from '../../core-react/internal/hooks/useValue';
 import type {
   FundButtonStateReact,
   FundCardProviderReact,
   PaymentMethodReact,
 } from '../types';
+import { useDebounce } from '@/core-react/internal/hooks/useDebounce';
+import { fetchOnrampQuote } from '../utils/fetchOnrampQuote';
 
 type FundCardContextType = {
   selectedAsset: string;
@@ -44,6 +46,28 @@ export function FundCardProvider({ children, asset }: FundCardProviderReact) {
   const [submitButtonState, setSubmitButtonState] =
     useState<FundButtonStateReact>('default');
 
+    const fetchExchangeRate = useDebounce(async () => {
+      setExchangeRateLoading(true);
+      const quote = await fetchOnrampQuote({
+        purchaseCurrency: selectedAsset,
+        paymentCurrency: 'USD',
+        paymentAmount: '100',
+        paymentMethod: 'CARD',
+        country: 'US',
+      });
+
+      setExchangeRateLoading(false);
+
+      setExchangeRate(
+        Number(quote.purchaseAmount.value) / Number(quote.paymentSubtotal.value),
+      );
+    }, 1000);
+
+    // biome-ignore lint/correctness/useExhaustiveDependencies: One time effect
+    useEffect(() => {
+      fetchExchangeRate();
+    }, []);
+
   const value = useValue<FundCardContextType>({
     selectedAsset,
     setSelectedAsset,

src/fund/components/FundProvider.test.tsx

@@ -1,18 +1,47 @@
-import { render, screen } from '@testing-library/react';
+import { setOnchainKitConfig } from '@/core/OnchainKitConfig';
+import { render, screen, waitFor } from '@testing-library/react';
 import { act } from 'react';
-import { describe, expect, it } from 'vitest';
+import { type Mock, beforeEach, describe, expect, it, vi } from 'vitest';
 import { FundCardProvider, useFundContext } from './FundCardProvider';
 
+const mockResponseData = {
+  payment_total: { value: '100.00', currency: 'USD' },
+  payment_subtotal: { value: '120.00', currency: 'USD' },
+  purchase_amount: { value: '0.1', currency: 'BTC' },
+  coinbase_fee: { value: '2.00', currency: 'USD' },
+  network_fee: { value: '1.00', currency: 'USD' },
+  quote_id: 'quote-id-123',
+};
+
+global.fetch = vi.fn(() =>
+  Promise.resolve({
+    json: () => Promise.resolve(mockResponseData),
+  }),
+) as Mock;
+
+vi.mock('../../core-react/internal/hooks/useDebounce', () => ({
+  useDebounce: vi.fn((callback) => callback),
+}));
+
 const TestComponent = () => {
   const context = useFundContext();
   return (
     <div>
       <span data-testid="selected-asset">{context.selectedAsset}</span>
+      <span data-testid="exchange-rate">{context.exchangeRate}</span>
+      <span data-testid="loading-state">
+        {context.exchangeRateLoading ? 'loading' : 'not-loading'}
+      </span>
     </div>
   );
 };
 
 describe('FundCardProvider', () => {
+  beforeEach(() => {
+    setOnchainKitConfig({ apiKey: '123456789' });
+    vi.clearAllMocks();
+  });
+
   it('provides default context values', () => {
     render(
       <FundCardProvider asset="BTC">
@@ -48,6 +77,34 @@ describe('FundCardProvider', () => {
     expect(screen.getByTestId('selected-asset').textContent).toBe('ETH');
   });
 
+  it('fetches and sets exchange rate on mount', async () => {
+    act(() => {
+      render(
+        <FundCardProvider asset="BTC">
+          <TestComponent />
+      </FundCardProvider>,
+      );
+    });
+
+    // Check initial loading state
+    expect(screen.getByTestId('loading-state').textContent).toBe('loading');
+
+    // Wait for exchange rate to be set
+    await waitFor(() => {
+      expect(screen.getByTestId('exchange-rate').textContent).toBe('0.0008333333333333334');
+      expect(screen.getByTestId('loading-state').textContent).toBe('not-loading');
+    });
+
+    // Verify fetch was called with correct parameters
+    expect(fetch).toHaveBeenCalledWith(
+      expect.stringContaining('/quote'),
+      expect.objectContaining({
+        method: 'POST',
+        body: expect.stringContaining('"purchase_currency":"BTC"'),
+      })
+    );
+  });
+
   it('throws error when useFundContext is used outside of FundCardProvider', () => {
     const TestOutsideProvider = () => {
       useFundContext();

src/internal/components/TextInput.tsx

@@ -13,7 +13,6 @@ type TextInputReact = {
   setValue: (s: string) => void;
   value: string;
   inputValidator?: (s: string) => boolean;
-  style?: React.CSSProperties;
 };
 
 export function TextInput({
@@ -27,7 +26,6 @@ export function TextInput({
   setValue,
   value,
   inputValidator = () => true,
-  style,
 }: TextInputReact) {
   const handleDebounce = useDebounce((value) => {
     onChange(value);
@@ -51,7 +49,6 @@ export function TextInput({
 
   return (
     <input
-      style={style}
       aria-label={ariaLabel}
       data-testid="ockTextInput_Input"
       type="text"

src/internal/svg/coinbasePaySvg.tsx

@@ -4,8 +4,8 @@ export const CoinbasePaySvg = ({ className = cn(icon.foreground) }) => (
   <svg
     role="img"
     aria-label="ock-coinbasePaySvg"
-    width="16"
-    height="16"
+    width="100%"
+    height="100%"
     viewBox="0 0 20 20"
     fill="none"
     xmlns="http://www.w3.org/2000/svg"