@lifi/widget
Version:
LI.FI Widget for cross-chain bridging and swapping. It will drive your multi-chain strategy and attract new users from everywhere.
53 lines • 2.8 kB
JavaScript
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
import { Box } from '@mui/material';
import { useRef } from 'react';
import { useTranslation } from 'react-i18next';
import { ChainSelect } from '../../components/ChainSelect/ChainSelect.js';
import { FullPageContainer } from '../../components/FullPageContainer.js';
import { TokenList } from '../../components/TokenList/TokenList.js';
import { useHeader } from '../../hooks/useHeader.js';
import { useListHeight } from '../../hooks/useListHeight.js';
import { useNavigateBack } from '../../hooks/useNavigateBack.js';
import { useScrollableOverflowHidden } from '../../hooks/useScrollableContainer.js';
import { useSwapOnly } from '../../hooks/useSwapOnly.js';
import { useWideVariant } from '../../hooks/useWideVariant.js';
import { useWidgetConfig } from '../../providers/WidgetProvider/WidgetProvider.js';
import { HiddenUI } from '../../types/widget.js';
import { SearchTokenInput } from './SearchTokenInput.js';
export const SelectTokenPage = ({ formType }) => {
useScrollableOverflowHidden();
const headerRef = useRef(null);
const swapOnly = useSwapOnly();
const { subvariant, hiddenUI, subvariantOptions } = useWidgetConfig();
const wideVariant = useWideVariant();
const { t } = useTranslation();
const title = formType === 'from'
? subvariant === 'custom'
? t('header.payWith')
: t('header.from')
: t('header.to');
useHeader(title);
const hideChainSelect = (wideVariant && subvariantOptions?.wide?.enableChainSidebar) ||
(swapOnly && formType === 'to') ||
hiddenUI?.includes(HiddenUI.ChainSelect);
return (_jsxs(FullPageContainer, { disableGutters: true, children: [_jsxs(Box, { ref: headerRef, sx: {
pb: 2,
px: 3,
}, children: [!hideChainSelect ? _jsx(ChainSelect, { formType: formType }) : null, _jsx(Box, { sx: {
mt: !hideChainSelect ? 2 : 0,
}, children: _jsx(SearchTokenInput, {}) })] }), _jsx(WrappedTokenList
// Rerender component if variant changes (since chains tiles change height)
, { headerRef: headerRef, formType: formType }, hideChainSelect ? 'without-offset' : 'with-offset')] }));
};
const WrappedTokenList = ({ headerRef, formType }) => {
const { navigateBack } = useNavigateBack();
const listParentRef = useRef(null);
const { listHeight, minListHeight } = useListHeight({
listParentRef,
headerRef,
});
return (_jsx(Box, { sx: {
height: minListHeight,
}, children: _jsx(TokenList, { parentRef: listParentRef, height: listHeight, onClick: navigateBack, formType: formType }) }));
};
//# sourceMappingURL=SelectTokenPage.js.map