npm - @unifold/connect-react - Versions diffs - 0.1.35 → 0.1.36 - Mend

@unifold/connect-react 0.1.35 → 0.1.36

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (6) hide show

package/README.md CHANGED Viewed

@@ -134,6 +134,7 @@ Launches the deposit modal with the specified configuration. **Returns a Promise
 | `recipientAddress` | string | ✅ | Recipient wallet address |
 | `onSuccess` | function | - | Success callback (fired immediately) |
 | `onError` | function | - | Error callback (fired immediately) |
+| `initialScreen` | `'main' \| 'transfer' \| 'card' \| 'tracker'` | - | `main` (default) = deposit menu. `transfer` / `card` use the **same geo/validation gates** as the menu. `tracker` opens the list **without** those gates. If not `main`, the header **back** is hidden (standalone); from `main`, back returns to the menu. Card quotes/onramp and tracker detail still show back for inner steps. |
 **Returns:** `Promise<DepositResult>`
@@ -172,6 +173,16 @@ try {
   console.error('Error:', error);
 }
+// Standalone Transfer Crypto (geo checks + no back to menu by default)
+await beginDeposit({
+  externalUserId: 'user_123',
+  destinationChainId: '137',
+  destinationTokenAddress: '0x2791bca1f2de4661ed88a30c99a7a9449aa84174',
+  destinationTokenSymbol: 'USDC',
+  recipientAddress: '0x606C49ca2Fa4982F07016265040F777eD3DA3160',
+  initialScreen: 'transfer',
+});
 // Hybrid (promise + callbacks)
 const depositPromise = beginDeposit({
   userId: 'user_123',

package/dist/index.d.mts CHANGED Viewed

@@ -1,7 +1,7 @@
 import * as react_jsx_runtime from 'react/jsx-runtime';
 import React from 'react';
-import { ThemeMode, ThemeConfig, FontConfig, ComponentConfig, ChainType, DepositConfirmationMode, AllowedCountryResult } from '@unifold/ui-react';
-export { AllowedCountryResult, Button, ButtonProps, ButtonTokens, CardTokens, ComponentConfig, ComponentTokens, ContainerTokens, CustomThemeColors, DepositConfirmationMode, FontConfig, HeaderTokens, InputTokens, ListTokens, SearchTokens, ThemeColors, ThemeConfig, ThemeMode } from '@unifold/ui-react';
+import { ThemeMode, ThemeConfig, FontConfig, ComponentConfig, DepositModalInitialScreen, ChainType, DepositConfirmationMode, AllowedCountryResult } from '@unifold/ui-react';
+export { AllowedCountryResult, Button, ButtonProps, ButtonTokens, CardTokens, ComponentConfig, ComponentTokens, ContainerTokens, CustomThemeColors, DepositConfirmationMode, DepositModalInitialScreen as DepositInitialScreen, FontConfig, HeaderTokens, InputTokens, ListTokens, SearchTokens, ThemeColors, ThemeConfig, ThemeMode } from '@unifold/ui-react';
 export { AutoSwapRequest, AutoSwapResponse, ChainType, CreateDepositAddressRequest, DefaultTokenChain, DefaultTokenMetadata, DefaultTokenResponse, DepositAddressResponse, ExecutionStatus, FeaturedToken, FiatCurrenciesResponse, FiatCurrency, I18nStrings, IconUrl, IpAddressResponse, OnrampQuote, OnrampQuotesRequest, OnrampQuotesResponse, OnrampSessionRequest, OnrampSessionResponse, PaymentNetwork, ProjectConfigResponse, QueryExecutionsRequest, QueryExecutionsResponse, SOLANA_USDC_ADDRESS, SupportedChain, SupportedDepositTokensResponse, SupportedToken, TokenChain, TokenChainIconUrl, TokenChainsResponse, UserIpInfo, Wallet, createDepositAddress, createOnrampSession, getApiBaseUrl, getChainName, getDefaultOnrampToken, getFiatCurrencies, getIconUrl, getIconUrlWithCdn, getIpAddress, getOnrampQuotes, getPreferredIconUrl, getProjectConfig, getSupportedDepositTokens, getTokenChains, getWalletByChainType, i18n, queryExecutions, setApiConfig, useUserIp } from '@unifold/core';
 interface UnifoldConnectProviderConfig {
@@ -29,6 +29,8 @@ interface UnifoldConnectProviderConfig {
         fonts?: FontConfig;
         /** Component-specific token overrides */
         components?: ComponentConfig;
+        /** Default `initialScreen` for `beginDeposit()` when the call omits it */
+        defaultInitialScreen?: DepositModalInitialScreen;
     };
 }
 interface DepositResult {
@@ -54,6 +56,13 @@ interface DepositConfig {
     onError?: (error: DepositError) => void;
     /** Called when the user dismisses the deposit dialog (X button, Escape key, or programmatic close) */
     onClose?: () => void;
+    /**
+     * Which screen opens first: menu (`main`, default), `transfer`, `card`, or `tracker`.
+     * `transfer` and `card` run the same geo / recipient checks as the menu before the flow. `tracker` does not
+     * (deposit history is always reachable). If not `main`, the header back control is hidden (nothing to return to);
+     * card quotes/onramp and tracker detail still show back for inner navigation.
+     */
+    initialScreen?: DepositModalInitialScreen;
 }
 declare function UnifoldProvider({ children, publishableKey, config, }: React.PropsWithChildren<UnifoldConnectProviderConfig>): react_jsx_runtime.JSX.Element;
 declare function useUnifold(): {

package/dist/index.d.ts CHANGED Viewed

@@ -1,7 +1,7 @@
 import * as react_jsx_runtime from 'react/jsx-runtime';
 import React from 'react';
-import { ThemeMode, ThemeConfig, FontConfig, ComponentConfig, ChainType, DepositConfirmationMode, AllowedCountryResult } from '@unifold/ui-react';
-export { AllowedCountryResult, Button, ButtonProps, ButtonTokens, CardTokens, ComponentConfig, ComponentTokens, ContainerTokens, CustomThemeColors, DepositConfirmationMode, FontConfig, HeaderTokens, InputTokens, ListTokens, SearchTokens, ThemeColors, ThemeConfig, ThemeMode } from '@unifold/ui-react';
+import { ThemeMode, ThemeConfig, FontConfig, ComponentConfig, DepositModalInitialScreen, ChainType, DepositConfirmationMode, AllowedCountryResult } from '@unifold/ui-react';
+export { AllowedCountryResult, Button, ButtonProps, ButtonTokens, CardTokens, ComponentConfig, ComponentTokens, ContainerTokens, CustomThemeColors, DepositConfirmationMode, DepositModalInitialScreen as DepositInitialScreen, FontConfig, HeaderTokens, InputTokens, ListTokens, SearchTokens, ThemeColors, ThemeConfig, ThemeMode } from '@unifold/ui-react';
 export { AutoSwapRequest, AutoSwapResponse, ChainType, CreateDepositAddressRequest, DefaultTokenChain, DefaultTokenMetadata, DefaultTokenResponse, DepositAddressResponse, ExecutionStatus, FeaturedToken, FiatCurrenciesResponse, FiatCurrency, I18nStrings, IconUrl, IpAddressResponse, OnrampQuote, OnrampQuotesRequest, OnrampQuotesResponse, OnrampSessionRequest, OnrampSessionResponse, PaymentNetwork, ProjectConfigResponse, QueryExecutionsRequest, QueryExecutionsResponse, SOLANA_USDC_ADDRESS, SupportedChain, SupportedDepositTokensResponse, SupportedToken, TokenChain, TokenChainIconUrl, TokenChainsResponse, UserIpInfo, Wallet, createDepositAddress, createOnrampSession, getApiBaseUrl, getChainName, getDefaultOnrampToken, getFiatCurrencies, getIconUrl, getIconUrlWithCdn, getIpAddress, getOnrampQuotes, getPreferredIconUrl, getProjectConfig, getSupportedDepositTokens, getTokenChains, getWalletByChainType, i18n, queryExecutions, setApiConfig, useUserIp } from '@unifold/core';
 interface UnifoldConnectProviderConfig {
@@ -29,6 +29,8 @@ interface UnifoldConnectProviderConfig {
         fonts?: FontConfig;
         /** Component-specific token overrides */
         components?: ComponentConfig;
+        /** Default `initialScreen` for `beginDeposit()` when the call omits it */
+        defaultInitialScreen?: DepositModalInitialScreen;
     };
 }
 interface DepositResult {
@@ -54,6 +56,13 @@ interface DepositConfig {
     onError?: (error: DepositError) => void;
     /** Called when the user dismisses the deposit dialog (X button, Escape key, or programmatic close) */
     onClose?: () => void;
+    /**
+     * Which screen opens first: menu (`main`, default), `transfer`, `card`, or `tracker`.
+     * `transfer` and `card` run the same geo / recipient checks as the menu before the flow. `tracker` does not
+     * (deposit history is always reachable). If not `main`, the header back control is hidden (nothing to return to);
+     * card quotes/onramp and tracker detail still show back for inner navigation.
+     */
+    initialScreen?: DepositModalInitialScreen;
 }
 declare function UnifoldProvider({ children, publishableKey, config, }: React.PropsWithChildren<UnifoldConnectProviderConfig>): react_jsx_runtime.JSX.Element;
 declare function useUnifold(): {

package/dist/index.js CHANGED Viewed

@@ -21337,14 +21337,23 @@ function DepositModal({
   onDepositSuccess,
   onDepositError,
   theme = "dark",
-  hideOverlay = false
+  hideOverlay = false,
+  initialScreen = "main"
 }) {
   const { colors: colors2, fonts, components } = useTheme();
+  const effectiveInitialScreen = (0, import_react8.useMemo)(() => {
+    const s = initialScreen ?? "main";
+    if (s === "tracker" && hideDepositTracker) return "main";
+    return s;
+  }, [initialScreen, hideDepositTracker]);
   const [containerEl, setContainerEl] = (0, import_react8.useState)(null);
   const containerCallbackRef = (0, import_react8.useCallback)((el) => {
     setContainerEl(el);
   }, []);
-  const [view, setView] = (0, import_react8.useState)("main");
+  const [view, setView] = (0, import_react8.useState)(
+    effectiveInitialScreen
+  );
+  const resetViewTimeoutRef = (0, import_react8.useRef)(null);
   const [cardView, setCardView] = (0, import_react8.useState)(
     "amount"
   );
@@ -21464,6 +21473,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_runtime65.jsx)(SkeletonButton, { variant: "with-icons" }) : /* @__PURE__ */ (0, import_jsx_runtime65.jsxs)(import_jsx_runtime65.Fragment, { children: [
+      /* @__PURE__ */ (0, import_jsx_runtime65.jsx)(SkeletonButton, { variant: "with-icons" }),
+      /* @__PURE__ */ (0, import_jsx_runtime65.jsx)(SkeletonButton, { variant: "with-icons" }),
+      !hideDepositTracker && /* @__PURE__ */ (0, import_jsx_runtime65.jsx)(SkeletonButton, {})
+    ] });
+  } else if (countryError) {
+    depositPrerequisiteBody = /* @__PURE__ */ (0, import_jsx_runtime65.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_runtime65.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_runtime65.jsx)(TriangleAlert, { className: "uf-w-8 uf-h-8 uf-text-muted-foreground" }) }),
+      /* @__PURE__ */ (0, import_jsx_runtime65.jsx)("h3", { className: "uf-text-lg uf-font-semibold uf-text-foreground uf-mb-2", children: "Unable to Verify Location" }),
+      /* @__PURE__ */ (0, import_jsx_runtime65.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_runtime65.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_runtime65.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_runtime65.jsx)(MapPinOff, { className: "uf-w-8 uf-h-8 uf-text-muted-foreground" }) }),
+      /* @__PURE__ */ (0, import_jsx_runtime65.jsx)("h3", { className: "uf-text-lg uf-font-semibold uf-text-foreground uf-mb-2", children: "No Tokens Available" }),
+      /* @__PURE__ */ (0, import_jsx_runtime65.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_runtime65.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_runtime65.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_runtime65.jsx)(TriangleAlert, { className: "uf-w-8 uf-h-8 uf-text-muted-foreground" }) }),
+      /* @__PURE__ */ (0, import_jsx_runtime65.jsx)("h3", { className: "uf-text-lg uf-font-semibold uf-text-foreground uf-mb-2", children: addressValidationMessages.unableToReceiveFunds }),
+      /* @__PURE__ */ (0, import_jsx_runtime65.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);
@@ -21474,13 +21520,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_react8.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_react8.useEffect)(
+    () => () => {
+      if (resetViewTimeoutRef.current) {
+        clearTimeout(resetViewTimeoutRef.current);
+      }
+    },
+    []
+  );
   const handleBack = () => {
     if (view === "card" && cardView === "quotes") {
       setCardView("amount");
@@ -21593,95 +21663,64 @@ function DepositModal({
                   publishableKey
                 }
               ),
-              /* @__PURE__ */ (0, import_jsx_runtime65.jsx)("div", { className: "uf-pb-4 uf-space-y-3", children: isCountryLoading || isAddressValidationLoading || tokensLoading || walletsLoading || !projectConfig ? /* @__PURE__ */ (0, import_jsx_runtime65.jsxs)(import_jsx_runtime65.Fragment, { children: [
-                /* @__PURE__ */ (0, import_jsx_runtime65.jsx)(SkeletonButton, { variant: "with-icons" }),
-                /* @__PURE__ */ (0, import_jsx_runtime65.jsx)(SkeletonButton, { variant: "with-icons" }),
-                !hideDepositTracker && /* @__PURE__ */ (0, import_jsx_runtime65.jsx)(SkeletonButton, {})
-              ] }) : countryError ? (
-                /* Error state - couldn't verify location */
-                /* @__PURE__ */ (0, import_jsx_runtime65.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_runtime65.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_runtime65.jsx)(TriangleAlert, { className: "uf-w-8 uf-h-8 uf-text-muted-foreground" }) }),
-                  /* @__PURE__ */ (0, import_jsx_runtime65.jsx)("h3", { className: "uf-text-lg uf-font-semibold uf-text-foreground uf-mb-2", children: "Unable to Verify Location" }),
-                  /* @__PURE__ */ (0, import_jsx_runtime65.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_runtime65.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_runtime65.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_runtime65.jsx)(MapPinOff, { className: "uf-w-8 uf-h-8 uf-text-muted-foreground" }) }),
-                  /* @__PURE__ */ (0, import_jsx_runtime65.jsx)("h3", { className: "uf-text-lg uf-font-semibold uf-text-foreground uf-mb-2", children: "No Tokens Available" }),
-                  /* @__PURE__ */ (0, import_jsx_runtime65.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_runtime65.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_runtime65.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_runtime65.jsx)(TriangleAlert, { className: "uf-w-8 uf-h-8 uf-text-muted-foreground" }) }),
-                  /* @__PURE__ */ (0, import_jsx_runtime65.jsx)("h3", { className: "uf-text-lg uf-font-semibold uf-text-foreground uf-mb-2", children: addressValidationMessages.unableToReceiveFunds }),
-                  /* @__PURE__ */ (0, import_jsx_runtime65.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_runtime65.jsxs)(import_jsx_runtime65.Fragment, { children: [
-                  /* @__PURE__ */ (0, import_jsx_runtime65.jsx)(
-                    TransferCryptoButton,
-                    {
-                      onClick: () => setView("transfer"),
-                      title: t6.transferCrypto.title,
-                      subtitle: t6.transferCrypto.subtitle,
-                      featuredTokens: projectConfig.transfer_crypto.networks
-                    }
-                  ),
-                  enableConnectWallet && !isMobileView && /* @__PURE__ */ (0, import_jsx_runtime65.jsx)(
-                    BrowserWalletButton,
-                    {
-                      onClick: handleBrowserWalletClick,
-                      onConnectClick: handleWalletConnectClick,
-                      onDisconnect: handleWalletDisconnect,
-                      chainType: browserWalletChainType,
-                      publishableKey
-                    }
-                  ),
-                  /* @__PURE__ */ (0, import_jsx_runtime65.jsx)(
-                    DepositWithCardButton,
-                    {
-                      onClick: () => setView("card"),
-                      title: t6.depositWithCard.title,
-                      subtitle: t6.depositWithCard.subtitle,
-                      paymentNetworks: projectConfig.payment_networks.networks
-                    }
-                  ),
-                  showPayWithExchange && /* @__PURE__ */ (0, import_jsx_runtime65.jsx)(
-                    PayWithExchangeButton,
-                    {
-                      onClick: () => setView("exchange"),
-                      title: t6.payWithExchange.title,
-                      subtitle: t6.payWithExchange.subtitle,
-                      exchanges,
-                      loading: exchangesLoading
-                    }
-                  ),
-                  !hideDepositTracker && /* @__PURE__ */ (0, import_jsx_runtime65.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_runtime65.jsx)("div", { className: "uf-pb-4 uf-space-y-3", children: depositPrerequisiteBody ?? /* @__PURE__ */ (0, import_jsx_runtime65.jsxs)(import_jsx_runtime65.Fragment, { children: [
+                /* @__PURE__ */ (0, import_jsx_runtime65.jsx)(
+                  TransferCryptoButton,
+                  {
+                    onClick: () => setView("transfer"),
+                    title: t6.transferCrypto.title,
+                    subtitle: t6.transferCrypto.subtitle,
+                    featuredTokens: projectConfig?.transfer_crypto.networks
+                  }
+                ),
+                enableConnectWallet && !isMobileView && /* @__PURE__ */ (0, import_jsx_runtime65.jsx)(
+                  BrowserWalletButton,
+                  {
+                    onClick: handleBrowserWalletClick,
+                    onConnectClick: handleWalletConnectClick,
+                    onDisconnect: handleWalletDisconnect,
+                    chainType: browserWalletChainType,
+                    publishableKey
+                  }
+                ),
+                /* @__PURE__ */ (0, import_jsx_runtime65.jsx)(
+                  DepositWithCardButton,
+                  {
+                    onClick: () => setView("card"),
+                    title: t6.depositWithCard.title,
+                    subtitle: t6.depositWithCard.subtitle,
+                    paymentNetworks: projectConfig?.payment_networks.networks
+                  }
+                ),
+                showPayWithExchange && /* @__PURE__ */ (0, import_jsx_runtime65.jsx)(
+                  PayWithExchangeButton,
+                  {
+                    onClick: () => setView("exchange"),
+                    title: t6.payWithExchange.title,
+                    subtitle: t6.payWithExchange.subtitle,
+                    exchanges,
+                    loading: exchangesLoading
+                  }
+                ),
+                !hideDepositTracker && /* @__PURE__ */ (0, import_jsx_runtime65.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_runtime65.jsxs)(import_jsx_runtime65.Fragment, { children: [
               /* @__PURE__ */ (0, import_jsx_runtime65.jsx)(
                 DepositHeader,
                 {
                   title: t6.transferCrypto.title,
-                  showBack: true,
+                  showBack: showBackTransfer,
                   onBack: handleBack,
                   onClose: handleClose,
                   showBalance: showBalanceHeader,
@@ -21693,7 +21732,7 @@ function DepositModal({
                   publishableKey
                 }
               ),
-              transferInputVariant === "single_input" ? /* @__PURE__ */ (0, import_jsx_runtime65.jsx)(
+              standaloneNeedsDepositPrereq && depositPrerequisiteBody !== null ? /* @__PURE__ */ (0, import_jsx_runtime65.jsx)("div", { className: "uf-pb-4 uf-space-y-3", children: depositPrerequisiteBody }) : transferInputVariant === "single_input" ? /* @__PURE__ */ (0, import_jsx_runtime65.jsx)(
                 TransferCryptoSingleInput,
                 {
                   userId,
@@ -21729,7 +21768,7 @@ function DepositModal({
                 DepositHeader,
                 {
                   title: selectedExecution ? "Deposit Details" : "Deposit Tracker",
-                  showBack: true,
+                  showBack: showBackTracker,
                   onBack: handleBack,
                   onClose: handleClose
                 }
@@ -21754,7 +21793,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,
@@ -21767,7 +21806,7 @@ function DepositModal({
                   publishableKey
                 }
               ),
-              /* @__PURE__ */ (0, import_jsx_runtime65.jsx)(
+              standaloneNeedsDepositPrereq && depositPrerequisiteBody !== null ? /* @__PURE__ */ (0, import_jsx_runtime65.jsx)("div", { className: "uf-pb-4 uf-space-y-3", children: depositPrerequisiteBody }) : /* @__PURE__ */ (0, import_jsx_runtime65.jsx)(
                 BuyWithCard,
                 {
                   userId,
@@ -22060,7 +22099,8 @@ function UnifoldProvider2({
             enablePayWithExchange: config?.enablePayWithExchange,
             onDepositSuccess: handleDepositSuccess,
             onDepositError: handleDepositError,
-            theme: resolvedTheme
+            theme: resolvedTheme,
+            initialScreen: depositConfig.initialScreen ?? config?.defaultInitialScreen
           }
         )
       ]

package/dist/index.mjs CHANGED Viewed

@@ -1218,7 +1218,14 @@ function useUnifold() {
 }
 // ../ui-react/dist/index.mjs
-import { useState as useState26, useEffect as useEffect20, useCallback as useCallback32 } from "react";
+import {
+  useState as useState26,
+  useEffect as useEffect20,
+  useLayoutEffect as useLayoutEffect22,
+  useCallback as useCallback32,
+  useRef as useRef52,
+  useMemo as useMemo82
+} from "react";
 // ../../node_modules/.pnpm/lucide-react@0.454.0_react@18.3.1/node_modules/lucide-react/dist/esm/createLucideIcon.js
 import { forwardRef as forwardRef2, createElement as createElement2 } from "react";
@@ -21312,14 +21319,23 @@ function DepositModal({
   onDepositSuccess,
   onDepositError,
   theme = "dark",
-  hideOverlay = false
+  hideOverlay = false,
+  initialScreen = "main"
 }) {
   const { colors: colors2, fonts, components } = useTheme();
+  const effectiveInitialScreen = useMemo82(() => {
+    const s = initialScreen ?? "main";
+    if (s === "tracker" && hideDepositTracker) return "main";
+    return s;
+  }, [initialScreen, hideDepositTracker]);
   const [containerEl, setContainerEl] = useState26(null);
   const containerCallbackRef = useCallback32((el) => {
     setContainerEl(el);
   }, []);
-  const [view, setView] = useState26("main");
+  const [view, setView] = useState26(
+    effectiveInitialScreen
+  );
+  const resetViewTimeoutRef = useRef52(null);
   const [cardView, setCardView] = useState26(
     "amount"
   );
@@ -21439,6 +21455,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(TriangleAlert, { 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(TriangleAlert, { 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);
@@ -21449,13 +21502,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);
   };
+  useLayoutEffect22(() => {
+    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");
@@ -21568,95 +21645,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(TriangleAlert, { 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(TriangleAlert, { 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,
@@ -21668,7 +21714,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,
@@ -21704,7 +21750,7 @@ function DepositModal({
                 DepositHeader,
                 {
                   title: selectedExecution ? "Deposit Details" : "Deposit Tracker",
-                  showBack: true,
+                  showBack: showBackTracker,
                   onBack: handleBack,
                   onClose: handleClose
                 }
@@ -21729,7 +21775,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,
@@ -21742,7 +21788,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,
@@ -22035,7 +22081,8 @@ function UnifoldProvider2({
             enablePayWithExchange: config?.enablePayWithExchange,
             onDepositSuccess: handleDepositSuccess,
             onDepositError: handleDepositError,
-            theme: resolvedTheme
+            theme: resolvedTheme,
+            initialScreen: depositConfig.initialScreen ?? config?.defaultInitialScreen
           }
         )
       ]

package/package.json CHANGED Viewed

@@ -1,6 +1,6 @@
 {
   "name": "@unifold/connect-react",
-  "version": "0.1.35",
+  "version": "0.1.36",
   "description": "Unifold Connect React - Complete React SDK with UI components for crypto deposits",
   "main": "./dist/index.js",
   "module": "./dist/index.mjs",
@@ -31,9 +31,9 @@
   },
   "dependencies": {
     "@tanstack/react-query": "^5.90.11",
-    "@unifold/core": "0.1.35",
-    "@unifold/ui-react": "0.1.35",
-    "@unifold/react-provider": "0.1.35"
+    "@unifold/core": "0.1.36",
+    "@unifold/ui-react": "0.1.36",
+    "@unifold/react-provider": "0.1.36"
   },
   "devDependencies": {
     "@types/react": "^19.0.0",