@dynamic-labs/sdk-react-core
Version:
A React SDK for implementing wallet web3 authentication and authorization to your website.
86 lines (81 loc) • 6.26 kB
JavaScript
'use client'
;
Object.defineProperty(exports, '__esModule', { value: true });
var jsxRuntime = require('react/jsx-runtime');
var React = require('react');
var reactI18next = require('react-i18next');
var utils = require('@dynamic-labs/utils');
var ErrorContainer = require('../../components/ErrorContainer/ErrorContainer.cjs');
var Search = require('../../components/Search/Search.cjs');
var Skeleton = require('../../components/Skeleton/Skeleton.cjs');
var ErrorContext = require('../../context/ErrorContext/ErrorContext.cjs');
var DefaultFooter = require('../../layout/DynamicAuthLayout/DefaultFooter/DefaultFooter.cjs');
var useEffectOnce = require('../../utils/hooks/useEffectOnce/useEffectOnce.cjs');
var classNames = require('../../utils/functions/classNames/classNames.cjs');
var localStorage = require('../../utils/constants/localStorage.cjs');
var projectSettings = require('../../store/state/projectSettings/projectSettings.cjs');
var convertExchangeKeyAndProviderEnum = require('../../widgets/DynamicWidget/helpers/convertExchangeKeyAndProviderEnum.cjs');
var SearchNotFoundMessage = require('../WalletList/SearchNotFoundMessage/SearchNotFoundMessage.cjs');
var noWalletFound = require('../../assets/no-wallet-found.cjs');
var ExchangeListItem = require('./ExchangeListItem/ExchangeListItem.cjs');
const ExchangeList = ({ onSelectExchange, showDefaultFooter, scrollContainerClassName, }) => {
var _a;
/**
* Clear search key on unmount
*/
useEffectOnce.useEffectOnce(() => () => utils.StorageService === null || utils.StorageService === void 0 ? void 0 : utils.StorageService.setItem(localStorage.EXCHANGE_PICKER_SEARCH_KEY, ''));
const { error } = ErrorContext.useErrorContext();
const [footerBorderIsVisible, setFooterBorderIsVisible] = React.useState(true);
const { t } = reactI18next.useTranslation();
const projectSettings$1 = projectSettings.useProjectSettings();
const [filterValue, setFilterValue] = React.useState((_a = utils.StorageService.getItem(localStorage.EXCHANGE_PICKER_SEARCH_KEY)) !== null && _a !== void 0 ? _a : '');
const exchangeNames = React.useMemo(() => {
if (!(projectSettings$1 === null || projectSettings$1 === void 0 ? void 0 : projectSettings$1.providers))
return [];
const names = projectSettings$1.providers.flatMap(({ provider, enabledAt }) => {
if (!enabledAt)
return [];
if (convertExchangeKeyAndProviderEnum.isProviderExchange(provider)) {
return [provider];
}
else {
return [];
}
});
return [...new Set(names)];
}, [projectSettings$1 === null || projectSettings$1 === void 0 ? void 0 : projectSettings$1.providers]);
const filteredExchangeNames = React.useMemo(() => {
const term = filterValue.trim().toLowerCase();
if (!term)
return exchangeNames;
return exchangeNames.filter((provider) => convertExchangeKeyAndProviderEnum.convertProviderToExchangeKeyEnum(provider).toLowerCase().includes(term));
}, [exchangeNames, filterValue]);
const exchangeListScrollRef = React.useRef(null);
/* istanbul ignore next */
const handleScroll = () => {
const element = exchangeListScrollRef.current;
if (!element) {
return;
}
if ((element === null || element === void 0 ? void 0 : element.scrollTop) > (element === null || element === void 0 ? void 0 : element.clientHeight) * 1.25) {
setFooterBorderIsVisible(false);
}
else {
setFooterBorderIsVisible(true);
}
};
const handleFilterValueChange = (value) => {
utils.StorageService.setItem(localStorage.EXCHANGE_PICKER_SEARCH_KEY, value);
setFilterValue(value);
};
const searchContainer = !projectSettings$1 ? (jsxRuntime.jsx(Skeleton.Skeleton, { className: 'exchange-list__search-skeleton' })) : (jsxRuntime.jsx("div", { className: classNames.classNames('exchange-list__search-container', {
'exchange-list__search-container--scroll': !error,
}), children: jsxRuntime.jsx(Search.Search, { copykey: 'dyn_exchange_list.search.label', label: t('dyn_exchange_list.search.label'), value: filterValue, onChange: ({ target: { value } }) => handleFilterValueChange(value), onClickClear: () => handleFilterValueChange('') }) }));
return (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [searchContainer, Boolean(error) && (jsxRuntime.jsx(ErrorContainer.ErrorContainer, { className: 'exchange-list__error-container', withIcon: false, children: error })), jsxRuntime.jsx("div", { className: classNames.classNames('exchange-list__scroll-container', scrollContainerClassName, {
'exchange-list__scroll-container--error': Boolean(error),
'exchange-list__scroll-container--fixed-height': false,
}), "data-testid": 'exchange-list-scroll-container', ref: exchangeListScrollRef, onScroll: handleScroll, children: !projectSettings$1 ? (jsxRuntime.jsx(Skeleton.Skeleton, { count: 10, className: 'exchange-list__tile-skeleton' })) : (
// eslint-disable-next-line react/jsx-no-useless-fragment
jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [exchangeNames.length === 0 && (jsxRuntime.jsx(ErrorContainer.ErrorContainer, { copykey: 'dyn_exchange_list.no_exchange', children: t('dyn_exchange_list.no_exchanges') })), exchangeNames.length && filteredExchangeNames.length === 0 ? (jsxRuntime.jsx(SearchNotFoundMessage.SearchNotFoundMessage, { title: t('dyn_exchange_list.search.not_found.title'), subtitle: t('dyn_exchange_list.search.not_found.description'), image: jsxRuntime.jsx(noWalletFound.ReactComponent, {}) })) : (filteredExchangeNames.map((exchange, index) => (jsxRuntime.jsx(ExchangeListItem.ExchangeListItem, { exchange: convertExchangeKeyAndProviderEnum.convertProviderToExchangeKeyEnum(exchange), onResetSearchValue: () => handleFilterValueChange(''), onSelectExchange: onSelectExchange }, `${exchange}_${index}`))))] })) }), showDefaultFooter && (jsxRuntime.jsx(DefaultFooter.DefaultFooter, { hideBorder: !footerBorderIsVisible }))] }));
};
exports.ExchangeList = ExchangeList;