@openfort/react 1.1.3 → 1.2.0

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":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}

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

@@ -0,0 +1,35 @@
+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;
+        address?: 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,107 @@
+import { ChainTypeEnum } from '@openfort/openfort-js';
+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 { useOpenfortCore } from '../../../openfort/useOpenfort.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 { chainType } = useOpenfortCore();
+    const ethWallet = useEthereumEmbeddedWallet();
+    const solWallet = useSolanaEmbeddedWallet();
+    // Funds land in the active chain's embedded wallet (EVM or Solana).
+    const wallet = chainType === ChainTypeEnum.SVM ? solWallet : ethWallet;
+    const { session, status, error, loading, isAvailable, fund, payLink, reset } = useFunding();
+    const { chains: allChains, loading: chainsLoading } = useFundingChains();
+    const target = useFundingTarget();
+    // Drop the destination chain — funding is cross-chain; same-chain is a plain
+    // transfer with no Relay route, so it shouldn't appear as a source option.
+    const sourceChains = allChains.filter((c) => c.id !== target.chain);
+    // The CEX rail rides Coinbase Onramp, which only delivers to a fixed set of EVM
+    // chains — offer those as the pay-with sources.
+    const chains = kind === 'cex' ? sourceChains.filter((c) => isCexDeliverable(c.id)) : sourceChains;
+    // 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,13 @@
+/**
+ * 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. `address` is the optional integrator
+ * override (`uiConfig.funding.targetAddress`); when unset, callers fall back to the
+ * active embedded wallet for the destination chain family.
+ */
+export declare function useFundingTarget(): {
+    chain: string;
+    currency: string;
+    address?: string;
+};

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

@@ -0,0 +1,27 @@
+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. `address` is the optional integrator
+ * override (`uiConfig.funding.targetAddress`); when unset, callers fall back to the
+ * active embedded wallet for the destination chain family.
+ */
+function useFundingTarget() {
+    var _a, _b, _c, _d, _e;
+    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),
+        address: (_e = uiConfig.funding) === null || _e === void 0 ? void 0 : _e.targetAddress,
+    };
+}
+
+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,230 @@
+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 { 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, _g;
+    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 isEvmTarget = target.chain.startsWith('eip155:');
+    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 = (_b = target.address) !== null && _b !== void 0 ? _b : (isEvmTarget ? wallet.address : solanaAddress);
+    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 = (_d = (_c = destChain === null || destChain === void 0 ? void 0 : destChain.name) !== null && _c !== void 0 ? _c : CEX_CHAIN_NAMES[target.chain]) !== null && _d !== void 0 ? _d : 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 = (_e = destAsset === null || destAsset === void 0 ? void 0 : destAsset.symbol) !== null && _e !== void 0 ? _e : (isDefaultUsdc ? 'USDC' : null);
+    const destAssetLogo = (_f = destAsset === null || destAsset === void 0 ? void 0 : destAsset.logo) !== null && _f !== void 0 ? _f : null;
+    const destChainLogo = (_g = destChain === null || destChain === void 0 ? void 0 : destChain.logo) !== null && _g !== void 0 ? _g : 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":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}