@openfort/react 1.5.1 → 1.6.1

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

@@ -3,110 +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-muted);
+`;
+/** "To" box: inline label, recipient input, and a Paste button. */
+const ToRow = styled.div `
+  display: flex;
+  align-items: center;
+  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 TokenSelectorButton = styled.button `
+const PasteButton = styled.button `
+  flex-shrink: 0;
+  padding: 6px 12px;
+  border-radius: 16px;
+  border: 1px solid var(--ck-body-divider);
+  background: var(--ck-body-background);
+  color: var(--ck-body-color);
+  font-size: 12px;
+  font-weight: 600;
+  cursor: pointer;
+  transition: background 150ms ease, color 150ms ease, border-color 150ms ease;
+
+  &:hover {
+    background: var(--ck-secondary-button-hover-background);
+  }
+`;
+/** "Amount" box: large amount input with an inline token selector. */
+const AmountRow = 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 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 PillLogo = styled.span `
+  display: flex;
+  align-items: center;
+  width: 22px;
+  flex-shrink: 0;
+`;
+const TokenPill = styled.button `
+  display: flex;
+  align-items: center;
+  gap: 6px;
+  flex-shrink: 0;
+  padding: 7px 12px;
+  border-radius: 999px;
   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: 14px;
+  font-weight: 600;
   cursor: pointer;
   transition: background 150ms ease, border-color 150ms ease, color 150ms ease;
-  text-align: left;
 
   &:hover {
     background: var(--ck-secondary-button-hover-background);
     border-color: var(--ck-body-color-muted);
   }
 `;
-const TokenSelectorContent = styled.div `
+/** Bottom row of the amount box: fiat value (left), balance + Use max (right). */
+const AmountMeta = styled.div `
   display: flex;
-  flex-direction: column;
-  gap: 2px;
-  overflow: hidden;
+  align-items: center;
+  justify-content: space-between;
+  gap: 8px;
 `;
