diff --git a/lib/tx/arbitrumMessageStatusDescription.ts b/lib/tx/arbitrumMessageStatusDescription.ts new file mode 100644 index 0000000000..8f2a635a12 --- /dev/null +++ b/lib/tx/arbitrumMessageStatusDescription.ts @@ -0,0 +1,10 @@ +/* eslint-disable max-len */ +import type { ArbitrumMessageStatus } from 'types/api/transaction'; + +export const MESSAGE_DESCRIPTIONS: Record = { + 'Syncing with base layer': 'The incoming message was discovered on the rollup, but the corresponding message on L1 has not yet been found', + 'Settlement pending': 'The transaction with the message was included in a rollup block, but there is no batch on L1 containing the block yet', + 'Waiting for confirmation': 'The rollup block with the transaction containing the message was included in a batch on L1, but it is still waiting for the expiration of the fraud proof countdown', + 'Ready for relay': 'The rollup state was confirmed successfully, and the message can be executed—funds can be claimed on L1', + Relayed: '', +}; diff --git a/types/api/transaction.ts b/types/api/transaction.ts index fee1043bfa..782120bb50 100644 --- a/types/api/transaction.ts +++ b/types/api/transaction.ts @@ -111,8 +111,14 @@ type ArbitrumTransactionData = { network_fee: string; poster_fee: string; status: ArbitrumBatchStatus; + message_related_info: { + associated_l1_transaction: string | null; + message_status: ArbitrumMessageStatus; + }; } +export type ArbitrumMessageStatus = 'Relayed' | 'Syncing with base layer' | 'Waiting for confirmation' | 'Ready for relay' | 'Settlement pending'; + export const ZKEVM_L2_TX_STATUSES = [ 'Confirmed by Sequencer', 'L1 Confirmed' ]; export interface TransactionsStats { diff --git a/ui/tx/details/TxInfo.tsx b/ui/tx/details/TxInfo.tsx index 29f5093f09..386f57eb48 100644 --- a/ui/tx/details/TxInfo.tsx +++ b/ui/tx/details/TxInfo.tsx @@ -10,6 +10,7 @@ import { chakra, useColorModeValue, Skeleton, + HStack, } from '@chakra-ui/react'; import BigNumber from 'bignumber.js'; import React from 'react'; @@ -26,6 +27,7 @@ import config from 'configs/app'; import { WEI, WEI_IN_GWEI } from 'lib/consts'; import getArbitrumVerificationStepStatus from 'lib/getArbitrumVerificationStepStatus'; import getNetworkValidatorTitle from 'lib/networks/getNetworkValidatorTitle'; +import { MESSAGE_DESCRIPTIONS } from 'lib/tx/arbitrumMessageStatusDescription'; import getConfirmationDuration from 'lib/tx/getConfirmationDuration'; import { currencyUnits } from 'lib/units'; import Tag from 'ui/shared/chakra/Tag'; @@ -40,6 +42,7 @@ import BatchEntityL2 from 'ui/shared/entities/block/BatchEntityL2'; import BlockEntity from 'ui/shared/entities/block/BlockEntity'; import TxEntityL1 from 'ui/shared/entities/tx/TxEntityL1'; import HashStringShortenDynamic from 'ui/shared/HashStringShortenDynamic'; +import Hint from 'ui/shared/Hint'; import IconSvg from 'ui/shared/IconSvg'; import LogDecodedInputData from 'ui/shared/logs/LogDecodedInputData'; import RawInputData from 'ui/shared/RawInputData'; @@ -81,6 +84,14 @@ const TxInfo = ({ data, isLoading, socketStatus }: Props) => { }, []); const executionSuccessIconColor = useColorModeValue('blackAlpha.800', 'whiteAlpha.800'); + const showAssociatedL1Tx = React.useCallback(() => { + setIsExpanded(true); + scroller.scrollTo('TxInfo__cutLink', { + duration: 500, + smooth: true, + }); + }, []); + if (!data) { return null; } @@ -169,9 +180,11 @@ const TxInfo = ({ data, isLoading, socketStatus }: Props) => { ) } { data.arbitrum?.contains_message && ( - - { data.arbitrum?.contains_message === 'incoming' ? 'Incoming message' : 'Outgoing message' } - + + + { data.arbitrum?.contains_message === 'incoming' ? 'Incoming message' : 'Outgoing message' } + + ) } @@ -776,6 +789,30 @@ const TxInfo = ({ data, isLoading, socketStatus }: Props) => { { isExpanded && ( <> + + { data.arbitrum?.message_related_info && ( + <> + + { data.arbitrum.contains_message === 'incoming' ? 'Originating L1 txn hash' : 'Completion L1 txn hash' } + + + { data.arbitrum.message_related_info.associated_l1_transaction ? + : ( + + { data.arbitrum.message_related_info.message_status } + + + ) + } + + + ) } + { (data.blob_gas_used || data.max_fee_per_blob_gas || data.blob_gas_price) && ( <> { data.blob_gas_used && data.blob_gas_price && (