@openfort/react 1.1.4 → 1.2.0

package/build/components/Pages/Connected/EthereumConnected.js

@@ -1,9 +1,8 @@
 import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
 import { ChainTypeEnum } from '@openfort/openfort-js';
-import { AnimatePresence, motion } from 'framer-motion';
-import { lazy, useEffect, useMemo, useState, Suspense } from 'react';
+import { lazy, useEffect, useMemo, Suspense } from 'react';
 import { formatUnits } from 'viem';
-import { UserRoundIcon, SendIcon, ReceiveIcon, BuyIcon } from '../../../assets/icons.js';
+import { UserRoundIcon, SendIcon, ReceiveIcon } from '../../../assets/icons.js';
 import { useEthereumEmbeddedWallet } from '../../../ethereum/hooks/useEthereumEmbeddedWallet.js';
 import { useEthereumWalletAssets } from '../../../ethereum/hooks/useEthereumWalletAssets.js';
 import { useEthereumBridge } from '../../../ethereum/OpenfortEthereumBridgeContext.js';
@@ -17,7 +16,6 @@ import Button from '../../Common/Button/index.js';
 import { TextLinkButton } from '../../Common/Button/styles.js';
 import Chain from '../../Common/Chain/index.js';
 import { CopyText } from '../../Common/CopyToClipboard/CopyText.js';
-import { ModalBody } from '../../Common/Modal/styles.js';
 import { useThemeContext } from '../../ConnectKitThemeProvider/ConnectKitThemeProvider.js';
 import { routes, defaultSendFormState } from '../../Openfort/types.js';
 import { useOpenfort } from '../../Openfort/useOpenfort.js';
@@ -32,7 +30,7 @@ function getFirstBalanceAsset(assets) {
     return assets === null || assets === void 0 ? void 0 : assets.find((a) => a.balance && a.balance > BigInt(0));
 }
 const EthereumConnected = () => {
-    var _a, _b, _c, _d;
+    var _a, _b, _c;
     const context = useOpenfort();
     const { setHeaderLeftSlot, setRoute, chains } = context;
     const themeContext = useThemeContext();
@@ -64,7 +62,7 @@ const EthereumConnected = () => {
         enabled: isConnected && !!address,
     });
     const ensName = identity.status === 'success' ? identity.name : undefined;
-    const { data: assets, isLoading, refetch } = useEthereumWalletAssets();
+    const { data: assets, isLoading } = useEthereumWalletAssets();
     const totalBalanceUsd = useMemo(() => {
         if (!assets)
             return 0;
@@ -79,31 +77,9 @@ const EthereumConnected = () => {
             return acc + price * balance;
         }, 0);
     }, [assets]);
