@openfort/react 1.1.3 → 1.2.0

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

@@ -1,7 +1,8 @@
 /**
  * Send page router
  *
- * Picks EthereumSend or SolanaSend based on chainType.
+ * Renders the EVM send form. Solana is reached via the dedicated `sol:send`
+ * route (registered in ConnectModal), so it isn't in this shared registry.
  */
 import type React from 'react';
 declare const Send: React.FC;

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

@@ -5,7 +5,6 @@ import { EthereumSend } from './EthereumSend.js';
 
 const SEND_REGISTRY = {
     [ChainTypeEnum.EVM]: EthereumSend,
-    // [ChainTypeEnum.SVM]: SolanaSend,
 };
 const Send = () => {
     const { chainType } = useOpenfortCore();

package/build/components/Pages/Send/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/EstimatedFees.js

@@ -5,6 +5,7 @@ import { useAsyncData } from '../../../shared/hooks/useAsyncData.js';
 import { logger } from '../../../utils/logger.js';
 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';
 
@@ -17,16 +18,17 @@ const usdFormatter = new Intl.NumberFormat('en-US', {
 });
 const EstimatedFees = ({ account, to, value, data, chainId, nativeSymbol, enabled = true, hideInfoIcon = false, }) => {
     var _a, _b, _c;
+    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;
     const gas = useAsyncData({
         queryKey: ['gas-estimate', account, to, value, data, chainId],
         queryFn: async () => {
-            var _a;
+            var _a, _b, _c, _d;
             if (!account || !to || !chainId)
                 return null;
             try {
-                const rpcUrl = getDefaultEthereumRpcUrl(chainId);
+                const rpcUrl = (_c = (_b = (_a = walletConfig === null || walletConfig === void 0 ? void 0 : walletConfig.ethereum) === null || _a === void 0 ? void 0 : _a.rpcUrls) === null || _b === void 0 ? void 0 : _b[chainId]) !== null && _c !== void 0 ? _c : getDefaultEthereumRpcUrl(chainId);
                 const publicClient = createPublicClient({ transport: http(rpcUrl) });
                 const [gasEstimate, feesPerGas] = await Promise.all([
                     publicClient.estimateGas({
@@ -37,7 +39,7 @@ const EstimatedFees = ({ account, to, value, data, chainId, nativeSymbol, enable
                     }),
                     publicClient.estimateFeesPerGas(),
                 ]);
-                const estimatedCost = gasEstimate * ((_a = feesPerGas.maxFeePerGas) !== null && _a !== void 0 ? _a : BigInt(0));
+                const estimatedCost = gasEstimate * ((_d = feesPerGas.maxFeePerGas) !== null && _d !== void 0 ? _d : BigInt(0));
                 return { estimatedCost, gasLimit: gasEstimate };
             }
             catch (error) {

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.d.ts

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

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

@@ -0,0 +1,77 @@
+import { jsxs, jsx } from 'react/jsx-runtime';
+import { ChainTypeEnum } from '@openfort/openfort-js';
+import { useState, useEffect } from 'react';
+import { getExplorerUrl } from '../../../shared/utils/explorer.js';
+import { useSolanaEmbeddedWallet } from '../../../solana/hooks/useSolanaEmbeddedWallet.js';
+import { 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, GaslessRow, GaslessToggle, ErrorContainer, ErrorTitle, ErrorMessage } from './styles.js';
+
+const SolanaSendConfirmation = () => {
+    var _a;
+    const { sendForm, setRoute, publishableKey, triggerResize } = useOpenfort();
+    const wallet = useSolanaEmbeddedWallet();
+    const address = wallet.status === 'connected' ? wallet.address : undefined;
+    const provider = wallet.status === 'connected' ? wallet.provider : undefined;
+    const cluster = (_a = wallet.cluster) !== null && _a !== void 0 ? _a : 'devnet';
+    const rpcUrl = wallet.rpcUrl;
+    const recipient = sendForm.recipient;
+    const amount = sendForm.amount;
+    const [gasless, setGasless] = useState(false);
+    const [isLoading, setIsLoading] = useState(false);
+    const [signature, setSignature] = useState(null);
+    const [error, setError] = useState(null);
+    // Re-measure the modal when the result/error appears.
+    useEffect(() => {
+        const id = setTimeout(triggerResize, 10);
+        return () => clearTimeout(id);
+    }, [signature, error, isLoading, triggerResize]);
+    const handleConfirm = async () => {
+        if (!address || !provider || isLoading)
+            return;
+        const amountSol = Number(amount);
+        if (!Number.isFinite(amountSol) || amountSol <= 0) {
+            setError('Enter a valid amount.');
+            return;
+        }
+        if (!gasless && !rpcUrl) {
+            setError('No Solana RPC is configured for this network.');
+            return;
+        }
+        setIsLoading(true);
+        setError(null);
+        try {
+            const sig = gasless
+                ? await sendSolGasless({ from: address, to: recipient, amountSol, provider, cluster, publishableKey })
+                : await sendSol({ from: address, to: recipient, amountSol, provider, rpcUrl: rpcUrl !== null && rpcUrl !== void 0 ? rpcUrl : '' });
+            setSignature(sig);
+        }
+        catch (err) {
+            setError(err instanceof Error ? err.message : 'Transaction failed');
+        }
+        finally {
+            setIsLoading(false);
+        }
+    };
+    const handleFinish = () => setRoute(routes.SOL_CONNECTED);
+    const handleViewExplorer = () => {
+        if (!signature)
+            return;
+        window.open(getExplorerUrl(ChainTypeEnum.SVM, { txHash: signature, cluster }), '_blank', 'noopener,noreferrer');
+    };
+    if (signature) {
+        return (jsxs(PageContent, { children: [jsx(Loader, { isSuccess: true, header: "Transfer sent", description: `${amount} SOL 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', " SOL"] })] }), 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) })) : ('--') })] })] }), jsxs(GaslessRow, { children: [jsxs("div", { children: [jsx(SummaryLabel, { children: "Sponsor network fee" }), jsx("div", { style: { fontSize: 12, color: 'var(--ck-body-color-muted)', marginTop: 2 }, children: "Pay no SOL fee (requires a sponsorship policy)" })] }), jsx(GaslessToggle, { type: "button", role: "switch", "aria-checked": gasless, "aria-label": "Sponsor network fee", "$on": gasless, onClick: () => setGasless((v) => !v), disabled: isLoading, children: jsx("span", {}) })] }), 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 };
+//# sourceMappingURL=SolanaSendConfirmation.js.map

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

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

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

@@ -21,7 +21,7 @@ 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, getAssetSymbol, getAssetDecimals } from '../Send/utils.js';
+import { sanitizeForParsing, isSameToken, getAssetDecimals, getAssetSymbol } from '../Send/utils.js';
 import { EstimatedFees } from './EstimatedFees.js';
 import { ButtonRow, SummaryList, SummaryItem, SummaryLabel, AmountValue, AddressValue, FeesValue, CheckIconWrapper, StatusMessage, ErrorContainer, ErrorTitle, ErrorMessage, ErrorAction } from './styles.js';
 
@@ -69,10 +69,11 @@ const SendConfirmation = () => {
     const erc20Balance = useAsyncData({
         queryKey: ['erc20-balance', address, token.type === 'erc20' ? token.address : null, chainId],
         queryFn: async () => {
+            var _a, _b, _c, _d;
             if (!isErc20 || !address || !chainId)
                 return { value: BigInt(0), decimals: 18, symbol: 'ERC20' };
             try {
-                const rpcUrl = getDefaultEthereumRpcUrl(chainId);
+                const rpcUrl = (_c = (_b = (_a = walletConfig === null || walletConfig === void 0 ? void 0 : walletConfig.ethereum) === null || _a === void 0 ? void 0 : _a.rpcUrls) === null || _b === void 0 ? void 0 : _b[chainId]) !== null && _c !== void 0 ? _c : getDefaultEthereumRpcUrl(chainId);
                 const publicClient = createPublicClient({ transport: http(rpcUrl) });
                 const balance = await publicClient.readContract({
                     address: token.address,
@@ -80,7 +81,7 @@ const SendConfirmation = () => {
                     functionName: 'balanceOf',
                     args: [address],
                 });
-                return { value: balance, decimals: 18, symbol: getAssetSymbol(token) };
+                return { value: balance, decimals: (_d = getAssetDecimals(token)) !== null && _d !== void 0 ? _d : 18, symbol: getAssetSymbol(token) };
             }
             catch (error) {
                 logger.error('Failed to fetch ERC20 balance:', error);

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

@@ -16,3 +16,8 @@ export declare const ErrorContainer: import("styled-components").StyledComponent
 export declare const ErrorTitle: import("styled-components").StyledComponent<"div", any, {}, never>;
 export declare const ErrorMessage: import("styled-components").StyledComponent<"div", any, {}, never>;
 export declare const ErrorAction: import("styled-components").StyledComponent<"div", any, {}, never>;
+export declare const GaslessRow: import("styled-components").StyledComponent<"div", any, {}, never>;
+/** A minimal theme-aware switch for the Solana "sponsor fee" toggle. */
+export declare const GaslessToggle: import("styled-components").StyledComponent<"button", any, {
+    $on?: boolean;
+}, never>;

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

@@ -124,6 +124,44 @@ const ErrorAction = styled.div `
   color: var(--ck-body-color-muted);
   line-height: 1.4;
 `;
+const GaslessRow = styled.div `
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 12px;
+  margin: 4px 0 8px;
+  text-align: left;
+`;
+/** A minimal theme-aware switch for the Solana "sponsor fee" toggle. */
+const GaslessToggle = styled.button `
+  position: relative;
+  flex-shrink: 0;
+  width: 40px;
+  height: 24px;
+  border-radius: 999px;
+  border: 1px solid var(--ck-body-divider);
+  background: ${(props) => (props.$on ? 'var(--ck-body-color-valid, #22c55e)' : 'var(--ck-body-background-secondary)')};
+  cursor: pointer;
+  transition: background 150ms ease;
+  padding: 0;
+
+  &:disabled {
+    opacity: 0.5;
+    cursor: not-allowed;
+  }
+
+  > span {
+    position: absolute;
+    top: 50%;
+    left: ${(props) => (props.$on ? '18px' : '2px')};
+    transform: translateY(-50%);
+    width: 18px;
+    height: 18px;
+    border-radius: 50%;
+    background: #fff;
+    transition: left 150ms ease;
+  }
+`;
 
-export { AddressValue, AmountValue, ButtonRow, CheckIconWrapper, ErrorAction, ErrorContainer, ErrorMessage, ErrorTitle, FeesValue, InfoIconWrapper, StatusMessage, SummaryItem, SummaryLabel, SummaryList };
+export { AddressValue, AmountValue, ButtonRow, CheckIconWrapper, ErrorAction, ErrorContainer, ErrorMessage, ErrorTitle, FeesValue, GaslessRow, GaslessToggle, InfoIconWrapper, 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/constants/logos.js

@@ -7,6 +7,7 @@ const TOKEN_LOGO = {
     TBNB: `${TW}/smartchain/info/logo.png`,
     MATIC: `${TW}/polygon/info/logo.png`,
     POL: `${TW}/polygon/info/logo.png`,
+    SOL: `${TW}/solana/info/logo.png`,
     AVAX: `${TW}/avalanchec/info/logo.png`,
     FTM: `${TW}/fantom/info/logo.png`,
     CELO: `${TW}/celo/info/logo.png`,

package/build/constants/logos.js.map

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