@openfort/react 1.1.3 → 1.2.0

package/build/components/Pages/Deposit/LogoSelect.js

@@ -0,0 +1,95 @@
+import { jsxs, jsx } from 'react/jsx-runtime';
+import { useState, useRef, useEffect } from 'react';
+import styled from '../../../styles/styled/index.js';
+
+const Wrap = styled.div `
+  position: relative;
+`;
+const Trigger = styled.button `
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  width: 100%;
+  box-sizing: border-box;
+  padding: 8px 10px;
+  border-radius: 8px;
+  border: 1px solid var(--ck-body-divider, #e4e4e7);
+  background: var(--ck-body-background-secondary, #fafafa);
+  color: var(--ck-body-color, #1a1a2e);
+  font-size: 14px;
+  cursor: pointer;
+`;
+const TriggerLabel = styled.span `
+  flex: 1;
+  min-width: 0;
+  text-align: left;
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+`;
+const Chevron = styled.span `
+  color: var(--ck-body-color-muted, #6b7280);
+  font-size: 11px;
+  flex-shrink: 0;
+`;
+const Menu = styled.div `
+  position: absolute;
+  top: calc(100% + 4px);
+  left: 0;
+  right: 0;
+  z-index: 20;
+  max-height: 240px;
+  overflow-y: auto;
+  padding: 4px;
+  border-radius: 10px;
+  border: 1px solid var(--ck-body-divider, #e4e4e7);
+  background: var(--ck-body-background, #fff);
+  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12);
+`;
+const Item = styled.button `
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  width: 100%;
+  box-sizing: border-box;
+  padding: 8px 10px;
+  border: none;
+  border-radius: 6px;
+  background: transparent;
+  color: var(--ck-body-color, #1a1a2e);
+  font-size: 14px;
+  text-align: left;
+  cursor: pointer;
+
+  &:hover {
+    background: var(--ck-secondary-button-hover-background, #f3f3f5);
+  }
+`;
+const logoImg = { width: 20, height: 20, borderRadius: '50%', flexShrink: 0 };
+const hideBrokenLogo = (e) => {
+    e.currentTarget.style.display = 'none';
+};
+/** A select-like dropdown that shows a logo next to the trigger and each option. */
+function LogoSelect({ value, options, onChange, }) {
+    var _a, _b;
+    const [open, setOpen] = useState(false);
+    const ref = useRef(null);
+    const active = (_a = options.find((o) => o.value === value)) !== null && _a !== void 0 ? _a : options[0];
+    useEffect(() => {
+        if (!open)
+            return;
+        const onDown = (e) => {
+            if (ref.current && !ref.current.contains(e.target))
+                setOpen(false);
+        };
+        document.addEventListener('mousedown', onDown);
+        return () => document.removeEventListener('mousedown', onDown);
+    }, [open]);
+    return (jsxs(Wrap, { ref: ref, children: [jsxs(Trigger, { type: "button", onClick: () => setOpen((o) => !o), children: [(active === null || active === void 0 ? void 0 : active.logo) && jsx("img", { src: active.logo, alt: "", style: logoImg, onError: hideBrokenLogo }), jsx(TriggerLabel, { children: (_b = active === null || active === void 0 ? void 0 : active.label) !== null && _b !== void 0 ? _b : '' }), jsx(Chevron, { children: open ? '▴' : '▾' })] }), open && (jsx(Menu, { children: options.map((o) => (jsxs(Item, { type: "button", onClick: () => {
+                        onChange(o.value);
+                        setOpen(false);
+                    }, children: [o.logo && jsx("img", { src: o.logo, alt: "", style: logoImg, onError: hideBrokenLogo }), jsx("span", { children: o.label })] }, o.value))) }))] }));
+}
+
+export { LogoSelect };
+//# sourceMappingURL=LogoSelect.js.map

package/build/components/Pages/Deposit/LogoSelect.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"LogoSelect.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}

