Merge pull-request #1081

Author: moe-dev

examples/react-components/src/app/dashboard/OnRamp.tsx

@@ -46,7 +46,7 @@ export const OnRamp = ({ ethAddress }: OnRampProps) => {
         );
       }
     } catch (error) {
-      console.error("Failed to init Coinbase on-ramp:", error);
+      console.error("Failed to init Coinbase onramp:", error);
     }
   };
 
@@ -74,7 +74,7 @@ export const OnRamp = ({ ethAddress }: OnRampProps) => {
         );
       }
     } catch (error) {
-      console.error("Failed to init MoonPay on-ramp:", error);
+      console.error("Failed to init MoonPay onramp:", error);
     }
   };
 

examples/react-wallet-kit/src/components/demo/DemoPanel.tsx

@@ -53,6 +53,7 @@ export default function DemoPanel() {
     handleImportWallet,
     handleConnectExternalWallet,
     fetchWalletProviders,
+    handleOnRamp,
   } = useTurnkey();
 
   const { pushPage } = useModal();
@@ -112,6 +113,18 @@ export default function DemoPanel() {
     }
   }, [wallets]);
 
+  const handleAddFunds = async () => {
+    try {
+      await handleOnRamp({
+        onrampProvider: "FIAT_ON_RAMP_PROVIDER_MOONPAY",
+        walletAccount: selectedWalletAccount!,
+        sandboxMode: true,
+      });
+    } catch (error) {
+      handleError(error);
+    }
+  };
+
   function truncateAddress(address: string) {
     return `${address.slice(0, 4)}...${address.slice(-4)}`;
   }
