@openfort/react 1.1.4 → 1.3.0

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

@@ -0,0 +1,34 @@
+import { type FundingChain, type FundingCurrency } from '../../../hooks/openfort/useFundingChains';
+/** Which rail the route feeds: self-custody wallet send vs exchange withdrawal. */
+type DepositRouteKind = 'crypto' | 'cex';
+/**
+ * Shared state for a deposit route: the source chain/currency selection (sourced
+ * live from Relay via {@link useFundingChains}) plus the resolved deposit
+ * address. Both the "from wallet"/"from exchange" tabs and the standalone "from
+ * address" page build on this — they differ only in the lead buttons.
+ */
+export declare function useDepositRoute(kind: DepositRouteKind): {
+    chains: FundingChain[];
+    chainsLoading: boolean;
+    chain: string;
+    setChain: import("react").Dispatch<import("react").SetStateAction<string>>;
+    currency: string;
+    setCurrency: import("react").Dispatch<import("react").SetStateAction<string>>;
+    currencies: FundingCurrency[];
+    activeChain: FundingChain;
+    activeCurrency: FundingCurrency;
+    address: string | undefined;
+    target: {
+        chain: string;
+        currency: string;
+    };
+    pm: import("../../../hooks/openfort/useFunding").PaymentMethod | null;
+    receiverAddress: string | null;
+    sameChain: boolean;
+    status: import("../../../hooks/openfort/useFunding").SessionStatus | "idle";
+    loading: boolean;
+    error: Error | null;
+    isAvailable: boolean;
+    payLink: (params: import("../../../hooks/openfort/useFunding").PayLinkParams) => Promise<string>;
+};
+export {};

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

@@ -0,0 +1,106 @@
+import { useState, useRef, useEffect } from 'react';
+import { useEthereumEmbeddedWallet } from '../../../ethereum/hooks/useEthereumEmbeddedWallet.js';
+import { useFunding } from '../../../hooks/openfort/useFunding.js';
+import { useFundingChains, nominalUnits } from '../../../hooks/openfort/useFundingChains.js';
+import { useSolanaEmbeddedWallet } from '../../../solana/hooks/useSolanaEmbeddedWallet.js';
+import { logger } from '../../../utils/logger.js';
+import { isCexDeliverable } from './cexChains.js';
+import { isSolana } from './sources.js';
+import { useFundingTarget } from './useFundingTarget.js';
+
+function paymentMethodFor(chain, currency) {
+    const source = { chain, currency: currency.address, amount: nominalUnits(currency.decimals, currency.native) };
+    // A CEX withdrawal is just an on-chain send to the Relay deposit address — the
+    // funding API has no separate 'cex' type, so every source resolves to evm/solana.
+    return { type: isSolana(chain) ? 'solana' : 'evm', source };
+}
+/**
+ * Shared state for a deposit route: the source chain/currency selection (sourced
+ * live from Relay via {@link useFundingChains}) plus the resolved deposit
+ * address. Both the "from wallet"/"from exchange" tabs and the standalone "from
+ * address" page build on this — they differ only in the lead buttons.
+ */
+function useDepositRoute(kind) {
+    var _a, _b, _c, _d, _e, _f, _g, _h;
+    const ethWallet = useEthereumEmbeddedWallet();
+    const solWallet = useSolanaEmbeddedWallet();
+    const { session, status, error, loading, isAvailable, fund, payLink, reset } = useFunding();
+    const { chains: allChains, loading: chainsLoading } = useFundingChains();
+    const target = useFundingTarget();
+    // The deposit recipient must live on the TARGET chain, so resolve the wallet by
+    // the target's family — not the active chainType, which can disagree with the
+    // target (e.g. an EVM session whose funding target is still Solana) and would
+    // send an EVM address as the recipient for a Solana destination.
+    const wallet = isSolana(target.chain) ? solWallet : ethWallet;
+    // Sources are the full Relay list, including the destination chain itself so
+    // same-chain deposits (e.g. Solana → Solana) are offered as a plain transfer to
+    // the wallet address, alongside the cross-chain bridge routes. The CEX rail rides
+    // Coinbase Onramp, which only delivers to a fixed set of EVM chains.
+    const chains = kind === 'cex' ? allChains.filter((c) => isCexDeliverable(c.id)) : allChains;
+    // Where funds land: the active embedded wallet (the Relay deposit recipient).
+    const address = wallet.status === 'connected' ? wallet.address : undefined;
+    const [chainId, setChainId] = useState('');
+    const [currencySymbol, setCurrencySymbol] = useState('');
+    const lastKey = useRef('');
+    // Derive the active selection, falling back to the first available chain/currency
+    // so the picker is valid before the user touches it and as chains load in.
+    const activeChain = (_a = chains.find((c) => c.id === chainId)) !== null && _a !== void 0 ? _a : chains[0];
+    const currencies = (_b = activeChain === null || activeChain === void 0 ? void 0 : activeChain.currencies) !== null && _b !== void 0 ? _b : [];
+    const activeCurrency = (_c = currencies.find((c) => c.symbol === currencySymbol)) !== null && _c !== void 0 ? _c : currencies[0];
+    const chain = (_d = activeChain === null || activeChain === void 0 ? void 0 : activeChain.id) !== null && _d !== void 0 ? _d : target.chain;
+    const sameChain = chain === target.chain;
+    const receiverAddress = sameChain
+        ? (address !== null && address !== void 0 ? address : null)
+        : ((_f = (_e = session === null || session === void 0 ? void 0 : session.paymentMethod) === null || _e === void 0 ? void 0 : _e.receiverAddress) !== null && _f !== void 0 ? _f : null);
+    const pm = (_g = session === null || session === void 0 ? void 0 : session.paymentMethod) !== null && _g !== void 0 ? _g : null;
+    useEffect(() => {
+        if (!address || !isAvailable || !activeChain || !activeCurrency)
+            return;
+        if (sameChain) {
+            lastKey.current = '';
+            reset();
+            return;
+        }
+        const key = `${kind}:${activeChain.id}:${activeCurrency.symbol}`;
+        if (lastKey.current === key)
+            return;
+        lastKey.current = key;
+        logger.log('[funding:route] resolved', {
+            kind,
+            sourceChain: activeChain.id,
+            currency: activeCurrency.symbol,
+            destChain: target.chain,
+        });
+        fund({ chain: target.chain, currency: target.currency, address }, paymentMethodFor(activeChain.id, activeCurrency)).catch(() => { });
+    }, [address, activeChain, activeCurrency, isAvailable, sameChain, fund, reset, target.chain, target.currency, kind]);
+    // Surface an empty source list (e.g. no Coinbase-deliverable chains) for diagnosis.
+    useEffect(() => {
+        if (!isAvailable || chainsLoading || chains.length > 0)
+            return;
+        logger.warn('[funding:route] no source chains available', { kind, destChain: target.chain });
+    }, [isAvailable, chainsLoading, chains.length, kind, target.chain]);
+    return {
+        chains,
+        chainsLoading,
+        chain,
+        setChain: setChainId,
+        currency: (_h = activeCurrency === null || activeCurrency === void 0 ? void 0 : activeCurrency.symbol) !== null && _h !== void 0 ? _h : '',
+        setCurrency: setCurrencySymbol,
+        currencies,
+        activeChain,
+        activeCurrency,
+        address,
+        target,
+        pm,
+        receiverAddress,
+        sameChain,
+        status,
+        loading,
+        error,
+        isAvailable,
+        payLink,
+    };
+}
+
+export { useDepositRoute };
+//# sourceMappingURL=useDepositRoute.js.map

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

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

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

