Cross-Platform (Web, iOS, Android)

type SnakeToCamelCase<S extends string> = S extends `${infer T}_${infer U}`
  ? `${T}${Capitalize<SnakeToCamelCase<U>>}`
  : S;

type CamelizeKeys<T> = T extends readonly unknown[]
  ? { [K in keyof T]: CamelizeKeys<T[K]> }
  : T extends object
    ? {
        [K in keyof T as SnakeToCamelCase<K & string>]: CamelizeKeys<T[K]>;
      }
    : T;

/**
 * Converts snake_case keys to camelCase in an object or array of objects.
 *
 * @param {T} obj - The object, array, or string to convert. (required)
 * @returns {T} The converted object, array, or string.
 */
export const convertSnakeToCamelCase = <T>(obj: T): CamelizeKeys<T> => {
  if (Array.isArray(obj)) {
    return obj.map(item => convertSnakeToCamelCase(item)) as CamelizeKeys<T>;
  }

  if (obj !== null && typeof obj === "object") {
    return Object.keys(obj).reduce((acc, key) => {
      const camelCaseKey = toCamelCase(key);
      (acc as Record<string, unknown>)[camelCaseKey] = convertSnakeToCamelCase(
        (obj as Record<string, unknown>)[key],
      );
      return acc;
    }, {} as CamelizeKeys<T>);
  }

  return obj as CamelizeKeys<T>;
};

const toCamelCase = (str: string) => {
  return str.replace(/_([a-z])/g, (_, letter) => letter.toUpperCase());
};

import {
  type FetchBuyOptions,
  type OnrampBuyOptionsSnakeCaseResponse,
} from "@coinbase/cdp-react";
import { NextRequest, NextResponse } from "next/server";

import { generateCDPJWT, getCDPCredentials, ONRAMP_API_BASE_URL } from "@/lib/cdp-auth";
import { convertSnakeToCamelCase } from "@/lib/to-camel-case";

type OnrampBuyOptionsResponseRaw = OnrampBuyOptionsSnakeCaseResponse;
type OnrampBuyOptionsResponse = Awaited<ReturnType<FetchBuyOptions>>;

/**
 * Fetches available buy options (payment currencies and purchasable assets) for onramp
 *
 * @param request - NextRequest object
 * @returns NextResponse object
 */
export async function GET(request: NextRequest) {
  try {
    // Validate CDP credentials are configured
    try {
      getCDPCredentials();
    } catch (_error) {
      return NextResponse.json({ error: "CDP API credentials not configured" }, { status: 500 });
    }

    /**
     * Extract query parameters
     * Note: While the API documentation shows all parameters as optional,
     * the backend currently requires the 'country' parameter
     */
    const searchParams = request.nextUrl.searchParams;
    const country = searchParams.get("country");
    const subdivision = searchParams.get("subdivision");
    const networks = searchParams.get("networks");

    // Build query string
    const queryParams = new URLSearchParams();
    if (country) queryParams.append("country", country);
    if (subdivision) queryParams.append("subdivision", subdivision);
    if (networks) queryParams.append("networks", networks);

    const queryString = queryParams.toString();
    const apiPath = "/onramp/v1/buy/options";
    const fullPath = apiPath + (queryString ? `?${queryString}` : "");

    // Generate JWT for CDP API authentication
    const jwt = await generateCDPJWT({
      requestMethod: "GET",
      requestHost: new URL(ONRAMP_API_BASE_URL).hostname,
      requestPath: apiPath,
    });

    // Call CDP API to get buy options
    const response = await fetch(`${ONRAMP_API_BASE_URL}${fullPath}`, {
      method: "GET",
      headers: {
        Authorization: `Bearer ${jwt}`,
        "Content-Type": "application/json",
      },
    });

    if (!response.ok) {
      console.error("CDP API error:", response.statusText);
      const errorText = await response.text();
      console.error("Error details:", errorText);

      try {
        const errorData = JSON.parse(errorText);
        return NextResponse.json(
          { error: errorData.message || "Failed to fetch buy options" },
          { status: response.status },
        );
      } catch {
        return NextResponse.json(
          { error: "Failed to fetch buy options" },
          { status: response.status },
        );
      }
    }

    const data: OnrampBuyOptionsResponseRaw = await response.json();
    const dataCamelCase: OnrampBuyOptionsResponse = convertSnakeToCamelCase(data);
    return NextResponse.json(dataCamelCase);
  } catch (error) {
    console.error("Error fetching buy options:", error);
    return NextResponse.json({ error: "Internal server error" }, { status: 500 });
  }
}

import {
  type FetchBuyQuote,
  type OnrampBuyQuoteSnakeCaseResponse,
} from "@coinbase/cdp-react";
import { NextRequest, NextResponse } from "next/server";

import { generateCDPJWT, getCDPCredentials, ONRAMP_API_BASE_URL } from "@/lib/cdp-auth";
import { convertSnakeToCamelCase } from "@/lib/to-camel-case";

type OnrampBuyQuoteRequest = Parameters<FetchBuyQuote>[0];
type OnrampBuyQuoteResponseRaw = OnrampBuyQuoteSnakeCaseResponse;
type OnrampBuyQuoteResponse = Awaited<ReturnType<FetchBuyQuote>>;

/**
 * Creates a buy quote for onramp purchase
 *
 * @param request - Buy quote request parameters
 * @returns Buy quote with fees and onramp URL
 */
