@openfort/react 1.3.0 → 1.5.0

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

@@ -0,0 +1,111 @@
+import { jsxs, jsx, Fragment } from 'react/jsx-runtime';
+import { chainConfigs } from '../../../constants/chainConfigs.js';
+import { useEthereumBridge } from '../../../ethereum/OpenfortEthereumBridgeContext.js';
+import styled from '../../../styles/styled/index.js';
+import { useSwitchChainFiltered } from '../../../wagmi/useSwitchChainFiltered.js';
+import Chain from '../../Common/Chain/index.js';
+import { ScrollArea } from '../../Common/ScrollArea/index.js';
+import { isSolana } from './sources.js';
+
+/** Readable name for a CAIP-2 chain the rail can't deliver to. */
+function chainName(caip) {
+    var _a, _b;
+    if (isSolana(caip))
+        return 'Solana';
+    const id = Number(caip.split(':')[1]);
+    return (_b = (_a = chainConfigs.find((c) => c.id === id)) === null || _a === void 0 ? void 0 : _a.name) !== null && _b !== void 0 ? _b : 'this network';
+}
+const Card = styled.div `
+  text-align: left;
+  display: flex;
+  flex-direction: column;
+  gap: 10px;
+  padding: 14px;
+  margin-top: 4px;
+  border-radius: 12px;
+  background: var(--ck-body-background-secondary, #fafafa);
+  border: 1px solid var(--ck-body-divider, #e4e4e7);
+  color: var(--ck-body-color);
+`;
+const Title = styled.div `
+  font-size: 14px;
+  font-weight: 600;
+`;
+const Body = styled.p `
+  margin: 0;
+  font-size: 13px;
+  line-height: 1.45;
+  color: var(--ck-body-color-muted, #6b7280);
+`;
+const Label = styled.div `
+  font-size: 12px;
+  font-weight: 600;
+  color: var(--ck-body-color-muted, #6b7280);
+`;
+const SwitchButtons = styled.div `
+  display: flex;
+  flex-direction: column;
+  gap: 8px;
+`;
+const SwitchButton = styled.button `
+  appearance: none;
+  display: flex;
+  align-items: center;
+  gap: 10px;
+  width: 100%;
+  box-sizing: border-box;
+  padding: 10px 12px;
+  border-radius: 10px;
+  border: 1px solid var(--ck-body-divider, #e4e4e7);
+  background: var(--ck-body-background, #fff);
+  color: var(--ck-body-color);
+  font-size: 14px;
+  font-weight: 500;
+  cursor: pointer;
+
+  &:hover:not(:disabled) {
+    background: var(--ck-secondary-button-hover-background, #f3f3f5);
+  }
+  &:disabled {
+    opacity: 0.55;
+    cursor: default;
+  }
+
+  .name {
+    flex: 1;
+    text-align: left;
+  }
+  .chevron {
+    color: var(--ck-body-color-muted, #6b7280);
+  }
+`;
+/**
+ * Shown in the deposit flow when the active funding TARGET chain (the embedded
+ * wallet's chain) isn't one the rail can deliver to — e.g. Polygon Amoy or a
+ * Solana testnet, which Relay's testnet rail doesn't route. Explains why, and
+ * (on EVM) offers a one-tap switch to the supported chains. Solana-only contexts
+ * have no in-VM switch, so they get the explanation alone.
+ */
+function UnsupportedNetworkNotice({ targetChain, railChains, }) {
+    const bridge = useEthereumBridge();
+    return (jsxs(Card, { children: [jsxs(Title, { children: ["Funding isn't available on ", chainName(targetChain)] }), jsx(Body, { children: isSolana(targetChain)
+                    ? "Solana isn't supported by the funding rail in test mode. Switch to a supported EVM testnet to add funds."
+                    : "The funding rail can't deliver to this network. Switch to a supported one to add funds." }), bridge && jsx(SupportedChainSwitcher, { railChains: railChains })] }));
+}
+/**
+ * EVM-only: the rail-supported chains the wallet can switch to. Rendered only when
+ * an Ethereum bridge is present (wagmi), so the wagmi hook below never runs in a
+ * Solana-only provider tree.
+ */
+function SupportedChainSwitcher({ railChains }) {
+    const { chains, switchChain, isPending } = useSwitchChainFiltered();
+    const supported = chains.filter((c) => railChains.some((rc) => rc.id === `eip155:${c.id}`));
+    if (supported.length === 0)
+        return null;
+    return (jsxs(Fragment, { children: [jsx(Label, { children: "Switch to a supported network" }), jsx(ScrollArea, { height: 156, children: jsx(SwitchButtons, { children: supported.map((c) => {
+                        return (jsxs(SwitchButton, { type: "button", disabled: isPending || !switchChain, onClick: () => switchChain === null || switchChain === void 0 ? void 0 : switchChain({ chainId: c.id }), children: [jsx(Chain, { id: c.id, size: 22 }), jsx("span", { className: "name", children: c.name }), jsx("span", { className: "chevron", "aria-hidden": true, children: "\u203A" })] }, c.id));
+                    }) }) })] }));
+}
+
+export { UnsupportedNetworkNotice };
+//# sourceMappingURL=UnsupportedNetworkNotice.js.map

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

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

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