-    useEffect(() => {
-        if (isConnected) {
-            refetch();
-        }
-    }, [isConnected, refetch]);
-    const isTestnet = (_b = chain === null || chain === void 0 ? void 0 : chain.testnet) !== null && _b !== void 0 ? _b : false;
-    const [showTestnetMessage, setShowTestnetMessage] = useState(false);
     useEffect(() => {
         context.triggerResize();
-        if (showTestnetMessage) {
-            const timer = setTimeout(() => {
-                setShowTestnetMessage(false);
-            }, 2000);
-            return () => clearTimeout(timer);
-        }
-    }, [showTestnetMessage, context.triggerResize]);
-    const handleBuyClick = (e) => {
-        if (!chain || isTestnet) {
-            e.preventDefault();
-            setShowTestnetMessage(true);
-        }
-        else {
-            context.setRoute(routes.BUY);
-        }
-    };
+    }, [context.triggerResize]);
     useEffect(() => {
         if (!address) {
             setHeaderLeftSlot(null);
@@ -115,11 +91,11 @@ const EthereumConnected = () => {
         };
     }, [address, setHeaderLeftSlot, setRoute]);
     const { setSendForm } = context;
-    const separator = ['web95', 'rounded', 'minimal'].includes((_d = (_c = themeContext.theme) !== null && _c !== void 0 ? _c : context.uiConfig.theme) !== null && _d !== void 0 ? _d : '')
+    const separator = ['web95', 'rounded', 'minimal'].includes((_c = (_b = themeContext.theme) !== null && _b !== void 0 ? _b : context.uiConfig.theme) !== null && _c !== void 0 ? _c : '')
         ? '....'
         : undefined;
     const locales = useLocales();
-    const balanceNode = !!assets && !isLoading ? (jsx(TextLinkButton, { type: "button", onClick: () => {
+    const balanceNode = assets && !isLoading ? (jsx(TextLinkButton, { type: "button", onClick: () => {
             const firstBalanceAsset = getFirstBalanceAsset(assets);
             if (!firstBalanceAsset) {
                 setRoute(routes.NO_ASSETS_AVAILABLE);
@@ -136,7 +112,7 @@ const EthereumConnected = () => {
                             }
                             setSendForm({ ...defaultSendFormState, asset: firstBalanceAsset });
                             context.setRoute(routes.SEND);
-                        }, children: "Send" }), jsx(ActionButton, { icon: jsx(ReceiveIcon, {}), onClick: () => context.setRoute(routes.RECEIVE), children: "Get" }), jsx(ActionButton, { icon: jsx(BuyIcon, {}), onClick: handleBuyClick, style: isTestnet ? { cursor: 'not-allowed', opacity: 0.4, pointerEvents: 'auto' } : undefined, children: "Buy" })] }), hideBalance: context === null || context === void 0 ? void 0 : context.uiConfig.hideBalance, isBalanceLoading: isLoading, noWalletFallback: noWalletFallback, afterActions: jsx(AnimatePresence, { onExitComplete: () => context.triggerResize(), children: showTestnetMessage && (jsx(ModalBody, { as: motion.div, initial: { opacity: 0, y: -10 }, animate: { opacity: 0.7, y: 0 }, exit: { opacity: 0, y: -10 }, transition: { duration: 0.2 }, style: { marginTop: 12, fontSize: 14, textAlign: 'center' }, children: "Buy is only available on mainnet chains" })) }) }) }));
+                        }, children: "Send" }), jsx(ActionButton, { icon: jsx(ReceiveIcon, {}), onClick: () => context.setRoute(routes.DEPOSIT), children: "Deposit" })] }), hideBalance: context === null || context === void 0 ? void 0 : context.uiConfig.hideBalance, isBalanceLoading: isLoading, noWalletFallback: noWalletFallback }) }));
 };
 
 export { EthereumConnected as default };

package/build/components/Pages/Connected/EthereumConnected.js.map

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

package/build/components/Pages/Connected/SolanaConnected.js

@@ -1,7 +1,7 @@
-import { jsx, jsxs } from 'react/jsx-runtime';
+import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
 import { ChainTypeEnum } from '@openfort/openfort-js';
 import { useEffect } from 'react';
-import { UserRoundIcon, ReceiveIcon } from '../../../assets/icons.js';
+import { UserRoundIcon, SendIcon, ReceiveIcon } from '../../../assets/icons.js';
 import { BALANCE_INVALIDATE_EVENT, fetchSolanaBalance } from '../../../hooks/useBalance.js';
 import useLocales from '../../../hooks/useLocales.js';
 import { useOpenfortCore } from '../../../openfort/useOpenfort.js';
@@ -13,6 +13,7 @@ import { nFormatter } from '../../../utils/index.js';
 import { logger } from '../../../utils/logger.js';
 import Avatar from '../../Common/Avatar/index.js';
 import Button from '../../Common/Button/index.js';
+import { TextLinkButton } from '../../Common/Button/styles.js';
 import { CopyText } from '../../Common/CopyToClipboard/CopyText.js';
 import { useThemeContext } from '../../ConnectKitThemeProvider/ConnectKitThemeProvider.js';
 import { routes } from '../../Openfort/types.js';
