@reservoir0x/relay-kit-ui
Version:
Relay is the Fastest and Cheapest Way to Bridge and Transact Across Chains.
170 lines • 9.26 kB
JavaScript
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
import { useMemo, useState } from 'react';
import { AccessibleList, AccessibleListItem, Box, Button, Flex, Input, Text } from '../../../primitives/index.js';
import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
import { faChevronDown } from '@fortawesome/free-solid-svg-icons/faChevronDown';
import { Modal } from '../../../../components/common/Modal.js';
import { faMagnifyingGlass } from '@fortawesome/free-solid-svg-icons';
import Fuse from 'fuse.js';
import useMoonPayCurrencies, {} from '../../../../hooks/useMoonPayCurrencies.js';
import moonpayFiatCurrencies from '../../../../constants/moonPayFiatCurrencies.js';
const fuseSearchOptions = {
includeScore: true,
includeMatches: true,
threshold: 0.2,
keys: ['name', 'code']
};
const FiatCurrencyModal = ({ moonPayApiKey, fiatCurrency, setFiatCurrency }) => {
const [open, setOpen] = useState(false);
const [currencySearchInput, setCurrencySearchInput] = useState('');
const { data: moonPayCurrencies } = useMoonPayCurrencies({
apiKey: moonPayApiKey
}, {
staleTime: 1000 * 60 * 60 * 24, //1 day
retryDelay: 1000 * 60 * 60 * 10 //10 minutes
});
const fiatCurrencies = 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;
}
}, [moonPayCurrencies]);
const sortedFiatCurrencies = useMemo(() => fiatCurrencies?.sort((a, b) => a.name.localeCompare(b.name)) ?? [], [fiatCurrencies]);
const currenciesFuse = new Fuse(sortedFiatCurrencies, fuseSearchOptions);
const filteredCurrencies = useMemo(() => {
if (currencySearchInput.trim() !== '') {
return currenciesFuse
.search(currencySearchInput)
.map((result) => result.item);
}
else {
return sortedFiatCurrencies;
}
}, [currencySearchInput, currenciesFuse]);
return (_jsxs(Modal, { trigger: _jsxs(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: [_jsx("img", { alt: "currency-icon", src: fiatCurrency.icon, style: { width: 16, height: 16, borderRadius: '50%' } }), _jsx(Text, { style: "subtitle2", color: "subtle", children: fiatCurrency.code.toUpperCase() }), _jsx(Box, { css: { color: 'gray9', width: 14 }, children: _jsx(FontAwesomeIcon, { icon: faChevronDown, width: 14 }) })] }), open: open, onOpenChange: (open) => {
if (open) {
// onAnalyticEvent?.(EventNames.ONRAMP_MODAL_OPEN)
}
else {
// onAnalyticEvent?.(EventNames.ONRAMP_MODAL_CLOSE)
}
setOpen(open);
}, css: {
overflow: 'hidden',
p: '4',
maxWidth: '100vw',
maxHeight: '450px !important',
height: 450,
sm: {
maxWidth: '400px !important'
}
}, children: [_jsx(Text, { style: "h6", css: {
width: '100%',
textAlign: 'left'
}, children: "Select a currency" }), _jsxs(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: [_jsx(AccessibleListItem, { value: "input", asChild: true, children: _jsx(Box, { css: {
bg: 'modal-background',
position: 'sticky',
py: '2',
zIndex: 1,
top: 0
}, children: _jsx(Input, { placeholder: "Search for a currency", icon: _jsx(Box, { css: { color: 'gray9' }, children: _jsx(FontAwesomeIcon, { icon: 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 (_jsx(AccessibleListItem, { value: currency.code, asChild: true, children: _jsx(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: _jsxs(Flex, { align: "center", css: { gap: '2' }, children: [_jsx("img", { src: currency.icon, alt: `${currency.name} icon`, style: { width: 32, height: 32, borderRadius: '50%' } }), _jsxs(Flex, { css: { gap: '2px', textAlign: 'left' }, direction: "column", children: [_jsx(Text, { style: "subtitle2", children: currency.name }), _jsx(Text, { style: "body3", color: "subtle", children: currency.code.toUpperCase() })] })] }) }) }, currency.code));
}), filteredCurrencies.length === 0 ? (_jsx(Text, { style: "subtitle2", css: { textAlign: 'center', py: '5' }, children: "No results found." })) : null] })] }));
};
export default FiatCurrencyModal;
//# sourceMappingURL=FiatCurrencyModal.js.map