@openfort/react 0.3.1 → 1.0.0

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

@@ -0,0 +1,70 @@
+import { jsx, jsxs } from 'react/jsx-runtime';
+import { ChainTypeEnum } from '@openfort/openfort-js';
+import { embeddedWalletId } from '../../../constants/openfort.js';
+import { useEthereumEmbeddedWallet } from '../../../ethereum/hooks/useEthereumEmbeddedWallet.js';
+import { toSolanaUserWallet } from '../../../hooks/openfort/walletTypes.js';
+import { useResolvedIdentity } from '../../../hooks/useResolvedIdentity.js';
+import { useOpenfortCore } from '../../../openfort/useOpenfort.js';
+import { useSolanaEmbeddedWallet } from '../../../solana/hooks/useSolanaEmbeddedWallet.js';
+import 'detect-browser';
+import 'react';
+import { truncateEthAddress } from '../../../utils/format.js';
+import { walletConfigs } from '../../../wallets/walletConfigs.js';
+import Button from '../../Common/Button/index.js';
+import { ModalHeading } from '../../Common/Modal/styles.js';
+import { WalletRecoveryIcon } from '../../Common/WalletRecoveryIcon/index.js';
+import { recoverRoute } from '../../Openfort/routeHelpers.js';
+import { routes } from '../../Openfort/types.js';
+import { useOpenfort } from '../../Openfort/useOpenfort.js';
+import { PageContent } from '../../PageContent/index.js';
+import { ProvidersButton, ProviderLabel, ProviderIcon } from '../Providers/styles.js';
+
+function WalletRow({ chainType, wallet, }) {
+    var _a;
+    const { setRoute } = useOpenfort();
+    const identity = useResolvedIdentity({
+        address: wallet.address,
+        chainType,
+        enabled: !!wallet.address,
+    });
+    const display = chainType === ChainTypeEnum.SVM
+        ? wallet.address.length > 12
+            ? `${wallet.address.slice(0, 4)}...${wallet.address.slice(-4)}`
+            : wallet.address
+        : identity.status === 'success'
+            ? ((_a = identity.name) !== null && _a !== void 0 ? _a : truncateEthAddress(wallet.address))
+            : truncateEthAddress(wallet.address);
+    const walletIcon = () => {
+        var _a;
+        if (wallet.id === embeddedWalletId) {
+            return jsx(WalletRecoveryIcon, { recovery: wallet.recoveryMethod });
+        }
+        if (chainType === ChainTypeEnum.EVM) {
+            const walletConfig = (_a = Object.entries(walletConfigs).find(([key]) => key.includes(wallet.id))) === null || _a === void 0 ? void 0 : _a[1];
+            if (walletConfig)
+                return walletConfig.icon;
+        }
+        return null;
+    };
+    const handleClick = () => {
+        if (chainType === ChainTypeEnum.SVM) {
+            const walletForRoute = toSolanaUserWallet(wallet);
+            setRoute(recoverRoute(chainType, walletForRoute));
+            return;
+        }
+        setRoute(recoverRoute(chainType, wallet));
+    };
+    return (jsx(ProvidersButton, { children: jsxs(Button, { onClick: handleClick, children: [jsx(ProviderLabel, { children: display }), jsx(ProviderIcon, { children: walletIcon() })] }) }));
+}
+function SelectWalletToRecover() {
+    const { chainType } = useOpenfortCore();
+    const ethereumWallet = useEthereumEmbeddedWallet();
+    const solanaWallet = useSolanaEmbeddedWallet();
+    const embeddedWallet = chainType === ChainTypeEnum.EVM ? ethereumWallet : solanaWallet;
+    const wallets = embeddedWallet.wallets;
+    const list = wallets.map((wallet) => jsx(WalletRow, { chainType: chainType, wallet: wallet }, wallet.id));
+    return (jsxs(PageContent, { onBack: routes.PROVIDERS, logoutOnBack: true, children: [jsx(ModalHeading, { children: "Select a wallet to recover" }), list] }));
+}
+
+export { SelectWalletToRecover as default };
+//# sourceMappingURL=index.js.map

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

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

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

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

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