@@ -88,8 +89,12 @@ const SolanaConnected = () => {
         ? '....'
         : undefined;
     const avatar = address ? CustomAvatar ? jsx(CustomAvatar, { address: address }) : jsx(Avatar, { address: address }) : jsx("span", {});
-    const balanceNode = balanceSol != null && !isBalanceLoading ? (jsxs(Balance, { initial: { opacity: 0 }, animate: { opacity: 1 }, exit: { opacity: 0 }, transition: { duration: 0.2 }, children: [nFormatter(Number(balanceSol)), " SOL"] }, "solana-balance")) : null;
-    return (jsx(PageContent, { onBack: null, header: locales.profileScreen_heading, children: jsx(ConnectedPageLayout, { address: address !== null && address !== void 0 ? address : '', displayName: jsx(CopyText, { value: address !== null && address !== void 0 ? address : '', children: truncateSolanaAddress(address !== null && address !== void 0 ? address : '', separator) }), avatar: avatar, balance: balanceNode, actions: jsx(ActionButton, { icon: jsx(ReceiveIcon, {}), onClick: () => context.setRoute(routes.SOL_RECEIVE), children: "Get" }), hideBalance: context === null || context === void 0 ? void 0 : context.uiConfig.hideBalance, isBalanceLoading: isBalanceLoading, isAddressLoading: isAddressLoading, noWalletFallback: hasSolanaWallets ? (jsx(Button, { onClick: () => setRoute(routes.SELECT_WALLET_TO_RECOVER), children: "Manage wallets" })) : (jsx(Button, { onClick: () => setRoute(routes.SOL_CREATE_WALLET), children: "Create Solana Wallet" })) }) }));
+    const balanceNode = balanceSol != null && !isBalanceLoading ? (jsx(TextLinkButton, { type: "button", onClick: () => setRoute(routes.SOL_ASSET_INVENTORY), children: jsxs(Balance, { initial: { opacity: 0 }, animate: { opacity: 1 }, exit: { opacity: 0 }, transition: { duration: 0.2 }, children: [nFormatter(Number(balanceSol)), " SOL"] }, "solana-balance") })) : null;
+    return (jsx(PageContent, { onBack: null, header: locales.profileScreen_heading, children: jsx(ConnectedPageLayout, { address: address !== null && address !== void 0 ? address : '', displayName: jsx(CopyText, { value: address !== null && address !== void 0 ? address : '', children: truncateSolanaAddress(address !== null && address !== void 0 ? address : '', separator) }), avatar: avatar, balance: balanceNode, actions: jsxs(Fragment, { children: [jsx(ActionButton, { icon: jsx(SendIcon, {}), onClick: () => {
+                            // Nothing to send on an empty wallet — prompt to add funds first (mirrors EVM).
+                            const hasBalance = lamports != null && BigInt(lamports) > BigInt(0);
+                            context.setRoute(hasBalance ? routes.SOL_SEND : routes.NO_ASSETS_AVAILABLE);
+                        }, children: "Send" }), jsx(ActionButton, { icon: jsx(ReceiveIcon, {}), onClick: () => context.setRoute(routes.DEPOSIT), children: "Deposit" })] }), hideBalance: context === null || context === void 0 ? void 0 : context.uiConfig.hideBalance, isBalanceLoading: isBalanceLoading, isAddressLoading: isAddressLoading, noWalletFallback: hasSolanaWallets ? (jsx(Button, { onClick: () => setRoute(routes.SELECT_WALLET_TO_RECOVER), children: "Manage wallets" })) : (jsx(Button, { onClick: () => setRoute(routes.SOL_CREATE_WALLET), children: "Create Solana Wallet" })) }) }));
 };
 
 export { SolanaConnected as default };

package/build/components/Pages/Connected/SolanaConnected.js.map

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

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

@@ -0,0 +1,7 @@
+/**
+ * Row that navigates to the standalone "Transfer from address" page (deposit
+ * address + QR), instead of disclosing it inline beneath the current tab.
+ */
+export declare function AddressPageLink({ label }: {
+    label: string;
+}): import("react/jsx-runtime").JSX.Element;

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