package/build/components/Pages/Deposit/OrDivider.d.ts

@@ -0,0 +1,2 @@
+/** Separates the scan-QR / copy-address path from the open-wallet / open-exchange path. */
+export declare function OrDivider(): import("react/jsx-runtime").JSX.Element;

package/build/components/Pages/Deposit/OrDivider.js

@@ -0,0 +1,10 @@
+import { jsxs, jsx } from 'react/jsx-runtime';
+import { orRow, orLine, orText } from './formStyles.js';
+
+/** Separates the scan-QR / copy-address path from the open-wallet / open-exchange path. */
+function OrDivider() {
+    return (jsxs("div", { style: orRow, children: [jsx("span", { style: orLine }), jsx("span", { style: orText, children: "or" }), jsx("span", { style: orLine })] }));
+}
+
+export { OrDivider };
+//# sourceMappingURL=OrDivider.js.map

package/build/components/Pages/Deposit/OrDivider.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"OrDivider.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;"}

package/build/components/Pages/Deposit/RouteSelectors.d.ts

@@ -0,0 +1,13 @@
+import type { FundingChain } from '../../../hooks/openfort/useFundingChains';
+type RouteSelectorsProps = {
+    chains: FundingChain[];
+    chain: string;
+    currency: string;
+    /** Label above the chain selector ("Supported chain" vs "Network"). */
+    chainLabel: string;
+    onChainChange: (chain: string) => void;
+    onCurrencyChange: (currency: string) => void;
+};
+/** The source chain + currency selectors (logo-aware dropdowns), from the live Relay list. */
+export declare function RouteSelectors({ chains, chain, currency, chainLabel, onChainChange, onCurrencyChange, }: RouteSelectorsProps): import("react/jsx-runtime").JSX.Element;
+export {};

package/build/components/Pages/Deposit/RouteSelectors.js

@@ -0,0 +1,19 @@
+import { jsxs, jsx } from 'react/jsx-runtime';
+import { twoCol, field } from './formStyles.js';
+import { LogoSelect } from './LogoSelect.js';
+import { Skeleton } from './styles.js';
+
+/** The source chain + currency selectors (logo-aware dropdowns), from the live Relay list. */
+function RouteSelectors({ chains, chain, currency, chainLabel, onChainChange, onCurrencyChange, }) {
+    var _a, _b, _c;
+    // Chains still loading — show placeholder selectors instead of empty dropdowns.
+    if (chains.length === 0) {
+        return (jsxs("div", { style: twoCol, children: [jsxs("div", { style: field, children: [chainLabel, jsx(Skeleton, { "$h": "40px", "$r": "8px" })] }), jsxs("div", { style: field, children: ["Currency", jsx(Skeleton, { "$h": "40px", "$r": "8px" })] })] }));
+    }
+    const activeChain = (_a = chains.find((c) => c.id === chain)) !== null && _a !== void 0 ? _a : chains[0];
+    const currencies = (_b = activeChain === null || activeChain === void 0 ? void 0 : activeChain.currencies) !== null && _b !== void 0 ? _b : [];
+    return (jsxs("div", { style: twoCol, children: [jsxs("div", { style: field, children: [chainLabel, jsx(LogoSelect, { value: (_c = activeChain === null || activeChain === void 0 ? void 0 : activeChain.id) !== null && _c !== void 0 ? _c : '', onChange: onChainChange, options: chains.map((c) => ({ value: c.id, label: c.name, logo: c.logo })) })] }), jsxs("div", { style: field, children: ["Currency", jsx(LogoSelect, { value: currency, onChange: onCurrencyChange, options: currencies.map((c) => ({ value: c.symbol, label: c.symbol, logo: c.logo })) })] })] }));
+}
+
+export { RouteSelectors };
+//# sourceMappingURL=RouteSelectors.js.map