@@ -1,11 +1,13 @@
 import { jsx, jsxs } from 'react/jsx-runtime';
 import { ChainTypeEnum } from '@openfort/openfort-js';
+import { useEffect } from 'react';
 import { DollarIcon, BuyIcon, WalletIcon, ReceiveIcon, ExternalLinkIcon } from '../../../assets/icons.js';
 import Logos from '../../../assets/logos.js';
 import { useFunding } from '../../../hooks/openfort/useFunding.js';
 import { useFundingChains } from '../../../hooks/openfort/useFundingChains.js';
 import useIsMobile from '../../../hooks/useIsMobile.js';
 import { useOpenfortCore } from '../../../openfort/useOpenfort.js';
+import { getPublishableKeyEnvironment } from '../../../utils/validation.js';
 import { ModalHeading } from '../../Common/Modal/styles.js';
 import PoweredByFooter from '../../Common/PoweredByFooter/index.js';
 import { FundingMethod, routes } from '../../Openfort/types.js';
@@ -15,6 +17,9 @@ import { EVM_BUY_CURRENCIES } from '../Buy/evmCurrencies.js';
 import { SOLANA_BUY_CURRENCIES } from '../Buy/solanaCurrencies.js';
 import { getPaymentOptions } from './paymentOptions.js';
 import { DepositContent, OptionList, OptionButton, OptionLeft, OptionIconBadge, OptionInfo, OptionTitle, OptionSubtitle, LogoCluster } from './styles.js';
+import { TestnetNotice } from './TestnetNotice.js';
+import { UnsupportedNetworkNotice } from './UnsupportedNetworkNotice.js';
+import { useFundingTarget } from './useFundingTarget.js';
 
 /** The action icon shown in each row's left badge (icons default to 20×20). */
 const METHOD_ICON = {
@@ -47,14 +52,25 @@ const hideBrokenLogo = (e) => {
  */
 const Deposit = () => {
     var _a;
-    const { setRoute, setBuyForm, uiConfig } = useOpenfort();
+    const { setRoute, setBuyForm, uiConfig, publishableKey, triggerResize } = useOpenfort();
     const { chainType } = useOpenfortCore();
     const isMobile = useIsMobile();
     const { isAvailable } = useFunding();
-    const { chains } = useFundingChains();
+    const { chains, railChains, loading: chainsLoading } = useFundingChains();
+    const target = useFundingTarget();
+    // The rail can only deliver to chains it lists. If the embedded wallet's target
+    // chain (e.g. Polygon Amoy or a Solana testnet) isn't one of them, there's no
+    // deposit route at all — show the explanation instead of any method options.
+    const targetUnsupported = !chainsLoading && railChains.length > 0 && !railChains.some((c) => c.id === target.chain);
+    // Content swaps between the option list and the notice once chains resolve; the
+    // modal only re-measures on an explicit resize, so nudge it when that flips.
+    useEffect(() => {
+        triggerResize();
+    }, [targetUnsupported, triggerResize]);
     const options = getPaymentOptions({
         isMobile,
         fundingAvailable: isAvailable,
+        testnet: getPublishableKeyEnvironment(publishableKey) === 'test',
         methods: (_a = uiConfig.funding) === null || _a === void 0 ? void 0 : _a.methods,
     });
     // Distinct source-currency logos (USDC, USDT, ETH, …) for the "from address" row.
@@ -104,10 +120,10 @@ const Deposit = () => {
         }));
         setRoute(routes.BUY);
     };