@@ -0,0 +1,17 @@
+import { jsxs, Fragment, jsx } from 'react/jsx-runtime';
+import { routes } from '../../Openfort/types.js';
+import { useOpenfort } from '../../Openfort/useOpenfort.js';
+import { detailsToggle, chevron } from './formStyles.js';
+import { OrDivider } from './OrDivider.js';
+
+/**
+ * Row that navigates to the standalone "Transfer from address" page (deposit
+ * address + QR), instead of disclosing it inline beneath the current tab.
+ */
+function AddressPageLink({ label }) {
+    const { setRoute } = useOpenfort();
+    return (jsxs(Fragment, { children: [jsx(OrDivider, {}), jsxs("button", { type: "button", style: detailsToggle, onClick: () => setRoute(routes.DEPOSIT_CRYPTO), children: [jsx("span", { children: label }), jsx("span", { style: chevron, children: "\u203A" })] })] }));
+}
+
+export { AddressPageLink };
+//# sourceMappingURL=AddressPageLink.js.map

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

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

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

@@ -0,0 +1,9 @@
+/**
+ * Center logo for the deposit QR: the asset logo with the chain logo as a small
+ * badge bottom-left, so scanners can confirm the right token + network at a glance.
+ * Kept fully within the logo slot (no overflow) so it never covers QR data modules.
+ */
+export declare function AssetChainLogo({ assetLogo, chainLogo }: {
+    assetLogo: string;
+    chainLogo: string;
+}): import("react/jsx-runtime").JSX.Element;

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

@@ -0,0 +1,24 @@
+import { jsxs, jsx } from 'react/jsx-runtime';
+
+const hide = (e) => {
+    e.currentTarget.style.display = 'none';
+};
+/**
+ * Center logo for the deposit QR: the asset logo with the chain logo as a small
+ * badge bottom-left, so scanners can confirm the right token + network at a glance.
+ * Kept fully within the logo slot (no overflow) so it never covers QR data modules.
+ */
+function AssetChainLogo({ assetLogo, chainLogo }) {
+    return (jsxs("div", { style: { position: 'relative', width: '100%' }, children: [jsx("img", { src: assetLogo, alt: "", onError: hide, style: { display: 'block', width: '100%', borderRadius: '50%' } }), jsx("img", { src: chainLogo, alt: "", onError: hide, style: {
+                    position: 'absolute',
+                    bottom: 0,
+                    left: 0,
+                    width: '42%',
+                    borderRadius: '50%',
+                    border: '2px solid #fff',
+                    background: '#fff',
+                } })] }));
+}
+
+export { AssetChainLogo };
+//# sourceMappingURL=AssetChainLogo.js.map

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

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

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

@@ -0,0 +1,21 @@
+import type { PaymentMethod, SessionStatus } from '../../../hooks/openfort/useFunding';
+type DepositAddressBlockProps = {
+    /** Logo URLs for the QR badge (token over chain). */
+    assetLogo: string | null;
+    chainLogo: string | null;
+    receiverAddress: string | null;
+    pm: PaymentMethod | null;
+    /** Source currency (symbol + decimals) for formatting the Details fee/min. */
+    sourceCurrency: {
+        symbol: string;
+        decimals: number;
+    } | null;
+    /** Cross-chain routes carry a fee/min Details panel; same-chain transfers don't. */
+    sameChain: boolean;
+    loading: boolean;
+    /** Live session status, rendered as the "Waiting for your deposit…" line under the address. */
+    status?: SessionStatus | 'idle';
+};
+/** The QR + copyable deposit address (plus cross-chain Details) for a route. */
+export declare function DepositAddressBlock({ assetLogo, chainLogo, receiverAddress, pm, sourceCurrency, sameChain, loading, status, }: DepositAddressBlockProps): import("react/jsx-runtime").JSX.Element | null;
+export {};

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

