@unifold/connect-react 0.1.73 → 0.1.74

package/README.md

@@ -92,6 +92,7 @@ Wraps your application and provides the Unifold context.
     - `'light'`: Force light mode
     - `'dark'`: Force dark mode (default)
     - `'auto'`: Use system preference and respond to changes
+  - `layout` (optional): Deposit menu layout and its options - `{ type, tabOrder }` (`type` defaults to `'tabs'`)
 - `children` (required): Your React components
 
 ```tsx
@@ -107,6 +108,62 @@ Wraps your application and provides the Unifold context.
 </UnifoldProvider>
 ```
 
+#### Menu layout
+
+`layout` controls how the deposit menu arranges the funding methods, and carries
+the options belonging to that layout:
+
+```tsx
+<UnifoldProvider
+  publishableKey="pk_test_..."
+  config={{
+    layout: {
+      type: 'tabs',
+      tabOrder: ['cash', 'crypto'], // opens on "Use Cash"
+    },
+  }}
+>
+  {children}
+</UnifoldProvider>
+```
+
+`type: 'tabs'` (the default) groups the options under "Use Crypto" and "Use
+Cash" tabs, and `tabOrder` controls which tab leads. `'stacked'` puts every
+option in a single list instead:
+
+```tsx
+config={{ layout: { type: 'stacked' } }}
+```
+
+Tabs you list lead, in the order given; any tab you leave out keeps its default
+position behind them, so `['cash']` is equivalent to `['cash', 'crypto']`. The
+leading tab is the one shown on the main menu until the user picks another —
+deep-linking with `initialScreen` still opens that method's own tab. A tab whose
+methods are all disabled stays hidden regardless of order, and the tab bar
+disappears entirely when only one tab has options.
+
+`tabOrder` has no effect under `type: 'stacked'`, where the methods are
+interleaved into a single list rather than split across tabs.
+
+> **The default changed to `'tabs'`.** It was previously `'stacked'`, so an
+> integration that sets neither `layout` nor `displayMode` will see the tabbed
+> menu after upgrading. Pass `layout: { type: 'stacked' }` to keep the single
+> list.
+
+##### Migrating from `displayMode`
+
+`displayMode` is deprecated but still honoured, so existing integrations keep
+working unchanged. It only sets the layout type:
+
+```tsx
+config={{ displayMode: 'stacked' }}          // before
+config={{ layout: { type: 'stacked' } }}     // after
+```
+
+`layout.type` wins when both are set. A `layout` that omits `type` still falls
+back to `displayMode`, so you can adopt the layout's options without changing
+how the layout is selected.
+
 ### useUnifold()
 
 Hook that provides access to the deposit functionality.

package/dist/index.d.mts

@@ -1,8 +1,8 @@
 import * as react_jsx_runtime from 'react/jsx-runtime';
 import React from 'react';
 import { QueryClient } from '@tanstack/react-query';
