@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.
124 lines • 4.05 kB
JavaScript
import { Alert, alertClasses, Box, IconButton, inputBaseClasses, List, styled, Typography, } from '@mui/material';
import { ButtonTertiary } from '../../components/ButtonTertiary.js';
import { InputCard } from '../../components/Card/InputCard.js';
import { Input } from '../../components/Input.js';
import { PageContainer } from '../../components/PageContainer.js';
export const AddressInput = styled(Input)(({ theme }) => ({
padding: 0,
[`.${inputBaseClasses.input}`]: {
padding: theme.spacing(2),
minHeight: 48,
},
}));
export const BookmarkInputFields = styled(Box)(({ theme }) => ({
display: 'flex',
flexDirection: 'column',
gap: theme.spacing(2),
width: '100%',
}));
export const SendToWalletPageContainer = styled(PageContainer)(({ theme }) => ({
display: 'flex',
flexDirection: 'column',
gap: theme.spacing(1),
}));
export const FullHeightAdjustablePageContainer = styled(SendToWalletPageContainer, {
shouldForwardProp: (prop) => prop !== 'enableFullHeight',
})(({ theme, enableFullHeight }) => ({
justifyContent: 'space-between',
...(enableFullHeight && theme.container?.height === '100%'
? {
justifyContent: 'space-between',
height: '100%',
}
: {}),
}));
export const SendToWalletCard = styled(InputCard)({
display: 'flex',
flexDirection: 'column',
});
export const SendToWalletSheetContainer = styled(Box)(({ theme }) => ({
display: 'flex',
flexDirection: 'column',
alignItems: 'center',
padding: theme.spacing(4, 3, 3),
gap: theme.spacing(2),
}));
export const SendToWalletButtonRow = styled(Box)(({ theme }) => ({
display: 'flex',
width: '100%',
gap: theme.spacing(1),
}));
export const SendToWalletIconButton = styled(ButtonTertiary)(({ theme }) => ({
padding: theme.spacing(1.25),
minWidth: 40,
}));
export const IconContainer = styled(Box)(({ theme }) => ({
display: 'flex',
justifyContent: 'center',
alignItems: 'center',
width: 80,
height: 80,
borderRadius: '50%',
color: theme.vars.palette.grey[700],
background: theme.vars.palette.grey[200],
...theme.applyStyles('dark', {
color: theme.vars.palette.grey[300],
background: theme.vars.palette.grey[800],
}),
}));
export const SheetTitle = styled(Typography)(() => ({
fontSize: 18,
fontWeight: 700,
}));
export const SheetAddressContainer = styled(Box)(() => ({
width: '100%',
wordWrap: 'break-word',
}));
export const ListContainer = styled(List)(() => ({
display: 'flex',
flexDirection: 'column',
padding: 0,
minHeight: 400,
}));
export const BookmarksListContainer = styled(ListContainer)(({ theme }) => ({
...(theme.container?.height === '100%'
? { minHeight: 360, height: 360, flexGrow: 1, overflow: 'auto' }
: { minHeight: 440 }),
}));
export const BookmarkButtonContainer = styled(Box)(({ theme }) => ({
background: theme.vars.palette.background.default,
display: 'flex',
flexDirection: 'column',
bottom: 0,
padding: theme.spacing(0, 3, 3),
zIndex: 2,
position: 'sticky',
width: '100%',
}));
export const EmptyContainer = styled(Box)(({ theme }) => ({
display: 'flex',
flexDirection: 'column',
justifyContent: 'center',
alignItems: 'center',
flexGrow: 1,
gap: theme.spacing(2),
}));
export const ValidationAlert = styled(Alert)(({ theme }) => ({
backgroundColor: 'transparent',
padding: 0,
color: theme.vars.palette.text.primary,
[`.${alertClasses.icon}`]: {
padding: 0,
color: theme.vars.palette.error.main,
},
[`.${alertClasses.message}`]: { padding: theme.spacing(0.25, 0, 0, 0) },
}));
export const OptionsMenuButton = styled(IconButton)(({ theme }) => ({
position: 'absolute',
top: theme.spacing(1.75),
right: theme.spacing(2),
'&:hover': {
backgroundColor: `rgba(${theme.vars.palette.common.onBackgroundChannel} / 0.04)`,
},
}));
//# sourceMappingURL=SendToWalletPage.style.js.map