@openocean.finance/widget
Version:
Openocean Widget for cross-chain bridging and swapping. It will drive your multi-chain strategy and attract new users from everywhere.
43 lines • 3.08 kB
JavaScript
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
import { Box, Typography, styled, Tooltip } from '@mui/material';
import { useRoutes } from '../../hooks/useRoutes.js';
import { formatTokenAmount } from '../../utils/format.js';
import { HelpOutline } from '@mui/icons-material';
const SummaryBox = styled(Box)(({ theme }) => ({
padding: '1rem',
borderRadius: '15px',
borderWidth: '1px',
borderColor: theme.palette.mode === 'dark' ? '#373D3A' : 'var(--dark-background)',
width: '100%',
marginTop: '0.5rem',
}));
const SummaryRow = styled(Box)({
display: 'flex',
justifyContent: 'space-between',
marginBottom: '0.4rem',
});
export const SwapSummary = () => {
const { routes, } = useRoutes();
let minReceive = '0';
let minReceiveUsd = '0';
let estGasFee = '0';
let priceImpact = '--';
if (routes) {
const route = routes[0];
const fromAmount = +formatTokenAmount(BigInt(route.fromAmount), route.fromToken.decimals);
const toAmount = +formatTokenAmount(BigInt(route.toAmount), route.toToken.decimals);
const minOut = +formatTokenAmount(BigInt(route.toAmountMin), route.toToken.decimals);
minReceive = `${Number(minOut.toFixed(4))} ${route.toToken.symbol}`;
minReceiveUsd = `~ $${Number((minOut * route.toToken.priceUSD).toFixed(2))}`;
estGasFee = route.estimatedGasFee;
const inUsdtValue = fromAmount * route.fromToken.priceUSD;
const outUsdtValue = toAmount * route.toToken.priceUSD;
// priceImpact = (Math.floor(((outUsdtValue - inUsdtValue) / inUsdtValue) * 10000) / 100)
// if (inUsdtValue < 10 && priceImpact < -50) {
// priceImpact = -50
// }
priceImpact = route.priceImpact;
}
return (_jsxs(SummaryBox, { children: [_jsxs(SummaryRow, { children: [_jsx(Typography, { variant: "body2", color: "text.secondary", sx: { display: 'flex', alignItems: 'center' }, children: _jsx(Typography, { component: "span", color: "text.secondary", sx: { fontSize: '0.875rem' }, children: "Minimum Receive" }) }), _jsxs(Typography, { variant: "body2", children: [_jsx(Typography, { component: "span", color: "text.secondary", sx: { fontSize: '0.875rem' }, children: minReceiveUsd }), _jsx(Typography, { component: "span", sx: { fontSize: '0.875rem', ml: 1 }, children: minReceive })] })] }), _jsxs(SummaryRow, { children: [_jsx(Typography, { variant: "body2", color: "text.secondary", children: "Est. Gas Fee" }), _jsx(Typography, { variant: "body2", children: "1" })] }), _jsxs(SummaryRow, { children: [_jsxs(Typography, { variant: "body2", color: "text.secondary", sx: { display: 'flex', alignItems: 'center' }, children: [_jsx(Typography, { variant: "body2", color: "text.secondary", children: "Price Impact" }), _jsx(Tooltip, { title: "The difference between market price and est. price due to trade size", children: _jsx(HelpOutline, { sx: { fontSize: '0.975rem', ml: 0.5 } }) })] }), _jsx(Typography, { variant: "body2", children: priceImpact })] })] }));
};
//# sourceMappingURL=SwapSummary.js.map