package/build/components/Pages/Deposit/RouteSelectors.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"RouteSelectors.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;"}

package/build/components/Pages/Deposit/cexChains.d.ts

@@ -0,0 +1,9 @@
+/**
+ * CAIP-2 chains the CEX rail (Coinbase Onramp "send") can deliver to, with their
+ * display names. Single source of truth shared by the cex pay-link page
+ * (DepositCex) and the exchange-withdraw source filter (useDepositRoute), so a
+ * new deliverable chain is added in one place.
+ */
+export declare const CEX_CHAIN_NAMES: Record<string, string>;
+/** Whether the CEX rail can deliver to the given CAIP-2 chain. */
+export declare function isCexDeliverable(chain: string): boolean;

package/build/components/Pages/Deposit/cexChains.js

@@ -0,0 +1,23 @@
+/**
+ * CAIP-2 chains the CEX rail (Coinbase Onramp "send") can deliver to, with their
+ * display names. Single source of truth shared by the cex pay-link page
+ * (DepositCex) and the exchange-withdraw source filter (useDepositRoute), so a
+ * new deliverable chain is added in one place.
+ */
+const CEX_CHAIN_NAMES = {
+    'eip155:1': 'Ethereum',
+    'eip155:10': 'Optimism',
+    'eip155:137': 'Polygon',
+    'eip155:8453': 'Base',
+    'eip155:42161': 'Arbitrum',
+    'eip155:43114': 'Avalanche',
+    'solana:5eykt4UsFv8P8NJdTREpY1vzqKqZKvdp': 'Solana',
+};
+const CEX_CHAINS = new Set(Object.keys(CEX_CHAIN_NAMES));
+/** Whether the CEX rail can deliver to the given CAIP-2 chain. */
+function isCexDeliverable(chain) {
+    return CEX_CHAINS.has(chain);
+}
+
+export { CEX_CHAIN_NAMES, isCexDeliverable };
+//# sourceMappingURL=cexChains.js.map

package/build/components/Pages/Deposit/cexChains.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"cexChains.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;"}

package/build/components/Pages/Deposit/formStyles.d.ts

@@ -0,0 +1,24 @@
+import type { CSSProperties } from 'react';
+/** Shared inline styles for the Deposit crypto/exchange forms (ConnectKit CSS vars). */
+export declare const field: CSSProperties;
+/** Deposit address — kept to a single line so the full address reads cleanly. */
+export declare const codeStyle: CSSProperties;
+/** "Your deposit address" label above the address box. */
+export declare const depositAddressLabel: CSSProperties;
+/** Shadow card around the deposit address + copy button. */
+export declare const addressBox: CSSProperties;
+/** "──  or  ──" separator between the scan/copy path and the open-wallet path. */
+export declare const orRow: CSSProperties;
+export declare const orLine: CSSProperties;
+export declare const orText: CSSProperties;
+/** Chain + token selectors side by side. */
+export declare const twoCol: CSSProperties;
+/** Full-width wallet row for the one-column "Transfer from wallet" deeplink list. */
+export declare const walletListBtn: CSSProperties;
+/** Collapsible "Details" panel (min / fee / processing / max). */
+export declare const detailsBox: CSSProperties;
+export declare const detailsToggle: CSSProperties;
+export declare const detailsRow: CSSProperties;
+export declare const detailsLabel: CSSProperties;
+export declare const detailsValue: CSSProperties;
+export declare const chevron: CSSProperties;

package/build/components/Pages/Deposit/formStyles.js