-import { ChainType, DepositConfirmationMode, DepositMethod, DepositModalInitialScreen, ThemeMode, ThemeConfig, FontConfig, ComponentConfig, WithdrawTransactionInfo, AllowedCountryResult } from '@unifold/ui-react';
-export { AllowedCountryResult, BrowserWalletAmountQuickSelect, Button, ButtonProps, ButtonTokens, CardTokens, ComponentConfig, ComponentTokens, ConfirmingView, ContainerTokens, CustomThemeColors, DepositConfirmationMode, DepositModalInitialScreen as DepositInitialScreen, DepositMethod, FontConfig, HeaderTokens, I18nContextValue, I18nProvider, I18nProviderProps, InputTokens, ListTokens, LocaleCode, SUPPORTED_LOCALES, SearchTokens, ThemeColors, ThemeConfig, ThemeMode, UseSupportedDepositTokensOptions, WithdrawTransactionInfo, detectBrowserLocale, interpolate, normalizeLocale, useI18n, useSupportedDepositTokens } from '@unifold/ui-react';
+import { ChainType, DepositConfirmationMode, DepositMethod, DepositModalInitialScreen, ThemeMode, DepositMenuLayout, DepositMenuLayoutType, ThemeConfig, FontConfig, ComponentConfig, WithdrawTransactionInfo, AllowedCountryResult } from '@unifold/ui-react';
+export { AllowedCountryResult, BrowserWalletAmountQuickSelect, Button, ButtonProps, ButtonTokens, CardTokens, ComponentConfig, ComponentTokens, ConfirmingView, ContainerTokens, CustomThemeColors, DepositConfirmationMode, DepositModalInitialScreen as DepositInitialScreen, DepositMenuLayout, DepositMenuLayoutType, DepositMethod, DepositTab, FontConfig, HeaderTokens, I18nContextValue, I18nProvider, I18nProviderProps, InputTokens, ListTokens, LocaleCode, SUPPORTED_LOCALES, SearchTokens, ThemeColors, ThemeConfig, ThemeMode, UseSupportedDepositTokensOptions, WithdrawTransactionInfo, detectBrowserLocale, interpolate, normalizeLocale, useI18n, useSupportedDepositTokens } from '@unifold/ui-react';
 import { CheckoutMethod, CheckoutPaymentIntent, CheckoutEvent, EvmContractCall, DirectExecutionSucceededEvent, DepositEvent, WithdrawDirectExecutionSucceededEvent, WithdrawEvent } from '@unifold/core';
 export { ActionType, AutoSwapRequest, AutoSwapResponse, ChainType, CheckoutEvent, CheckoutEventType, CheckoutMethod, CheckoutPaymentIntent, CheckoutPaymentIntentData, CheckoutPaymentIntentSucceededEvent, CreateDepositAddressRequest, DefaultTokenChain, DefaultTokenMetadata, DefaultTokenResponse, DepositAddressResponse, DepositEvent, DepositEventType, DepositQuote, DepositQuoteRequest, DestinationToken, DestinationTokenChain, DirectExecution, DirectExecutionResponse, ExecutionStatus, FeaturedToken, FiatCurrenciesResponse, FiatCurrency, I18nStrings, IconUrl, IpAddressResponse, LockedQuoteLimits, LockedQuotePreview, LockedQuotePreviewRequest, OnrampQuote, OnrampQuotesRequest, OnrampQuotesResponse, OnrampSessionCreatedData, OnrampSessionCreatedEvent, OnrampSessionRequest, OnrampSessionResponse, PaymentIntent, PaymentIntentDepositAddress, PaymentIntentStatus, PaymentIntentType, PaymentNetwork, ProjectConfigResponse, QueryExecutionsRequest, QueryExecutionsResponse, SOLANA_USDC_ADDRESS, SendSolanaTransactionRequest, SendSolanaTransactionResponse, SourceToken, SourceTokenNetwork, StripeAccessTokenResponse, StripeAuthIntentResponse, StripeConfigResponse, StripeConfirmRequest, StripeConsumerWallet, StripeCreateSessionRequest, StripeCryptoCustomer, StripeCustomerVerification, StripeDefaultTokenResponse, StripeListResponse, StripeOnrampSession, StripeOnrampTransactionDetails, StripePaymentToken, StripeQuoteRequest, StripeQuotesResponse, SupportedChain, SupportedDepositTokensResponse, SupportedDestinationTokensResponse, SupportedSourceTokensQuery, SupportedSourceTokensResponse, SupportedToken, TokenChain, TokenChainIconUrl, TokenChainsResponse, UserIpInfo, Wallet, WithdrawDirectExecutionSucceededEvent, WithdrawEvent, WithdrawEventType, createDepositAddress, createOnrampSession, generatePrefixedKSUID, getApiBaseUrl, getChainName, getDefaultOnrampToken, getDepositQuote, getFiatCurrencies, getIconUrl, getIconUrlWithCdn, getIpAddress, getOnrampQuotes, getPreferredIconUrl, getProjectConfig, getSupportedDepositTokens, getSupportedDestinationTokens, getTokenChains, getWalletByChainType, i18n, queryExecutions, retrievePaymentIntent, sendSolanaTransaction, setApiConfig, stripeConfirmSession, stripeCreateAuthIntent, stripeCreateSession, stripeExchangeTokens, stripeGetConfig, stripeGetCustomer, stripeGetDefaultToken, stripeGetQuotes, stripeGetSession, stripeListPaymentTokens, stripeListWallets, stripeRefreshQuote, stripeRefreshToken, useUserIp } from '@unifold/core';
 
