@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.
57 lines • 1.91 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,
darken: 0,
};
case RouteExecutionStatus.Failed:
return {
color: theme.vars.palette.error.mainChannel,
alpha: 0.12,
darken: 0,
};
case RouteExecutionStatus.Done | RouteExecutionStatus.Partial:
case RouteExecutionStatus.Done | RouteExecutionStatus.Refunded:
case 'warning':
return {
color: theme.vars.palette.warning.mainChannel,
alpha: 0.48,
darken: theme.palette.mode === 'light' ? 0.32 : 0,
};
default:
return {
color: theme.vars.palette.primary.mainChannel,
alpha: 0.12,
darken: 0,
};
}
};
export const CenterContainer = styled(Box)(() => ({
display: 'grid',
placeItems: 'center',
position: 'relative',
}));
export const IconCircle = styled(Box, {
shouldForwardProp: (prop) => prop !== 'status',
})(({ theme, status }) => {
const { color, alpha: alphaValue, darken: darkenValue, } = getStatusColor(status, theme);
return {
backgroundColor: `rgba(${color} / ${alphaValue})`,
borderRadius: '50%',
width: 72,
height: 72,
display: 'grid',
position: 'relative',
placeItems: 'center',
'& > svg': {
color: `color-mix(in srgb, rgb(${color}) ${(1 - darkenValue) * 100}%, black)`,
width: 36,
height: 36,
},
};
});
//# sourceMappingURL=StatusBottomSheet.style.js.map