import { ArrowRightOutlined, LoadingOutlined, PauseCircleOutlined } from '@ant-design/icons' import { getChainById, Route, Step } from '@lifi/sdk' import { Timeline, Typography } from 'antd' import { renderProcessError, renderProcessMessage } from '../../../services/processRenderer' import { formatTokenAmount, parseSecondsAsTime } from '../../../services/utils' import { getChainAvatar, getToolAvatar } from '../../Avatars/Avatars' import Clock from '../../Clock' interface LIFIRouteStepsProps { lifiRoute: Route isSwapping: boolean isMobile: boolean } export const LIFIRouteSteps = ({ lifiRoute, isSwapping, isMobile }: LIFIRouteStepsProps) => { const parseExecution = (step: Step) => { if (!step.execution) { return [] } return step.execution.process.map((process, index, processList) => { const type = process.status === 'DONE' ? 'success' : process.status === 'FAILED' ? 'danger' : undefined const hasFailed = process.status === 'FAILED' const isLastPendingProcess = index === processList.length - 1 && process.status === 'PENDING' return (

{renderProcessMessage(process)}

{hasFailed && ( {renderProcessError(process)} )}
) }) } const parseStepToTimeline = (step: Step, index: number) => { const executionSteps = parseExecution(step) const isDone = step.execution && step.execution.status === 'DONE' const isLoading = isSwapping && step.execution && step.execution.status === 'PENDING' const isPaused = !isSwapping && step.execution && step.execution.status === 'PENDING' const color = isDone ? 'green' : step.execution ? 'blue' : 'gray' const executionDuration = !!step.estimate.executionDuration && ( <>
Estimated duration: {parseSecondsAsTime(step.estimate.executionDuration)} min ) const executionItem = [ : isPaused ? : null}> {executionSteps} , ] switch (step.type) { case 'swap': { return [

Swap on {getToolAvatar(step)}

{formatTokenAmount(step.action.fromToken, step.estimate?.fromAmount)}{' '} {' '} {formatTokenAmount(step.action.toToken, step.estimate?.toAmount)} {executionDuration}
, !!step.execution || lifiRoute.steps.length - 1 === index ? executionItem : <>, ] } case 'cross': { const { action, estimate } = step return [

Transfer from {getChainAvatar(getChainById(action.fromChainId).key)} to{' '} {getChainAvatar(getChainById(action.toChainId).key)} via {getToolAvatar(step)}

{formatTokenAmount(action.fromToken, estimate.fromAmount)} {' '} {formatTokenAmount(action.toToken, estimate.toAmount)} {executionDuration}
, !!step.execution || lifiRoute.steps.length - 1 === index ? executionItem : <>, ] } case 'lifi': { return [

LI.FI Contract from {getChainAvatar(getChainById(step.action.fromChainId).key)} to{' '} {getChainAvatar(getChainById(step.action.toChainId).key)} via {getToolAvatar(step)}

{formatTokenAmount(step.action.fromToken, step.estimate?.fromAmount)}{' '} {' '} {formatTokenAmount(step.action.toToken, step.estimate?.toAmount)} {executionDuration}
, !!step.execution || lifiRoute.steps.length - 1 === index ? executionItem : <>, ] } default: // eslint-disable-next-line no-console console.warn('should never reach here') } } return lifiRoute.steps.map(parseStepToTimeline) }