@openfort/react 1.5.1 → 1.6.0

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

@@ -8,13 +8,13 @@ import { sendSplTokenGasless, sendSplToken, sendSolGasless, sendSol } from '../.
 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 { ConfirmationSummary } from './ConfirmationSummary.js';
+import { ButtonRow, SponsoredFee, FeesValue, ErrorContainer, ErrorTitle, ErrorMessage } from './styles.js';
 
 const SOL_DECIMALS = 9;
 const SolanaSendConfirmation = () => {
@@ -114,7 +114,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)}`, 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" })] })] }));
 };
 
 export { SolanaSendConfirmation };

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

@@ -13,23 +13,18 @@ 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 { 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, SponsoredFee, 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;
     const wallet = useEthereumEmbeddedWallet();
@@ -37,19 +32,7 @@ const SendConfirmation = () => {
     const { sendForm, setRoute, triggerResize, walletConfig } = 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 +291,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 +307,21 @@ 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]);
     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: 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
                             ? 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,13 @@ 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>;
+export declare const SponsoredFee: 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, {

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

@@ -45,26 +45,58 @@ const FeesValue = styled(SummaryValue) `
   text-decoration: ${(props) => (props.$completed ? 'line-through' : 'none')};
   opacity: ${(props) => (props.$completed ? 0.6 : 1)};
 `;
-const CheckIconWrapper = styled.span `
-  color: var(--ck-body-color);
-  line-height: 0;
+const FiatValue = styled.span `
+  margin-left: 6px;
+  font-size: 13px;
+  font-weight: 400;
+  color: var(--ck-body-color-muted);
+`;
+const NetworkValue = styled(SummaryValue) `
   display: inline-flex;
   align-items: center;
-  
-  svg {
-    width: 16px;
-    height: 16px;
+  justify-content: flex-end;
+  gap: 6px;
+
+  svg,
+  img {
+    width: 18px;
+    height: 18px;
+    border-radius: 50%;
   }
 `;