@@ -0,0 +1,88 @@
+import { jsxs, jsx } from 'react/jsx-runtime';
+import { useMemo } from 'react';
+import { parseUnits, isAddress, formatUnits } from 'viem';
+import { useEthereumWalletAssets } from '../../../ethereum/hooks/useEthereumWalletAssets.js';
+import Button from '../../Common/Button/index.js';
+import { Arrow, ArrowChevron } from '../../Common/Button/styles.js';
+import Input from '../../Common/Input/index.js';
+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 { isSameToken, sanitizeForParsing, formatBalance, sanitizeAmountInput } from './utils.js';
+
+const EthereumSend = () => {
+    var _a, _b, _c, _d;
+    const { sendForm, setSendForm, setRoute } = useOpenfort();
+    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];
+    const selectedToken = selectedTokenOption !== null && selectedTokenOption !== void 0 ? selectedTokenOption : sendForm.asset;
+    const selectedBalanceValue = selectedTokenOption === null || selectedTokenOption === void 0 ? void 0 : selectedTokenOption.balance;
+    const selectedDecimalsValue = selectedToken.type === 'erc20' ? ((_b = (_a = selectedToken.metadata) === null || _a === void 0 ? void 0 : _a.decimals) !== null && _b !== void 0 ? _b : 18) : 18;
+    const selectedSymbol = (_d = (_c = selectedToken.metadata) === null || _c === void 0 ? void 0 : _c.symbol) !== null && _d !== void 0 ? _d : '';
+    const parsedAmount = useMemo(() => {
+        const rawAmount = sanitizeForParsing(sendForm.amount);
+        if (!rawAmount)
+            return null;
+        try {
+            return parseUnits(rawAmount, selectedDecimalsValue);
+        }
+        catch (_error) {
+            return null;
+        }
+    }, [sendForm.amount, selectedDecimalsValue]);
+    const recipientValid = isAddress(sendForm.recipient);
+    const insufficientBalance = parsedAmount !== null && selectedBalanceValue !== undefined ? parsedAmount > selectedBalanceValue : false;
+    const hasAmount = parsedAmount !== null && parsedAmount > BigInt(0);
+    const amountValid = hasAmount && !insufficientBalance;
+    const canProceed = recipientValid && amountValid;
+    const handleSubmit = (event) => {
+        event.preventDefault();
+        if (!canProceed)
+            return;
+        const normalized = sanitizeForParsing(sendForm.amount);
+        if (!normalized)
+            return;
+        setSendForm((prev) => ({
+            ...prev,
+            amount: normalized,
+            asset: prev.asset,
+        }));
+        setRoute(routes.SEND_CONFIRMATION);
+    };
+    const handleRecipientChange = (event) => {
+        setSendForm((prev) => ({
+            ...prev,
+            recipient: event.target.value,
+        }));
+    };
+    const handleAmountChange = (event) => {
+        const raw = sanitizeAmountInput(event.target.value);
+        if (raw === '' || /^[0-9]*\.?[0-9]*$/.test(raw)) {
+            setSendForm((prev) => ({
+                ...prev,
+                amount: raw,
+            }));
+        }
+    };
+    const handleMax = () => {
+        if (!selectedBalanceValue)
+            return;
+        const maxAmount = formatUnits(selectedBalanceValue, selectedDecimalsValue);
+        setSendForm((prev) => ({
+            ...prev,
+            amount: maxAmount,
+        }));
+    };
+    const handleOpenTokenSelector = () => {
+        setRoute(routes.SEND_TOKEN_SELECT);
+    };
+    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" })] })] }));
+};
+
+export { EthereumSend };
+//# sourceMappingURL=EthereumSend.js.map

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

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

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

@@ -0,0 +1 @@
+export declare function SolanaSend(): import("react/jsx-runtime").JSX.Element;

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