export async function POST(request: NextRequest) {
  try {
    const body: OnrampBuyQuoteRequest = await request.json();

    // Validate CDP credentials are configured
    try {
      getCDPCredentials();
    } catch (_error) {
      return NextResponse.json({ error: "CDP API credentials not configured" }, { status: 500 });
    }

    // Validate required fields

    // Note we don't require the wallet info because this endpoint is used to get an exchange rate. Only the onramp URL requires the wallet info.

    if (
      !body.purchaseCurrency ||
      !body.paymentAmount ||
      !body.paymentCurrency ||
      !body.paymentMethod ||
      !body.country
    ) {
      return NextResponse.json({ error: "Missing required parameters" }, { status: 400 });
    }

    // Validate US subdivision requirement
    if (body.country === "US" && !body.subdivision) {
      return NextResponse.json({ error: "State/subdivision is required for US" }, { status: 400 });
    }

    // Generate JWT for CDP API authentication
    const jwt = await generateCDPJWT({
      requestMethod: "POST",
      requestHost: new URL(ONRAMP_API_BASE_URL).hostname,
      requestPath: "/onramp/v1/buy/quote",
    });

    // Prepare request body for buy quote API
    const requestBody = {
      purchaseCurrency: body.purchaseCurrency,
      purchaseNetwork: body.purchaseNetwork, // Use the wallet's network
      paymentAmount: body.paymentAmount,
      paymentCurrency: body.paymentCurrency,
      paymentMethod: body.paymentMethod,
      country: body.country,
      subdivision: body.subdivision,
      destinationAddress: body.destinationAddress, // Include to get one-click-buy URL
    };

    // Call CDP Onramp API to get buy quote and URL
    const response = await fetch(`${ONRAMP_API_BASE_URL}/onramp/v1/buy/quote`, {
      method: "POST",
      headers: {
        Authorization: `Bearer ${jwt}`,
        "Content-Type": "application/json",
      },
      body: JSON.stringify(requestBody),
    });

    if (!response.ok) {
      console.error("CDP API error:", response.statusText);
      const errorText = await response.text();
      console.error("Error details:", errorText);

      try {
        const errorData = JSON.parse(errorText);
        return NextResponse.json(
          { error: errorData.message || "Failed to create buy quote" },
          { status: response.status },
        );
      } catch {
        return NextResponse.json(
          { error: "Failed to create buy quote" },
          { status: response.status },
        );
      }
    }

    // convert response data to camelCase until migration to API v2 which will return camelCase data
    const data: OnrampBuyQuoteResponseRaw = await response.json();
    const dataCamelCase: OnrampBuyQuoteResponse = convertSnakeToCamelCase(data);
    return NextResponse.json(dataCamelCase);
  } catch (error) {
    console.error("Error creating buy quote:", error);
    return NextResponse.json({ error: "Internal server error" }, { status: 500 });
  }
}

import {
  type FetchBuyOptions,
  type FetchBuyQuote,
} from "@coinbase/cdp-react/components/Fund";

/**
 * Fetches available buy options for onramp
 *
 * @param params - Query parameters for buy options
 * @returns Buy options including payment currencies and purchasable assets
 */
export const getBuyOptions: FetchBuyOptions = async params => {
  const queryParams = new URLSearchParams();
  queryParams.append("country", params.country);
  if (params?.subdivision) queryParams.append("subdivision", params.subdivision);

  const queryString = queryParams.toString();
  const url = `/api/onramp/buy-options${queryString ? `?${queryString}` : ""}`;

  const response = await fetch(url, {
    method: "GET",
    headers: {
      "Content-Type": "application/json",
    },
  });

  if (!response.ok) {
    const errorData = await response.json();
    throw new Error(errorData.error || "Failed to fetch buy options");
  }

  return await response.json();
};

/**
 * Creates a buy quote for onramp purchase
 *
 * @param request - Buy quote request parameters
 * @returns Buy quote with fees and onramp URL
 */
export const createBuyQuote: FetchBuyQuote = async request => {
  const response = await fetch("/api/onramp/buy-quote", {
    method: "POST",
    headers: {
      "Content-Type": "application/json",
    },
    body: JSON.stringify(request),
  });

  if (!response.ok) {
    const errorData = await response.json();
    throw new Error(errorData.error || "Failed to create buy quote");
  }

  return await response.json();
};

"use client";

import {
  FundModal,
  type FundModalProps,
} from "@coinbase/cdp-react";
import { useEvmAddress } from "@coinbase/cdp-hooks";
import { useCallback } from "react";

import { getBuyOptions, createBuyQuote } from "@/lib/onramp-api";

/**
 * A component that wraps the FundModal component
 *
 * @param props - The props for the FundWallet component
 * @param props.onSuccess - The callback function to call when the onramp purchase is successful
 * @returns The FundWallet component
 */
export default function FundWallet({ onSuccess }: { onSuccess: () => void }) {
  const { evmAddress } = useEvmAddress();

  // Get the user's location (i.e. from IP geolocation)
  const userCountry = "US";

  // If user is in the US, the state is also required
  const userSubdivision = userCountry === "US" ? "CA" : undefined;

  // Call your buy quote endpoint
  const fetchBuyQuote: FundModalProps["fetchBuyQuote"] = useCallback(async params => {
    return createBuyQuote(params);
  }, []);

  // Call your buy options endpoint
  const fetchBuyOptions: FundModalProps["fetchBuyOptions"] = useCallback(async params => {
    return getBuyOptions(params);
  }, []);

  return (
    <FundModal
      country={userCountry}
      subdivision={userSubdivision}
      cryptoCurrency="eth"
      fiatCurrency="usd"
      fetchBuyQuote={fetchBuyQuote}
      fetchBuyOptions={fetchBuyOptions}
      network="base"
      presetAmountInputs={[10, 25, 50]}
      onSuccess={onSuccess}
      destinationAddress={evmAddress}
    />
  );
}