@openfort/react 1.6.0 → 1.6.1

package/build/components/Common/Modal/index.js

@@ -2,6 +2,7 @@ import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
 import { AnimatePresence, motion } from 'framer-motion';
 import { useEffect, useState, useCallback, useRef } from 'react';
 import { useTransition } from 'react-transition-state';
+import ResizeObserver from 'resize-observer-polyfill';
 import { useConnectionStrategy } from '../../../core/ConnectionStrategyContext.js';
 import { useEthereumBridge } from '../../../ethereum/OpenfortEthereumBridgeContext.js';
 import FocusTrap from '../../../hooks/useFocusTrap.js';
@@ -107,6 +108,7 @@ onInfo, }) => {
     };
     let blockTimeout;
     const contentRef = useCallback((node) => {
+        var _a;
         if (!node)
             return;
         ref.current = node;
@@ -116,6 +118,16 @@ onInfo, }) => {
         blockTimeout = setTimeout(() => setInTransition(false), 360);
         // Calculate new content bounds
         updateBounds(node);
+        // Auto-fit: re-measure whenever the active page's content size changes, so
+        // every page — and any new one — sizes the modal correctly without having
+        // to call triggerResize() itself.
+        (_a = resizeObserverRef.current) === null || _a === void 0 ? void 0 : _a.disconnect();
+        const observer = new ResizeObserver(() => {
+            if (ref.current === node)
+                updateBounds(node);
+        });
+        observer.observe(node);
+        resizeObserverRef.current = observer;
     }, [open, inTransition]);
     // Update layout on chain/network switch to avoid clipping
     const strategy = useConnectionStrategy();
@@ -123,10 +135,12 @@ onInfo, }) => {
     const chainId = (_j = (_f = strategy === null || strategy === void 0 ? void 0 : strategy.getChainId()) !== null && _f !== void 0 ? _f : (_h = (_g = bridge === null || bridge === void 0 ? void 0 : bridge.account) === null || _g === void 0 ? void 0 : _g.chain) === null || _h === void 0 ? void 0 : _h.id) !== null && _j !== void 0 ? _j : bridge === null || bridge === void 0 ? void 0 : bridge.chainId;
     const switchChain = (_k = bridge === null || bridge === void 0 ? void 0 : bridge.switchChain) === null || _k === void 0 ? void 0 : _k.switchChain;
     const ref = useRef(null);
+    const resizeObserverRef = useRef(null);
     useEffect(() => {
         if (ref.current)
             updateBounds(ref.current);
     }, [chainId, switchChain, mobile, context.uiConfig, context.resize]);
+    useEffect(() => () => { var _a; return (_a = resizeObserverRef.current) === null || _a === void 0 ? void 0 : _a.disconnect(); }, []);
     useEffect(() => {
         if (!mounted) {
             setDimensions({

package/build/components/Common/Modal/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/Openfort/types.d.ts

@@ -492,7 +492,7 @@ export type SignRequest = ({
     kind: 'typedData';
     typedData: SignTypedDataPayload;
 }) & {
-    resolve: (signature: `0x${string}`) => void;
+    resolve: (signature: string) => void;
     reject: (reason?: unknown) => void;
 };
 export type BuyProviderId = 'moonpay' | 'coinbase' | 'stripe';

package/build/components/Pages/AssetInventory/SolanaAssetInventory.js

@@ -1,19 +1,19 @@
 import { jsxs, jsx } from 'react/jsx-runtime';
-import { useEffect, useState } from 'react';
+import { useEffect } from 'react';
 import { formatUnits } from 'viem';
-import { TOKEN_LOGO, symbolToColor } from '../../../constants/logos.js';
+import { currencyLogoUrl } 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, ContentWrapper, TokenList, TokenContainer, TokenLeftGroup, TokenInfo, TokenSymbol, TokenName, TokenLogoArea, TokenLogoImg, TokenLogoFallback } from '../SelectToken/styles.js';
+import { AssetChainLogo } from '../Deposit/AssetChainLogo.js';
+import { SelectTokenContent, EmptyState, ContentWrapper, TokenList, TokenContainer, TokenLeftGroup, TokenInfo, TokenSymbol, TokenName, TokenLogoArea } from '../SelectToken/styles.js';
 
 const ZERO = BigInt(0);
+/** Token logo with the Solana chain badge, matching the EVM inventory. */
 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() })) }));