@@ -0,0 +1,28 @@
+import { jsxs, Fragment, jsx } from 'react/jsx-runtime';
+import { CopyIconButton } from '../../Common/CopyToClipboard/CopyIconButton.js';
+import CustomQRCode from '../../Common/CustomQRCode/index.js';
+import { AssetChainLogo } from './AssetChainLogo.js';
+import { DepositStatus } from './DepositStatus.js';
+import { DepositDetails } from './Details.js';
+import { depositAddressLabel, addressBox, codeStyle } from './formStyles.js';
+import { Skeleton, QRWrapper } from './styles.js';
+
+/** The QR + copyable deposit address (plus cross-chain Details) for a route. */
+function DepositAddressBlock({ assetLogo, chainLogo, receiverAddress, pm, sourceCurrency, sameChain, loading, status, }) {
+    var _a;
+    if (loading && !sameChain && !pm) {
+        return (jsxs(Fragment, { children: [jsx("div", { style: { display: 'flex', justifyContent: 'center', margin: '14px 0' }, children: jsx(Skeleton, { "$w": "220px", "$h": "220px", "$r": "12px" }) }), jsx("div", { style: depositAddressLabel, children: "Your deposit address" }), jsx(Skeleton, { "$h": "44px", "$r": "12px" })] }));
+    }
+    if (!receiverAddress)
+        return null;
+    return (jsxs(Fragment, { children: [jsx(QRWrapper, { children: jsx(CustomQRCode
+                // Encode the EIP-681 / Solana Pay URI (address + amount + network) so a
+                // scanner prefills the send; fall back to the bare address same-chain.
+                , { 
+                    // Encode the EIP-681 / Solana Pay URI (address + amount + network) so a
+                    // scanner prefills the send; fall back to the bare address same-chain.
+                    value: (_a = pm === null || pm === void 0 ? void 0 : pm.addressUri) !== null && _a !== void 0 ? _a : receiverAddress, image: jsx(AssetChainLogo, { assetLogo: assetLogo !== null && assetLogo !== void 0 ? assetLogo : '', chainLogo: chainLogo !== null && chainLogo !== void 0 ? chainLogo : '' }), imageClip: false }) }), jsx("div", { style: depositAddressLabel, children: "Your deposit address" }), jsxs("div", { style: addressBox, children: [jsx("code", { style: codeStyle, children: receiverAddress }), jsx(CopyIconButton, { value: receiverAddress, size: 28 })] }), status && jsx(DepositStatus, { status: status }), !sameChain && pm && jsx(DepositDetails, { pm: pm, sourceCurrency: sourceCurrency })] }));
+}
+
+export { DepositAddressBlock };
+//# sourceMappingURL=DepositAddressBlock.js.map

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

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

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

@@ -0,0 +1,15 @@
+import type { SessionStatus } from '../../../hooks/openfort/useFunding';
+/**
+ * Statuses that take over the whole modal with the compact flow view: once a
+ * deposit is detected the form is gone and only progress/outcome is shown.
+ */
+export declare function isDepositFlowActive(status: SessionStatus | 'idle'): boolean;
+/**
+ * Compact flow view shown once a deposit is detected. `processing` renders a live
+ * stepper (payment received → bridging → delivering); on `succeeded` the third
+ * step holds active briefly so the user sees it, then the tick + "See balance"
+ * screen takes over. `bounced`/`expired` show the outcome with a way out.
+ */
+export declare function DepositProgress({ status }: {
+    status: SessionStatus | 'idle';
+}): import("react/jsx-runtime").JSX.Element;

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