-    return (jsxs(PageContent, { onBack: routes.CONNECTED, children: [jsx(ModalHeading, { children: "Add funds" }), jsx(DepositContent, { children: jsx(OptionList, { children: options.map((option) => {
+    return (jsxs(PageContent, { onBack: routes.CONNECTED, children: [jsx(ModalHeading, { children: "Add funds" }), jsx(TestnetNotice, {}), targetUnsupported ? (jsx(UnsupportedNetworkNotice, { targetChain: target.chain, railChains: railChains })) : (jsx(DepositContent, { children: jsx(OptionList, { children: options.map((option) => {
                         var _a;
                         return (jsxs(OptionButton, { type: "button", disabled: option.disabled, onClick: () => go(option.target), children: [jsxs(OptionLeft, { children: [jsx(OptionIconBadge, { children: METHOD_ICON[option.id] }), jsxs(OptionInfo, { children: [jsx(OptionTitle, { children: option.title }), jsx(OptionSubtitle, { children: (_a = option.disabledReason) !== null && _a !== void 0 ? _a : option.subtitle })] })] }), jsx(LogoCluster, { children: clusterFor(option.id) })] }, option.id));
-                    }) }) }), jsx(PoweredByFooter, {})] }));
+                    }) }) })), jsx(PoweredByFooter, {})] }));
 };
 
 export { Deposit as default };

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

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

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

