@openfort/react 1.5.0 → 1.6.0

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

package/build/hooks/openfort/useSignMessage.d.ts

@@ -0,0 +1,27 @@
+import { type SignTypedDataPayload } from '../../components/Openfort/types';
+/**
+ * Hook for signing messages with a confirmation modal (EVM only).
+ *
+ * Opens the Openfort "Sign message" screen, shows the message (or EIP-712 typed
+ * data) to the user, and resolves with the signature once they confirm. Rejects
+ * if the user dismisses the modal.
+ *
+ * @example
+ * ```tsx
+ * const { signMessage, signTypedData, isPending } = useSignMessage()
+ *
+ * const signature = await signMessage('I hereby vote for foobar')
+ *
+ * const typedSignature = await signTypedData({
+ *   domain: { name: 'Ether Mail', version: '1', chainId: 1, verifyingContract: '0x…' },
+ *   types: { Person: [{ name: 'name', type: 'string' }] },
+ *   primaryType: 'Person',
+ *   message: { name: 'Cow' },
+ * })
+ * ```
+ */
+export declare function useSignMessage(): {
+    signMessage: (message: string) => Promise<`0x${string}`>;
+    signTypedData: (typedData: SignTypedDataPayload) => Promise<`0x${string}`>;
+    isPending: boolean;
+};

package/build/hooks/openfort/useSignMessage.js

@@ -0,0 +1,52 @@
+import { useState, useCallback } from 'react';
+import { routes } from '../../components/Openfort/types.js';
+import { useOpenfort } from '../../components/Openfort/useOpenfort.js';
+
+/**
+ * Hook for signing messages with a confirmation modal (EVM only).
+ *
+ * Opens the Openfort "Sign message" screen, shows the message (or EIP-712 typed
+ * data) to the user, and resolves with the signature once they confirm. Rejects
+ * if the user dismisses the modal.
+ *
+ * @example
+ * ```tsx
+ * const { signMessage, signTypedData, isPending } = useSignMessage()
+ *
+ * const signature = await signMessage('I hereby vote for foobar')
+ *
+ * const typedSignature = await signTypedData({
+ *   domain: { name: 'Ether Mail', version: '1', chainId: 1, verifyingContract: '0x…' },
+ *   types: { Person: [{ name: 'name', type: 'string' }] },
+ *   primaryType: 'Person',
+ *   message: { name: 'Cow' },
+ * })
+ * ```
+ */
+function useSignMessage() {
+    const { setSignRequest, setRoute, setOpen } = useOpenfort();
+    const [isPending, setIsPending] = useState(false);
+    const request = useCallback((args) => new Promise((resolve, reject) => {
+        setIsPending(true);
+        // setOpen(true) resets route/history, so it MUST run before setRoute.
+        setOpen(true);
+        setSignRequest({
+            ...args,
+            resolve: (signature) => {
+                setIsPending(false);
+                resolve(signature);
+            },
+            reject: (reason) => {
+                setIsPending(false);
+                reject(reason);
+            },
+        });
+        setRoute(routes.SIGN_MESSAGE);
+    }), [setSignRequest, setRoute, setOpen]);
+    const signMessage = useCallback((message) => request({ kind: 'message', message }), [request]);
+    const signTypedData = useCallback((typedData) => request({ kind: 'typedData', typedData }), [request]);
+    return { signMessage, signTypedData, isPending };
+}
+
+export { useSignMessage };
+//# sourceMappingURL=useSignMessage.js.map

package/build/hooks/openfort/useSignMessage.js.map

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

package/build/hooks/openfort/useUI.d.ts

