@reservoir0x/relay-kit-ui
Version:
Relay is the Fastest and Cheapest Way to Bridge and Transact Across Chains.
84 lines • 5.51 kB
JavaScript
import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
import { useState } from 'react';
import { Box, Button, Flex, Text } from '../primitives/index.js';
import { Dropdown, DropdownMenuItem } from '../primitives/Dropdown.js';
import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
import { ASSETS_RELAY_API } from '@reservoir0x/relay-sdk';
import { faChevronRight, faRoute } from '@fortawesome/free-solid-svg-icons';
const SwapRouteSelector = ({ supportsExternalLiquidity, externalLiquidtySelected, onExternalLiquidityChange, chain, canonicalTimeEstimate, trigger, error }) => {
const [open, setOpen] = useState(false);
const isNoAvailableRoutesError = error?.response?.data?.errorCode === 'NO_SWAP_ROUTES_FOUND' ||
error?.response?.data?.errorCode === 'UNSUPPORTED_ROUTE';
return (_jsx(Dropdown, { open: open, onOpenChange: (open) => {
if (supportsExternalLiquidity || externalLiquidtySelected) {
setOpen(open);
}
}, contentProps: {
sideOffset: 8,
align: 'end',
css: {
maxWidth: 248,
minWidth: 200,
p: 0,
overflow: 'hidden',
borderRadius: 12
}
}, trigger: trigger ?? (_jsxs(Button, { color: "ghost", size: "none", css: {
display: 'flex',
width: '100%',
justifyContent: 'space-between',
flexDirection: 'row',
alignItems: 'center',
gap: '3',
p: '12',
borderRadius: 'widget-card-border-radius',
'&:disabled': {
cursor: 'default',
backgroundColor: 'transparent',
'&:hover': {
backgroundColor: 'transparent'
}
},
_focusVisible: {
boxShadow: 'none'
}
}, disabled: !(supportsExternalLiquidity || externalLiquidtySelected), children: [_jsx(Text, { style: "subtitle2", children: "Route" }), _jsx(Flex, { css: { gap: '2', alignItems: 'center' }, children: isNoAvailableRoutesError ? (_jsxs(_Fragment, { children: [_jsx(Text, { style: "subtitle2", children: "No available routes" }), _jsx(Box, { css: { color: 'gray11', width: 14, flexShrink: 0 }, children: _jsx(FontAwesomeIcon, { icon: faRoute, width: 14 }) })] })) : (_jsxs(_Fragment, { children: [_jsx(Text, { style: "subtitle2", children: externalLiquidtySelected ? 'Native' : 'Relay' }), supportsExternalLiquidity || externalLiquidtySelected ? (_jsx(Box, { css: { color: 'gray11', width: 14, flexShrink: 0 }, children: _jsx(FontAwesomeIcon, { icon: faChevronRight, width: 14 }) })) : null] })) })] })), children: _jsxs(Flex, { direction: "column", css: { borderRadius: 8, maxWidth: 260 }, children: [_jsxs(DropdownMenuItem, { "aria-label": 'Relay', onClick: () => {
setOpen(false);
onExternalLiquidityChange(false);
}, css: {
gap: '10px',
cursor: 'pointer',
pb: '8px',
transition: 'backdrop-filter 250ms linear',
_hover: {
backdropFilter: 'brightness(95%)'
},
flexShrink: 0,
alignItems: 'flex-start',
width: '100%',
display: 'flex'
}, children: [_jsx("img", { width: "26", height: "26", src: `${ASSETS_RELAY_API}/icons/square/1357/light.png`, style: { borderRadius: 4, overflow: 'hidden', flexShrink: 0 } }), _jsxs(Flex, { direction: "column", children: [_jsx(Text, { style: "subtitle2", children: "Relay" }), _jsx(Text, { style: "body3", color: "subtle", children: "Instant, max capacity per transaction" })] })] }), supportsExternalLiquidity || externalLiquidtySelected ? (_jsxs(DropdownMenuItem, { "aria-label": 'Native Bridge', onClick: () => {
setOpen(false);
onExternalLiquidityChange(true);
}, css: {
gap: '10px',
cursor: 'pointer',
transition: 'backdrop-filter 250ms linear',
_hover: {
backdropFilter: 'brightness(95%)'
},
flexShrink: 0,
alignItems: 'flex-start',
width: '100%',
display: 'flex',
pt: '8px'
}, children: [_jsx("img", { width: "26", height: "26", src: chain?.icon?.squaredLight, style: {
borderRadius: 4,
overflow: 'hidden',
flexShrink: 0
} }), _jsxs(Flex, { direction: "column", children: [_jsx(Text, { style: "subtitle2", children: "Native" }), _jsx(Text, { style: "body3", color: "subtle", children: canonicalTimeEstimate
? `Standard time ~${canonicalTimeEstimate}, unlimited transaction capacity`
: 'Unlimited transaction capacity' })] })] })) : null] }) }));
};
export default SwapRouteSelector;
//# sourceMappingURL=SwapRouteSelector.js.map