@unifold/headless-react 0.1.75 → 0.1.77

package/dist/index.js

@@ -20,25 +20,30 @@ var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: tru
 // src/index.ts
 var index_exports = {};
 __export(index_exports, {
-  ActionType: () => import_core8.ActionType,
-  DepositSession: () => import_core8.DepositSession,
-  DepositSessionEventType: () => import_core8.DepositSessionEventType,
-  DepositSessionWaitError: () => import_core8.DepositSessionWaitError,
-  ExecutionStatus: () => import_core8.ExecutionStatus,
-  UnifoldClient: () => import_core8.UnifoldClient,
-  UnifoldProvider: () => import_react_provider8.UnifoldProvider,
-  createUnifoldClient: () => import_core8.createUnifoldClient,
+  ActionType: () => import_core10.ActionType,
+  DepositSession: () => import_core10.DepositSession,
+  DepositSessionEventType: () => import_core10.DepositSessionEventType,
+  DepositSessionWaitError: () => import_core10.DepositSessionWaitError,
+  ExecutionStatus: () => import_core10.ExecutionStatus,
+  OnrampSession: () => import_core10.OnrampSession,
+  OnrampSessionEventType: () => import_core10.OnrampSessionEventType,
+  OnrampSessionWaitError: () => import_core10.OnrampSessionWaitError,
+  UnifoldClient: () => import_core10.UnifoldClient,
+  UnifoldProvider: () => import_react_provider10.UnifoldProvider,
+  createUnifoldClient: () => import_core10.createUnifoldClient,
   useAddressValidation: () => useAddressValidation,
   useAllowedCountry: () => useAllowedCountry,
   useDeposit: () => useDeposit,
   useDepositAddresses: () => useDepositAddresses,
   useExecutions: () => useExecutions,
+  useFiatCurrencies: () => useFiatCurrencies,
+  useOnramp: () => useOnramp,
   useSupportedDepositTokens: () => useSupportedDepositTokens,
-  useUnifold: () => import_react_provider8.useUnifold,
+  useUnifold: () => import_react_provider10.useUnifold,
   useUnifoldClient: () => useUnifoldClient
 });
 module.exports = __toCommonJS(index_exports);
-var import_react_provider8 = require("@unifold/react-provider");
+var import_react_provider10 = require("@unifold/react-provider");
 
 // src/use-unifold-client.ts
 var import_react = require("react");
@@ -194,12 +199,225 @@ function useDeposit(options) {
   };
 }
 
-// src/use-deposit-addresses.ts
-var import_react_query = require("@tanstack/react-query");
+// src/use-onramp.ts
+var import_react3 = require("react");
 var import_core3 = require("@unifold/core");
 var import_react_provider3 = require("@unifold/react-provider");
