@openfort/react 1.6.0 → 1.6.1

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":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}

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

@@ -3,6 +3,7 @@ import { ChainTypeEnum } from '@openfort/openfort-js';
 import { useMemo, useEffect, useState, useRef } from 'react';
 import { isAddress, createPublicClient, http, erc20Abi, parseUnits, encodeFunctionData } from 'viem';
 import { TickIcon } from '../../../assets/icons.js';
+import { chainLogoUrl } from '../../../constants/logos.js';
 import { useEthereumEmbeddedWallet } from '../../../ethereum/hooks/useEthereumEmbeddedWallet.js';
 import { useEthereumWalletAssets } from '../../../ethereum/hooks/useEthereumWalletAssets.js';
 import { useBalance } from '../../../hooks/useBalance.js';
@@ -20,16 +21,16 @@ 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 { sanitizeForParsing, isSameToken, getAssetDecimals, getAssetSymbol } from '../Send/utils.js';
+import { sanitizeForParsing, isSameToken, getAssetDecimals, getAssetSymbol, formatBalanceWithSymbol } from '../Send/utils.js';
 import { ConfirmationSummary } from './ConfirmationSummary.js';
 import { EstimatedFees } from './EstimatedFees.js';
-import { ButtonRow, SponsoredFee, FeesValue, StatusMessage, ErrorContainer, ErrorTitle, ErrorMessage, ErrorAction } from './styles.js';
+import { ButtonRow, FeesValue, StatusMessage, ErrorContainer, ErrorTitle, ErrorMessage, ErrorAction } from './styles.js';
 
 const SendConfirmation = () => {
-    var _a, _b, _c, _d, _e, _f;
+    var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k;
     const wallet = useEthereumEmbeddedWallet();
     const { chainType } = useOpenfortCore();
-    const { sendForm, setRoute, triggerResize, walletConfig } = useOpenfort();
+    const { sendForm, setRoute, triggerResize, walletConfig, chains } = useOpenfort();
     const address = wallet.status === 'connected' ? wallet.address : undefined;
     const chainId = wallet.status === 'connected' ? wallet.chainId : undefined;
     const blockExplorerUrl = chainId ? getExplorerUrl(ChainTypeEnum.EVM, { chainId }) : undefined;
@@ -316,12 +317,17 @@ const SendConfirmation = () => {
             return null;
         return `$${(n * perToken).toFixed(2)}`;
     }, [(_f = (_e = token.metadata) === null || _e === void 0 ? void 0 : _e.fiat) === null || _f === void 0 ? void 0 : _f.value, normalisedAmount]);
+    // Prefer the configured chain's display name over the numeric id fallback.
+    const networkName = (_h = (_g = chains === null || chains === void 0 ? void 0 : chains.find((c) => c.id === chainId)) === null || _g === void 0 ? void 0 : _g.name) !== null && _h !== void 0 ? _h : getChainName(chainId !== null && chainId !== void 0 ? chainId : 0);
+    const balanceLabel = currentBalance !== undefined
+        ? formatBalanceWithSymbol(currentBalance, (_j = getAssetDecimals(token)) !== null && _j !== void 0 ? _j : 18, getAssetSymbol(token))
+        : undefined;
     if (isSuccess) {
         const successAmount = normalisedAmount || '0';
         const successSymbol = getAssetSymbol(token);
         return (jsxs(PageContent, { children: [jsx(Loader, { isSuccess: true, header: "Transfer Sent", description: `${successAmount} ${successSymbol} sent successfully` }), jsxs(ButtonRow, { children: [blockExplorerUrl && (jsx(Button, { variant: "primary", onClick: handleOpenBlockExplorer, children: "View on Explorer" })), jsx(Button, { variant: "secondary", onClick: handleFinish, children: "Back to profile" })] })] }));
     }
