@openfort/react 1.6.0 → 1.6.2

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>;

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

@@ -3,99 +3,154 @@ import styled from '../../../styles/styled/index.js';
 const Form = styled.form `
   display: flex;
   flex-direction: column;
-  gap: 20px;
+  gap: 14px;
   margin-top: 20px;
 `;
-const Field = styled.div `
+/** Rounded container shared by the "To" and "Amount" boxes. */
+const SendCard = styled.div `
   display: flex;
   flex-direction: column;
+  gap: 10px;
+  padding: 14px 16px;
+  border-radius: var(--ck-secondary-button-border-radius);
+  border: 1px solid var(--ck-body-divider);
+  background: var(--ck-secondary-button-background);
   text-align: left;
 `;
-const FieldLabel = styled.span `
-  font-size: 14px;
+const CardLabel = styled.span `
+  font-size: 13px;
   font-weight: 600;
-  color: var(--ck-body-color);
+  color: var(--ck-body-color-muted);
 `;
-const TokenSelectorButton = styled.button `
+/** "To" box: inline label, recipient input, and a Paste button. */
+const ToRow = styled.div `
   display: flex;
   align-items: center;
-  justify-content: space-between;
-  width: 100%;
-  margin-top: 12px;
-  padding: 12px 16px;
-  border-radius: var(--ck-secondary-button-border-radius);
+  gap: 10px;
+`;
+const RecipientInput = styled.input `
+  flex: 1;
+  min-width: 0;
+  border: none;
+  background: transparent;
+  color: var(--ck-body-color);
+  font-size: 15px;
+  font-weight: 500;
+  padding: 0;
+  outline: none;
+
+  &::placeholder {
+    color: var(--ck-body-color-muted);
+  }
+`;
+const PasteButton = styled.button `
+  flex-shrink: 0;
+  padding: 6px 12px;
+  border-radius: 16px;
   border: 1px solid var(--ck-body-divider);
-  background: var(--ck-secondary-button-background);
+  background: var(--ck-body-background);
   color: var(--ck-body-color);
+  font-size: 12px;
+  font-weight: 600;
   cursor: pointer;
-  transition: background 150ms ease, border-color 150ms ease, color 150ms ease;
-  text-align: left;
+  transition: background 150ms ease, color 150ms ease, border-color 150ms ease;
 
   &:hover {
     background: var(--ck-secondary-button-hover-background);
-    border-color: var(--ck-body-color-muted);
   }
 `;
-const TokenSelectorContent = styled.div `
+/** "Amount" box: large amount input with an inline token selector. */
+const AmountRow = styled.div `
   display: flex;
-  flex-direction: column;
-  gap: 2px;
-  overflow: hidden;
+  align-items: center;
+  gap: 10px;
 `;
-const TokenSelectorValue = styled.span `
-  font-size: ${(props) => (props.$primary ? '15px' : '13px')};
-  font-weight: ${(props) => (props.$primary ? 600 : 500)};
-  color: ${(props) => {
-    if (props.$primary)
-        return 'var(--ck-body-color)';
-    if (props.$muted)
-        return 'var(--ck-body-color-muted)';
-    return 'var(--ck-body-color-muted)';
-}};
-  white-space: nowrap;
-  overflow: hidden;
-  text-overflow: ellipsis;
+const AmountField = styled.input `
+  flex: 1;
+  min-width: 0;
+  border: none;
+  background: transparent;
+  color: var(--ck-body-color);
+  font-size: 28px;
+  font-weight: 600;
+  line-height: 1.1;
+  padding: 0;
+  outline: none;
+
+  &::placeholder {
+    color: var(--ck-body-color-muted);
+  }
 `;
-const TokenSelectorRight = styled.div `
+const PillLogo = styled.span `
   display: flex;
   align-items: center;
-  gap: 6px;
-  color: var(--ck-body-color-muted);
+  width: 22px;
+  flex-shrink: 0;
 `;
-const MaxButton = styled.button `
+const TokenPill = styled.button `
+  display: flex;
+  align-items: center;
+  gap: 6px;
   flex-shrink: 0;
