@unifold/headless-react 0.1.75 → 0.1.76

package/dist/index.mjs

@@ -1,5 +1,5 @@
 // src/index.ts
-import { UnifoldProvider, useUnifold as useUnifold8 } from "@unifold/react-provider";
+import { UnifoldProvider, useUnifold as useUnifold10 } from "@unifold/react-provider";
 
 // src/use-unifold-client.ts
 import { useMemo } from "react";
@@ -158,15 +158,231 @@ function useDeposit(options) {
   };
 }
 
+// src/use-onramp.ts
+import { useCallback as useCallback2, useEffect as useEffect2, useMemo as useMemo3, useRef as useRef2, useState as useState2, useSyncExternalStore as useSyncExternalStore2 } from "react";
+import {
+  OnrampSession,
+  OnrampSessionEventType
+} from "@unifold/core";
+import { useUnifold as useUnifold3 } from "@unifold/react-provider";
+var IDLE_SNAPSHOT2 = {
+  status: "idle",
+  countryCode: null,
+  addresses: [],
+  destinationToken: null,
+  quotes: [],
+  selectedQuote: null,
+  isQuoteAutoSelected: true,
+  canSelectProvider: false,
+  isRefreshingQuotes: false,
+  quotesUpdatedAt: null,
+  checkout: null,
+  executions: [],
+  latestExecution: null,
+  isCheckingDeposit: false,
+  error: null
+};
+function useOnramp(options) {
+  const { publishableKey } = useUnifold3();
+  const {
+    externalUserId,
+    destination,
+    countryCode,
+    subdivisionCode,
+    sourceAmount,
+    destinationAmount,
+    sourceCurrency = "usd",
+    paymentMethodType,
+    email,
+    quoteRefreshIntervalMs,
+    quoteDebounceMs = 500,
+    autoStart = true
+  } = options;
+  const callbacksRef = useRef2(options);
+  useEffect2(() => {
+    callbacksRef.current = options;
+  });
+  const autoStartRef = useRef2(autoStart);
+  autoStartRef.current = autoStart;
+  const quoteRequestRef = useRef2({
+    countryCode,
+    subdivisionCode,
+    sourceAmount,
+    destinationAmount,
+    sourceCurrency
+  });
+  quoteRequestRef.current = {
+    countryCode,
+    subdivisionCode,
+    sourceAmount,
+    destinationAmount,
+    sourceCurrency
+  };
+  const [session, setSession] = useState2(null);
+  const sessionKey = [
+    publishableKey,
+    externalUserId ?? "",
+    destination.chainType,
+    destination.chainId,
+    destination.tokenAddress,
+    destination.recipientAddress,
+    JSON.stringify(destination.contractCalls ?? null),
+    paymentMethodType ?? "",
+    email ?? "",
+    quoteRefreshIntervalMs ?? ""
+  ].join("|");
+  useEffect2(() => {
+    if (!publishableKey || !externalUserId) {
+      setSession(null);
+      return;
+    }
+    const nextSession = new OnrampSession({
+      publishableKey,
+      externalUserId,
+      destination,
+      quoteRequest: quoteRequestRef.current,
+      paymentMethodType,
+      email,
+      quoteRefreshIntervalMs
+    });
+    let previousStatus = nextSession.getSnapshot().status;
+    const offEvents = nextSession.on("*", (event) => {
+      const callbacks = callbacksRef.current;
+      callbacks.onEvent?.(event);
+      switch (event.type) {
+        case OnrampSessionEventType.ADDRESSES_CREATED:
+          callbacks.onAddressesReady?.(event.data.object.addresses);
+          break;
+        case OnrampSessionEventType.QUOTES_UPDATED:
+          callbacks.onQuotes?.(event.data.object.quotes, event.data.object.selectedQuote);
+          break;
+        case OnrampSessionEventType.CHECKOUT_CREATED:
+          callbacks.onCheckoutCreated?.({
+            externalId: event.data.object.externalId,
+            url: event.data.object.url,
+            serviceProvider: event.data.object.serviceProvider
+          });
+          break;
+        case OnrampSessionEventType.EXECUTION_DETECTED:
+          callbacks.onExecutionDetected?.(event.data.object);
+          break;
+        case OnrampSessionEventType.EXECUTION_UPDATED:
+          callbacks.onExecutionUpdated?.(event.data.object);
+          break;
+        case OnrampSessionEventType.EXECUTION_SUCCEEDED:
+          callbacks.onSuccess?.(event.data.object);
+          break;
+        case OnrampSessionEventType.EXECUTION_FAILED:
+          callbacks.onError?.({
+            code: "DEPOSIT_FAILED",
+            message: "Deposit failed",
+            fatal: false,
+            cause: event.data.object
+          });
+          break;
+        case OnrampSessionEventType.SESSION_ERRORED:
+          callbacks.onError?.({
+            code: event.data.object.code,
+            message: event.data.object.message,
+            fatal: event.data.object.fatal
+          });
+          break;
+      }
+    });
+    const offStatus = nextSession.subscribe(() => {
+      const status = nextSession.getSnapshot().status;
+      if (status !== previousStatus) {
+        previousStatus = status;
+        callbacksRef.current.onStatusChange?.(status);
+      }
+    });
+    setSession(nextSession);
+    if (autoStartRef.current) {
+      void nextSession.start();
+    }
+    return () => {
+      offEvents();
+      offStatus();
+      nextSession.destroy();
+    };
+  }, [sessionKey]);
+  const quoteInputKey = [
+    countryCode ?? "",
+    subdivisionCode ?? "",
+    sourceAmount ?? "",
+    destinationAmount ?? "",
+    sourceCurrency
+  ].join("|");
+  useEffect2(() => {
+    if (!session) return;
+    const timer = setTimeout(() => {
+      session.updateQuoteRequest({
+        // undefined keeps the session's value (and IP detection for geo).
+        countryCode,
+        subdivisionCode,
+        sourceAmount,
+        destinationAmount,
+        sourceCurrency
+      });
+    }, quoteDebounceMs);
+    return () => clearTimeout(timer);
+  }, [session, quoteInputKey, quoteDebounceMs]);
+  const subscribe = useCallback2(
+    (listener) => session ? session.subscribe(listener) : () => {
+    },
+    [session]
+  );
+  const getSnapshot = useCallback2(
+    () => session ? session.getSnapshot() : IDLE_SNAPSHOT2,
+    [session]
+  );
+  const snapshot = useSyncExternalStore2(subscribe, getSnapshot, () => IDLE_SNAPSHOT2);
+  const controls = useMemo3(
+    () => ({
+      start: () => session?.start() ?? Promise.resolve(),
+      refreshQuotes: () => session?.refreshQuotes() ?? Promise.resolve(),
+      updateQuoteRequest: (patch) => session?.updateQuoteRequest(patch),
+      selectQuote: (serviceProvider) => session?.selectQuote(serviceProvider) ?? null,
+      createCheckout: (checkoutOptions) => session ? session.createCheckout(checkoutOptions) : null,
+      stop: () => session?.stop(),
+      restart: async () => {
+        if (!session) return;
+        session.stop();
+        await session.start();
+      }
+    }),
+    [session]
+  );
+  return {
+    status: snapshot.status,
+    countryCode: snapshot.countryCode,
+    addresses: snapshot.addresses,
+    destinationToken: snapshot.destinationToken,
+    quotes: snapshot.quotes,
+    selectedQuote: snapshot.selectedQuote,
+    isQuoteAutoSelected: snapshot.isQuoteAutoSelected,
+    canSelectProvider: snapshot.canSelectProvider,
+    isRefreshingQuotes: snapshot.isRefreshingQuotes,
+    quotesUpdatedAt: snapshot.quotesUpdatedAt,
+    checkout: snapshot.checkout,
+    executions: snapshot.executions,
+    latestExecution: snapshot.latestExecution,
+    isCheckingDeposit: snapshot.isCheckingDeposit,
+    error: snapshot.error,
+    ...controls,
+    session
+  };
+}
+
 // src/use-deposit-addresses.ts
 import { useQuery } from "@tanstack/react-query";
 import {
   createDepositAddress,
   mapWalletToDepositAddress
 } from "@unifold/core";