-function useDepositAddresses(options) {
+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 } = (0, import_react_provider3.useUnifold)();
+  const {
+    externalUserId,
+    destination,
+    countryCode,
+    subdivisionCode,
+    sourceAmount,
+    destinationAmount,
+    sourceCurrency = "usd",
+    paymentMethodType,
+    email,
+    quoteRefreshIntervalMs,
+    quoteDebounceMs = 500,
+    autoStart = true
+  } = options;
+  const callbacksRef = (0, import_react3.useRef)(options);
+  (0, import_react3.useEffect)(() => {
+    callbacksRef.current = options;
+  });
+  const autoStartRef = (0, import_react3.useRef)(autoStart);
+  autoStartRef.current = autoStart;
+  const quoteRequestRef = (0, import_react3.useRef)({
+    countryCode,
+    subdivisionCode,
+    sourceAmount,
+    destinationAmount,
+    sourceCurrency
+  });
+  quoteRequestRef.current = {
+    countryCode,
+    subdivisionCode,
+    sourceAmount,
+    destinationAmount,
+    sourceCurrency
+  };
+  const [session, setSession] = (0, import_react3.useState)(null);
+  const sessionKey = [
+    publishableKey,
+    externalUserId ?? "",
+    destination.chainType,
+    destination.chainId,
+    destination.tokenAddress,
+    destination.recipientAddress,
+    JSON.stringify(destination.contractCalls ?? null),
+    paymentMethodType ?? "",
+    email ?? "",
+    quoteRefreshIntervalMs ?? ""
+  ].join("|");
+  (0, import_react3.useEffect)(() => {
+    if (!publishableKey || !externalUserId) {
+      setSession(null);
+      return;
+    }
+    const nextSession = new import_core3.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 import_core3.OnrampSessionEventType.ADDRESSES_CREATED:
+          callbacks.onAddressesReady?.(event.data.object.addresses);
+          break;
+        case import_core3.OnrampSessionEventType.QUOTES_UPDATED:
+          callbacks.onQuotes?.(event.data.object.quotes, event.data.object.selectedQuote);
+          break;
+        case import_core3.OnrampSessionEventType.CHECKOUT_CREATED:
+          callbacks.onCheckoutCreated?.({
+            externalId: event.data.object.externalId,
+            url: event.data.object.url,
+            serviceProvider: event.data.object.serviceProvider
+          });
+          break;
+        case import_core3.OnrampSessionEventType.EXECUTION_DETECTED:
+          callbacks.onExecutionDetected?.(event.data.object);
+          break;
+        case import_core3.OnrampSessionEventType.EXECUTION_UPDATED:
+          callbacks.onExecutionUpdated?.(event.data.object);
+          break;
+        case import_core3.OnrampSessionEventType.EXECUTION_SUCCEEDED:
+          callbacks.onSuccess?.(event.data.object);
+          break;
+        case import_core3.OnrampSessionEventType.EXECUTION_FAILED:
+          callbacks.onError?.({
+            code: "DEPOSIT_FAILED",
+            message: "Deposit failed",
+            fatal: false,
+            cause: event.data.object
+          });
+          break;
+        case import_core3.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("|");
+  (0, import_react3.useEffect)(() => {
+    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 = (0, import_react3.useCallback)(
+    (listener) => session ? session.subscribe(listener) : () => {
+    },
+    [session]
+  );
+  const getSnapshot = (0, import_react3.useCallback)(
+    () => session ? session.getSnapshot() : IDLE_SNAPSHOT2,
+    [session]
+  );
+  const snapshot = (0, import_react3.useSyncExternalStore)(subscribe, getSnapshot, () => IDLE_SNAPSHOT2);
+  const controls = (0, import_react3.useMemo)(
+    () => ({
+      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
+var import_react_query = require("@tanstack/react-query");
+var import_core4 = require("@unifold/core");
+var import_react_provider4 = require("@unifold/react-provider");
+function useDepositAddresses(options) {
+  const { publishableKey } = (0, import_react_provider4.useUnifold)();
   const { externalUserId, destination, actionType, enabled = true } = options;
   return (0, import_react_query.useQuery)({
     // Key parity with @unifold/ui-react's useDepositAddress — do not reorder.
@@ -215,7 +433,7 @@ function useDepositAddresses(options) {
       destination?.contractCalls ?? null,
       publishableKey
     ],
-    queryFn: () => (0, import_core3.createDepositAddress)(
+    queryFn: () => (0, import_core4.createDepositAddress)(
       {
         external_user_id: externalUserId,
         recipient_address: destination?.recipientAddress,
@@ -227,7 +445,7 @@ function useDepositAddresses(options) {
       },
       publishableKey
     ),
-    select: (response) => response.data.map(import_core3.mapWalletToDepositAddress),
+    select: (response) => response.data.map(import_core4.mapWalletToDepositAddress),
     // When a destination is supplied it must be complete — never issue a
     // create call with a partially-filled destination.
     enabled: enabled && !!externalUserId && !!publishableKey && (!destination || !!destination.chainType && !!destination.chainId && !!destination.tokenAddress && !!destination.recipientAddress),
@@ -243,10 +461,10 @@ function useDepositAddresses(options) {
 
 // src/use-supported-deposit-tokens.ts
 var import_react_query2 = require("@tanstack/react-query");
-var import_core4 = require("@unifold/core");
-var import_react_provider4 = require("@unifold/react-provider");
+var import_core5 = require("@unifold/core");
+var import_react_provider5 = require("@unifold/react-provider");
 function useSupportedDepositTokens(options = {}) {
-  const { publishableKey } = (0, import_react_provider4.useUnifold)();
+  const { publishableKey } = (0, import_react_provider5.useUnifold)();
   const { destination, productType, enabled = true } = options;
   const completeDestination = destination?.chainType && destination?.chainId && destination?.tokenAddress ? destination : void 0;
   const apiOptions = completeDestination || productType ? {
@@ -268,7 +486,7 @@ function useSupportedDepositTokens(options = {}) {
       destination?.chainType ?? null,
       productType ?? null
     ],
-    queryFn: () => (0, import_core4.getSupportedDepositTokens)(publishableKey, apiOptions),
+    queryFn: () => (0, import_core5.getSupportedDepositTokens)(publishableKey, apiOptions),
     select: (response) => response.data,
     enabled: enabled && !!publishableKey,
     staleTime: 1e3 * 60 * 5,
@@ -280,21 +498,21 @@ function useSupportedDepositTokens(options = {}) {
 
 // src/use-executions.ts
 var import_react_query3 = require("@tanstack/react-query");
-var import_core5 = require("@unifold/core");
-var import_react_provider5 = require("@unifold/react-provider");
+var import_core6 = require("@unifold/core");
+var import_react_provider6 = require("@unifold/react-provider");
 function useExecutions(options) {
-  const { publishableKey } = (0, import_react_provider5.useUnifold)();
+  const { publishableKey } = (0, import_react_provider6.useUnifold)();
   const {
     externalUserId,
     refetchInterval = false,
     enabled = true,
-    actionType = import_core5.ActionType.Deposit
+    actionType = import_core6.ActionType.Deposit
   } = options;
   return (0, import_react_query3.useQuery)({
     // Key parity with @unifold/ui-react's useExecutions.
     queryKey: ["unifold", "executions", actionType, externalUserId, publishableKey],
-    queryFn: () => (0, import_core5.queryExecutions)(externalUserId, publishableKey, actionType),
-    select: (response) => response.data.map(import_core5.mapDirectExecution),
+    queryFn: () => (0, import_core6.queryExecutions)(externalUserId, publishableKey, actionType),
+    select: (response) => response.data.map(import_core6.mapDirectExecution),
     enabled: enabled && !!externalUserId && !!publishableKey,
     refetchInterval,
     staleTime: 0,
@@ -305,15 +523,15 @@ function useExecutions(options) {
 
 // src/use-allowed-country.ts
 var import_react_query4 = require("@tanstack/react-query");
-var import_core6 = require("@unifold/core");
-var import_react_provider6 = require("@unifold/react-provider");
+var import_core7 = require("@unifold/core");
+var import_react_provider7 = require("@unifold/react-provider");
 function useAllowedCountry() {
-  const { publishableKey } = (0, import_react_provider6.useUnifold)();
+  const { publishableKey } = (0, import_react_provider7.useUnifold)();
   const ipQuery = (0, import_react_query4.useQuery)({
     // Key parity with @unifold/core's useUserIp.
     queryKey: ["unifold", "userIpInfo"],
     queryFn: async () => {
-      const data = await (0, import_core6.getIpAddress)();
+      const data = await (0, import_core7.getIpAddress)();
       const subdivision = data.subdivision_code || data.state || null;
       return { alpha2: data.alpha2, country: data.country, subdivisionCode: subdivision };
     },
@@ -327,7 +545,7 @@ function useAllowedCountry() {
   const configQuery = (0, import_react_query4.useQuery)({
     // Key parity with @unifold/ui-react's useProjectConfig.
     queryKey: ip?.alpha2 ? ["unifold", "projectConfig", publishableKey, ip.alpha2, ip.subdivisionCode ?? null] : ["unifold", "projectConfig", publishableKey],
-    queryFn: () => (0, import_core6.getProjectConfig)(
+    queryFn: () => (0, import_core7.getProjectConfig)(
       publishableKey,
       ip?.alpha2 ? { countryCode: ip.alpha2, subdivisionCode: ip.subdivisionCode ?? void 0 } : void 0
     ),
@@ -363,10 +581,10 @@ function useAllowedCountry() {
 
 // src/use-address-validation.ts
 var import_react_query5 = require("@tanstack/react-query");
-var import_core7 = require("@unifold/core");
-var import_react_provider7 = require("@unifold/react-provider");
+var import_core8 = require("@unifold/core");
+var import_react_provider8 = require("@unifold/react-provider");
 function useAddressValidation(options) {
-  const { publishableKey } = (0, import_react_provider7.useUnifold)();
+  const { publishableKey } = (0, import_react_provider8.useUnifold)();
   const { recipientAddress, destination, enabled = true } = options;
   const hasCompleteDestination = !!destination?.chainType && !!destination?.chainId && !!destination?.tokenAddress;
   const shouldValidate = enabled && !!publishableKey && !!recipientAddress && hasCompleteDestination;
@@ -380,7 +598,7 @@ function useAddressValidation(options) {
       destination?.chainId,
       destination?.tokenAddress
     ],
-    queryFn: () => (0, import_core7.verifyRecipientAddress)(
+    queryFn: () => (0, import_core8.verifyRecipientAddress)(
       {
         chain_type: destination.chainType,
         chain_id: destination.chainId,
@@ -412,8 +630,26 @@ function useAddressValidation(options) {
   };
 }
 
+// src/use-fiat-currencies.ts
+var import_react_query6 = require("@tanstack/react-query");
+var import_core9 = require("@unifold/core");
+var import_react_provider9 = require("@unifold/react-provider");
+function useFiatCurrencies(options = {}) {
+  const { publishableKey } = (0, import_react_provider9.useUnifold)();
+  const { enabled = true } = options;
+  return (0, import_react_query6.useQuery)({
+    queryKey: ["unifold", "fiatCurrencies", publishableKey],
+    queryFn: () => (0, import_core9.getFiatCurrencies)(publishableKey),
+    enabled: enabled && !!publishableKey,
+    staleTime: 1e3 * 60 * 5,
+    gcTime: 1e3 * 60 * 30,
+    refetchOnMount: false,
+    refetchOnWindowFocus: false
+  });
+}
+
 // src/index.ts
-var import_core8 = require("@unifold/core");
+var import_core10 = require("@unifold/core");
 // Annotate the CommonJS export names for ESM import in node:
 0 && (module.exports = {
   ActionType,
@@ -421,6 +657,9 @@ var import_core8 = require("@unifold/core");
   DepositSessionEventType,
   DepositSessionWaitError,
   ExecutionStatus,
+  OnrampSession,
+  OnrampSessionEventType,
+  OnrampSessionWaitError,
   UnifoldClient,
   UnifoldProvider,
   createUnifoldClient,
@@ -429,6 +668,8 @@ var import_core8 = require("@unifold/core");
   useDeposit,
   useDepositAddresses,
   useExecutions,
+  useFiatCurrencies,
+  useOnramp,
   useSupportedDepositTokens,
   useUnifold,
   useUnifoldClient