@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.
54 lines (53 loc) • 3.5 kB
JavaScript
;
Object.defineProperty(exports, "__esModule", { value: true });
exports.ActiveTransactionItem = void 0;
const jsx_runtime_1 = require("react/jsx-runtime");
const ArrowForward_1 = require("@mui/icons-material/ArrowForward");
const ErrorRounded_1 = require("@mui/icons-material/ErrorRounded");
const InfoRounded_1 = require("@mui/icons-material/InfoRounded");
const material_1 = require("@mui/material");
const react_router_dom_1 = require("react-router-dom");
const hooks_1 = require("../../hooks");
const stores_1 = require("../../stores");
const utils_1 = require("../../utils");
const StepTimer_1 = require("../Step/StepTimer");
const TokenAvatar_1 = require("../TokenAvatar");
const ActiveTransactions_style_1 = require("./ActiveTransactions.style");
const ActiveTransactionItem = ({ routeId, dense }) => {
const navigate = (0, react_router_dom_1.useNavigate)();
const { route, status } = (0, hooks_1.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 } = (0, hooks_1.useProcessMessage)(lastActiveStep, lastActiveProcess);
if (!route || !lastActiveStep) {
return null;
}
const handleClick = () => {
navigate(utils_1.navigationRoutes.transactionExecution, { state: { routeId } });
};
const getStatusComponent = () => {
switch (lastActiveProcess?.status) {
case 'ACTION_REQUIRED':
return (0, jsx_runtime_1.jsx)(InfoRounded_1.default, { color: "info", fontSize: "small" });
case 'FAILED':
return (0, jsx_runtime_1.jsx)(ErrorRounded_1.default, { color: "error", fontSize: "small" });
default:
return ((0, jsx_runtime_1.jsx)(material_1.Typography, { fontSize: 14, fontWeight: 500, children: (0, jsx_runtime_1.jsx)(StepTimer_1.StepTimer, { step: lastActiveStep, hideInProgress: true }) }));
}
};
const ListItemComponent = dense ? ActiveTransactions_style_1.ListItem : ActiveTransactions_style_1.ListItemButton;
return ((0, jsx_runtime_1.jsxs)(ListItemComponent, { onClick: handleClick, dense: true, disableRipple: dense, children: [(0, jsx_runtime_1.jsx)(material_1.ListItemAvatar, { children: (0, jsx_runtime_1.jsxs)(TokenAvatar_1.TokenAvatarGroup, { total: 2, children: [(0, jsx_runtime_1.jsx)(TokenAvatar_1.TokenAvatar, { token: route.fromToken }), (0, jsx_runtime_1.jsx)(TokenAvatar_1.TokenAvatar, { token: route.toToken })] }) }), (0, jsx_runtime_1.jsx)(material_1.ListItemText, { sx: { margin: 0 }, disableTypography: true, primary: (0, jsx_runtime_1.jsxs)(material_1.Typography, { fontWeight: 500, lineHeight: 1, sx: {
display: 'flex',
alignItems: 'center',
marginLeft: 2,
height: 16,
}, children: [route.fromToken.symbol, (0, jsx_runtime_1.jsx)(ArrowForward_1.default, { sx: { paddingX: 0.5 } }), route.toToken.symbol] }), secondary: status !== stores_1.RouteExecutionStatus.Done ? ((0, jsx_runtime_1.jsx)(material_1.Typography, { fontWeight: 400, fontSize: 12, color: "text.secondary", lineHeight: 1, mt: 0.75, ml: 2, children: title })) : null }), getStatusComponent()] }));
};
exports.ActiveTransactionItem = ActiveTransactionItem;