@reservoir0x/relay-kit-ui
Version:
Relay is the Fastest and Cheapest Way to Bridge and Transact Across Chains.
86 lines • 6.28 kB
JavaScript
;
Object.defineProperty(exports, "__esModule", { value: true });
const jsx_runtime_1 = require("react/jsx-runtime");
const react_1 = require("react");
const index_js_1 = require("../primitives/index.js");
const Dropdown_js_1 = require("../primitives/Dropdown.js");
const react_fontawesome_1 = require("@fortawesome/react-fontawesome");
const relay_sdk_1 = require("@reservoir0x/relay-sdk");
const free_solid_svg_icons_1 = require("@fortawesome/free-solid-svg-icons");
const SwapRouteSelector = ({ supportsExternalLiquidity, externalLiquidtySelected, onExternalLiquidityChange, chain, canonicalTimeEstimate, trigger, error }) => {
const [open, setOpen] = (0, react_1.useState)(false);
const isNoAvailableRoutesError = error?.response?.data?.errorCode === 'NO_SWAP_ROUTES_FOUND' ||
error?.response?.data?.errorCode === 'UNSUPPORTED_ROUTE';
return ((0, jsx_runtime_1.jsx)(Dropdown_js_1.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 ?? ((0, jsx_runtime_1.jsxs)(index_js_1.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: [(0, jsx_runtime_1.jsx)(index_js_1.Text, { style: "subtitle2", children: "Route" }), (0, jsx_runtime_1.jsx)(index_js_1.Flex, { css: { gap: '2', alignItems: 'center' }, children: isNoAvailableRoutesError ? ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(index_js_1.Text, { style: "subtitle2", children: "No available routes" }), (0, jsx_runtime_1.jsx)(index_js_1.Box, { css: { color: 'gray11', width: 14, flexShrink: 0 }, children: (0, jsx_runtime_1.jsx)(react_fontawesome_1.FontAwesomeIcon, { icon: free_solid_svg_icons_1.faRoute, width: 14 }) })] })) : ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(index_js_1.Text, { style: "subtitle2", children: externalLiquidtySelected ? 'Native' : 'Relay' }), supportsExternalLiquidity || externalLiquidtySelected ? ((0, jsx_runtime_1.jsx)(index_js_1.Box, { css: { color: 'gray11', width: 14, flexShrink: 0 }, children: (0, jsx_runtime_1.jsx)(react_fontawesome_1.FontAwesomeIcon, { icon: free_solid_svg_icons_1.faChevronRight, width: 14 }) })) : null] })) })] })), children: (0, jsx_runtime_1.jsxs)(index_js_1.Flex, { direction: "column", css: { borderRadius: 8, maxWidth: 260 }, children: [(0, jsx_runtime_1.jsxs)(Dropdown_js_1.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: [(0, jsx_runtime_1.jsx)("img", { width: "26", height: "26", src: `${relay_sdk_1.ASSETS_RELAY_API}/icons/square/1357/light.png`, style: { borderRadius: 4, overflow: 'hidden', flexShrink: 0 } }), (0, jsx_runtime_1.jsxs)(index_js_1.Flex, { direction: "column", children: [(0, jsx_runtime_1.jsx)(index_js_1.Text, { style: "subtitle2", children: "Relay" }), (0, jsx_runtime_1.jsx)(index_js_1.Text, { style: "body3", color: "subtle", children: "Instant, max capacity per transaction" })] })] }), supportsExternalLiquidity || externalLiquidtySelected ? ((0, jsx_runtime_1.jsxs)(Dropdown_js_1.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: [(0, jsx_runtime_1.jsx)("img", { width: "26", height: "26", src: chain?.icon?.squaredLight, style: {
borderRadius: 4,
overflow: 'hidden',
flexShrink: 0
} }), (0, jsx_runtime_1.jsxs)(index_js_1.Flex, { direction: "column", children: [(0, jsx_runtime_1.jsx)(index_js_1.Text, { style: "subtitle2", children: "Native" }), (0, jsx_runtime_1.jsx)(index_js_1.Text, { style: "body3", color: "subtle", children: canonicalTimeEstimate
? `Standard time ~${canonicalTimeEstimate}, unlimited transaction capacity`
: 'Unlimited transaction capacity' })] })] })) : null] }) }));
};
exports.default = SwapRouteSelector;
//# sourceMappingURL=SwapRouteSelector.js.map