@reservoir0x/relay-kit-ui
Version:
Relay is the Fastest and Cheapest Way to Bridge and Transact Across Chains.
28 lines • 2.73 kB
JavaScript
;
Object.defineProperty(exports, "__esModule", { value: true });
exports.PriceImpactTooltip = void 0;
const tslib_1 = require("tslib");
const jsx_runtime_1 = require("react/jsx-runtime");
const index_js_1 = require("../primitives/index.js");
const Tooltip_js_1 = tslib_1.__importDefault(require("../primitives/Tooltip.js"));
const getFeeColor = (value) => {
if (value === 0 || value === undefined)
return undefined;
return value > 0 ? 'success' : undefined;
};
const PriceImpactTooltip = ({ feeBreakdown, children, tooltipProps }) => {
return ((0, jsx_runtime_1.jsx)(Tooltip_js_1.default, { content: (0, jsx_runtime_1.jsxs)(index_js_1.Flex, { css: { minWidth: 200 }, direction: "column", children: [(0, jsx_runtime_1.jsxs)(index_js_1.Flex, { align: "center", css: { width: '100%' }, children: [(0, jsx_runtime_1.jsxs)(index_js_1.Text, { style: "subtitle3", css: { mr: 'auto' }, children: ["Total Price Impact", ' '] }), (0, jsx_runtime_1.jsx)(index_js_1.Text, { style: "subtitle3", css: { mr: '1', ml: '2' }, color: feeBreakdown?.totalFees?.priceImpactColor, children: feeBreakdown?.totalFees.priceImpact }), (0, jsx_runtime_1.jsxs)(index_js_1.Text, { style: "subtitle3", color: feeBreakdown?.totalFees?.priceImpactColor, children: ["(", feeBreakdown?.totalFees.priceImpactPercentage, ")"] })] }), (0, jsx_runtime_1.jsx)(index_js_1.Box, { css: {
width: '100%',
height: 1,
backgroundColor: 'slate.6',
marginTop: '2',
marginBottom: '2'
} }), (0, jsx_runtime_1.jsxs)(index_js_1.Flex, { align: "center", css: { width: '100%' }, children: [(0, jsx_runtime_1.jsx)(index_js_1.Text, { style: "subtitle3", color: "subtle", css: { mr: 'auto' }, children: "Swap Impact" }), (0, jsx_runtime_1.jsx)(index_js_1.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 ((0, jsx_runtime_1.jsxs)(index_js_1.Flex, { align: "center", css: { width: '100%' }, children: [(0, jsx_runtime_1.jsx)(index_js_1.Text, { style: "subtitle3", color: "subtle", css: { mr: 'auto' }, children: fee.name }), (0, jsx_runtime_1.jsx)(index_js_1.Text, { style: "subtitle3", color: getFeeColor(fee.usd.value), children: fee.usd.formatted })] }, fee.id));
})] }), ...tooltipProps, children: children }));
};
exports.PriceImpactTooltip = PriceImpactTooltip;
//# sourceMappingURL=PriceImpactTooltip.js.map