@@ -0,0 +1,93 @@
+import { jsxs, jsx } from 'react/jsx-runtime';
+import { useCallback } from 'react';
+import { fetchSolanaBalance } from '../../../hooks/useBalance.js';
+import { useAsyncData } from '../../../shared/hooks/useAsyncData.js';
+import { isValidSolanaAddress } from '../../../shared/utils/validation.js';
+import { BASE_FEE_LAMPORTS, RENT_EXEMPT_MINIMUM_LAMPORTS } from '../../../solana/constants.js';
+import { useSolanaEmbeddedWallet } from '../../../solana/hooks/useSolanaEmbeddedWallet.js';
+import { solToLamports, formatSol } from '../../../solana/hooks/utils.js';
+import { useSolanaContext } from '../../../solana/SolanaContext.js';
+import { logger } from '../../../utils/logger.js';
+import Button from '../../Common/Button/index.js';
+import Input from '../../Common/Input/index.js';
+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, AmountInputWrapper, MaxButton, HelperText, ErrorText } from './styles.js';
+import { sanitizeForParsing, sanitizeAmountInput } from './utils.js';
+
+const RENT_EXEMPT_LAMPORTS = RENT_EXEMPT_MINIMUM_LAMPORTS;
+function SolanaSend() {
+    var _a, _b, _c;
+    const { rpcUrl } = useSolanaContext();
+    const { sendForm, setSendForm, setRoute } = useOpenfort();
+    const wallet = useSolanaEmbeddedWallet();
+    const recipient = sendForm.recipient;
+    const amount = sendForm.amount;
+    const walletAddress = wallet.status === 'connected' ? (_a = wallet.activeWallet) === null || _a === void 0 ? void 0 : _a.address : undefined;
+    const provider = wallet.status === 'connected' ? wallet.provider : null;
+    const balanceResult = useAsyncData({
+        queryKey: ['solana-balance', walletAddress, rpcUrl],
+        queryFn: async () => {
+            if (!walletAddress || !rpcUrl)
+                return null;
+            try {
+                const result = await fetchSolanaBalance(walletAddress, rpcUrl, 'confirmed');
+                return { value: result.value };
+            }
+            catch (error) {
+                logger.error('Failed to fetch Solana balance:', error);
+                return null;
+            }
+        },
+        enabled: Boolean(walletAddress && rpcUrl),
+    });
+    const balanceLamports = (_c = (_b = balanceResult.data) === null || _b === void 0 ? void 0 : _b.value) !== null && _c !== void 0 ? _c : BigInt(0);
+    const recipientValid = recipient.length > 0 && isValidSolanaAddress(recipient);
+    const amountNum = amount === '' || amount === '.' ? null : parseFloat(amount);
+    const amountLamports = amountNum !== null && !Number.isNaN(amountNum) && amountNum > 0 ? solToLamports(amountNum) : null;
+    const insufficientBalance = amountLamports !== null && balanceLamports !== undefined ? amountLamports > balanceLamports : false;
+    const belowRentExempt = amountLamports !== null && balanceLamports !== undefined
+        ? balanceLamports - amountLamports < RENT_EXEMPT_LAMPORTS
+        : false;
+    const hasAmount = amountLamports !== null && amountLamports > BigInt(0);
+    const amountValid = hasAmount && !insufficientBalance && !belowRentExempt;
+    const maxLamports = balanceLamports > BASE_FEE_LAMPORTS ? balanceLamports - BASE_FEE_LAMPORTS - RENT_EXEMPT_LAMPORTS : BigInt(0);
+    const maxLamportsSafe = maxLamports > BigInt(0) ? maxLamports : BigInt(0);
+    const canProceed = recipientValid && amountValid && !!provider;
+    const handleMax = useCallback(() => {
+        if (maxLamportsSafe <= BigInt(0))
+            return;
+        setSendForm((prev) => ({ ...prev, amount: formatSol(maxLamportsSafe, 9) }));
+    }, [maxLamportsSafe, setSendForm]);
+    const handleSubmit = (event) => {
+        event.preventDefault();
+        if (!canProceed || !amountLamports || amountLamports <= BigInt(0))
+            return;
+        const normalized = sanitizeForParsing(amount);
+        if (!normalized)
+            return;
+        setSendForm((prev) => ({
+            ...prev,
+            amount: normalized,
+            recipient,
+            asset: prev.asset,
+        }));
+        setRoute(routes.SOL_SEND_CONFIRMATION);
+    };
+    const handleRecipientChange = (e) => {
+        setSendForm((prev) => ({ ...prev, recipient: e.target.value }));
+    };
+    const handleAmountChange = (e) => {
+        const raw = sanitizeAmountInput(e.target.value);
+        if (raw === '' || /^[0-9]*\.?[0-9]*$/.test(raw)) {
+            setSendForm((prev) => ({ ...prev, amount: raw }));
+        }
+    };
+    const availableLabel = balanceResult.data != null ? formatSol(balanceLamports) : '--';
+    return (jsxs(PageContent, { onBack: routes.SOL_CONNECTED, children: [jsx(ModalHeading, { children: "Send SOL" }), jsxs(Form, { onSubmit: handleSubmit, children: [jsxs(Field, { children: [jsx(FieldLabel, { children: "Amount" }), jsxs(AmountInputWrapper, { children: [jsx(Input, { placeholder: "0.00", value: amount, onChange: handleAmountChange, inputMode: "decimal", autoComplete: "off", style: { paddingRight: '86px' } }), jsx(MaxButton, { type: "button", onClick: handleMax, disabled: maxLamportsSafe <= BigInt(0), children: "Max" })] }), jsxs(HelperText, { children: ["Available: ", availableLabel, " SOL"] }), amount && amountNum !== null && Number.isNaN(amountNum) && jsx(ErrorText, { children: "Enter a valid amount." }), insufficientBalance && jsx(ErrorText, { children: "Insufficient balance for this transfer." }), belowRentExempt && jsx(ErrorText, { children: "Leave enough for rent-exempt minimum (~0.00089 SOL)." })] }), jsxs(Field, { children: [jsx(FieldLabel, { children: "Recipient address" }), jsx(Input, { placeholder: "Base58 address...", value: recipient, onChange: handleRecipientChange, autoComplete: "off" }), recipient && !recipientValid && jsx(ErrorText, { children: "Enter a valid Solana address." })] }), jsx(Button, { variant: "primary", disabled: !canProceed, type: "submit", children: "Review transfer" })] })] }));
+}
+
+export { SolanaSend };
+//# sourceMappingURL=SolanaSend.js.map

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

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

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

