feat: include coinbase quote in cost breakdown

packages/keychain/src/components/purchasenew/review/cost.tsx

@@ -118,6 +118,9 @@ export function OnchainCostBreakdown({
     isFetchingConversion,
     feeEstimationError,
     quantity,
+    isApplePaySelected,
+    coinbaseQuote,
+    isFetchingCoinbaseQuote,
   } = useOnchainPurchaseContext();
   const { decimals } = quote.paymentTokenMetadata;
 
@@ -214,13 +217,22 @@ export function OnchainCostBreakdown({
                 quote={quote}
                 quantity={quantity}
                 layerswapFees={isUsingLayerswap ? layerswapFees : undefined}
+                coinbaseQuote={isApplePaySelected ? coinbaseQuote : undefined}
               />
             </div>
-            {isFetchingConversion ? (
+            {isFetchingConversion || isFetchingCoinbaseQuote ? (
               <Spinner />
             ) : (
               <div className="flex items-center gap-1.5">
-                {isUsingLayerswap ? (
+                {isApplePaySelected ? (
+                  coinbaseQuote ? (
+                    <span className="text-foreground-100">
+                      {`$${Number(coinbaseQuote.paymentTotal.amount).toFixed(2)}`}
+                    </span>
+                  ) : (
+                    <span className="text-foreground-400">—</span>
+                  )
+                ) : isUsingLayerswap ? (
                   feeEstimationError ? (
                     <span className="text-foreground-400">—</span>
                   ) : layerswapTotal !== null && displayToken ? (

packages/keychain/src/components/purchasenew/review/onchain-cost.stories.tsx

@@ -57,6 +57,8 @@ const MockOnchainPurchaseProvider = ({ children }: { children: ReactNode }) => {
     isApplePaySelected: false,
     paymentLink: undefined,
     isCreatingOrder: false,
+    coinbaseQuote: undefined,
+    isFetchingCoinbaseQuote: false,
     onApplePaySelect: () => {},
     onCreateCoinbaseOrder: async () => {},
     getTransactions: async () => [],

packages/keychain/src/components/purchasenew/review/onchain-tooltip.tsx

@@ -6,6 +6,7 @@ import {
   TooltipTrigger,
 } from "@cartridge/ui";
 import type { Quote } from "@/context";
+import type { CoinbaseQuoteResult } from "@/hooks/starterpack";
 
 /**
  * Format bigint token amount with symbol
@@ -25,18 +26,26 @@ export const OnchainFeesTooltip = ({
   quote,
   quantity = 1,
   layerswapFees,
+  coinbaseQuote,
 }: {
   trigger: React.ReactNode;
   defaultOpen?: boolean;
   quote: Quote;
   quantity?: number;
   layerswapFees?: string;
+  coinbaseQuote?: CoinbaseQuoteResult;
 }) => {
   const { decimals, symbol } = quote.paymentTokenMetadata;
 
   // Format layerswap fees in USDC (6 decimals)
   const formattedBridgeFee = layerswapFees
     ? `${(Number(layerswapFees) / Math.pow(10, 6)).toFixed(2)} USDC`
+    : coinbaseQuote?.layerswapFees
+      ? `${Number(coinbaseQuote.layerswapFees.amount).toFixed(2)} ${coinbaseQuote.layerswapFees.currency}`
+      : null;
+
+  const formattedCoinbaseFee = coinbaseQuote?.coinbaseFee
+    ? `${Number(coinbaseQuote.coinbaseFee.amount).toFixed(2)} ${coinbaseQuote.coinbaseFee.currency}`
     : null;
 
   return (
@@ -81,23 +90,29 @@ export const OnchainFeesTooltip = ({
             </div>
           )}
           {formattedBridgeFee && (
-            <>
-              <div className="flex flex-row justify-between text-foreground-300">
-                <span>Bridge Fee:</span>
-                <span>{formattedBridgeFee}</span>
-              </div>
-            </>
+            <div className="flex flex-row justify-between text-foreground-300">
+              <span>Bridge Fee:</span>
+              <span>{formattedBridgeFee}</span>
+            </div>
+          )}
+          {formattedCoinbaseFee && (
+            <div className="flex flex-row justify-between text-foreground-300">
+              <span>Coinbase Fee:</span>
+              <span>{formattedCoinbaseFee}</span>
+            </div>
           )}
           <Separator className="bg-background-125" />
           <div className="flex flex-row justify-between text-foreground-100 font-medium">
             <span>Total:</span>
             <span>
-              {formatTokenAmount(
-                quote.totalCost * BigInt(quantity) +
-                  (layerswapFees ? BigInt(layerswapFees) : 0n),
-                decimals,
-                symbol,
-              )}
+              {coinbaseQuote?.paymentTotal
+                ? `${Number(coinbaseQuote.paymentTotal.amount).toFixed(2)} ${coinbaseQuote.paymentTotal.currency}`
+                : formatTokenAmount(
+                    quote.totalCost * BigInt(quantity) +
+                      (layerswapFees ? BigInt(layerswapFees) : 0n),
+                    decimals,
+                    symbol,
+                  )}
             </span>
           </div>
         </TooltipContent>

packages/keychain/src/components/purchasenew/wallet/wallet.stories.tsx

@@ -59,6 +59,8 @@ const mockOnchainPurchaseValue: OnchainPurchaseContextType = {
   isApplePaySelected: false,
   paymentLink: undefined,
   isCreatingOrder: false,
+  coinbaseQuote: undefined,
+  isFetchingCoinbaseQuote: false,
   onApplePaySelect: () => {},
   onCreateCoinbaseOrder: async () => {},
   getTransactions: async () => [],

packages/keychain/src/context/starterpack/onchain-purchase.tsx

@@ -29,6 +29,7 @@ import {
   useCoinbase,
   type TokenOption,
   type CoinbaseTransactionResult,
+  type CoinbaseQuoteResult,
 } from "@/hooks/starterpack";
 import { Explorer } from "@/hooks/starterpack/layerswap";
 
@@ -80,6 +81,8 @@ export interface OnchainPurchaseContextType {
   isApplePaySelected: boolean;
   paymentLink: string | undefined;
   isCreatingOrder: boolean;
+  coinbaseQuote: CoinbaseQuoteResult | undefined;
+  isFetchingCoinbaseQuote: boolean;
 
   // Actions
   onOnchainPurchase: () => Promise<void>;
@@ -205,6 +208,9 @@ export const OnchainPurchaseProvider = ({
     isCreatingOrder,
     createOrder: createCoinbaseOrder,
     getTransactions,
+    getQuote: getCoinbaseQuote,
+    coinbaseQuote,
+    isFetchingQuote: isFetchingCoinbaseQuote,
   } = useCoinbase({
     controller,
     onError: setDisplayError,
@@ -291,6 +297,27 @@ export const OnchainPurchaseProvider = ({
     setRequestedAmount(Number(convertedPrice.amount));
   }, [selectedPlatform, convertedPrice, setRequestedAmount]);
 
+  // Fetch Coinbase quote when Apple Pay is selected or quantity changes
+  useEffect(() => {
+    if (!isApplePaySelected || !onchainDetails?.quote) {
+      return;
+    }
+
+    const purchaseAmount = onchainDetails.quote.totalCost * BigInt(quantity);
+    const purchaseUSDCAmount = (Number(purchaseAmount) / 1_000_000).toFixed(6);
+
+    getCoinbaseQuote({
+      purchaseUSDCAmount,
+      sandbox: !isMainnet,
+    });
+  }, [
+    isApplePaySelected,
+    onchainDetails,
+    quantity,
+    isMainnet,
+    getCoinbaseQuote,
+  ]);
+
   const onOnchainPurchase = useCallback(async () => {
     if (!controller || !starterpackDetails) return;
 
@@ -502,6 +529,8 @@ export const OnchainPurchaseProvider = ({
     isApplePaySelected,
     paymentLink,
     isCreatingOrder,
+    coinbaseQuote,
+    isFetchingCoinbaseQuote,
     onOnchainPurchase,
     onExternalConnect,
     onSendDeposit,

packages/keychain/src/hooks/starterpack/coinbase.ts

@@ -4,6 +4,8 @@ import {
   CoinbaseOnrampTransactionsQuery,
   CreateCoinbaseOnRampOrderDocument,
   CreateCoinbaseOnRampOrderMutation,
+  CoinbaseOnRampQuoteDocument,
+  CoinbaseOnRampQuoteQuery,
 } from "@cartridge/ui/utils/api/cartridge";
 import { request } from "@/utils/graphql";
 import Controller from "@/utils/controller";
@@ -13,11 +15,18 @@ export type CoinbaseOrderResult =
   CreateCoinbaseOnRampOrderMutation["createCoinbaseOnrampOrder"];
 export type CoinbaseTransactionResult =
   CoinbaseOnrampTransactionsQuery["coinbaseOnrampTransactions"]["transactions"][number];
+export type CoinbaseQuoteResult =
+  CoinbaseOnRampQuoteQuery["coinbaseOnrampQuote"];
 
 export interface CreateOrderInput {
   purchaseUSDCAmount: string;
 }
 
+export interface CoinbaseQuoteInput {
+  purchaseUSDCAmount: string;
+  sandbox?: boolean;
+}
+
 export interface UseCoinbaseOptions {
   controller: Controller | undefined;
   onError?: (error: Error) => void;
@@ -29,10 +38,13 @@ export interface UseCoinbaseReturn {
   paymentLink: string | undefined;
   isCreatingOrder: boolean;
   orderError: Error | null;
+  coinbaseQuote: CoinbaseQuoteResult | undefined;
+  isFetchingQuote: boolean;
 
   // Actions
   createOrder: (input: CreateOrderInput) => Promise<CoinbaseOrderResult>;
   getTransactions: (username: string) => Promise<CoinbaseTransactionResult[]>;
+  getQuote: (input: CoinbaseQuoteInput) => Promise<CoinbaseQuoteResult>;
 }
 
 const createCoinbaseOrder = async (
@@ -62,6 +74,22 @@ const getCoinbaseTransactions = async (
   return result.coinbaseOnrampTransactions.transactions;
 };
 
+const getCoinbaseQuote = async (
+  input: CoinbaseQuoteInput,
+): Promise<CoinbaseQuoteResult> => {
+  const result = await request<CoinbaseOnRampQuoteQuery>(
+    CoinbaseOnRampQuoteDocument,
+    {
+      input: {
+        purchaseUSDCAmount: input.purchaseUSDCAmount,
+        sandbox: input.sandbox,
+      },
+    },
+  );
+
+  return result.coinbaseOnrampQuote;
+};
+
 /**
  * Hook for managing Coinbase onramp functionality
  */
@@ -73,6 +101,10 @@ export function useCoinbase({
   const [paymentLink, setPaymentLink] = useState<string | undefined>();
   const [isCreatingOrder, setIsCreatingOrder] = useState(false);
   const [orderError, setOrderError] = useState<Error | null>(null);
+  const [coinbaseQuote, setCoinbaseQuote] = useState<
+    CoinbaseQuoteResult | undefined
+  >();
+  const [isFetchingQuote, setIsFetchingQuote] = useState(false);
 
   const createOrder = useCallback(
     async (input: CreateOrderInput) => {
@@ -114,12 +146,32 @@ export function useCoinbase({
     [onError],
   );
 
+  const getQuote = useCallback(
+    async (input: CoinbaseQuoteInput) => {
+      try {
+        setIsFetchingQuote(true);
+        const quote = await getCoinbaseQuote(input);
+        setCoinbaseQuote(quote);
+        return quote;
+      } catch (err) {
+        onError?.(err as Error);
+        throw err;
+      } finally {
+        setIsFetchingQuote(false);
+      }
+    },
+    [onError],
+  );
+
   return {
     orderId,
     paymentLink,
     isCreatingOrder,
     orderError,
+    coinbaseQuote,
+    isFetchingQuote,
     createOrder,
     getTransactions,
+    getQuote,
   };
 }

packages/keychain/src/hooks/starterpack/index.ts

@@ -40,4 +40,5 @@ export type {
   UseCoinbaseReturn,
   CoinbaseOrderResult,
   CoinbaseTransactionResult,
+  CoinbaseQuoteResult,
 } from "./coinbase";