@@ -0,0 +1,83 @@
+/** Shared inline styles for the Deposit crypto/exchange forms (ConnectKit CSS vars). */
+const field = { display: 'grid', gap: 6, fontSize: 13, textAlign: 'left' };
+/** Deposit address — kept to a single line so the full address reads cleanly. */
+const codeStyle = {
+    flex: 1,
+    minWidth: 0,
+    fontSize: 12,
+    fontFamily: 'monospace',
+    whiteSpace: 'nowrap',
+    overflow: 'hidden',
+    textAlign: 'center',
+};
+/** "Your deposit address" label above the address box. */
+const depositAddressLabel = {
+    marginTop: 14,
+    fontSize: 13,
+    fontWeight: 600,
+    textAlign: 'left',
+    color: 'var(--ck-body-color, #1a1a2e)',
+};
+/** Shadow card around the deposit address + copy button. */
+const addressBox = {
+    display: 'flex',
+    alignItems: 'center',
+    justifyContent: 'center',
+    gap: 8,
+    marginTop: 6,
+    padding: '12px 14px',
+    borderRadius: 12,
+    background: 'var(--ck-body-background, #fff)',
+    border: '1px solid var(--ck-body-divider, #ededed)',
+    boxShadow: '0 2px 8px rgba(0, 0, 0, 0.06)',
+};
+/** "──  or  ──" separator between the scan/copy path and the open-wallet path. */
+const orRow = { display: 'flex', alignItems: 'center', gap: 10, margin: '16px 0 4px' };
+const orLine = { flex: 1, height: 1, background: 'var(--ck-body-divider, #ededed)' };
+const orText = { fontSize: 12, fontWeight: 500, color: 'var(--ck-body-color-muted, #6b7280)' };
+/** Chain + token selectors side by side. */
+const twoCol = { display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 10, marginTop: 12 };
+/** Full-width wallet row for the one-column "Transfer from wallet" deeplink list. */
+const walletListBtn = {
+    display: 'block',
+    width: '100%',
+    boxSizing: 'border-box',
+    textAlign: 'center',
+    padding: '14px 16px',
+    borderRadius: 10,
+    fontSize: 14,
+    fontWeight: 600,
+    textDecoration: 'none',
+    background: 'var(--ck-secondary-button-background, #f3f3f5)',
+    color: 'var(--ck-body-color, #1a1a2e)',
+    border: '1px solid var(--ck-body-divider, #e4e4e7)',
+};
+/** Collapsible "Details" panel (min / fee / processing / max). */
+const detailsBox = {
+    marginTop: 14,
+};
+const detailsToggle = {
+    display: 'flex',
+    alignItems: 'center',
+    justifyContent: 'space-between',
+    width: '100%',
+    background: 'transparent',
+    border: 'none',
+    cursor: 'pointer',
+    padding: '6px 0',
+    color: 'var(--ck-body-color, #1a1a2e)',
+    fontSize: 14,
+    fontWeight: 600,
+};
+const detailsRow = {
+    display: 'flex',
+    justifyContent: 'space-between',
+    padding: '4px 0',
+    fontSize: 13,
+};
+const detailsLabel = { color: 'var(--ck-body-color-muted, #6b7280)' };
+const detailsValue = { color: 'var(--ck-body-color, #1a1a2e)' };
+const chevron = { color: 'var(--ck-body-color-muted, #6b7280)', fontSize: 12 };
+
+export { addressBox, chevron, codeStyle, depositAddressLabel, detailsBox, detailsLabel, detailsRow, detailsToggle, detailsValue, field, orLine, orRow, orText, twoCol, walletListBtn };
+//# sourceMappingURL=formStyles.js.map

package/build/components/Pages/Deposit/formStyles.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"formStyles.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}

package/build/components/Pages/Deposit/index.d.ts

@@ -0,0 +1,7 @@
+/**
+ * Deposit hub — one entry point, a method selector. Each row shows an action
+ * icon on the left and the tokens/wallets/exchanges it covers on the right.
+ * Crypto/CEX route into the funding-session Pages; fiat rows reuse the Buy flow.
+ */
+declare const Deposit: () => import("react/jsx-runtime").JSX.Element;
+export default Deposit;

package/build/components/Pages/Deposit/index.js