@@ -0,0 +1,110 @@
+import { jsx, jsxs } from 'react/jsx-runtime';
+import { useState, useEffect } from 'react';
+import styled from '../../../styles/styled/index.js';
+import { logger } from '../../../utils/logger.js';
+import Button from '../../Common/Button/index.js';
+import { ModalHeading, ModalBody } from '../../Common/Modal/styles.js';
+import { Spinner } from '../../Common/Spinner/index.js';
+import { routes } from '../../Openfort/types.js';
+import { useOpenfort } from '../../Openfort/useOpenfort.js';
+import { PageContent } from '../../PageContent/index.js';
+import { DepositSuccess } from './DepositSuccess.js';
+
+/**
+ * Statuses that take over the whole modal with the compact flow view: once a
+ * deposit is detected the form is gone and only progress/outcome is shown.
+ */
+function isDepositFlowActive(status) {
+    return status === 'processing' || status === 'succeeded' || status === 'bounced' || status === 'expired';
+}
+/** How long the final "Delivering" step stays visible before the confirmed screen. */
+const DELIVERING_HOLD_MS = 1200;
+const STEPS = [
+    { key: 'received', label: 'Payment received' },
+    { key: 'bridging', label: 'Bridging across chains' },
+    { key: 'delivering', label: 'Delivering to your wallet' },
+];
+function stepStateFor(index, activeStep) {
+    if (index < activeStep)
+        return 'done';
+    if (index === activeStep)
+        return 'active';
+    return 'pending';
+}
+const StepList = styled.div `
+  display: flex;
+  flex-direction: column;
+  align-items: flex-start;
+  gap: 4px;
+  margin: 18px 0 8px;
+  width: 100%;
+  text-align: left;
+`;
+const StepRow = styled.div `
+  display: flex;
+  align-items: center;
+  gap: 12px;
+  padding: 10px 12px;
+  border-radius: 10px;
+  font-size: 14px;
+  background: ${(p) => (p.$state === 'active' ? 'var(--ck-body-background-secondary, #fafafa)' : 'transparent')};
+  color: ${(p) => (p.$state === 'pending' ? 'var(--ck-body-color-muted, #9ca3af)' : 'var(--ck-body-color, #111)')};
+  font-weight: ${(p) => (p.$state === 'active' ? 600 : 400)};
+`;
+const StepMark = styled.span `
+  flex: 0 0 20px;
+  width: 20px;
+  height: 20px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  border-radius: 50%;
+  font-size: 12px;
+  color: #fff;
+  background: ${(p) => p.$state === 'done' ? '#16a34a' : p.$state === 'pending' ? 'var(--ck-body-divider, #e4e4e7)' : 'transparent'};
+`;
+/** Outcome copy for the non-success terminal states. */
+const OUTCOME = {
+    bounced: { heading: 'Deposit refunded', body: 'The bridge bounced your deposit and refunded it to your wallet.' },
+    expired: { heading: 'Session expired', body: 'Reopen the deposit to get a fresh address.' },
+};
+/**
+ * Compact flow view shown once a deposit is detected. `processing` renders a live
+ * stepper (payment received → bridging → delivering); on `succeeded` the third
+ * step holds active briefly so the user sees it, then the tick + "See balance"
+ * screen takes over. `bounced`/`expired` show the outcome with a way out.
+ */
+function DepositProgress({ status }) {
+    const { setRoute, triggerResize } = useOpenfort();
+    const [delivered, setDelivered] = useState(false);
+    // On success, hold on the "Delivering" step for a beat before the confirmed
+    // screen — otherwise the flow jumps straight from bridging to confirmed.
+    useEffect(() => {
+        if (status !== 'succeeded')
+            return;
+        const id = setTimeout(() => setDelivered(true), DELIVERING_HOLD_MS);
+        return () => clearTimeout(id);
+    }, [status]);
+    // Resize the modal whenever the visible step / screen changes.
+    useEffect(() => {
+        triggerResize();
+        // Correlate the perceived terminal (incl. the 1.2s delivering hold) with the
+        // data-layer terminal from useFunding; UI is unchanged.
+        logger.log('[funding:progress] render', { status, delivered });
+    }, [status, delivered, triggerResize]);
+    if (status === 'succeeded' && delivered)
+        return jsx(DepositSuccess, {});
+    if (status === 'bounced' || status === 'expired') {
+        const ui = OUTCOME[status];
+        return (jsxs(PageContent, { children: [jsx(ModalHeading, { children: ui === null || ui === void 0 ? void 0 : ui.heading }), jsx(ModalBody, { children: ui === null || ui === void 0 ? void 0 : ui.body }), jsx(Button, { variant: "primary", onClick: () => setRoute(status === 'expired' ? routes.DEPOSIT : routes.CONNECTED), children: status === 'expired' ? 'Start over' : 'See balance' })] }));
+    }
+    // processing → bridging active (step 1); succeeded (pre-confirmed) → delivering active (step 2).
+    const activeStep = status === 'succeeded' ? 2 : 1;
+    return (jsxs(PageContent, { children: [jsx(ModalHeading, { children: "Completing your deposit" }), jsx(ModalBody, { children: "Keep this open \u2014 your funds are on the way." }), jsx(StepList, { children: STEPS.map((step, i) => {
+                    const state = stepStateFor(i, activeStep);
+                    return (jsxs(StepRow, { "$state": state, children: [state === 'active' ? jsx(Spinner, {}) : jsx(StepMark, { "$state": state, children: state === 'done' ? '✓' : '' }), jsx("span", { children: step.label })] }, step.key));
+                }) })] }));
+}
+
+export { DepositProgress, isDepositFlowActive };
+//# sourceMappingURL=DepositProgress.js.map

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

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

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

