@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.
81 lines • 2.74 kB
JavaScript
import { Box, circularProgressClasses, keyframes, CircularProgress as MuiCircularProgress, styled, } from '@mui/material';
const getStatusColor = (theme, status, substatus) => {
switch (status) {
case 'ACTION_REQUIRED':
case 'MESSAGE_REQUIRED':
case 'RESET_REQUIRED':
return `rgba(${theme.vars.palette.info.mainChannel} / 0.12)`;
case 'DONE':
if (substatus === 'PARTIAL' || substatus === 'REFUNDED') {
return `rgba(${theme.vars.palette.warning.mainChannel} / 0.48)`;
}
return `rgba(${theme.vars.palette.success.mainChannel} / 0.12)`;
case 'FAILED':
return `rgba(${theme.vars.palette.error.mainChannel} / 0.12)`;
default:
return null;
}
};
export const CircularIcon = styled(Box, {
shouldForwardProp: (prop) => !['status', 'substatus'].includes(prop),
})(({ theme, status, substatus }) => {
const statusColor = getStatusColor(theme, status, substatus);
const isSpecialStatus = [
'ACTION_REQUIRED',
'MESSAGE_REQUIRED',
'RESET_REQUIRED',
'DONE',
'FAILED',
].includes(status);
return {
backgroundColor: isSpecialStatus
? statusColor
: theme.vars.palette.background.paper,
borderStyle: 'solid',
borderColor: statusColor || theme.vars.palette.grey[300],
borderWidth: !isSpecialStatus ? 3 : 0,
display: 'grid',
position: 'relative',
placeItems: 'center',
width: 40,
height: 40,
borderRadius: '50%',
...theme.applyStyles('dark', {
borderColor: statusColor || theme.vars.palette.grey[800],
}),
};
});
const circleAnimation = keyframes `
0% {
stroke-dashoffset: 129;
transform: rotate(0);
}
50% {
stroke-dashoffset: 56;
transform: rotate(45deg);
};
100% {
stroke-dashoffset: 129;
transform: rotate(360deg);
}
`;
// This `styled()` function invokes keyframes. `styled-components` only supports keyframes
// in string templates. Do not convert these styles in JS object as it will break.
export const CircularProgressPending = styled(MuiCircularProgress) `
color: ${({ theme }) => theme.vars.palette.primary.main};
${({ theme }) => theme.applyStyles('dark', {
color: theme.vars.palette.primary.light,
})}
animation-duration: 3s;
position: absolute;
.${circularProgressClasses.circle} {
animation-duration: 2s;
animation-timing-function: linear;
animation-name: ${circleAnimation};
stroke-dasharray: 129;
stroke-dashoffset: 129;
stroke-linecap: round;
transform-origin: 100% 100%;
}
`;
//# sourceMappingURL=CircularProgress.style.js.map