+    var _a, _b;
+    return (jsx(TokenLogoArea, { children: jsx(AssetChainLogo, { assetLogo: (_a = currencyLogoUrl(symbol)) !== null && _a !== void 0 ? _a : '', chainLogo: (_b = currencyLogoUrl('SOL')) !== null && _b !== void 0 ? _b : '', symbol: symbol }) }));
 }
 /**
  * SVM counterpart of {@link AssetInventory}: lists the connected Solana wallet's

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

@@ -6,6 +6,7 @@ import { useEthereumBridge } from '../../../ethereum/OpenfortEthereumBridgeConte
 import useIsMobile from '../../../hooks/useIsMobile.js';
 import styled from '../../../styles/styled/index.js';
 import { isIOS } from '../../../utils/index.js';
+import { TextLinkButton } from '../../Common/Button/styles.js';
 import { ModalHeading, ModalBody } from '../../Common/Modal/styles.js';
 import { ScrollArea } from '../../Common/ScrollArea/index.js';
 import { routes } from '../../Openfort/types.js';
@@ -83,6 +84,8 @@ const DepositWallet = () => {
     // (the funding deposit-address mint uses a fixed nominal amount regardless).
     const [amount, setAmount] = useState('1');
     const [pressedPreset, setPressedPreset] = useState(null);
+    // Collapse the wallet list to keep the picker short on mobile; "Show more" reveals the rest.
+    const [showAllWallets, setShowAllWallets] = useState(false);
     const depositPageUrl = (_b = (_a = uiConfig.funding) === null || _a === void 0 ? void 0 : _a.depositPageUrl) !== null && _b !== void 0 ? _b : OPENFORT_DEPOSIT_PAGE_URL;
     // Solana sources have no numeric chain id and no desktop EVM-extension send, so
     // they route through the deeplink (Phantom) on every platform instead of the
@@ -125,20 +128,22 @@ const DepositWallet = () => {
     // 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.
     const deeplinks = isIOS() ? allDeeplinks.filter((d) => d.app !== 'trust') : allDeeplinks;
+    const WALLET_LIMIT = 3;
+    const visibleDeeplinks = showAllWallets ? deeplinks : deeplinks.slice(0, WALLET_LIMIT);
     useEffect(() => {
         triggerResize();
-    }, [route.receiverAddress, route.loading, route.status, deeplinks.length, triggerResize]);
+    }, [route.receiverAddress, route.loading, route.status, deeplinks.length, showAllWallets, 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 && 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',
-                                                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 })] })] }))] }));
+    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: jsxs("div", { style: { display: 'flex', flexDirection: 'column', gap: 8 }, children: [visibleDeeplinks.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))), deeplinks.length > WALLET_LIMIT && (jsx(TextLinkButton, { type: "button", onClick: () => setShowAllWallets((v) => !v), style: { alignSelf: 'center', marginTop: 2 }, children: showAllWallets ? 'Show less' : `Show ${deeplinks.length - WALLET_LIMIT} more` }))] }) }))] })) : (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/ExportKey/index.js

@@ -1,14 +1,16 @@
 import { jsxs, jsx, Fragment } from 'react/jsx-runtime';
-import { useState, useEffect } from 'react';
+import { useState, useRef, useCallback, useEffect } from 'react';
 import { KeyIcon } from '../../../assets/icons.js';
 import { useEthereumEmbeddedWallet } from '../../../ethereum/hooks/useEthereumEmbeddedWallet.js';
-import Button from '../../Common/Button/index.js';
-import { CopyText } from '../../Common/CopyToClipboard/CopyText.js';
+import { CopyIconButton } from '../../Common/CopyToClipboard/CopyIconButton.js';
 import { ModalHeading, ModalContent, ModalBody } from '../../Common/Modal/styles.js';
 import { FloatingGraphic } from '../../FloatingGraphic/index.js';
 import { PageContent } from '../../PageContent/index.js';
+import { Label, AddressRow, AddressField } from '../Receive/styles.js';
+import { HoldButton, HoldFill, HoldLabel, KeyReveal } from './styles.js';
 
 // TODO: Localize
+const HOLD_MS = 5000;
 const ExportKey = () => {
     var _a, _b;
     const wallet = useEthereumEmbeddedWallet();
@@ -22,6 +24,42 @@ const ExportKey = () => {
     const [exportedKey, setExportedKey] = useState(null);
     const [exportError, setExportError] = useState(null);
     const [showExportedKey, setShowExportedKey] = useState(false);
+    // Press-and-hold gate: the key only reveals after a deliberate 5s hold.
+    const [progress, setProgress] = useState(0);
+    const holdingRef = useRef(false);
+    const rafRef = useRef(null);
+    const startRef = useRef(0);
+    const stopHold = useCallback(() => {
+        holdingRef.current = false;
+        if (rafRef.current !== null) {
+            cancelAnimationFrame(rafRef.current);
+            rafRef.current = null;
+        }
+        setProgress((p) => (p >= 1 ? p : 0));
+    }, []);
+    const startHold = useCallback(() => {
+        if (showExportedKey || holdingRef.current)
+            return;
+        holdingRef.current = true;
+        startRef.current = performance.now();
+        const tick = (now) => {
+            if (!holdingRef.current)
+                return;
+            const p = Math.min(1, (now - startRef.current) / HOLD_MS);
+            setProgress(p);
+            if (p >= 1) {
+                holdingRef.current = false;
+                setShowExportedKey(true);
+                return;
+            }
+            rafRef.current = requestAnimationFrame(tick);
+        };
+        rafRef.current = requestAnimationFrame(tick);
+    }, [showExportedKey]);
+    useEffect(() => () => {
+        if (rafRef.current !== null)
+            cancelAnimationFrame(rafRef.current);
+    }, []);
     useEffect(() => {
         const asyncExportKey = async () => {
             try {
@@ -45,7 +83,9 @@ const ExportKey = () => {
                     logo: jsx(KeyIcon, {}),
                 }, logoBottomLeft: {
                     logo: jsx(KeyIcon, {}),
-                } }), jsxs(ModalContent, { children: [jsxs(ModalBody, { children: [isSmartAccount ? (jsxs("p", { style: { marginBottom: 6 }, children: ["This is your account's ", jsx("strong", { children: "owner (signer) key" }), " \u2014 not the account itself. Your smart account", accountAddress ? ` (${accountAddress.slice(0, 6)}…${accountAddress.slice(-4)})` : '', " is a contract with no private key, so importing this key into another wallet shows the owner address,", ' ', jsx("strong", { children: "not your funds" }), ". To move funds, use Send to withdraw to another wallet."] })) : (jsx("p", { style: { marginBottom: 6 }, children: "With your private key, you can access your account outside this application." })), jsx("p", { children: "Keep it safe and never share it with anyone you don't trust." })] }), !showExportedKey ? (jsx(Button, { onClick: () => setShowExportedKey(true), style: { marginTop: 12 }, children: "Export key" })) : exportError ? (jsx(ModalBody, { style: { marginTop: 12 }, "$error": true, children: exportError })) : exportedKey ? (jsx("div", { style: { marginTop: 12 }, children: jsxs(CopyText, { value: exportedKey, children: [exportedKey.slice(0, 10), "...", exportedKey.slice(-10)] }) })) : (jsx(Fragment, { children: "Loading..." }))] })] }));
+                } }), jsxs(ModalContent, { children: [jsxs(ModalBody, { children: [isSmartAccount ? (jsxs("p", { style: { marginBottom: 6 }, children: ["This is your account's ", jsx("strong", { children: "owner (signer) key" }), " \u2014 not the account itself. Your smart account", accountAddress ? ` (${accountAddress.slice(0, 6)}…${accountAddress.slice(-4)})` : '', " is a contract with no private key, so importing this key into another wallet shows the owner address,", ' ', jsx("strong", { children: "not your funds" }), ". To move funds, use Send to withdraw to another wallet."] })) : (jsx("p", { style: { marginBottom: 6 }, children: "With your private key, you can access your account outside this application." })), jsx("p", { children: "Keep it safe and never share it with anyone you don't trust." })] }), !showExportedKey ? (jsxs(HoldButton, { type: "button", onPointerDown: startHold, onPointerUp: stopHold, onPointerLeave: stopHold, onPointerCancel: stopHold, style: { marginTop: 12 }, children: [jsx(HoldFill, { style: { width: `${progress * 100}%` } }), jsx(HoldLabel, { children: progress > 0
+                                    ? `Hold to reveal… ${Math.ceil((1 - progress) * (HOLD_MS / 1000))}s`
+                                    : 'Hold 5s to reveal key' })] })) : exportError ? (jsx(ModalBody, { style: { marginTop: 12 }, "$error": true, children: exportError })) : exportedKey ? (jsxs(KeyReveal, { children: [jsx(Label, { children: "Your private key" }), jsxs(AddressRow, { children: [jsx(AddressField, { style: { fontFamily: 'ui-monospace, SFMono-Regular, Menlo, monospace' }, children: exportedKey }), jsx(CopyIconButton, { value: exportedKey })] })] })) : (jsx(Fragment, { children: "Loading..." }))] })] }));
 };
 
 export { ExportKey as default };

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

@@ -0,0 +1,5 @@
+/** Press-and-hold reveal button: a fill grows left→right over the hold duration. */
+export declare const HoldButton: import("styled-components").StyledComponent<"button", any, {}, never>;
+export declare const HoldFill: import("styled-components").StyledComponent<"div", any, {}, never>;
+export declare const HoldLabel: import("styled-components").StyledComponent<"span", any, {}, never>;
+export declare const KeyReveal: import("styled-components").StyledComponent<"div", any, {}, never>;

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

