@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.
116 lines • 4.83 kB
JavaScript
import { jsx as _jsx } from "react/jsx-runtime";
import { Box, Container, ScopedCssBaseline, styled } from '@mui/material';
import { defaultMaxHeight } from '../config/constants.js';
import { useWidgetConfig } from '../providers/WidgetProvider/WidgetProvider.js';
import { useHeaderHeight } from '../stores/header/useHeaderStore.js';
import { createElementId, ElementId } from '../utils/elements.js';
import { getWidgetMaxHeight } from '../utils/widgetSize.js';
// NOTE: the setting of the height in AppExpandedContainer, RelativeContainer and CssBaselineContainer can
// be done dynamically by values in the config - namely the config.theme.container values display, maxHeight and height
// A Number of other components and hooks work with height values that are often set on or derived from these elements
// if there are changes to how the height works here you should also check the functionality of these hooks and their point of use
// - useTokenListHeight
// - useSetContentHeight
// Also check any code that is using the methods from elements.ts utils file
export const AppExpandedContainer = styled(Box, {
shouldForwardProp: (prop) => prop !== 'variant',
})(({ theme }) => ({
display: 'flex',
justifyContent: 'center',
alignItems: 'start',
flex: 1,
height: theme.container?.display === 'flex'
? '100%'
: theme.container?.maxHeight
? 'auto'
: theme.container?.height || 'auto',
variants: [
{
props: {
variant: 'drawer',
},
style: {
height: 'none',
},
},
],
}));
export const RelativeContainer = styled(Box, {
shouldForwardProp: (prop) => prop !== 'variant',
})(({ theme }) => {
const maxHeight = theme.container?.height === 'fit-content'
? 'none'
: getWidgetMaxHeight(theme);
return {
position: 'relative',
boxSizing: 'content-box',
width: '100%',
minWidth: theme.breakpoints.values.xs,
maxWidth: theme.breakpoints.values.sm,
background: theme.vars.palette.background.default,
overflow: 'auto',
flex: 1,
...theme.container,
maxHeight: theme.container?.display === 'flex' && !theme.container?.height
? '100%'
: maxHeight,
zIndex: 1, // NB: higher than of expansion containers
variants: [
{
props: {
variant: 'drawer',
},
style: {
maxHeight: 'none',
height: '100%',
boxShadow: 'none',
borderRadius: 0,
},
},
],
};
});
const CssBaselineContainer = styled(ScopedCssBaseline, {
shouldForwardProp: (prop) => !['variant', 'paddingTopAdjustment', 'elementId'].includes(prop),
})(({ theme, variant, paddingTopAdjustment }) => {
const maxHeight = theme.container?.height === 'fit-content'
? 'none'
: getWidgetMaxHeight(theme);
return {
display: 'flex',
flex: 1,
flexDirection: 'column',
overflowX: 'clip',
margin: 0,
width: '100%',
maxHeight: variant === 'drawer' || theme.container?.display === 'flex'
? 'none'
: maxHeight,
overflowY: 'auto',
height: theme.container?.display === 'flex' ? 'auto' : '100%',
paddingTop: paddingTopAdjustment,
// This allows FullPageContainer.tsx to expand and fill the available vertical space in max height and default layout modes
'&:has(.full-page-container)': {
height: theme.container?.maxHeight ||
theme.container?.height ||
defaultMaxHeight,
},
'&:has(.long-list)': {
minHeight: getWidgetMaxHeight(theme),
maxHeight: getWidgetMaxHeight(theme),
},
};
});
export const FlexContainer = styled(Container)({
display: 'flex',
flexDirection: 'column',
flex: 1,
});
export const AppContainer = ({ children }) => {
// const ref = useRef<HTMLDivElement>(null);
const { variant, elementId, theme } = useWidgetConfig();
const { headerHeight } = useHeaderHeight();
const positionFixedAdjustment = theme?.header?.position === 'fixed' ? headerHeight : 0;
return (_jsx(RelativeContainer, { variant: variant, id: createElementId(ElementId.RelativeContainer, elementId), children: _jsx(CssBaselineContainer, { id: createElementId(ElementId.ScrollableContainer, elementId), variant: variant, enableColorScheme: true, paddingTopAdjustment: positionFixedAdjustment, elementId: elementId, children: _jsx(FlexContainer, { disableGutters: true, children: children }) }) }));
};
//# sourceMappingURL=AppContainer.js.map