@@ -0,0 +1,100 @@
+import { jsx, jsxs } from 'react/jsx-runtime';
+import { DollarIcon, BuyIcon, WalletIcon, ReceiveIcon, ExternalLinkIcon } from '../../../assets/icons.js';
+import Logos from '../../../assets/logos.js';
+import { useFunding } from '../../../hooks/openfort/useFunding.js';
+import { useFundingChains } from '../../../hooks/openfort/useFundingChains.js';
+import useIsMobile from '../../../hooks/useIsMobile.js';
+import { ModalHeading } from '../../Common/Modal/styles.js';
+import { FundingMethod, routes } from '../../Openfort/types.js';
+import { useOpenfort } from '../../Openfort/useOpenfort.js';
+import { PageContent } from '../../PageContent/index.js';
+import { getPaymentOptions } from './paymentOptions.js';
+import { DepositContent, OptionList, OptionButton, OptionLeft, OptionIconBadge, OptionInfo, OptionTitle, OptionSubtitle, LogoCluster } from './styles.js';
+
+/** The action icon shown in each row's left badge (icons default to 20×20). */
+const METHOD_ICON = {
+    [FundingMethod.APPLE_PAY]: jsx(DollarIcon, {}),
+    [FundingMethod.CARD]: jsx(BuyIcon, {}),
+    [FundingMethod.WALLET]: jsx(WalletIcon, {}),
+    [FundingMethod.ADDRESS]: jsx(ReceiveIcon, {}),
+    [FundingMethod.EXCHANGE]: jsx(ExternalLinkIcon, {}),
+};
+/** Brand logos previewed on the right of each row (vendored SVGs, no external URLs). */
+const BRAND_LOGOS = {
+    [FundingMethod.WALLET]: [
+        jsx(Logos.MetaMask, { background: true }, "mm"),
+        jsx(Logos.Phantom, { background: true }, "ph"),
+        jsx(Logos.Coinbase, { background: true }, "cb"),
+        jsx(Logos.Trust, {}, "tw"),
+        jsx(Logos.Rainbow, { round: true }, "rb"),
+    ],
+    [FundingMethod.EXCHANGE]: [jsx(Logos.Coinbase, { background: true }, "cb"), jsx(Logos.Binance, {}, "bn")],
+    [FundingMethod.CARD]: [jsx(Logos.Visa, {}, "visa"), jsx(Logos.Mastercard, {}, "mc")],
+    [FundingMethod.APPLE_PAY]: [jsx(Logos.Apple, {}, "apple")],
+};
+const hideBrokenLogo = (e) => {
+    e.currentTarget.style.display = 'none';
+};
+/**
+ * Deposit hub — one entry point, a method selector. Each row shows an action
+ * icon on the left and the tokens/wallets/exchanges it covers on the right.
+ * Crypto/CEX route into the funding-session Pages; fiat rows reuse the Buy flow.
+ */
+const Deposit = () => {
+    var _a;
+    const { setRoute, setBuyForm, uiConfig } = useOpenfort();
+    const isMobile = useIsMobile();
+    const { isAvailable } = useFunding();
+    const { chains } = useFundingChains();
+    const options = getPaymentOptions({
+        isMobile,
+        fundingAvailable: isAvailable,
+        methods: (_a = uiConfig.funding) === null || _a === void 0 ? void 0 : _a.methods,
+    });
+    // Distinct source-currency logos (USDC, USDT, ETH, …) for the "from address" row.
+    const currencyLogos = [];
+    const seenSymbols = new Set();
+    for (const c of chains) {
+        for (const cur of c.currencies) {
+            if (cur.logo && !seenSymbols.has(cur.symbol)) {
+                seenSymbols.add(cur.symbol);
+                currencyLogos.push(cur.logo);
+            }
+        }
+    }
+    // Keep the preview compact: at most 4 logos (fewer on mobile).
+    const maxLogos = isMobile ? 3 : 4;
+    /** The logos to preview on the right of a row. */
+    const clusterFor = (id) => {
+        var _a;
+        if (id === FundingMethod.ADDRESS) {
+            return currencyLogos.slice(0, maxLogos).map((src) => jsx("img", { src: src, alt: "", onError: hideBrokenLogo }, src));
+        }
+        return ((_a = BRAND_LOGOS[id]) !== null && _a !== void 0 ? _a : []).slice(0, maxLogos);
+    };
+    const go = (target) => {
+        if (target.kind === 'crypto') {
+            setRoute(routes.DEPOSIT_CRYPTO);
+            return;
+        }
+        if (target.kind === 'wallet') {
+            setRoute(routes.DEPOSIT_WALLET);
+            return;
+        }
+        if (target.kind === 'cex') {
+            setRoute(routes.DEPOSIT_CEX);
+            return;
+        }
+        // Fiat rails reuse the existing Buy flow; preselect the chosen provider so
+        // Apple Pay / Card land on the right rail.
+        setBuyForm((prev) => ({ ...prev, providerId: target.providerId }));
+        setRoute(routes.BUY);
+    };
+    return (jsxs(PageContent, { onBack: routes.CONNECTED, children: [jsx(ModalHeading, { children: "Add funds" }), jsx(DepositContent, { children: jsx(OptionList, { children: options.map((option) => {
+                        var _a;
+                        return (jsxs(OptionButton, { type: "button", disabled: option.disabled, onClick: () => go(option.target), children: [jsxs(OptionLeft, { children: [jsx(OptionIconBadge, { children: METHOD_ICON[option.id] }), jsxs(OptionInfo, { children: [jsx(OptionTitle, { children: option.title }), jsx(OptionSubtitle, { children: (_a = option.disabledReason) !== null && _a !== void 0 ? _a : option.subtitle })] })] }), jsx(LogoCluster, { children: clusterFor(option.id) })] }, option.id));
+                    }) }) })] }));
+};
+
+export { Deposit as default };
+//# sourceMappingURL=index.js.map