@@ -0,0 +1,11 @@
+/**
+ * The destination route Deposit-hub funding settles into. Integrators override the
+ * chain and currency via `uiConfig.funding.{targetChain,targetCurrency}`; both
+ * default to USDC on the active chain type (Base for EVM, Solana mainnet for SVM)
+ * so the flow works with zero configuration. The deposit recipient is always the
+ * active embedded wallet for the destination chain family — callers resolve it.
+ */
+export declare function useFundingTarget(): {
+    chain: string;
+    currency: string;
+};

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

@@ -0,0 +1,25 @@
+import { ChainTypeEnum } from '@openfort/openfort-js';
+import { useOpenfortCore } from '../../../openfort/useOpenfort.js';
+import { useOpenfort } from '../../Openfort/useOpenfort.js';
+import { DEST_CHAIN_SOL, DEST_CHAIN, DEST_USDC_SOL, DEST_USDC } from './sources.js';
+
+/**
+ * The destination route Deposit-hub funding settles into. Integrators override the
+ * chain and currency via `uiConfig.funding.{targetChain,targetCurrency}`; both
+ * default to USDC on the active chain type (Base for EVM, Solana mainnet for SVM)
+ * so the flow works with zero configuration. The deposit recipient is always the
+ * active embedded wallet for the destination chain family — callers resolve it.
+ */
+function useFundingTarget() {
+    var _a, _b, _c, _d;
+    const { uiConfig } = useOpenfort();
+    const { chainType } = useOpenfortCore();
+    const isSolana = chainType === ChainTypeEnum.SVM;
+    return {
+        chain: (_b = (_a = uiConfig.funding) === null || _a === void 0 ? void 0 : _a.targetChain) !== null && _b !== void 0 ? _b : (isSolana ? DEST_CHAIN_SOL : DEST_CHAIN),
+        currency: (_d = (_c = uiConfig.funding) === null || _c === void 0 ? void 0 : _c.targetCurrency) !== null && _d !== void 0 ? _d : (isSolana ? DEST_USDC_SOL : DEST_USDC),
+    };
+}
+
+export { useFundingTarget };
+//# sourceMappingURL=useFundingTarget.js.map

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

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

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