@@ -1,2 +1,8 @@
-declare const Send: () => import("react/jsx-runtime").JSX.Element;
+/**
+ * Send page router
+ *
+ * Picks EthereumSend or SolanaSend based on chainType.
+ */
+import type React from 'react';
+declare const Send: React.FC;
 export default Send;

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

@@ -0,0 +1,18 @@
+import { jsx } from 'react/jsx-runtime';
+import { ChainTypeEnum } from '@openfort/openfort-js';
+import { useOpenfortCore } from '../../../openfort/useOpenfort.js';
+import { EthereumSend } from './EthereumSend.js';
+import { SolanaSend } from './SolanaSend.js';
+
+const SEND_REGISTRY = {
+    [ChainTypeEnum.EVM]: EthereumSend,
+    [ChainTypeEnum.SVM]: SolanaSend,
+};
+const Send = () => {
+    const { chainType } = useOpenfortCore();
+    const Component = SEND_REGISTRY[chainType];
+    return Component ? jsx(Component, {}) : jsx(EthereumSend, {});
+};
+
+export { Send as default };
+//# sourceMappingURL=index.js.map

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

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

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

@@ -0,0 +1,112 @@
+import styled from '../../../styles/styled/index.js';
+
+const Form = styled.form `
+  display: flex;
+  flex-direction: column;
+  gap: 20px;
+  margin-top: 20px;
+`;
+const Field = styled.div `
+  display: flex;
+  flex-direction: column;
+  text-align: left;
+`;
+const FieldLabel = styled.span `
+  font-size: 14px;
+  font-weight: 600;
+  color: var(--ck-body-color);
+`;
+const TokenSelectorButton = styled.button `
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  width: 100%;
+  margin-top: 12px;
+  padding: 12px 16px;
+  border-radius: var(--ck-secondary-button-border-radius);
+  border: 1px solid var(--ck-body-divider);
+  background: var(--ck-secondary-button-background);
+  color: var(--ck-body-color);
+  cursor: pointer;
+  transition: background 150ms ease, border-color 150ms ease, color 150ms ease;
+  text-align: left;
+
+  &:hover {
+    background: var(--ck-secondary-button-hover-background);
+    border-color: var(--ck-body-color-muted);
+  }
+`;
+const TokenSelectorContent = styled.div `
+  display: flex;
+  flex-direction: column;
+  gap: 2px;
+  overflow: hidden;
+`;
+const TokenSelectorValue = styled.span `
+  font-size: ${(props) => (props.$primary ? '15px' : '13px')};
+  font-weight: ${(props) => (props.$primary ? 600 : 500)};
+  color: ${(props) => {
+    if (props.$primary)
+        return 'var(--ck-body-color)';
+    if (props.$muted)
+        return 'var(--ck-body-color-muted)';
+    return 'var(--ck-body-color-muted)';
+}};
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+`;
+const TokenSelectorRight = styled.div `
+  display: flex;
+  align-items: center;
+  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%);
+  padding: 6px 14px;
+  border-radius: 16px;
+  border: 1px solid var(--ck-body-divider);
+  background: var(--ck-body-background);
+  color: var(--ck-body-color);
+  font-size: 12px;
+  font-weight: 600;
+  cursor: pointer;
+  transition: background 150ms ease, color 150ms ease, border-color 150ms ease;
+
+  &:hover {
+    background: var(--ck-secondary-button-hover-background);
+  }
+
+  &:disabled {
+    opacity: 0.5;
+    cursor: not-allowed;
+    background: var(--ck-body-background-secondary);
+  }
+`;
+const HelperText = styled.span `
+  display: block;
+  margin-top: 8px;
+  font-size: 13px;
+  color: var(--ck-body-color-muted);
+`;
+const ErrorText = styled.span `
+  display: block;
+  margin-top: 6px;
+  font-size: 13px;
+  color: var(--ck-body-color-danger);
+`;
+
+export { AmountInputWrapper, ErrorText, Field, FieldLabel, Form, HelperText, MaxButton, TokenSelectorButton, TokenSelectorContent, TokenSelectorRight, TokenSelectorValue };
+//# sourceMappingURL=styles.js.map

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

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

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