@@ -28,6 +28,12 @@ type PaymentOptionsContext = {
     isMobile: boolean;
     /** When the funding backend is unavailable, crypto/CEX rows are disabled. */
     fundingAvailable: boolean;
+    /**
+     * Test-key (`pk_test_…`) project. The fiat (card/Apple Pay) and exchange rails
+     * settle real money on mainnet only — Stripe/Coinbase can't deliver to a testnet
+     * wallet — so they're disabled here. The crypto rails (Relay testnet) stay on.
+     */
+    testnet?: boolean;
     /**
      * Integrator-selected methods, in display order. When set, only these show
      * (still subject to device/availability gating). Omit to show all.

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

@@ -51,7 +51,13 @@ function getPaymentOptions(ctx) {
         ? [...visible].sort((a, b) => Number(b.id === FundingMethod.APPLE_PAY) - Number(a.id === FundingMethod.APPLE_PAY))
         : visible;
     return ordered.map((method) => {
-        const fundingRail = method.target.kind === 'crypto' || method.target.kind === 'wallet' || method.target.kind === 'cex';
+        const kind = method.target.kind;
+        // Fiat (card/Apple Pay) and exchange rails move real money and only settle on
+        // mainnet, so a test-key project can't use them — disable with a clear reason.
+        if (ctx.testnet && (kind === 'buy' || kind === 'cex')) {
+            return { ...method, disabled: true, disabledReason: 'Not available on testnet' };
+        }
+        const fundingRail = kind === 'crypto' || kind === 'wallet' || kind === 'cex';
         if (fundingRail && !ctx.fundingAvailable) {
             return { ...method, disabled: true, disabledReason: 'Coming soon' };
         }

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

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

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

@@ -25,6 +25,8 @@ export declare function useDepositRoute(kind: DepositRouteKind): {
     pm: import("../../../hooks/openfort/useFunding").PaymentMethod | null;
     receiverAddress: string | null;
     sameChain: boolean;
+    targetUnsupported: boolean;
+    railChains: FundingChain[];
     status: import("../../../hooks/openfort/useFunding").SessionStatus | "idle";
     loading: boolean;
     error: Error | null;

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

@@ -25,7 +25,7 @@ function useDepositRoute(kind) {
     const ethWallet = useEthereumEmbeddedWallet();
     const solWallet = useSolanaEmbeddedWallet();
     const { session, status, error, loading, isAvailable, fund, payLink, reset } = useFunding();
-    const { chains: allChains, loading: chainsLoading } = useFundingChains();
+    const { chains: allChains, railChains, 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
@@ -49,6 +49,11 @@ function useDepositRoute(kind) {
     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;
+    // The rail only delivers to chains in its list; if the active funding TARGET (the
+    // embedded wallet's chain — e.g. Polygon Amoy or a Solana testnet) isn't one of
+    // them, there's no route. Don't call Relay (it would 400 with a cryptic "invalid
+    // currency"); the page prompts a switch to a supported chain instead.
+    const targetUnsupported = !chainsLoading && railChains.length > 0 && !railChains.some((c) => c.id === 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);
@@ -56,6 +61,11 @@ function useDepositRoute(kind) {
     useEffect(() => {
         if (!address || !isAvailable || !activeChain || !activeCurrency)
             return;
+        if (targetUnsupported) {
+            lastKey.current = '';
+            reset();
+            return;
+        }
         if (sameChain) {
             lastKey.current = '';
             reset();
@@ -72,7 +82,19 @@ function useDepositRoute(kind) {
             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]);
+    }, [
+        address,
+        activeChain,
+        activeCurrency,
+        isAvailable,
+        sameChain,
+        targetUnsupported,
+        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)
@@ -94,6 +116,8 @@ function useDepositRoute(kind) {
         pm,
         receiverAddress,
         sameChain,
+        targetUnsupported,
+        railChains,
         status,
         loading,
         error,

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

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

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

@@ -0,0 +1,19 @@
+/**
+ * Watches a wallet's native balance and reports when it increases past the first
+ * observed value — i.e. a same-chain deposit landed. Same-chain "transfer from
+ * address" has no rail session to poll (the deposit address is the wallet
+ * itself), so arrival is read straight from the chain RPC.
+ *
+ * Self-contained single timeout chain (no shared query cache), so it can't fan
+ * out into a request storm: one read in flight at a time, with an interval that
+ * grows on each tick and resets to brisk when the user returns to the tab (the
+ * moment a deposit was likely just made). On arrival, cached balances are
+ * invalidated so the asset list refreshes, and polling stops.
+ */
+export declare function useSameChainArrival({ address, chainId, enabled, }: {
+    address: string;
+    chainId: number;
+    enabled: boolean;
+}): {
+    arrived: boolean;
+};

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

@@ -0,0 +1,86 @@
+import { useState, useRef, useEffect } from 'react';
+import { createPublicClient, http } from 'viem';
+import { invalidateBalance } from '../../../hooks/useBalance.js';
+import { getDefaultEthereumRpcUrl } from '../../../utils/rpc.js';
+import { useOpenfort } from '../../Openfort/useOpenfort.js';
+
+/**
+ * Backoff schedule (ms) for the waiting poll: brisk at first, easing off so a
+ * long wait doesn't hammer the RPC. The last entry is the steady-state cap.
+ */
+const POLL_BACKOFF_MS = [2000, 2000, 3000, 5000, 8000, 12000, 20000];
+/**
+ * Watches a wallet's native balance and reports when it increases past the first
+ * observed value — i.e. a same-chain deposit landed. Same-chain "transfer from
+ * address" has no rail session to poll (the deposit address is the wallet
+ * itself), so arrival is read straight from the chain RPC.
+ *
+ * Self-contained single timeout chain (no shared query cache), so it can't fan
+ * out into a request storm: one read in flight at a time, with an interval that
+ * grows on each tick and resets to brisk when the user returns to the tab (the
+ * moment a deposit was likely just made). On arrival, cached balances are
+ * invalidated so the asset list refreshes, and polling stops.
+ */
+function useSameChainArrival({ address, chainId, enabled, }) {
+    var _a, _b, _c;
+    const { walletConfig } = useOpenfort();
+    const rpcUrl = (_c = (_b = (_a = walletConfig === null || walletConfig === void 0 ? void 0 : walletConfig.ethereum) === null || _a === void 0 ? void 0 : _a.rpcUrls) === null || _b === void 0 ? void 0 : _b[chainId]) !== null && _c !== void 0 ? _c : getDefaultEthereumRpcUrl(chainId);
+    const [arrived, setArrived] = useState(false);
+    const baselineRef = useRef(null);
+    useEffect(() => {
+        if (!enabled || !address)
+            return;
+        const client = createPublicClient({ transport: http(rpcUrl) });
+        let cancelled = false;
+        let timer = null;
+        let step = 0;
+        baselineRef.current = null;
+        const read = async () => {
+            try {
+                const balance = await client.getBalance({ address: address });
+                if (cancelled)
+                    return;
+                if (baselineRef.current === null) {
+                    baselineRef.current = balance;
+                }
+                else if (balance > baselineRef.current) {
+                    setArrived(true);
+                    invalidateBalance();
+                    return; // deposit landed — stop polling
+                }
+            }
+            catch {
+                // transient RPC error — keep polling on the same schedule
+            }
+            if (cancelled)
+                return;
+            const delay = POLL_BACKOFF_MS[Math.min(step, POLL_BACKOFF_MS.length - 1)];
+            step += 1;
+            timer = setTimeout(read, delay);
+        };
+        // Re-check immediately when the user returns to the tab (deposit likely just
+        // made), and reset the schedule back to brisk.
+        const onReturn = () => {
+            if (cancelled || document.visibilityState !== 'visible')
+                return;
+            if (timer)
+                clearTimeout(timer);
+            step = 0;
+            read();
+        };
+        read();
+        document.addEventListener('visibilitychange', onReturn);
+        window.addEventListener('focus', onReturn);
+        return () => {
+            cancelled = true;
+            if (timer)
+                clearTimeout(timer);
+            document.removeEventListener('visibilitychange', onReturn);
+            window.removeEventListener('focus', onReturn);
+        };
+    }, [enabled, address, chainId, rpcUrl]);
+    return { arrived };
+}
+
+export { useSameChainArrival };
+//# sourceMappingURL=useSameChainArrival.js.map

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

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

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

@@ -1,5 +1,6 @@
-import { jsx, jsxs } from 'react/jsx-runtime';
+import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
 import { useEffect } from 'react';
+import { currencyLogoUrl, chainLogoUrl } from '../../../constants/logos.js';
 import { ModalHeading, ModalBody } from '../../Common/Modal/styles.js';
 import { routes } from '../../Openfort/types.js';
 import { useOpenfort } from '../../Openfort/useOpenfort.js';
@@ -7,7 +8,14 @@ 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 { SameChainDepositStatus } from '../Deposit/SameChainDepositStatus.js';
+import { SameChainDepositSuccess } from '../Deposit/SameChainDepositSuccess.js';
+import { isSolana } from '../Deposit/sources.js';
+import { TestnetNotice } from '../Deposit/TestnetNotice.js';
+import { UnsupportedNetworkNotice } from '../Deposit/UnsupportedNetworkNotice.js';
 import { useDepositRoute } from '../Deposit/useDepositRoute.js';
+import { useSameChainArrival } from '../Deposit/useSameChainArrival.js';
+import { caipToChainId } from '../DepositWallet/walletDeeplinks.js';
 
 /**
  * Transfer from address — choose a source chain + token and send to the deposit
@@ -16,15 +24,30 @@ import { useDepositRoute } from '../Deposit/useDepositRoute.js';
  * "Transfer from wallet" tab.
  */
 const DepositCrypto = () => {
-    var _a, _b, _c, _d;
+    var _a, _b, _c, _d, _e;
     const { triggerResize } = useOpenfort();
     const route = useDepositRoute('crypto');
     useEffect(() => {
         triggerResize();
     }, [route.receiverAddress, route.loading, route.status, triggerResize]);
+    // Same-chain "transfer from address" lands in the wallet itself, so there's no
+    // rail session — watch the native balance directly and swap to the success
+    // screen once the deposit arrives.
+    const sameChainEnabled = route.sameChain && !!route.receiverAddress && !isSolana(route.target.chain);
+    const sameChainAddress = (_a = route.receiverAddress) !== null && _a !== void 0 ? _a : '';
+    const sameChainId = Number(route.target.chain.split(':')[1]);
+    const { arrived } = useSameChainArrival({
+        address: sameChainAddress,
+        chainId: sameChainId,
+        enabled: sameChainEnabled,
+    });
     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 })] }));