@@ -0,0 +1,11 @@
+/**
+ * Transfer from Exchange — the user enters an amount; "Open Coinbase" hands off to
+ * a hosted Coinbase pay-link that delivers to the embedded wallet on the
+ * destination chain. The destination (chain + currency + address) is bound to a
+ * funding session created up-front, so the client can't redirect the funds — only
+ * the amount is chosen here. After hand-off the bound session is polled until it
+ * settles (advanced by the Coinbase webhook on the backend), driving the
+ * success / failed screen. No Relay routing; Binance is gated until its rail lands.
+ */
+declare const DepositCex: () => import("react/jsx-runtime").JSX.Element;
+export default DepositCex;

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

@@ -0,0 +1,229 @@
+import { jsx, jsxs } from 'react/jsx-runtime';
+import { ChainTypeEnum } from '@openfort/openfort-js';
+import { useState, useRef, useEffect, useMemo } from 'react';
+import Logos from '../../../assets/logos.js';
+import { useEthereumEmbeddedWallet } from '../../../ethereum/hooks/useEthereumEmbeddedWallet.js';
+import { useFunding } from '../../../hooks/openfort/useFunding.js';
+import { useFundingChains } from '../../../hooks/openfort/useFundingChains.js';
+import { invalidateBalance } from '../../../hooks/useBalance.js';
+import { useOpenfortCore } from '../../../openfort/useOpenfort.js';
+import { logger } from '../../../utils/logger.js';
+import { ModalHeading, ModalBody } from '../../Common/Modal/styles.js';
+import { routes } from '../../Openfort/types.js';
+import { useOpenfort } from '../../Openfort/useOpenfort.js';
+import { PageContent } from '../../PageContent/index.js';
+import { Section, SectionLabel, AmountCard, CurrencySymbol, AmountInput, PresetList, PresetButton } from '../Buy/styles.js';
+import { isCexDeliverable, CEX_CHAIN_NAMES } from '../Deposit/cexChains.js';
+import { isDepositFlowActive, DepositProgress } from '../Deposit/DepositProgress.js';
+import { DepositStatus } from '../Deposit/DepositStatus.js';
+import { walletListBtn } from '../Deposit/formStyles.js';
+import { isSolana, DEST_USDC } from '../Deposit/sources.js';
+import { StepDivider, ButtonLogo } from '../Deposit/styles.js';
+import { useFundingTarget } from '../Deposit/useFundingTarget.js';
+import { sanitizeForParsing, sanitizeAmountInput } from '../Send/utils.js';
+
+/** Exchange rails. Binance is gated until its rail lands. */
+const EXCHANGES = [
+    { id: 'coinbase', comingSoon: false },
+    { id: 'binance', comingSoon: true },
+];
+/** Exchange brand logos keyed by exchange id. */
+const EXCHANGE_LOGO = {
+    coinbase: jsx(Logos.Coinbase, { background: true }),
+    binance: jsx(Logos.Binance, {}),
+};
+/** Coinbase Onramp minimum (USD, ≈ USDC units); enforced client-side for UX. */
+const MIN_AMOUNT = 5;
+const PRESETS = [10, 25, 50];
+function titleCase(s) {
+    return s.charAt(0).toUpperCase() + s.slice(1);
+}
+const helperText = { fontSize: 12, color: 'var(--ck-body-color-muted, #6b7280)' };
+const errorHelper = { fontSize: 12, color: '#dc2626' };
+const destinationRow = { display: 'flex', alignItems: 'center', gap: 6, ...helperText };
+const destinationLogo = { width: 14, height: 14, borderRadius: '50%' };
+const hideBrokenLogo = (e) => {
+    e.currentTarget.style.display = 'none';
+};
+/**
+ * Transfer from Exchange — the user enters an amount; "Open Coinbase" hands off to
+ * a hosted Coinbase pay-link that delivers to the embedded wallet on the
+ * destination chain. The destination (chain + currency + address) is bound to a
+ * funding session created up-front, so the client can't redirect the funds — only
+ * the amount is chosen here. After hand-off the bound session is polled until it
+ * settles (advanced by the Coinbase webhook on the backend), driving the
+ * success / failed screen. No Relay routing; Binance is gated until its rail lands.
+ */
+const DepositCex = () => {
+    var _a, _b, _c, _d, _e, _f;
+    const { triggerResize } = useOpenfort();
+    const target = useFundingTarget();
+    // CEX (Coinbase pay-link + session) is served by the Openfort API, not the
+    // standalone funding service — resolve this rail's base URL from the API backend.
+    const { isAvailable, createSession, track, payLink, status } = useFunding({ useBackendUrl: true });
+    const wallet = useEthereumEmbeddedWallet();
+    const { embeddedAccounts } = useOpenfortCore();
+    const { chains } = useFundingChains();
+    const [amount, setAmount] = useState(String(MIN_AMOUNT));
+    const [pressedPreset, setPressedPreset] = useState(null);
+    const [session, setSession] = useState(null);
+    const [error, setError] = useState(null);
+    const [opened, setOpened] = useState(false);
+    // Resolve the destination by chain family: EVM targets use the EVM embedded
+    // wallet, Solana targets the Solana (SVM) embedded account — never cross families
+    // (an EVM address on a Solana target would be rejected / mis-delivered). Accounts
+    // come from the core store so EVM-only apps don't need the Solana React context.
+    const solanaAddress = (_a = embeddedAccounts === null || embeddedAccounts === void 0 ? void 0 : embeddedAccounts.find((acc) => acc.chainType === ChainTypeEnum.SVM)) === null || _a === void 0 ? void 0 : _a.address;
+    const address = isSolana(target.chain) ? solanaAddress : wallet.address;
+    const chainSupported = isCexDeliverable(target.chain);
+    // Resolve the destination asset + chain for the "Arrives as …" line. The live
+    // chain list is curated for source selection, so the destination may be absent;
+    // only claim a symbol we resolved, or USDC for the zero-config default.
+    const destChain = chains.find((c) => c.id === target.chain);
+    const destChainName = (_c = (_b = destChain === null || destChain === void 0 ? void 0 : destChain.name) !== null && _b !== void 0 ? _b : CEX_CHAIN_NAMES[target.chain]) !== null && _c !== void 0 ? _c : target.chain;
+    const destAsset = destChain === null || destChain === void 0 ? void 0 : destChain.currencies.find((c) => c.address.toLowerCase() === target.currency.toLowerCase());
+    const isDefaultUsdc = target.currency.toLowerCase() === DEST_USDC.toLowerCase();
+    const destAssetLabel = (_d = destAsset === null || destAsset === void 0 ? void 0 : destAsset.symbol) !== null && _d !== void 0 ? _d : (isDefaultUsdc ? 'USDC' : null);
+    const destAssetLogo = (_e = destAsset === null || destAsset === void 0 ? void 0 : destAsset.logo) !== null && _e !== void 0 ? _e : null;
+    const destChainLogo = (_f = destChain === null || destChain === void 0 ? void 0 : destChain.logo) !== null && _f !== void 0 ? _f : null;
+    // Mint the destination-bound session up-front (per target wallet), so the click
+    // that opens Coinbase is a single fast pay-link call and stays popup-safe.
+    //
+    // `createSession` is held in a ref and kept OUT of the effect deps: its identity
+    // churns whenever the core client re-memoizes (e.g. during Solana recovery
+    // retries, which re-render rapidly). If it were a dep, a churn mid-flight would
+    // re-run the effect, fire its cleanup (`cancelled = true`), then early-return on
+    // the unchanged sessionKey — so the in-flight create resolves but its result is
+    // dropped and never retried, stranding the page on "Preparing…". The effect must
+    // only re-run on a genuine destination change.
+    const sessionKey = useRef('');
+    const createSessionRef = useRef(createSession);
+    createSessionRef.current = createSession;
+    useEffect(() => {
+        if (!isAvailable || !address || !chainSupported)
+            return;
+        const key = `${target.chain}|${target.currency}|${address}`;
+        if (sessionKey.current === key)
+            return;
+        sessionKey.current = key;
+        let cancelled = false;
+        setSession(null);
+        setError(null);
+        createSessionRef
+            .current({ chain: target.chain, currency: target.currency, address })
+            .then((s) => {
+            if (!cancelled)
+                setSession({ id: s.id, clientSecret: s.clientSecret });
+        })
+            .catch((e) => {
+            if (!cancelled)
+                setError(e instanceof Error ? e : new Error(String(e)));
+        });
+        return () => {
+            cancelled = true;
+            // Clear the key so a genuine destination change re-creates the session;
+            // without this the guard above would block the retry after this cancel.
+            sessionKey.current = '';
+        };
+    }, [isAvailable, address, chainSupported, target.chain, target.currency]);
+    const fiatAmount = useMemo(() => {
+        const normalized = sanitizeForParsing(sanitizeAmountInput(amount));
+        if (!normalized)
+            return null;
+        const numeric = Number(normalized);
+        return Number.isFinite(numeric) ? numeric : null;
+    }, [amount]);
+    const amountValid = fiatAmount !== null && fiatAmount >= MIN_AMOUNT;
+    const amountTooLow = fiatAmount !== null && fiatAmount < MIN_AMOUNT;
+    const infraReady = isAvailable && chainSupported && Boolean(session) && !error;
+    const payReady = infraReady && amountValid;
+    // Resize when a block that changes the modal's height toggles.
+    useEffect(() => {
+        triggerResize();
+    }, [isAvailable, chainSupported, session, error, opened, amountTooLow, triggerResize]);
+    // Once the bound session settles, refresh balances so delivered funds show
+    // without a manual reload.
+    useEffect(() => {
+        if (status === 'succeeded')
+            invalidateBalance();
+    }, [status]);
+    const handleAmountChange = (event) => {
+        const raw = sanitizeAmountInput(event.target.value);
+        if (raw === '' || /^[0-9]*\.?[0-9]*$/.test(raw)) {
+            setPressedPreset(null);
+            setAmount(raw);
+        }
+    };
+    const handleAmountBlur = () => {
+        const normalized = sanitizeForParsing(sanitizeAmountInput(amount));
+        if (!normalized)
+            return;
+        const numeric = Number(normalized);
+        if (Number.isFinite(numeric) && numeric > 0)
+            setAmount(numeric.toFixed(2));
+    };
+    const handlePreset = (value) => {
+        setPressedPreset(value);
+        setAmount(value.toFixed(2));
+    };
+    const openExchange = () => {
+        if (!session || fiatAmount === null || !amountValid)
+            return;
+        // Open the tab up-front (sync) so the popup blocker permits it. Passing
+        // `noopener` makes window.open return null, leaving the tab stuck on
+        // about:blank — keep the handle and sever the opener link manually instead.
+        const w = window.open('about:blank', '_blank');
+        if (w)
+            w.opener = null;
+        logger.log('[funding:cex] open pay-link', { sessionId: session.id, amount: fiatAmount, asset: destAssetLabel });
+        void payLink({
+            sessionId: session.id,
+            clientSecret: session.clientSecret,
+            amount: String(fiatAmount),
+            ...(destAssetLabel ? { asset: destAssetLabel } : {}),
+        })
+            .then((url) => {
+            if (!url) {
+                w === null || w === void 0 ? void 0 : w.close(); // no URL resolved — don't strand the popup on "undefined"
+                return;
+            }
+            if (w)
+                w.location.href = url;
+            else
+                window.location.assign(url); // popup blocked — fall back to this tab
+            setOpened(true);
+            // Watch the destination-bound session settle so the modal can show the
+            // success / failed outcome instead of stranding the user on the form.
+            if (session)
+                void track({ id: session.id, clientSecret: session.clientSecret }).catch(() => { });
+        })
+            .catch((e) => {
+            w === null || w === void 0 ? void 0 : w.close();
+            setError(e instanceof Error ? e : new Error(String(e)));
+        });
+    };
+    // Once the deposit lands, the session-status flow takes over the modal with the
+    // success / refunded / expired screen (shared with the crypto rail).
+    if (isDepositFlowActive(status))
+        return jsx(DepositProgress, { status: status });
+    return (jsxs(PageContent, { onBack: routes.DEPOSIT, children: [jsx(ModalHeading, { children: "Transfer from Exchange" }), jsxs(Section, { children: [jsx(SectionLabel, { children: "Amount" }), jsxs(AmountCard, { children: [jsx(CurrencySymbol, { children: "$" }), jsx(AmountInput, { value: amount, onChange: handleAmountChange, onBlur: handleAmountBlur, placeholder: "0.00", inputMode: "decimal", autoComplete: "off" })] }), jsx(PresetList, { children: PRESETS.map((preset) => (jsxs(PresetButton, { type: "button", "$active": pressedPreset === preset, onClick: () => handlePreset(preset), children: ["$", preset] }, preset))) }), amountTooLow ? (jsxs("span", { style: errorHelper, children: ["Enter at least $", MIN_AMOUNT, ".00 \u2014 the Coinbase minimum."] })) : (jsxs("span", { style: helperText, children: ["Minimum $", MIN_AMOUNT, ".00"] })), chainSupported && (jsxs("span", { style: destinationRow, children: [destAssetLogo && jsx("img", { src: destAssetLogo, alt: "", style: destinationLogo, onError: hideBrokenLogo }), destChainLogo && jsx("img", { src: destChainLogo, alt: "", style: destinationLogo, onError: hideBrokenLogo })] }))] }), !isAvailable && jsx(ModalBody, { children: "Funding isn't available right now." }), isAvailable && !chainSupported && jsxs(ModalBody, { children: ["Coinbase can't deliver to ", destChainName, " yet."] }), error && jsx(ModalBody, { style: { color: '#dc2626' }, children: error.message }), jsx(StepDivider, { children: "Then open an exchange" }), jsx("div", { style: { display: 'flex', flexDirection: 'column', gap: 8, marginTop: 12 }, children: EXCHANGES.map((ex) => ex.comingSoon ? (jsxs("button", { type: "button", disabled: true, style: {
+                        ...walletListBtn,
+                        display: 'flex',
+                        alignItems: 'center',
+                        gap: 8,
+                        opacity: 0.55,
+                        cursor: 'not-allowed',
+                    }, children: [jsx(ButtonLogo, { children: EXCHANGE_LOGO[ex.id] }), jsx("span", { children: titleCase(ex.id) }), jsx("span", { style: { marginLeft: 'auto', fontSize: 11, fontWeight: 600 }, children: "Coming soon" })] }, ex.id)) : (jsxs("button", { type: "button", disabled: !payReady, style: {
+                        ...walletListBtn,
+                        display: 'flex',
+                        alignItems: 'center',
+                        justifyContent: 'center',
+                        gap: 8,
+                        opacity: payReady ? 1 : 0.55,
+                        cursor: payReady ? 'pointer' : 'not-allowed',
+                    }, onClick: openExchange, children: [jsx(ButtonLogo, { children: EXCHANGE_LOGO[ex.id] }), infraReady ? `Open ${titleCase(ex.id)} ↗` : 'Preparing…'] }, ex.id))) }), opened &&
+                (status === 'waiting_payment' ? (jsx(DepositStatus, { status: status })) : (jsx(ModalBody, { style: { marginTop: 12 }, children: "Finish in the Coinbase tab \u2014 we'll confirm here once your funds arrive." })))] }));
+};
+
+export { DepositCex as default };
+//# sourceMappingURL=index.js.map

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

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

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