package/build/components/Pages/Deposit/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}

package/build/components/Pages/Deposit/paymentOptions.d.ts

@@ -0,0 +1,49 @@
+import { type BuyProviderId, FundingMethod } from '../../Openfort/types';
+/**
+ * What a row routes into:
+ * - `buy`: the existing fiat onramp flow, with a rail (provider) preselected.
+ * - `crypto` / `wallet` / `cex`: the new funding-session Pages.
+ */
+export type DepositMethodTarget = {
+    kind: 'buy';
+    providerId: BuyProviderId;
+} | {
+    kind: 'crypto';
+} | {
+    kind: 'wallet';
+} | {
+    kind: 'cex';
+};
+type DepositMethod = {
+    id: FundingMethod;
+    title: string;
+    /** Speed/fee hint, e.g. "instant, ~4% fee". */
+    subtitle: string;
+    target: DepositMethodTarget;
+    /** Only show on mobile devices (e.g. Apple Pay). */
+    mobileOnly?: boolean;
+};
+/** Context used to order/filter the rows for the current device. */
+type PaymentOptionsContext = {
+    isMobile: boolean;
+    /** When the funding backend is unavailable, crypto/CEX rows are disabled. */
+    fundingAvailable: boolean;
+    /**
+     * Integrator-selected methods, in display order. When set, only these show
+     * (still subject to device/availability gating). Omit to show all.
+     */
+    methods?: FundingMethod[];
+};
+/** A row ready to render: resolved order, plus disabled state + reason. */
+type ResolvedDepositOption = DepositMethod & {
+    disabled: boolean;
+    disabledReason?: string;
+};
+/**
+ * Resolve the deposit rows for the current context: pick the integrator's
+ * `methods` (or all) in order, filter device-incompatible rails, default-order
+ * Apple Pay first on mobile when the order isn't explicit, and mark disabled
+ * rows with a reason.
+ */
+export declare function getPaymentOptions(ctx: PaymentOptionsContext): ResolvedDepositOption[];
+export {};