+    if (sameChainEnabled && arrived)
+        return jsx(SameChainDepositSuccess, { address: sameChainAddress, chainId: sameChainId });
+    return (jsxs(PageContent, { onBack: routes.DEPOSIT, children: [jsx(ModalHeading, { children: "Transfer from address" }), jsx(TestnetNotice, {}), route.targetUnsupported ? (jsx(UnsupportedNetworkNotice, { targetChain: route.target.chain, railChains: route.railChains })) : (jsxs(Fragment, { children: [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: currencyLogoUrl((_b = route.activeCurrency) === null || _b === void 0 ? void 0 : _b.symbol, (_c = route.activeCurrency) === null || _c === void 0 ? void 0 : _c.logo), chainLogo: chainLogoUrl(caipToChainId((_d = route.activeChain) === null || _d === void 0 ? void 0 : _d.id), (_e = route.activeChain) === null || _e === void 0 ? void 0 : _e.logo), 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 }), sameChainEnabled && jsx(SameChainDepositStatus, {}), route.error && jsx(ModalBody, { style: { color: '#dc2626', marginTop: 12 }, children: route.error.message })] }))] }));
 };
 
 export { DepositCrypto as default };

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

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

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

@@ -5,6 +5,7 @@ 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 { ScrollArea } from '../../Common/ScrollArea/index.js';
 import { useOpenfort } from '../../Openfort/useOpenfort.js';
 import { DepositStatus } from '../Deposit/DepositStatus.js';
 import { walletListBtn } from '../Deposit/formStyles.js';
