@reservoir0x/relay-kit-ui
Version:
Relay is the Fastest and Cheapest Way to Bridge and Transact Across Chains.
171 lines • 10 kB
JavaScript
;
Object.defineProperty(exports, "__esModule", { value: true });
const tslib_1 = require("tslib");
const jsx_runtime_1 = require("react/jsx-runtime");
const react_1 = require("react");
const index_js_1 = require("../../../primitives/index.js");
const react_fontawesome_1 = require("@fortawesome/react-fontawesome");
const faChevronDown_1 = require("@fortawesome/free-solid-svg-icons/faChevronDown");
const Modal_js_1 = require("../../../../components/common/Modal.js");
const free_solid_svg_icons_1 = require("@fortawesome/free-solid-svg-icons");
const fuse_js_1 = tslib_1.__importDefault(require("fuse.js"));
const useMoonPayCurrencies_js_1 = tslib_1.__importDefault(require("../../../../hooks/useMoonPayCurrencies.js"));
const moonPayFiatCurrencies_js_1 = tslib_1.__importDefault(require("../../../../constants/moonPayFiatCurrencies.js"));
const fuseSearchOptions = {
includeScore: true,
includeMatches: true,
threshold: 0.2,
keys: ['name', 'code']
};
const FiatCurrencyModal = ({ moonPayApiKey, fiatCurrency, setFiatCurrency }) => {
const [open, setOpen] = (0, react_1.useState)(false);
const [currencySearchInput, setCurrencySearchInput] = (0, react_1.useState)('');
const { data: moonPayCurrencies } = (0, useMoonPayCurrencies_js_1.default)({
apiKey: moonPayApiKey
}, {
staleTime: 1000 * 60 * 60 * 24,
retryDelay: 1000 * 60 * 60 * 10
});
const fiatCurrencies = (0, react_1.useMemo)(() => {
if (moonPayCurrencies && moonPayCurrencies.length > 0) {
return moonPayCurrencies
.filter((currency) => currency.type === 'fiat')
.map((currency) => {
const fiatCurrency = currency;
return {
name: fiatCurrency.name,
code: fiatCurrency.code,
minAmount: fiatCurrency.minBuyAmount,
icon: fiatCurrency.icon
};
});
}
else {
return moonPayFiatCurrencies_js_1.default;
}
}, [moonPayCurrencies]);
const sortedFiatCurrencies = (0, react_1.useMemo)(() => fiatCurrencies?.sort((a, b) => a.name.localeCompare(b.name)) ?? [], [fiatCurrencies]);
const currenciesFuse = new fuse_js_1.default(sortedFiatCurrencies, fuseSearchOptions);
const filteredCurrencies = (0, react_1.useMemo)(() => {
if (currencySearchInput.trim() !== '') {
return currenciesFuse
.search(currencySearchInput)
.map((result) => result.item);
}
else {
return sortedFiatCurrencies;
}
}, [currencySearchInput, currenciesFuse]);
return ((0, jsx_runtime_1.jsxs)(Modal_js_1.Modal, { trigger: (0, jsx_runtime_1.jsxs)(index_js_1.Button, { color: "white", corners: "pill", css: {
height: 28,
minHeight: 28,
width: 'max-content',
flexShrink: 0,
overflow: 'hidden',
gap: '1',
display: 'flex',
alignItems: 'center',
py: '1',
px: '2',
backgroundColor: 'gray2',
border: 'none',
_hover: {
backgroundColor: 'gray3'
}
}, children: [(0, jsx_runtime_1.jsx)("img", { alt: "currency-icon", src: fiatCurrency.icon, style: { width: 16, height: 16, borderRadius: '50%' } }), (0, jsx_runtime_1.jsx)(index_js_1.Text, { style: "subtitle2", color: "subtle", children: fiatCurrency.code.toUpperCase() }), (0, jsx_runtime_1.jsx)(index_js_1.Box, { css: { color: 'gray9', width: 14 }, children: (0, jsx_runtime_1.jsx)(react_fontawesome_1.FontAwesomeIcon, { icon: faChevronDown_1.faChevronDown, width: 14 }) })] }), open: open, onOpenChange: (open) => {
if (open) {
}
else {
}
setOpen(open);
}, css: {
overflow: 'hidden',
p: '4',
maxWidth: '100vw',
maxHeight: '450px !important',
height: 450,
sm: {
maxWidth: '400px !important'
}
}, children: [(0, jsx_runtime_1.jsx)(index_js_1.Text, { style: "h6", css: {
width: '100%',
textAlign: 'left'
}, children: "Select a currency" }), (0, jsx_runtime_1.jsxs)(index_js_1.AccessibleList, { onSelect: (value) => {
if (value && value !== 'input') {
const selectedCurrency = sortedFiatCurrencies?.find((currency) => currency.code === value);
if (selectedCurrency) {
setFiatCurrency(selectedCurrency);
}
setOpen(false);
}
}, css: {
display: 'flex',
flexDirection: 'column',
width: '100%',
gap: '1',
height: 'calc(100% - 24px)',
overflowY: 'auto',
scrollPaddingTop: '40px'
}, children: [(0, jsx_runtime_1.jsx)(index_js_1.AccessibleListItem, { value: "input", asChild: true, children: (0, jsx_runtime_1.jsx)(index_js_1.Box, { css: {
bg: 'modal-background',
position: 'sticky',
py: '2',
zIndex: 1,
top: 0
}, children: (0, jsx_runtime_1.jsx)(index_js_1.Input, { placeholder: "Search for a currency", icon: (0, jsx_runtime_1.jsx)(index_js_1.Box, { css: { color: 'gray9' }, children: (0, jsx_runtime_1.jsx)(react_fontawesome_1.FontAwesomeIcon, { icon: free_solid_svg_icons_1.faMagnifyingGlass, width: 16, height: 16 }) }), containerCss: {
width: '100%',
height: 40,
scrollSnapAlign: 'start'
}, css: {
width: '100%',
_placeholder_parent: {
textOverflow: 'ellipsis'
}
}, value: currencySearchInput, onChange: (e) => {
setCurrencySearchInput(e.target.value);
} }) }) }), filteredCurrencies.map((currency, i) => {
const active = fiatCurrency.code === currency.code;
return ((0, jsx_runtime_1.jsx)(index_js_1.AccessibleListItem, { value: currency.code, asChild: true, children: (0, jsx_runtime_1.jsx)(index_js_1.Button, { color: "ghost", size: "none", css: {
scrollSnapAlign: 'start',
p: '2',
mb: i + 1 < (fiatCurrencies?.length ?? 0) ? '1' : 0,
display: 'flex',
alignItems: 'center',
gap: '2',
position: 'relative',
...(active && {
_before: {
content: '""',
position: 'absolute',
borderRadius: 8,
top: 0,
left: 0,
width: '100%',
height: '100%',
opacity: 0.15,
backgroundColor: 'primary-color',
zIndex: -1
}
}),
transition: 'backdrop-filter 250ms linear',
_hover: {
backgroundColor: active ? '' : 'gray/10'
},
'--focusColor': 'colors.focus-color',
_focusVisible: {
boxShadow: 'inset 0 0 0 2px var(--focusColor)'
},
'&[data-state="on"]': {
boxShadow: 'inset 0 0 0 2px var(--focusColor)'
},
_active: {
boxShadow: 'inset 0 0 0 2px var(--focusColor)'
},
_focusWithin: {
boxShadow: 'inset 0 0 0 2px var(--focusColor)'
}
}, children: (0, jsx_runtime_1.jsxs)(index_js_1.Flex, { align: "center", css: { gap: '2' }, children: [(0, jsx_runtime_1.jsx)("img", { src: currency.icon, alt: `${currency.name} icon`, style: { width: 32, height: 32, borderRadius: '50%' } }), (0, jsx_runtime_1.jsxs)(index_js_1.Flex, { css: { gap: '2px', textAlign: 'left' }, direction: "column", children: [(0, jsx_runtime_1.jsx)(index_js_1.Text, { style: "subtitle2", children: currency.name }), (0, jsx_runtime_1.jsx)(index_js_1.Text, { style: "body3", color: "subtle", children: currency.code.toUpperCase() })] })] }) }) }, currency.code));
}), filteredCurrencies.length === 0 ? ((0, jsx_runtime_1.jsx)(index_js_1.Text, { style: "subtitle2", css: { textAlign: 'center', py: '5' }, children: "No results found." })) : null] })] }));
};
exports.default = FiatCurrencyModal;
//# sourceMappingURL=FiatCurrencyModal.js.map