@reservoir0x/relay-kit-ui
Version:
Relay is the Fastest and Cheapest Way to Bridge and Transact Across Chains.
24 lines • 2.79 kB
JavaScript
;
Object.defineProperty(exports, "__esModule", { value: true });
const jsx_runtime_1 = require("react/jsx-runtime");
const index_js_1 = require("../../primitives/index.js");
const Collapsible_js_1 = require("../../primitives/Collapsible.js");
const numbers_js_1 = require("../../../utils/numbers.js");
const GasTopUpSection = ({ toChain, gasTopUpEnabled, onGasTopUpEnabled, gasTopUpRequired, gasTopUpAmount, gasTopUpAmountUsd }) => {
const currency = toChain?.currency;
const gasTokenIsSupported = toChain?.currency?.supportsBridging;
if (!currency || !gasTopUpRequired || !gasTokenIsSupported) {
return null;
}
return ((0, jsx_runtime_1.jsxs)(index_js_1.Flex, { direction: "column", css: {
p: '3',
backgroundColor: 'widget-background',
border: 'widget-card-border',
borderRadius: '12px',
mb: 'widget-card-section-gutter'
}, children: [(0, jsx_runtime_1.jsxs)(index_js_1.Flex, { justify: "between", align: "center", children: [(0, jsx_runtime_1.jsxs)(index_js_1.Flex, { css: { gap: '2', minWidth: 0 }, align: "center", children: [(0, jsx_runtime_1.jsx)(index_js_1.ChainIcon, { height: 24, width: 24, square: true, chainId: toChain?.id }), (0, jsx_runtime_1.jsxs)(index_js_1.Text, { ellipsify: true, style: "subtitle2", css: { mr: '1' }, children: [toChain?.displayName, " gas top up"] })] }), (0, jsx_runtime_1.jsxs)(index_js_1.Flex, { align: "center", css: { gap: '1', flexShrink: 0 }, children: [gasTopUpEnabled ? ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(index_js_1.Text, { style: "subtitle2", children: gasTopUpAmountUsd ? (0, numbers_js_1.formatDollar)(+gasTopUpAmountUsd) : '-' }), (0, jsx_runtime_1.jsxs)(index_js_1.Text, { style: "subtitle2", color: "subtle", children: ["(", gasTopUpAmount
? (0, numbers_js_1.formatBN)(gasTopUpAmount, 5, currency.decimals ?? 18)
: '-', ' ', currency.symbol, ")"] })] })) : null, (0, jsx_runtime_1.jsx)(index_js_1.StyledSwitch, { checked: gasTopUpEnabled, onCheckedChange: onGasTopUpEnabled, children: (0, jsx_runtime_1.jsx)(index_js_1.StyledThumb, {}) })] })] }), (0, jsx_runtime_1.jsx)(Collapsible_js_1.CollapsibleRoot, { open: gasTopUpEnabled, children: (0, jsx_runtime_1.jsx)(Collapsible_js_1.CollapsibleContent, { children: (0, jsx_runtime_1.jsxs)(index_js_1.Text, { style: "subtitle2", color: "subtle", css: { pt: '2' }, children: ["Add ", gasTopUpAmountUsd ? (0, numbers_js_1.formatDollar)(+gasTopUpAmountUsd) : 'funds', ' ', "to this swap to cover future transactions on ", toChain?.displayName, "."] }) }) })] }));
};
exports.default = GasTopUpSection;
//# sourceMappingURL=GasTopUpSection.js.map