diff --git a/src/buy/components/Buy.tsx b/src/buy/components/Buy.tsx
index 949d7e9eba..28f800ee22 100644
--- a/src/buy/components/Buy.tsx
+++ b/src/buy/components/Buy.tsx
@@ -45,7 +45,6 @@ export function Buy({
onSuccess,
toToken,
fromToken,
- projectId,
}: BuyReact) {
return (
diff --git a/src/buy/components/BuyDropdown.test.tsx b/src/buy/components/BuyDropdown.test.tsx
index d0e4b58e29..66c00eff80 100644
--- a/src/buy/components/BuyDropdown.test.tsx
+++ b/src/buy/components/BuyDropdown.test.tsx
@@ -1,6 +1,7 @@
import { openPopup } from '@/ui-react/internal/utils/openPopup';
import { act, fireEvent, render, screen } from '@testing-library/react';
import { type Mock, beforeEach, describe, expect, it, vi } from 'vitest';
+import { useOnchainKit } from '../../core-react/useOnchainKit';
import { BuyDropdown } from './BuyDropdown';
import { useBuyContext } from './BuyProvider';
import { degenToken, ethToken, usdcToken } from '../../token/constants';
@@ -29,6 +30,10 @@ vi.mock('wagmi', async () => {
};
});
+vi.mock('../../core-react/useOnchainKit', () => ({
+ useOnchainKit: vi.fn(),
+}));
+
const mockStartPopupMonitor = vi.fn();
const mockContextValue = {
@@ -40,7 +45,6 @@ const mockContextValue = {
fromETH: { token: ethToken },
fromUSDC: { token: usdcToken },
from: { token: { symbol: 'DAI' } },
- projectId: 'mock-project-id',
startPopupMonitor: mockStartPopupMonitor,
setIsDropdownOpen: vi.fn(),
};
@@ -49,6 +53,9 @@ describe('BuyDropdown', () => {
beforeEach(() => {
vi.clearAllMocks();
(useBuyContext as Mock).mockReturnValue(mockContextValue);
+ (useOnchainKit as Mock).mockReturnValue({
+ projectId: 'mock-project-id',
+ });
});
it('renders the dropdown with correct content', () => {
diff --git a/src/buy/components/BuyDropdown.tsx b/src/buy/components/BuyDropdown.tsx
index 7d4fd02288..b195148d74 100644
--- a/src/buy/components/BuyDropdown.tsx
+++ b/src/buy/components/BuyDropdown.tsx
@@ -1,3 +1,4 @@
+import { useOnchainKit } from '@/core-react/useOnchainKit';
import { openPopup } from '@/ui-react/internal/utils/openPopup';
import { useCallback, useMemo } from 'react';
import { useAccount } from 'wagmi';
@@ -11,8 +12,8 @@ import { useBuyContext } from './BuyProvider';
import { BuyTokenItem } from './BuyTokenItem';
export function BuyDropdown() {
- const { to, fromETH, fromUSDC, from, projectId, startPopupMonitor } =
- useBuyContext();
+ const { projectId } = useOnchainKit();
+ const { to, fromETH, fromUSDC, from, startPopupMonitor } = useBuyContext();
const { address } = useAccount();
const handleOnrampClick = useCallback(
diff --git a/src/buy/components/BuyProvider.test.tsx b/src/buy/components/BuyProvider.test.tsx
index a618d3b562..3480e5b34f 100644
--- a/src/buy/components/BuyProvider.test.tsx
+++ b/src/buy/components/BuyProvider.test.tsx
@@ -145,7 +145,6 @@ const wrapper = ({ children }: { children: React.ReactNode }) => (
config={{ maxSlippage: 5 }}
experimental={{ useAggregator: true }}
toToken={degenToken}
- projectId="mock-project-id"
fromToken={daiToken}
>
{children}
@@ -178,7 +177,6 @@ const renderWithProviders = ({
onSuccess={onSuccess}
toToken={degenToken}
fromToken={daiToken}
- projectId="mock-project-id"
>
@@ -829,7 +827,6 @@ describe('BuyProvider', () => {
{children}
diff --git a/src/buy/components/BuyProvider.tsx b/src/buy/components/BuyProvider.tsx
index f1104f3c46..24eb675d06 100644
--- a/src/buy/components/BuyProvider.tsx
+++ b/src/buy/components/BuyProvider.tsx
@@ -53,7 +53,6 @@ export function BuyProvider({
onSuccess,
toToken,
fromToken,
- projectId,
}: BuyProviderReact) {
const {
config: { paymaster } = { paymaster: undefined },
@@ -89,6 +88,14 @@ export function BuyProvider({
// Refreshes balances and inputs post-swap
const resetInputs = useResetBuyInputs({ fromETH, fromUSDC, from, to });
+
+ const { projectId } = useOnchainKit();
+ if (!projectId) {
+ throw new Error(
+ 'Buy: Project ID is required, please set the projectId in the OnchainKitProvider',
+ );
+ }
+
// For batched transactions, listens to and awaits calls from the Wallet server
const awaitCallsStatus = useAwaitCalls({
accountConfig,
@@ -462,7 +469,6 @@ export function BuyProvider({
setIsDropdownOpen,
toToken,
fromToken,
- projectId,
startPopupMonitor,
});
diff --git a/src/buy/types.ts b/src/buy/types.ts
index 0177223f39..c74c4cd0bc 100644
--- a/src/buy/types.ts
+++ b/src/buy/types.ts
@@ -21,7 +21,6 @@ export type BuyReact = {
onSuccess?: (transactionReceipt?: TransactionReceipt) => void; // An optional callback function that exposes the transaction receipt
fromToken?: Token; // An optional token to swap from
toToken: Token; // The token to swap to
- projectId: string; // A CDP project ID (found at https://portal.cdp.coinbase.com/)
};
export type BuyContextType = {
@@ -41,7 +40,6 @@ export type BuyContextType = {
transactionHash: string;
isDropdownOpen: boolean;
setIsDropdownOpen: (open: boolean) => void;
- projectId: string;
startPopupMonitor: (popupWindow: Window) => void;
};
@@ -59,7 +57,6 @@ export type BuyProviderReact = {
onSuccess?: (transactionReceipt?: TransactionReceipt) => void; // An optional callback function that exposes the transaction receipt
fromToken?: Token;
toToken: Token;
- projectId: string;
};
export type BuyTokens = {