@@ -0,0 +1,9 @@
+import type { SessionStatus } from '../../../hooks/openfort/useFunding';
+/**
+ * Live funding status shown once a deposit address exists, so the user sees the
+ * flow progress (waiting → bridging → delivered) and the terminal outcome.
+ * Renders nothing before a payment method is set (`idle`/`requires_payment_method`).
+ */
+export declare function DepositStatus({ status }: {
+    status: SessionStatus | 'idle';
+}): import("react/jsx-runtime").JSX.Element | null;

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

@@ -0,0 +1,43 @@
+import { jsxs, jsx } from 'react/jsx-runtime';
+import styled from '../../../styles/styled/index.js';
+import { Spinner } from '../../Common/Spinner/index.js';
+
+/** Live, user-facing copy for each non-initial session status. */
+const STATUS_UI = {
+    waiting_payment: { label: 'Waiting for your deposit…', tone: 'pending' },
+    processing: { label: 'Bridging your funds…', tone: 'pending' },
+    succeeded: { label: 'Funds delivered to your wallet', tone: 'success' },
+    bounced: { label: 'Deposit bounced — refunded to your wallet', tone: 'warn' },
+    expired: { label: 'Session expired — reopen for a fresh address', tone: 'muted' },
+};
+const TONE_COLOR = {
+    pending: 'var(--ck-body-color-muted, #6b7280)',
+    success: '#16a34a',
+    warn: '#d97706',
+    muted: 'var(--ck-body-color-muted, #6b7280)',
+};
+const Banner = styled.div `
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  margin-top: 14px;
+  padding: 10px 12px;
+  border-radius: 10px;
+  border: 1px solid var(--ck-body-divider, #e4e4e7);
+  background: var(--ck-body-background-secondary, #fafafa);
+  font-size: 14px;
+`;
+/**
+ * Live funding status shown once a deposit address exists, so the user sees the
+ * flow progress (waiting → bridging → delivered) and the terminal outcome.
+ * Renders nothing before a payment method is set (`idle`/`requires_payment_method`).
+ */
+function DepositStatus({ status }) {
+    const ui = status === 'idle' ? undefined : STATUS_UI[status];
+    if (!ui)
+        return null;
+    return (jsxs(Banner, { style: { color: TONE_COLOR[ui.tone] }, children: [ui.tone === 'pending' ? jsx(Spinner, {}) : jsx("span", { "aria-hidden": true, children: ui.tone === 'success' ? '✓' : '!' }), jsx("span", { children: ui.label })] }));
+}
+
+export { DepositStatus };
+//# sourceMappingURL=DepositStatus.js.map

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

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

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

@@ -0,0 +1,6 @@
+/**
+ * Terminal success screen for a funding deposit. Replaces the deposit form once
+ * Relay reports the funds delivered, collapsing the modal to the compact
+ * confirmation size with a tick animation and a shortcut back to the balance.
+ */
+export declare function DepositSuccess(): import("react/jsx-runtime").JSX.Element;

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

@@ -0,0 +1,24 @@
+import { jsxs, jsx } from 'react/jsx-runtime';
+import { useEffect } from 'react';
+import Button from '../../Common/Button/index.js';
+import Loader from '../../Common/Loading/index.js';
+import { routes } from '../../Openfort/types.js';
+import { useOpenfort } from '../../Openfort/useOpenfort.js';
+import { PageContent } from '../../PageContent/index.js';
+
+/**
+ * Terminal success screen for a funding deposit. Replaces the deposit form once
+ * Relay reports the funds delivered, collapsing the modal to the compact
+ * confirmation size with a tick animation and a shortcut back to the balance.
+ */
+function DepositSuccess() {
+    const { setRoute, triggerResize } = useOpenfort();
+    // Collapse the modal from the tall deposit form down to the compact card.
+    useEffect(() => {
+        triggerResize();
+    }, [triggerResize]);
+    return (jsxs(PageContent, { children: [jsx(Loader, { isSuccess: true, header: "Deposit received", description: "Funds delivered to your wallet" }), jsx(Button, { variant: "primary", onClick: () => setRoute(routes.ASSET_INVENTORY), children: "See balance" })] }));
+}
+
+export { DepositSuccess };
+//# sourceMappingURL=DepositSuccess.js.map

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

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

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