@@ -0,0 +1,8 @@
+/**
+ * Transfer from address — choose a source chain + token and send to the deposit
+ * address / QR that appears. Same-chain is a plain transfer to the wallet;
+ * cross-chain routes bridge via Relay. Wallet deeplinks live on the separate
+ * "Transfer from wallet" tab.
+ */
+declare const DepositCrypto: () => import("react/jsx-runtime").JSX.Element;
+export default DepositCrypto;

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

@@ -0,0 +1,31 @@
+import { jsx, jsxs } from 'react/jsx-runtime';
+import { useEffect } from 'react';
+import { ModalHeading, ModalBody } from '../../Common/Modal/styles.js';
+import { routes } from '../../Openfort/types.js';
+import { useOpenfort } from '../../Openfort/useOpenfort.js';
+import { PageContent } from '../../PageContent/index.js';
+import { DepositAddressBlock } from '../Deposit/DepositAddressBlock.js';
+import { isDepositFlowActive, DepositProgress } from '../Deposit/DepositProgress.js';
+import { RouteSelectors } from '../Deposit/RouteSelectors.js';
+import { useDepositRoute } from '../Deposit/useDepositRoute.js';
+
+/**
+ * Transfer from address — choose a source chain + token and send to the deposit
+ * address / QR that appears. Same-chain is a plain transfer to the wallet;
+ * cross-chain routes bridge via Relay. Wallet deeplinks live on the separate
+ * "Transfer from wallet" tab.
+ */
+const DepositCrypto = () => {
+    var _a, _b, _c, _d;
+    const { triggerResize } = useOpenfort();
+    const route = useDepositRoute('crypto');
+    useEffect(() => {
+        triggerResize();
+    }, [route.receiverAddress, route.loading, route.status, triggerResize]);
+    if (isDepositFlowActive(route.status))
+        return jsx(DepositProgress, { status: route.status });
+    return (jsxs(PageContent, { onBack: routes.DEPOSIT, children: [jsx(ModalHeading, { children: "Transfer from address" }), jsx(RouteSelectors, { chains: route.chains, chain: route.chain, currency: route.currency, chainLabel: "Supported chain", onChainChange: route.setChain, onCurrencyChange: route.setCurrency }), !route.isAvailable && jsx(ModalBody, { children: "Funding isn't available right now." }), jsx(DepositAddressBlock, { assetLogo: (_b = (_a = route.activeCurrency) === null || _a === void 0 ? void 0 : _a.logo) !== null && _b !== void 0 ? _b : null, chainLogo: (_d = (_c = route.activeChain) === null || _c === void 0 ? void 0 : _c.logo) !== null && _d !== void 0 ? _d : null, receiverAddress: route.receiverAddress, pm: route.pm, sourceCurrency: route.activeCurrency ? { symbol: route.activeCurrency.symbol, decimals: route.activeCurrency.decimals } : null, sameChain: route.sameChain, loading: route.loading, status: route.status }), route.error && jsx(ModalBody, { style: { color: '#dc2626', marginTop: 12 }, children: route.error.message })] }));
+};
+
+export { DepositCrypto as default };
+//# sourceMappingURL=index.js.map

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

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

