@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.
58 lines • 3.14 kB
JavaScript
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
import { Box, useMediaQuery } 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);
const isMobile = useMediaQuery((theme) => theme.breakpoints.down(theme.breakpoints.values.xs));
const hideSearchTokenInput = hiddenUI?.includes(HiddenUI.SearchTokenInput);
const hasHeader = !hideChainSelect || !hideSearchTokenInput;
return (_jsxs(FullPageContainer, { disableGutters: true, children: [_jsxs(Box, { ref: headerRef, sx: {
pb: hasHeader ? 2 : 0,
px: 3,
}, children: [!hideChainSelect ? _jsx(ChainSelect, { formType: formType }) : null, !hideSearchTokenInput && (_jsx(Box, { sx: {
mt: !hideChainSelect ? 2 : 0,
}, children: _jsx(SearchTokenInput, { formType: formType }) }))] }), _jsx(WrappedTokenList
// Rerender component if variant changes (since chains tiles change height)
, { headerRef: headerRef, formType: formType }, hideChainSelect
? 'without-offset'
: isMobile
? 'with-offset-mobile'
: 'with-offset')] }));
};
const WrappedTokenList = ({ headerRef, formType }) => {
const { navigateBack } = useNavigateBack();
const listParentRef = useRef(null);
const { listHeight } = useListHeight({
listParentRef,
headerRef,
});
return (_jsx(TokenList, { parentRef: listParentRef, height: listHeight, onClick: navigateBack, formType: formType }));
};
//# sourceMappingURL=SelectTokenPage.js.map