@@ -385,6 +398,13 @@ export default function DemoPanel() {
           >
             Sign Message
           </Button>
+
+          <Button
+            className="bg-primary-light dark:bg-primary-dark text-primary-text-light dark:text-primary-text-dark rounded-lg px-4 py-2 active:scale-95 transition-transform cursor-pointer"
+            onClick={handleAddFunds}
+          >
+            Add Funds
+          </Button>
           {selectedWallet?.source === WalletSource.Embedded && (
             <>
               <hr className="border-draggable-background-light dark:border-draggable-background-dark" />

examples/with-sdk-js/src/app/page.tsx

@@ -163,7 +163,7 @@ export default function AuthPage() {
   const handleOnRamp = async () => {
     try {
       if (!wallets.length || !wallets[0].accounts?.length) {
-        console.error("No wallets available for on-ramp");
+        console.error("No wallets available for onramp");
         return;
       }
 
@@ -172,7 +172,7 @@ export default function AuthPage() {
       );
 
       if (!evmAccount) {
-        console.error("No EVM-compatible account found for on-ramp");
+        console.error("No EVM-compatible account found for onramp");
         return;
       }
 
@@ -183,7 +183,7 @@ export default function AuthPage() {
         sandboxMode: true,
       });
     } catch (err) {
-      console.error("Fiat On-Ramp failed:", err);
+      console.error("Fiat OnRamp failed:", err);
     }
   };
 

packages/react-wallet-kit/src/components/onramp/OnRamp.tsx

@@ -54,7 +54,7 @@ export function OnRampPage({
       )}
     >
       <ActionPage
-        title="Initiating On-Ramp"
+        title="Initiating OnRamp"
         icon={icon}
         action={async () => {
           try {
@@ -72,7 +72,7 @@ export function OnRampPage({
           : "Use the MoonPay popup to finish funding your account."}
       </div>
       {sandboxMode && (
-        <div className="mt-2 text-xs text-blue-500 dark:text-blue-400">
+        <div className="mt-2 text-xs text-primary-light dark:text-primary-dark">
           Sandbox mode — no real funds will be used.
         </div>
       )}

packages/react-wallet-kit/src/providers/client/Provider.tsx

@@ -5331,7 +5331,11 @@ export const ClientProvider: React.FC<ClientProviderProps> = ({
               pollingRef.current = null;
             }
           };
-
+          useEffect(() => {
+            return () => {
+              cleanup();
+            };
+          }, []);
           const action = async () => {
             try {
               let onRampWindow: Window | null = null;
@@ -5460,14 +5464,14 @@ export const ClientProvider: React.FC<ClientProviderProps> = ({
         };
 
         pushPage({
-          key: "Fiat On-Ramp",
+          key: "Fiat OnRamp",
           content: <OnRampContainer />,
           showTitle: false,
           preventBack: true,
           onClose: () =>
             reject(
               new TurnkeyError(
-                "User canceled the on-ramp process.",
+                "User canceled the onramp process.",
                 TurnkeyErrorCodes.USER_CANCELED,
               ),
             ),

packages/react-wallet-kit/src/providers/client/Types.tsx

@@ -744,9 +744,9 @@ export type ClientContextType = Override<
     ) => Promise<void>;
 
     /**
-     * Handles the fiat on-ramp process for converting fiat currency into crypto and funding a wallet.
+     * Handles the fiat onramp process for converting fiat currency into crypto and funding a wallet.
      *
-     * - Initializes a fiat on-ramp transaction with a specified provider (e.g., Coinbase or MoonPay).
+     * - Initializes a fiat onramp transaction with a specified provider (e.g., Coinbase or MoonPay).
      * - Opens the provider flow in a new window and polls the transaction status until completion.
      * - Displays a modal to show progress and success state.
      * - Supports both sandbox and production modes.
@@ -756,7 +756,7 @@ export type ClientContextType = Override<
      * @param params.cryptoCurrencyCode - optional cryptocurrency to purchase, e.g., FIAT_ON_RAMP_CRYPTO_CURRENCY_BTC, defaults to the native currency associated with the network/wallet address passed in.
      * @param params.fiatCurrencyCode - optional fiat currency to use, e.g., FIAT_ON_RAMP_CURRENCY_ETH.
      * @param params.fiatCurrencyAmount - optional preset fiat amount, e.g., '100'.
-     * @param params.onrampProvider - optional on-ramp provider, e.g., FIAT_ON_RAMP_PROVIDER_COINBASE or FIAT_ON_RAMP_PROVIDER_MOONPAY, defaults to FIAT_ON_RAMP_PROVIDER_MOONPAY.
+     * @param params.onrampProvider - optional onramp provider, e.g., FIAT_ON_RAMP_PROVIDER_COINBASE or FIAT_ON_RAMP_PROVIDER_MOONPAY, defaults to FIAT_ON_RAMP_PROVIDER_MOONPAY.
      * @param params.paymentMethod - optional payment method, e.g., FIAT_ON_RAMP_PAYMENT_METHOD_CREDIT_DEBIT_CARD.
      * @param params.countryCode - optional ISO 3166-1 country code.
      * @param params.countrySubdivisionCode - optional ISO 3166-2 subdivision code, e.g., NY.
@@ -765,8 +765,8 @@ export type ClientContextType = Override<
      * @param params.organizationId - organization ID to specify the sub-organization (defaults to the current session's organizationId).
      * @param params.stampWith - parameter to stamp the request with a specific stamper (StamperType.Passkey, StamperType.ApiKey, or StamperType.Wallet).
      * @param params.successPageDuration - optional duration (in ms) for the success page after connecting (default: 2000ms).
-     * @param params.openInNewTab: optional boolean on whether to open the on-ramp URL in a new browser tab or popup
-     * @returns A promise that resolves when the on-ramp flow completes successfully.
+     * @param params.openInNewTab: optional boolean on whether to open the onramp URL in a new browser tab or popup
+     * @returns A promise that resolves when the onramp flow completes successfully.
      * @throws {TurnkeyError} If initialization fails, polling fails, or the user cancels the process.
      */
     handleOnRamp: (params: HandleOnRampParams) => Promise<void>;

packages/react-wallet-kit/src/types/method-types.ts

@@ -277,5 +277,5 @@ export type HandleOnRampParams = {
   userId?: string; // Optional end user ID
   stampWith?: StamperType; // Stamper type (passkey, api key, wallet, etc.)
   successPageDuration?: number; // Duration for success page in ms (0 disables it)
-  openInNewTab?: boolean; // Whether to open the on-ramp URL in a new browser tab or popup
+  openInNewTab?: boolean; // Whether to open the onramp URL in a new browser tab or popup
 };