package/build/components/Pages/Deposit/paymentOptions.js

@@ -0,0 +1,63 @@
+import { FundingMethod } from '../../Openfort/types.js';
+
+const ALL_METHODS = [
+    {
+        id: FundingMethod.APPLE_PAY,
+        title: 'Apple Pay',
+        subtitle: 'No min · ~3.5% fee · Instant',
+        target: { kind: 'buy', providerId: 'stripe' },
+        mobileOnly: true,
+    },
+    {
+        id: FundingMethod.CARD,
+        title: 'Card',
+        subtitle: 'Min $10 · ~4% fee · Instant',
+        target: { kind: 'buy', providerId: 'stripe' },
+    },
+    {
+        id: FundingMethod.WALLET,
+        title: 'Transfer from wallet',
+        subtitle: 'Min $1 · No fee · 10 sec',
+        target: { kind: 'wallet' },
+    },
+    {
+        id: FundingMethod.ADDRESS,
+        title: 'Transfer from address',
+        subtitle: 'Min $1 · No fee · 10 sec',
+        target: { kind: 'crypto' },
+    },
+    {
+        id: FundingMethod.EXCHANGE,
+        title: 'Transfer from Exchange',
+        subtitle: 'Min $1 · Network fee · 2 min',
+        target: { kind: 'cex' },
+    },
+];
+/**
+ * Resolve the deposit rows for the current context: pick the integrator's
+ * `methods` (or all) in order, filter device-incompatible rails, default-order
+ * Apple Pay first on mobile when the order isn't explicit, and mark disabled
+ * rows with a reason.
+ */
+function getPaymentOptions(ctx) {
+    const explicitMethods = ctx.methods && ctx.methods.length > 0 ? ctx.methods : null;
+    const byId = new Map(ALL_METHODS.map((m) => [m.id, m]));
+    const base = explicitMethods
+        ? explicitMethods.map((id) => byId.get(id)).filter((m) => m !== undefined)
+        : ALL_METHODS;
+    const visible = base.filter((m) => (m.mobileOnly ? ctx.isMobile : true));
+    // Honor the integrator's explicit order; otherwise float Apple Pay first on mobile.
+    const ordered = !explicitMethods && ctx.isMobile
+        ? [...visible].sort((a, b) => Number(b.id === FundingMethod.APPLE_PAY) - Number(a.id === FundingMethod.APPLE_PAY))
+        : visible;
+    return ordered.map((method) => {
+        const fundingRail = method.target.kind === 'crypto' || method.target.kind === 'wallet' || method.target.kind === 'cex';
+        if (fundingRail && !ctx.fundingAvailable) {
+            return { ...method, disabled: true, disabledReason: 'Coming soon' };
+        }
+        return { ...method, disabled: false };
+    });
+}
+
+export { getPaymentOptions };
+//# sourceMappingURL=paymentOptions.js.map

package/build/components/Pages/Deposit/paymentOptions.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"paymentOptions.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}

package/build/components/Pages/Deposit/sources.d.ts

@@ -0,0 +1,17 @@
+/**
+ * Funding destination defaults + small formatting helpers. The source chain/token
+ * registry is no longer hardcoded here — it's fetched live from Relay via
+ * `useFundingChains`.
+ */
+/** Destination default: USDC on Base (used when the integrator doesn't override). */
+export declare const DEST_CHAIN = "eip155:8453";
+export declare const DEST_USDC = "0x833589fCD6eDb6E08f4c7C32D4f71b54bdA02913";
+/**
+ * Solana destination default: USDC on Solana mainnet, used for SVM wallets when the
+ * integrator doesn't override. The chain id must match the Solana entry in
+ * {@link DEFAULT_SOURCE_CHAINS} so a same-chain selection resolves to the wallet address.
+ */
+export declare const DEST_CHAIN_SOL = "solana:5eykt4UsFv8P8NJdTREpY1vzqKqZKvdp";
+export declare const DEST_USDC_SOL = "EPjFWdd5AufqSSqeM2qN1xzybapC8G4wEGGkZwyTDt1v";
+/** True for a CAIP-2 Solana chain id. */
+export declare function isSolana(chain: string): boolean;

