@openfort/react 1.2.0 → 1.4.0

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/DepositCex/index.js

@@ -17,7 +17,7 @@ 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 { isSolana, DEST_USDC } from '../Deposit/sources.js';
 import { StepDivider, ButtonLogo } from '../Deposit/styles.js';
 import { useFundingTarget } from '../Deposit/useFundingTarget.js';
 import { sanitizeForParsing, sanitizeAmountInput } from '../Send/utils.js';
@@ -55,7 +55,7 @@ const hideBrokenLogo = (e) => {
  * success / failed screen. No Relay routing; Binance is gated until its rail lands.
  */
 const DepositCex = () => {
-    var _a, _b, _c, _d, _e, _f, _g;
+    var _a, _b, _c, _d, _e, _f;
     const { triggerResize } = useOpenfort();
     const target = useFundingTarget();
     // CEX (Coinbase pay-link + session) is served by the Openfort API, not the
@@ -73,20 +73,19 @@ const DepositCex = () => {
     // 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 address = isSolana(target.chain) ? solanaAddress : wallet.address;
     const chainSupported = isCexDeliverable(target.chain);
     // Resolve the destination asset + chain for the "Arrives as …" line. The live
     // chain list is curated for source selection, so the destination may be absent;
     // only claim a symbol we resolved, or USDC for the zero-config default.
     const destChain = chains.find((c) => c.id === target.chain);
-    const destChainName = (_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 destChainName = (_c = (_b = destChain === null || destChain === void 0 ? void 0 : destChain.name) !== null && _b !== void 0 ? _b : CEX_CHAIN_NAMES[target.chain]) !== null && _c !== void 0 ? _c : target.chain;
     const destAsset = destChain === null || destChain === void 0 ? void 0 : destChain.currencies.find((c) => c.address.toLowerCase() === target.currency.toLowerCase());
     const isDefaultUsdc = target.currency.toLowerCase() === DEST_USDC.toLowerCase();
-    const destAssetLabel = (_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;
+    const destAssetLabel = (_d = destAsset === null || destAsset === void 0 ? void 0 : destAsset.symbol) !== null && _d !== void 0 ? _d : (isDefaultUsdc ? 'USDC' : null);
+    const destAssetLogo = (_e = destAsset === null || destAsset === void 0 ? void 0 : destAsset.logo) !== null && _e !== void 0 ? _e : null;
+    const destChainLogo = (_f = destChain === null || destChain === void 0 ? void 0 : destChain.logo) !== null && _f !== void 0 ? _f : null;
     // Mint the destination-bound session up-front (per target wallet), so the click
     // that opens Coinbase is a single fast pay-link call and stays popup-safe.
     //

package/build/components/Pages/DepositCex/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/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.d.ts

@@ -5,6 +5,9 @@ type Props = {
     activeChain: FundingChain | undefined;
     activeCurrency: FundingCurrency | undefined;
     loading: boolean;
+    /** Amount to send, in the source token's units. Owned by the parent so the
+     * amount input + presets are shared with the mobile (deeplink) path. */
+    amount: string;
 };
 /**
  * Desktop "transfer from wallet": send the source token to the Relay deposit
@@ -13,5 +16,5 @@ type Props = {
  * Openfort embedded account (that one is the destination, not the source).
  * Once the deposit lands, the funding session's status polling drives progress.
  */
-export declare function DepositWalletDesktop({ receiverAddress, activeChain, activeCurrency, loading }: Props): import("react/jsx-runtime").JSX.Element | null;
+export declare function DepositWalletDesktop({ receiverAddress, activeChain, activeCurrency, loading, amount }: Props): import("react/jsx-runtime").JSX.Element | null;
 export {};

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

@@ -1,10 +1,12 @@
 import { jsxs, jsx } from 'react/jsx-runtime';
-import { useState } from 'react';
+import { useState, useEffect } from 'react';
 import { parseUnits, formatUnits, encodeFunctionData, erc20Abi } from 'viem';
 import { WalletIcon } from '../../../assets/icons.js';
 import Logos from '../../../assets/logos.js';
 import { useEthereumBridge } from '../../../ethereum/OpenfortEthereumBridgeContext.js';
 import { ModalBody } from '../../Common/Modal/styles.js';
+import { ScrollArea } from '../../Common/ScrollArea/index.js';
+import { useOpenfort } from '../../Openfort/useOpenfort.js';
 import { DepositStatus } from '../Deposit/DepositStatus.js';
 import { walletListBtn } from '../Deposit/formStyles.js';
 import { ButtonLogo } from '../Deposit/styles.js';
@@ -39,22 +41,6 @@ function walletErrorMessage(e) {
     }
     return typeof e === 'string' ? e : 'Transaction failed';
 }
-/** Keep only digits and a single decimal point. */
-function sanitizeAmount(v) {
-    const cleaned = v.replace(/[^0-9.]/g, '');
-    const [whole, ...rest] = cleaned.split('.');
-    return rest.length ? `${whole}.${rest.join('')}` : cleaned;
-}
-const inputStyle = {
-    width: '100%',
-    padding: '12px 14px',
-    borderRadius: 12,
-    border: '1px solid var(--ck-body-divider, #e4e4e7)',
-    background: 'var(--ck-body-background-secondary, #fafafa)',
-    color: 'var(--ck-body-color, #111)',
-    fontSize: 16,
-    outline: 'none',
-};
 /**
  * Desktop "transfer from wallet": send the source token to the Relay deposit
  * address straight from the user's EXTERNAL browser-extension wallet
@@ -62,12 +48,18 @@ const inputStyle = {
  * Openfort embedded account (that one is the destination, not the source).
  * Once the deposit lands, the funding session's status polling drives progress.
  */
-function DepositWalletDesktop({ receiverAddress, activeChain, activeCurrency, loading }) {
+function DepositWalletDesktop({ receiverAddress, activeChain, activeCurrency, loading, amount }) {
     const bridge = useEthereumBridge();
-    const [amount, setAmount] = useState('');
+    const { triggerResize } = useOpenfort();
     const [busyId, setBusyId] = useState(null);
     const [error, setError] = useState(null);
     const [sent, setSent] = useState(false);
+    // Grow the modal when the busy / error / sent feedback toggles, so the "Confirm
+    // in your wallet…" and insufficient-balance messages are revealed instead of
+    // clipped below the fold (which reads as "nothing happened" after a click).
+    useEffect(() => {
+        triggerResize();
+    }, [busyId, error, sent, triggerResize]);
     if (!bridge)
         return null; // EVM-only (no wagmi) — nothing to send through
     // bridge.connectors already excludes the Openfort embedded connector, so these
@@ -134,14 +126,14 @@ function DepositWalletDesktop({ receiverAddress, activeChain, activeCurrency, lo
             setBusyId(null);
         }
     };
-    return (jsxs("div", { style: { display: 'flex', flexDirection: 'column', gap: 10, marginTop: 14 }, children: [jsx("input", { value: amount, onChange: (e) => setAmount(sanitizeAmount(e.target.value)), placeholder: `Amount${activeCurrency ? ` in ${activeCurrency.symbol}` : ''}`, inputMode: "decimal", style: inputStyle }), 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.d.ts

@@ -1,9 +1,9 @@
 /**
- * Transfer from wallet. On mobile, leads with open-dApp deeplinks that send the
- * user into their wallet app's in-app browser pointed at the hosted deposit page
- * (with the address/chain/token/amount prefilled). On desktop, sends straight
- * from the browser-extension wallet. Either way the manual deposit-address / QR
- * path stays available below.
+ * Transfer from wallet. Pick a source chain/token and an amount, then choose the
+ * wallet to send from. On mobile that's open-dApp deeplinks into the wallet app's
+ * in-app browser (address/chain/token/amount prefilled); on desktop it's a direct
+ * send from a browser-extension wallet. The manual deposit-address / QR path stays
+ * available below.
  */
 declare const DepositWallet: () => import("react/jsx-runtime").JSX.Element;
 export default DepositWallet;

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

@@ -2,21 +2,56 @@ 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';
+import { Section, SectionLabel, AmountCard, CurrencySymbol, AmountInput, PresetList, PresetButton } from '../Buy/styles.js';
 import { AddressPageLink } from '../Deposit/AddressPageLink.js';
 import { isDepositFlowActive, DepositProgress } from '../Deposit/DepositProgress.js';
 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 }),
@@ -26,58 +61,66 @@ const WALLET_LOGO = {
     rainbow: jsx(Logos.Rainbow, { round: true }),
     rabby: jsx(Logos.Rabby, {}),
 };
-const amountInputStyle = {
-    width: '100%',
-    padding: '12px 14px',
-    borderRadius: 12,
-    border: '1px solid var(--ck-body-divider, #e4e4e7)',
-    background: 'var(--ck-body-background-secondary, #fafafa)',
-    color: 'var(--ck-body-color, #111)',
-    fontSize: 16,
-    outline: 'none',
-    marginTop: 14,
-};
-/** Keep only digits and a single decimal point. */
-function sanitizeAmount(v) {
-    const cleaned = v.replace(/[^0-9.]/g, '');
-    const [whole, ...rest] = cleaned.split('.');
-    return rest.length ? `${whole}.${rest.join('')}` : cleaned;
-}
+/** Preset deposit amounts, in the selected source token's units. */
+const PRESETS = [10, 25, 50];
 /**
- * Transfer from wallet. On mobile, leads with open-dApp deeplinks that send the
- * user into their wallet app's in-app browser pointed at the hosted deposit page
- * (with the address/chain/token/amount prefilled). On desktop, sends straight
- * from the browser-extension wallet. Either way the manual deposit-address / QR
- * path stays available below.
+ * Transfer from wallet. Pick a source chain/token and an amount, then choose the
+ * wallet to send from. On mobile that's open-dApp deeplinks into the wallet app's
+ * in-app browser (address/chain/token/amount prefilled); on desktop it's a direct
+ * send from a browser-extension wallet. The manual deposit-address / QR path stays
+ * available below.
  */
 const DepositWallet = () => {
-    var _a, _b, _c, _d, _e, _f, _g, _h;
+    var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m;
     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;
-    const srcChainId = caipToChainId((_c = route.activeChain) === null || _c === void 0 ? void 0 : _c.id);
+    // Solana sources have no numeric chain id and no desktop EVM-extension send, so
+    // they route through the deeplink (Phantom) on every platform instead of the
+    // wagmi-bridge desktop path.
+    const isSolanaSrc = isSolana((_d = (_c = route.activeChain) === null || _c === void 0 ? void 0 : _c.id) !== null && _d !== void 0 ? _d : '');
+    const srcChainId = caipToChainId((_e = route.activeChain) === null || _e === void 0 ? void 0 : _e.id);
     const amountValid = Number.parseFloat(amount) > 0;
+    const handleAmountChange = (event) => {
+        const raw = sanitizeAmountInput(event.target.value);
+        if (raw === '' || /^[0-9]*\.?[0-9]*$/.test(raw)) {
+            setPressedPreset(null);
+            setAmount(raw);
+        }
+    };
+    const handlePreset = (value) => {
+        setPressedPreset(value);
+        setAmount(String(value));
+    };
     // Open-dApp deeplinks: prefer backend-provided ones; otherwise build them from
     // the hosted deposit page URL (if the integrator configured one) carrying the
     // resolved transfer params. The hosted page sends via the wallet's injected
     // provider, so no backend wiring is required for the link itself.
-    const pageUrl = depositPageUrl && route.receiverAddress && route.activeCurrency && srcChainId
+    const pageUrl = depositPageUrl && route.receiverAddress && route.activeCurrency && (isSolanaSrc || srcChainId)
         ? buildDepositPageUrl(depositPageUrl, {
+            vm: isSolanaSrc ? 'svm' : 'evm',
             to: route.receiverAddress,
-            chainId: srcChainId,
+            chainId: isSolanaSrc ? undefined : srcChainId,
             token: route.activeCurrency.native ? undefined : route.activeCurrency.address,
             decimals: route.activeCurrency.decimals,
             symbol: route.activeCurrency.symbol,
-            chain: (_d = route.activeChain) === null || _d === void 0 ? void 0 : _d.name,
+            chain: (_f = route.activeChain) === null || _f === void 0 ? void 0 : _f.name,
             amount: amountValid ? parseUnits(amount, route.activeCurrency.decimals).toString() : undefined,
         })
         : null;
-    const allDeeplinks = ((_f = (_e = route.pm) === null || _e === void 0 ? void 0 : _e.deeplinks) === null || _f === void 0 ? void 0 : _f.length)
+    const allDeeplinks = ((_h = (_g = route.pm) === null || _g === void 0 ? void 0 : _g.deeplinks) === null || _h === void 0 ? void 0 : _h.length)
         ? route.pm.deeplinks
         : pageUrl
-            ? buildOpenDappLinks(pageUrl, (_h = (_g = route.activeChain) === null || _g === void 0 ? void 0 : _g.vmType) !== null && _h !== void 0 ? _h : 'evm')
+            ? buildOpenDappLinks(pageUrl, (_k = (_j = route.activeChain) === null || _j === void 0 ? void 0 : _j.vmType) !== null && _k !== void 0 ? _k : 'evm')
             : [];
     // Trust's in-app dApp browser was removed on iOS (Apple, 2021) — the link
     // dead-ends there, so hide it on iOS while keeping it on Android.
@@ -87,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." }), jsx(StepDivider, { children: isMobile ? 'Then open your wallet' : 'Then send from your wallet' }), isMobile ? (jsxs(Fragment, { children: [jsx("input", { value: amount, onChange: (e) => setAmount(sanitizeAmount(e.target.value)), placeholder: `Amount${route.activeCurrency ? ` in ${route.activeCurrency.symbol}` : ''}`, inputMode: "decimal", style: amountInputStyle }), !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 })), 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/DepositWallet/walletDeeplinks.d.ts

@@ -23,11 +23,13 @@ export type VmType = 'evm' | 'svm';
  */
 export declare const OPENFORT_DEPOSIT_PAGE_URL = "https://deposit.openfort.io";
 type DepositPageParams = {
-    /** Relay deposit address the source funds go to. */
+    /** Source VM family. `evm` drives a window.ethereum send; `svm` a Solana Pay request. */
+    vm: VmType;
+    /** Relay deposit address the source funds go to (0x for EVM, base58 for Solana). */
     to: string;
-    /** Numeric source chain id (e.g. 42161). */
-    chainId: number;
-    /** ERC-20 contract, or empty/undefined for the chain's native token. */
+    /** Numeric source chain id (e.g. 42161). EVM only. */
+    chainId?: number;
+    /** ERC-20 contract / SPL mint, or empty/undefined for the chain's native token. */
     token?: string;
     decimals: number;
     symbol: string;

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

@@ -19,8 +19,10 @@ const OPENFORT_DEPOSIT_PAGE_URL = 'https://deposit.openfort.io';
 /** Build the deposit "send" page URL with the transfer params encoded. */
 function buildDepositPageUrl(baseUrl, p) {
     const url = new URL(baseUrl);
+    url.searchParams.set('vm', p.vm);
     url.searchParams.set('to', p.to);
-    url.searchParams.set('chainId', String(p.chainId));
+    if (p.vm === 'evm' && p.chainId !== undefined)
+        url.searchParams.set('chainId', String(p.chainId));
     if (p.token)
         url.searchParams.set('token', p.token);
     url.searchParams.set('decimals', String(p.decimals));

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

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

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

@@ -0,0 +1 @@
+export declare const SolanaSelectToken: () => import("react/jsx-runtime").JSX.Element;

package/build/components/Pages/SelectToken/SolanaSelectToken.js

@@ -0,0 +1,50 @@
+import { jsxs, jsx } from 'react/jsx-runtime';
+import { useEffect, useState } from 'react';
+import { formatUnits } from 'viem';
+import { TOKEN_LOGO, symbolToColor } from '../../../constants/logos.js';
+import { useSolanaWalletAssets } from '../../../solana/hooks/useSolanaWalletAssets.js';
+import { ModalHeading } from '../../Common/Modal/styles.js';
+import { routes } from '../../Openfort/types.js';
+import { useOpenfort } from '../../Openfort/useOpenfort.js';
+import { SelectTokenContent, EmptyState, TokenList, TokenButton, TokenLeftGroup, TokenInfo, TokenSymbol, TokenName, TokenBalance, TokenLogoArea, TokenLogoImg, TokenLogoFallback } from './styles.js';
+
+const ZERO = BigInt(0);
+function SolanaTokenLogo({ symbol }) {
+    var _a;
+    const [imgError, setImgError] = useState(false);
+    const url = (_a = TOKEN_LOGO[symbol.toUpperCase()]) !== null && _a !== void 0 ? _a : null;
+    return (jsx(TokenLogoArea, { children: url && !imgError ? (jsx(TokenLogoImg, { src: url, alt: symbol, onError: () => setImgError(true) })) : (jsx(TokenLogoFallback, { "$bg": symbolToColor(symbol), children: symbol.charAt(0).toUpperCase() })) }));
+}
+const SolanaSelectToken = () => {
+    const { setSendForm, setRoute, triggerResize } = useOpenfort();
+    const { data, isLoading } = useSolanaWalletAssets();
+    const tokens = (data !== null && data !== void 0 ? data : []).filter((t) => t.amount > ZERO);
+    useEffect(() => {
+        if (!isLoading)
+            triggerResize();
+    }, [isLoading, triggerResize]);
+    const handleSelect = (token) => {
+        const asset = token.isNative
+            ? {
+                type: 'native',
+                balance: token.amount,
+                metadata: { symbol: 'SOL', decimals: token.decimals, fiat: { value: 0, currency: 'USD' } },
+            }
+            : {
+                type: 'spl',
+                address: token.mint,
+                balance: token.amount,
+                metadata: { symbol: token.symbol, name: token.name, decimals: token.decimals },
+            };
+        setSendForm((prev) => ({ ...prev, asset, amount: '' }));
+        setRoute(routes.SOL_SEND);
+    };
+    return (jsxs(SelectTokenContent, { onBack: routes.SOL_SEND, children: [jsx(ModalHeading, { children: "Select asset" }), tokens.length === 0 ? (jsx(EmptyState, { children: isLoading ? 'Loading balances…' : 'No assets found' })) : (jsx(TokenList, { children: tokens.map((token) => {
+                    const amount = Number(formatUnits(token.amount, token.decimals));
+                    const balanceStr = `${amount.toLocaleString('en-US', { maximumFractionDigits: 4 })} ${token.symbol}`;
+                    return (jsxs(TokenButton, { type: "button", onClick: () => handleSelect(token), children: [jsxs(TokenLeftGroup, { children: [jsx(SolanaTokenLogo, { symbol: token.symbol }), jsxs(TokenInfo, { style: { textAlign: 'left' }, children: [jsx(TokenSymbol, { children: token.name }), jsx(TokenName, { children: token.symbol })] })] }), jsx(TokenBalance, { children: balanceStr })] }, token.mint));
+                }) }))] }));
+};
+
+export { SolanaSelectToken };
+//# sourceMappingURL=SolanaSelectToken.js.map

package/build/components/Pages/SelectToken/SolanaSelectToken.js.map

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