-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)';
-}};
+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 TokenSelectorRight = styled.div `
+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 AmountInputWrapper = styled.div `
-  position: relative;
-  margin-top: 12px;
-
-  > div {
-    margin: 0;
-  }
-`;
-const MaxButton = styled.button `
-  position: absolute;
-  right: 12px;
-  top: 50%;
-  transform: translateY(-50%);
-  padding: 6px 14px;
-  border-radius: 16px;
-  border: 1px solid var(--ck-body-divider);
-  background: var(--ck-body-background);
-  color: var(--ck-body-color);
-  font-size: 12px;
+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;
-  transition: background 150ms ease, color 150ms ease, border-color 150ms ease;
-
-  &:hover {
-    background: var(--ck-secondary-button-hover-background);
-  }
 
   &: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 { AmountInputWrapper, 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

@@ -0,0 +1,29 @@
+import type { ReactNode } from 'react';
+type ConfirmationAddress = {
+    display: string;
+    value: string;
+};
+interface ConfirmationSummaryProps {
+    /** Total being sent, e.g. "0.5" + "ETH". */
+    amount: string;
+    symbol: string;
+    /** Optional fiat estimate shown next to the total, e.g. "$180.84". */
+    fiat?: string | null;
+    /** Recipient address (truncated for display, full for copy). */
+    to?: ConfirmationAddress;
+    networkName: string;
+    networkIcon?: ReactNode;
+    /** Fee cell — the live estimate, or a "Sponsored" indicator. */
+    fee: ReactNode;
+    /** The wallet the funds are paid from. */
+    payWith?: ConfirmationAddress;
+    /** 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, balance, }: ConfirmationSummaryProps): import("react/jsx-runtime").JSX.Element;
+export {};

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

@@ -0,0 +1,15 @@
+import { jsxs, Fragment, jsx } from 'react/jsx-runtime';
+import { CopyText } from '../../Common/CopyToClipboard/CopyText.js';
+import { SummaryList, SummaryItem, SummaryLabel, AmountValue, FiatValue, AddressValue, NetworkValue, PayWithCard, PayWithMeta, PayWithAddress, PayWithBadge } from './styles.js';
+
+/**
+ * Shared, chain-agnostic transaction preview used by the EVM and Solana send
+ * confirmation screens. Renders the approval-style rows (Total / To / Network /
+ * Estimated fee) plus a "Pay with" card.
+ */
+function ConfirmationSummary({ amount, symbol, fiat, to, networkName, networkIcon, fee, payWith, 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 };
+//# sourceMappingURL=ConfirmationSummary.js.map

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

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

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,24 +1,27 @@
-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';
-import { CopyText } from '../../Common/CopyToClipboard/CopyText.js';
 import Loader from '../../Common/Loading/index.js';
 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 { ButtonRow, SummaryList, SummaryItem, SummaryLabel, AmountValue, AddressValue, FeesValue, ErrorContainer, ErrorTitle, ErrorMessage } from './styles.js';
+import { formatBalance, formatBalanceWithSymbol } from '../Send/utils.js';
+import { ConfirmationSummary } from './ConfirmationSummary.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 details before sending." }), jsxs(SummaryList, { children: [jsxs(SummaryItem, { children: [jsx(SummaryLabel, { children: "Sending" }), jsxs(AmountValue, { children: [amount || '0', " ", symbol] })] }), jsxs(SummaryItem, { children: [jsx(SummaryLabel, { children: "From" }), jsx(AddressValue, { children: address ? (jsx(CopyText, { size: "1rem", value: address, children: truncateSolanaAddress(address) })) : ('--') })] }), jsxs(SummaryItem, { children: [jsx(SummaryLabel, { children: "To" }), jsx(AddressValue, { children: recipient ? (jsx(CopyText, { size: "1rem", value: recipient, children: truncateSolanaAddress(recipient) })) : ('--') })] }), isSponsored && (jsxs(SummaryItem, { children: [jsx(SummaryLabel, { children: "Network fee" }), jsx(FeesValue, { "$completed": true, children: "Sponsored" })] }))] }), 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';
@@ -13,43 +14,26 @@ import 'detect-browser';
 import { truncateEthAddress } from '../../../utils/format.js';
 import { parseTransactionError } from '../../../utils/errorHandling.js';
 import { logger } from '../../../utils/logger.js';
-import { getChainName, getDefaultEthereumRpcUrl } from '../../../utils/rpc.js';
+import { getDefaultEthereumRpcUrl, getChainName } from '../../../utils/rpc.js';
 import Button from '../../Common/Button/index.js';
-import { CopyText } from '../../Common/CopyToClipboard/CopyText.js';
 import Loader from '../../Common/Loading/index.js';
 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, SummaryList, SummaryItem, SummaryLabel, AmountValue, AddressValue, FeesValue, CheckIconWrapper, StatusMessage, ErrorContainer, ErrorTitle, ErrorMessage, ErrorAction } from './styles.js';
+import { ButtonRow, FeesValue, StatusMessage, ErrorContainer, ErrorTitle, ErrorMessage, ErrorAction } from './styles.js';
 
-/** Check if chain is a testnet */
-function isTestnetChain(chainId) {
-    const testnets = new Set([5, 11155111, 80001, 84532, 421614, 97, 4002]);
-    return testnets.has(chainId);
-}
 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;
-    // Build chain info for block explorer
-    const chain = chainId
-        ? {
-            id: chainId,
-            name: getChainName(chainId),
-            blockExplorers: {
-                default: {
-                    url: getExplorerUrl(ChainTypeEnum.EVM, { chainId }),
-                },
-            },
-            testnet: isTestnetChain(chainId),
-        }
-        : undefined;
+    const blockExplorerUrl = chainId ? getExplorerUrl(ChainTypeEnum.EVM, { chainId }) : undefined;
     const recipientAddress = isAddress(sendForm.recipient) ? sendForm.recipient : undefined;
     const normalisedAmount = sanitizeForParsing(sendForm.amount);
     const { data: assets } = useEthereumWalletAssets();
@@ -308,7 +292,6 @@ const SendConfirmation = () => {
     };
     const status = isSuccess ? 'success' : firstError ? 'error' : 'idle';
     const errorDetails = status === 'error' ? parseTransactionError(firstError) : null;
-    const blockExplorerUrl = (_e = (_d = chain === null || chain === void 0 ? void 0 : chain.blockExplorers) === null || _d === void 0 ? void 0 : _d.default) === null || _e === void 0 ? void 0 : _e.url;
     const handleOpenBlockExplorer = () => {
         if ((receipt === null || receipt === void 0 ? void 0 : receipt.transactionHash) && blockExplorerUrl) {
             window.open(`${blockExplorerUrl}/tx/${receipt.transactionHash}`, '_blank', 'noopener,noreferrer');
@@ -325,19 +308,26 @@ const SendConfirmation = () => {
         if (typeof feeSponsorship === 'string')
             return true;
         return feeSponsorship[chainId !== null && chainId !== void 0 ? chainId : 0] !== undefined;
-    }, [(_f = walletConfig === null || walletConfig === void 0 ? void 0 : walletConfig.ethereum) === null || _f === void 0 ? void 0 : _f.ethereumFeeSponsorshipId, chainId]);
+    }, [(_d = walletConfig === null || walletConfig === void 0 ? void 0 : walletConfig.ethereum) === null || _d === void 0 ? void 0 : _d.ethereumFeeSponsorshipId, chainId]);
+    const fiatTotal = useMemo(() => {
+        var _a, _b;
+        const perToken = (_b = (_a = token.metadata) === null || _a === void 0 ? void 0 : _a.fiat) === null || _b === void 0 ? void 0 : _b.value;
+        const n = Number(normalisedAmount);
+        if (!perToken || !Number.isFinite(n) || n <= 0)
+            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 details before sending." }), jsxs(SummaryList, { children: [jsxs(SummaryItem, { children: [jsx(SummaryLabel, { children: "Sending" }), jsxs(AmountValue, { children: [normalisedAmount || '0', " ", getAssetSymbol(token)] })] }), jsxs(SummaryItem, { children: [jsx(SummaryLabel, { children: "From" }), jsx(AddressValue, { children: address ? (jsx(CopyText, { size: "1rem", value: address, children: truncateEthAddress(address) })) : ('--') })] }), jsxs(SummaryItem, { children: [jsx(SummaryLabel, { children: "To" }), jsx(AddressValue, { children: recipientAddress ? (jsx(CopyText, { size: "1rem", value: recipientAddress, children: truncateEthAddress(recipientAddress) })) : ('--') })] }), jsxs("div", { children: [jsxs(SummaryItem, { children: [jsx(SummaryLabel, { children: "Estimated fees" }), jsxs(FeesValue, { "$completed": isSponsored, 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: isSponsored }), jsx(CheckIconWrapper, { children: jsx(TickIcon, {}) })] })] }), isSponsored && (jsx("div", { style: {
-                                    textAlign: 'end',
-                                    marginTop: '4px',
-                                    width: '100%',
-                                    color: 'var(--ck-body-color-valid)',
-                                    fontSize: '12px',
-                                }, children: "Sponsored transaction" }))] })] }), 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

@@ -6,7 +6,15 @@ export declare const AddressValue: import("styled-components").StyledComponent<"
 export declare const FeesValue: import("styled-components").StyledComponent<"span", any, {
     $completed?: boolean;
 }, never>;
-export declare const CheckIconWrapper: import("styled-components").StyledComponent<"span", any, {}, never>;
+export declare const FiatValue: import("styled-components").StyledComponent<"span", any, {}, never>;
+export declare const NetworkValue: 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>;
+export declare const PayWithBadge: import("styled-components").StyledComponent<"span", any, {}, never>;
 export declare const InfoIconWrapper: import("styled-components").StyledComponent<"span", any, {}, never>;
 export declare const ButtonRow: import("styled-components").StyledComponent<"div", any, {}, never>;
 export declare const StatusMessage: import("styled-components").StyledComponent<"div", any, {