-import { useUnifold as useUnifold3 } from "@unifold/react-provider";
+import { useUnifold as useUnifold4 } from "@unifold/react-provider";
 function useDepositAddresses(options) {
-  const { publishableKey } = useUnifold3();
+  const { publishableKey } = useUnifold4();
   const { externalUserId, destination, actionType, enabled = true } = options;
   return useQuery({
     // Key parity with @unifold/ui-react's useDepositAddress — do not reorder.
@@ -213,9 +429,9 @@ import { useQuery as useQuery2 } from "@tanstack/react-query";
 import {
   getSupportedDepositTokens
 } from "@unifold/core";
-import { useUnifold as useUnifold4 } from "@unifold/react-provider";
+import { useUnifold as useUnifold5 } from "@unifold/react-provider";
 function useSupportedDepositTokens(options = {}) {
-  const { publishableKey } = useUnifold4();
+  const { publishableKey } = useUnifold5();
   const { destination, productType, enabled = true } = options;
   const completeDestination = destination?.chainType && destination?.chainId && destination?.tokenAddress ? destination : void 0;
   const apiOptions = completeDestination || productType ? {
@@ -254,9 +470,9 @@ import {
   mapDirectExecution,
   ActionType
 } from "@unifold/core";
-import { useUnifold as useUnifold5 } from "@unifold/react-provider";
+import { useUnifold as useUnifold6 } from "@unifold/react-provider";
 function useExecutions(options) {
-  const { publishableKey } = useUnifold5();
+  const { publishableKey } = useUnifold6();
   const {
     externalUserId,
     refetchInterval = false,
@@ -279,9 +495,9 @@ function useExecutions(options) {
 // src/use-allowed-country.ts
 import { useQuery as useQuery4, keepPreviousData } from "@tanstack/react-query";
 import { getIpAddress, getProjectConfig } from "@unifold/core";
-import { useUnifold as useUnifold6 } from "@unifold/react-provider";
+import { useUnifold as useUnifold7 } from "@unifold/react-provider";
 function useAllowedCountry() {
-  const { publishableKey } = useUnifold6();
+  const { publishableKey } = useUnifold7();
   const ipQuery = useQuery4({
     // Key parity with @unifold/core's useUserIp.
     queryKey: ["unifold", "userIpInfo"],
@@ -339,9 +555,9 @@ import { useQuery as useQuery5 } from "@tanstack/react-query";
 import {
   verifyRecipientAddress
 } from "@unifold/core";
-import { useUnifold as useUnifold7 } from "@unifold/react-provider";
+import { useUnifold as useUnifold8 } from "@unifold/react-provider";
 function useAddressValidation(options) {
-  const { publishableKey } = useUnifold7();
+  const { publishableKey } = useUnifold8();
   const { recipientAddress, destination, enabled = true } = options;
   const hasCompleteDestination = !!destination?.chainType && !!destination?.chainId && !!destination?.tokenAddress;
   const shouldValidate = enabled && !!publishableKey && !!recipientAddress && hasCompleteDestination;
@@ -387,6 +603,24 @@ function useAddressValidation(options) {
   };
 }
 
+// src/use-fiat-currencies.ts
+import { useQuery as useQuery6 } from "@tanstack/react-query";
+import { getFiatCurrencies } from "@unifold/core";
+import { useUnifold as useUnifold9 } from "@unifold/react-provider";
+function useFiatCurrencies(options = {}) {
+  const { publishableKey } = useUnifold9();
+  const { enabled = true } = options;
+  return useQuery6({
+    queryKey: ["unifold", "fiatCurrencies", publishableKey],
+    queryFn: () => getFiatCurrencies(publishableKey),
+    enabled: enabled && !!publishableKey,
+    staleTime: 1e3 * 60 * 5,
+    gcTime: 1e3 * 60 * 30,
+    refetchOnMount: false,
+    refetchOnWindowFocus: false
+  });
+}
+
 // src/index.ts
 import {
   createUnifoldClient as createUnifoldClient2,
@@ -394,7 +628,10 @@ import {
   DepositSession as DepositSession2,
   DepositSessionEventType as DepositSessionEventType2,
   DepositSessionWaitError,
-  ExecutionStatus as ExecutionStatus2,
+  OnrampSession as OnrampSession2,
+  OnrampSessionEventType as OnrampSessionEventType2,
+  OnrampSessionWaitError,
+  ExecutionStatus as ExecutionStatus3,
   ActionType as ActionType2
 } from "@unifold/core";
 export {
@@ -402,7 +639,10 @@ export {
   DepositSession2 as DepositSession,
   DepositSessionEventType2 as DepositSessionEventType,
   DepositSessionWaitError,
-  ExecutionStatus2 as ExecutionStatus,
+  ExecutionStatus3 as ExecutionStatus,
+  OnrampSession2 as OnrampSession,
+  OnrampSessionEventType2 as OnrampSessionEventType,
+  OnrampSessionWaitError,
   UnifoldClient,
   UnifoldProvider,
   createUnifoldClient2 as createUnifoldClient,
@@ -411,7 +651,9 @@ export {
   useDeposit,
   useDepositAddresses,
   useExecutions,
+  useFiatCurrencies,
+  useOnramp,
   useSupportedDepositTokens,
-  useUnifold8 as useUnifold,
+  useUnifold10 as useUnifold,
   useUnifoldClient
 };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@unifold/headless-react",
-  "version": "0.1.75",
+  "version": "0.1.76",
   "description": "Unifold Headless React SDK - hooks-only (no UI) crypto deposit flows",
   "main": "./dist/index.js",
   "module": "./dist/index.mjs",
@@ -21,8 +21,8 @@
   },
   "dependencies": {
     "@tanstack/react-query": "^5.90.11",
-    "@unifold/core": "0.1.75",
-    "@unifold/react-provider": "0.1.75"
+    "@unifold/core": "0.1.76",
+    "@unifold/react-provider": "0.1.76"
   },
   "devDependencies": {
     "@types/react": "^19.0.0",