Initial on-ramp implementation

Author: amircheikh

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

@@ -1674,6 +1674,34 @@ export default function AuthPage() {
           </div>
         </div>
       )}
+      {authState === AuthState.Authenticated && (
+        <div>
+          <h2>On Ramp</h2>
+          <div className="flex flex-wrap gap-2 mb-2">
+            <button
+              data-testid="sign-sol-transaction"
+              onClick={() =>
+                turnkey.handleCoinbaseOnRamp({
+                  onrampProvider: "FIAT_ON_RAMP_PROVIDER_COINBASE",
+                  walletAddress: activeWalletAccount?.address!,
+                  cryptoCurrencyCode: "FIAT_ON_RAMP_CRYPTO_CURRENCY_ETH",
+                  network: "FIAT_ON_RAMP_BLOCKCHAIN_NETWORK_ETHEREUM",
+                  paymentMethod: "FIAT_ON_RAMP_PAYMENT_METHOD_PAYPAL",
+                  sandboxMode: true,
+                })
+              }
+              style={{
+                backgroundColor: "pink",
+                borderRadius: "8px",
+                padding: "8px 16px",
+                color: "black",
+              }}
+            >
+              Coinbase On Ramp
+            </button>
+          </div>
+        </div>
+      )}
       <div>
         <h2>Otp Methods</h2>
         <div>

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

@@ -149,6 +149,7 @@ import type {
   HandleAddPasskeyParams,
   HandleAddPhoneNumberParams,
   HandleAppleOauthParams,
+  HandleCoinbaseOnRampParams,
   HandleConnectExternalWalletParams,
   HandleDiscordOauthParams,
   HandleExportPrivateKeyParams,
@@ -5026,6 +5027,47 @@ export const ClientProvider: React.FC<ClientProviderProps> = ({
     [pushPage, masterConfig, client, session, user],
   );
 
+  const handleCoinbaseOnRamp = useCallback(
+    async (params: HandleCoinbaseOnRampParams): Promise<void> => {
+      const { successPageDuration = 2000 } = params || {};
+      const organizationId = params?.organizationId || session?.organizationId;
+      if (!organizationId) {
+        throw new TurnkeyError(
+          "A session or passed in organization ID is required.",
+          TurnkeyErrorCodes.INVALID_REQUEST,
+        );
+      }
+
+      if (!client)
+        throw new TurnkeyError(
+          "Client is not initialized.",
+          TurnkeyErrorCodes.CLIENT_NOT_INITIALIZED,
+        );
+
+      const res = await client.httpClient.initFiatOnRamp(params);
+      const { onRampUrl } = res;
+
+      // Popup flow (can abstract this into a utility)
+      const width = popupWidth;
+      const height = popupHeight;
+      const left = window.screenX + (window.innerWidth - width) / 2;
+      const top = window.screenY + (window.innerHeight - height) / 2;
+
+      const popupWindow = window.open(
+        "about:blank",
+        "_blank",
+        `width=${width},height=${height},top=${top},left=${left},scrollbars=yes,resizable=yes`,
+      );
+
+      if (!popupWindow) {
+        throw new Error("Failed to open Coinbase payment window.");
+      }
+
+      popupWindow.location.href = onRampUrl.toString();
+    },
+    [masterConfig, client, session, user],
+  );
+
   useEffect(() => {
     if (proxyAuthConfigRef.current) return;
 
@@ -5243,6 +5285,7 @@ export const ClientProvider: React.FC<ClientProviderProps> = ({
         handleConnectExternalWallet,
         handleRemoveUserEmail,
         handleRemoveUserPhoneNumber,
+        handleCoinbaseOnRamp,
       }}
     >
       {children}

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

@@ -23,6 +23,7 @@ import type {
   HandleAddPasskeyParams,
   HandleAddPhoneNumberParams,
   HandleAppleOauthParams,
+  HandleCoinbaseOnRampParams,
   HandleConnectExternalWalletParams,
   HandleDiscordOauthParams,
   HandleExportPrivateKeyParams,
@@ -685,6 +686,9 @@ export interface ClientContextType extends TurnkeyClientMethods {
   handleRemoveUserPhoneNumber: (
     params?: HandleRemoveUserPhoneNumberParams,
   ) => Promise<string>;
+
+  // TODO (Amir): Complete JSDoc
+  handleCoinbaseOnRamp: (params: HandleCoinbaseOnRampParams) => Promise<void>;
 }
 
 /** @internal */

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

@@ -3,6 +3,11 @@ import type {
   StamperType,
   v1AddressFormat,
   v1Curve,
+  v1FiatOnRampBlockchainNetwork,
+  v1FiatOnRampCryptoCurrency,
+  v1FiatOnRampCurrency,
+  v1FiatOnRampPaymentMethod,
+  v1FiatOnRampProvider,
   v1HashFunction,
   v1PayloadEncoding,
   v1WalletAccountParams,
@@ -227,3 +232,20 @@ export type HandleRemoveUserPhoneNumberParams = {
   stampWith?: StamperType | undefined;
   organizationId?: string;
 };
+
+export type HandleCoinbaseOnRampParams = {
+  onrampProvider: v1FiatOnRampProvider;
+  walletAddress: string;
+  network: v1FiatOnRampBlockchainNetwork;
+  cryptoCurrencyCode: v1FiatOnRampCryptoCurrency;
+  fiatCurrencyCode?: v1FiatOnRampCurrency;
+  fiatCurrencyAmount?: string;
+  paymentMethod?: v1FiatOnRampPaymentMethod;
+  countryCode?: string;
+  countrySubdivisionCode?: string;
+  sandboxMode?: boolean;
+  urlForSignature?: string;
+  successPageDuration?: number | undefined;
+  stampWith?: StamperType | undefined;
+  organizationId?: string;
+};