@unifold/ui-react 0.1.46 → 0.1.47

package/dist/index.d.mts

@@ -1,5 +1,5 @@
 import * as react_jsx_runtime from 'react/jsx-runtime';
-import { AutoSwapResponse, ChainType, Wallet, FiatCurrency, ExecutionStatus, FeaturedToken, PaymentNetwork, DestinationToken, DestinationTokenChain, PaymentIntent, DepositQuote, SupportedDestinationTokensResponse, VerifyAddressResponse } from '@unifold/core';
+import { AutoSwapResponse, ChainType, DepositEvent, Wallet, FiatCurrency, ExecutionStatus, FeaturedToken, PaymentNetwork, DestinationToken, DestinationTokenChain, PaymentIntent, DepositQuote, SupportedDestinationTokensResponse, VerifyAddressResponse } from '@unifold/core';
 export { ChainType } from '@unifold/core';
 import * as _tanstack_react_query from '@tanstack/react-query';
 import * as class_variance_authority_types from 'class-variance-authority/types';
@@ -192,6 +192,7 @@ interface DepositModalProps {
         transaction?: unknown;
         executionId?: string;
     }) => void;
+    onEvent?: (event: DepositEvent) => void;
     onDepositError?: (error: {
         message: string;
         error?: unknown;
@@ -203,7 +204,7 @@ interface DepositModalProps {
     /** First screen when the modal opens. Default `main` (deposit menu). */
     initialScreen?: DepositModalInitialScreen;
 }
-declare function DepositModal({ open, onOpenChange, userId, publishableKey, modalTitle, destinationTokenSymbol, recipientAddress, destinationChainType, destinationChainId, destinationTokenAddress, defaultSourceChainType, defaultSourceChainId, defaultSourceTokenAddress, defaultSourceSymbol, hideDepositTracker, showBalanceHeader, transferInputVariant, depositConfirmationMode, enableConnectWallet, browserWalletAmountQuickSelect, enablePayWithExchange, hideDepositFlowInfo, hideDisplayDescription, onDepositSuccess, onDepositError, theme, hideOverlay, initialScreen, transferCryptoTitle, depositWithCardTitle, payWithExchangeTitle, depositTrackerTitle, depositTrackerSubTitle, }: DepositModalProps): react_jsx_runtime.JSX.Element;
+declare function DepositModal({ open, onOpenChange, userId, publishableKey, modalTitle, destinationTokenSymbol, recipientAddress, destinationChainType, destinationChainId, destinationTokenAddress, defaultSourceChainType, defaultSourceChainId, defaultSourceTokenAddress, defaultSourceSymbol, hideDepositTracker, showBalanceHeader, transferInputVariant, depositConfirmationMode, enableConnectWallet, browserWalletAmountQuickSelect, enablePayWithExchange, hideDepositFlowInfo, hideDisplayDescription, onDepositSuccess, onDepositError, onEvent, theme, hideOverlay, initialScreen, transferCryptoTitle, depositWithCardTitle, payWithExchangeTitle, depositTrackerTitle, depositTrackerSubTitle, }: DepositModalProps): react_jsx_runtime.JSX.Element;
 
 interface DepositHeaderProps {
     title: string;
@@ -324,6 +325,7 @@ interface BuyWithCardProps {
         transaction?: unknown;
         executionId?: string;
     }) => void;
+    onEvent?: (event: DepositEvent) => void;
     onDepositError?: (error: {
         message: string;
         error?: unknown;
@@ -338,7 +340,7 @@ interface BuyWithCardProps {
     hideDisplayDescription?: boolean;
 }
 declare function BuyWithCard({ userId, publishableKey, view: externalView, onViewChange, maxAmountUsd, accentColor, // Keep prop for backward compatibility but don't use default
-destinationTokenSymbol, recipientAddress, destinationChainType, destinationChainId, destinationTokenAddress, onDepositSuccess, onDepositError, themeClass, wallets: externalWallets, assetCdnUrl, hideDepositFlowInfo, hideDisplayDescription, }: BuyWithCardProps): react_jsx_runtime.JSX.Element;
+destinationTokenSymbol, recipientAddress, destinationChainType, destinationChainId, destinationTokenAddress, onDepositSuccess, onDepositError, onEvent, themeClass, wallets: externalWallets, assetCdnUrl, hideDepositFlowInfo, hideDisplayDescription, }: BuyWithCardProps): react_jsx_runtime.JSX.Element;
 
 interface CurrencyModalProps {
     open: boolean;
@@ -465,6 +467,18 @@ interface CheckoutModalProps {
     modalTitle?: string;
     /** Enable browser wallet connection option. Defaults to false */
     enableConnectWallet?: boolean;
+    /**
+     * Pre-select source token/chain in the Transfer Crypto view.
+     * All four props are optional. To match, provide `chainType` + `chainId` + (`symbol` OR `tokenAddress`).
+     * If omitted or no match is found in `/supported_deposit_tokens`, the first available token and chain are used.
+     */
+    defaultSourceChainType?: ChainType;
+    /** Source chain ID (e.g. `"mainnet"`, `"137"`). Must be paired with `defaultSourceChainType` + symbol or token address. */
+    defaultSourceChainId?: string;
+    /** Source token contract address. Must be paired with `defaultSourceChainType` + `defaultSourceChainId`. */
+    defaultSourceTokenAddress?: string;
+    /** Source token symbol (e.g. `"USDC"`). Must be paired with `defaultSourceChainType` + `defaultSourceChainId`. */
+    defaultSourceSymbol?: string;
     theme?: "light" | "dark" | "auto";
     onCheckoutSuccess?: (data: {
         paymentIntentId: string;
@@ -476,7 +490,7 @@ interface CheckoutModalProps {
         code?: string;
     }) => void;
 }
-declare function CheckoutModal({ open, onOpenChange, clientSecret, publishableKey, modalTitle, enableConnectWallet, theme, onCheckoutSuccess, onCheckoutError, }: CheckoutModalProps): react_jsx_runtime.JSX.Element;
+declare function CheckoutModal({ open, onOpenChange, clientSecret, publishableKey, modalTitle, enableConnectWallet, defaultSourceChainType, defaultSourceChainId, defaultSourceTokenAddress, defaultSourceSymbol, theme, onCheckoutSuccess, onCheckoutError, }: CheckoutModalProps): react_jsx_runtime.JSX.Element;
 
 interface WithdrawTransactionInfo {
     /** Source (sending) chain type */

package/dist/index.d.ts

@@ -1,5 +1,5 @@
 import * as react_jsx_runtime from 'react/jsx-runtime';
-import { AutoSwapResponse, ChainType, Wallet, FiatCurrency, ExecutionStatus, FeaturedToken, PaymentNetwork, DestinationToken, DestinationTokenChain, PaymentIntent, DepositQuote, SupportedDestinationTokensResponse, VerifyAddressResponse } from '@unifold/core';
+import { AutoSwapResponse, ChainType, DepositEvent, Wallet, FiatCurrency, ExecutionStatus, FeaturedToken, PaymentNetwork, DestinationToken, DestinationTokenChain, PaymentIntent, DepositQuote, SupportedDestinationTokensResponse, VerifyAddressResponse } from '@unifold/core';
 export { ChainType } from '@unifold/core';
 import * as _tanstack_react_query from '@tanstack/react-query';
 import * as class_variance_authority_types from 'class-variance-authority/types';
@@ -192,6 +192,7 @@ interface DepositModalProps {
         transaction?: unknown;
         executionId?: string;
     }) => void;
+    onEvent?: (event: DepositEvent) => void;
     onDepositError?: (error: {
         message: string;
         error?: unknown;
@@ -203,7 +204,7 @@ interface DepositModalProps {
     /** First screen when the modal opens. Default `main` (deposit menu). */
     initialScreen?: DepositModalInitialScreen;
 }
-declare function DepositModal({ open, onOpenChange, userId, publishableKey, modalTitle, destinationTokenSymbol, recipientAddress, destinationChainType, destinationChainId, destinationTokenAddress, defaultSourceChainType, defaultSourceChainId, defaultSourceTokenAddress, defaultSourceSymbol, hideDepositTracker, showBalanceHeader, transferInputVariant, depositConfirmationMode, enableConnectWallet, browserWalletAmountQuickSelect, enablePayWithExchange, hideDepositFlowInfo, hideDisplayDescription, onDepositSuccess, onDepositError, theme, hideOverlay, initialScreen, transferCryptoTitle, depositWithCardTitle, payWithExchangeTitle, depositTrackerTitle, depositTrackerSubTitle, }: DepositModalProps): react_jsx_runtime.JSX.Element;
+declare function DepositModal({ open, onOpenChange, userId, publishableKey, modalTitle, destinationTokenSymbol, recipientAddress, destinationChainType, destinationChainId, destinationTokenAddress, defaultSourceChainType, defaultSourceChainId, defaultSourceTokenAddress, defaultSourceSymbol, hideDepositTracker, showBalanceHeader, transferInputVariant, depositConfirmationMode, enableConnectWallet, browserWalletAmountQuickSelect, enablePayWithExchange, hideDepositFlowInfo, hideDisplayDescription, onDepositSuccess, onDepositError, onEvent, theme, hideOverlay, initialScreen, transferCryptoTitle, depositWithCardTitle, payWithExchangeTitle, depositTrackerTitle, depositTrackerSubTitle, }: DepositModalProps): react_jsx_runtime.JSX.Element;
 
 interface DepositHeaderProps {
     title: string;
@@ -324,6 +325,7 @@ interface BuyWithCardProps {
         transaction?: unknown;
         executionId?: string;
     }) => void;
+    onEvent?: (event: DepositEvent) => void;
     onDepositError?: (error: {
         message: string;
         error?: unknown;
@@ -338,7 +340,7 @@ interface BuyWithCardProps {
     hideDisplayDescription?: boolean;
 }
 declare function BuyWithCard({ userId, publishableKey, view: externalView, onViewChange, maxAmountUsd, accentColor, // Keep prop for backward compatibility but don't use default
-destinationTokenSymbol, recipientAddress, destinationChainType, destinationChainId, destinationTokenAddress, onDepositSuccess, onDepositError, themeClass, wallets: externalWallets, assetCdnUrl, hideDepositFlowInfo, hideDisplayDescription, }: BuyWithCardProps): react_jsx_runtime.JSX.Element;
+destinationTokenSymbol, recipientAddress, destinationChainType, destinationChainId, destinationTokenAddress, onDepositSuccess, onDepositError, onEvent, themeClass, wallets: externalWallets, assetCdnUrl, hideDepositFlowInfo, hideDisplayDescription, }: BuyWithCardProps): react_jsx_runtime.JSX.Element;
 
 interface CurrencyModalProps {
     open: boolean;
@@ -465,6 +467,18 @@ interface CheckoutModalProps {
     modalTitle?: string;
     /** Enable browser wallet connection option. Defaults to false */
     enableConnectWallet?: boolean;
+    /**
+     * Pre-select source token/chain in the Transfer Crypto view.
+     * All four props are optional. To match, provide `chainType` + `chainId` + (`symbol` OR `tokenAddress`).
+     * If omitted or no match is found in `/supported_deposit_tokens`, the first available token and chain are used.
+     */
+    defaultSourceChainType?: ChainType;
+    /** Source chain ID (e.g. `"mainnet"`, `"137"`). Must be paired with `defaultSourceChainType` + symbol or token address. */
+    defaultSourceChainId?: string;
+    /** Source token contract address. Must be paired with `defaultSourceChainType` + `defaultSourceChainId`. */
+    defaultSourceTokenAddress?: string;
+    /** Source token symbol (e.g. `"USDC"`). Must be paired with `defaultSourceChainType` + `defaultSourceChainId`. */
+    defaultSourceSymbol?: string;
     theme?: "light" | "dark" | "auto";
     onCheckoutSuccess?: (data: {
         paymentIntentId: string;
@@ -476,7 +490,7 @@ interface CheckoutModalProps {
         code?: string;
     }) => void;
 }
-declare function CheckoutModal({ open, onOpenChange, clientSecret, publishableKey, modalTitle, enableConnectWallet, theme, onCheckoutSuccess, onCheckoutError, }: CheckoutModalProps): react_jsx_runtime.JSX.Element;
+declare function CheckoutModal({ open, onOpenChange, clientSecret, publishableKey, modalTitle, enableConnectWallet, defaultSourceChainType, defaultSourceChainId, defaultSourceTokenAddress, defaultSourceSymbol, theme, onCheckoutSuccess, onCheckoutError, }: CheckoutModalProps): react_jsx_runtime.JSX.Element;
 
 interface WithdrawTransactionInfo {
     /** Source (sending) chain type */

package/dist/index.js

@@ -2496,6 +2496,7 @@ function BuyWithCard({
   destinationTokenAddress,
   onDepositSuccess,
   onDepositError,
+  onEvent,
   themeClass = "",
   wallets: externalWallets,
   assetCdnUrl,
@@ -2849,6 +2850,7 @@ function BuyWithCard({
       setQuotesError("Wallet address not available");
       return;
     }
+    const externalId = (0, import_core9.generatePrefixedKSUID)("orsext");
     const sessionRequest = {
       service_provider: selectedProvider.service_provider,
       country_code: selectedProvider.country_code.toUpperCase() || "US",
@@ -2857,7 +2859,8 @@ function BuyWithCard({
       destination_currency: selectedProvider.destination_currency,
       destination_network: selectedProvider.destination_network,
       wallet_address: wallet.address,
-      subdivision_code: userIpInfo?.state || void 0
+      subdivision_code: userIpInfo?.state || void 0,
+      external_id: externalId
     };
     const sessionStartUrl = (0, import_core9.getOnrampSessionStartUrl)(
       sessionRequest,
@@ -2867,7 +2870,14 @@ function BuyWithCard({
       provider: selectedProvider,
       sourceCurrency: currency,
       sourceAmount: amount,
-      sessionUrl: sessionStartUrl
+      sessionUrl: sessionStartUrl,
+      externalId
+    });
+    onEvent?.({
+      id: (0, import_core9.generatePrefixedKSUID)("sevt"),
+      type: import_core9.DepositEventType.ONRAMP_SESSION_CREATED,
+      created: Math.floor(Date.now() / 1e3),
+      data: { object: { externalId } }
     });
     window.open(sessionStartUrl, "_blank");
     handleViewChange("onramp");
@@ -11888,6 +11898,7 @@ function DepositModal({
   hideDisplayDescription = false,
   onDepositSuccess,
   onDepositError,
+  onEvent,
   theme = "dark",
   hideOverlay = false,
   initialScreen = "main",
@@ -12402,6 +12413,7 @@ function DepositModal({
                     destinationTokenAddress,
                     onDepositSuccess,
                     onDepositError,
+                    onEvent,
                     themeClass,
                     wallets,
                     assetCdnUrl: projectConfig?.asset_cdn_url,
@@ -12600,6 +12612,10 @@ function CheckoutModal({
   publishableKey,
   modalTitle,
   enableConnectWallet = false,
+  defaultSourceChainType,
+  defaultSourceChainId,
+  defaultSourceTokenAddress,
+  defaultSourceSymbol,
   theme = "dark",
   onCheckoutSuccess,
   onCheckoutError
@@ -13097,6 +13113,10 @@ function CheckoutModal({
                   destinationChainType: paymentIntent.destination_chain_type,
                   destinationChainId: paymentIntent.destination_chain_id,
                   destinationTokenAddress: paymentIntent.destination_token_address,
+                  defaultSourceChainType,
+                  defaultSourceChainId,
+                  defaultSourceTokenAddress,
+                  defaultSourceSymbol,
                   depositConfirmationMode: "auto_ui",
                   wallets,
                   onSourceTokenChange: setSelectedSource,

package/dist/index.mjs

@@ -605,7 +605,9 @@ import {
   getTokenMetadata,
   getIconUrlWithCdn,
   getPreferredIconUrl as getPreferredIconUrl2,
-  getDefaultOnrampToken
+  getDefaultOnrampToken,
+  generatePrefixedKSUID,
+  DepositEventType
 } from "@unifold/core";
 
 // src/hooks/use-deposit-address.ts
@@ -2418,6 +2420,7 @@ function BuyWithCard({
   destinationTokenAddress,
   onDepositSuccess,
   onDepositError,
+  onEvent,
   themeClass = "",
   wallets: externalWallets,
   assetCdnUrl,
@@ -2771,6 +2774,7 @@ function BuyWithCard({
       setQuotesError("Wallet address not available");
       return;
     }
+    const externalId = generatePrefixedKSUID("orsext");
     const sessionRequest = {
       service_provider: selectedProvider.service_provider,
       country_code: selectedProvider.country_code.toUpperCase() || "US",
@@ -2779,7 +2783,8 @@ function BuyWithCard({
       destination_currency: selectedProvider.destination_currency,
       destination_network: selectedProvider.destination_network,
       wallet_address: wallet.address,
-      subdivision_code: userIpInfo?.state || void 0
+      subdivision_code: userIpInfo?.state || void 0,
+      external_id: externalId
     };
     const sessionStartUrl = getOnrampSessionStartUrl(
       sessionRequest,
@@ -2789,7 +2794,14 @@ function BuyWithCard({
       provider: selectedProvider,
       sourceCurrency: currency,
       sourceAmount: amount,
-      sessionUrl: sessionStartUrl
+      sessionUrl: sessionStartUrl,
+      externalId
+    });
+    onEvent?.({
+      id: generatePrefixedKSUID("sevt"),
+      type: DepositEventType.ONRAMP_SESSION_CREATED,
+      created: Math.floor(Date.now() / 1e3),
+      data: { object: { externalId } }
     });
     window.open(sessionStartUrl, "_blank");
     handleViewChange("onramp");
@@ -11858,6 +11870,7 @@ function DepositModal({
   hideDisplayDescription = false,
   onDepositSuccess,
   onDepositError,
+  onEvent,
   theme = "dark",
   hideOverlay = false,
   initialScreen = "main",
@@ -12372,6 +12385,7 @@ function DepositModal({
                     destinationTokenAddress,
                     onDepositSuccess,
                     onDepositError,
+                    onEvent,
                     themeClass,
                     wallets,
                     assetCdnUrl: projectConfig?.asset_cdn_url,
@@ -12579,6 +12593,10 @@ function CheckoutModal({
   publishableKey,
   modalTitle,
   enableConnectWallet = false,
+  defaultSourceChainType,
+  defaultSourceChainId,
+  defaultSourceTokenAddress,
+  defaultSourceSymbol,
   theme = "dark",
   onCheckoutSuccess,
   onCheckoutError
@@ -13076,6 +13094,10 @@ function CheckoutModal({
                   destinationChainType: paymentIntent.destination_chain_type,
                   destinationChainId: paymentIntent.destination_chain_id,
                   destinationTokenAddress: paymentIntent.destination_token_address,
+                  defaultSourceChainType,
+                  defaultSourceChainId,
+                  defaultSourceTokenAddress,
+                  defaultSourceSymbol,
                   depositConfirmationMode: "auto_ui",
                   wallets,
                   onSourceTokenChange: setSelectedSource,

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@unifold/ui-react",
-  "version": "0.1.46",
+  "version": "0.1.47",
   "description": "Unifold UI React - Deposit and onramp components for React applications",
   "main": "./dist/index.js",
   "module": "./dist/index.mjs",
@@ -43,7 +43,7 @@
     "lucide-react": "^0.454.0",
     "qr-code-styling": "^1.6.0-rc.1",
     "tailwind-merge": "^2.0.0",
-    "@unifold/core": "0.1.46"
+    "@unifold/core": "0.1.47"
   },
   "devDependencies": {
     "@solana/spl-token": "^0.3.8",