@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.
88 lines • 5.22 kB
JavaScript
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
import { Box, Typography } from '@mui/material';
import { useEffect, useMemo } from 'react';
import { useTranslation } from 'react-i18next';
import { useLocation } from 'react-router-dom';
import { ContractComponent } from '../../components/ContractComponent/ContractComponent.js';
import { PageContainer } from '../../components/PageContainer.js';
import { getStepList } from '../../components/Step/StepList.js';
import { TransactionDetails } from '../../components/TransactionDetails.js';
import { internalExplorerUrl } from '../../config/constants.js';
import { useExplorer } from '../../hooks/useExplorer.js';
import { useHeader } from '../../hooks/useHeader.js';
import { useNavigateBack } from '../../hooks/useNavigateBack.js';
import { useTools } from '../../hooks/useTools.js';
import { useTransactionDetails } from '../../hooks/useTransactionDetails.js';
import { useWidgetConfig } from '../../providers/WidgetProvider/WidgetProvider.js';
import { useRouteExecutionStore } from '../../stores/routes/RouteExecutionStore.js';
import { getSourceTxHash } from '../../stores/routes/utils.js';
import { HiddenUI } from '../../types/widget.js';
import { buildRouteFromTxHistory } from '../../utils/converters.js';
import { navigationRoutes } from '../../utils/navigationRoutes.js';
import { ContactSupportButton } from './ContactSupportButton.js';
import { TransactionDetailsSkeleton } from './TransactionDetailsSkeleton.js';
import { TransferIdCard } from './TransferIdCard.js';
export const TransactionDetailsPage = () => {
const { t, i18n } = useTranslation();
const { navigate } = useNavigateBack();
const { subvariant, subvariantOptions, contractSecondaryComponent, explorerUrls, hiddenUI, } = useWidgetConfig();
const { state } = useLocation();
const { tools } = useTools();
const { getTransactionLink } = useExplorer();
const storedRouteExecution = useRouteExecutionStore((store) => store.routes[state?.routeId]);
const { transaction, isLoading } = useTransactionDetails(!storedRouteExecution && state?.transactionHash);
const title = subvariant === 'custom'
? t(`header.${subvariantOptions?.custom ?? 'checkout'}Details`)
: t('header.transactionDetails');
useHeader(title);
const routeExecution = useMemo(() => {
if (storedRouteExecution) {
return storedRouteExecution;
}
if (isLoading) {
return;
}
if (transaction) {
const routeExecution = buildRouteFromTxHistory(transaction, tools);
return routeExecution;
}
}, [isLoading, storedRouteExecution, tools, transaction]);
useEffect(() => {
if (!isLoading && !routeExecution) {
navigate(navigationRoutes.home);
}
}, [isLoading, navigate, routeExecution]);
const explorerUrl = explorerUrls?.internal?.[0];
const url = typeof explorerUrl === 'string' ? explorerUrl : explorerUrl?.url;
const sourceTxHash = getSourceTxHash(routeExecution?.route);
let supportId = sourceTxHash ?? routeExecution?.route.id ?? '';
const internalTxLink = routeExecution?.route?.steps?.at(-1)?.execution?.internalTxLink;
const externalTxLink = routeExecution?.route?.steps?.at(-1)?.execution?.externalTxLink;
const txLink = (url
? internalTxLink?.replace(internalExplorerUrl, url)
: internalTxLink) ||
externalTxLink ||
getTransactionLink({ txHash: supportId });
if (process.env.NODE_ENV === 'development') {
supportId += `_${routeExecution?.route.id}`;
}
const startedAt = new Date((routeExecution?.route.steps[0].execution?.process[0].startedAt ?? 0) *
(storedRouteExecution ? 1 : 1000) // local and BE routes have different ms handling
);
return isLoading && !storedRouteExecution ? (_jsx(TransactionDetailsSkeleton, {})) : (_jsxs(PageContainer, { bottomGutters: true, children: [_jsxs(Box, { sx: {
pb: 1,
display: 'flex',
justifyContent: 'space-between',
}, children: [_jsx(Typography, { sx: {
fontSize: 12,
}, children: startedAt.toLocaleString(i18n.language, {
dateStyle: 'long',
}) }), _jsx(Typography, { sx: {
fontSize: 12,
}, children: startedAt.toLocaleString(i18n.language, {
timeStyle: 'short',
}) })] }), getStepList(routeExecution?.route, subvariant), subvariant === 'custom' && contractSecondaryComponent ? (_jsx(ContractComponent, { sx: { marginTop: 2 }, children: contractSecondaryComponent })) : null, routeExecution?.route ? (_jsx(TransactionDetails, { route: routeExecution?.route, sx: { marginTop: 2 } })) : null, _jsx(TransferIdCard, { transferId: supportId, txLink: txLink }), !hiddenUI?.includes(HiddenUI.ContactSupport) ? (_jsx(Box, { sx: {
mt: 2,
}, children: _jsx(ContactSupportButton, { supportId: supportId }) })) : null] }));
};
//# sourceMappingURL=TransactionDetailsPage.js.map