@@ -0,0 +1,47 @@
+import styled from '../../../styles/styled/index.js';
+
+/** Press-and-hold reveal button: a fill grows left→right over the hold duration. */
+const HoldButton = styled.button `
+  position: relative;
+  overflow: hidden;
+  width: 100%;
+  padding: 14px 16px;
+  border-radius: var(--ck-primary-button-border-radius, 16px);
+  border: 1px solid var(--ck-body-divider);
+  background: var(--ck-secondary-button-background);
+  color: var(--ck-body-color);
+  font-size: 16px;
+  font-weight: 600;
+  cursor: pointer;
+  user-select: none;
+  -webkit-user-select: none;
+  touch-action: none;
+  transition: border-color 150ms ease;
+
+  &:hover {
+    border-color: var(--ck-body-color-muted);
+  }
+`;
+const HoldFill = styled.div `
+  position: absolute;
+  top: 0;
+  left: 0;
+  bottom: 0;
+  background: var(--ck-focus-color, #1a88f8);
+  opacity: 0.22;
+  pointer-events: none;
+`;
+const HoldLabel = styled.span `
+  position: relative;
+  z-index: 1;
+`;
+const KeyReveal = styled.div `
+  display: flex;
+  flex-direction: column;
+  gap: 10px;
+  margin-top: 12px;
+  text-align: left;
+`;
+
+export { HoldButton, HoldFill, HoldLabel, KeyReveal };
+//# sourceMappingURL=styles.js.map

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

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

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