-    return (jsxs(PageContent, { children: [jsx(ModalHeading, { children: "Confirm transfer" }), jsx(ModalBody, { children: "Review the transaction before sending." }), jsx(ConfirmationSummary, { amount: normalisedAmount || '0', symbol: getAssetSymbol(token), fiat: fiatTotal, to: recipientAddress ? { display: truncateEthAddress(recipientAddress), value: recipientAddress } : undefined, networkName: getChainName(chainId !== null && chainId !== void 0 ? chainId : 0), payWith: address ? { display: truncateEthAddress(address), value: address } : undefined, fee: isSponsored ? (jsx(SponsoredFee, { children: "Sponsored \u00B7 gasless" })) : (jsx(FeesValue, { children: jsx(EstimatedFees, { account: address, to: token.type === 'erc20' ? token.address : recipientAddress, value: token.type === 'native' && parsedAmount ? parsedAmount : undefined, data: transferData, chainId: chainId, nativeSymbol: nativeSymbol, enabled: Boolean(address && recipientAddress && parsedAmount && parsedAmount > BigInt(0)), hideInfoIcon: false }) })) }), insufficientBalance && !isSuccess && (jsx(StatusMessage, { "$status": "error", children: "Insufficient balance for this transfer." })), errorDetails && (jsxs(ErrorContainer, { children: [jsx(ErrorTitle, { children: errorDetails.title }), jsx(ErrorMessage, { children: errorDetails.message }), errorDetails.action && jsx(ErrorAction, { children: errorDetails.action })] })), jsxs(ButtonRow, { children: [jsx(Button, { variant: "primary", onClick: isSuccess ? handleOpenBlockExplorer : handleConfirm, disabled: isSuccess
+    return (jsxs(PageContent, { children: [jsx(ModalHeading, { children: "Confirm transfer" }), jsx(ModalBody, { children: "Review the transaction before sending." }), jsx(ConfirmationSummary, { amount: normalisedAmount || '0', symbol: getAssetSymbol(token), fiat: fiatTotal, to: recipientAddress ? { display: truncateEthAddress(recipientAddress), value: recipientAddress } : undefined, networkName: networkName, networkIcon: chainLogoUrl(chainId) ? jsx("img", { src: (_k = chainLogoUrl(chainId)) !== null && _k !== void 0 ? _k : '', alt: "" }) : undefined, balance: balanceLabel, payWith: address ? { display: truncateEthAddress(address), value: address } : undefined, fee: jsx(FeesValue, { children: jsx(EstimatedFees, { account: address, to: token.type === 'erc20' ? token.address : recipientAddress, value: token.type === 'native' && parsedAmount ? parsedAmount : undefined, data: transferData, chainId: chainId, nativeSymbol: nativeSymbol, enabled: Boolean(address && recipientAddress && parsedAmount && parsedAmount > BigInt(0)), sponsored: isSponsored, hideInfoIcon: false }) }) }), insufficientBalance && !isSuccess && (jsx(StatusMessage, { "$status": "error", children: "Insufficient balance for this transfer." })), errorDetails && (jsxs(ErrorContainer, { children: [jsx(ErrorTitle, { children: errorDetails.title }), jsx(ErrorMessage, { children: errorDetails.message }), errorDetails.action && jsx(ErrorAction, { children: errorDetails.action })] })), jsxs(ButtonRow, { children: [jsx(Button, { variant: "primary", onClick: isSuccess ? handleOpenBlockExplorer : handleConfirm, disabled: isSuccess
                             ? false
                             : isLoading ||
                                 Boolean(transactionHash) ||

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

@@ -8,7 +8,9 @@ export declare const FeesValue: import("styled-components").StyledComponent<"spa
 }, never>;
 export declare const FiatValue: import("styled-components").StyledComponent<"span", any, {}, never>;
 export declare const NetworkValue: import("styled-components").StyledComponent<"span", any, {}, never>;
-export declare const SponsoredFee: import("styled-components").StyledComponent<"span", any, {}, never>;
+/** The would-be fee, struck through, shown next to "Sponsored". */
+export declare const FeeStrike: import("styled-components").StyledComponent<"span", any, {}, never>;
+export declare const SponsoredText: import("styled-components").StyledComponent<"span", any, {}, never>;
 export declare const PayWithCard: import("styled-components").StyledComponent<"div", any, {}, never>;
 export declare const PayWithMeta: import("styled-components").StyledComponent<"div", any, {}, never>;
 export declare const PayWithAddress: import("styled-components").StyledComponent<"span", any, {}, never>;

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

@@ -1,4 +1,5 @@
 import styled from '../../../styles/styled/index.js';
+import { ButtonContainer } from '../../Common/Button/styles.js';
 
 const SummaryList = styled.div `
   display: flex;
@@ -64,8 +65,14 @@ const NetworkValue = styled(SummaryValue) `
     border-radius: 50%;
   }
 `;
-const SponsoredFee = styled(SummaryValue) `
+/** The would-be fee, struck through, shown next to "Sponsored". */
+const FeeStrike = styled.span `
+  text-decoration: line-through;
+  opacity: 0.55;
+`;
+const SponsoredText = styled.span `
   color: var(--ck-body-color-valid, #16a34a);
+  font-weight: 600;
 `;
 const PayWithCard = styled.div `
   display: flex;
@@ -94,8 +101,8 @@ const PayWithBadge = styled.span `
   border-radius: 999px;
   font-size: 13px;
   font-weight: 600;
-  color: var(--ck-body-color-valid, #16a34a);
-  background: var(--ck-body-background, rgba(22, 163, 74, 0.12));
+  color: var(--ck-body-color);
+  background: var(--ck-body-background);
 `;
 const InfoIconWrapper = styled.span `
   color: var(--ck-body-color-muted);
@@ -115,9 +122,16 @@ const InfoIconWrapper = styled.span `
 `;
 const ButtonRow = styled.div `
   display: flex;
-  flex-direction: column;
-  gap: 4px;
+  gap: 12px;
   margin-top: 24px;
+
+  > button {
+    flex: 1;
+  }
+
+  ${ButtonContainer} {
+    margin: 0;
+  }
 `;
 const StatusMessage = styled.div `
   margin-top: 16px;
@@ -157,5 +171,5 @@ const ErrorAction = styled.div `
   line-height: 1.4;
 `;
 
-export { AddressValue, AmountValue, ButtonRow, ErrorAction, ErrorContainer, ErrorMessage, ErrorTitle, FeesValue, FiatValue, InfoIconWrapper, NetworkValue, PayWithAddress, PayWithBadge, PayWithCard, PayWithMeta, SponsoredFee, StatusMessage, SummaryItem, SummaryLabel, SummaryList };
+export { AddressValue, AmountValue, ButtonRow, ErrorAction, ErrorContainer, ErrorMessage, ErrorTitle, FeeStrike, FeesValue, FiatValue, InfoIconWrapper, NetworkValue, PayWithAddress, PayWithBadge, PayWithCard, PayWithMeta, SponsoredText, StatusMessage, SummaryItem, SummaryLabel, SummaryList };
 //# sourceMappingURL=styles.js.map

package/build/components/Pages/SendConfirmation/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/SignMessage/index.js

@@ -1,11 +1,14 @@
 import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
+import { ChainTypeEnum } from '@openfort/openfort-js';
 import { useState, useRef, useEffect } from 'react';
 import { useEthereumEmbeddedWallet } from '../../../ethereum/hooks/useEthereumEmbeddedWallet.js';
+import { useOpenfortCore } from '../../../openfort/useOpenfort.js';
+import { useSolanaEmbeddedWallet } from '../../../solana/hooks/useSolanaEmbeddedWallet.js';
 import Button from '../../Common/Button/index.js';
 import { CopyButton } from '../../Common/CopyToClipboard/CopyButton.js';
 import { useOpenfort } from '../../Openfort/useOpenfort.js';
 import { PageContent } from '../../PageContent/index.js';
-import { SuccessWrap, SuccessCircle, SuccessTitle, SignaturePreview, SignContent, Subtitle, MessageBox, CopyRow, ErrorText, DataList, DataItem, DataKey } from './styles.js';
+import { SuccessWrap, SuccessCircle, SuccessTitle, SignaturePreview, SignContent, Subtitle, MessageBox, Footer, CopyRow, ErrorText, DataList, DataItem, DataKey } from './styles.js';
 
 /** Renders an EIP-712 value as a readable nested bullet list. */
 function DataNode({ value }) {
@@ -17,17 +20,29 @@ function DataNode({ value }) {
 const SignMessage = () => {
     var _a;
     const { signRequest, setSignRequest, setOpen, uiConfig, triggerResize } = useOpenfort();
+    const { chainType } = useOpenfortCore();
     const wallet = useEthereumEmbeddedWallet();
+    const solana = useSolanaEmbeddedWallet();
     const [signing, setSigning] = useState(false);
     const [error, setError] = useState(null);
     const [signature, setSignature] = useState(null);
     const settledRef = useRef(false);
+    const mountedRef = useRef(false);
     // Reject the pending request if the screen unmounts before signing (the user
-    // closed the modal or navigated away).
+    // closed the modal or navigated away). React StrictMode invokes effect cleanup
+    // on a dev-only synchronous remount, so defer the reject to a microtask: the
+    // immediate remount flips mountedRef back to true and cancels the spurious
+    // "User rejected" that would otherwise fire while the wallet UI is still open.
     useEffect(() => {
+        mountedRef.current = true;
+        const request = signRequest;
         return () => {
-            if (!settledRef.current)
-                signRequest === null || signRequest === void 0 ? void 0 : signRequest.reject(new Error('User rejected the signature request'));
+            mountedRef.current = false;
+            queueMicrotask(() => {
+                if (!mountedRef.current && !settledRef.current) {
+                    request === null || request === void 0 ? void 0 : request.reject(new Error('User rejected the signature request'));
+                }
+            });
         };
     }, [signRequest]);
     // Content height changes between the views; re-measure.
@@ -46,16 +61,26 @@ const SignMessage = () => {
         setError(null);
         setSigning(true);
         try {
-            const provider = await ((_a = wallet.activeWallet) === null || _a === void 0 ? void 0 : _a.getProvider());
-            const address = wallet.address;
-            if (!provider || !address)
-                throw new Error('No connected wallet to sign with');
-            const signed = (signRequest.kind === 'message'
-                ? await provider.request({ method: 'personal_sign', params: [signRequest.message, address] })
-                : await provider.request({
-                    method: 'eth_signTypedData_v4',
-                    params: [address, JSON.stringify(signRequest.typedData)],
-                }));
+            let signed;
+            if (chainType === ChainTypeEnum.SVM) {
+                if (signRequest.kind !== 'message')
+                    throw new Error('Typed data signing is not supported on Solana.');
+                if (solana.status !== 'connected')
+                    throw new Error('No connected wallet to sign with');
+                signed = await solana.provider.signMessage(signRequest.message);
+            }
+            else {
+                const provider = await ((_a = wallet.activeWallet) === null || _a === void 0 ? void 0 : _a.getProvider());
+                const address = wallet.address;
+                if (!provider || !address)
+                    throw new Error('No connected wallet to sign with');
+                signed = (signRequest.kind === 'message'
+                    ? await provider.request({ method: 'personal_sign', params: [signRequest.message, address] })
+                    : await provider.request({
+                        method: 'eth_signTypedData_v4',
+                        params: [address, JSON.stringify(signRequest.typedData)],
+                    }));
+            }
             settledRef.current = true;
             signRequest.resolve(signed);
             setSignature(signed);
@@ -70,11 +95,11 @@ const SignMessage = () => {
     if (signature) {
         return (jsx(PageContent, { onBack: null, children: jsxs(SuccessWrap, { children: [jsx(SuccessCircle, { children: jsx("svg", { width: "28", height: "28", viewBox: "0 0 24 24", fill: "none", "aria-hidden": "true", children: jsx("path", { d: "M20 6 9 17l-5-5", stroke: "currentColor", strokeWidth: "2.5", strokeLinecap: "round", strokeLinejoin: "round" }) }) }), jsx(SuccessTitle, { children: "Message signed" }), jsx(SignaturePreview, { children: `${signature.slice(0, 14)}…${signature.slice(-12)}` }), jsx(Button, { variant: "primary", onClick: close, children: "Done" })] }) }));
     }
-    return (jsx(PageContent, { onBack: null, children: jsxs(SignContent, { children: [jsxs(Subtitle, { children: [appName, " wants you to sign a message. It will not cost you any fees."] }), signRequest.kind === 'message' ? (jsx(MessageBox, { children: signRequest.message })) : (jsxs(Fragment, { children: [jsx(MessageBox, { "$scroll": true, children: jsx(DataNode, { value: {
-                                    domain: signRequest.typedData.domain,
-                                    primaryType: signRequest.typedData.primaryType,
-                                    message: signRequest.typedData.message,
-                                } }) }), jsx(CopyRow, { children: jsx(CopyButton, { value: JSON.stringify(signRequest.typedData, null, 2), children: "Copy to clipboard" }) })] })), error && jsx(ErrorText, { children: error }), jsx(Button, { variant: "primary", onClick: handleSign, waiting: signing, disabled: signing, arrow: true, children: "Sign and continue" })] }) }));
+    return (jsx(PageContent, { onBack: null, children: jsxs(SignContent, { children: [jsxs(Subtitle, { children: [appName, " wants you to sign a message. It will not cost you any fees."] }), signRequest.kind === 'message' ? (jsx(MessageBox, { children: signRequest.message })) : (jsx(MessageBox, { children: jsx(DataNode, { value: {
+                            domain: signRequest.typedData.domain,
+                            primaryType: signRequest.typedData.primaryType,
+                            message: signRequest.typedData.message,
+                        } }) })), jsxs(Footer, { children: [signRequest.kind === 'typedData' && (jsx(CopyRow, { children: jsx(CopyButton, { value: JSON.stringify(signRequest.typedData, null, 2), children: "Copy to clipboard" }) })), error && jsx(ErrorText, { children: error }), jsx(Button, { variant: "primary", onClick: handleSign, waiting: signing, disabled: signing, arrow: true, children: "Sign and continue" })] })] }) }));
 };
 
 export { SignMessage as default };