chore(ONRAMP-843): FundCard accept sessionToken param (#2501)

Author: rustam-cb

packages/onchainkit/src/buy/components/Buy.test.tsx

@@ -155,4 +155,18 @@ describe('Buy', () => {
     render(<Buy className="test-class" toToken={degenToken} />);
     expect(screen.queryByTestId('mock-BuyDropdown')).not.toBeInTheDocument();
   });
+
+  it('should pass sessionToken to BuyProvider', () => {
+    const sessionToken = 'test-session-token';
+    render(
+      <Buy
+        className="test-class"
+        toToken={degenToken}
+        sessionToken={sessionToken}
+      />,
+    );
+
+    // Verify BuyProvider is rendered (which receives the sessionToken prop)
+    expect(screen.getByTestId('mock-BuyProvider')).toBeInTheDocument();
+  });
 });

packages/onchainkit/src/buy/components/Buy.tsx

@@ -49,6 +49,7 @@ export function Buy({
   onSuccess,
   toToken,
   fromToken,
+  sessionToken,
 }: BuyProps) {
   return (
     <BuyProvider
@@ -61,6 +62,7 @@ export function Buy({
       onSuccess={onSuccess}
       toToken={toToken}
       fromToken={fromToken}
+      sessionToken={sessionToken}
     >
       <BuyContent className={className} />
     </BuyProvider>

packages/onchainkit/src/buy/components/BuyDropdown.test.tsx

@@ -58,6 +58,7 @@ const mockContextValue = {
   from: { token: { symbol: 'DAI' } },
   startPopupMonitor: mockStartPopupMonitor,
   setIsDropdownOpen: vi.fn(),
+  sessionToken: undefined,
 };
 
 describe('BuyDropdown', () => {
@@ -156,4 +157,31 @@ describe('BuyDropdown', () => {
 
     expect(mockStartPopupMonitor).not.toHaveBeenCalled();
   });
+
+  it('passes sessionToken to getBuyFundingUrl when available', () => {
+    const sessionToken = 'test-session-token';
+    (useBuyContext as Mock).mockReturnValue({
+      ...mockContextValue,
+      sessionToken,
+      fromETH: { token: ethToken, amount: '10' },
+      fromUSDC: { token: usdcToken, amount: '10' },
+      from: { token: { symbol: 'DAI' }, amount: '10' },
+    });
+    (openPopup as Mock).mockReturnValue('popup');
+    (getBuyFundingUrl as Mock).mockReturnValue('valid-funding-url');
+
+    render(<BuyDropdown />);
+
+    const onrampButton = screen.getByTestId('ock-coinbasePayOnrampItem');
+
+    act(() => {
+      fireEvent.click(onrampButton);
+    });
+
+    expect(getBuyFundingUrl).toHaveBeenCalledWith({
+      to: mockContextValue.to,
+      paymentMethodId: 'CRYPTO_ACCOUNT',
+      sessionToken,
+    });
+  });
 });

packages/onchainkit/src/buy/components/BuyDropdown.tsx

@@ -3,10 +3,7 @@ import { useAnalytics } from '@/core/analytics/hooks/useAnalytics';
 import { BuyEvent, type BuyOptionType } from '@/core/analytics/types';
 import { type PaymentMethod } from '@/fund/types';
 import { openPopup } from '@/internal/utils/openPopup';
-import { useOnchainKit } from '@/useOnchainKit';
 import { useCallback, useEffect, useMemo } from 'react';
-import { base } from 'viem/chains';
-import { useAccount } from 'wagmi';
 import { getFundingPopupSize } from '../../fund/utils/getFundingPopupSize';
 import { getRoundedAmount } from '../../internal/utils/getRoundedAmount';
 import { cn, text } from '../../styles/theme';
@@ -19,10 +16,15 @@ import { BuyTokenItem } from './BuyTokenItem';
 
 // eslint-disable-next-line complexity
 export function BuyDropdown() {
-  const { projectId } = useOnchainKit();
-  const { to, fromETH, fromUSDC, from, startPopupMonitor, setIsDropdownOpen } =
-    useBuyContext();
-  const { address } = useAccount();
+  const {
+    to,
+    fromETH,
+    fromUSDC,
+    from,
+    startPopupMonitor,
+    setIsDropdownOpen,
+    sessionToken,
+  } = useBuyContext();
   const { sendAnalytics } = useAnalytics();
 
   const handleOnrampClick = useCallback(
@@ -34,10 +36,8 @@ export function BuyDropdown() {
 
         const fundingUrl = getBuyFundingUrl({
           to,
-          projectId,
           paymentMethodId,
-          address,
-          chain: base,
+          sessionToken,
         });
 
         if (!fundingUrl) {
@@ -59,7 +59,7 @@ export function BuyDropdown() {
         }
       };
     },
-    [address, to, projectId, startPopupMonitor, sendAnalytics],
+    [sendAnalytics, to, sessionToken, startPopupMonitor],
   );
 
   const formattedAmountUSD = useMemo(() => {

packages/onchainkit/src/buy/components/BuyProvider.tsx

@@ -57,6 +57,7 @@ export function BuyProvider({
   onSuccess,
   toToken,
   fromToken,
+  sessionToken,
 }: BuyProviderProps) {
   const { config: { paymaster } = { paymaster: undefined }, projectId } =
     useOnchainKit();
@@ -470,6 +471,7 @@ export function BuyProvider({
         toToken,
         fromToken,
         startPopupMonitor,
+        sessionToken,
       }}
     >
       {children}

packages/onchainkit/src/buy/types.ts

@@ -31,6 +31,8 @@ export type BuyProps = {
   fromToken?: Token;
   /** The token to swap to */
   toToken: Token;
+  /** Onramp session token */
+  sessionToken?: string;
 };
 
 export type BuyContextType = {
@@ -56,6 +58,7 @@ export type BuyContextType = {
   isDropdownOpen: boolean;
   setIsDropdownOpen: (open: boolean) => void;
   startPopupMonitor: (popupWindow: Window) => void;
+  sessionToken?: string;
 };
 
 export type BuyProviderProps = {
@@ -79,6 +82,7 @@ export type BuyProviderProps = {
   onSuccess?: (transactionReceipt?: TransactionReceipt) => void;
   fromToken?: Token;
   toToken: Token;
+  sessionToken?: string;
 };
 
 export type BuyTokens = {

packages/onchainkit/src/buy/utils/getBuyFundingUrl.test.ts

@@ -1,84 +1,96 @@
 import { getOnrampBuyUrl } from '@/fund/utils/getOnrampBuyUrl';
 import { SwapUnit } from '@/swap/types';
 import { Token } from '@/token';
-import type { Chain } from 'viem';
-import { base } from 'viem/chains';
-import { describe, it, expect, vi } from 'vitest';
+import { describe, it, expect, vi, beforeEach } from 'vitest';
 import { getBuyFundingUrl } from './getBuyFundingUrl';
 
 vi.mock('@/fund/utils/getOnrampBuyUrl', () => ({
   getOnrampBuyUrl: vi.fn(),
 }));
 
 describe('getBuyFundingUrl', () => {
-  const baseParams = {
-    projectId: 'abc123',
-    address: '0x123',
-    paymentMethodId: 'pm_001',
-    chain: base as Chain,
-  };
+  beforeEach(() => {
+    vi.clearAllMocks();
+  });
 
-  it('returns undefined if projectId is null', () => {
+  it('returns undefined if sessionToken is not provided', () => {
     const result = getBuyFundingUrl({
-      ...baseParams,
-      projectId: null,
       to: {
         amount: '1',
         token: { symbol: 'ETH' } as Token,
       } as SwapUnit,
+      paymentMethodId: 'pm_001',
     });
 
     expect(result).toBeUndefined();
+    expect(getOnrampBuyUrl).not.toHaveBeenCalled();
   });
 
-  it('returns undefined if address is undefined', () => {
+  it('returns undefined if fundAmount is missing', () => {
     const result = getBuyFundingUrl({
-      ...baseParams,
-      address: undefined,
-      to: {
-        amount: '1',
-        token: { symbol: 'ETH' },
-      } as SwapUnit,
+      to: undefined,
+      sessionToken: 'test-session-token',
+      paymentMethodId: 'pm_001',
     });
 
     expect(result).toBeUndefined();
+    expect(getOnrampBuyUrl).toHaveBeenCalled();
   });
 
-  it('returns undefined if assetSymbol is missing', () => {
+  it('returns undefined if amount is missing from to', () => {
     const result = getBuyFundingUrl({
-      ...baseParams,
       to: {
-        amount: '1',
-        token: undefined,
+        token: { symbol: 'ETH' } as Token,
       } as SwapUnit,
+      sessionToken: 'test-session-token',
+      paymentMethodId: 'pm_001',
     });
 
     expect(result).toBeUndefined();
+    expect(getOnrampBuyUrl).toHaveBeenCalled();
   });
 
-  it('calls getOnrampBuyUrl with correct parameters', () => {
+  it('calls getOnrampBuyUrl with correct parameters when sessionToken is provided', () => {
     const mockUrl = 'https://onramp.com/buy';
     (getOnrampBuyUrl as ReturnType<typeof vi.fn>).mockReturnValue(mockUrl);
 
     const result = getBuyFundingUrl({
-      ...baseParams,
       to: {
         amount: '1.5',
         token: { symbol: 'ETH' },
       } as SwapUnit,
+      sessionToken: 'test-session-token',
+      paymentMethodId: 'pm_001',
     });
 
     expect(getOnrampBuyUrl).toHaveBeenCalledWith({
-      projectId: 'abc123',
-      assets: ['ETH'],
+      sessionToken: 'test-session-token',
       presetCryptoAmount: 1.5,
       defaultPaymentMethod: 'pm_001',
-      addresses: {
-        '0x123': ['base'],
-      },
       originComponentName: 'FundCard',
     });
 
     expect(result).toBe(mockUrl);
   });
+
+  it('uses correct originComponentName', () => {
+    const mockUrl = 'https://onramp.com/buy';
+    (getOnrampBuyUrl as ReturnType<typeof vi.fn>).mockReturnValue(mockUrl);
+
+    getBuyFundingUrl({
+      to: {
+        amount: '2.0',
+        token: { symbol: 'USDC' },
+      } as SwapUnit,
+      sessionToken: 'another-session-token',
+      paymentMethodId: 'CARD',
+    });
+
+    expect(getOnrampBuyUrl).toHaveBeenCalledWith({
+      sessionToken: 'another-session-token',
+      presetCryptoAmount: 2.0,
+      defaultPaymentMethod: 'CARD',
+      originComponentName: 'FundCard',
+    });
+  });
 });

packages/onchainkit/src/buy/utils/getBuyFundingUrl.ts

@@ -1,35 +1,27 @@
 import { getOnrampBuyUrl } from '@/fund/utils/getOnrampBuyUrl';
 import { SwapUnit } from '@/swap/types';
-import { Chain } from 'viem';
 
 type GetBuyFundingUrlParams = {
   to?: SwapUnit;
-  projectId?: string | null;
-  address?: string;
+  sessionToken?: string;
   paymentMethodId?: string;
-  chain: Chain;
 };
 
 export function getBuyFundingUrl({
   to,
-  projectId,
+  sessionToken,
   paymentMethodId,
-  address,
-  chain,
 }: GetBuyFundingUrlParams) {
-  const assetSymbol = to?.token?.symbol;
   const fundAmount = to?.amount;
 
-  if (!projectId || address === undefined || !assetSymbol) {
+  if (!sessionToken) {
     return undefined;
   }
 
   return getOnrampBuyUrl({
-    projectId,
-    assets: [assetSymbol],
+    sessionToken,
     presetCryptoAmount: Number(fundAmount),
     defaultPaymentMethod: paymentMethodId,
-    addresses: { [address]: [chain.name.toLowerCase()] },
     originComponentName: 'FundCard',
   });
 }

packages/onchainkit/src/fund/components/FundButton.test.tsx

@@ -238,6 +238,22 @@ describe('FundButton', () => {
     ).not.toBeInTheDocument();
   });
 
+  it('passes sessionToken to useGetFundingUrl hook', () => {
+    const sessionToken = 'test-session-token';
+    const fundingUrl = 'https://default.funding.url';
+    const { height, width } = { height: 200, width: 100 };
+    (useGetFundingUrl as Mock).mockReturnValue(fundingUrl);
+    (getFundingPopupSize as Mock).mockReturnValue({ height, width });
+
+    render(<FundButton sessionToken={sessionToken} />);
+
+    expect(useGetFundingUrl).toHaveBeenCalledWith({
+      fiatCurrency: 'USD',
+      originComponentName: 'FundButton',
+      sessionToken: sessionToken,
+    });
+  });
+
   describe('analytics', () => {
     it('sends FundInitiated analytics when fund button is clicked', () => {
       const fundingUrl = 'https://props.funding.url';

packages/onchainkit/src/fund/components/FundButton.tsx

@@ -30,11 +30,13 @@ export function FundButton({
   onPopupClose,
   onClick,
   render,
+  sessionToken,
 }: FundButtonProps) {
   // If the fundingUrl prop is undefined, fallback to our recommended funding URL based on the wallet type
   const fallbackFundingUrl = useGetFundingUrl({
     fiatCurrency,
     originComponentName: 'FundButton',
+    sessionToken,
   });
   const { address } = useAccount();
   const fundingUrlToRender = fundingUrl ?? fallbackFundingUrl;