Merge pull-request #1062

Author: moeodeh3

.changeset/rotten-melons-strive.md

@@ -0,0 +1,11 @@
+---
+"@turnkey/react-wallet-kit": minor
+"@turnkey/sdk-types": minor
+---
+
+- **Added `handleOnRamp()` helper** to simplify fiat-to-crypto on-ramping flows directly from the SDK.
+  - Supports overriding defaults through optional parameters:
+    - `network` (e.g., `FiatOnRampBlockchainNetwork.ETHEREUM`)
+    - `cryptoCurrencyCode` (e.g., `FiatOnRampCryptoCurrency.ETHEREUM`)
+    - `fiatCurrencyAmount`, `fiatCurrencyCode`, `paymentMethod`, and `onrampProvider`.
+  - Integrates seamlessly with the `client.httpClient.initFiatOnRamp()` method to open a provider popup (Coinbase, MoonPay, etc.) and monitor transaction completion.

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

@@ -160,6 +160,32 @@ export default function AuthPage() {
       await httpClient?.getWhoami(),
     );
   };
+  const handleOnRamp = async () => {
+    try {
+      if (!wallets.length || !wallets[0].accounts?.length) {
+        console.error("No wallets available for on-ramp");
+        return;
+      }
+
+      const evmAccount: WalletAccount | undefined = wallets[0].accounts.find(
+        (a) => a.addressFormat === "ADDRESS_FORMAT_ETHEREUM",
+      );
+
+      if (!evmAccount) {
+        console.error("No EVM-compatible account found for on-ramp");
+        return;
+      }
+
+      await turnkey.handleOnRamp({
+        onrampProvider: "FIAT_ON_RAMP_PROVIDER_MOONPAY",
+        walletAccount: evmAccount,
+        cryptoCurrencyCode: "FIAT_ON_RAMP_CRYPTO_CURRENCY_ETH",
+        sandboxMode: true,
+      });
+    } catch (err) {
+      console.error("Fiat On-Ramp failed:", err);
+    }
+  };
 
   const signWithViem = async () => {
     const turnkeyAccount = await createAccount({
@@ -1007,6 +1033,19 @@ export default function AuthPage() {
               >
                 Remove OAuth Provider
               </button>
+
+              <button
+                data-testid="show-onramp-modal"
+                onClick={handleOnRamp}
+                style={{
+                  backgroundColor: "purple",
+                  borderRadius: "8px",
+                  padding: "8px 16px",
+                  color: "white",
+                }}
+              >
+                Onramp
+              </button>
             </>
           )}
         </div>

packages/react-wallet-kit/src/components/design/Svg.tsx

@@ -3,6 +3,51 @@ interface SVGProps {
   style?: React.CSSProperties;
 }
 
+export function CoinbaseLogo(props: SVGProps) {
+  return (
+    <svg
+      viewBox="0 0 1024 1024"
+      fill="none"
+      xmlns="http://www.w3.org/2000/svg"
+      {...props}
+    >
+      <rect width="1024" height="1024" fill="#0052FF" rx="100" ry="100"></rect>
+      <path
+        fill-rule="evenodd"
+        clip-rule="evenodd"
+        d="M152 512C152 710.823 313.177 872 512 872C710.823 872 872 710.823 872 512C872 313.177 710.823 152 512 152C313.177 152 152 313.177 152 512ZM420 396C406.745 396 396 406.745 396 420V604C396 617.255 406.745 628 420 628H604C617.255 628 628 617.255 628 604V420C628 406.745 617.255 396 604 396H420Z"
+        fill="white"
+      ></path>
+    </svg>
+  );
+}
+
+export function MoonPayLogo(props: SVGProps) {
+  return (
+    <svg
+      viewBox="0 0 61 61"
+      fill="none"
+      xmlns="http://www.w3.org/2000/svg"
+      {...props}
+    >
+      <g id="moonpay_symbol_wht 2">
+        <rect
+          x="1.3374"
+          y="1"
+          width="59"
+          height="59"
+          rx="11.5"
+          fill="#7715F5"
+        ></rect>
+        <path
+          id="Vector"
+          d="M43.8884 23.3258C45.0203 23.3258 46.1268 22.9901 47.068 22.3613C48.0091 21.7324 48.7427 20.8386 49.1759 19.7928C49.6091 18.747 49.7224 17.5962 49.5016 16.4861C49.2807 15.3759 48.7357 14.3561 47.9353 13.5557C47.1349 12.7553 46.1151 12.2102 45.0049 11.9893C43.8947 11.7685 42.7439 11.8819 41.6982 12.3151C40.6524 12.7482 39.7585 13.4818 39.1297 14.423C38.5008 15.3641 38.1651 16.4707 38.1651 17.6026C38.165 18.3542 38.3131 19.0985 38.6007 19.7929C38.8883 20.4873 39.3098 21.1182 39.8413 21.6496C40.3728 22.1811 41.0037 22.6027 41.6981 22.8903C42.3925 23.1778 43.1367 23.3259 43.8884 23.3258ZM26.3395 49.1017C23.5804 49.1017 20.8832 48.2836 18.5891 46.7507C16.295 45.2178 14.5069 43.039 13.4511 40.49C12.3952 37.9409 12.1189 35.1359 12.6572 32.4298C13.1955 29.7237 14.5241 27.238 16.4751 25.287C18.4262 23.336 20.9118 22.0074 23.6179 21.4691C26.324 20.9308 29.129 21.2071 31.6781 22.2629C34.2272 23.3189 36.406 25.1069 37.9389 27.401C39.4717 29.6952 40.2899 32.3923 40.2899 35.1514C40.2899 36.9835 39.9291 38.7975 39.2281 40.49C38.527 42.1826 37.4994 43.7205 36.204 45.0159C34.9086 46.3113 33.3707 47.3389 31.6781 48.04C29.9856 48.741 28.1715 49.1018 26.3395 49.1017Z"
+          fill="white"
+        ></path>
+      </g>
+    </svg>
+  );
+}
 export function TurnkeyLogo(props: SVGProps) {
   return (
     <svg

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

@@ -0,0 +1,81 @@
+import { useModal } from "../../providers/modal/Hook";
+import clsx from "clsx";
+import { ActionPage } from "../auth/Action";
+import { SuccessPage } from "../design/Success";
+
+type OnRampPageProps = {
+  icon: React.ReactNode;
+  onrampProvider: string;
+  action: () => Promise<void>;
+  completed: boolean;
+  successPageDuration?: number;
+  sandboxMode?: boolean;
+  onSuccess?: () => void;
+  onError?: (error: any) => void;
+};
+
+export function OnRampPage({
+  icon,
+  onrampProvider,
+  action,
+  completed,
+  successPageDuration = 2000,
+  sandboxMode = false,
+  onSuccess,
+  onError,
+}: OnRampPageProps) {
+  const { closeModal, isMobile } = useModal();
+
+  if (completed) {
+    return (
+      <div
+        className={clsx(
+          "flex flex-col items-center justify-center py-5 transition-all duration-300 text-center",
+          isMobile ? "w-full" : "w-72",
+        )}
+      >
+        <SuccessPage
+          text="On Ramp Transaction Complete!"
+          duration={successPageDuration}
+          onComplete={() => {
+            onSuccess?.();
+            closeModal();
+          }}
+        />
+      </div>
+    );
+  }
+
+  return (
+    <div
+      className={clsx(
+        "flex flex-col items-center justify-center py-5 transition-all duration-300 text-center",
+        isMobile ? "w-full" : "w-72",
+      )}
+    >
+      <ActionPage
+        title="Initiating On-Ramp"
+        icon={icon}
+        action={async () => {
+          try {
+            await action();
+          } catch (err) {
+            onError?.(err);
+            throw err;
+          }
+        }}
+        closeOnComplete={false}
+      />
+      <div className="text-icon-text-light text-sm dark:text-icon-text-dark text-center !p-0">
+        {onrampProvider === "FIAT_ON_RAMP_PROVIDER_COINBASE"
+          ? "Use the Coinbase popup to finish funding your account."
+          : "Use the MoonPay popup to finish funding your account."}
+      </div>
+      {sandboxMode && (
+        <div className="mt-2 text-xs text-blue-500 dark:text-blue-400">
+          Sandbox mode — no real funds will be used.
+        </div>
+      )}
+    </div>
+  );
+}