@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.
50 lines (49 loc) • 2.94 kB
JavaScript
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
import ArrowForwardIcon from '@mui/icons-material/ArrowForward';
import ErrorRoundedIcon from '@mui/icons-material/ErrorRounded';
import InfoRoundedIcon from '@mui/icons-material/InfoRounded';
import { ListItemAvatar, ListItemText, Typography } from '@mui/material';
import { useNavigate } from 'react-router-dom';
import { useProcessMessage, useRouteExecution } from '../../hooks';
import { RouteExecutionStatus } from '../../stores';
import { navigationRoutes } from '../../utils';
import { StepTimer } from '../Step/StepTimer';
import { TokenAvatar, TokenAvatarGroup } from '../TokenAvatar';
import { ListItem, ListItemButton } from './ActiveTransactions.style';
export const ActiveTransactionItem = ({ routeId, dense }) => {
const navigate = useNavigate();
const { route, status } = useRouteExecution({
routeId,
executeInBackground: true,
});
// TODO: replace with ES2023 findLast
const lastActiveStep = route?.steps
.slice()
.reverse()
.find((step) => step.execution);
const lastActiveProcess = lastActiveStep?.execution?.process.at(-1);
const { title } = useProcessMessage(lastActiveStep, lastActiveProcess);
if (!route || !lastActiveStep) {
return null;
}
const handleClick = () => {
navigate(navigationRoutes.transactionExecution, { state: { routeId } });
};
const getStatusComponent = () => {
switch (lastActiveProcess?.status) {
case 'ACTION_REQUIRED':
return _jsx(InfoRoundedIcon, { color: "info", fontSize: "small" });
case 'FAILED':
return _jsx(ErrorRoundedIcon, { color: "error", fontSize: "small" });
default:
return (_jsx(Typography, { fontSize: 14, fontWeight: 500, children: _jsx(StepTimer, { step: lastActiveStep, hideInProgress: true }) }));
}
};
const ListItemComponent = dense ? ListItem : ListItemButton;
return (_jsxs(ListItemComponent, { onClick: handleClick, dense: true, disableRipple: dense, children: [_jsx(ListItemAvatar, { children: _jsxs(TokenAvatarGroup, { total: 2, children: [_jsx(TokenAvatar, { token: route.fromToken }), _jsx(TokenAvatar, { token: route.toToken })] }) }), _jsx(ListItemText, { sx: { margin: 0 }, disableTypography: true, primary: _jsxs(Typography, { fontWeight: 500, lineHeight: 1, sx: {
display: 'flex',
alignItems: 'center',
marginLeft: 2,
height: 16,
}, children: [route.fromToken.symbol, _jsx(ArrowForwardIcon, { sx: { paddingX: 0.5 } }), route.toToken.symbol] }), secondary: status !== RouteExecutionStatus.Done ? (_jsx(Typography, { fontWeight: 400, fontSize: 12, color: "text.secondary", lineHeight: 1, mt: 0.75, ml: 2, children: title })) : null }), getStatusComponent()] }));
};