diff --git a/deploy/values/review-l2/values.yaml.gotmpl b/deploy/values/review-l2/values.yaml.gotmpl index 98fb23c8ff..e55c460edf 100644 --- a/deploy/values/review-l2/values.yaml.gotmpl +++ b/deploy/values/review-l2/values.yaml.gotmpl @@ -68,6 +68,7 @@ frontend: NEXT_PUBLIC_OPTIMISTIC_L2_WITHDRAWAL_URL: https://app.optimism.io/bridge/withdraw NEXT_PUBLIC_L1_BASE_URL: https://blockscout-main.k8s-dev.blockscout.com NEXT_PUBLIC_GRAPHIQL_TRANSACTION: 0x4a0ed8ddf751a7cb5297f827699117b0f6d21a0b2907594d300dc9fed75c7e62 + NEXT_PUBLIC_USE_NEXT_JS_PROXY: true envFromSecret: NEXT_PUBLIC_SENTRY_DSN: ref+vault://deployment-values/blockscout/dev/review-l2?token_env=VAULT_TOKEN&address=https://vault.k8s.blockscout.com#/NEXT_PUBLIC_SENTRY_DSN SENTRY_CSP_REPORT_URI: ref+vault://deployment-values/blockscout/dev/review-l2?token_env=VAULT_TOKEN&address=https://vault.k8s.blockscout.com#/SENTRY_CSP_REPORT_URI diff --git a/types/api/l2Withdrawals.ts b/types/api/l2Withdrawals.ts index e3f69005a3..e9a9103e79 100644 --- a/types/api/l2Withdrawals.ts +++ b/types/api/l2Withdrawals.ts @@ -11,12 +11,15 @@ export type L2WithdrawalsItem = { 'status': string; } -export type L2WithdrawalStatus = - 'In challenge period' | - 'Ready for relay' | - 'Relayed' | - 'Waiting for state root' | - 'Ready to prove'; +export const WITHDRAWAL_STATUSES = [ + 'Waiting for state root', + 'Ready to prove', + 'In challenge period', + 'Ready for relay', + 'Relayed', +] as const; + +export type L2WithdrawalStatus = typeof WITHDRAWAL_STATUSES[number]; export type L2WithdrawalsResponse = { items: Array; diff --git a/types/api/transaction.ts b/types/api/transaction.ts index 2dec0a2f95..e4e669bbfd 100644 --- a/types/api/transaction.ts +++ b/types/api/transaction.ts @@ -2,6 +2,7 @@ import type { AddressParam } from './addressParams'; import type { BlockTransactionsResponse } from './block'; import type { DecodedInput } from './decodedInput'; import type { Fee } from './fee'; +import type { L2WithdrawalStatus } from './l2Withdrawals'; import type { TokenInfo } from './token'; import type { TokenTransfer } from './tokenTransfer'; import type { TxAction } from './txAction'; @@ -52,6 +53,9 @@ export type Transaction = { l1_gas_price?: string; l1_gas_used?: string; has_error_in_internal_txs: boolean | null; + // optimism fields + op_withdrawal_status?: L2WithdrawalStatus; + op_l1_transaction_hash?: string; // SUAVE fields execution_node?: AddressParam | null; allowed_peekers?: Array; diff --git a/ui/shared/verificationSteps/VerificationSteps.tsx b/ui/shared/verificationSteps/VerificationSteps.tsx index a07ec743c8..5be0b23661 100644 --- a/ui/shared/verificationSteps/VerificationSteps.tsx +++ b/ui/shared/verificationSteps/VerificationSteps.tsx @@ -1,4 +1,4 @@ -import { Skeleton } from '@chakra-ui/react'; +import { Skeleton, chakra } from '@chakra-ui/react'; import React from 'react'; import VerificationStep from './VerificationStep'; @@ -7,13 +7,16 @@ export interface Props { step: T; steps: Array; isLoading?: boolean; + rightSlot?: React.ReactNode; + className?: string; } -const VerificationSteps = ({ step, steps, isLoading }: Props) => { +const VerificationSteps = ({ step, steps, isLoading, rightSlot, className }: Props) => { const currentStepIndex = steps.indexOf(step); return ( ({ step, steps, isLoading }: Props { steps.map((step, index) => ( - + )) } + { rightSlot } ); }; -export default VerificationSteps; +export default chakra(VerificationSteps); diff --git a/ui/tx/TxDetails.tsx b/ui/tx/TxDetails.tsx index 8612d8ba57..c2d922f11e 100644 --- a/ui/tx/TxDetails.tsx +++ b/ui/tx/TxDetails.tsx @@ -54,6 +54,7 @@ import TxDetailsFeePerGas from 'ui/tx/details/TxDetailsFeePerGas'; import TxDetailsGasPrice from 'ui/tx/details/TxDetailsGasPrice'; import TxDetailsOther from 'ui/tx/details/TxDetailsOther'; import TxDetailsTokenTransfers from 'ui/tx/details/TxDetailsTokenTransfers'; +import TxDetailsWithdrawalStatus from 'ui/tx/details/TxDetailsWithdrawalStatus'; import TxRevertReason from 'ui/tx/details/TxRevertReason'; import TxAllowedPeekers from 'ui/tx/TxAllowedPeekers'; import TxSocketAlert from 'ui/tx/TxSocketAlert'; @@ -156,6 +157,10 @@ const TxDetails = () => { ) } + { data.zkevm_status && ( { + if (!config.features.optimisticRollup.isEnabled) { + return null; + } + + if (!status || !WITHDRAWAL_STATUSES.includes(status)) { + return null; + } + + const rightSlot = (() => { + if (status === 'Relayed' && l1TxHash) { + return ; + } + + if (status === 'Ready for relay') { + return ( + + ); + } + + return null; + })(); + + return ( + + } + step={ status } + rightSlot={ rightSlot } + my={ status === 'Ready for relay' ? '-6px' : 0 } + lineHeight={ status === 'Ready for relay' ? 8 : undefined } + /> + + ); +}; + +export default React.memo(TxDetailsWithdrawalStatus);