-// export const BalanceSpinnerWrapper = styled.span`
-//   display: inline-flex;
-//   align-items: center;
-//   margin-left: 8px;
-//   svg {
-//     width: 14px;
-//     height: 14px;
-//   }
-// `
+const SponsoredFee = styled(SummaryValue) `
+  color: var(--ck-body-color-valid, #16a34a);
+`;
+const PayWithCard = styled.div `
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 12px;
+  margin-top: 4px;
+  padding: 12px 14px;
+  border-radius: 14px;
+  background: var(--ck-body-background-secondary, rgba(0, 0, 0, 0.04));
+`;
+const PayWithMeta = styled.div `
+  display: flex;
+  flex-direction: column;
+  gap: 2px;
+  text-align: left;
+`;
+const PayWithAddress = styled.span `
+  font-size: 14px;
+  font-weight: 600;
+  color: var(--ck-body-color);
+`;
+const PayWithBadge = styled.span `
+  flex-shrink: 0;
+  padding: 4px 10px;
+  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));
+`;
 const InfoIconWrapper = styled.span `
   color: var(--ck-body-color-muted);
   opacity: 0.6;
@@ -125,5 +157,5 @@ const ErrorAction = styled.div `
   line-height: 1.4;
 `;
 
-export { AddressValue, AmountValue, ButtonRow, CheckIconWrapper, ErrorAction, ErrorContainer, ErrorMessage, ErrorTitle, FeesValue, InfoIconWrapper, StatusMessage, SummaryItem, SummaryLabel, SummaryList };
+export { AddressValue, AmountValue, ButtonRow, ErrorAction, ErrorContainer, ErrorMessage, ErrorTitle, FeesValue, FiatValue, InfoIconWrapper, NetworkValue, PayWithAddress, PayWithBadge, PayWithCard, PayWithMeta, SponsoredFee, 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.d.ts

@@ -0,0 +1,2 @@
+declare const SignMessage: () => import("react/jsx-runtime").JSX.Element | null;
+export default SignMessage;

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

@@ -0,0 +1,81 @@
+import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
+import { useState, useRef, useEffect } from 'react';
+import { useEthereumEmbeddedWallet } from '../../../ethereum/hooks/useEthereumEmbeddedWallet.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';
+
+/** Renders an EIP-712 value as a readable nested bullet list. */
+function DataNode({ value }) {
+    if (value !== null && typeof value === 'object' && !Array.isArray(value)) {
+        return (jsx(DataList, { children: Object.entries(value).map(([key, child]) => (jsxs(DataItem, { children: [jsxs(DataKey, { children: [key, ":"] }), ' ', child !== null && typeof child === 'object' ? jsx(DataNode, { value: child }) : String(child)] }, key))) }));
+    }
+    return jsx(Fragment, { children: String(value) });
+}
+const SignMessage = () => {
+    var _a;
+    const { signRequest, setSignRequest, setOpen, uiConfig, triggerResize } = useOpenfort();
+    const wallet = useEthereumEmbeddedWallet();
+    const [signing, setSigning] = useState(false);
+    const [error, setError] = useState(null);
+    const [signature, setSignature] = useState(null);
+    const settledRef = useRef(false);
+    // Reject the pending request if the screen unmounts before signing (the user
+    // closed the modal or navigated away).
+    useEffect(() => {
+        return () => {
+            if (!settledRef.current)
+                signRequest === null || signRequest === void 0 ? void 0 : signRequest.reject(new Error('User rejected the signature request'));
+        };
+    }, [signRequest]);
+    // Content height changes between the views; re-measure.
+    useEffect(() => {
+        triggerResize();
+    }, [triggerResize]);
+    if (!signRequest)
+        return null;
+    const appName = (_a = uiConfig.appName) !== null && _a !== void 0 ? _a : 'This app';
+    const close = () => {
+        setSignRequest(null);
+        setOpen(false);
+    };
+    const handleSign = async () => {
+        var _a;
+        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)],
+                }));
+            settledRef.current = true;
+            signRequest.resolve(signed);
+            setSignature(signed);
+            setSigning(false);
+            triggerResize();
+        }
+        catch (e) {
+            setError(e instanceof Error ? e.message : 'Failed to sign the message');
+            setSigning(false);
+        }
+    };
+    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" })] }) }));
+};
+
+export { SignMessage as default };
+//# sourceMappingURL=index.js.map

package/build/components/Pages/SignMessage/index.js.map

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

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

@@ -0,0 +1,14 @@
+export declare const SignContent: import("styled-components").StyledComponent<"div", any, {}, never>;
+export declare const Subtitle: import("styled-components").StyledComponent<"p", any, {}, never>;
+export declare const MessageBox: import("styled-components").StyledComponent<"div", any, {
+    $scroll?: boolean;
+}, never>;
+export declare const DataList: import("styled-components").StyledComponent<"ul", any, {}, never>;
+export declare const DataItem: import("styled-components").StyledComponent<"li", any, {}, never>;
+export declare const DataKey: import("styled-components").StyledComponent<"span", any, {}, never>;
+export declare const ErrorText: import("styled-components").StyledComponent<"div", any, {}, never>;
+export declare const CopyRow: import("styled-components").StyledComponent<"div", any, {}, never>;
+export declare const SuccessWrap: import("styled-components").StyledComponent<"div", any, {}, never>;
+export declare const SuccessCircle: import("styled-components").StyledComponent<"div", any, {}, never>;
+export declare const SuccessTitle: import("styled-components").StyledComponent<"div", any, {}, never>;
+export declare const SignaturePreview: import("styled-components").StyledComponent<"code", any, {}, never>;

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

@@ -0,0 +1,82 @@
+import styled from '../../../styles/styled/index.js';
+
+const SignContent = styled.div `
+  display: flex;
+  flex-direction: column;
+  gap: 16px;
+`;
+const Subtitle = styled.p `
+  margin: 0;
+  text-align: center;
+  font-size: 15px;
+  line-height: 1.4;
+  color: var(--ck-body-color-muted, #999);
+`;
+const MessageBox = styled.div `
+  padding: 16px;
+  border-radius: 12px;
+  background: var(--ck-body-background-secondary, rgba(0, 0, 0, 0.04));
+  color: var(--ck-body-color, #111);
+  font-size: 14px;
+  line-height: 1.45;
+  text-align: left;
+  word-break: break-word;
+  white-space: pre-wrap;
+  ${({ $scroll }) => $scroll && 'max-height: 320px; overflow-y: auto;'}
+`;
+const DataList = styled.ul `
+  margin: 0;
+  padding-left: 18px;
+  list-style: disc;
+`;
+const DataItem = styled.li `
+  margin: 2px 0;
+`;
+const DataKey = styled.span `
+  color: var(--ck-body-color-muted, #777);
+`;
+const ErrorText = styled.div `
+  text-align: center;
+  font-size: 13px;
+  color: var(--ck-body-color-danger, #e7000b);
+`;
+const CopyRow = styled.div `
+  display: flex;
+  justify-content: center;
+`;
+const SuccessWrap = styled.div `
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  gap: 12px;
+  padding: 12px 0 4px;
+`;
+const SuccessCircle = styled.div `
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 56px;
+  height: 56px;
+  border-radius: 50%;
+  color: #fff;
+  background: var(--ck-body-color-valid, #16a34a);
+`;
+const SuccessTitle = styled.div `
+  font-size: 17px;
+  font-weight: 600;
+  color: var(--ck-body-color, #111);
+`;
+const SignaturePreview = styled.code `
+  display: block;
+  max-width: 100%;
+  padding: 10px 12px;
+  border-radius: 10px;
+  background: var(--ck-body-background-secondary, rgba(0, 0, 0, 0.04));
+  color: var(--ck-body-color-muted, #777);
+  font-size: 12px;
+  word-break: break-all;
+  text-align: center;
+`;
+
+export { CopyRow, DataItem, DataKey, DataList, ErrorText, MessageBox, SignContent, SignaturePreview, Subtitle, SuccessCircle, SuccessTitle, SuccessWrap };
+//# sourceMappingURL=styles.js.map

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

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