@lifi/widget
Version:
LI.FI Widget for cross-chain bridging and swapping. It will drive your multi-chain strategy and attract new users from everywhere.
49 lines • 3.25 kB
JavaScript
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
import { isRelayerStep } from '@lifi/sdk';
import AccessTimeFilled from '@mui/icons-material/AccessTimeFilled';
import LocalGasStationRounded from '@mui/icons-material/LocalGasStationRounded';
import { Box, Tooltip, Typography } from '@mui/material';
import { useTranslation } from 'react-i18next';
import { getAccumulatedFeeCostsBreakdown } from '../../utils/fees.js';
import { formatDuration } from '../../utils/format.js';
import { FeeBreakdownTooltip } from '../FeeBreakdownTooltip.js';
import { IconTypography } from '../IconTypography.js';
import { TokenRate } from '../TokenRate/TokenRate.js';
export const RouteCardEssentials = ({ route, }) => {
const { t, i18n } = useTranslation();
const executionTimeSeconds = Math.floor(route.steps.reduce((duration, step) => duration + step.estimate.executionDuration, 0));
const { gasCosts, feeCosts, combinedFeesUSD } = getAccumulatedFeeCostsBreakdown(route);
const hasRelayerSupport = route.steps.every(isRelayerStep);
return (_jsxs(Box, { sx: {
display: 'flex',
alignItems: 'center',
justifyContent: 'space-between',
flex: 1,
mt: 2,
}, children: [_jsx(TokenRate, { route: route }), _jsxs(Box, { sx: {
display: 'flex',
alignItems: 'center',
}, children: [_jsx(FeeBreakdownTooltip, { gasCosts: gasCosts, feeCosts: feeCosts, relayerSupport: hasRelayerSupport, children: _jsxs(Box, { sx: {
display: 'flex',
mr: 1.5,
alignItems: 'center',
}, children: [_jsx(IconTypography, { mr: 0.5, fontSize: 16, children: _jsx(LocalGasStationRounded, { fontSize: "inherit" }) }), _jsx(Typography, { "data-value": hasRelayerSupport ? 0 : combinedFeesUSD, sx: {
fontSize: 14,
color: 'text.primary',
fontWeight: 600,
lineHeight: 1,
}, children: hasRelayerSupport
? t('main.fees.free')
: t('format.currency', {
value: combinedFeesUSD,
}) })] }) }), _jsx(Tooltip, { title: t('tooltip.estimatedTime'), sx: { cursor: 'help' }, children: _jsxs(Box, { sx: {
display: 'flex',
alignItems: 'center',
}, children: [_jsx(IconTypography, { mr: 0.5, fontSize: 16, children: _jsx(AccessTimeFilled, { fontSize: "inherit" }) }), _jsx(Typography, { sx: {
fontSize: 14,
color: 'text.primary',
fontWeight: 600,
lineHeight: 1,
}, children: formatDuration(executionTimeSeconds, i18n.language) })] }) })] })] }));
};
//# sourceMappingURL=RouteCardEssentials.js.map