fix: set coinbase sandbox correctly (#2371)

Author: broody

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

@@ -135,7 +135,6 @@ export const OnchainPurchaseProvider = ({
     clearSelectedWallet: clearSelectedWalletInternal,
     walletError,
   } = useExternalWallet({
-    controller,
     onError: setDisplayError,
   });
 
@@ -173,7 +172,6 @@ export const OnchainPurchaseProvider = ({
     isTokenSelectionLocked,
     resetTokenSelection,
   } = useTokenSelection({
-    controller,
     starterpackDetails: onchainDetails,
     quantity,
     selectedPlatform,
@@ -193,8 +191,6 @@ export const OnchainPurchaseProvider = ({
     onSendDeposit: onSendDepositInternal,
     waitForDeposit,
   } = useLayerswap({
-    controller,
-    isMainnet,
     selectedPlatform,
     walletAddress,
     selectedWallet,
@@ -212,7 +208,6 @@ export const OnchainPurchaseProvider = ({
     coinbaseQuote,
     isFetchingQuote: isFetchingCoinbaseQuote,
   } = useCoinbase({
-    controller,
     onError: setDisplayError,
   });
 

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

@@ -8,7 +8,7 @@ import {
   CoinbaseOnRampQuoteQuery,
 } from "@cartridge/ui/utils/api/cartridge";
 import { request } from "@/utils/graphql";
-import Controller from "@/utils/controller";
+import { useConnection } from "../connection";
 
 // Derive types from the actual GraphQL query/mutation results
 export type CoinbaseOrderResult =
@@ -28,7 +28,6 @@ export interface CoinbaseQuoteInput {
 }
 
 export interface UseCoinbaseOptions {
-  controller: Controller | undefined;
   onError?: (error: Error) => void;
 }
 
@@ -49,13 +48,14 @@ export interface UseCoinbaseReturn {
 
 const createCoinbaseOrder = async (
   input: CreateOrderInput,
+  sandbox: boolean = true,
 ): Promise<CoinbaseOrderResult> => {
   const result = await request<CreateCoinbaseLayerswapOrderMutation>(
     CreateCoinbaseLayerswapOrderDocument,
     {
       input: {
         purchaseUSDCAmount: input.purchaseUSDCAmount,
-        sandbox: true,
+        sandbox,
       },
     },
   );
@@ -94,9 +94,9 @@ const getCoinbaseQuote = async (
  * Hook for managing Coinbase onramp functionality
  */
 export function useCoinbase({
-  controller,
   onError,
 }: UseCoinbaseOptions): UseCoinbaseReturn {
+  const { controller, isMainnet } = useConnection();
   const [orderId, setOrderId] = useState<string | undefined>();
   const [paymentLink, setPaymentLink] = useState<string | undefined>();
   const [isCreatingOrder, setIsCreatingOrder] = useState(false);
@@ -116,7 +116,7 @@ export function useCoinbase({
         setIsCreatingOrder(true);
         setOrderError(null);
 
-        const order = await createCoinbaseOrder(input);
+        const order = await createCoinbaseOrder(input, !isMainnet);
 
         setOrderId(order.coinbaseOrder.orderId);
         setPaymentLink(order.coinbaseOrder.paymentLink);
@@ -131,7 +131,7 @@ export function useCoinbase({
         setIsCreatingOrder(false);
       }
     },
-    [controller, onError],
+    [controller, isMainnet, onError],
   );
 
   const getTransactions = useCallback(

packages/keychain/src/hooks/starterpack/external-wallet.ts

@@ -1,10 +1,9 @@
 import { useState, useCallback } from "react";
 import { ExternalPlatform, ExternalWallet } from "@cartridge/controller";
 import { useWallets } from "@/hooks/wallets";
-import Controller from "@/utils/controller";
+import { useConnection } from "../connection";
 
 export interface UseExternalWalletOptions {
-  controller: Controller | undefined;
   onError?: (error: Error) => void;
 }
 
@@ -32,9 +31,9 @@ export interface UseExternalWalletReturn {
  * Hook for managing external wallet connections (Argent, Braavos, etc.)
  */
 export function useExternalWallet({
-  controller,
   onError,
 }: UseExternalWalletOptions): UseExternalWalletReturn {
+  const { controller } = useConnection();
   const { error: walletError, connectWallet, switchChain } = useWallets();
 
   const [selectedWallet, setSelectedWallet] = useState<

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

@@ -32,7 +32,6 @@ import {
 import { ethers } from "ethers";
 import erc20abi from "./erc20abi.json" assert { type: "json" };
 import { depositToLayerswapInput } from "@/utils/payments";
-import Controller from "@/utils/controller";
 import { ExternalWalletError } from "@/utils/errors";
 
 const DEPOSIT_MAX_WAIT_TIME = 10 * 60 * 1000; // 10 minutes
@@ -51,8 +50,6 @@ export interface Explorer {
 }
 
 export interface UseLayerswapOptions {
-  controller: Controller | undefined;
-  isMainnet: boolean;
   selectedPlatform: ExternalPlatform | undefined;
   walletAddress: string | undefined;
   selectedWallet: ExternalWallet | undefined;
@@ -377,15 +374,13 @@ export function mapPlatformToLayerswapSourceNetwork(
  * Hook for managing Layerswap deposit/bridge functionality
  */
 export function useLayerswap({
-  controller,
-  isMainnet,
   selectedPlatform,
   walletAddress,
   selectedWallet,
   onTransactionHash,
   onError,
 }: UseLayerswapOptions): UseLayerswapReturn {
-  const { externalSendTransaction } = useConnection();
+  const { controller, externalSendTransaction, isMainnet } = useConnection();
   const [requestedAmount, setRequestedAmount] = useState<number | undefined>();
   const [layerswapFees, setLayerswapFees] = useState<string | undefined>();
   const [swapId, setSwapId] = useState<string | undefined>();

packages/keychain/src/hooks/starterpack/token-selection.ts

@@ -16,7 +16,7 @@ import {
   isOnchainStarterpack,
   type OnchainStarterpackDetails,
 } from "@/context/starterpack/types";
-import Controller from "@/utils/controller";
+import { useConnection } from "../connection";
 
 export interface TokenOption {
   name: string;
@@ -40,7 +40,6 @@ export interface ConvertedPrice {
 }
 
 export interface UseTokenSelectionOptions {
-  controller: Controller | undefined;
   starterpackDetails: OnchainStarterpackDetails | undefined;
   quantity: number;
   selectedPlatform: ExternalPlatform | undefined;
@@ -71,11 +70,11 @@ export interface UseTokenSelectionReturn {
  * Hook for managing token selection and price conversion for onchain purchases
  */
 export function useTokenSelection({
-  controller,
   starterpackDetails,
   quantity,
   selectedPlatform,
 }: UseTokenSelectionOptions): UseTokenSelectionReturn {
+  const { controller } = useConnection();
   const [selectedToken, setSelectedTokenState] = useState<
     TokenOption | undefined
   >();