@openfort/react 1.1.4 → 1.3.0

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,114 @@
+import { jsx, jsxs } from 'react/jsx-runtime';
+import { ChainTypeEnum } from '@openfort/openfort-js';
+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 { useOpenfortCore } from '../../../openfort/useOpenfort.js';
+import { ModalHeading } from '../../Common/Modal/styles.js';
+import PoweredByFooter from '../../Common/PoweredByFooter/index.js';
+import { FundingMethod, routes } from '../../Openfort/types.js';
+import { useOpenfort } from '../../Openfort/useOpenfort.js';
+import { PageContent } from '../../PageContent/index.js';
+import { EVM_BUY_CURRENCIES } from '../Buy/evmCurrencies.js';
+import { SOLANA_BUY_CURRENCIES } from '../Buy/solanaCurrencies.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 { chainType } = useOpenfortCore();
+    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,
+            // Default the card-buy to USDC per chain family. Without this the EVM default
+            // resolves to the wallet's (often empty) asset list — "no supported tokens" —
+            // and the Solana native default would resolve to SOL (isSameToken treats any
+            // two natives as equal).
+            asset: chainType === ChainTypeEnum.SVM ? SOLANA_BUY_CURRENCIES[0] : EVM_BUY_CURRENCIES[0],
+        }));
+        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));
+                    }) }) }), jsx(PoweredByFooter, {})] }));
+};
+
+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 · Bridge fee · 10 sec',
+        target: { kind: 'wallet' },
+    },
+    {
+        id: FundingMethod.ADDRESS,
+        title: 'Transfer from address',
+        subtitle: 'Min $1 · Bridge fee · 10 sec',
+        target: { kind: 'crypto' },
+    },
+    {
+        id: FundingMethod.EXCHANGE,
+        title: 'Transfer from Exchange',
+        subtitle: 'Min $5 · 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>;

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

@@ -0,0 +1,167 @@
+import { keyframes } from 'styled-components';
+import styled from '../../../styles/styled/index.js';
+
+/** Sizes to the content so short method lists don't leave a cut-looking gap. */
+const DepositContent = styled.div `
+  display: flex;
+  flex-direction: column;
+`;
+const pulse = keyframes `
+  0%, 100% { opacity: 1; }
+  50% { opacity: 0.45; }
+`;
+/** Separates the chain/currency step (above) from the action buttons (below). */
+const StepDivider = styled.div `
+  margin-top: 20px;
+  padding-top: 14px;
+  border-top: 1px solid var(--ck-body-divider, #ededed);
+  font-size: 11px;
+  font-weight: 600;
+  text-transform: uppercase;
+  letter-spacing: 0.4px;
+  color: var(--ck-body-color-muted, #6b7280);
+`;
+/** Sizes a brand logo (svg/img) to 20px for use inside wallet/exchange buttons. */
+const ButtonLogo = styled.span `
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  flex-shrink: 0;
+
+  svg,
+  img {
+    width: 20px;
+    height: 20px;
+    border-radius: 50%;
+  }
+`;
+/** Loading placeholder block. */
+const Skeleton = styled.div `
+  width: ${(p) => { var _a; return (_a = p.$w) !== null && _a !== void 0 ? _a : '100%'; }};
+  height: ${(p) => { var _a; return (_a = p.$h) !== null && _a !== void 0 ? _a : '16px'; }};
+  border-radius: ${(p) => { var _a; return (_a = p.$r) !== null && _a !== void 0 ? _a : '8px'; }};
+  background: var(--ck-body-divider, #ededed);
+  animation: ${pulse} 1.4s ease-in-out infinite;
+`;
+const OptionList = styled.div `
+  display: flex;
+  flex-direction: column;
+  gap: 8px;
+  margin-top: 12px;
+`;
+const OptionButton = styled.button `
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  width: 100%;
+  min-height: 52px;
+  box-sizing: border-box;
+  padding: 10px 14px;
+  border-radius: var(--ck-secondary-button-border-radius);
+  border: 1px solid var(--ck-body-divider);
+  background: var(--ck-secondary-button-background);
+  color: var(--ck-body-color);
+  cursor: pointer;
+  transition: background 150ms ease, border-color 150ms ease, color 150ms ease, opacity 150ms ease;
+  text-align: left;
+
+  &:hover:not(:disabled) {
+    background: var(--ck-secondary-button-hover-background);
+    border-color: var(--ck-body-color-muted);
+  }
+
+  &:disabled {
+    opacity: 0.5;
+    cursor: not-allowed;
+  }
+`;
+/** Left group: action icon badge + the title/subtitle text. */
+const OptionLeft = styled.div `
+  display: flex;
+  align-items: center;
+  gap: 12px;
+  min-width: 0;
+`;
+/** Holds the per-action icon on the left of each row (no background). */
+const OptionIconBadge = styled.div `
+  flex-shrink: 0;
+  width: 28px;
+  height: 28px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  color: var(--ck-body-color, #1a1a2e);
+`;
+/** Overlapping strip of token/wallet/exchange logos on the right of each row. */
+const LogoCluster = styled.div `
+  display: flex;
+  flex-shrink: 0;
+  align-items: center;
+  padding-left: 2px;
+
+  img,
+  svg {
+    width: 18px;
+    height: 18px;
+    border-radius: 50%;
+    margin-left: -7px;
+    border: 1.5px solid var(--ck-secondary-button-background, #fff);
+    background: var(--ck-body-background, #fff);
+    object-fit: cover;
+    box-sizing: content-box;
+  }
+  img:first-child,
+  svg:first-child {
+    margin-left: 0;
+  }
+
+  @media (max-width: 420px) {
+    padding-left: 2px;
+    img,
+    svg {
+      width: 16px;
+      height: 16px;
+    }
+  }
+`;
+const OptionInfo = styled.div `
+  display: flex;
+  flex-direction: column;
+  gap: 4px;
+  overflow: hidden;
+`;
+const OptionTitle = styled.span `
+  font-size: 14px;
+  font-weight: 600;
+  color: var(--ck-body-color);
+
+  @media (max-width: 420px) {
+    font-size: 13px;
+  }
+`;
+const OptionSubtitle = styled.span `
+  font-size: 11px;
+  font-weight: 500;
+  color: var(--ck-body-color-muted);
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: clip;
+
+  @media (max-width: 420px) {
+    font-size: 10px;
+  }
+`;
+/** Sized, centered wrapper so the QR (which sizes off its parent width) renders. */
+const QRWrapper = styled.div `
+  display: block;
+  margin: 14px auto;
+  width: 100%;
+  max-width: 300px;
+
+  > div {
+    width: 100%;
+  }
+`;
+
+export { ButtonLogo, DepositContent, LogoCluster, OptionButton, OptionIconBadge, OptionInfo, OptionLeft, OptionList, OptionSubtitle, OptionTitle, QRWrapper, Skeleton, StepDivider };
+//# sourceMappingURL=styles.js.map

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

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