@@ -8,7 +8,7 @@ import { useOpenfortCore } from '../../../openfort/useOpenfort.js';
 import { useSolanaEmbeddedWallet } from '../../../solana/hooks/useSolanaEmbeddedWallet.js';
 import { CopyIconButton } from '../../Common/CopyToClipboard/CopyIconButton.js';
 import CustomQRCode from '../../Common/CustomQRCode/index.js';
-import { ModalHeading, ModalBody } from '../../Common/Modal/styles.js';
+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';
@@ -63,7 +63,7 @@ const Receive = () => {
         const timer = setTimeout(() => context.triggerResize(), 100);
         return () => clearTimeout(timer);
     }, [address, context]);
-    return (jsx(PageContent, { onBack: isSolanaRoute ? routes.SOL_CONNECTED : routes.CONNECTED, children: jsxs(ReceiveContent, { children: [jsx(ModalHeading, { children: "Receive funds" }), jsx(ModalBody, { children: "Scan the QR code or copy your wallet details." }), address && (jsx(QRWrapper, { children: jsx(CustomQRCode, { value: qrValue, image: jsx("div", { style: { padding: 10 }, children: renderLogo() }) }) })), jsxs(AddressSection, { children: [jsx(Label, { children: "Your wallet address" }), jsxs(AddressRow, { children: [jsx(AddressField, { children: address !== null && address !== void 0 ? address : '--' }), jsx(CopyIconButton, { value: address !== null && address !== void 0 ? address : '' })] })] }), networkLabel && jsxs(NetworkInfo, { children: ["Network: ", networkLabel] })] }) }));
+    return (jsx(PageContent, { onBack: isSolanaRoute ? routes.SOL_CONNECTED : routes.CONNECTED, children: jsxs(ReceiveContent, { children: [jsx(ModalHeading, { children: "Receive money" }), address && (jsx(QRWrapper, { children: jsx(CustomQRCode, { value: qrValue, image: jsx("div", { style: { padding: 10 }, children: renderLogo() }) }) })), jsxs(AddressSection, { children: [jsx(Label, { children: "Your wallet address" }), jsxs(AddressRow, { children: [jsx(AddressField, { children: address !== null && address !== void 0 ? address : '--' }), jsx(CopyIconButton, { value: address !== null && address !== void 0 ? address : '' })] })] }), networkLabel && jsxs(NetworkInfo, { children: ["Network: ", networkLabel] })] }) }));
 };
 
 export { Receive as default };

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

@@ -1,19 +1,19 @@
 import { jsxs, jsx } from 'react/jsx-runtime';
-import { useEffect, useState } from 'react';
+import { useEffect } from 'react';
 import { formatUnits } from 'viem';