@@ -125,14 +126,14 @@ function DepositWalletDesktop({ receiverAddress, activeChain, activeCurrency, lo
             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 })] }));
+    return (jsxs("div", { style: { display: 'flex', flexDirection: 'column', gap: 10, flex: '1 1 auto', minHeight: 0 }, children: [connectors.length === 0 && jsx(ModalBody, { children: "No browser wallet detected. Install MetaMask or Rabby." }), connectors.length > 0 && (jsx(ScrollArea, { fill: true, children: jsx("div", { style: { display: 'flex', flexDirection: 'column', gap: 10 }, children: 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 };

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

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

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

@@ -2,9 +2,12 @@ import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
 import { useState, useEffect } from 'react';
 import { parseUnits } from 'viem';
 import Logos from '../../../assets/logos.js';
+import { useEthereumBridge } from '../../../ethereum/OpenfortEthereumBridgeContext.js';
 import useIsMobile from '../../../hooks/useIsMobile.js';
+import styled from '../../../styles/styled/index.js';
 import { isIOS } from '../../../utils/index.js';
 import { ModalHeading, ModalBody } from '../../Common/Modal/styles.js';
+import { ScrollArea } from '../../Common/ScrollArea/index.js';
 import { routes } from '../../Openfort/types.js';
 import { useOpenfort } from '../../Openfort/useOpenfort.js';
 import { PageContent } from '../../PageContent/index.js';
@@ -15,11 +18,40 @@ import { walletListBtn } from '../Deposit/formStyles.js';
 import { RouteSelectors } from '../Deposit/RouteSelectors.js';
 import { isSolana } from '../Deposit/sources.js';
 import { StepDivider, Skeleton, ButtonLogo } from '../Deposit/styles.js';
+import { TestnetNotice } from '../Deposit/TestnetNotice.js';
+import { UnsupportedNetworkNotice } from '../Deposit/UnsupportedNetworkNotice.js';
 import { useDepositRoute } from '../Deposit/useDepositRoute.js';
 import { sanitizeAmountInput } from '../Send/utils.js';
 import { DepositWalletDesktop } from './DepositWalletDesktop.js';
 import { OPENFORT_DEPOSIT_PAGE_URL, caipToChainId, buildDepositPageUrl, buildOpenDappLinks } from './walletDeeplinks.js';
 
+// Flex column capped at the modal viewport so the page never overflows
+// InnerContainer (which caps at 88vh and would otherwise scroll the footer off
+// screen). The 112px accounts for the chrome wrapping this element inside the
+// measured PageContents: PageContentStyle's 48px top padding + PageContents'
+// 29px/24px padding (~101px), plus a small safety margin. The providers region
+// is the only part that shrinks/scrolls, which keeps the footer visible.
+const Layout = styled.div `
+  display: flex;
+  flex-direction: column;
+  min-height: 0;
+  max-height: calc(88vh - 112px);
+`;
+const TopFixed = styled.div `
+  flex-shrink: 0;
+`;
+// Grows to fill the space between the fixed top and footer; its ScrollArea
+// scrolls internally when the wallet list is taller than the available room.
+const ProvidersRegion = styled.div `
+  display: flex;
+  flex-direction: column;
+  flex: 1 1 auto;
+  min-height: 0;
+  margin-top: 14px;
+`;
+const FixedFooter = styled.div `
+  flex-shrink: 0;
+`;
 /** Wallet-app brand logos keyed by the deeplink `app` id. */
 const WALLET_LOGO = {
     metamask: jsx(Logos.MetaMask, { background: true }),
@@ -43,7 +75,13 @@ const DepositWallet = () => {
     const { triggerResize, uiConfig } = useOpenfort();
     const isMobile = useIsMobile();
     const route = useDepositRoute('crypto');
-    const [amount, setAmount] = useState('');
+    // The desktop send path goes through the wagmi bridge (browser-extension wallets).
+    // In Solana-only mode there's no wagmi provider, so fall back to the open-dApp
+    // deeplinks for EVM sources too — otherwise the wallet list renders empty.
+    const bridge = useEthereumBridge();
+    // Prefill a sensible default so the wallet deeplinks are immediately actionable
+    // (the funding deposit-address mint uses a fixed nominal amount regardless).
+    const [amount, setAmount] = useState('1');
     const [pressedPreset, setPressedPreset] = useState(null);
     const depositPageUrl = (_b = (_a = uiConfig.funding) === null || _a === void 0 ? void 0 : _a.depositPageUrl) !== null && _b !== void 0 ? _b : OPENFORT_DEPOSIT_PAGE_URL;
     // Solana sources have no numeric chain id and no desktop EVM-extension send, so
@@ -92,15 +130,15 @@ const DepositWallet = () => {
     }, [route.receiverAddress, route.loading, route.status, deeplinks.length, triggerResize]);
     if (isDepositFlowActive(route.status))
         return jsx(DepositProgress, { status: route.status });
-    return (jsxs(PageContent, { onBack: routes.DEPOSIT, children: [jsx(ModalHeading, { children: "Transfer from wallet" }), 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." }), jsxs(Section, { children: [jsx(SectionLabel, { children: "Amount" }), jsxs(AmountCard, { children: [jsx(CurrencySymbol, { children: (_m = (_l = route.activeCurrency) === null || _l === void 0 ? void 0 : _l.symbol) !== null && _m !== void 0 ? _m : '' }), jsx(AmountInput, { value: amount, onChange: handleAmountChange, placeholder: "0.00", inputMode: "decimal", autoComplete: "off" })] }), jsx(PresetList, { children: PRESETS.map((preset) => (jsx(PresetButton, { type: "button", "$active": pressedPreset === preset, onClick: () => handlePreset(preset), children: preset }, preset))) })] }), jsx(StepDivider, { children: "Then select the wallet you want to use" }), isMobile || isSolanaSrc ? (jsxs(Fragment, { children: [!depositPageUrl && (jsx(ModalBody, { style: { marginTop: 12 }, children: "Use a deposit address below to fund from your wallet." })), route.loading && !route.pm && (jsxs("div", { style: { display: 'flex', flexDirection: 'column', gap: 8, marginTop: 14 }, children: [jsx(Skeleton, { "$h": "44px", "$r": "10px" }), jsx(Skeleton, { "$h": "44px", "$r": "10px" }), jsx(Skeleton, { "$h": "44px", "$r": "10px" })] })), deeplinks.length > 0 && (jsx("div", { style: { display: 'flex', flexDirection: 'column', gap: 8, marginTop: 14 }, children: deeplinks.map((d) => (jsxs("a", { href: amountValid ? d.url : undefined, "aria-disabled": !amountValid, target: "_blank", rel: "noreferrer", style: {
-                                ...walletListBtn,
-                                display: 'flex',
-                                alignItems: 'center',
-                                justifyContent: 'center',
-                                gap: 8,
-                                opacity: amountValid ? 1 : 0.55,
-                                pointerEvents: amountValid ? 'auto' : 'none',
-                            }, children: [WALLET_LOGO[d.app] && jsx(ButtonLogo, { children: WALLET_LOGO[d.app] }), d.label, " \u2197"] }, d.app))) }))] })) : (jsx(DepositWalletDesktop, { receiverAddress: route.receiverAddress, activeChain: route.activeChain, activeCurrency: route.activeCurrency, loading: route.loading, amount: amount })), jsx(AddressPageLink, { label: "Or send to a deposit address" }), route.error && jsx(ModalBody, { style: { color: '#dc2626', marginTop: 12 }, children: route.error.message })] }));
+    return (jsxs(PageContent, { onBack: routes.DEPOSIT, children: [jsx(ModalHeading, { children: "Transfer from wallet" }), jsx(TestnetNotice, {}), route.targetUnsupported && (jsx(UnsupportedNetworkNotice, { targetChain: route.target.chain, railChains: route.railChains })), !route.targetUnsupported && (jsxs(Layout, { children: [jsxs(TopFixed, { children: [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." }), jsxs(Section, { children: [jsx(SectionLabel, { children: "Amount" }), jsxs(AmountCard, { children: [jsx(CurrencySymbol, { children: (_m = (_l = route.activeCurrency) === null || _l === void 0 ? void 0 : _l.symbol) !== null && _m !== void 0 ? _m : '' }), jsx(AmountInput, { value: amount, onChange: handleAmountChange, placeholder: "0.00", inputMode: "decimal", autoComplete: "off" })] }), jsx(PresetList, { children: PRESETS.map((preset) => (jsx(PresetButton, { type: "button", "$active": pressedPreset === preset, onClick: () => handlePreset(preset), children: preset }, preset))) })] }), jsx(StepDivider, { children: "Then select the wallet you want to use" })] }), jsx(ProvidersRegion, { children: isMobile || isSolanaSrc || !bridge ? (jsxs(Fragment, { children: [!depositPageUrl && (jsx(ModalBody, { style: { marginTop: 12 }, children: "Use a deposit address below to fund from your wallet." })), route.loading && !route.pm && (jsxs("div", { style: { display: 'flex', flexDirection: 'column', gap: 8 }, children: [jsx(Skeleton, { "$h": "44px", "$r": "10px" }), jsx(Skeleton, { "$h": "44px", "$r": "10px" }), jsx(Skeleton, { "$h": "44px", "$r": "10px" })] })), deeplinks.length > 0 && (jsx(ScrollArea, { fill: true, children: jsx("div", { style: { display: 'flex', flexDirection: 'column', gap: 8 }, children: deeplinks.map((d) => (jsxs("a", { href: amountValid ? d.url : undefined, "aria-disabled": !amountValid, target: "_blank", rel: "noreferrer", style: {
+                                                ...walletListBtn,
+                                                display: 'flex',
+                                                alignItems: 'center',
+                                                justifyContent: 'center',
+                                                gap: 8,
+                                                opacity: amountValid ? 1 : 0.55,
+                                                pointerEvents: amountValid ? 'auto' : 'none',
+                                            }, children: [WALLET_LOGO[d.app] && jsx(ButtonLogo, { children: WALLET_LOGO[d.app] }), d.label, " \u2197"] }, d.app))) }) }))] })) : (jsx(DepositWalletDesktop, { receiverAddress: route.receiverAddress, activeChain: route.activeChain, activeCurrency: route.activeCurrency, loading: route.loading, amount: amount })) }), jsxs(FixedFooter, { children: [jsx(AddressPageLink, { label: "Or send to a deposit address" }), route.error && jsx(ModalBody, { style: { color: '#dc2626', marginTop: 12 }, children: route.error.message })] })] }))] }));
 };
 
 export { DepositWallet as default };

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

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

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

@@ -1,9 +1,10 @@
-export declare const SelectTokenContent: import("styled-components").StyledComponent<({ children, width, onBack, logoutOnBack, header }: {
+export declare const SelectTokenContent: import("styled-components").StyledComponent<({ children, width, onBack, logoutOnBack, header, className, }: {
     children?: React.ReactNode;
     width?: number | string;
     onBack?: import("../../PageContent").SetOnBackFunction;
     logoutOnBack?: boolean;
     header?: string;
+    className?: string;
 }) => import("react/jsx-runtime").JSX.Element, any, {}, never>;
 export declare const TokenList: import("styled-components").StyledComponent<"div", any, {}, never>;
 export declare const TokenButton: import("styled-components").StyledComponent<"button", any, {}, never>;