@@ -1,5 +1,5 @@
 import type { Asset } from '../../Openfort/types';
-export declare const sanitizeAmountInput: (value: string) => string;
+export declare function sanitizeAmountInput(value: string): string;
 export declare const sanitizeForParsing: (value: string) => string | null;
 export declare const formatBalance: (value: bigint | undefined, decimals: number) => string;
 export declare const formatBalanceWithSymbol: (value: bigint | undefined, decimals: number, symbol: string) => string;

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

@@ -0,0 +1,63 @@
+import { formatUnits } from 'viem';
+
+function sanitizeAmountInput(value) {
+    const normalized = value.replace(/,/g, '.');
+    const trimmed = normalized.trim();
+    if (trimmed === '' || trimmed === '.')
+        return trimmed;
+    const match = trimmed.match(/^([0-9]*)(\.?)([0-9]*)$/);
+    return match ? match[1] + match[2] + match[3] : '';
+}
+const sanitizeForParsing = (value) => {
+    const trimmed = value.trim();
+    if (!trimmed)
+        return null;
+    if (trimmed === '.')
+        return null;
+    let normalized = trimmed;
+    if (normalized.startsWith('.'))
+        normalized = `0${normalized}`;
+    if (normalized.endsWith('.'))
+        normalized = normalized.slice(0, -1);
+    if (!normalized)
+        return null;
+    return normalized;
+};
+const formatBalance = (value, decimals) => {
+    if (value === undefined)
+        return '--';
+    const formatted = formatUnits(value, decimals);
+    const [integer, fraction] = formatted.split('.');
+    if (!fraction)
+        return integer;
+    const trimmedFraction = fraction.replace(/0+$/, '');
+    if (!trimmedFraction)
+        return integer;
+    return `${integer}.${trimmedFraction.slice(0, 6)}`;
+};
+const formatBalanceWithSymbol = (value, decimals, symbol) => {
+    const balance = formatBalance(value, decimals);
+    return balance === '--' ? '--' : `${balance} ${symbol}`;
+};
+const isSameToken = (a, b) => {
+    if (a.type !== b.type)
+        return false;
+    if (a.type === 'native')
+        return true;
+    // At this point, a.type === 'erc20' and b.type === 'erc20'
+    if (a.type === 'erc20' && b.type === 'erc20') {
+        return a.address.toLowerCase() === b.address.toLowerCase();
+    }
+    return false;
+};
+const getAssetSymbol = (asset) => {
+    var _a;
+    return ((_a = asset.metadata) === null || _a === void 0 ? void 0 : _a.symbol) || (asset.type === 'native' ? 'ETH' : 'UNKNOWN');
+};
+const getAssetDecimals = (asset) => {
+    var _a, _b;
+    return (_b = (_a = asset.metadata) === null || _a === void 0 ? void 0 : _a.decimals) !== null && _b !== void 0 ? _b : 18;
+};
+
+export { formatBalance, formatBalanceWithSymbol, getAssetDecimals, getAssetSymbol, isSameToken, sanitizeAmountInput, sanitizeForParsing };
+//# sourceMappingURL=utils.js.map

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

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

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