@@ -1,3 +1,4 @@
+import { type Asset } from '../../components/Openfort/types';
 /**
  * Hook for controlling Openfort UI modal and navigation
  *
@@ -35,7 +36,11 @@ export declare function useUI(): {
     openSwitchNetworks: () => void;
     openProviders: () => void;
     openWallets: () => void;
-    openSend: () => void;
+    openSend: (tx?: {
+        to: string;
+        amount: string;
+        asset?: Asset;
+    }) => void;
     openReceive: () => void;
     openFunding: () => void;
     openBuy: () => void;

package/build/hooks/openfort/useUI.js

@@ -68,7 +68,7 @@ function isAccountId(id) {
  */
 function useUI() {
     var _a;
-    const { open, setOpen, setRoute, setConnector, connector, chainType } = useOpenfort();
+    const { open, setOpen, setRoute, setConnector, setSendForm, connector, chainType } = useOpenfort();
     const { isLoading, user, needsRecovery, embeddedAccounts, activeEmbeddedAddress, embeddedState } = useOpenfortCore();
     const bridge = useEthereumBridge();
     const strategy = useConnectionStrategy();
@@ -100,6 +100,16 @@ function useUI() {
         else
             setRoute(routes.CONNECTED);
     }
+    /**
+     * Prefill the send form and jump straight to the confirmation (preview) screen
+     * for the active chain, skipping asset/amount/recipient entry.
+     */
+    const openSendPreview = (tx) => {
+        var _a;
+        setSendForm({ recipient: tx.to, amount: tx.amount, asset: (_a = tx.asset) !== null && _a !== void 0 ? _a : { type: 'native', balance: BigInt(0) } });
+        setOpen(true);
+        setRoute(chainType === ChainTypeEnum.SVM ? routes.SOL_SEND_CONFIRMATION : routes.SEND_CONFIRMATION);
+    };
     const gotoAndOpen = (route) => {
         const safeList = isConnected ? safeRoutes.connected : safeRoutes.disconnected;
         const fallback = isConnected ? routes.CONNECTED : routes.PROVIDERS;
@@ -123,7 +133,7 @@ function useUI() {
         openSwitchNetworks: () => gotoAndOpen(routes.ETH_SWITCH_NETWORK),
         openProviders: () => gotoAndOpen(routes.PROVIDERS),
         openWallets: () => gotoAndOpen({ route: routes.CONNECTORS, connectType: 'linkIfUserConnectIfNoUser' }),
-        openSend: () => gotoAndOpen(routes.SEND),
+        openSend: (tx) => tx ? openSendPreview(tx) : gotoAndOpen(routes.SEND),
         openReceive: () => gotoAndOpen(routes.RECEIVE),
         openFunding: () => gotoAndOpen(routes.DEPOSIT),
         openBuy: () => gotoAndOpen(routes.BUY),

package/build/hooks/openfort/useUI.js.map

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

package/build/index.d.ts

@@ -44,7 +44,7 @@ export { default as Avatar } from './components/Common/Avatar';
 export { default as ChainIcon } from './components/Common/Chain';
 export { OpenfortButton } from './components/ConnectButton';
 export { OpenfortProvider } from './components/Openfort/OpenfortProvider';
-export type { CustomizableRoutes, MultiChainAsset } from './components/Openfort/types';
+export type { CustomizableRoutes, MultiChainAsset, SignTypedDataPayload } from './components/Openfort/types';
 export { FundingMethod, LinkWalletOnSignUpOption, UIAuthProvider as AuthProvider } from './components/Openfort/types';
 export { embeddedWalletId } from './constants/openfort';
 export { OpenfortError, OpenfortReactErrorType, OpenfortReactErrorType as OpenfortErrorType, } from './core/errors';
@@ -64,6 +64,7 @@ export type { FundingSession, FundingTarget, PaymentMethod, PaymentMethodInput,
 export { useFunding } from './hooks/openfort/useFunding';
 export { useGrantPermissions } from './hooks/openfort/useGrantPermissions';
 export { useRevokePermissions } from './hooks/openfort/useRevokePermissions';
+export { useSignMessage } from './hooks/openfort/useSignMessage';
 export { useUI } from './hooks/openfort/useUI';
 export { useUser } from './hooks/openfort/useUser';
 export type { UserWallet } from './hooks/openfort/walletTypes';

package/build/index.js

@@ -17,6 +17,7 @@ export { use7702Authorization } from './hooks/openfort/use7702Authorization.js';
 export { useFunding } from './hooks/openfort/useFunding.js';
 export { useGrantPermissions } from './hooks/openfort/useGrantPermissions.js';
 export { useRevokePermissions } from './hooks/openfort/useRevokePermissions.js';
+export { useSignMessage } from './hooks/openfort/useSignMessage.js';
 export { useUI } from './hooks/openfort/useUI.js';
 export { useUser } from './hooks/openfort/useUser.js';
 export { invalidateBalance } from './hooks/useBalance.js';

package/build/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/localizations/locales/en-US.js

@@ -86,7 +86,7 @@ const enUS = {
     injectionScreen_notconnected_h1: `Login to {{ CONNECTORNAME }}`,
     injectionScreen_notconnected_p: `To continue, please login to your {{ CONNECTORNAME }} extension.`,
     profileScreen_heading: 'Connected',
-    buyScreen_heading: 'Add funds',
+    buyScreen_heading: 'Add funds from card',
     buyScreen_subheading: 'Select an amount and token to top up.',
     buyScreen_payWithCard_title: 'Pay with card',
     buyScreen_payWithCard_description: 'Use Stripe or Google Pay for a quick card purchase.',

package/build/utils/rpc.d.ts

@@ -6,6 +6,12 @@
  */
 import type { Chain } from 'viem';
 import type { SolanaCluster } from '../solana/types';
+/**
+ * Whether an EVM chain id is a testnet. Reads viem's chain metadata (`testnet`)
+ * for the chains the SDK bundles, falling back to a small extra set. Use this to
+ * key behaviour off the wallet's active chain rather than the publishable key.
+ */
+export declare function isTestnetChainId(chainId: number): boolean;
 export declare function getDefaultEthereumRpcUrl(chainId: number): string;
 /**
  * Get default Solana RPC URL for a cluster.