package/build/components/Pages/DepositWallet/DepositWalletDesktop.d.ts

@@ -0,0 +1,20 @@
+import type { FundingChain, FundingCurrency } from '../../../hooks/openfort/useFundingChains';
+type Props = {
+    /** Relay deposit address the source funds are sent to. */
+    receiverAddress: string | null;
+    activeChain: FundingChain | undefined;
+    activeCurrency: FundingCurrency | undefined;
+    loading: boolean;
+    /** Amount to send, in the source token's units. Owned by the parent so the
+     * amount input + presets are shared with the mobile (deeplink) path. */
+    amount: string;
+};
+/**
+ * Desktop "transfer from wallet": send the source token to the Relay deposit
+ * address straight from the user's EXTERNAL browser-extension wallet
+ * (MetaMask/Rabby/…), via that connector's own provider — never the active
+ * Openfort embedded account (that one is the destination, not the source).
+ * Once the deposit lands, the funding session's status polling drives progress.
+ */
+export declare function DepositWalletDesktop({ receiverAddress, activeChain, activeCurrency, loading, amount }: Props): import("react/jsx-runtime").JSX.Element | null;
+export {};

package/build/components/Pages/DepositWallet/DepositWalletDesktop.js

@@ -0,0 +1,139 @@
+import { jsxs, jsx } from 'react/jsx-runtime';
+import { useState, useEffect } from 'react';
+import { parseUnits, formatUnits, encodeFunctionData, erc20Abi } from 'viem';
+import { WalletIcon } from '../../../assets/icons.js';
+import Logos from '../../../assets/logos.js';
+import { useEthereumBridge } from '../../../ethereum/OpenfortEthereumBridgeContext.js';
+import { ModalBody } from '../../Common/Modal/styles.js';
+import { useOpenfort } from '../../Openfort/useOpenfort.js';
+import { DepositStatus } from '../Deposit/DepositStatus.js';
+import { walletListBtn } from '../Deposit/formStyles.js';
+import { ButtonLogo } from '../Deposit/styles.js';
+import { caipToChainId } from './walletDeeplinks.js';
+
+/** Hardcoded brand logo for a connector, matched by id/name; falls back to its own icon, then a generic. */
+function brandLogo(connector) {
+    const k = `${connector.id} ${connector.name}`.toLowerCase();
+    if (k.includes('metamask'))
+        return jsx(Logos.MetaMask, { background: true });
+    if (k.includes('rabby'))
+        return jsx(Logos.Rabby, {});
+    if (k.includes('coinbase'))
+        return jsx(Logos.Coinbase, { background: true });
+    if (k.includes('phantom'))
+        return jsx(Logos.Phantom, { background: true });
+    if (k.includes('trust'))
+        return jsx(Logos.Trust, {});
+    if (k.includes('rainbow'))
+        return jsx(Logos.Rainbow, { round: true });
+    if (connector.icon)
+        return jsx("img", { src: connector.icon, alt: "", width: 20, height: 20, style: { borderRadius: 6 } });
+    return jsx(WalletIcon, {});
+}
+/** Readable message from a wallet/provider error; null for a user rejection (4001). */
+function walletErrorMessage(e) {
+    if (e && typeof e === 'object') {
+        const o = e;
+        if (o.code === 4001)
+            return null; // user rejected — nothing to flag
+        return o.shortMessage || o.message || o.details || 'Transaction failed';
+    }
+    return typeof e === 'string' ? e : 'Transaction failed';
+}
+/**
+ * Desktop "transfer from wallet": send the source token to the Relay deposit
+ * address straight from the user's EXTERNAL browser-extension wallet
+ * (MetaMask/Rabby/…), via that connector's own provider — never the active
+ * Openfort embedded account (that one is the destination, not the source).
+ * Once the deposit lands, the funding session's status polling drives progress.
+ */
+function DepositWalletDesktop({ receiverAddress, activeChain, activeCurrency, loading, amount }) {
+    const bridge = useEthereumBridge();
+    const { triggerResize } = useOpenfort();
+    const [busyId, setBusyId] = useState(null);
+    const [error, setError] = useState(null);
+    const [sent, setSent] = useState(false);
+    // Grow the modal when the busy / error / sent feedback toggles, so the "Confirm
+    // in your wallet…" and insufficient-balance messages are revealed instead of
+    // clipped below the fold (which reads as "nothing happened" after a click).
+    useEffect(() => {
+        triggerResize();
+    }, [busyId, error, sent, triggerResize]);
+    if (!bridge)
+        return null; // EVM-only (no wagmi) — nothing to send through
+    // bridge.connectors already excludes the Openfort embedded connector, so these
+    // are the user's external wallets. Drop WalletConnect: its provider needs a
+    // connect()/session flow our direct request() path doesn't support.
+    const connectors = bridge.connectors.filter((c) => !c.id.toLowerCase().includes('walletconnect'));
+    const srcChainId = caipToChainId(activeChain === null || activeChain === void 0 ? void 0 : activeChain.id);
+    const amountValid = Number.parseFloat(amount) > 0;
+    const sendVia = async (c) => {
+        var _a, _b;
+        if (!receiverAddress || !activeCurrency || !srcChainId || !amountValid)
+            return;
+        setBusyId(c.id);
+        setError(null);
+        setSent(false);
+        try {
+            const provider = (await ((_a = c.getProvider) === null || _a === void 0 ? void 0 : _a.call(c)));
+            if (!provider)
+                throw new Error('Wallet provider unavailable');
+            const accounts = (await provider.request({ method: 'eth_requestAccounts' }));
+            const from = accounts === null || accounts === void 0 ? void 0 : accounts[0];
+            if (!from)
+                throw new Error('No account in wallet');
+            // Ask the wallet to switch to the source chain (ignored if already there).
+            await provider
+                .request({ method: 'wallet_switchEthereumChain', params: [{ chainId: `0x${srcChainId.toString(16)}` }] })
+                .catch(() => { });
+            const value = parseUnits(amount, activeCurrency.decimals);
+            const to = receiverAddress;
+            // Guard: confirm the wallet holds enough on this chain. Otherwise the transfer
+            // just reverts (wasted gas) and the deposit never arrives — the bug we hit.
+            const balance = activeCurrency.native
+                ? BigInt((await provider.request({ method: 'eth_getBalance', params: [from, 'latest'] })))
+                : BigInt((await provider.request({
+                    method: 'eth_call',
+                    params: [
+                        { to: activeCurrency.address, data: `0x70a08231${from.slice(2).padStart(64, '0')}` },
+                        'latest',
+                    ],
+                })) || '0x0');
+            if (balance < value) {
+                setError(`Not enough ${activeCurrency.symbol} on ${(_b = activeChain === null || activeChain === void 0 ? void 0 : activeChain.name) !== null && _b !== void 0 ? _b : 'this chain'} — you have ${formatUnits(balance, activeCurrency.decimals)}.`);
+                return;
+            }
+            if (activeCurrency.native) {
+                await provider.request({
+                    method: 'eth_sendTransaction',
+                    params: [{ from, to, value: `0x${value.toString(16)}` }],
+                });
+            }
+            else {
+                const data = encodeFunctionData({ abi: erc20Abi, functionName: 'transfer', args: [to, value] });
+                await provider.request({
+                    method: 'eth_sendTransaction',
+                    params: [{ from, to: activeCurrency.address, data }],
+                });
+            }
+            setSent(true);
+        }
+        catch (e) {
+            setError(walletErrorMessage(e));
+        }
+        finally {
+            setBusyId(null);
+        }
+    };
+    return (jsxs("div", { style: { display: 'flex', flexDirection: 'column', gap: 10, marginTop: 14 }, children: [connectors.length === 0 && jsx(ModalBody, { children: "No browser wallet detected. Install MetaMask or Rabby." }), connectors.map((c) => (jsxs("button", { type: "button", disabled: !amountValid || busyId !== null || loading, style: {
+                    ...walletListBtn,
+                    display: 'flex',
+                    alignItems: 'center',
+                    justifyContent: 'flex-start',
+                    gap: 10,
+                    opacity: !amountValid || busyId !== null ? 0.55 : 1,
+                }, onClick: () => sendVia(c), children: [jsx(ButtonLogo, { children: brandLogo(c) }), jsx("span", { children: busyId === c.id ? 'Confirm in your wallet…' : `Send via ${c.name}` })] }, c.id))), sent && jsx(DepositStatus, { status: "waiting_payment" }), error && jsx(ModalBody, { style: { color: '#dc2626' }, children: error })] }));
+}
+
+export { DepositWalletDesktop };
+//# sourceMappingURL=DepositWalletDesktop.js.map

package/build/components/Pages/DepositWallet/DepositWalletDesktop.js.map

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