@@ -0,0 +1,66 @@
+import { jsx, Fragment, jsxs } from 'react/jsx-runtime';
+import { createPublicClient, http, formatUnits } from 'viem';
+import { useEthereumWalletAssets } from '../../../ethereum/hooks/useEthereumWalletAssets.js';
+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 { formatBalance } from '../Send/utils.js';
+import { InfoIconWrapper } from './styles.js';
+
+const InfoIcon = () => (jsxs("svg", { "aria-hidden": "true", width: "14", height: "14", viewBox: "0 0 14 14", fill: "none", xmlns: "http://www.w3.org/2000/svg", children: [jsx("circle", { cx: "7", cy: "7", r: "6", stroke: "currentColor", strokeWidth: "1.5" }), jsx("path", { d: "M7 10V6.5M7 4.5H7.005", stroke: "currentColor", strokeWidth: "1.5", strokeLinecap: "round" })] }));
+const usdFormatter = new Intl.NumberFormat('en-US', {
+    style: 'currency',
+    currency: 'USD',
+    minimumFractionDigits: 2,
+    maximumFractionDigits: 4,
+});
+const EstimatedFees = ({ account, to, value, data, chainId, nativeSymbol, enabled = true, hideInfoIcon = false, }) => {
+    var _a, _b, _c;
+    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;
+            if (!account || !to || !chainId)
+                return null;
+            try {
+                const rpcUrl = getDefaultEthereumRpcUrl(chainId);
+                const publicClient = createPublicClient({ transport: http(rpcUrl) });
+                const [gasEstimate, feesPerGas] = await Promise.all([
+                    publicClient.estimateGas({
+                        account,
+                        to,
+                        value: value !== null && value !== void 0 ? value : BigInt(0),
+                        data: data !== null && data !== void 0 ? data : '0x',
+                    }),
+                    publicClient.estimateFeesPerGas(),
+                ]);
+                const estimatedCost = gasEstimate * ((_a = feesPerGas.maxFeePerGas) !== null && _a !== void 0 ? _a : BigInt(0));
+                return { estimatedCost, gasLimit: gasEstimate };
+            }
+            catch (error) {
+                logger.error('Failed to estimate gas:', error);
+                return null;
+            }
+        },
+        enabled: enabled && !!account && !!to && !!chainId,
+    });
+    // Handle query states
+    if (!gas.data || gas.error) {
+        return jsx(Fragment, { children: "--" });
+    }
+    const gasCost = gas.data.estimatedCost;
+    const gasUnits = gas.data.gasLimit;
+    if (pricePerToken !== undefined) {
+        const gasCostInEth = Number.parseFloat(formatUnits(gasCost, 18));
+        const gasCostInUsd = gasCostInEth * pricePerToken;
+        return (jsxs(Fragment, { children: ["\u2248 ", usdFormatter.format(gasCostInUsd), !hideInfoIcon && (jsx(Tooltip, { message: `${gasUnits.toString()} gas units (paid in ${nativeSymbol})`, delay: 0.2, children: jsx(InfoIconWrapper, { children: jsx(InfoIcon, {}) }) }))] }));
+    }
+    // Fallback to native token if price not available
+    return (jsxs(Fragment, { children: ["\u2248 ", formatBalance(gasCost, 18), " ", nativeSymbol, !hideInfoIcon && (jsx(Tooltip, { message: `${gasUnits.toString()} gas units`, delay: 0.2, children: jsx(InfoIconWrapper, { children: jsx(InfoIcon, {}) }) }))] }));
+};
+
+export { EstimatedFees };
+//# sourceMappingURL=EstimatedFees.js.map

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

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