@reservoir0x/relay-kit-ui
Version:
Relay is the Fastest and Cheapest Way to Bridge and Transact Across Chains.
23 lines • 2.14 kB
JavaScript
import { jsxs as _jsxs, jsx as _jsx } from "react/jsx-runtime";
import { Flex, Text, Box } from '../primitives/index.js';
import Tooltip from '../primitives/Tooltip.js';
const getFeeColor = (value) => {
if (value === 0 || value === undefined)
return undefined;
return value > 0 ? 'success' : undefined;
};
export const PriceImpactTooltip = ({ feeBreakdown, children, tooltipProps }) => {
return (_jsx(Tooltip, { content: _jsxs(Flex, { css: { minWidth: 200 }, direction: "column", children: [_jsxs(Flex, { align: "center", css: { width: '100%' }, children: [_jsxs(Text, { style: "subtitle3", css: { mr: 'auto' }, children: ["Total Price Impact", ' '] }), _jsx(Text, { style: "subtitle3", css: { mr: '1', ml: '2' }, color: feeBreakdown?.totalFees?.priceImpactColor, children: feeBreakdown?.totalFees.priceImpact }), _jsxs(Text, { style: "subtitle3", color: feeBreakdown?.totalFees?.priceImpactColor, children: ["(", feeBreakdown?.totalFees.priceImpactPercentage, ")"] })] }), _jsx(Box, { css: {
width: '100%',
height: 1,
backgroundColor: 'slate.6',
marginTop: '2',
marginBottom: '2'
} }), _jsxs(Flex, { align: "center", css: { width: '100%' }, children: [_jsx(Text, { style: "subtitle3", color: "subtle", css: { mr: 'auto' }, children: "Swap Impact" }), _jsx(Text, { style: "subtitle3", color: getFeeColor(feeBreakdown?.totalFees?.swapImpact?.value), children: feeBreakdown?.totalFees?.swapImpact?.formatted })] }), feeBreakdown?.breakdown.map((fee) => {
if (fee.id === 'origin-gas') {
return null;
}
return (_jsxs(Flex, { align: "center", css: { width: '100%' }, children: [_jsx(Text, { style: "subtitle3", color: "subtle", css: { mr: 'auto' }, children: fee.name }), _jsx(Text, { style: "subtitle3", color: getFeeColor(fee.usd.value), children: fee.usd.formatted })] }, fee.id));
})] }), ...tooltipProps, children: children }));
};
//# sourceMappingURL=PriceImpactTooltip.js.map