@openfort/react 1.5.0 → 1.6.0

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

@@ -52,11 +52,9 @@ function getPaymentOptions(ctx) {
         : visible;
     return ordered.map((method) => {
         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' };
-        }
+        // Fiat (card/Apple Pay) and exchange rails stay visible on testnet so the demo
+        // shows the full feature set; the final pay action is blocked downstream
+        // (BuyProcessing / DepositCex) with a testnet notice, since they settle on mainnet.
         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/sources.d.ts

@@ -13,5 +13,8 @@ export declare const DEST_USDC = "0x833589fCD6eDb6E08f4c7C32D4f71b54bdA02913";
  */
 export declare const DEST_CHAIN_SOL = "solana:5eykt4UsFv8P8NJdTREpY1vzqKqZKvdp";
 export declare const DEST_USDC_SOL = "EPjFWdd5AufqSSqeM2qN1xzybapC8G4wEGGkZwyTDt1v";
+/** EVM native-asset sentinel (zero address) — the default destination currency on
+ * chains where we don't ship a stablecoin address (e.g. testnets). */
+export declare const NATIVE_TOKEN_ADDRESS = "0x0000000000000000000000000000000000000000";
 /** True for a CAIP-2 Solana chain id. */
 export declare function isSolana(chain: string): boolean;

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

@@ -13,10 +13,13 @@ const DEST_USDC = '0x833589fCD6eDb6E08f4c7C32D4f71b54bdA02913';
  */
 const DEST_CHAIN_SOL = 'solana:5eykt4UsFv8P8NJdTREpY1vzqKqZKvdp';
 const DEST_USDC_SOL = 'EPjFWdd5AufqSSqeM2qN1xzybapC8G4wEGGkZwyTDt1v';
+/** EVM native-asset sentinel (zero address) — the default destination currency on
+ * chains where we don't ship a stablecoin address (e.g. testnets). */
+const NATIVE_TOKEN_ADDRESS = '0x0000000000000000000000000000000000000000';
 /** True for a CAIP-2 Solana chain id. */
 function isSolana(chain) {
     return chain.startsWith('solana:');
 }
 
-export { DEST_CHAIN, DEST_CHAIN_SOL, DEST_USDC, DEST_USDC_SOL, isSolana };
+export { DEST_CHAIN, DEST_CHAIN_SOL, DEST_USDC, DEST_USDC_SOL, NATIVE_TOKEN_ADDRESS, isSolana };
 //# sourceMappingURL=sources.js.map

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

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

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

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

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

@@ -1,3 +1,4 @@
+import { AccountTypeEnum } from '@openfort/openfort-js';
 import { useState, useRef, useEffect } from 'react';
 import { useEthereumEmbeddedWallet } from '../../../ethereum/hooks/useEthereumEmbeddedWallet.js';
 import { useFunding } from '../../../hooks/openfort/useFunding.js';
@@ -14,6 +15,22 @@ function paymentMethodFor(chain, currency) {
     // funding API has no separate 'cex' type, so every source resolves to evm/solana.
     return { type: isSolana(chain) ? 'solana' : 'evm', source };
 }
+/**
+ * Whether the embedded account can transact on `chainId`. EOAs share one address
+ * across EVM chains, so they're always usable; smart/delegated accounts are per-chain
+ * deployments, usable only on a chain they're deployed on. Returns true when the type
+ * or deployments are unknown — the deposit flow only blocks when it's certain.
+ */
+function accountUsableOnChain(wallet, chainId) {
+    if (!wallet || wallet.accountType == null)
+        return true;
+    if (wallet.accountType === AccountTypeEnum.EOA)
+        return true;
+    const chainScoped = wallet.accounts.filter((a) => a.chainId != null);
+    if (chainScoped.length === 0)
+        return true;
+    return chainScoped.some((a) => a.chainId === chainId);
+}
 /**
  * Shared state for a deposit route: the source chain/currency selection (sourced
  * live from Relay via {@link useFundingChains}) plus the resolved deposit
@@ -21,7 +38,7 @@ function paymentMethodFor(chain, currency) {
  * address" page build on this — they differ only in the lead buttons.
  */
 function useDepositRoute(kind) {
-    var _a, _b, _c, _d, _e, _f, _g, _h;
+    var _a, _b, _c, _d, _e, _f, _g, _h, _j;
     const ethWallet = useEthereumEmbeddedWallet();
     const solWallet = useSolanaEmbeddedWallet();
     const { session, status, error, loading, isAvailable, fund, payLink, reset } = useFunding();
@@ -38,30 +55,38 @@ function useDepositRoute(kind) {
     // Coinbase Onramp, which only delivers to a fixed set of EVM chains.
     const chains = kind === 'cex' ? allChains.filter((c) => isCexDeliverable(c.id)) : allChains;
     // Where funds land: the active embedded wallet (the Relay deposit recipient).
-    const address = wallet.status === 'connected' ? wallet.address : undefined;
+    // Use the address as soon as the wallet exposes one — even mid-(re)connect or
+    // pending recovery — since receiving a deposit needs only the address, not a live
+    // signer. Gating on 'connected' left the page blank during those states.
+    const address = (_a = wallet.address) !== null && _a !== void 0 ? _a : undefined;
     const [chainId, setChainId] = useState('');
     const [currencySymbol, setCurrencySymbol] = useState('');
     const lastKey = useRef('');
     // Derive the active selection, falling back to the first available chain/currency
     // so the picker is valid before the user touches it and as chains load in.
-    const activeChain = (_a = chains.find((c) => c.id === chainId)) !== null && _a !== void 0 ? _a : chains[0];
-    const currencies = (_b = activeChain === null || activeChain === void 0 ? void 0 : activeChain.currencies) !== null && _b !== void 0 ? _b : [];
-    const activeCurrency = (_c = currencies.find((c) => c.symbol === currencySymbol)) !== null && _c !== void 0 ? _c : currencies[0];
-    const chain = (_d = activeChain === null || activeChain === void 0 ? void 0 : activeChain.id) !== null && _d !== void 0 ? _d : target.chain;
+    const activeChain = (_b = chains.find((c) => c.id === chainId)) !== null && _b !== void 0 ? _b : chains[0];
+    const currencies = (_c = activeChain === null || activeChain === void 0 ? void 0 : activeChain.currencies) !== null && _c !== void 0 ? _c : [];
+    const activeCurrency = (_d = currencies.find((c) => c.symbol === currencySymbol)) !== null && _d !== void 0 ? _d : currencies[0];
+    const chain = (_e = activeChain === null || activeChain === void 0 ? void 0 : activeChain.id) !== null && _e !== void 0 ? _e : 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);
+    // Funds settle on the TARGET chain. A smart/delegated account not deployed there
+    // can't use them, so block and guide the user to set up a usable account. EVM only —
+    // the recipient family already matches the target, and EOAs are always usable.
+    const targetChainId = isSolana(target.chain) ? null : Number(target.chain.split(':')[1]);
+    const accountUnusableOnTarget = targetChainId != null && !accountUsableOnChain(ethWallet.activeWallet, targetChainId);
     const receiverAddress = sameChain
         ? (address !== null && address !== void 0 ? address : null)
-        : ((_f = (_e = session === null || session === void 0 ? void 0 : session.paymentMethod) === null || _e === void 0 ? void 0 : _e.receiverAddress) !== null && _f !== void 0 ? _f : null);
-    const pm = (_g = session === null || session === void 0 ? void 0 : session.paymentMethod) !== null && _g !== void 0 ? _g : null;
+        : ((_g = (_f = session === null || session === void 0 ? void 0 : session.paymentMethod) === null || _f === void 0 ? void 0 : _f.receiverAddress) !== null && _g !== void 0 ? _g : null);
+    const pm = (_h = session === null || session === void 0 ? void 0 : session.paymentMethod) !== null && _h !== void 0 ? _h : null;
     useEffect(() => {
         if (!address || !isAvailable || !activeChain || !activeCurrency)
             return;
-        if (targetUnsupported) {
+        if (targetUnsupported || accountUnusableOnTarget) {
             lastKey.current = '';
             reset();
             return;
@@ -89,6 +114,7 @@ function useDepositRoute(kind) {
         isAvailable,
         sameChain,
         targetUnsupported,
+        accountUnusableOnTarget,
         fund,
         reset,
         target.chain,
@@ -106,7 +132,7 @@ function useDepositRoute(kind) {
         chainsLoading,
         chain,
         setChain: setChainId,
-        currency: (_h = activeCurrency === null || activeCurrency === void 0 ? void 0 : activeCurrency.symbol) !== null && _h !== void 0 ? _h : '',
+        currency: (_j = activeCurrency === null || activeCurrency === void 0 ? void 0 : activeCurrency.symbol) !== null && _j !== void 0 ? _j : '',
         setCurrency: setCurrencySymbol,
         currencies,
         activeChain,
@@ -117,6 +143,7 @@ function useDepositRoute(kind) {
         receiverAddress,
         sameChain,
         targetUnsupported,
+        accountUnusableOnTarget,
         railChains,
         status,
         loading,

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/useFundingTarget.d.ts

@@ -1,9 +1,11 @@
 /**
  * The destination route Deposit-hub funding settles into. Integrators override the
- * chain and currency via `uiConfig.funding.{targetChain,targetCurrency}`; both
- * default to USDC on the active chain type (Base for EVM, Solana mainnet for SVM)
- * so the flow works with zero configuration. The deposit recipient is always the
- * active embedded wallet for the destination chain family — callers resolve it.
+ * chain and currency via `uiConfig.funding.{targetChain,targetCurrency}`. With no
+ * override the destination follows the wallet's ACTIVE chain — so a testnet wallet
+ * funds on its own network instead of being told "funding isn't available on Base".
+ * Currency defaults to USDC where we ship its address (Base, Solana mainnet) and to
+ * the native asset otherwise, so the destination currency is always valid on-chain.
+ * The deposit recipient is always the active embedded wallet — callers resolve it.
  */
 export declare function useFundingTarget(): {
     chain: string;

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

@@ -1,23 +1,34 @@
 import { ChainTypeEnum } from '@openfort/openfort-js';
+import { useEthereumEmbeddedWallet } from '../../../ethereum/hooks/useEthereumEmbeddedWallet.js';
 import { useOpenfortCore } from '../../../openfort/useOpenfort.js';
 import { useOpenfort } from '../../Openfort/useOpenfort.js';
-import { DEST_CHAIN_SOL, DEST_CHAIN, DEST_USDC_SOL, DEST_USDC } from './sources.js';
+import { DEST_CHAIN_SOL, DEST_CHAIN, DEST_USDC, DEST_USDC_SOL, NATIVE_TOKEN_ADDRESS } from './sources.js';
 
 /**
  * The destination route Deposit-hub funding settles into. Integrators override the
- * chain and currency via `uiConfig.funding.{targetChain,targetCurrency}`; both
- * default to USDC on the active chain type (Base for EVM, Solana mainnet for SVM)
- * so the flow works with zero configuration. The deposit recipient is always the
- * active embedded wallet for the destination chain family — callers resolve it.
+ * chain and currency via `uiConfig.funding.{targetChain,targetCurrency}`. With no
+ * override the destination follows the wallet's ACTIVE chain — so a testnet wallet
+ * funds on its own network instead of being told "funding isn't available on Base".
+ * Currency defaults to USDC where we ship its address (Base, Solana mainnet) and to
+ * the native asset otherwise, so the destination currency is always valid on-chain.
+ * The deposit recipient is always the active embedded wallet — callers resolve it.
  */
 function useFundingTarget() {
     var _a, _b, _c, _d;
     const { uiConfig } = useOpenfort();
     const { chainType } = useOpenfortCore();
+    const ethereumWallet = useEthereumEmbeddedWallet();
     const isSolana = chainType === ChainTypeEnum.SVM;
+    const activeChain = isSolana
+        ? DEST_CHAIN_SOL
+        : ethereumWallet.status === 'connected'
+            ? `eip155:${ethereumWallet.chainId}`
+            : DEST_CHAIN;
+    const chain = (_b = (_a = uiConfig.funding) === null || _a === void 0 ? void 0 : _a.targetChain) !== null && _b !== void 0 ? _b : activeChain;
+    const defaultCurrency = chain === DEST_CHAIN ? DEST_USDC : chain === DEST_CHAIN_SOL ? DEST_USDC_SOL : NATIVE_TOKEN_ADDRESS;
     return {
-        chain: (_b = (_a = uiConfig.funding) === null || _a === void 0 ? void 0 : _a.targetChain) !== null && _b !== void 0 ? _b : (isSolana ? DEST_CHAIN_SOL : DEST_CHAIN),
-        currency: (_d = (_c = uiConfig.funding) === null || _c === void 0 ? void 0 : _c.targetCurrency) !== null && _d !== void 0 ? _d : (isSolana ? DEST_USDC_SOL : DEST_USDC),
+        chain,
+        currency: (_d = (_c = uiConfig.funding) === null || _c === void 0 ? void 0 : _c.targetCurrency) !== null && _d !== void 0 ? _d : defaultCurrency,
     };
 }
 

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

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

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

@@ -8,7 +8,9 @@ import { useFundingChains } from '../../../hooks/openfort/useFundingChains.js';
 import { invalidateBalance } from '../../../hooks/useBalance.js';
 import { useOpenfortCore } from '../../../openfort/useOpenfort.js';
 import { logger } from '../../../utils/logger.js';
+import { getPublishableKeyEnvironment } from '../../../utils/validation.js';
 import { ModalHeading, ModalBody } from '../../Common/Modal/styles.js';
+import Tooltip from '../../Common/Tooltip/index.js';
 import { routes } from '../../Openfort/types.js';
 import { useOpenfort } from '../../Openfort/useOpenfort.js';
 import { PageContent } from '../../PageContent/index.js';
@@ -19,6 +21,7 @@ import { DepositStatus } from '../Deposit/DepositStatus.js';
 import { walletListBtn } from '../Deposit/formStyles.js';
 import { isSolana, DEST_USDC } from '../Deposit/sources.js';
 import { StepDivider, ButtonLogo } from '../Deposit/styles.js';
+import { TestnetNotice } from '../Deposit/TestnetNotice.js';
 import { useFundingTarget } from '../Deposit/useFundingTarget.js';
 import { sanitizeForParsing, sanitizeAmountInput } from '../Send/utils.js';
 
@@ -56,7 +59,10 @@ const hideBrokenLogo = (e) => {
  */
 const DepositCex = () => {
     var _a, _b, _c, _d, _e, _f;
-    const { triggerResize } = useOpenfort();
+    const { triggerResize, publishableKey } = useOpenfort();
+    // Coinbase onramp settles real funds on mainnet, so a test key can't deliver here.
+    // Keep the button live for the demo but block the hand-off with a testnet notice.
+    const testnet = getPublishableKeyEnvironment(publishableKey) === 'test';
     const target = useFundingTarget();
     // CEX (Coinbase pay-link + session) is served by the Openfort API, not the
     // standalone funding service — resolve this rail's base URL from the API backend.
@@ -100,7 +106,9 @@ const DepositCex = () => {
     const createSessionRef = useRef(createSession);
     createSessionRef.current = createSession;
     useEffect(() => {
-        if (!isAvailable || !address || !chainSupported)
+        // No session on testnet — Coinbase can't settle to a testnet wallet and the
+        // button below is blocked anyway; skip the mint so we don't fire a doomed call.
+        if (!isAvailable || !address || !chainSupported || testnet)
             return;
         const key = `${target.chain}|${target.currency}|${address}`;
         if (sessionKey.current === key)
@@ -125,7 +133,7 @@ const DepositCex = () => {
             // without this the guard above would block the retry after this cancel.
             sessionKey.current = '';
         };
-    }, [isAvailable, address, chainSupported, target.chain, target.currency]);
+    }, [isAvailable, address, chainSupported, testnet, target.chain, target.currency]);
     const fiatAmount = useMemo(() => {
         const normalized = sanitizeForParsing(sanitizeAmountInput(amount));
         if (!normalized)
@@ -206,14 +214,25 @@ const DepositCex = () => {
     // success / refunded / expired screen (shared with the crypto rail).
     if (isDepositFlowActive(status))
         return jsx(DepositProgress, { status: status });
-    return (jsxs(PageContent, { onBack: routes.DEPOSIT, children: [jsx(ModalHeading, { children: "Transfer from Exchange" }), jsxs(Section, { children: [jsx(SectionLabel, { children: "Amount" }), jsxs(AmountCard, { children: [jsx(CurrencySymbol, { children: "$" }), jsx(AmountInput, { value: amount, onChange: handleAmountChange, onBlur: handleAmountBlur, placeholder: "0.00", inputMode: "decimal", autoComplete: "off" })] }), jsx(PresetList, { children: PRESETS.map((preset) => (jsxs(PresetButton, { type: "button", "$active": pressedPreset === preset, onClick: () => handlePreset(preset), children: ["$", preset] }, preset))) }), amountTooLow ? (jsxs("span", { style: errorHelper, children: ["Enter at least $", MIN_AMOUNT, ".00 \u2014 the Coinbase minimum."] })) : (jsxs("span", { style: helperText, children: ["Minimum $", MIN_AMOUNT, ".00"] })), chainSupported && (jsxs("span", { style: destinationRow, children: [destAssetLogo && jsx("img", { src: destAssetLogo, alt: "", style: destinationLogo, onError: hideBrokenLogo }), destChainLogo && jsx("img", { src: destChainLogo, alt: "", style: destinationLogo, onError: hideBrokenLogo })] }))] }), !isAvailable && jsx(ModalBody, { children: "Funding isn't available right now." }), isAvailable && !chainSupported && jsxs(ModalBody, { children: ["Coinbase can't deliver to ", destChainName, " yet."] }), error && jsx(ModalBody, { style: { color: '#dc2626' }, children: error.message }), jsx(StepDivider, { children: "Then open an exchange" }), jsx("div", { style: { display: 'flex', flexDirection: 'column', gap: 8, marginTop: 12 }, children: EXCHANGES.map((ex) => ex.comingSoon ? (jsxs("button", { type: "button", disabled: true, style: {
+    return (jsxs(PageContent, { onBack: routes.DEPOSIT, children: [jsx(ModalHeading, { children: "Transfer from Exchange" }), jsx(TestnetNotice, {}), jsxs(Section, { children: [jsx(SectionLabel, { children: "Amount" }), jsxs(AmountCard, { children: [jsx(CurrencySymbol, { children: "$" }), jsx(AmountInput, { value: amount, onChange: handleAmountChange, onBlur: handleAmountBlur, placeholder: "0.00", inputMode: "decimal", autoComplete: "off" })] }), jsx(PresetList, { children: PRESETS.map((preset) => (jsxs(PresetButton, { type: "button", "$active": pressedPreset === preset, onClick: () => handlePreset(preset), children: ["$", preset] }, preset))) }), amountTooLow ? (jsxs("span", { style: errorHelper, children: ["Enter at least $", MIN_AMOUNT, ".00 \u2014 the Coinbase minimum."] })) : (jsxs("span", { style: helperText, children: ["Minimum $", MIN_AMOUNT, ".00"] })), chainSupported && (jsxs("span", { style: destinationRow, children: [destAssetLogo && jsx("img", { src: destAssetLogo, alt: "", style: destinationLogo, onError: hideBrokenLogo }), destChainLogo && jsx("img", { src: destChainLogo, alt: "", style: destinationLogo, onError: hideBrokenLogo })] }))] }), !isAvailable && jsx(ModalBody, { children: "Funding isn't available right now." }), !testnet && isAvailable && !chainSupported && (jsxs(ModalBody, { children: ["Coinbase can't deliver to ", destChainName, " yet."] })), !testnet && error && jsx(ModalBody, { style: { color: '#dc2626' }, children: error.message }), jsx(StepDivider, { children: "Then open an exchange" }), jsx("div", { style: { display: 'flex', flexDirection: 'column', gap: 8, marginTop: 12 }, children: EXCHANGES.map((ex) => ex.comingSoon ? (jsxs("button", { type: "button", disabled: true, style: {
                         ...walletListBtn,
                         display: 'flex',
                         alignItems: 'center',
                         gap: 8,
                         opacity: 0.55,
                         cursor: 'not-allowed',
-                    }, children: [jsx(ButtonLogo, { children: EXCHANGE_LOGO[ex.id] }), jsx("span", { children: titleCase(ex.id) }), jsx("span", { style: { marginLeft: 'auto', fontSize: 11, fontWeight: 600 }, children: "Coming soon" })] }, ex.id)) : (jsxs("button", { type: "button", disabled: !payReady, style: {
+                    }, children: [jsx(ButtonLogo, { children: EXCHANGE_LOGO[ex.id] }), jsx("span", { children: titleCase(ex.id) }), jsx("span", { style: { marginLeft: 'auto', fontSize: 11, fontWeight: 600 }, children: "Coming soon" })] }, ex.id)) : testnet ? (
+                // Blocked on testnet (Coinbase settles on mainnet). Use aria-disabled, not
+                // `disabled`, so the hover still fires the tooltip that explains why.
+                jsx(Tooltip, { message: "Coinbase settles on mainnet \u2014 not available on testnet.", children: jsxs("button", { type: "button", "aria-disabled": "true", style: {
+                            ...walletListBtn,
+                            display: 'flex',
+                            alignItems: 'center',
+                            justifyContent: 'center',
+                            gap: 8,
+                            opacity: 0.55,
+                            cursor: 'not-allowed',
+                        }, children: [jsx(ButtonLogo, { children: EXCHANGE_LOGO[ex.id] }), `Open ${titleCase(ex.id)} ↗`] }) }, ex.id)) : (jsxs("button", { type: "button", disabled: !payReady, style: {
                         ...walletListBtn,
                         display: 'flex',
                         alignItems: 'center',

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

@@ -12,7 +12,7 @@ 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 { UnsupportedNetworkNotice, AccountChainNotice } from '../Deposit/UnsupportedNetworkNotice.js';
 import { useDepositRoute } from '../Deposit/useDepositRoute.js';
 import { useSameChainArrival } from '../Deposit/useSameChainArrival.js';
 import { caipToChainId } from '../DepositWallet/walletDeeplinks.js';
@@ -45,7 +45,7 @@ const DepositCrypto = () => {
         return jsx(DepositProgress, { status: route.status });
     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
+    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 })) : route.accountUnusableOnTarget ? (jsx(AccountChainNotice, { targetChain: route.target.chain })) : (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 })] }))] }));
 };

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

@@ -19,7 +19,7 @@ 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 { UnsupportedNetworkNotice, AccountChainNotice } from '../Deposit/UnsupportedNetworkNotice.js';
 import { useDepositRoute } from '../Deposit/useDepositRoute.js';
 import { sanitizeAmountInput } from '../Send/utils.js';
 import { DepositWalletDesktop } from './DepositWalletDesktop.js';
@@ -130,7 +130,7 @@ 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(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: {
+    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 && route.accountUnusableOnTarget && (jsx(AccountChainNotice, { targetChain: route.target.chain })), !route.targetUnsupported && !route.accountUnusableOnTarget && (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',

package/build/components/Pages/Send/EthereumSend.js

@@ -1,5 +1,5 @@
 import { jsxs, jsx } from 'react/jsx-runtime';
-import { useMemo } from 'react';
+import { useEffect, useMemo } from 'react';
 import { parseUnits, isAddress, formatUnits } from 'viem';
 import { useEthereumWalletAssets } from '../../../ethereum/hooks/useEthereumWalletAssets.js';
 import Button from '../../Common/Button/index.js';
@@ -9,12 +9,18 @@ import { ModalHeading } from '../../Common/Modal/styles.js';
 import { routes } from '../../Openfort/types.js';
 import { useOpenfort } from '../../Openfort/useOpenfort.js';
 import { PageContent } from '../../PageContent/index.js';
-import { Form, Field, FieldLabel, TokenSelectorButton, TokenSelectorContent, TokenSelectorValue, TokenSelectorRight, AmountInputWrapper, MaxButton, HelperText, ErrorText } from './styles.js';
+import { AmountCard, AmountInput } from '../Buy/styles.js';
+import { Form, Field, FieldLabel, TokenSelectorButton, TokenSelectorContent, TokenSelectorValue, TokenSelectorRight, MaxButton, HelperText, ErrorText } from './styles.js';
 import { isSameToken, sanitizeForParsing, formatBalance, sanitizeAmountInput } from './utils.js';
 
 const EthereumSend = () => {
     var _a, _b, _c, _d;
-    const { sendForm, setSendForm, setRoute } = useOpenfort();
+    const { sendForm, setSendForm, setRoute, triggerResize } = useOpenfort();
+    // Size the modal to the form on mount. Without this the screen isn't anchored
+    // and scrolls within the modal — every other Page triggers a resize on mount.
+    useEffect(() => {
+        triggerResize();
+    }, [triggerResize]);
     const { data: assets } = useEthereumWalletAssets();
     const matchedToken = useMemo(() => assets === null || assets === void 0 ? void 0 : assets.find((asset) => isSameToken(asset, sendForm.asset)), [assets, sendForm.asset]);
     const selectedTokenOption = matchedToken !== null && matchedToken !== void 0 ? matchedToken : assets === null || assets === void 0 ? void 0 : assets[0];
@@ -81,7 +87,7 @@ const EthereumSend = () => {
     };
     const availableLabel = formatBalance(selectedBalanceValue, selectedDecimalsValue);
     const maxDisabled = !selectedBalanceValue;
-    return (jsxs(PageContent, { onBack: routes.CONNECTED, children: [jsx(ModalHeading, { children: "Send assets" }), jsxs(Form, { onSubmit: handleSubmit, children: [jsxs(Field, { children: [jsx(FieldLabel, { children: "Asset" }), jsxs(TokenSelectorButton, { type: "button", onClick: handleOpenTokenSelector, children: [jsx(TokenSelectorContent, { children: jsx(TokenSelectorValue, { "$primary": true, children: selectedSymbol || 'Select token' }) }), jsxs(TokenSelectorRight, { children: [jsx(TokenSelectorValue, { children: availableLabel === '--' ? '--' : `${availableLabel} ${selectedSymbol !== null && selectedSymbol !== void 0 ? selectedSymbol : ''}` }), jsx(Arrow, { width: "13", height: "12", viewBox: "0 0 13 12", fill: "none", xmlns: "http://www.w3.org/2000/svg", children: jsx(ArrowChevron, { stroke: "currentColor", d: "M7.51431 1.5L11.757 5.74264M7.5 10.4858L11.7426 6.24314", strokeWidth: "2", strokeLinecap: "round" }) })] })] })] }), jsxs(Field, { children: [jsx(FieldLabel, { children: "Amount" }), jsxs(AmountInputWrapper, { children: [jsx(Input, { placeholder: "0.00", value: sendForm.amount, onChange: handleAmountChange, inputMode: "decimal", autoComplete: "off", style: { paddingRight: '86px' } }), jsx(MaxButton, { type: "button", onClick: handleMax, disabled: maxDisabled, children: "Max" })] }), jsxs(HelperText, { children: ["Available: ", availableLabel, " ", selectedSymbol] }), sendForm.amount && parsedAmount === null && jsx(ErrorText, { children: "Enter a valid amount." }), insufficientBalance && jsx(ErrorText, { children: "Insufficient balance for this transfer." })] }), jsxs(Field, { children: [jsx(FieldLabel, { children: "Recipient address" }), jsx(Input, { placeholder: "0x...", value: sendForm.recipient, onChange: handleRecipientChange, autoComplete: "off" }), sendForm.recipient && !recipientValid && jsx(ErrorText, { children: "Enter a valid wallet address." })] }), jsx(Button, { variant: "primary", disabled: !canProceed, children: "Review transfer" })] })] }));
+    return (jsxs(PageContent, { onBack: routes.CONNECTED, children: [jsx(ModalHeading, { children: "Send assets" }), jsxs(Form, { onSubmit: handleSubmit, children: [jsxs(Field, { children: [jsx(FieldLabel, { children: "Asset" }), jsxs(TokenSelectorButton, { type: "button", onClick: handleOpenTokenSelector, children: [jsx(TokenSelectorContent, { children: jsx(TokenSelectorValue, { "$primary": true, children: selectedSymbol || 'Select token' }) }), jsxs(TokenSelectorRight, { children: [jsx(TokenSelectorValue, { children: availableLabel === '--' ? '--' : `${availableLabel} ${selectedSymbol !== null && selectedSymbol !== void 0 ? selectedSymbol : ''}` }), jsx(Arrow, { width: "13", height: "12", viewBox: "0 0 13 12", fill: "none", xmlns: "http://www.w3.org/2000/svg", children: jsx(ArrowChevron, { stroke: "currentColor", d: "M7.51431 1.5L11.757 5.74264M7.5 10.4858L11.7426 6.24314", strokeWidth: "2", strokeLinecap: "round" }) })] })] })] }), jsxs(Field, { children: [jsx(FieldLabel, { children: "Amount" }), jsxs(AmountCard, { style: { marginTop: 12 }, children: [jsx(AmountInput, { placeholder: "0.00", value: sendForm.amount, onChange: handleAmountChange, inputMode: "decimal", autoComplete: "off" }), jsx(MaxButton, { type: "button", onClick: handleMax, disabled: maxDisabled, children: "Max" })] }), jsxs(HelperText, { children: ["Available: ", availableLabel, " ", selectedSymbol] }), sendForm.amount && parsedAmount === null && jsx(ErrorText, { children: "Enter a valid amount." }), insufficientBalance && jsx(ErrorText, { children: "Insufficient balance for this transfer." })] }), jsxs(Field, { children: [jsx(FieldLabel, { children: "Recipient address" }), jsx(Input, { placeholder: "0x...", value: sendForm.recipient, onChange: handleRecipientChange, autoComplete: "off" }), sendForm.recipient && !recipientValid && jsx(ErrorText, { children: "Enter a valid wallet address." })] }), jsx(Button, { variant: "primary", disabled: !canProceed, children: "Review transfer" })] })] }));
 };
 
 export { EthereumSend };

package/build/components/Pages/Send/EthereumSend.js.map

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

package/build/components/Pages/Send/SolanaSend.js

@@ -1,5 +1,5 @@
 import { jsxs, jsx } from 'react/jsx-runtime';
-import { useMemo } from 'react';
+import { useEffect, useMemo } from 'react';
 import { parseUnits, formatUnits } from 'viem';
 import { useSolanaWalletAssets } from '../../../solana/hooks/useSolanaWalletAssets.js';
 import Button from '../../Common/Button/index.js';
@@ -9,7 +9,8 @@ import { ModalHeading } from '../../Common/Modal/styles.js';
 import { routes } from '../../Openfort/types.js';
 import { useOpenfort } from '../../Openfort/useOpenfort.js';
 import { PageContent } from '../../PageContent/index.js';
-import { Form, Field, FieldLabel, TokenSelectorButton, TokenSelectorContent, TokenSelectorValue, TokenSelectorRight, AmountInputWrapper, MaxButton, HelperText, ErrorText } from './styles.js';
+import { AmountCard, AmountInput } from '../Buy/styles.js';
+import { Form, Field, FieldLabel, TokenSelectorButton, TokenSelectorContent, TokenSelectorValue, TokenSelectorRight, MaxButton, HelperText, ErrorText } from './styles.js';
 import { sanitizeForParsing, formatBalance, sanitizeAmountInput } from './utils.js';
 
 const SOL_DECIMALS = 9;
@@ -26,8 +27,12 @@ function solAsset(balance) {
     };
 }
 const SolanaSend = () => {
-    const { sendForm, setSendForm, setRoute } = useOpenfort();
+    const { sendForm, setSendForm, setRoute, triggerResize } = useOpenfort();
     const { data: assets } = useSolanaWalletAssets();
+    // Size the modal to the form on mount so it's anchored and doesn't scroll.
+    useEffect(() => {
+        triggerResize();
+    }, [triggerResize]);
     const asset = sendForm.asset;
     const selected = asset.type === 'spl'
         ? { isSpl: true, mint: asset.address, decimals: asset.metadata.decimals, symbol: asset.metadata.symbol }
@@ -82,7 +87,7 @@ const SolanaSend = () => {
         setSendForm((prev) => ({ ...prev, amount: formatUnits(balanceBase, selected.decimals) }));
     };
     const handleOpenTokenSelector = () => setRoute(routes.SOL_SEND_TOKEN_SELECT);
-    return (jsxs(PageContent, { onBack: routes.SOL_CONNECTED, children: [jsx(ModalHeading, { children: "Send assets" }), jsxs(Form, { onSubmit: handleSubmit, children: [jsxs(Field, { children: [jsx(FieldLabel, { children: "Asset" }), jsxs(TokenSelectorButton, { type: "button", onClick: handleOpenTokenSelector, children: [jsx(TokenSelectorContent, { children: jsx(TokenSelectorValue, { "$primary": true, children: selected.symbol }) }), jsxs(TokenSelectorRight, { children: [jsx(TokenSelectorValue, { children: availableLabel === '--' ? '--' : `${availableLabel} ${selected.symbol}` }), jsx(Arrow, { width: "13", height: "12", viewBox: "0 0 13 12", fill: "none", xmlns: "http://www.w3.org/2000/svg", children: jsx(ArrowChevron, { stroke: "currentColor", d: "M7.51431 1.5L11.757 5.74264M7.5 10.4858L11.7426 6.24314", strokeWidth: "2", strokeLinecap: "round" }) })] })] })] }), jsxs(Field, { children: [jsx(FieldLabel, { children: "Amount" }), jsxs(AmountInputWrapper, { children: [jsx(Input, { placeholder: "0.00", value: sendForm.amount, onChange: handleAmountChange, inputMode: "decimal", autoComplete: "off", style: { paddingRight: '86px' } }), jsx(MaxButton, { type: "button", onClick: handleMax, disabled: balanceBase === undefined, children: "Max" })] }), jsxs(HelperText, { children: ["Available: ", availableLabel, " ", selected.symbol] }), sendForm.amount && parsedAmount === null && jsx(ErrorText, { children: "Enter a valid amount." }), insufficientBalance && jsxs(ErrorText, { children: ["Insufficient ", selected.symbol, " balance for this transfer."] })] }), jsxs(Field, { children: [jsx(FieldLabel, { children: "Recipient address" }), jsx(Input, { placeholder: "Solana address", value: sendForm.recipient, onChange: (e) => setSendForm((prev) => ({ ...prev, recipient: e.target.value })), autoComplete: "off" }), sendForm.recipient && !recipientValid && jsx(ErrorText, { children: "Enter a valid Solana address." })] }), jsx(Button, { variant: "primary", disabled: !canProceed, children: "Review transfer" })] })] }));
+    return (jsxs(PageContent, { onBack: routes.SOL_CONNECTED, children: [jsx(ModalHeading, { children: "Send assets" }), jsxs(Form, { onSubmit: handleSubmit, children: [jsxs(Field, { children: [jsx(FieldLabel, { children: "Asset" }), jsxs(TokenSelectorButton, { type: "button", onClick: handleOpenTokenSelector, children: [jsx(TokenSelectorContent, { children: jsx(TokenSelectorValue, { "$primary": true, children: selected.symbol }) }), jsxs(TokenSelectorRight, { children: [jsx(TokenSelectorValue, { children: availableLabel === '--' ? '--' : `${availableLabel} ${selected.symbol}` }), jsx(Arrow, { width: "13", height: "12", viewBox: "0 0 13 12", fill: "none", xmlns: "http://www.w3.org/2000/svg", children: jsx(ArrowChevron, { stroke: "currentColor", d: "M7.51431 1.5L11.757 5.74264M7.5 10.4858L11.7426 6.24314", strokeWidth: "2", strokeLinecap: "round" }) })] })] })] }), jsxs(Field, { children: [jsx(FieldLabel, { children: "Amount" }), jsxs(AmountCard, { style: { marginTop: 12 }, children: [jsx(AmountInput, { placeholder: "0.00", value: sendForm.amount, onChange: handleAmountChange, inputMode: "decimal", autoComplete: "off" }), jsx(MaxButton, { type: "button", onClick: handleMax, disabled: balanceBase === undefined, children: "Max" })] }), jsxs(HelperText, { children: ["Available: ", availableLabel, " ", selected.symbol] }), sendForm.amount && parsedAmount === null && jsx(ErrorText, { children: "Enter a valid amount." }), insufficientBalance && jsxs(ErrorText, { children: ["Insufficient ", selected.symbol, " balance for this transfer."] })] }), jsxs(Field, { children: [jsx(FieldLabel, { children: "Recipient address" }), jsx(Input, { placeholder: "Solana address", value: sendForm.recipient, onChange: (e) => setSendForm((prev) => ({ ...prev, recipient: e.target.value })), autoComplete: "off" }), sendForm.recipient && !recipientValid && jsx(ErrorText, { children: "Enter a valid Solana address." })] }), jsx(Button, { variant: "primary", disabled: !canProceed, children: "Review transfer" })] })] }));
 };
 
 export { SolanaSend };

package/build/components/Pages/Send/SolanaSend.js.map

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

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

@@ -8,7 +8,6 @@ export declare const TokenSelectorValue: import("styled-components").StyledCompo
     $muted?: boolean;
 }, never>;
 export declare const TokenSelectorRight: import("styled-components").StyledComponent<"div", any, {}, never>;
-export declare const AmountInputWrapper: import("styled-components").StyledComponent<"div", any, {}, never>;
 export declare const MaxButton: import("styled-components").StyledComponent<"button", any, {}, never>;
 export declare const HelperText: import("styled-components").StyledComponent<"span", any, {}, never>;
 export declare const ErrorText: import("styled-components").StyledComponent<"span", any, {}, never>;

package/build/components/Pages/Send/styles.js

@@ -62,19 +62,8 @@ const TokenSelectorRight = styled.div `
   gap: 6px;
   color: var(--ck-body-color-muted);
 `;
-const AmountInputWrapper = styled.div `
-  position: relative;
-  margin-top: 12px;
-
-  > div {
-    margin: 0;
-  }
-`;
 const MaxButton = styled.button `
-  position: absolute;
-  right: 12px;
-  top: 50%;
-  transform: translateY(-50%);
+  flex-shrink: 0;
   padding: 6px 14px;
   border-radius: 16px;
   border: 1px solid var(--ck-body-divider);
@@ -108,5 +97,5 @@ const ErrorText = styled.span `
   color: var(--ck-body-color-danger);
 `;
 
-export { AmountInputWrapper, ErrorText, Field, FieldLabel, Form, HelperText, MaxButton, TokenSelectorButton, TokenSelectorContent, TokenSelectorRight, TokenSelectorValue };
+export { ErrorText, Field, FieldLabel, Form, HelperText, MaxButton, TokenSelectorButton, TokenSelectorContent, TokenSelectorRight, TokenSelectorValue };
 //# sourceMappingURL=styles.js.map

package/build/components/Pages/Send/styles.js.map

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

package/build/components/Pages/SendConfirmation/ConfirmationSummary.d.ts

@@ -0,0 +1,27 @@
+import type { ReactNode } from 'react';
+type ConfirmationAddress = {
+    display: string;
+    value: string;
+};
+interface ConfirmationSummaryProps {
+    /** Total being sent, e.g. "0.5" + "ETH". */
+    amount: string;
+    symbol: string;
+    /** Optional fiat estimate shown next to the total, e.g. "$180.84". */
+    fiat?: string | null;
+    /** Recipient address (truncated for display, full for copy). */
+    to?: ConfirmationAddress;
+    networkName: string;
+    networkIcon?: ReactNode;
+    /** Fee cell — the live estimate, or a "Sponsored" indicator. */
+    fee: ReactNode;
+    /** The wallet the funds are paid from. */
+    payWith?: ConfirmationAddress;
+}
+/**
+ * Shared, chain-agnostic transaction preview used by the EVM and Solana send
+ * confirmation screens. Renders the approval-style rows (Total / To / Network /
+ * Estimated fee) plus a "Pay with" card.
+ */
+export declare function ConfirmationSummary({ amount, symbol, fiat, to, networkName, networkIcon, fee, payWith, }: ConfirmationSummaryProps): import("react/jsx-runtime").JSX.Element;
+export {};

package/build/components/Pages/SendConfirmation/ConfirmationSummary.js

@@ -0,0 +1,15 @@
+import { jsxs, Fragment, jsx } from 'react/jsx-runtime';
+import { CopyText } from '../../Common/CopyToClipboard/CopyText.js';
+import { SummaryList, SummaryItem, SummaryLabel, AmountValue, FiatValue, AddressValue, NetworkValue, PayWithCard, PayWithMeta, PayWithAddress, PayWithBadge } from './styles.js';
+
+/**
+ * Shared, chain-agnostic transaction preview used by the EVM and Solana send
+ * confirmation screens. Renders the approval-style rows (Total / To / Network /
+ * Estimated fee) plus a "Pay with" card.
+ */
+function ConfirmationSummary({ amount, symbol, fiat, to, networkName, networkIcon, fee, payWith, }) {
+    return (jsxs(Fragment, { children: [jsxs(SummaryList, { children: [jsxs(SummaryItem, { children: [jsx(SummaryLabel, { children: "Total" }), jsxs(AmountValue, { children: [amount || '0', " ", symbol, fiat ? jsxs(FiatValue, { children: ["\u2248 ", fiat] }) : null] })] }), jsxs(SummaryItem, { children: [jsx(SummaryLabel, { children: "To" }), jsx(AddressValue, { children: to ? (jsx(CopyText, { size: "1rem", value: to.value, children: to.display })) : ('--') })] }), jsxs(SummaryItem, { children: [jsx(SummaryLabel, { children: "Network" }), jsxs(NetworkValue, { children: [networkIcon, networkName] })] }), jsxs(SummaryItem, { children: [jsx(SummaryLabel, { children: "Estimated fee" }), fee] })] }), jsxs(PayWithCard, { children: [jsxs(PayWithMeta, { children: [jsx(SummaryLabel, { children: "Pay with" }), jsx(PayWithAddress, { children: payWith ? (jsx(CopyText, { size: "0.875rem", value: payWith.value, children: payWith.display })) : ('--') })] }), jsxs(PayWithBadge, { children: [amount || '0', " ", symbol] })] })] }));
+}
+
+export { ConfirmationSummary };
+//# sourceMappingURL=ConfirmationSummary.js.map

package/build/components/Pages/SendConfirmation/ConfirmationSummary.js.map

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