-import { TOKEN_LOGO, symbolToColor } from '../../../constants/logos.js';
+import { currencyLogoUrl } 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';
+import { AssetChainLogo } from '../Deposit/AssetChainLogo.js';
+import { SelectTokenContent, EmptyState, TokenList, TokenButton, TokenLeftGroup, TokenInfo, TokenSymbol, TokenName, TokenBalance, TokenLogoArea } from './styles.js';
 
 const ZERO = BigInt(0);
+/** Token logo with the Solana chain badge, matching the EVM picker. */
 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() })) }));
+    var _a, _b;
+    return (jsx(TokenLogoArea, { children: jsx(AssetChainLogo, { assetLogo: (_a = currencyLogoUrl(symbol)) !== null && _a !== void 0 ? _a : '', chainLogo: (_b = currencyLogoUrl('SOL')) !== null && _b !== void 0 ? _b : '', symbol: symbol }) }));
 }
 const SolanaSelectToken = () => {
     const { setSendForm, setRoute, triggerResize } = useOpenfort();

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

@@ -2,6 +2,8 @@ import { jsxs, jsx } from 'react/jsx-runtime';
 import { ChainTypeEnum } from '@openfort/openfort-js';
 import { useState, useEffect } from 'react';
 import { formatUnits } from 'viem';
+import { currencyLogoUrl, chainLogoUrl } from '../../../constants/logos.js';
+import { useEthereumEmbeddedWallet } from '../../../ethereum/hooks/useEthereumEmbeddedWallet.js';
 import { useEthereumWalletAssets } from '../../../ethereum/hooks/useEthereumWalletAssets.js';
 import { useOpenfortCore } from '../../../openfort/useOpenfort.js';
 import { Arrow, ArrowChevron, TextLinkButton } from '../../Common/Button/styles.js';
@@ -10,8 +12,9 @@ import { routes } from '../../Openfort/types.js';
 import { useOpenfort } from '../../Openfort/useOpenfort.js';
 import { EVM_BUY_CURRENCIES } from '../Buy/evmCurrencies.js';
 import { SOLANA_BUY_CURRENCIES } from '../Buy/solanaCurrencies.js';
+import { AssetChainLogo } from '../Deposit/AssetChainLogo.js';
 import { getAssetSymbol, getAssetDecimals, formatBalanceWithSymbol } from '../Send/utils.js';
-import { SelectTokenContent, EmptyState, TokenList, TokenButton, TokenInfo, TokenSymbol, TokenName, TokenBalance } from './styles.js';
+import { SelectTokenContent, EmptyState, TokenList, TokenButton, TokenLeftGroup, TokenLogoArea, TokenInfo, TokenSymbol, TokenName, TokenBalance } from './styles.js';
 
 const ZERO = BigInt(0);
 const usdFormatter = new Intl.NumberFormat('en-US', {
@@ -27,6 +30,7 @@ const SelectToken = ({ isBuyFlow }) => {
         triggerResize();
     }, [viewAllAssets]);
     const { chainType } = useOpenfortCore();
+    const { chainId } = useEthereumEmbeddedWallet();
     const { data: walletAssets, isLoading: isBalancesLoading } = useEthereumWalletAssets();
     // Buys pick from a fixed buyable-currency list (USDC first, then native) per
     // chain family, so the picker always has options even for a fresh wallet with no
@@ -68,7 +72,7 @@ const SelectToken = ({ isBuyFlow }) => {
             return jsx(EmptyState, { children: "No supported tokens found for this network yet." });
         }
         return (jsxs(TokenList, { children: [selectableTokens.map((token) => {
-                    var _a, _b, _c, _d, _e;
+                    var _a, _b, _c, _d, _e, _f, _g;
                     const key = token.type === 'erc20' ? token.address : 'native';
                     const displaySymbol = getAssetSymbol(token);
                     const displayName = ((_a = token.metadata) === null || _a === void 0 ? void 0 : _a.name) || displaySymbol || 'Unknown Token';
@@ -101,7 +105,7 @@ const SelectToken = ({ isBuyFlow }) => {
                             }
                         }
                     }
-                    return (jsxs(TokenButton, { type: "button", onClick: () => handleSelect(token), style: { opacity: isDisabled ? 0.4 : 1, cursor: isDisabled ? 'not-allowed' : 'pointer' }, children: [jsxs(TokenInfo, { children: [jsx(TokenSymbol, { children: displayName }), isBuyFlow && jsx(TokenName, { children: displaySymbol })] }), isBuyFlow ? (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" }) })) : (jsxs(TokenInfo, { children: [jsx(TokenBalance, { children: balanceDisplay }), usdValue ? jsx(TokenName, { style: { textAlign: 'end' }, children: usdValue }) : null] }))] }, key));
+                    return (jsxs(TokenButton, { type: "button", onClick: () => handleSelect(token), style: { opacity: isDisabled ? 0.4 : 1, cursor: isDisabled ? 'not-allowed' : 'pointer' }, children: [jsxs(TokenLeftGroup, { children: [jsx(TokenLogoArea, { children: jsx(AssetChainLogo, { assetLogo: (_f = currencyLogoUrl(displaySymbol)) !== null && _f !== void 0 ? _f : '', chainLogo: (_g = chainLogoUrl(chainId)) !== null && _g !== void 0 ? _g : '', symbol: displaySymbol }) }), jsxs(TokenInfo, { children: [jsx(TokenSymbol, { children: displayName }), isBuyFlow && jsx(TokenName, { children: displaySymbol })] })] }), isBuyFlow ? (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" }) })) : (jsxs(TokenInfo, { children: [jsx(TokenBalance, { children: balanceDisplay }), usdValue ? jsx(TokenName, { style: { textAlign: 'end' }, children: usdValue }) : null] }))] }, key));
                 }), !isBuyFlow && (jsx(TextLinkButton, { type: "button", onClick: () => {
                         setViewAllAssets(!viewAllAssets);
                     }, children: viewAllAssets ? 'View less assets' : 'View all assets' }))] }));

package/build/components/Pages/SelectToken/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/Send/EthereumSend.js

@@ -1,20 +1,21 @@
 import { jsxs, jsx } from 'react/jsx-runtime';
 import { useEffect, useMemo } from 'react';
 import { parseUnits, isAddress, formatUnits } from 'viem';
+import { currencyLogoUrl, chainLogoUrl } from '../../../constants/logos.js';
+import { useEthereumEmbeddedWallet } from '../../../ethereum/hooks/useEthereumEmbeddedWallet.js';
 import { useEthereumWalletAssets } from '../../../ethereum/hooks/useEthereumWalletAssets.js';
 import Button from '../../Common/Button/index.js';
 import { Arrow, ArrowChevron } from '../../Common/Button/styles.js';
-import Input from '../../Common/Input/index.js';
 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 { AmountCard, AmountInput } from '../Buy/styles.js';
-import { Form, Field, FieldLabel, TokenSelectorButton, TokenSelectorContent, TokenSelectorValue, TokenSelectorRight, MaxButton, HelperText, ErrorText } from './styles.js';
+import { AssetChainLogo } from '../Deposit/AssetChainLogo.js';
+import { Form, SendCard, ToRow, CardLabel, RecipientInput, PasteButton, ErrorText, AmountRow, AmountField, TokenPill, PillLogo, AmountMeta, MetaText, BalanceMeta, UseMaxButton } from './styles.js';
 import { isSameToken, sanitizeForParsing, formatBalance, sanitizeAmountInput } from './utils.js';
 
 const EthereumSend = () => {
-    var _a, _b, _c, _d;
+    var _a, _b, _c, _d, _e, _f;
     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.
@@ -22,6 +23,7 @@ const EthereumSend = () => {
         triggerResize();
     }, [triggerResize]);
     const { data: assets } = useEthereumWalletAssets();
+    const { chainId } = useEthereumEmbeddedWallet();
     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];
     const selectedToken = selectedTokenOption !== null && selectedTokenOption !== void 0 ? selectedTokenOption : sendForm.asset;
@@ -64,6 +66,16 @@ const EthereumSend = () => {
             recipient: event.target.value,
         }));
     };
+    const handlePaste = async () => {
+        try {
+            const text = await navigator.clipboard.readText();
+            if (text)
+                setSendForm((prev) => ({ ...prev, recipient: text.trim() }));
+        }
+        catch {
+            // Clipboard unavailable or permission denied — leave the field as-is.
+        }
+    };
     const handleAmountChange = (event) => {
         const raw = sanitizeAmountInput(event.target.value);
         if (raw === '' || /^[0-9]*\.?[0-9]*$/.test(raw)) {
@@ -87,7 +99,15 @@ 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(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" })] })] }));
+    const fiatValue = useMemo(() => {
+        var _a, _b;
+        const perToken = (_b = (_a = selectedToken.metadata) === null || _a === void 0 ? void 0 : _a.fiat) === null || _b === void 0 ? void 0 : _b.value;
+        const n = Number(sanitizeForParsing(sendForm.amount));
+        if (!perToken || !Number.isFinite(n) || n <= 0)
+            return null;
+        return `$${(n * perToken).toFixed(2)}`;
+    }, [selectedToken.metadata, sendForm.amount]);
+    return (jsxs(PageContent, { onBack: routes.CONNECTED, children: [jsx(ModalHeading, { children: "Send money" }), jsxs(Form, { onSubmit: handleSubmit, children: [jsxs(SendCard, { children: [jsxs(ToRow, { children: [jsx(CardLabel, { children: "To" }), jsx(RecipientInput, { placeholder: "0x\u2026 or address", value: sendForm.recipient, onChange: handleRecipientChange, autoComplete: "off", spellCheck: false }), jsx(PasteButton, { type: "button", onClick: handlePaste, children: "Paste" })] }), sendForm.recipient && !recipientValid && jsx(ErrorText, { children: "Enter a valid wallet address." })] }), jsxs(SendCard, { children: [jsx(CardLabel, { children: "Amount" }), jsxs(AmountRow, { children: [jsx(AmountField, { placeholder: "0", value: sendForm.amount, onChange: handleAmountChange, inputMode: "decimal", autoComplete: "off" }), jsxs(TokenPill, { type: "button", onClick: handleOpenTokenSelector, children: [selectedSymbol && (jsx(PillLogo, { children: jsx(AssetChainLogo, { assetLogo: (_e = currencyLogoUrl(selectedSymbol)) !== null && _e !== void 0 ? _e : '', chainLogo: (_f = chainLogoUrl(chainId)) !== null && _f !== void 0 ? _f : '', symbol: selectedSymbol }) })), selectedSymbol || 'Select', 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(AmountMeta, { children: [jsx(MetaText, { style: { flex: 1, minWidth: 0 }, children: fiatValue !== null && fiatValue !== void 0 ? fiatValue : '' }), jsxs(BalanceMeta, { children: [jsx(MetaText, { children: availableLabel === '--' ? '--' : `${availableLabel} ${selectedSymbol}` }), jsx(UseMaxButton, { type: "button", onClick: handleMax, disabled: maxDisabled, children: "Use max" })] })] }), sendForm.amount && parsedAmount === null && jsx(ErrorText, { children: "Enter a valid amount." }), insufficientBalance && jsx(ErrorText, { children: "Insufficient balance for this transfer." })] }), 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,16 +1,16 @@
 import { jsxs, jsx } from 'react/jsx-runtime';
 import { useEffect, useMemo } from 'react';
 import { parseUnits, formatUnits } from 'viem';
+import { currencyLogoUrl } from '../../../constants/logos.js';
 import { useSolanaWalletAssets } from '../../../solana/hooks/useSolanaWalletAssets.js';
 import Button from '../../Common/Button/index.js';
 import { Arrow, ArrowChevron } from '../../Common/Button/styles.js';
-import Input from '../../Common/Input/index.js';
 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 { AmountCard, AmountInput } from '../Buy/styles.js';
-import { Form, Field, FieldLabel, TokenSelectorButton, TokenSelectorContent, TokenSelectorValue, TokenSelectorRight, MaxButton, HelperText, ErrorText } from './styles.js';
+import { AssetChainLogo } from '../Deposit/AssetChainLogo.js';
+import { Form, SendCard, ToRow, CardLabel, RecipientInput, PasteButton, ErrorText, AmountRow, AmountField, TokenPill, PillLogo, AmountMeta, MetaText, BalanceMeta, UseMaxButton } from './styles.js';
 import { sanitizeForParsing, formatBalance, sanitizeAmountInput } from './utils.js';
 
 const SOL_DECIMALS = 9;
@@ -27,6 +27,7 @@ function solAsset(balance) {
     };
 }
 const SolanaSend = () => {
+    var _a, _b;
     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.
@@ -87,7 +88,25 @@ 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(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" })] })] }));
+    const handlePaste = async () => {
+        try {
+            const text = await navigator.clipboard.readText();
+            if (text)
+                setSendForm((prev) => ({ ...prev, recipient: text.trim() }));
+        }
+        catch {
+            // Clipboard unavailable or permission denied — leave the field as-is.
+        }
+    };
+    const fiatValue = useMemo(() => {
+        var _a, _b;
+        const perToken = (_b = (_a = asset.metadata) === null || _a === void 0 ? void 0 : _a.fiat) === null || _b === void 0 ? void 0 : _b.value;
+        const n = Number(sanitizeForParsing(sendForm.amount));
+        if (!perToken || !Number.isFinite(n) || n <= 0)
+            return null;
+        return `$${(n * perToken).toFixed(2)}`;
+    }, [asset.metadata, sendForm.amount]);
+    return (jsxs(PageContent, { onBack: routes.SOL_CONNECTED, children: [jsx(ModalHeading, { children: "Send money" }), jsxs(Form, { onSubmit: handleSubmit, children: [jsxs(SendCard, { children: [jsxs(ToRow, { children: [jsx(CardLabel, { children: "To" }), jsx(RecipientInput, { placeholder: "Solana address", value: sendForm.recipient, onChange: (e) => setSendForm((prev) => ({ ...prev, recipient: e.target.value })), autoComplete: "off", spellCheck: false }), jsx(PasteButton, { type: "button", onClick: handlePaste, children: "Paste" })] }), sendForm.recipient && !recipientValid && jsx(ErrorText, { children: "Enter a valid Solana address." })] }), jsxs(SendCard, { children: [jsx(CardLabel, { children: "Amount" }), jsxs(AmountRow, { children: [jsx(AmountField, { placeholder: "0", value: sendForm.amount, onChange: handleAmountChange, inputMode: "decimal", autoComplete: "off" }), jsxs(TokenPill, { type: "button", onClick: handleOpenTokenSelector, children: [selected.symbol && (jsx(PillLogo, { children: jsx(AssetChainLogo, { assetLogo: (_a = currencyLogoUrl(selected.symbol)) !== null && _a !== void 0 ? _a : '', chainLogo: (_b = currencyLogoUrl('SOL')) !== null && _b !== void 0 ? _b : '', symbol: selected.symbol }) })), 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(AmountMeta, { children: [jsx(MetaText, { style: { flex: 1, minWidth: 0 }, children: fiatValue !== null && fiatValue !== void 0 ? fiatValue : '' }), jsxs(BalanceMeta, { children: [jsx(MetaText, { children: availableLabel === '--' ? '--' : `${availableLabel} ${selected.symbol}` }), jsx(UseMaxButton, { type: "button", onClick: handleMax, disabled: balanceBase === undefined, children: "Use max" })] })] }), sendForm.amount && parsedAmount === null && jsx(ErrorText, { children: "Enter a valid amount." }), insufficientBalance && jsxs(ErrorText, { children: ["Insufficient ", selected.symbol, " balance for this transfer."] })] }), 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

@@ -1,13 +1,19 @@
 export declare const Form: import("styled-components").StyledComponent<"form", any, {}, never>;
-export declare const Field: import("styled-components").StyledComponent<"div", any, {}, never>;
-export declare const FieldLabel: import("styled-components").StyledComponent<"span", any, {}, never>;
-export declare const TokenSelectorButton: import("styled-components").StyledComponent<"button", any, {}, never>;
-export declare const TokenSelectorContent: import("styled-components").StyledComponent<"div", any, {}, never>;
-export declare const TokenSelectorValue: import("styled-components").StyledComponent<"span", any, {
-    $primary?: boolean;
-    $muted?: boolean;
-}, never>;
-export declare const TokenSelectorRight: 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>;
+/** Rounded container shared by the "To" and "Amount" boxes. */
+export declare const SendCard: import("styled-components").StyledComponent<"div", any, {}, never>;
+export declare const CardLabel: import("styled-components").StyledComponent<"span", any, {}, never>;
+/** "To" box: inline label, recipient input, and a Paste button. */
+export declare const ToRow: import("styled-components").StyledComponent<"div", any, {}, never>;
+export declare const RecipientInput: import("styled-components").StyledComponent<"input", any, {}, never>;
+export declare const PasteButton: import("styled-components").StyledComponent<"button", any, {}, never>;
+/** "Amount" box: large amount input with an inline token selector. */
+export declare const AmountRow: import("styled-components").StyledComponent<"div", any, {}, never>;
+export declare const AmountField: import("styled-components").StyledComponent<"input", any, {}, never>;
+export declare const PillLogo: import("styled-components").StyledComponent<"span", any, {}, never>;
+export declare const TokenPill: import("styled-components").StyledComponent<"button", any, {}, never>;
+/** Bottom row of the amount box: fiat value (left), balance + Use max (right). */
+export declare const AmountMeta: import("styled-components").StyledComponent<"div", any, {}, never>;
+export declare const MetaText: import("styled-components").StyledComponent<"span", any, {}, never>;
+export declare const BalanceMeta: import("styled-components").StyledComponent<"span", any, {}, never>;
+export declare const UseMaxButton: import("styled-components").StyledComponent<"button", any, {}, never>;
 export declare const ErrorText: import("styled-components").StyledComponent<"span", any, {}, never>;