soso-widget
Version:
LI.FI Widget for cross-chain bridging and swapping. It will drive your multi-chain strategy and attract new users from everywhere.
18 lines • 1.28 kB
JavaScript
import { jsxs as _jsxs, jsx as _jsx } from "react/jsx-runtime";
import { Box, Tooltip, Typography } from '@mui/material';
import { useTranslation } from 'react-i18next';
import { formatUnits } from 'viem';
export const FeeBreakdownTooltip = ({ gasCosts, feeCosts, children, }) => {
const { t } = useTranslation();
return (_jsx(Tooltip, { title: _jsxs(Box, { children: [gasCosts?.length ? (_jsxs(Box, { children: [t('main.fees.network'), getFeeBreakdownTypography(gasCosts, t)] })) : null, feeCosts?.length ? (_jsxs(Box, { sx: {
mt: 0.5,
}, children: [t('main.fees.provider'), getFeeBreakdownTypography(feeCosts, t)] })) : null] }), sx: { cursor: 'help' }, children: children }));
};
export const getFeeBreakdownTypography = (fees, t) => fees.map((fee, index) => (_jsxs(Typography, { color: "inherit", sx: {
fontSize: 12,
fontWeight: '500',
}, children: [t('format.currency', { value: fee.amountUSD }), " (", t('format.number', {
value: Number.parseFloat(formatUnits(fee.amount, fee.token.decimals)),
maximumFractionDigits: Math.min(fee.token.decimals, 9),
}), ' ', fee.token.symbol, ")"] }, `${fee.token.address}${index}`)));
//# sourceMappingURL=FeeBreakdownTooltip.js.map