package/build/components/Pages/Deposit/sources.js

@@ -0,0 +1,22 @@
+/**
+ * Funding destination defaults + small formatting helpers. The source chain/token
+ * registry is no longer hardcoded here — it's fetched live from Relay via
+ * `useFundingChains`.
+ */
+/** Destination default: USDC on Base (used when the integrator doesn't override). */
+const DEST_CHAIN = 'eip155:8453';
+const DEST_USDC = '0x833589fCD6eDb6E08f4c7C32D4f71b54bdA02913';
+/**
+ * Solana destination default: USDC on Solana mainnet, used for SVM wallets when the
+ * integrator doesn't override. The chain id must match the Solana entry in
+ * {@link DEFAULT_SOURCE_CHAINS} so a same-chain selection resolves to the wallet address.
+ */
+const DEST_CHAIN_SOL = 'solana:5eykt4UsFv8P8NJdTREpY1vzqKqZKvdp';
+const DEST_USDC_SOL = 'EPjFWdd5AufqSSqeM2qN1xzybapC8G4wEGGkZwyTDt1v';
+/** True for a CAIP-2 Solana chain id. */
+function isSolana(chain) {
+    return chain.startsWith('solana:');
+}
+
+export { DEST_CHAIN, DEST_CHAIN_SOL, DEST_USDC, DEST_USDC_SOL, isSolana };
+//# sourceMappingURL=sources.js.map

package/build/components/Pages/Deposit/sources.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"sources.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;"}

package/build/components/Pages/Deposit/styles.d.ts

@@ -0,0 +1,25 @@
+/** Sizes to the content so short method lists don't leave a cut-looking gap. */
+export declare const DepositContent: import("styled-components").StyledComponent<"div", any, {}, never>;
+/** Separates the chain/currency step (above) from the action buttons (below). */
+export declare const StepDivider: import("styled-components").StyledComponent<"div", any, {}, never>;
+/** Sizes a brand logo (svg/img) to 20px for use inside wallet/exchange buttons. */
+export declare const ButtonLogo: import("styled-components").StyledComponent<"span", any, {}, never>;
+/** Loading placeholder block. */
+export declare const Skeleton: import("styled-components").StyledComponent<"div", any, {
+    $w?: string;
+    $h?: string;
+    $r?: string;
+}, never>;
+export declare const OptionList: import("styled-components").StyledComponent<"div", any, {}, never>;
+export declare const OptionButton: import("styled-components").StyledComponent<"button", any, {}, never>;
+/** Left group: action icon badge + the title/subtitle text. */
+export declare const OptionLeft: import("styled-components").StyledComponent<"div", any, {}, never>;
+/** Holds the per-action icon on the left of each row (no background). */
+export declare const OptionIconBadge: import("styled-components").StyledComponent<"div", any, {}, never>;
+/** Overlapping strip of token/wallet/exchange logos on the right of each row. */
+export declare const LogoCluster: import("styled-components").StyledComponent<"div", any, {}, never>;
+export declare const OptionInfo: import("styled-components").StyledComponent<"div", any, {}, never>;
+export declare const OptionTitle: import("styled-components").StyledComponent<"span", any, {}, never>;
+export declare const OptionSubtitle: import("styled-components").StyledComponent<"span", any, {}, never>;
+/** Sized, centered wrapper so the QR (which sizes off its parent width) renders. */
+export declare const QRWrapper: import("styled-components").StyledComponent<"div", any, {}, never>;