@unifold/ui-react 0.1.35 → 0.1.36

package/dist/index.d.mts

@@ -45,6 +45,7 @@ interface UseDepositPollingResult {
 }
 declare function useDepositPolling({ userId, publishableKey, depositConfirmationMode, depositWalletId, enabled, onDepositSuccess, onDepositError, }: UseDepositPollingOptions): UseDepositPollingResult;
 
+type DepositModalInitialScreen = "main" | "transfer" | "card" | "tracker";
 interface DepositModalProps {
     open: boolean;
     onOpenChange: (open: boolean) => void;
@@ -84,8 +85,10 @@ interface DepositModalProps {
     theme?: "light" | "dark" | "auto";
     /** Hide the dialog overlay and close button for inline/embedded mode */
     hideOverlay?: boolean;
+    /** 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, hideDepositTracker, showBalanceHeader, transferInputVariant, depositConfirmationMode, enableConnectWallet, enablePayWithExchange, onDepositSuccess, onDepositError, theme, hideOverlay, }: DepositModalProps): react_jsx_runtime.JSX.Element;
+declare function DepositModal({ open, onOpenChange, userId, publishableKey, modalTitle, destinationTokenSymbol, recipientAddress, destinationChainType, destinationChainId, destinationTokenAddress, hideDepositTracker, showBalanceHeader, transferInputVariant, depositConfirmationMode, enableConnectWallet, enablePayWithExchange, onDepositSuccess, onDepositError, theme, hideOverlay, initialScreen, }: DepositModalProps): react_jsx_runtime.JSX.Element;
 
 interface DepositHeaderProps {
     title: string;
@@ -717,4 +720,4 @@ declare function cn(...inputs: ClassValue[]): string;
  */
 declare function truncateAddress(address: string, startChars?: number, endChars?: number): string;
 
-export { type AllowedCountryResult, Button, type ButtonProps, type ButtonTokens, BuyWithCard, type CardTokens, type ComponentConfig, type ComponentOverrides, type ComponentTokens, type ContainerTokens, CurrencyListItem, CurrencyListSection, CurrencyModal, type CustomThemeColors, type DepositConfirmationMode, DepositDetailContent, DepositExecutionItem, DepositHeader, DepositModal, DepositPollingUi, DepositSuccessToast, DepositTrackerButton, DepositWithCardButton, DepositsModal, Dialog, DialogClose, DialogContent, DialogDescription, DialogFooter, DialogHeader, DialogOverlay, DialogPortal, DialogTitle, DialogTrigger, type FontConfig, type HeaderTokens, type InputTokens, type ListTokens, type ResolvedFonts, type SearchTokens, Select, SelectContent, SelectGroup, SelectItem, SelectLabel, SelectScrollDownButton, SelectScrollUpButton, SelectSeparator, SelectTrigger, SelectValue, StyledQRCode, type ThemeColors, type ThemeConfig, type ThemeMode, ThemeProvider, type ThemeProviderProps, Tooltip, TooltipContent, TooltipProvider, TooltipTrigger, TransferCryptoButton, TransferCryptoDoubleInput, TransferCryptoSingleInput, buttonVariants, cn, colors, defaultColors, getColors, mergeColors, resolveComponentTokens, truncateAddress, useAllowedCountry, useDepositPolling, useTheme };
+export { type AllowedCountryResult, Button, type ButtonProps, type ButtonTokens, BuyWithCard, type CardTokens, type ComponentConfig, type ComponentOverrides, type ComponentTokens, type ContainerTokens, CurrencyListItem, CurrencyListSection, CurrencyModal, type CustomThemeColors, type DepositConfirmationMode, DepositDetailContent, DepositExecutionItem, DepositHeader, DepositModal, type DepositModalInitialScreen, DepositPollingUi, DepositSuccessToast, DepositTrackerButton, DepositWithCardButton, DepositsModal, Dialog, DialogClose, DialogContent, DialogDescription, DialogFooter, DialogHeader, DialogOverlay, DialogPortal, DialogTitle, DialogTrigger, type FontConfig, type HeaderTokens, type InputTokens, type ListTokens, type ResolvedFonts, type SearchTokens, Select, SelectContent, SelectGroup, SelectItem, SelectLabel, SelectScrollDownButton, SelectScrollUpButton, SelectSeparator, SelectTrigger, SelectValue, StyledQRCode, type ThemeColors, type ThemeConfig, type ThemeMode, ThemeProvider, type ThemeProviderProps, Tooltip, TooltipContent, TooltipProvider, TooltipTrigger, TransferCryptoButton, TransferCryptoDoubleInput, TransferCryptoSingleInput, buttonVariants, cn, colors, defaultColors, getColors, mergeColors, resolveComponentTokens, truncateAddress, useAllowedCountry, useDepositPolling, useTheme };

package/dist/index.d.ts

@@ -45,6 +45,7 @@ interface UseDepositPollingResult {
 }
 declare function useDepositPolling({ userId, publishableKey, depositConfirmationMode, depositWalletId, enabled, onDepositSuccess, onDepositError, }: UseDepositPollingOptions): UseDepositPollingResult;
 
+type DepositModalInitialScreen = "main" | "transfer" | "card" | "tracker";
 interface DepositModalProps {
     open: boolean;
     onOpenChange: (open: boolean) => void;
@@ -84,8 +85,10 @@ interface DepositModalProps {
     theme?: "light" | "dark" | "auto";
     /** Hide the dialog overlay and close button for inline/embedded mode */
     hideOverlay?: boolean;
+    /** 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, hideDepositTracker, showBalanceHeader, transferInputVariant, depositConfirmationMode, enableConnectWallet, enablePayWithExchange, onDepositSuccess, onDepositError, theme, hideOverlay, }: DepositModalProps): react_jsx_runtime.JSX.Element;
+declare function DepositModal({ open, onOpenChange, userId, publishableKey, modalTitle, destinationTokenSymbol, recipientAddress, destinationChainType, destinationChainId, destinationTokenAddress, hideDepositTracker, showBalanceHeader, transferInputVariant, depositConfirmationMode, enableConnectWallet, enablePayWithExchange, onDepositSuccess, onDepositError, theme, hideOverlay, initialScreen, }: DepositModalProps): react_jsx_runtime.JSX.Element;
 
 interface DepositHeaderProps {
     title: string;
@@ -717,4 +720,4 @@ declare function cn(...inputs: ClassValue[]): string;
  */
 declare function truncateAddress(address: string, startChars?: number, endChars?: number): string;
 
-export { type AllowedCountryResult, Button, type ButtonProps, type ButtonTokens, BuyWithCard, type CardTokens, type ComponentConfig, type ComponentOverrides, type ComponentTokens, type ContainerTokens, CurrencyListItem, CurrencyListSection, CurrencyModal, type CustomThemeColors, type DepositConfirmationMode, DepositDetailContent, DepositExecutionItem, DepositHeader, DepositModal, DepositPollingUi, DepositSuccessToast, DepositTrackerButton, DepositWithCardButton, DepositsModal, Dialog, DialogClose, DialogContent, DialogDescription, DialogFooter, DialogHeader, DialogOverlay, DialogPortal, DialogTitle, DialogTrigger, type FontConfig, type HeaderTokens, type InputTokens, type ListTokens, type ResolvedFonts, type SearchTokens, Select, SelectContent, SelectGroup, SelectItem, SelectLabel, SelectScrollDownButton, SelectScrollUpButton, SelectSeparator, SelectTrigger, SelectValue, StyledQRCode, type ThemeColors, type ThemeConfig, type ThemeMode, ThemeProvider, type ThemeProviderProps, Tooltip, TooltipContent, TooltipProvider, TooltipTrigger, TransferCryptoButton, TransferCryptoDoubleInput, TransferCryptoSingleInput, buttonVariants, cn, colors, defaultColors, getColors, mergeColors, resolveComponentTokens, truncateAddress, useAllowedCountry, useDepositPolling, useTheme };
+export { type AllowedCountryResult, Button, type ButtonProps, type ButtonTokens, BuyWithCard, type CardTokens, type ComponentConfig, type ComponentOverrides, type ComponentTokens, type ContainerTokens, CurrencyListItem, CurrencyListSection, CurrencyModal, type CustomThemeColors, type DepositConfirmationMode, DepositDetailContent, DepositExecutionItem, DepositHeader, DepositModal, type DepositModalInitialScreen, DepositPollingUi, DepositSuccessToast, DepositTrackerButton, DepositWithCardButton, DepositsModal, Dialog, DialogClose, DialogContent, DialogDescription, DialogFooter, DialogHeader, DialogOverlay, DialogPortal, DialogTitle, DialogTrigger, type FontConfig, type HeaderTokens, type InputTokens, type ListTokens, type ResolvedFonts, type SearchTokens, Select, SelectContent, SelectGroup, SelectItem, SelectLabel, SelectScrollDownButton, SelectScrollUpButton, SelectSeparator, SelectTrigger, SelectValue, StyledQRCode, type ThemeColors, type ThemeConfig, type ThemeMode, ThemeProvider, type ThemeProviderProps, Tooltip, TooltipContent, TooltipProvider, TooltipTrigger, TransferCryptoButton, TransferCryptoDoubleInput, TransferCryptoSingleInput, buttonVariants, cn, colors, defaultColors, getColors, mergeColors, resolveComponentTokens, truncateAddress, useAllowedCountry, useDepositPolling, useTheme };

package/dist/index.js

@@ -10889,14 +10889,23 @@ function DepositModal({
   onDepositSuccess,
   onDepositError,
   theme = "dark",
-  hideOverlay = false
+  hideOverlay = false,
+  initialScreen = "main"
 }) {
   const { colors: colors2, fonts, components } = useTheme();
+  const effectiveInitialScreen = (0, import_react16.useMemo)(() => {
+    const s = initialScreen ?? "main";
+    if (s === "tracker" && hideDepositTracker) return "main";
+    return s;
+  }, [initialScreen, hideDepositTracker]);
   const [containerEl, setContainerEl] = (0, import_react16.useState)(null);
   const containerCallbackRef = (0, import_react16.useCallback)((el) => {
     setContainerEl(el);
   }, []);
-  const [view, setView] = (0, import_react16.useState)("main");
+  const [view, setView] = (0, import_react16.useState)(
+    effectiveInitialScreen
+  );
+  const resetViewTimeoutRef = (0, import_react16.useRef)(null);
   const [cardView, setCardView] = (0, import_react16.useState)(
     "amount"
   );
@@ -11016,6 +11025,43 @@ function DepositModal({
     const template = errors[code] ?? addressValidationMessages.defaultError;
     return interpolate(template, metadata);
   };
+  const openingScreen = effectiveInitialScreen;
+  const sessionOpenedFromMenu = openingScreen === "main";
+  const standaloneNeedsDepositPrereq = openingScreen !== "main" && (view === "transfer" || view === "card");
+  let depositPrerequisiteBody;
+  if (isCountryLoading || isAddressValidationLoading || tokensLoading || walletsLoading || !projectConfig) {
+    depositPrerequisiteBody = standaloneNeedsDepositPrereq ? /* @__PURE__ */ (0, import_jsx_runtime48.jsx)(SkeletonButton, { variant: "with-icons" }) : /* @__PURE__ */ (0, import_jsx_runtime48.jsxs)(import_jsx_runtime48.Fragment, { children: [
+      /* @__PURE__ */ (0, import_jsx_runtime48.jsx)(SkeletonButton, { variant: "with-icons" }),
+      /* @__PURE__ */ (0, import_jsx_runtime48.jsx)(SkeletonButton, { variant: "with-icons" }),
+      !hideDepositTracker && /* @__PURE__ */ (0, import_jsx_runtime48.jsx)(SkeletonButton, {})
+    ] });
+  } else if (countryError) {
+    depositPrerequisiteBody = /* @__PURE__ */ (0, import_jsx_runtime48.jsxs)("div", { className: "uf-flex uf-flex-col uf-items-center uf-justify-center uf-py-8 uf-px-4 uf-text-center", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime48.jsx)("div", { className: "uf-w-16 uf-h-16 uf-rounded-full uf-bg-muted uf-flex uf-items-center uf-justify-center uf-mb-4", children: /* @__PURE__ */ (0, import_jsx_runtime48.jsx)(import_lucide_react23.AlertTriangle, { className: "uf-w-8 uf-h-8 uf-text-muted-foreground" }) }),
+      /* @__PURE__ */ (0, import_jsx_runtime48.jsx)("h3", { className: "uf-text-lg uf-font-semibold uf-text-foreground uf-mb-2", children: "Unable to Verify Location" }),
+      /* @__PURE__ */ (0, import_jsx_runtime48.jsx)("p", { className: "uf-text-sm uf-text-muted-foreground uf-max-w-[280px]", children: "We couldn't verify your location. Please check your connection and try again." })
+    ] });
+  } else if (!isAllowed) {
+    depositPrerequisiteBody = /* @__PURE__ */ (0, import_jsx_runtime48.jsxs)("div", { className: "uf-flex uf-flex-col uf-items-center uf-justify-center uf-py-8 uf-px-4 uf-text-center", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime48.jsx)("div", { className: "uf-w-16 uf-h-16 uf-rounded-full uf-bg-muted uf-flex uf-items-center uf-justify-center uf-mb-4", children: /* @__PURE__ */ (0, import_jsx_runtime48.jsx)(import_lucide_react23.MapPinOff, { className: "uf-w-8 uf-h-8 uf-text-muted-foreground" }) }),
+      /* @__PURE__ */ (0, import_jsx_runtime48.jsx)("h3", { className: "uf-text-lg uf-font-semibold uf-text-foreground uf-mb-2", children: "No Tokens Available" }),
+      /* @__PURE__ */ (0, import_jsx_runtime48.jsx)("p", { className: "uf-text-sm uf-text-muted-foreground uf-max-w-[280px]", children: "There are no supported tokens available from your current location." })
+    ] });
+  } else if (isAddressValid === false) {
+    depositPrerequisiteBody = /* @__PURE__ */ (0, import_jsx_runtime48.jsxs)("div", { className: "uf-flex uf-flex-col uf-items-center uf-justify-center uf-py-8 uf-px-4 uf-text-center", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime48.jsx)("div", { className: "uf-w-16 uf-h-16 uf-rounded-full uf-bg-muted uf-flex uf-items-center uf-justify-center uf-mb-4", children: /* @__PURE__ */ (0, import_jsx_runtime48.jsx)(import_lucide_react23.AlertTriangle, { className: "uf-w-8 uf-h-8 uf-text-muted-foreground" }) }),
+      /* @__PURE__ */ (0, import_jsx_runtime48.jsx)("h3", { className: "uf-text-lg uf-font-semibold uf-text-foreground uf-mb-2", children: addressValidationMessages.unableToReceiveFunds }),
+      /* @__PURE__ */ (0, import_jsx_runtime48.jsx)("p", { className: "uf-text-sm uf-text-muted-foreground uf-max-w-[280px]", children: getAddressValidationErrorMessage(
+        addressFailureCode,
+        addressFailureMetadata
+      ) })
+    ] });
+  } else {
+    depositPrerequisiteBody = null;
+  }
+  const showBackTransfer = sessionOpenedFromMenu;
+  const showBackCard = cardView !== "amount" || sessionOpenedFromMenu;
+  const showBackTracker = selectedExecution !== null || sessionOpenedFromMenu;
   const themeClass = resolvedTheme === "dark" ? "uf-dark" : "";
   const handleWalletDisconnect = () => {
     setUserDisconnectedWallet(true);
@@ -11026,13 +11072,37 @@ function DepositModal({
   };
   const handleClose = () => {
     onOpenChange(false);
-    setTimeout(() => {
-      setView("main");
+    if (resetViewTimeoutRef.current) {
+      clearTimeout(resetViewTimeoutRef.current);
+    }
+    resetViewTimeoutRef.current = setTimeout(() => {
+      setView(effectiveInitialScreen);
       setCardView("amount");
       setExchangeView("providers");
       setBrowserWalletInfo(null);
+      resetViewTimeoutRef.current = null;
     }, 200);
   };
+  (0, import_react16.useLayoutEffect)(() => {
+    if (!open) return;
+    if (resetViewTimeoutRef.current) {
+      clearTimeout(resetViewTimeoutRef.current);
+      resetViewTimeoutRef.current = null;
+    }
+    setView(effectiveInitialScreen);
+    setCardView("amount");
+    setExchangeView("providers");
+    setBrowserWalletInfo(null);
+    setSelectedExecution(null);
+  }, [open, effectiveInitialScreen]);
+  (0, import_react16.useEffect)(
+    () => () => {
+      if (resetViewTimeoutRef.current) {
+        clearTimeout(resetViewTimeoutRef.current);
+      }
+    },
+    []
+  );
   const handleBack = () => {
     if (view === "card" && cardView === "quotes") {
       setCardView("amount");
@@ -11145,95 +11215,64 @@ function DepositModal({
                   publishableKey
                 }
               ),
-              /* @__PURE__ */ (0, import_jsx_runtime48.jsx)("div", { className: "uf-pb-4 uf-space-y-3", children: isCountryLoading || isAddressValidationLoading || tokensLoading || walletsLoading || !projectConfig ? /* @__PURE__ */ (0, import_jsx_runtime48.jsxs)(import_jsx_runtime48.Fragment, { children: [
-                /* @__PURE__ */ (0, import_jsx_runtime48.jsx)(SkeletonButton, { variant: "with-icons" }),
-                /* @__PURE__ */ (0, import_jsx_runtime48.jsx)(SkeletonButton, { variant: "with-icons" }),
-                !hideDepositTracker && /* @__PURE__ */ (0, import_jsx_runtime48.jsx)(SkeletonButton, {})
-              ] }) : countryError ? (
-                /* Error state - couldn't verify location */
-                /* @__PURE__ */ (0, import_jsx_runtime48.jsxs)("div", { className: "uf-flex uf-flex-col uf-items-center uf-justify-center uf-py-8 uf-px-4 uf-text-center", children: [
-                  /* @__PURE__ */ (0, import_jsx_runtime48.jsx)("div", { className: "uf-w-16 uf-h-16 uf-rounded-full uf-bg-muted uf-flex uf-items-center uf-justify-center uf-mb-4", children: /* @__PURE__ */ (0, import_jsx_runtime48.jsx)(import_lucide_react23.AlertTriangle, { className: "uf-w-8 uf-h-8 uf-text-muted-foreground" }) }),
-                  /* @__PURE__ */ (0, import_jsx_runtime48.jsx)("h3", { className: "uf-text-lg uf-font-semibold uf-text-foreground uf-mb-2", children: "Unable to Verify Location" }),
-                  /* @__PURE__ */ (0, import_jsx_runtime48.jsx)("p", { className: "uf-text-sm uf-text-muted-foreground uf-max-w-[280px]", children: "We couldn't verify your location. Please check your connection and try again." })
-                ] })
-              ) : !isAllowed ? (
-                /* Blocked country state (isAllowed is false or null without error) */
-                /* @__PURE__ */ (0, import_jsx_runtime48.jsxs)("div", { className: "uf-flex uf-flex-col uf-items-center uf-justify-center uf-py-8 uf-px-4 uf-text-center", children: [
-                  /* @__PURE__ */ (0, import_jsx_runtime48.jsx)("div", { className: "uf-w-16 uf-h-16 uf-rounded-full uf-bg-muted uf-flex uf-items-center uf-justify-center uf-mb-4", children: /* @__PURE__ */ (0, import_jsx_runtime48.jsx)(import_lucide_react23.MapPinOff, { className: "uf-w-8 uf-h-8 uf-text-muted-foreground" }) }),
-                  /* @__PURE__ */ (0, import_jsx_runtime48.jsx)("h3", { className: "uf-text-lg uf-font-semibold uf-text-foreground uf-mb-2", children: "No Tokens Available" }),
-                  /* @__PURE__ */ (0, import_jsx_runtime48.jsx)("p", { className: "uf-text-sm uf-text-muted-foreground uf-max-w-[280px]", children: "There are no supported tokens available from your current location." })
-                ] })
-              ) : isAddressValid === false ? (
-                /* Invalid recipient address state (e.g., Algorand not opted in) */
-                /* @__PURE__ */ (0, import_jsx_runtime48.jsxs)("div", { className: "uf-flex uf-flex-col uf-items-center uf-justify-center uf-py-8 uf-px-4 uf-text-center", children: [
-                  /* @__PURE__ */ (0, import_jsx_runtime48.jsx)("div", { className: "uf-w-16 uf-h-16 uf-rounded-full uf-bg-muted uf-flex uf-items-center uf-justify-center uf-mb-4", children: /* @__PURE__ */ (0, import_jsx_runtime48.jsx)(import_lucide_react23.AlertTriangle, { className: "uf-w-8 uf-h-8 uf-text-muted-foreground" }) }),
-                  /* @__PURE__ */ (0, import_jsx_runtime48.jsx)("h3", { className: "uf-text-lg uf-font-semibold uf-text-foreground uf-mb-2", children: addressValidationMessages.unableToReceiveFunds }),
-                  /* @__PURE__ */ (0, import_jsx_runtime48.jsx)("p", { className: "uf-text-sm uf-text-muted-foreground uf-max-w-[280px]", children: getAddressValidationErrorMessage(
-                    addressFailureCode,
-                    addressFailureMetadata
-                  ) })
-                ] })
-              ) : (
-                /* Normal deposit options */
-                /* @__PURE__ */ (0, import_jsx_runtime48.jsxs)(import_jsx_runtime48.Fragment, { children: [
-                  /* @__PURE__ */ (0, import_jsx_runtime48.jsx)(
-                    TransferCryptoButton,
-                    {
-                      onClick: () => setView("transfer"),
-                      title: t6.transferCrypto.title,
-                      subtitle: t6.transferCrypto.subtitle,
-                      featuredTokens: projectConfig.transfer_crypto.networks
-                    }
-                  ),
-                  enableConnectWallet && !isMobileView && /* @__PURE__ */ (0, import_jsx_runtime48.jsx)(
-                    BrowserWalletButton,
-                    {
-                      onClick: handleBrowserWalletClick,
-                      onConnectClick: handleWalletConnectClick,
-                      onDisconnect: handleWalletDisconnect,
-                      chainType: browserWalletChainType,
-                      publishableKey
-                    }
-                  ),
-                  /* @__PURE__ */ (0, import_jsx_runtime48.jsx)(
-                    DepositWithCardButton,
-                    {
-                      onClick: () => setView("card"),
-                      title: t6.depositWithCard.title,
-                      subtitle: t6.depositWithCard.subtitle,
-                      paymentNetworks: projectConfig.payment_networks.networks
-                    }
-                  ),
-                  showPayWithExchange && /* @__PURE__ */ (0, import_jsx_runtime48.jsx)(
-                    PayWithExchangeButton,
-                    {
-                      onClick: () => setView("exchange"),
-                      title: t6.payWithExchange.title,
-                      subtitle: t6.payWithExchange.subtitle,
-                      exchanges,
-                      loading: exchangesLoading
-                    }
-                  ),
-                  !hideDepositTracker && /* @__PURE__ */ (0, import_jsx_runtime48.jsx)(
-                    DepositTrackerButton,
-                    {
-                      onClick: () => {
-                        setAllExecutions(depositExecutions);
-                        setView("tracker");
-                      },
-                      title: "Deposit Tracker",
-                      subtitle: "Track your deposit progress",
-                      badge: depositExecutions.length > 0 ? depositExecutions.length : void 0
-                    }
-                  )
-                ] })
-              ) })
+              /* @__PURE__ */ (0, import_jsx_runtime48.jsx)("div", { className: "uf-pb-4 uf-space-y-3", children: depositPrerequisiteBody ?? /* @__PURE__ */ (0, import_jsx_runtime48.jsxs)(import_jsx_runtime48.Fragment, { children: [
+                /* @__PURE__ */ (0, import_jsx_runtime48.jsx)(
+                  TransferCryptoButton,
+                  {
+                    onClick: () => setView("transfer"),
+                    title: t6.transferCrypto.title,
+                    subtitle: t6.transferCrypto.subtitle,
+                    featuredTokens: projectConfig?.transfer_crypto.networks
+                  }
+                ),
+                enableConnectWallet && !isMobileView && /* @__PURE__ */ (0, import_jsx_runtime48.jsx)(
+                  BrowserWalletButton,
+                  {
+                    onClick: handleBrowserWalletClick,
+                    onConnectClick: handleWalletConnectClick,
+                    onDisconnect: handleWalletDisconnect,
+                    chainType: browserWalletChainType,
+                    publishableKey
+                  }
+                ),
+                /* @__PURE__ */ (0, import_jsx_runtime48.jsx)(
+                  DepositWithCardButton,
+                  {
+                    onClick: () => setView("card"),
+                    title: t6.depositWithCard.title,
+                    subtitle: t6.depositWithCard.subtitle,
+                    paymentNetworks: projectConfig?.payment_networks.networks
+                  }
+                ),
+                showPayWithExchange && /* @__PURE__ */ (0, import_jsx_runtime48.jsx)(
+                  PayWithExchangeButton,
+                  {
+                    onClick: () => setView("exchange"),
+                    title: t6.payWithExchange.title,
+                    subtitle: t6.payWithExchange.subtitle,
+                    exchanges,
+                    loading: exchangesLoading
+                  }
+                ),
+                !hideDepositTracker && /* @__PURE__ */ (0, import_jsx_runtime48.jsx)(
+                  DepositTrackerButton,
+                  {
+                    onClick: () => {
+                      setAllExecutions(depositExecutions);
+                      setView("tracker");
+                    },
+                    title: "Deposit Tracker",
+                    subtitle: "Track your deposit progress",
+                    badge: depositExecutions.length > 0 ? depositExecutions.length : void 0
+                  }
+                )
+              ] }) })
             ] }) : view === "transfer" ? /* @__PURE__ */ (0, import_jsx_runtime48.jsxs)(import_jsx_runtime48.Fragment, { children: [
               /* @__PURE__ */ (0, import_jsx_runtime48.jsx)(
                 DepositHeader,
                 {
                   title: t6.transferCrypto.title,
-                  showBack: true,
+                  showBack: showBackTransfer,
                   onBack: handleBack,
                   onClose: handleClose,
                   showBalance: showBalanceHeader,
@@ -11245,7 +11284,7 @@ function DepositModal({
                   publishableKey
                 }
               ),
-              transferInputVariant === "single_input" ? /* @__PURE__ */ (0, import_jsx_runtime48.jsx)(
+              standaloneNeedsDepositPrereq && depositPrerequisiteBody !== null ? /* @__PURE__ */ (0, import_jsx_runtime48.jsx)("div", { className: "uf-pb-4 uf-space-y-3", children: depositPrerequisiteBody }) : transferInputVariant === "single_input" ? /* @__PURE__ */ (0, import_jsx_runtime48.jsx)(
                 TransferCryptoSingleInput,
                 {
                   userId,
@@ -11281,7 +11320,7 @@ function DepositModal({
                 DepositHeader,
                 {
                   title: selectedExecution ? "Deposit Details" : "Deposit Tracker",
-                  showBack: true,
+                  showBack: showBackTracker,
                   onBack: handleBack,
                   onClose: handleClose
                 }
@@ -11306,7 +11345,7 @@ function DepositModal({
                 DepositHeader,
                 {
                   title: cardView === "quotes" ? t6.quotes : t6.depositWithCard.title,
-                  showBack: true,
+                  showBack: showBackCard,
                   onBack: handleBack,
                   onClose: handleClose,
                   badge: cardView === "quotes" ? { count: quotesCount } : void 0,
@@ -11319,7 +11358,7 @@ function DepositModal({
                   publishableKey
                 }
               ),
-              /* @__PURE__ */ (0, import_jsx_runtime48.jsx)(
+              standaloneNeedsDepositPrereq && depositPrerequisiteBody !== null ? /* @__PURE__ */ (0, import_jsx_runtime48.jsx)("div", { className: "uf-pb-4 uf-space-y-3", children: depositPrerequisiteBody }) : /* @__PURE__ */ (0, import_jsx_runtime48.jsx)(
                 BuyWithCard,
                 {
                   userId,

package/dist/index.mjs

@@ -1,5 +1,12 @@
 // src/components/deposits/DepositModal.tsx
-import { useState as useState26, useEffect as useEffect20, useCallback as useCallback3 } from "react";
+import {
+  useState as useState26,
+  useEffect as useEffect20,
+  useLayoutEffect as useLayoutEffect2,
+  useCallback as useCallback3,
+  useRef as useRef5,
+  useMemo as useMemo8
+} from "react";
 import { ChevronRight as ChevronRight11, MapPinOff, AlertTriangle } from "lucide-react";
 
 // src/components/shared/dialog.tsx
@@ -10870,14 +10877,23 @@ function DepositModal({
   onDepositSuccess,
   onDepositError,
   theme = "dark",
-  hideOverlay = false
+  hideOverlay = false,
+  initialScreen = "main"
 }) {
   const { colors: colors2, fonts, components } = useTheme();
+  const effectiveInitialScreen = useMemo8(() => {
+    const s = initialScreen ?? "main";
+    if (s === "tracker" && hideDepositTracker) return "main";
+    return s;
+  }, [initialScreen, hideDepositTracker]);
   const [containerEl, setContainerEl] = useState26(null);
   const containerCallbackRef = useCallback3((el) => {
     setContainerEl(el);
   }, []);
-  const [view, setView] = useState26("main");
+  const [view, setView] = useState26(
+    effectiveInitialScreen
+  );
+  const resetViewTimeoutRef = useRef5(null);
   const [cardView, setCardView] = useState26(
     "amount"
   );
@@ -10997,6 +11013,43 @@ function DepositModal({
     const template = errors[code] ?? addressValidationMessages.defaultError;
     return interpolate(template, metadata);
   };
+  const openingScreen = effectiveInitialScreen;
+  const sessionOpenedFromMenu = openingScreen === "main";
+  const standaloneNeedsDepositPrereq = openingScreen !== "main" && (view === "transfer" || view === "card");
+  let depositPrerequisiteBody;
+  if (isCountryLoading || isAddressValidationLoading || tokensLoading || walletsLoading || !projectConfig) {
+    depositPrerequisiteBody = standaloneNeedsDepositPrereq ? /* @__PURE__ */ jsx48(SkeletonButton, { variant: "with-icons" }) : /* @__PURE__ */ jsxs43(Fragment11, { children: [
+      /* @__PURE__ */ jsx48(SkeletonButton, { variant: "with-icons" }),
+      /* @__PURE__ */ jsx48(SkeletonButton, { variant: "with-icons" }),
+      !hideDepositTracker && /* @__PURE__ */ jsx48(SkeletonButton, {})
+    ] });
+  } else if (countryError) {
+    depositPrerequisiteBody = /* @__PURE__ */ jsxs43("div", { className: "uf-flex uf-flex-col uf-items-center uf-justify-center uf-py-8 uf-px-4 uf-text-center", children: [
+      /* @__PURE__ */ jsx48("div", { className: "uf-w-16 uf-h-16 uf-rounded-full uf-bg-muted uf-flex uf-items-center uf-justify-center uf-mb-4", children: /* @__PURE__ */ jsx48(AlertTriangle, { className: "uf-w-8 uf-h-8 uf-text-muted-foreground" }) }),
+      /* @__PURE__ */ jsx48("h3", { className: "uf-text-lg uf-font-semibold uf-text-foreground uf-mb-2", children: "Unable to Verify Location" }),
+      /* @__PURE__ */ jsx48("p", { className: "uf-text-sm uf-text-muted-foreground uf-max-w-[280px]", children: "We couldn't verify your location. Please check your connection and try again." })
+    ] });
+  } else if (!isAllowed) {
+    depositPrerequisiteBody = /* @__PURE__ */ jsxs43("div", { className: "uf-flex uf-flex-col uf-items-center uf-justify-center uf-py-8 uf-px-4 uf-text-center", children: [
+      /* @__PURE__ */ jsx48("div", { className: "uf-w-16 uf-h-16 uf-rounded-full uf-bg-muted uf-flex uf-items-center uf-justify-center uf-mb-4", children: /* @__PURE__ */ jsx48(MapPinOff, { className: "uf-w-8 uf-h-8 uf-text-muted-foreground" }) }),
+      /* @__PURE__ */ jsx48("h3", { className: "uf-text-lg uf-font-semibold uf-text-foreground uf-mb-2", children: "No Tokens Available" }),
+      /* @__PURE__ */ jsx48("p", { className: "uf-text-sm uf-text-muted-foreground uf-max-w-[280px]", children: "There are no supported tokens available from your current location." })
+    ] });
+  } else if (isAddressValid === false) {
+    depositPrerequisiteBody = /* @__PURE__ */ jsxs43("div", { className: "uf-flex uf-flex-col uf-items-center uf-justify-center uf-py-8 uf-px-4 uf-text-center", children: [
+      /* @__PURE__ */ jsx48("div", { className: "uf-w-16 uf-h-16 uf-rounded-full uf-bg-muted uf-flex uf-items-center uf-justify-center uf-mb-4", children: /* @__PURE__ */ jsx48(AlertTriangle, { className: "uf-w-8 uf-h-8 uf-text-muted-foreground" }) }),
+      /* @__PURE__ */ jsx48("h3", { className: "uf-text-lg uf-font-semibold uf-text-foreground uf-mb-2", children: addressValidationMessages.unableToReceiveFunds }),
+      /* @__PURE__ */ jsx48("p", { className: "uf-text-sm uf-text-muted-foreground uf-max-w-[280px]", children: getAddressValidationErrorMessage(
+        addressFailureCode,
+        addressFailureMetadata
+      ) })
+    ] });
+  } else {
+    depositPrerequisiteBody = null;
+  }
+  const showBackTransfer = sessionOpenedFromMenu;
+  const showBackCard = cardView !== "amount" || sessionOpenedFromMenu;
+  const showBackTracker = selectedExecution !== null || sessionOpenedFromMenu;
   const themeClass = resolvedTheme === "dark" ? "uf-dark" : "";
   const handleWalletDisconnect = () => {
     setUserDisconnectedWallet(true);
@@ -11007,13 +11060,37 @@ function DepositModal({
   };
   const handleClose = () => {
     onOpenChange(false);
-    setTimeout(() => {
-      setView("main");
+    if (resetViewTimeoutRef.current) {
+      clearTimeout(resetViewTimeoutRef.current);
+    }
+    resetViewTimeoutRef.current = setTimeout(() => {
+      setView(effectiveInitialScreen);
       setCardView("amount");
       setExchangeView("providers");
       setBrowserWalletInfo(null);
+      resetViewTimeoutRef.current = null;
     }, 200);
   };
+  useLayoutEffect2(() => {
+    if (!open) return;
+    if (resetViewTimeoutRef.current) {
+      clearTimeout(resetViewTimeoutRef.current);
+      resetViewTimeoutRef.current = null;
+    }
+    setView(effectiveInitialScreen);
+    setCardView("amount");
+    setExchangeView("providers");
+    setBrowserWalletInfo(null);
+    setSelectedExecution(null);
+  }, [open, effectiveInitialScreen]);
+  useEffect20(
+    () => () => {
+      if (resetViewTimeoutRef.current) {
+        clearTimeout(resetViewTimeoutRef.current);
+      }
+    },
+    []
+  );
   const handleBack = () => {
     if (view === "card" && cardView === "quotes") {
       setCardView("amount");
@@ -11126,95 +11203,64 @@ function DepositModal({
                   publishableKey
                 }
               ),
-              /* @__PURE__ */ jsx48("div", { className: "uf-pb-4 uf-space-y-3", children: isCountryLoading || isAddressValidationLoading || tokensLoading || walletsLoading || !projectConfig ? /* @__PURE__ */ jsxs43(Fragment11, { children: [
-                /* @__PURE__ */ jsx48(SkeletonButton, { variant: "with-icons" }),
-                /* @__PURE__ */ jsx48(SkeletonButton, { variant: "with-icons" }),
-                !hideDepositTracker && /* @__PURE__ */ jsx48(SkeletonButton, {})
-              ] }) : countryError ? (
-                /* Error state - couldn't verify location */
-                /* @__PURE__ */ jsxs43("div", { className: "uf-flex uf-flex-col uf-items-center uf-justify-center uf-py-8 uf-px-4 uf-text-center", children: [
-                  /* @__PURE__ */ jsx48("div", { className: "uf-w-16 uf-h-16 uf-rounded-full uf-bg-muted uf-flex uf-items-center uf-justify-center uf-mb-4", children: /* @__PURE__ */ jsx48(AlertTriangle, { className: "uf-w-8 uf-h-8 uf-text-muted-foreground" }) }),
-                  /* @__PURE__ */ jsx48("h3", { className: "uf-text-lg uf-font-semibold uf-text-foreground uf-mb-2", children: "Unable to Verify Location" }),
-                  /* @__PURE__ */ jsx48("p", { className: "uf-text-sm uf-text-muted-foreground uf-max-w-[280px]", children: "We couldn't verify your location. Please check your connection and try again." })
-                ] })
-              ) : !isAllowed ? (
-                /* Blocked country state (isAllowed is false or null without error) */
-                /* @__PURE__ */ jsxs43("div", { className: "uf-flex uf-flex-col uf-items-center uf-justify-center uf-py-8 uf-px-4 uf-text-center", children: [
-                  /* @__PURE__ */ jsx48("div", { className: "uf-w-16 uf-h-16 uf-rounded-full uf-bg-muted uf-flex uf-items-center uf-justify-center uf-mb-4", children: /* @__PURE__ */ jsx48(MapPinOff, { className: "uf-w-8 uf-h-8 uf-text-muted-foreground" }) }),
-                  /* @__PURE__ */ jsx48("h3", { className: "uf-text-lg uf-font-semibold uf-text-foreground uf-mb-2", children: "No Tokens Available" }),
-                  /* @__PURE__ */ jsx48("p", { className: "uf-text-sm uf-text-muted-foreground uf-max-w-[280px]", children: "There are no supported tokens available from your current location." })
-                ] })
-              ) : isAddressValid === false ? (
-                /* Invalid recipient address state (e.g., Algorand not opted in) */
-                /* @__PURE__ */ jsxs43("div", { className: "uf-flex uf-flex-col uf-items-center uf-justify-center uf-py-8 uf-px-4 uf-text-center", children: [
-                  /* @__PURE__ */ jsx48("div", { className: "uf-w-16 uf-h-16 uf-rounded-full uf-bg-muted uf-flex uf-items-center uf-justify-center uf-mb-4", children: /* @__PURE__ */ jsx48(AlertTriangle, { className: "uf-w-8 uf-h-8 uf-text-muted-foreground" }) }),
-                  /* @__PURE__ */ jsx48("h3", { className: "uf-text-lg uf-font-semibold uf-text-foreground uf-mb-2", children: addressValidationMessages.unableToReceiveFunds }),
-                  /* @__PURE__ */ jsx48("p", { className: "uf-text-sm uf-text-muted-foreground uf-max-w-[280px]", children: getAddressValidationErrorMessage(
-                    addressFailureCode,
-                    addressFailureMetadata
-                  ) })
-                ] })
-              ) : (
-                /* Normal deposit options */
-                /* @__PURE__ */ jsxs43(Fragment11, { children: [
-                  /* @__PURE__ */ jsx48(
-                    TransferCryptoButton,
-                    {
-                      onClick: () => setView("transfer"),
-                      title: t6.transferCrypto.title,
-                      subtitle: t6.transferCrypto.subtitle,
-                      featuredTokens: projectConfig.transfer_crypto.networks
-                    }
-                  ),
-                  enableConnectWallet && !isMobileView && /* @__PURE__ */ jsx48(
-                    BrowserWalletButton,
-                    {
-                      onClick: handleBrowserWalletClick,
-                      onConnectClick: handleWalletConnectClick,
-                      onDisconnect: handleWalletDisconnect,
-                      chainType: browserWalletChainType,
-                      publishableKey
-                    }
-                  ),
-                  /* @__PURE__ */ jsx48(
-                    DepositWithCardButton,
-                    {
-                      onClick: () => setView("card"),
-                      title: t6.depositWithCard.title,
-                      subtitle: t6.depositWithCard.subtitle,
-                      paymentNetworks: projectConfig.payment_networks.networks
-                    }
-                  ),
-                  showPayWithExchange && /* @__PURE__ */ jsx48(
-                    PayWithExchangeButton,
-                    {
-                      onClick: () => setView("exchange"),
-                      title: t6.payWithExchange.title,
-                      subtitle: t6.payWithExchange.subtitle,
-                      exchanges,
-                      loading: exchangesLoading
-                    }
-                  ),
-                  !hideDepositTracker && /* @__PURE__ */ jsx48(
-                    DepositTrackerButton,
-                    {
-                      onClick: () => {
-                        setAllExecutions(depositExecutions);
-                        setView("tracker");
-                      },
-                      title: "Deposit Tracker",
-                      subtitle: "Track your deposit progress",
-                      badge: depositExecutions.length > 0 ? depositExecutions.length : void 0
-                    }
-                  )
-                ] })
-              ) })
+              /* @__PURE__ */ jsx48("div", { className: "uf-pb-4 uf-space-y-3", children: depositPrerequisiteBody ?? /* @__PURE__ */ jsxs43(Fragment11, { children: [
+                /* @__PURE__ */ jsx48(
+                  TransferCryptoButton,
+                  {
+                    onClick: () => setView("transfer"),
+                    title: t6.transferCrypto.title,
+                    subtitle: t6.transferCrypto.subtitle,
+                    featuredTokens: projectConfig?.transfer_crypto.networks
+                  }
+                ),
+                enableConnectWallet && !isMobileView && /* @__PURE__ */ jsx48(
+                  BrowserWalletButton,
+                  {
+                    onClick: handleBrowserWalletClick,
+                    onConnectClick: handleWalletConnectClick,
+                    onDisconnect: handleWalletDisconnect,
+                    chainType: browserWalletChainType,
+                    publishableKey
+                  }
+                ),
+                /* @__PURE__ */ jsx48(
+                  DepositWithCardButton,
+                  {
+                    onClick: () => setView("card"),
+                    title: t6.depositWithCard.title,
+                    subtitle: t6.depositWithCard.subtitle,
+                    paymentNetworks: projectConfig?.payment_networks.networks
+                  }
+                ),
+                showPayWithExchange && /* @__PURE__ */ jsx48(
+                  PayWithExchangeButton,
+                  {
+                    onClick: () => setView("exchange"),
+                    title: t6.payWithExchange.title,
+                    subtitle: t6.payWithExchange.subtitle,
+                    exchanges,
+                    loading: exchangesLoading
+                  }
+                ),
+                !hideDepositTracker && /* @__PURE__ */ jsx48(
+                  DepositTrackerButton,
+                  {
+                    onClick: () => {
+                      setAllExecutions(depositExecutions);
+                      setView("tracker");
+                    },
+                    title: "Deposit Tracker",
+                    subtitle: "Track your deposit progress",
+                    badge: depositExecutions.length > 0 ? depositExecutions.length : void 0
+                  }
+                )
+              ] }) })
             ] }) : view === "transfer" ? /* @__PURE__ */ jsxs43(Fragment11, { children: [
               /* @__PURE__ */ jsx48(
                 DepositHeader,
                 {
                   title: t6.transferCrypto.title,
-                  showBack: true,
+                  showBack: showBackTransfer,
                   onBack: handleBack,
                   onClose: handleClose,
                   showBalance: showBalanceHeader,
@@ -11226,7 +11272,7 @@ function DepositModal({
                   publishableKey
                 }
               ),
-              transferInputVariant === "single_input" ? /* @__PURE__ */ jsx48(
+              standaloneNeedsDepositPrereq && depositPrerequisiteBody !== null ? /* @__PURE__ */ jsx48("div", { className: "uf-pb-4 uf-space-y-3", children: depositPrerequisiteBody }) : transferInputVariant === "single_input" ? /* @__PURE__ */ jsx48(
                 TransferCryptoSingleInput,
                 {
                   userId,
@@ -11262,7 +11308,7 @@ function DepositModal({
                 DepositHeader,
                 {
                   title: selectedExecution ? "Deposit Details" : "Deposit Tracker",
-                  showBack: true,
+                  showBack: showBackTracker,
                   onBack: handleBack,
                   onClose: handleClose
                 }
@@ -11287,7 +11333,7 @@ function DepositModal({
                 DepositHeader,
                 {
                   title: cardView === "quotes" ? t6.quotes : t6.depositWithCard.title,
-                  showBack: true,
+                  showBack: showBackCard,
                   onBack: handleBack,
                   onClose: handleClose,
                   badge: cardView === "quotes" ? { count: quotesCount } : void 0,
@@ -11300,7 +11346,7 @@ function DepositModal({
                   publishableKey
                 }
               ),
-              /* @__PURE__ */ jsx48(
+              standaloneNeedsDepositPrereq && depositPrerequisiteBody !== null ? /* @__PURE__ */ jsx48("div", { className: "uf-pb-4 uf-space-y-3", children: depositPrerequisiteBody }) : /* @__PURE__ */ jsx48(
                 BuyWithCard,
                 {
                   userId,

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@unifold/ui-react",
-  "version": "0.1.35",
+  "version": "0.1.36",
   "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.35"
+    "@unifold/core": "0.1.36"
   },
   "devDependencies": {
     "@solana/spl-token": "^0.3.8",