-  padding: 6px 14px;
-  border-radius: 16px;
+  padding: 7px 12px;
+  border-radius: 999px;
   border: 1px solid var(--ck-body-divider);
   background: var(--ck-body-background);
   color: var(--ck-body-color);
-  font-size: 12px;
+  font-size: 14px;
   font-weight: 600;
   cursor: pointer;
-  transition: background 150ms ease, color 150ms ease, border-color 150ms ease;
+  transition: background 150ms ease, border-color 150ms ease, color 150ms ease;
 
   &:hover {
     background: var(--ck-secondary-button-hover-background);
+    border-color: var(--ck-body-color-muted);
   }
+`;
+/** Bottom row of the amount box: fiat value (left), balance + Use max (right). */
+const AmountMeta = styled.div `
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 8px;
+`;
+const MetaText = styled.span `
+  font-size: 13px;
+  font-weight: 500;
+  color: var(--ck-body-color-muted);
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+`;
+const BalanceMeta = styled.span `
+  display: flex;
+  align-items: center;
+  gap: 6px;
+  flex-shrink: 0;
+  font-size: 13px;
+  font-weight: 500;
+  color: var(--ck-body-color-muted);
+`;
+const UseMaxButton = styled.button `
+  border: none;
+  background: none;
+  padding: 0;
+  font-size: 13px;
+  font-weight: 600;
+  color: var(--ck-accent-color, var(--ck-focus-color, #1a88f8));
+  cursor: pointer;
 
   &:disabled {
     opacity: 0.5;
     cursor: not-allowed;
-    background: var(--ck-body-background-secondary);
   }
 `;
-const HelperText = styled.span `
-  display: block;
-  margin-top: 8px;
-  font-size: 13px;
-  color: var(--ck-body-color-muted);
-`;
 const ErrorText = styled.span `
   display: block;
-  margin-top: 6px;
+  margin-top: 2px;
   font-size: 13px;
   color: var(--ck-body-color-danger);
 `;
 
-export { ErrorText, Field, FieldLabel, Form, HelperText, MaxButton, TokenSelectorButton, TokenSelectorContent, TokenSelectorRight, TokenSelectorValue };
+export { AmountField, AmountMeta, AmountRow, BalanceMeta, CardLabel, ErrorText, Form, MetaText, PasteButton, PillLogo, RecipientInput, SendCard, ToRow, TokenPill, UseMaxButton };
 //# 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

@@ -17,11 +17,13 @@ interface ConfirmationSummaryProps {
     fee: ReactNode;
     /** The wallet the funds are paid from. */
     payWith?: ConfirmationAddress;
+    /** Current balance of the pay-with wallet, e.g. "134.32 USDC". */
+    balance?: string;
 }
 /**
  * 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 declare function ConfirmationSummary({ amount, symbol, fiat, to, networkName, networkIcon, fee, payWith, balance, }: ConfirmationSummaryProps): import("react/jsx-runtime").JSX.Element;
 export {};

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

@@ -7,8 +7,8 @@ import { SummaryList, SummaryItem, SummaryLabel, AmountValue, FiatValue, Address
  * 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] })] })] }));
+function ConfirmationSummary({ amount, symbol, fiat, to, networkName, networkIcon, fee, payWith, balance, }) {
+    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 })) : ('--') })] }), balance ? jsx(PayWithBadge, { children: balance }) : null] })] }));
 }
 
 export { ConfirmationSummary };

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

@@ -8,6 +8,8 @@ type EstimatedFeesProps = {
     nativeSymbol: string;
     enabled?: boolean;
     hideInfoIcon?: boolean;
+    /** When fees are sponsored, show the estimate struck through next to "Sponsored". */
+    sponsored?: boolean;
 };
-export declare const EstimatedFees: ({ account, to, value, data, chainId, nativeSymbol, enabled, hideInfoIcon, }: EstimatedFeesProps) => import("react/jsx-runtime").JSX.Element;
+export declare const EstimatedFees: ({ account, to, value, data, chainId, nativeSymbol, enabled, hideInfoIcon, sponsored, }: EstimatedFeesProps) => import("react/jsx-runtime").JSX.Element;
 export {};

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

@@ -1,4 +1,4 @@
-import { jsx, Fragment, jsxs } from 'react/jsx-runtime';
+import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
 import { createPublicClient, http, formatUnits } from 'viem';
 import { useEthereumWalletAssets } from '../../../ethereum/hooks/useEthereumWalletAssets.js';
 import { useAsyncData } from '../../../shared/hooks/useAsyncData.js';
@@ -7,7 +7,7 @@ import { getDefaultEthereumRpcUrl } from '../../../utils/rpc.js';
 import Tooltip from '../../Common/Tooltip/index.js';
 import { useOpenfort } from '../../Openfort/useOpenfort.js';
 import { formatBalance } from '../Send/utils.js';
-import { InfoIconWrapper } from './styles.js';
+import { InfoIconWrapper, FeeStrike, SponsoredText } from './styles.js';
 
 const InfoIcon = () => (jsxs("svg", { "aria-hidden": "true", width: "14", height: "14", viewBox: "0 0 14 14", fill: "none", xmlns: "http://www.w3.org/2000/svg", children: [jsx("circle", { cx: "7", cy: "7", r: "6", stroke: "currentColor", strokeWidth: "1.5" }), jsx("path", { d: "M7 10V6.5M7 4.5H7.005", stroke: "currentColor", strokeWidth: "1.5", strokeLinecap: "round" })] }));
 const usdFormatter = new Intl.NumberFormat('en-US', {
@@ -16,8 +16,8 @@ const usdFormatter = new Intl.NumberFormat('en-US', {
     minimumFractionDigits: 2,
     maximumFractionDigits: 4,
 });
-const EstimatedFees = ({ account, to, value, data, chainId, nativeSymbol, enabled = true, hideInfoIcon = false, }) => {
-    var _a, _b, _c;
+const EstimatedFees = ({ account, to, value, data, chainId, nativeSymbol, enabled = true, hideInfoIcon = false, sponsored = false, }) => {
+    var _a, _b, _c, _d;
     const { walletConfig } = useOpenfort();
     const { data: assets } = useEthereumWalletAssets();
     const pricePerToken = (_c = (_b = (_a = assets === null || assets === void 0 ? void 0 : assets.find((a) => a.type === 'native')) === null || _a === void 0 ? void 0 : _a.metadata) === null || _b === void 0 ? void 0 : _b.fiat) === null || _c === void 0 ? void 0 : _c.value;
@@ -49,19 +49,26 @@ const EstimatedFees = ({ account, to, value, data, chainId, nativeSymbol, enable
         },
         enabled: enabled && !!account && !!to && !!chainId,
     });
-    // Handle query states
-    if (!gas.data || gas.error) {
-        return jsx(Fragment, { children: "--" });
+    // Format the estimate (USD when a native price is known, otherwise native units).
+    const gasUnits = (_d = gas.data) === null || _d === void 0 ? void 0 : _d.gasLimit;
+    let feeText = null;
+    if (gas.data && !gas.error) {
+        const gasCost = gas.data.estimatedCost;
+        if (pricePerToken !== undefined) {
+            feeText = `≈ ${usdFormatter.format(Number.parseFloat(formatUnits(gasCost, 18)) * pricePerToken)}`;
+        }
+        else {
+            feeText = `≈ ${formatBalance(gasCost, 18)} ${nativeSymbol}`;
+        }
     }
-    const gasCost = gas.data.estimatedCost;
-    const gasUnits = gas.data.gasLimit;
-    if (pricePerToken !== undefined) {
-        const gasCostInEth = Number.parseFloat(formatUnits(gasCost, 18));
-        const gasCostInUsd = gasCostInEth * pricePerToken;
-        return (jsxs(Fragment, { children: ["\u2248 ", usdFormatter.format(gasCostInUsd), !hideInfoIcon && (jsx(Tooltip, { message: `${gasUnits.toString()} gas units (paid in ${nativeSymbol})`, delay: 0.2, children: jsx(InfoIconWrapper, { children: jsx(InfoIcon, {}) }) }))] }));
+    const info = !hideInfoIcon && gasUnits ? (jsx(Tooltip, { message: `${gasUnits.toString()} gas units (paid in ${nativeSymbol})`, delay: 0.2, children: jsx(InfoIconWrapper, { children: jsx(InfoIcon, {}) }) })) : null;
+    // Sponsored: show what it would have cost, struck through, next to "Sponsored".
+    if (sponsored) {
+        return (jsxs(Fragment, { children: [feeText && jsx(FeeStrike, { children: feeText }), jsx(SponsoredText, { children: "Sponsored" })] }));
     }
-    // Fallback to native token if price not available
-    return (jsxs(Fragment, { children: ["\u2248 ", formatBalance(gasCost, 18), " ", nativeSymbol, !hideInfoIcon && (jsx(Tooltip, { message: `${gasUnits.toString()} gas units`, delay: 0.2, children: jsx(InfoIconWrapper, { children: jsx(InfoIcon, {}) }) }))] }));
+    if (!feeText)
+        return jsx(Fragment, { children: "--" });
+    return (jsxs(Fragment, { children: [feeText, info] }));
 };
 
 export { EstimatedFees };

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

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

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

@@ -1,10 +1,12 @@
-import { jsxs, jsx } from 'react/jsx-runtime';
+import { jsxs, jsx, Fragment } from 'react/jsx-runtime';
 import { ChainTypeEnum } from '@openfort/openfort-js';
 import { useState, useEffect } from 'react';
 import { parseUnits } from 'viem';
+import { currencyLogoUrl } from '../../../constants/logos.js';
+import { useAsyncData } from '../../../shared/hooks/useAsyncData.js';
 import { getExplorerUrl } from '../../../shared/utils/explorer.js';
 import { useSolanaEmbeddedWallet } from '../../../solana/hooks/useSolanaEmbeddedWallet.js';
-import { sendSplTokenGasless, sendSplToken, sendSolGasless, sendSol } from '../../../solana/transfer.js';
+import { estimateSolanaTransferFeeLamports, sendSplTokenGasless, sendSplToken, sendSolGasless, sendSol } from '../../../solana/transfer.js';
 import 'detect-browser';
 import { truncateSolanaAddress } from '../../../utils/format.js';
 import Button from '../../Common/Button/index.js';
@@ -13,12 +15,13 @@ import { ModalHeading, ModalBody } from '../../Common/Modal/styles.js';
 import { routes } from '../../Openfort/types.js';
 import { useOpenfort } from '../../Openfort/useOpenfort.js';
 import { PageContent } from '../../PageContent/index.js';
+import { formatBalance, formatBalanceWithSymbol } from '../Send/utils.js';
 import { ConfirmationSummary } from './ConfirmationSummary.js';
-import { ButtonRow, SponsoredFee, FeesValue, ErrorContainer, ErrorTitle, ErrorMessage } from './styles.js';
+import { ButtonRow, FeesValue, FeeStrike, SponsoredText, ErrorContainer, ErrorTitle, ErrorMessage } from './styles.js';
 
 const SOL_DECIMALS = 9;
 const SolanaSendConfirmation = () => {
-    var _a, _b;
+    var _a, _b, _c;
     const { sendForm, setRoute, publishableKey, triggerResize, walletConfig } = useOpenfort();
     const wallet = useSolanaEmbeddedWallet();
     const address = wallet.status === 'connected' ? wallet.address : undefined;
@@ -32,6 +35,15 @@ const SolanaSendConfirmation = () => {
     const decimals = asset.type === 'spl' ? asset.metadata.decimals : SOL_DECIMALS;
     // Fees are sponsored from config (the SVM counterpart of ethereumFeeSponsorshipId).
     const isSponsored = Boolean((_b = walletConfig === null || walletConfig === void 0 ? void 0 : walletConfig.solana) === null || _b === void 0 ? void 0 : _b.sponsorFees);
+    // Real network fee from the RPC (getFeeForMessage). Null while loading or on failure.
+    const feeQuery = useAsyncData({
+        queryKey: ['sol-fee', address, recipient, rpcUrl],
+        queryFn: () => address && recipient && rpcUrl
+            ? estimateSolanaTransferFeeLamports({ from: address, to: recipient, rpcUrl })
+            : Promise.resolve(null),
+        enabled: Boolean(address && recipient && rpcUrl),
+    });
+    const feeText = feeQuery.data != null ? `≈ ${formatBalance(feeQuery.data, SOL_DECIMALS)} SOL` : null;
     const [isLoading, setIsLoading] = useState(false);
     const [signature, setSignature] = useState(null);
     const [error, setError] = useState(null);
@@ -114,7 +126,7 @@ const SolanaSendConfirmation = () => {
     if (signature) {
         return (jsxs(PageContent, { children: [jsx(Loader, { isSuccess: true, header: "Transfer sent", description: `${amount} ${symbol} sent successfully` }), jsxs(ButtonRow, { children: [jsx(Button, { variant: "primary", onClick: handleViewExplorer, children: "View on Explorer" }), jsx(Button, { variant: "secondary", onClick: handleFinish, children: "Back to profile" })] })] }));
     }
-    return (jsxs(PageContent, { onBack: routes.SOL_SEND, children: [jsx(ModalHeading, { children: "Confirm transfer" }), jsx(ModalBody, { children: "Review the transaction before sending." }), jsx(ConfirmationSummary, { amount: amount || '0', symbol: symbol, to: recipient ? { display: truncateSolanaAddress(recipient), value: recipient } : undefined, networkName: `Solana ${cluster.charAt(0).toUpperCase()}${cluster.slice(1)}`, payWith: address ? { display: truncateSolanaAddress(address), value: address } : undefined, fee: isSponsored ? jsx(SponsoredFee, { children: "Sponsored \u00B7 gasless" }) : jsx(FeesValue, { children: "Network fee" }) }), error && (jsxs(ErrorContainer, { children: [jsx(ErrorTitle, { children: "Transaction failed" }), jsx(ErrorMessage, { children: error })] })), jsxs(ButtonRow, { children: [jsx(Button, { variant: "primary", onClick: handleConfirm, disabled: !address || isLoading, waiting: isLoading, children: isLoading ? 'Confirming...' : 'Confirm' }), jsx(Button, { variant: "secondary", onClick: () => setRoute(routes.SOL_SEND), disabled: isLoading, children: "Cancel" })] })] }));
+    return (jsxs(PageContent, { onBack: routes.SOL_SEND, children: [jsx(ModalHeading, { children: "Confirm transfer" }), jsx(ModalBody, { children: "Review the transaction before sending." }), jsx(ConfirmationSummary, { amount: amount || '0', symbol: symbol, to: recipient ? { display: truncateSolanaAddress(recipient), value: recipient } : undefined, networkName: `Solana ${cluster.charAt(0).toUpperCase()}${cluster.slice(1)}`, networkIcon: currencyLogoUrl('SOL') ? jsx("img", { src: (_c = currencyLogoUrl('SOL')) !== null && _c !== void 0 ? _c : '', alt: "" }) : undefined, balance: formatBalanceWithSymbol(asset.balance, decimals, symbol), payWith: address ? { display: truncateSolanaAddress(address), value: address } : undefined, fee: jsx(FeesValue, { children: isSponsored ? (jsxs(Fragment, { children: [feeText && jsx(FeeStrike, { children: feeText }), " ", jsx(SponsoredText, { children: "Sponsored" })] })) : ((feeText !== null && feeText !== void 0 ? feeText : '--')) }) }), error && (jsxs(ErrorContainer, { children: [jsx(ErrorTitle, { children: "Transaction failed" }), jsx(ErrorMessage, { children: error })] })), jsxs(ButtonRow, { children: [jsx(Button, { variant: "primary", onClick: handleConfirm, disabled: !address || isLoading, waiting: isLoading, children: isLoading ? 'Confirming...' : 'Confirm' }), jsx(Button, { variant: "secondary", onClick: () => setRoute(routes.SOL_SEND), disabled: isLoading, children: "Cancel" })] })] }));
 };
 
 export { SolanaSendConfirmation };

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

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