@@ -0,0 +1,12 @@
+import type { PaymentMethod } from '../../../hooks/openfort/useFunding';
+type SourceCurrency = {
+    symbol: string;
+    decimals: number;
+};
+/** Collapsible details: minimum amount, rail fee, time to receive, max deposit.
+ * Pulls the minimum and fee from the live quote (`pm`) when available. */
+export declare function DepositDetails({ pm, sourceCurrency, }: {
+    pm: PaymentMethod | null;
+    sourceCurrency: SourceCurrency | null;
+}): import("react/jsx-runtime").JSX.Element;
+export {};

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

@@ -0,0 +1,40 @@
+import { jsxs, jsx } from 'react/jsx-runtime';
+import { useState, useEffect } from 'react';
+import { formatUnits } from 'viem';
+import { useOpenfort } from '../../Openfort/useOpenfort.js';
+import { detailsBox, detailsToggle, chevron, detailsRow, detailsLabel, detailsValue } from './formStyles.js';
+
+function Row({ label, value }) {
+    return (jsxs("div", { style: detailsRow, children: [jsx("span", { style: detailsLabel, children: label }), jsx("span", { style: detailsValue, children: value })] }));
+}
+/** Rail fees charged in the source currency (relayer gas + service). Origin-chain
+ * gas is paid by the sender's own transaction, so it's not summed here. */
+function formatRailFee(pm, currency) {
+    const total = pm.fees
+        .filter((fee) => fee.currency === currency.symbol)
+        .reduce((sum, fee) => sum + BigInt(fee.amount), BigInt(0));
+    if (total === BigInt(0))
+        return 'Free';
+    return `≈ ${formatUnits(total, currency.decimals)} ${currency.symbol}`;
+}
+function formatMin(pm, currency) {
+    if (!pm.minAmount)
+        return 'None';
+    return `${formatUnits(BigInt(pm.minAmount), currency.decimals)} ${currency.symbol}`;
+}
+/** Collapsible details: minimum amount, rail fee, time to receive, max deposit.
+ * Pulls the minimum and fee from the live quote (`pm`) when available. */
+function DepositDetails({ pm, sourceCurrency, }) {
+    const [open, setOpen] = useState(true);
+    const { triggerResize } = useOpenfort();
+    // Grow/shrink the modal to fit the expanded rows.
+    useEffect(() => {
+        triggerResize();
+    }, [open, triggerResize]);
+    const fee = pm && sourceCurrency ? formatRailFee(pm, sourceCurrency) : '—';
+    const min = pm && sourceCurrency ? formatMin(pm, sourceCurrency) : '—';
+    return (jsxs("div", { style: detailsBox, children: [jsxs("button", { type: "button", style: detailsToggle, onClick: () => setOpen((o) => !o), children: [jsx("span", { children: "Details" }), jsx("span", { style: chevron, children: open ? '▴' : '▾' })] }), open && (jsxs("div", { children: [jsx(Row, { label: "Minimum amount", value: min }), jsx(Row, { label: "Fee", value: fee }), jsx(Row, { label: "Time to receive", value: "~10 sec" }), jsx(Row, { label: "Max deposit", value: "No limit" })] }))] }));
+}
+
+export { DepositDetails };
+//# sourceMappingURL=Details.js.map

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

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

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

@@ -0,0 +1,12 @@
+type LogoOption = {
+    value: string;
+    label: string;
+    logo: string | null;
+};
+/** A select-like dropdown that shows a logo next to the trigger and each option. */
+export declare function LogoSelect({ value, options, onChange, }: {
+    value: string;
+    options: LogoOption[];
+    onChange: (value: string) => void;
+}): import("react/jsx-runtime").JSX.Element;
+export {};