@reservoir0x/relay-kit-ui/_esm/src/components/widgets/SwapWidget/GasTopUpSection.js

Relay is the Fastest and Cheapest Way to Bridge and Transact Across Chains.

import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
import {} from '@reservoir0x/relay-sdk';
import { Flex, Text, StyledSwitch, StyledThumb, ChainIcon } from '../../primitives/index.js';
import { CollapsibleContent, CollapsibleRoot } from '../../primitives/Collapsible.js';
import { formatDollar, formatBN } from '../../../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 (_jsxs(Flex, { direction: "column", css: {
            p: '3',
            backgroundColor: 'widget-background',
            border: 'widget-card-border',
            borderRadius: '12px',
            mb: 'widget-card-section-gutter'
        }, children: [_jsxs(Flex, { justify: "between", align: "center", children: [_jsxs(Flex, { css: { gap: '2', minWidth: 0 }, align: "center", children: [_jsx(ChainIcon, { height: 24, width: 24, square: true, chainId: toChain?.id }), _jsxs(Text, { ellipsify: true, style: "subtitle2", css: { mr: '1' }, children: [toChain?.displayName, " gas top up"] })] }), _jsxs(Flex, { align: "center", css: { gap: '1', flexShrink: 0 }, children: [gasTopUpEnabled ? (_jsxs(_Fragment, { children: [_jsx(Text, { style: "subtitle2", children: gasTopUpAmountUsd ? formatDollar(+gasTopUpAmountUsd) : '-' }), _jsxs(Text, { style: "subtitle2", color: "subtle", children: ["(", gasTopUpAmount
                                                ? formatBN(gasTopUpAmount, 5, currency.decimals ?? 18)
                                                : '-', ' ', currency.symbol, ")"] })] })) : null, _jsx(StyledSwitch, { checked: gasTopUpEnabled, onCheckedChange: onGasTopUpEnabled, children: _jsx(StyledThumb, {}) })] })] }), _jsx(CollapsibleRoot, { open: gasTopUpEnabled, children: _jsx(CollapsibleContent, { children: _jsxs(Text, { style: "subtitle2", color: "subtle", css: { pt: '2' }, children: ["Add ", gasTopUpAmountUsd ? formatDollar(+gasTopUpAmountUsd) : 'funds', ' ', "to this swap to cover future transactions on ", toChain?.displayName, "."] }) }) })] }));
};
export default GasTopUpSection;
//# sourceMappingURL=GasTopUpSection.js.map