@@ -37,10 +37,25 @@ interface UnifoldConnectProviderConfig {
         /** Transfer input variant: 'single_input' or 'double_input'. Defaults to 'double_input' */
         transferInputVariant?: 'single_input' | 'double_input';
         /**
-         * Deposit menu layout: 'stacked' (default, stacked list) or 'tabs'
-         * (options grouped under "Use Crypto" / "Use Cash" tabs).
+         * Deposit menu layout, and the options belonging to it:
+         *
+         * ```ts
+         * layout: { type: 'tabs', tabOrder: ['cash', 'crypto'] }
+         * ```
+         *
+         * `layout.type` takes precedence over the superseded `displayMode`. A
+         * `layout` that omits `type` still falls back to it, so the layout's
+         * options can be adopted without changing how the layout is selected.
          */
-        displayMode?: 'stacked' | 'tabs';
+        layout?: DepositMenuLayout;
+        /**
+         * Deposit menu layout: 'tabs' (default, options grouped under "Use Crypto"
+         * / "Use Cash" tabs) or 'stacked' (every option in a single list).
+         *
+         * @deprecated Use `layout` instead, which also carries the layout's own
+         * options. `displayMode: 'stacked'` becomes `layout: { type: 'stacked' }`.
+         */
+        displayMode?: DepositMenuLayoutType;
         /** Enable "Transfer Crypto" option. Overrides dashboard default. Resolves as flag ?? dashboard value ?? true. */
         enableTransferCrypto?: boolean;
         /** Enable browser wallet connection option. Overrides dashboard default. Resolves as flag ?? dashboard value ?? true. */
@@ -179,6 +194,20 @@ interface DepositConfig {
      * suggested amount.
      */
     prefilledAmountUsd?: string;
+    /**
+     * Fiat on-ramp ("Deposit with Card") options, scoped to that flow so they can
+     * be added/removed independently of the rest of the deposit config.
+     */
+    fiatOnramp?: {
+        /**
+         * Fixed crypto (destination) amount to buy. When set, the card flow's fiat
+         * input is locked (view-only, shown as the USD→local-currency conversion) and
+         * the onramp is quoted/charged by this crypto amount with provider fees added
+         * on top. Only providers that support a fixed destination amount are shown,
+         * and only stablecoin destinations are supported.
+         */
+        destinationAmount?: string;
+    };
     /** How to confirm deposit: 'auto_ui' (default), 'auto_silent', or 'manual' */
     depositConfirmationMode?: DepositConfirmationMode;
     onSuccess?: (data: DepositResult) => void;

package/dist/index.d.ts

@@ -1,8 +1,8 @@
 import * as react_jsx_runtime from 'react/jsx-runtime';
 import React from 'react';
 import { QueryClient } from '@tanstack/react-query';
-import { ChainType, DepositConfirmationMode, DepositMethod, DepositModalInitialScreen, ThemeMode, ThemeConfig, FontConfig, ComponentConfig, WithdrawTransactionInfo, AllowedCountryResult } from '@unifold/ui-react';
-export { AllowedCountryResult, BrowserWalletAmountQuickSelect, Button, ButtonProps, ButtonTokens, CardTokens, ComponentConfig, ComponentTokens, ConfirmingView, ContainerTokens, CustomThemeColors, DepositConfirmationMode, DepositModalInitialScreen as DepositInitialScreen, DepositMethod, FontConfig, HeaderTokens, I18nContextValue, I18nProvider, I18nProviderProps, InputTokens, ListTokens, LocaleCode, SUPPORTED_LOCALES, SearchTokens, ThemeColors, ThemeConfig, ThemeMode, UseSupportedDepositTokensOptions, WithdrawTransactionInfo, detectBrowserLocale, interpolate, normalizeLocale, useI18n, useSupportedDepositTokens } from '@unifold/ui-react';
+import { ChainType, DepositConfirmationMode, DepositMethod, DepositModalInitialScreen, ThemeMode, DepositMenuLayout, DepositMenuLayoutType, ThemeConfig, FontConfig, ComponentConfig, WithdrawTransactionInfo, AllowedCountryResult } from '@unifold/ui-react';
+export { AllowedCountryResult, BrowserWalletAmountQuickSelect, Button, ButtonProps, ButtonTokens, CardTokens, ComponentConfig, ComponentTokens, ConfirmingView, ContainerTokens, CustomThemeColors, DepositConfirmationMode, DepositModalInitialScreen as DepositInitialScreen, DepositMenuLayout, DepositMenuLayoutType, DepositMethod, DepositTab, FontConfig, HeaderTokens, I18nContextValue, I18nProvider, I18nProviderProps, InputTokens, ListTokens, LocaleCode, SUPPORTED_LOCALES, SearchTokens, ThemeColors, ThemeConfig, ThemeMode, UseSupportedDepositTokensOptions, WithdrawTransactionInfo, detectBrowserLocale, interpolate, normalizeLocale, useI18n, useSupportedDepositTokens } from '@unifold/ui-react';
 import { CheckoutMethod, CheckoutPaymentIntent, CheckoutEvent, EvmContractCall, DirectExecutionSucceededEvent, DepositEvent, WithdrawDirectExecutionSucceededEvent, WithdrawEvent } from '@unifold/core';
 export { ActionType, AutoSwapRequest, AutoSwapResponse, ChainType, CheckoutEvent, CheckoutEventType, CheckoutMethod, CheckoutPaymentIntent, CheckoutPaymentIntentData, CheckoutPaymentIntentSucceededEvent, CreateDepositAddressRequest, DefaultTokenChain, DefaultTokenMetadata, DefaultTokenResponse, DepositAddressResponse, DepositEvent, DepositEventType, DepositQuote, DepositQuoteRequest, DestinationToken, DestinationTokenChain, DirectExecution, DirectExecutionResponse, ExecutionStatus, FeaturedToken, FiatCurrenciesResponse, FiatCurrency, I18nStrings, IconUrl, IpAddressResponse, LockedQuoteLimits, LockedQuotePreview, LockedQuotePreviewRequest, OnrampQuote, OnrampQuotesRequest, OnrampQuotesResponse, OnrampSessionCreatedData, OnrampSessionCreatedEvent, OnrampSessionRequest, OnrampSessionResponse, PaymentIntent, PaymentIntentDepositAddress, PaymentIntentStatus, PaymentIntentType, PaymentNetwork, ProjectConfigResponse, QueryExecutionsRequest, QueryExecutionsResponse, SOLANA_USDC_ADDRESS, SendSolanaTransactionRequest, SendSolanaTransactionResponse, SourceToken, SourceTokenNetwork, StripeAccessTokenResponse, StripeAuthIntentResponse, StripeConfigResponse, StripeConfirmRequest, StripeConsumerWallet, StripeCreateSessionRequest, StripeCryptoCustomer, StripeCustomerVerification, StripeDefaultTokenResponse, StripeListResponse, StripeOnrampSession, StripeOnrampTransactionDetails, StripePaymentToken, StripeQuoteRequest, StripeQuotesResponse, SupportedChain, SupportedDepositTokensResponse, SupportedDestinationTokensResponse, SupportedSourceTokensQuery, SupportedSourceTokensResponse, SupportedToken, TokenChain, TokenChainIconUrl, TokenChainsResponse, UserIpInfo, Wallet, WithdrawDirectExecutionSucceededEvent, WithdrawEvent, WithdrawEventType, createDepositAddress, createOnrampSession, generatePrefixedKSUID, getApiBaseUrl, getChainName, getDefaultOnrampToken, getDepositQuote, getFiatCurrencies, getIconUrl, getIconUrlWithCdn, getIpAddress, getOnrampQuotes, getPreferredIconUrl, getProjectConfig, getSupportedDepositTokens, getSupportedDestinationTokens, getTokenChains, getWalletByChainType, i18n, queryExecutions, retrievePaymentIntent, sendSolanaTransaction, setApiConfig, stripeConfirmSession, stripeCreateAuthIntent, stripeCreateSession, stripeExchangeTokens, stripeGetConfig, stripeGetCustomer, stripeGetDefaultToken, stripeGetQuotes, stripeGetSession, stripeListPaymentTokens, stripeListWallets, stripeRefreshQuote, stripeRefreshToken, useUserIp } from '@unifold/core';
 
@@ -37,10 +37,25 @@ interface UnifoldConnectProviderConfig {
         /** Transfer input variant: 'single_input' or 'double_input'. Defaults to 'double_input' */
         transferInputVariant?: 'single_input' | 'double_input';
         /**
-         * Deposit menu layout: 'stacked' (default, stacked list) or 'tabs'
-         * (options grouped under "Use Crypto" / "Use Cash" tabs).
+         * Deposit menu layout, and the options belonging to it:
+         *
+         * ```ts
+         * layout: { type: 'tabs', tabOrder: ['cash', 'crypto'] }
+         * ```
+         *
+         * `layout.type` takes precedence over the superseded `displayMode`. A
+         * `layout` that omits `type` still falls back to it, so the layout's
+         * options can be adopted without changing how the layout is selected.
          */
-        displayMode?: 'stacked' | 'tabs';
+        layout?: DepositMenuLayout;
+        /**
+         * Deposit menu layout: 'tabs' (default, options grouped under "Use Crypto"
+         * / "Use Cash" tabs) or 'stacked' (every option in a single list).
+         *
+         * @deprecated Use `layout` instead, which also carries the layout's own
+         * options. `displayMode: 'stacked'` becomes `layout: { type: 'stacked' }`.
+         */
+        displayMode?: DepositMenuLayoutType;
         /** Enable "Transfer Crypto" option. Overrides dashboard default. Resolves as flag ?? dashboard value ?? true. */
         enableTransferCrypto?: boolean;
         /** Enable browser wallet connection option. Overrides dashboard default. Resolves as flag ?? dashboard value ?? true. */
@@ -179,6 +194,20 @@ interface DepositConfig {
      * suggested amount.
      */
     prefilledAmountUsd?: string;
+    /**
+     * Fiat on-ramp ("Deposit with Card") options, scoped to that flow so they can
+     * be added/removed independently of the rest of the deposit config.
+     */
+    fiatOnramp?: {
+        /**
+         * Fixed crypto (destination) amount to buy. When set, the card flow's fiat
+         * input is locked (view-only, shown as the USD→local-currency conversion) and
+         * the onramp is quoted/charged by this crypto amount with provider fees added
+         * on top. Only providers that support a fixed destination amount are shown,
+         * and only stablecoin destinations are supported.
+         */
+        destinationAmount?: string;
+    };
     /** How to confirm deposit: 'auto_ui' (default), 'auto_silent', or 'manual' */
     depositConfirmationMode?: DepositConfirmationMode;
     onSuccess?: (data: DepositResult) => void;