@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.
68 lines • 2.3 kB
JavaScript
import { Box, styled } from '@mui/material';
import { RouteExecutionStatus } from '../../stores/routes/types.js';
const getStatusColor = (status, theme) => {
switch (status) {
case RouteExecutionStatus.Done:
return {
color: theme.vars.palette.success.mainChannel,
alpha: 0.12,
lightDarken: 0,
darkDarken: 0,
};
case RouteExecutionStatus.Failed:
return {
color: theme.vars.palette.error.mainChannel,
alpha: 0.12,
lightDarken: 0,
darkDarken: 0,
};
case RouteExecutionStatus.Done | RouteExecutionStatus.Partial:
case RouteExecutionStatus.Done | RouteExecutionStatus.Refunded:
case 'warning':
return {
color: theme.vars.palette.warning.mainChannel,
alpha: 0.48,
lightDarken: 0.32,
darkDarken: 0,
};
default:
return {
color: theme.vars.palette.primary.mainChannel,
alpha: 0.12,
lightDarken: 0,
darkDarken: 0,
};
}
};
export const CenterContainer = styled(Box)(() => ({
display: 'grid',
placeItems: 'center',
position: 'relative',
}));
export const IconCircle = styled(Box, {
shouldForwardProp: (prop) => prop !== 'status',
})(({ theme, status }) => {
const statusConfig = getStatusColor(status, theme);
return {
backgroundColor: `rgba(${statusConfig.color} / ${statusConfig.alpha})`,
borderRadius: '50%',
width: 72,
height: 72,
display: 'grid',
position: 'relative',
placeItems: 'center',
'& > svg': {
color: `color-mix(in srgb, rgb(${statusConfig.color}) ${(1 - statusConfig.lightDarken) * 100}%, black)`,
width: 36,
height: 36,
},
...theme.applyStyles('dark', {
'& > svg': {
color: `color-mix(in srgb, rgb(${statusConfig.color}) ${(1 - statusConfig.darkDarken) * 100}%, black)`,
width: 36,
height: 36,
},
}),
};
});
//# sourceMappingURL=StatusBottomSheet.style.js.map