diff --git a/configs/app/features/index.ts b/configs/app/features/index.ts index 9bd4c2253c..13ed303989 100644 --- a/configs/app/features/index.ts +++ b/configs/app/features/index.ts @@ -13,7 +13,7 @@ export { default as marketplace } from './marketplace'; export { default as mixpanel } from './mixpanel'; export { default as nameService } from './nameService'; export { default as restApiDocs } from './restApiDocs'; -export { default as optimisticRollup } from './optimisticRollup'; +export { default as rollup } from './rollup'; export { default as safe } from './safe'; export { default as sentry } from './sentry'; export { default as sol2uml } from './sol2uml'; @@ -23,4 +23,3 @@ export { default as txInterpretation } from './txInterpretation'; export { default as userOps } from './userOps'; export { default as verifiedTokens } from './verifiedTokens'; export { default as web3Wallet } from './web3Wallet'; -export { default as zkEvmRollup } from './zkEvmRollup'; diff --git a/configs/app/features/optimisticRollup.ts b/configs/app/features/optimisticRollup.ts deleted file mode 100644 index 6b4f646d59..0000000000 --- a/configs/app/features/optimisticRollup.ts +++ /dev/null @@ -1,30 +0,0 @@ -import type { Feature } from './types'; - -import { getEnvValue } from '../utils'; - -const title = 'Rollup (L2) chain'; - -const config: Feature<{ L1BaseUrl: string; withdrawalUrl: string }> = (() => { - const L1BaseUrl = getEnvValue('NEXT_PUBLIC_L1_BASE_URL'); - const withdrawalUrl = getEnvValue('NEXT_PUBLIC_OPTIMISTIC_L2_WITHDRAWAL_URL'); - - if ( - getEnvValue('NEXT_PUBLIC_IS_OPTIMISTIC_L2_NETWORK') === 'true' && - L1BaseUrl && - withdrawalUrl - ) { - return Object.freeze({ - title, - isEnabled: true, - L1BaseUrl, - withdrawalUrl, - }); - } - - return Object.freeze({ - title, - isEnabled: false, - }); -})(); - -export default config; diff --git a/configs/app/features/rollup.ts b/configs/app/features/rollup.ts new file mode 100644 index 0000000000..2560734097 --- /dev/null +++ b/configs/app/features/rollup.ts @@ -0,0 +1,35 @@ +import type { Feature } from './types'; +import type { RollupType } from 'types/client/rollup'; +import { ROLLUP_TYPES } from 'types/client/rollup'; + +import { getEnvValue } from '../utils'; + +const type = (() => { + const envValue = getEnvValue('NEXT_PUBLIC_ROLLUP_TYPE'); + return ROLLUP_TYPES.find((type) => type === envValue); +})(); + +const L1BaseUrl = getEnvValue('NEXT_PUBLIC_ROLLUP_L1_BASE_URL'); +const L2WithdrawalUrl = getEnvValue('NEXT_PUBLIC_ROLLUP_L2_WITHDRAWAL_URL'); + +const title = 'Rollup (L2) chain'; + +const config: Feature<{ type: RollupType; L1BaseUrl: string; L2WithdrawalUrl?: string }> = (() => { + + if (type && L1BaseUrl) { + return Object.freeze({ + title, + isEnabled: true, + type, + L1BaseUrl, + L2WithdrawalUrl, + }); + } + + return Object.freeze({ + title, + isEnabled: false, + }); +})(); + +export default config; diff --git a/configs/app/features/zkEvmRollup.ts b/configs/app/features/zkEvmRollup.ts deleted file mode 100644 index 7fda84b09f..0000000000 --- a/configs/app/features/zkEvmRollup.ts +++ /dev/null @@ -1,25 +0,0 @@ -import type { Feature } from './types'; - -import { getEnvValue } from '../utils'; - -const title = 'ZkEVM rollup (L2) chain'; - -const config: Feature<{ L1BaseUrl: string; withdrawalUrl?: string }> = (() => { - const L1BaseUrl = getEnvValue('NEXT_PUBLIC_L1_BASE_URL'); - const isZkEvm = getEnvValue('NEXT_PUBLIC_IS_ZKEVM_L2_NETWORK') === 'true'; - - if (isZkEvm && L1BaseUrl) { - return Object.freeze({ - title, - isEnabled: true, - L1BaseUrl, - }); - } - - return Object.freeze({ - title, - isEnabled: false, - }); -})(); - -export default config; diff --git a/configs/envs/.env.jest b/configs/envs/.env.jest index 7a14a10b01..52f14201e3 100644 --- a/configs/envs/.env.jest +++ b/configs/envs/.env.jest @@ -44,8 +44,6 @@ NEXT_PUBLIC_APP_INSTANCE=jest NEXT_PUBLIC_APP_ENV=testing NEXT_PUBLIC_MARKETPLACE_CONFIG_URL=https://localhost:3000/marketplace-config.json NEXT_PUBLIC_MARKETPLACE_SUBMIT_FORM=https://localhost:3000/marketplace-submit-form -NEXT_PUBLIC_IS_OPTIMISTIC_L2_NETWORK=false -NEXT_PUBLIC_IS_ZKEVM_L2_NETWORK=false NEXT_PUBLIC_IS_ACCOUNT_SUPPORTED=true NEXT_PUBLIC_AUTH_URL=http://localhost:3100 NEXT_PUBLIC_LOGOUT_URL=https://blockscoutcom.us.auth0.com/v2/logout diff --git a/configs/envs/.env.main.L2 b/configs/envs/.env.main.L2 index fb9359be95..e410b29b8e 100644 --- a/configs/envs/.env.main.L2 +++ b/configs/envs/.env.main.L2 @@ -47,6 +47,6 @@ NEXT_PUBLIC_LOGOUT_URL=https://blockscoutcom.us.auth0.com/v2/logout NEXT_PUBLIC_MARKETPLACE_CONFIG_URL=https://raw.githubusercontent.com/blockscout/frontend-configs/dev/configs/marketplace/base-goerli.json NEXT_PUBLIC_MARKETPLACE_SUBMIT_FORM=https://airtable.com/shrqUAcjgGJ4jU88C NEXT_PUBLIC_STATS_API_HOST=https://stats-optimism-goerli.k8s-dev.blockscout.com -NEXT_PUBLIC_IS_OPTIMISTIC_L2_NETWORK=true -NEXT_PUBLIC_L1_BASE_URL=https://blockscout-main.k8s-dev.blockscout.com -NEXT_PUBLIC_OPTIMISTIC_L2_WITHDRAWAL_URL=https://app.optimism.io/bridge/withdraw +NEXT_PUBLIC_ROLLUP_TYPE=optimistic +NEXT_PUBLIC_ROLLUP_L1_BASE_URL=https://blockscout-main.k8s-dev.blockscout.com +NEXT_PUBLIC_ROLLUP_L2_WITHDRAWAL_URL=https://app.optimism.io/bridge/withdraw diff --git a/configs/envs/.env.pw b/configs/envs/.env.pw index 999347058b..f8b8ac0c8d 100644 --- a/configs/envs/.env.pw +++ b/configs/envs/.env.pw @@ -41,8 +41,6 @@ NEXT_PUBLIC_APP_ENV=testing NEXT_PUBLIC_APP_INSTANCE=pw NEXT_PUBLIC_MARKETPLACE_CONFIG_URL=https://localhost:3000/marketplace-config.json NEXT_PUBLIC_MARKETPLACE_SUBMIT_FORM=https://localhost:3000/marketplace-submit-form -NEXT_PUBLIC_IS_OPTIMISTIC_L2_NETWORK=false -NEXT_PUBLIC_IS_ZKEVM_L2_NETWORK=false NEXT_PUBLIC_AD_BANNER_PROVIDER=slise NEXT_PUBLIC_IS_ACCOUNT_SUPPORTED=true NEXT_PUBLIC_AUTH_URL=http://localhost:3100 diff --git a/configs/envs/.env.zkevm b/configs/envs/.env.zkevm index 30cab10db0..9d1ef2487a 100644 --- a/configs/envs/.env.zkevm +++ b/configs/envs/.env.zkevm @@ -47,5 +47,5 @@ NEXT_PUBLIC_VISUALIZE_API_HOST=https://visualizer.services.blockscout.com NEXT_PUBLIC_CONTRACT_INFO_API_HOST=https://contracts-info.services.blockscout.com NEXT_PUBLIC_ADMIN_SERVICE_API_HOST=https://admin-rs.services.blockscout.com # rollup -NEXT_PUBLIC_IS_ZKEVM_L2_NETWORK=true -NEXT_PUBLIC_L1_BASE_URL=https://polygon.blockscout.com +NEXT_PUBLIC_ROLLUP_TYPE=zkEvm +NEXT_PUBLIC_ROLLUP_L1_BASE_URL=https://polygon.blockscout.com diff --git a/deploy/tools/envs-validator/schema.ts b/deploy/tools/envs-validator/schema.ts index 9019fb2015..efb296d265 100644 --- a/deploy/tools/envs-validator/schema.ts +++ b/deploy/tools/envs-validator/schema.ts @@ -15,6 +15,7 @@ import type { ContractCodeIde } from '../../../types/client/contract'; import type { MarketplaceAppOverview } from '../../../types/client/marketplace'; import { NAVIGATION_LINK_IDS } from '../../../types/client/navigation-items'; import type { NavItemExternal, NavigationLinkId } from '../../../types/client/navigation-items'; +import { ROLLUP_TYPES } from '../../../types/client/rollup'; import type { BridgedTokenChain, TokenBridge } from '../../../types/client/token'; import { PROVIDERS as TX_INTERPRETATION_PROVIDERS } from '../../../types/client/txInterpretation'; import type { WalletType } from '../../../types/client/wallets'; @@ -114,23 +115,20 @@ const beaconChainSchema = yup const rollupSchema = yup .object() .shape({ - NEXT_PUBLIC_IS_OPTIMISTIC_L2_NETWORK: yup.boolean(), - NEXT_PUBLIC_OPTIMISTIC_L2_WITHDRAWAL_URL: yup + NEXT_PUBLIC_ROLLUP_TYPE: yup.string().oneOf(ROLLUP_TYPES), + NEXT_PUBLIC_ROLLUP_L1_BASE_URL: yup .string() - .when('NEXT_PUBLIC_IS_OPTIMISTIC_L2_NETWORK', { + .when('NEXT_PUBLIC_ROLLUP_TYPE', { is: (value: string) => value, then: (schema) => schema.test(urlTest).required(), - // eslint-disable-next-line max-len - otherwise: (schema) => schema.max(-1, 'NEXT_PUBLIC_OPTIMISTIC_L2_WITHDRAWAL_URL cannot not be used if NEXT_PUBLIC_IS_OPTIMISTIC_L2_NETWORK is not set to "true"'), + otherwise: (schema) => schema.max(-1, 'NEXT_PUBLIC_ROLLUP_L1_BASE_URL cannot not be used if NEXT_PUBLIC_ROLLUP_TYPE is not defined'), }), - NEXT_PUBLIC_IS_ZKEVM_L2_NETWORK: yup.boolean(), - NEXT_PUBLIC_L1_BASE_URL: yup + NEXT_PUBLIC_ROLLUP_L2_WITHDRAWAL_URL: yup .string() - .when([ 'NEXT_PUBLIC_IS_OPTIMISTIC_L2_NETWORK', 'NEXT_PUBLIC_IS_ZKEVM_L2_NETWORK' ], { - is: (isOptimistic?: boolean, isZk?: boolean) => isOptimistic || isZk, + .when('NEXT_PUBLIC_ROLLUP_TYPE', { + is: (value: string) => value === 'optimistic', then: (schema) => schema.test(urlTest).required(), - // eslint-disable-next-line max-len - otherwise: (schema) => schema.max(-1, 'NEXT_PUBLIC_L1_BASE_URL cannot not be used if NEXT_PUBLIC_IS_OPTIMISTIC_L2_NETWORK or NEXT_PUBLIC_IS_ZKEVM_L2_NETWORK is not set to "true"'), + otherwise: (schema) => schema.max(-1, 'NEXT_PUBLIC_ROLLUP_L2_WITHDRAWAL_URL cannot not be used if NEXT_PUBLIC_ROLLUP_TYPE is not defined'), }), }); diff --git a/deploy/tools/envs-validator/test/.env.rollup b/deploy/tools/envs-validator/test/.env.rollup index 8534221d99..1cb3e1af88 100644 --- a/deploy/tools/envs-validator/test/.env.rollup +++ b/deploy/tools/envs-validator/test/.env.rollup @@ -1,3 +1,3 @@ -NEXT_PUBLIC_IS_OPTIMISTIC_L2_NETWORK=true -NEXT_PUBLIC_L1_BASE_URL=https://example.com -NEXT_PUBLIC_OPTIMISTIC_L2_WITHDRAWAL_URL=https://example.com \ No newline at end of file +NEXT_PUBLIC_ROLLUP_TYPE=optimistic +NEXT_PUBLIC_ROLLUP_L1_BASE_URL=https://example.com +NEXT_PUBLIC_ROLLUP_L2_WITHDRAWAL_URL=https://example.com \ No newline at end of file diff --git a/deploy/values/l2-optimism-goerli/values.yaml b/deploy/values/l2-optimism-goerli/values.yaml index f743299ddd..cf3a9f8dc1 100644 --- a/deploy/values/l2-optimism-goerli/values.yaml +++ b/deploy/values/l2-optimism-goerli/values.yaml @@ -191,9 +191,9 @@ frontend: NEXT_PUBLIC_VISUALIZE_API_HOST: https://visualizer-test.k8s-dev.blockscout.com NEXT_PUBLIC_CONTRACT_INFO_API_HOST: https://contracts-info-test.k8s-dev.blockscout.com NEXT_PUBLIC_ADMIN_SERVICE_API_HOST: https://admin-rs-test.k8s-dev.blockscout.com - NEXT_PUBLIC_IS_OPTIMISTIC_L2_NETWORK: "true" - NEXT_PUBLIC_L1_BASE_URL: https://eth-goerli.blockscout.com/ - NEXT_PUBLIC_OPTIMISTIC_L2_WITHDRAWAL_URL: https://app.optimism.io/bridge/withdraw + NEXT_PUBLIC_ROLLUP_TYPE: optimistic + NEXT_PUBLIC_ROLLUP_L1_BASE_URL: https://eth-goerli.blockscout.com/ + NEXT_PUBLIC_ROLLUP_L2_WITHDRAWAL_URL: https://app.optimism.io/bridge/withdraw NEXT_PUBLIC_GRAPHIQL_TRANSACTION: 0x4a0ed8ddf751a7cb5297f827699117b0f6d21a0b2907594d300dc9fed75c7e62 envFromSecret: NEXT_PUBLIC_AUTH0_CLIENT_ID: ref+vault://deployment-values/blockscout/dev/front-main?token_env=VAULT_TOKEN&address=https://vault.k8s.blockscout.com#/NEXT_PUBLIC_AUTH0_CLIENT_ID diff --git a/deploy/values/review-l2/values.yaml.gotmpl b/deploy/values/review-l2/values.yaml.gotmpl index fb661d526f..111101feaa 100644 --- a/deploy/values/review-l2/values.yaml.gotmpl +++ b/deploy/values/review-l2/values.yaml.gotmpl @@ -65,9 +65,9 @@ frontend: NEXT_PUBLIC_VISUALIZE_API_HOST: https://visualizer-optimism-goerli.k8s-dev.blockscout.com NEXT_PUBLIC_CONTRACT_INFO_API_HOST: https://contracts-info-test.k8s-dev.blockscout.com NEXT_PUBLIC_ADMIN_SERVICE_API_HOST: https://admin-rs-test.k8s-dev.blockscout.com - NEXT_PUBLIC_IS_OPTIMISTIC_L2_NETWORK: "true" - 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_ROLLUP_TYPE=optimistic + NEXT_PUBLIC_ROLLUP_L1_BASE_URL=https://blockscout-main.k8s-dev.blockscout.com + NEXT_PUBLIC_ROLLUP_L2_WITHDRAWAL_URL=https://app.optimism.io/bridge/withdraw NEXT_PUBLIC_GRAPHIQL_TRANSACTION: 0x4a0ed8ddf751a7cb5297f827699117b0f6d21a0b2907594d300dc9fed75c7e62 NEXT_PUBLIC_USE_NEXT_JS_PROXY: true envFromSecret: diff --git a/docs/DEPRECATED_ENVS.md b/docs/DEPRECATED_ENVS.md new file mode 100644 index 0000000000..c7e305d3cf --- /dev/null +++ b/docs/DEPRECATED_ENVS.md @@ -0,0 +1,8 @@ +# Deprecated environment variables + +| Variable | Type | Description | Compulsoriness | Default value | Example value | Deprecated in version | Comment | +| --- | --- | --- | --- | --- | --- | --- | --- | +| NEXT_PUBLIC_IS_OPTIMISTIC_L2_NETWORK | `boolean` | Set to true for optimistic L2 solutions | Required | - | `true` | v1.24.0 | Replaced by NEXT_PUBLIC_ROLLUP_TYPE | +| NEXT_PUBLIC_IS_ZKEVM_L2_NETWORK | `boolean` | Set to true for zkevm L2 solutions | Required | - | `true` | v1.24.0 | Replaced by NEXT_PUBLIC_ROLLUP_TYPE | +| NEXT_PUBLIC_OPTIMISTIC_L2_WITHDRAWAL_URL | `string` | URL for optimistic L2 -> L1 withdrawals | Required | - | `https://app.optimism.io/bridge/withdraw` | v1.24.0 | Renamed to NEXT_PUBLIC_ROLLUP_L2_WITHDRAWAL_URL | +| NEXT_PUBLIC_L1_BASE_URL | `string` | Blockscout base URL for L1 network | Required | - | `'http://eth-goerli.blockscout.com'` | v1.24.0 | Renamed to NEXT_PUBLIC_ROLLUP_L1_BASE_URL | diff --git a/docs/ENVS.md b/docs/ENVS.md index 88d82d217d..e38693aadf 100644 --- a/docs/ENVS.md +++ b/docs/ENVS.md @@ -34,8 +34,7 @@ Please be aware that all environment variables prefixed with `NEXT_PUBLIC_` will - [Text ads](ENVS.md#text-ads) - [Beacon chain](ENVS.md#beacon-chain) - [User operations](ENVS.md#user-operations-feature-erc-4337) - - [Optimistic rollup (L2) chain](ENVS.md#optimistic-rollup-l2-chain) - - [ZkEvm rollup (L2) chain](NVS.md#zkevm-rollup-l2-chain) + - [Rollup chain](ENVS.md#rollup-chain) - [Export data to CSV file](ENVS.md#export-data-to-csv-file) - [Google analytics](ENVS.md#google-analytics) - [Mixpanel analytics](ENVS.md#mixpanel-analytics) @@ -365,22 +364,13 @@ This feature is **enabled by default** with the `coinzilla` ads provider. To swi   -### Optimistic rollup (L2) chain +### Rollup chain | Variable | Type| Description | Compulsoriness | Default value | Example value | | --- | --- | --- | --- | --- | --- | -| NEXT_PUBLIC_IS_OPTIMISTIC_L2_NETWORK | `boolean` | Set to true for optimistic L2 solutions | Required | - | `true` | -| NEXT_PUBLIC_OPTIMISTIC_L2_WITHDRAWAL_URL | `string` | URL for optimistic L2 -> L1 withdrawals | Required | - | `https://app.optimism.io/bridge/withdraw` | -| NEXT_PUBLIC_L1_BASE_URL | `string` | Blockscout base URL for L1 network | Required | - | `'http://eth-goerli.blockscout.com'` | - -  - -### ZkEvm rollup (L2) chain -| Variable | Type| Description | Compulsoriness | Default value | Example value | -| --- | --- | --- | --- | --- | --- | -| NEXT_PUBLIC_IS_ZKEVM_L2_NETWORK | `boolean` | Set to true for zkevm L2 solutions | Required | - | `true` | -| NEXT_PUBLIC_L1_BASE_URL | `string` | Blockscout base URL for L1 network | Required | - | `'http://eth-goerli.blockscout.com'` | - +| NEXT_PUBLIC_ROLLUP_TYPE | `'optimistic' \| 'zkEvm' ` | Rollup chain type | Required | - | `'optimistic'` | +| NEXT_PUBLIC_ROLLUP_L1_BASE_URL | `string` | Blockscout base URL for L1 network | Required | - | `'http://eth-goerli.blockscout.com'` | +| NEXT_PUBLIC_ROLLUP_L2_WITHDRAWAL_URL | `string` | URL for L2 -> L1 withdrawals | - | - | `https://app.optimism.io/bridge/withdraw` |   diff --git a/lib/api/resources.ts b/lib/api/resources.ts index 0c0c6055c7..ac95b9e810 100644 --- a/lib/api/resources.ts +++ b/lib/api/resources.ts @@ -47,11 +47,14 @@ import type { } from 'types/api/ens'; import type { IndexingStatus } from 'types/api/indexingStatus'; import type { InternalTransactionsResponse } from 'types/api/internalTransaction'; -import type { L2DepositsResponse, L2DepositsItem } from 'types/api/l2Deposits'; -import type { L2OutputRootsResponse } from 'types/api/l2OutputRoots'; -import type { L2TxnBatchesResponse } from 'types/api/l2TxnBatches'; -import type { L2WithdrawalsResponse } from 'types/api/l2Withdrawals'; import type { LogsResponseTx, LogsResponseAddress } from 'types/api/log'; +import type { + OptimisticL2DepositsResponse, + OptimisticL2DepositsItem, + OptimisticL2OutputRootsResponse, + OptimisticL2TxnBatchesResponse, + OptimisticL2WithdrawalsResponse, +} from 'types/api/optimisticL2'; import type { RawTracesResponse } from 'types/api/rawTrace'; import type { SearchRedirectResult, SearchResult, SearchResultFilters, SearchResultItem } from 'types/api/search'; import type { Counters, StatsCharts, StatsChart, HomeStats } from 'types/api/stats'; @@ -81,7 +84,7 @@ import type { UserOpsResponse, UserOp, UserOpsFilters, UserOpsAccount } from 'ty import type { VerifiedContractsSorting } from 'types/api/verifiedContracts'; import type { VisualizedContract } from 'types/api/visualization'; import type { WithdrawalsResponse, WithdrawalsCounters } from 'types/api/withdrawals'; -import type { ZkEvmL2TxnBatch, ZkEvmL2TxnBatchesItem, ZkEvmL2TxnBatchesResponse, ZkEvmL2TxnBatchTxs } from 'types/api/zkEvmL2TxnBatches'; +import type { ZkEvmL2TxnBatch, ZkEvmL2TxnBatchesItem, ZkEvmL2TxnBatchesResponse, ZkEvmL2TxnBatchTxs } from 'types/api/zkEvmL2'; import type { ArrayElement } from 'types/utils'; import config from 'configs/app'; @@ -688,7 +691,7 @@ Q extends 'homepage_chart_market' ? ChartMarketResponse : Q extends 'homepage_blocks' ? Array : Q extends 'homepage_txs' ? Array : Q extends 'homepage_txs_watchlist' ? Array : -Q extends 'homepage_deposits' ? Array : +Q extends 'homepage_deposits' ? Array : Q extends 'homepage_zkevm_l2_batches' ? { items: Array } : Q extends 'homepage_indexing_status' ? IndexingStatus : Q extends 'homepage_zkevm_latest_batch' ? number : @@ -752,10 +755,10 @@ Q extends 'visualize_sol2uml' ? VisualizedContract : Q extends 'contract_verification_config' ? SmartContractVerificationConfig : Q extends 'withdrawals' ? WithdrawalsResponse : Q extends 'withdrawals_counters' ? WithdrawalsCounters : -Q extends 'l2_output_roots' ? L2OutputRootsResponse : -Q extends 'l2_withdrawals' ? L2WithdrawalsResponse : -Q extends 'l2_deposits' ? L2DepositsResponse : -Q extends 'l2_txn_batches' ? L2TxnBatchesResponse : +Q extends 'l2_output_roots' ? OptimisticL2OutputRootsResponse : +Q extends 'l2_withdrawals' ? OptimisticL2WithdrawalsResponse : +Q extends 'l2_deposits' ? OptimisticL2DepositsResponse : +Q extends 'l2_txn_batches' ? OptimisticL2TxnBatchesResponse : Q extends 'l2_output_roots_count' ? number : Q extends 'l2_withdrawals_count' ? number : Q extends 'l2_deposits_count' ? number : diff --git a/lib/hooks/useNavItems.tsx b/lib/hooks/useNavItems.tsx index 98f7c9d9c8..036ae88328 100644 --- a/lib/hooks/useNavItems.tsx +++ b/lib/hooks/useNavItems.tsx @@ -67,7 +67,9 @@ export default function useNavItems(): ReturnType { isActive: pathname === '/name-domains' || pathname === '/name-domains/[name]', } : null; - if (config.features.zkEvmRollup.isEnabled) { + const rollupFeature = config.features.rollup; + + if (rollupFeature.isEnabled && rollupFeature.type === 'zkEvm') { blockchainNavItems = [ [ txs, @@ -86,7 +88,7 @@ export default function useNavItems(): ReturnType { ensLookup, ].filter(Boolean), ]; - } else if (config.features.optimisticRollup.isEnabled) { + } else if (rollupFeature.isEnabled && rollupFeature.type === 'optimistic') { blockchainNavItems = [ [ txs, diff --git a/lib/socket/types.ts b/lib/socket/types.ts index 4d05a1acb7..2bb2d47e71 100644 --- a/lib/socket/types.ts +++ b/lib/socket/types.ts @@ -6,7 +6,7 @@ import type { SmartContractVerificationResponse } from 'types/api/contract'; import type { RawTracesResponse } from 'types/api/rawTrace'; import type { TokenTransfer } from 'types/api/tokenTransfer'; import type { Transaction } from 'types/api/transaction'; -import type { NewZkEvmBatchSocketResponse } from 'types/api/zkEvmL2TxnBatches'; +import type { NewZkEvmBatchSocketResponse } from 'types/api/zkEvmL2'; export type SocketMessageParams = SocketMessage.NewBlock | SocketMessage.BlocksIndexStatus | diff --git a/mocks/zkevmL2txnBatches/zkevmL2txnBatch.ts b/mocks/zkevmL2txnBatches/zkevmL2txnBatch.ts index 172481ce60..56a0f67c33 100644 --- a/mocks/zkevmL2txnBatches/zkevmL2txnBatch.ts +++ b/mocks/zkevmL2txnBatches/zkevmL2txnBatch.ts @@ -1,4 +1,4 @@ -import type { ZkEvmL2TxnBatch } from 'types/api/zkEvmL2TxnBatches'; +import type { ZkEvmL2TxnBatch } from 'types/api/zkEvmL2'; export const txnBatchData: ZkEvmL2TxnBatch = { acc_input_hash: '0x4bf88aabe33713b7817266d7860912c58272d808da7397cdc627ca53b296fad3', diff --git a/mocks/zkevmL2txnBatches/zkevmL2txnBatches.ts b/mocks/zkevmL2txnBatches/zkevmL2txnBatches.ts index 5d81a72686..895f9a7744 100644 --- a/mocks/zkevmL2txnBatches/zkevmL2txnBatches.ts +++ b/mocks/zkevmL2txnBatches/zkevmL2txnBatches.ts @@ -1,4 +1,4 @@ -import type { ZkEvmL2TxnBatchesResponse } from 'types/api/zkEvmL2TxnBatches'; +import type { ZkEvmL2TxnBatchesResponse } from 'types/api/zkEvmL2'; export const txnBatchesData: ZkEvmL2TxnBatchesResponse = { items: [ diff --git a/nextjs/getServerSideProps.ts b/nextjs/getServerSideProps.ts index de0e9aa787..68a1f7780e 100644 --- a/nextjs/getServerSideProps.ts +++ b/nextjs/getServerSideProps.ts @@ -1,6 +1,7 @@ import type { GetServerSideProps } from 'next'; import config from 'configs/app'; +const rollupFeature = config.features.rollup; export type Props = { cookies: string; @@ -49,7 +50,10 @@ export const verifiedAddresses: GetServerSideProps = async(context) => { }; export const withdrawals: GetServerSideProps = async(context) => { - if (!config.features.beaconChain.isEnabled && !config.features.optimisticRollup.isEnabled) { + if ( + !config.features.beaconChain.isEnabled && + !(rollupFeature.isEnabled && rollupFeature.type === 'optimistic') + ) { return { notFound: true, }; @@ -59,7 +63,7 @@ export const withdrawals: GetServerSideProps = async(context) => { }; export const rollup: GetServerSideProps = async(context) => { - if (!config.features.optimisticRollup.isEnabled && !config.features.zkEvmRollup.isEnabled) { + if (!config.features.rollup.isEnabled) { return { notFound: true, }; @@ -69,7 +73,7 @@ export const rollup: GetServerSideProps = async(context) => { }; export const optimisticRollup: GetServerSideProps = async(context) => { - if (!config.features.optimisticRollup.isEnabled) { + if (!(rollupFeature.isEnabled && rollupFeature.type === 'optimistic')) { return { notFound: true, }; @@ -79,7 +83,7 @@ export const optimisticRollup: GetServerSideProps = async(context) => { }; export const zkEvmRollup: GetServerSideProps = async(context) => { - if (!config.features.zkEvmRollup.isEnabled) { + if (!(rollupFeature.isEnabled && rollupFeature.type === 'zkEvm')) { return { notFound: true, }; diff --git a/nextjs/nextjs-routes.d.ts b/nextjs/nextjs-routes.d.ts index 95379a083a..0cc79a3a13 100644 --- a/nextjs/nextjs-routes.d.ts +++ b/nextjs/nextjs-routes.d.ts @@ -38,9 +38,9 @@ declare module "nextjs-routes" { | StaticRoute<"/login"> | DynamicRoute<"/name-domains/[name]", { "name": string }> | StaticRoute<"/name-domains"> - | StaticRoute<"/output-roots"> | DynamicRoute<"/op/[hash]", { "hash": string }> | StaticRoute<"/ops"> + | StaticRoute<"/output-roots"> | StaticRoute<"/search-results"> | StaticRoute<"/stats"> | DynamicRoute<"/token/[hash]", { "hash": string }> diff --git a/pages/batches/index.tsx b/pages/batches/index.tsx index 54b95b254b..79e32ab04d 100644 --- a/pages/batches/index.tsx +++ b/pages/batches/index.tsx @@ -5,12 +5,19 @@ import React from 'react'; import PageNextJs from 'nextjs/PageNextJs'; import config from 'configs/app'; +const rollupFeature = config.features.rollup; const Batches = dynamic(() => { - if (config.features.zkEvmRollup.isEnabled) { - return import('ui/pages/ZkEvmL2TxnBatches'); + if (!rollupFeature.isEnabled) { + throw new Error('Rollup feature is not enabled.'); + } + + switch (rollupFeature.type) { + case 'zkEvm': + return import('ui/pages/ZkEvmL2TxnBatches'); + case 'optimistic': + return import('ui/pages/OptimisticL2TxnBatches'); } - return import('ui/pages/L2TxnBatches'); }, { ssr: false }); const Page: NextPage = () => { diff --git a/pages/deposits/index.tsx b/pages/deposits/index.tsx index ebce123fc0..9db20dd26d 100644 --- a/pages/deposits/index.tsx +++ b/pages/deposits/index.tsx @@ -4,7 +4,7 @@ import React from 'react'; import PageNextJs from 'nextjs/PageNextJs'; -const Deposits = dynamic(() => import('ui/pages/L2Deposits'), { ssr: false }); +const Deposits = dynamic(() => import('ui/pages/OptimisticL2Deposits'), { ssr: false }); const Page: NextPage = () => { return ( diff --git a/pages/output-roots/index.tsx b/pages/output-roots/index.tsx index 3a6100e2ec..4ce87bec5a 100644 --- a/pages/output-roots/index.tsx +++ b/pages/output-roots/index.tsx @@ -4,7 +4,7 @@ import React from 'react'; import PageNextJs from 'nextjs/PageNextJs'; -const OutputRoots = dynamic(() => import('ui/pages/L2OutputRoots'), { ssr: false }); +const OutputRoots = dynamic(() => import('ui/pages/OptimisticL2OutputRoots'), { ssr: false }); const Page: NextPage = () => { return ( diff --git a/pages/withdrawals/index.tsx b/pages/withdrawals/index.tsx index 2cc9479137..06e29f83d0 100644 --- a/pages/withdrawals/index.tsx +++ b/pages/withdrawals/index.tsx @@ -5,12 +5,18 @@ import React from 'react'; import PageNextJs from 'nextjs/PageNextJs'; import config from 'configs/app'; +const rollupFeature = config.features.rollup; +const beaconChainFeature = config.features.beaconChain; const Withdrawals = dynamic(() => { - if (config.features.optimisticRollup.isEnabled) { - return import('ui/pages/L2Withdrawals'); + if (rollupFeature.isEnabled && rollupFeature.type === 'optimistic') { + return import('ui/pages/OptimisticL2Withdrawals'); } - return import('ui/pages/Withdrawals'); + if (beaconChainFeature.isEnabled) { + return import('ui/pages/BeaconChainWithdrawals'); + } + + throw new Error('Withdrawals feature is not enabled.'); }, { ssr: false }); const Page: NextPage = () => { diff --git a/playwright/utils/configs.ts b/playwright/utils/configs.ts index e9d35f9ec8..3efc8e7a8a 100644 --- a/playwright/utils/configs.ts +++ b/playwright/utils/configs.ts @@ -15,9 +15,9 @@ export const featureEnvs = { { name: 'NEXT_PUBLIC_HAS_BEACON_CHAIN', value: 'true' }, ], optimisticRollup: [ - { name: 'NEXT_PUBLIC_IS_OPTIMISTIC_L2_NETWORK', value: 'true' }, - { name: 'NEXT_PUBLIC_L1_BASE_URL', value: 'https://localhost:3101' }, - { name: 'NEXT_PUBLIC_OPTIMISTIC_L2_WITHDRAWAL_URL', value: 'https://localhost:3102' }, + { name: 'NEXT_PUBLIC_ROLLUP_TYPE', value: 'optimistic' }, + { name: 'NEXT_PUBLIC_ROLLUP_L1_BASE_URL', value: 'https://localhost:3101' }, + { name: 'NEXT_PUBLIC_ROLLUP_L2_WITHDRAWAL_URL', value: 'https://localhost:3102' }, ], bridgedTokens: [ { @@ -32,9 +32,9 @@ export const featureEnvs = { txInterpretation: [ { name: 'NEXT_PUBLIC_TRANSACTION_INTERPRETATION_PROVIDER', value: 'blockscout' }, ], - zkRollup: [ - { name: 'NEXT_PUBLIC_IS_ZKEVM_L2_NETWORK', value: 'true' }, - { name: 'NEXT_PUBLIC_L1_BASE_URL', value: 'https://localhost:3101' }, + zkEvmRollup: [ + { name: 'NEXT_PUBLIC_ROLLUP_TYPE', value: 'zkEvm' }, + { name: 'NEXT_PUBLIC_ROLLUP_L1_BASE_URL', value: 'https://localhost:3101' }, ], userOps: [ { name: 'NEXT_PUBLIC_HAS_USER_OPS', value: 'true' }, diff --git a/stubs/L2.ts b/stubs/L2.ts index b10eb4db0e..019d321825 100644 --- a/stubs/L2.ts +++ b/stubs/L2.ts @@ -1,12 +1,14 @@ -import type { L2DepositsItem } from 'types/api/l2Deposits'; -import type { L2OutputRootsItem } from 'types/api/l2OutputRoots'; -import type { L2TxnBatchesItem } from 'types/api/l2TxnBatches'; -import type { L2WithdrawalsItem } from 'types/api/l2Withdrawals'; +import type { + OptimisticL2DepositsItem, + OptimisticL2OutputRootsItem, + OptimisticL2TxnBatchesItem, + OptimisticL2WithdrawalsItem, +} from 'types/api/optimisticL2'; import { ADDRESS_HASH, ADDRESS_PARAMS } from './addressParams'; import { TX_HASH } from './tx'; -export const L2_DEPOSIT_ITEM: L2DepositsItem = { +export const L2_DEPOSIT_ITEM: OptimisticL2DepositsItem = { l1_block_number: 9045233, l1_block_timestamp: '2023-05-22T18:00:36.000000Z', l1_tx_hash: TX_HASH, @@ -15,7 +17,7 @@ export const L2_DEPOSIT_ITEM: L2DepositsItem = { l2_tx_hash: TX_HASH, }; -export const L2_WITHDRAWAL_ITEM: L2WithdrawalsItem = { +export const L2_WITHDRAWAL_ITEM: OptimisticL2WithdrawalsItem = { challenge_period_end: null, from: ADDRESS_PARAMS, l1_tx_hash: TX_HASH, @@ -26,7 +28,7 @@ export const L2_WITHDRAWAL_ITEM: L2WithdrawalsItem = { status: 'Ready to prove', }; -export const L2_TXN_BATCHES_ITEM: L2TxnBatchesItem = { +export const L2_TXN_BATCHES_ITEM: OptimisticL2TxnBatchesItem = { epoch_number: 9103513, l1_timestamp: '2023-06-01T14:46:48.000000Z', l1_tx_hashes: [ @@ -36,7 +38,7 @@ export const L2_TXN_BATCHES_ITEM: L2TxnBatchesItem = { tx_count: 9, }; -export const L2_OUTPUT_ROOTS_ITEM: L2OutputRootsItem = { +export const L2_OUTPUT_ROOTS_ITEM: OptimisticL2OutputRootsItem = { l1_block_number: 9103684, l1_timestamp: '2023-06-01T15:26:12.000000Z', l1_tx_hash: TX_HASH, diff --git a/stubs/zkEvmL2.ts b/stubs/zkEvmL2.ts index d68f1ac9d3..7dea0f57b8 100644 --- a/stubs/zkEvmL2.ts +++ b/stubs/zkEvmL2.ts @@ -1,4 +1,4 @@ -import type { ZkEvmL2TxnBatch, ZkEvmL2TxnBatchesItem } from 'types/api/zkEvmL2TxnBatches'; +import type { ZkEvmL2TxnBatch, ZkEvmL2TxnBatchesItem } from 'types/api/zkEvmL2'; import { TX_HASH } from './tx'; diff --git a/types/api/l2Deposits.ts b/types/api/l2Deposits.ts deleted file mode 100644 index 1704414da5..0000000000 --- a/types/api/l2Deposits.ts +++ /dev/null @@ -1,17 +0,0 @@ -export type L2DepositsItem = { - l1_block_number: number; - l1_tx_hash: string; - l1_block_timestamp: string; - l1_tx_origin: string; - l2_tx_gas_limit: string; - l2_tx_hash: string; -} - -export type L2DepositsResponse = { - items: Array; - next_page_params: { - items_count: number; - l1_block_number: number; - tx_hash: string; - }; -} diff --git a/types/api/l2OutputRoots.ts b/types/api/l2OutputRoots.ts deleted file mode 100644 index 8bcfe07d75..0000000000 --- a/types/api/l2OutputRoots.ts +++ /dev/null @@ -1,16 +0,0 @@ -export type L2OutputRootsItem = { - l1_block_number: number; - l1_timestamp: string; - l1_tx_hash: string; - l2_block_number: number; - l2_output_index: number; - output_root: string; -} - -export type L2OutputRootsResponse = { - items: Array; - next_page_params: { - index: number; - items_count: number; - }; -} diff --git a/types/api/l2TxnBatches.ts b/types/api/l2TxnBatches.ts deleted file mode 100644 index 62f320e14e..0000000000 --- a/types/api/l2TxnBatches.ts +++ /dev/null @@ -1,15 +0,0 @@ -export type L2TxnBatchesItem = { - epoch_number: number; - l1_tx_hashes: Array; - l1_timestamp: string; - l2_block_number: number; - tx_count: number; -} - -export type L2TxnBatchesResponse = { - items: Array; - next_page_params: { - block_number: number; - items_count: number; - }; -} diff --git a/types/api/l2Withdrawals.ts b/types/api/l2Withdrawals.ts deleted file mode 100644 index e9a9103e79..0000000000 --- a/types/api/l2Withdrawals.ts +++ /dev/null @@ -1,30 +0,0 @@ -import type { AddressParam } from './addressParams'; - -export type L2WithdrawalsItem = { - 'challenge_period_end': string | null; - 'from': AddressParam | null; - 'l1_tx_hash': string | null; - 'l2_timestamp': string | null; - 'l2_tx_hash': string; - 'msg_nonce': number; - 'msg_nonce_version': number; - 'status': string; -} - -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; - 'next_page_params': { - 'items_count': number; - 'nonce': string; - }; -} diff --git a/types/api/optimisticL2.ts b/types/api/optimisticL2.ts new file mode 100644 index 0000000000..204aba19e3 --- /dev/null +++ b/types/api/optimisticL2.ts @@ -0,0 +1,81 @@ +import type { AddressParam } from './addressParams'; + +export type OptimisticL2DepositsItem = { + l1_block_number: number; + l1_tx_hash: string; + l1_block_timestamp: string; + l1_tx_origin: string; + l2_tx_gas_limit: string; + l2_tx_hash: string; +} + +export type OptimisticL2DepositsResponse = { + items: Array; + next_page_params: { + items_count: number; + l1_block_number: number; + tx_hash: string; + }; +} + +export type OptimisticL2OutputRootsItem = { + l1_block_number: number; + l1_timestamp: string; + l1_tx_hash: string; + l2_block_number: number; + l2_output_index: number; + output_root: string; +} + +export type OptimisticL2OutputRootsResponse = { + items: Array; + next_page_params: { + index: number; + items_count: number; + }; +} + +export type OptimisticL2TxnBatchesItem = { + epoch_number: number; + l1_tx_hashes: Array; + l1_timestamp: string; + l2_block_number: number; + tx_count: number; +} + +export type OptimisticL2TxnBatchesResponse = { + items: Array; + next_page_params: { + block_number: number; + items_count: number; + }; +} + +export type OptimisticL2WithdrawalsItem = { + 'challenge_period_end': string | null; + 'from': AddressParam | null; + 'l1_tx_hash': string | null; + 'l2_timestamp': string | null; + 'l2_tx_hash': string; + 'msg_nonce': number; + 'msg_nonce_version': number; + 'status': string; +} + +export const WITHDRAWAL_STATUSES = [ + 'Waiting for state root', + 'Ready to prove', + 'In challenge period', + 'Ready for relay', + 'Relayed', +] as const; + +export type OptimisticL2WithdrawalStatus = typeof WITHDRAWAL_STATUSES[number]; + +export type OptimisticL2WithdrawalsResponse = { + items: Array; + 'next_page_params': { + 'items_count': number; + 'nonce': string; + }; +} diff --git a/types/api/transaction.ts b/types/api/transaction.ts index 79cb89b823..5d077cb634 100644 --- a/types/api/transaction.ts +++ b/types/api/transaction.ts @@ -2,7 +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 { OptimisticL2WithdrawalStatus } from './optimisticL2'; import type { TokenInfo } from './token'; import type { TokenTransfer } from './tokenTransfer'; import type { TxAction } from './txAction'; @@ -17,7 +17,7 @@ type WrappedTransactionFields = 'decoded_input' | 'fee' | 'gas_limit' | 'gas_pri export interface OpWithdrawal { l1_transaction_hash: string; nonce: number; - status: L2WithdrawalStatus; + status: OptimisticL2WithdrawalStatus; } export type Transaction = { diff --git a/types/api/zkEvmL2TxnBatches.ts b/types/api/zkEvmL2.ts similarity index 100% rename from types/api/zkEvmL2TxnBatches.ts rename to types/api/zkEvmL2.ts diff --git a/types/client/rollup.ts b/types/client/rollup.ts new file mode 100644 index 0000000000..f1ad67c234 --- /dev/null +++ b/types/client/rollup.ts @@ -0,0 +1,8 @@ +import type { ArrayElement } from 'types/utils'; + +export const ROLLUP_TYPES = [ + 'optimistic', + 'zkEvm', +] as const; + +export type RollupType = ArrayElement; diff --git a/ui/address/AddressWithdrawals.tsx b/ui/address/AddressWithdrawals.tsx index 5deaedc52d..bbc61e8730 100644 --- a/ui/address/AddressWithdrawals.tsx +++ b/ui/address/AddressWithdrawals.tsx @@ -9,8 +9,8 @@ import ActionBar from 'ui/shared/ActionBar'; import DataListDisplay from 'ui/shared/DataListDisplay'; import Pagination from 'ui/shared/pagination/Pagination'; import useQueryWithPages from 'ui/shared/pagination/useQueryWithPages'; -import WithdrawalsListItem from 'ui/withdrawals/WithdrawalsListItem'; -import WithdrawalsTable from 'ui/withdrawals/WithdrawalsTable'; +import BeaconChainWithdrawalsListItem from 'ui/withdrawals/beaconChain/BeaconChainWithdrawalsListItem'; +import BeaconChainWithdrawalsTable from 'ui/withdrawals/beaconChain/BeaconChainWithdrawalsTable'; const AddressWithdrawals = ({ scrollRef }: {scrollRef?: React.RefObject}) => { const router = useRouter(); @@ -32,7 +32,7 @@ const AddressWithdrawals = ({ scrollRef }: {scrollRef?: React.RefObject { data.items.map((item, index) => ( - - + ) : null ; diff --git a/ui/block/BlockDetails.tsx b/ui/block/BlockDetails.tsx index 55add205d4..493c462122 100644 --- a/ui/block/BlockDetails.tsx +++ b/ui/block/BlockDetails.tsx @@ -34,7 +34,7 @@ interface Props { query: BlockQuery; } -const isRollup = config.features.optimisticRollup.isEnabled || config.features.zkEvmRollup.isEnabled; +const rollupFeature = config.features.rollup; const BlockDetails = ({ query }: Props) => { const [ isExpanded, setIsExpanded ] = React.useState(false); @@ -73,7 +73,7 @@ const BlockDetails = ({ query }: Props) => { const validatorTitle = getNetworkValidatorTitle(); const rewardBreakDown = (() => { - if (isRollup || totalReward.isEqualTo(ZERO) || txFees.isEqualTo(ZERO) || burntFees.isEqualTo(ZERO)) { + if (rollupFeature.isEnabled || totalReward.isEqualTo(ZERO) || txFees.isEqualTo(ZERO) || burntFees.isEqualTo(ZERO)) { return null; } @@ -107,7 +107,7 @@ const BlockDetails = ({ query }: Props) => { })(); const verificationTitle = (() => { - if (config.features.zkEvmRollup.isEnabled) { + if (rollupFeature.isEnabled && rollupFeature.type === 'zkEvm') { return 'Sequenced by'; } @@ -205,7 +205,7 @@ const BlockDetails = ({ query }: Props) => { { /* { dayjs.duration(block.minedIn, 'second').humanize(true) } */ } ) } - { !isRollup && !totalReward.isEqualTo(ZERO) && !config.UI.views.block.hiddenFields?.total_reward && ( + { !rollupFeature.isEnabled && !totalReward.isEqualTo(ZERO) && !config.UI.views.block.hiddenFields?.total_reward && ( ; @@ -14,14 +14,14 @@ const BlockWithdrawals = ({ blockWithdrawalsQuery }: Props) => { const content = blockWithdrawalsQuery.data?.items ? ( <> - - { const totalReward = getBlockTotalReward(data); diff --git a/ui/blocks/BlocksTable.tsx b/ui/blocks/BlocksTable.tsx index cfe0a7067f..cfd481321d 100644 --- a/ui/blocks/BlocksTable.tsx +++ b/ui/blocks/BlocksTable.tsx @@ -28,7 +28,7 @@ const GAS_COL_WEIGHT = 33; const REWARD_COL_WEIGHT = 22; const FEES_COL_WEIGHT = 22; -const isRollup = config.features.optimisticRollup.isEnabled || config.features.zkEvmRollup.isEnabled; +const isRollup = config.features.rollup.isEnabled; const BlocksTable = ({ data, isLoading, top, page, showSocketInfo, socketInfoNum, socketInfoAlert }: Props) => { diff --git a/ui/blocks/BlocksTableItem.tsx b/ui/blocks/BlocksTableItem.tsx index 8323ab83a8..50c75a2d15 100644 --- a/ui/blocks/BlocksTableItem.tsx +++ b/ui/blocks/BlocksTableItem.tsx @@ -25,7 +25,7 @@ interface Props { enableTimeIncrement?: boolean; } -const isRollup = config.features.optimisticRollup.isEnabled || config.features.zkEvmRollup.isEnabled; +const isRollup = config.features.rollup.isEnabled; const BlocksTableItem = ({ data, isLoading, enableTimeIncrement }: Props) => { const totalReward = getBlockTotalReward(data); diff --git a/ui/l2Deposits/DepositsListItem.tsx b/ui/deposits/optimisticL2/OptimisticDepositsListItem.tsx similarity index 87% rename from ui/l2Deposits/DepositsListItem.tsx rename to ui/deposits/optimisticL2/OptimisticDepositsListItem.tsx index 658d09d979..d2853fd54c 100644 --- a/ui/l2Deposits/DepositsListItem.tsx +++ b/ui/deposits/optimisticL2/OptimisticDepositsListItem.tsx @@ -2,7 +2,7 @@ import { Skeleton } from '@chakra-ui/react'; import BigNumber from 'bignumber.js'; import React from 'react'; -import type { L2DepositsItem } from 'types/api/l2Deposits'; +import type { OptimisticL2DepositsItem } from 'types/api/optimisticL2'; import config from 'configs/app'; import dayjs from 'lib/date/dayjs'; @@ -12,14 +12,14 @@ import TxEntity from 'ui/shared/entities/tx/TxEntity'; import TxEntityL1 from 'ui/shared/entities/tx/TxEntityL1'; import ListItemMobileGrid from 'ui/shared/ListItemMobile/ListItemMobileGrid'; -const feature = config.features.optimisticRollup; +const rollupFeature = config.features.rollup; -type Props = { item: L2DepositsItem; isLoading?: boolean }; +type Props = { item: OptimisticL2DepositsItem; isLoading?: boolean }; -const DepositsListItem = ({ item, isLoading }: Props) => { +const OptimisticDepositsListItem = ({ item, isLoading }: Props) => { const timeAgo = dayjs(item.l1_block_timestamp).fromNow(); - if (!feature.isEnabled) { + if (!rollupFeature.isEnabled || rollupFeature.type !== 'optimistic') { return null; } @@ -80,4 +80,4 @@ const DepositsListItem = ({ item, isLoading }: Props) => { ); }; -export default DepositsListItem; +export default OptimisticDepositsListItem; diff --git a/ui/l2Deposits/DepositsTable.tsx b/ui/deposits/optimisticL2/OptimisticDepositsTable.tsx similarity index 60% rename from ui/l2Deposits/DepositsTable.tsx rename to ui/deposits/optimisticL2/OptimisticDepositsTable.tsx index 8aea8aadcf..e67de8f22b 100644 --- a/ui/l2Deposits/DepositsTable.tsx +++ b/ui/deposits/optimisticL2/OptimisticDepositsTable.tsx @@ -1,19 +1,19 @@ import { Table, Tbody, Th, Tr } from '@chakra-ui/react'; import React from 'react'; -import type { L2DepositsItem } from 'types/api/l2Deposits'; +import type { OptimisticL2DepositsItem } from 'types/api/optimisticL2'; import { default as Thead } from 'ui/shared/TheadSticky'; -import DepositsTableItem from './DepositsTableItem'; +import OptimisticDepositsTableItem from './OptimisticDepositsTableItem'; type Props = { - items: Array; + items: Array; top: number; isLoading?: boolean; } -const DepositsTable = ({ items, top, isLoading }: Props) => { +const OptimisticDepositsTable = ({ items, top, isLoading }: Props) => { return ( @@ -28,11 +28,11 @@ const DepositsTable = ({ items, top, isLoading }: Props) => { { items.map((item, index) => ( - + )) }
); }; -export default DepositsTable; +export default OptimisticDepositsTable; diff --git a/ui/l2Deposits/DepositsTableItem.tsx b/ui/deposits/optimisticL2/OptimisticDepositsTableItem.tsx similarity index 84% rename from ui/l2Deposits/DepositsTableItem.tsx rename to ui/deposits/optimisticL2/OptimisticDepositsTableItem.tsx index 2c9f437ab7..c0c7a6bebc 100644 --- a/ui/l2Deposits/DepositsTableItem.tsx +++ b/ui/deposits/optimisticL2/OptimisticDepositsTableItem.tsx @@ -2,7 +2,7 @@ import { Td, Tr, Skeleton } from '@chakra-ui/react'; import BigNumber from 'bignumber.js'; import React from 'react'; -import type { L2DepositsItem } from 'types/api/l2Deposits'; +import type { OptimisticL2DepositsItem } from 'types/api/optimisticL2'; import config from 'configs/app'; import dayjs from 'lib/date/dayjs'; @@ -11,14 +11,14 @@ import BlockEntityL1 from 'ui/shared/entities/block/BlockEntityL1'; import TxEntity from 'ui/shared/entities/tx/TxEntity'; import TxEntityL1 from 'ui/shared/entities/tx/TxEntityL1'; -const feature = config.features.optimisticRollup; +const rollupFeature = config.features.rollup; - type Props = { item: L2DepositsItem; isLoading?: boolean }; + type Props = { item: OptimisticL2DepositsItem; isLoading?: boolean }; -const WithdrawalsTableItem = ({ item, isLoading }: Props) => { +const OptimisticDepositsTableItem = ({ item, isLoading }: Props) => { const timeAgo = dayjs(item.l1_block_timestamp).fromNow(); - if (!feature.isEnabled) { + if (!rollupFeature.isEnabled || rollupFeature.type !== 'optimistic') { return null; } @@ -71,4 +71,4 @@ const WithdrawalsTableItem = ({ item, isLoading }: Props) => { ); }; -export default WithdrawalsTableItem; +export default OptimisticDepositsTableItem; diff --git a/ui/home/LatestBlocks.tsx b/ui/home/LatestBlocks.tsx index cd8f0358d5..fbc67db327 100644 --- a/ui/home/LatestBlocks.tsx +++ b/ui/home/LatestBlocks.tsx @@ -24,7 +24,7 @@ const LatestBlocks = () => { const isMobile = useIsMobile(); // const blocksMaxCount = isMobile ? 2 : 3; let blocksMaxCount: number; - if (config.features.optimisticRollup.isEnabled || config.UI.views.block.hiddenFields?.total_reward) { + if (config.features.rollup.isEnabled || config.UI.views.block.hiddenFields?.total_reward) { blocksMaxCount = isMobile ? 4 : 5; } else { blocksMaxCount = isMobile ? 2 : 3; diff --git a/ui/home/LatestBlocksItem.tsx b/ui/home/LatestBlocksItem.tsx index 1f8ee76a3d..43758d1817 100644 --- a/ui/home/LatestBlocksItem.tsx +++ b/ui/home/LatestBlocksItem.tsx @@ -59,14 +59,14 @@ const LatestBlocksItem = ({ block, isLoading }: Props) => { Txn { block.tx_count } - { !config.features.optimisticRollup.isEnabled && !config.UI.views.block.hiddenFields?.total_reward && ( + { !config.features.rollup.isEnabled && !config.UI.views.block.hiddenFields?.total_reward && ( <> Reward { totalReward.dp(10).toFixed() } ) } - { !config.features.optimisticRollup.isEnabled && !config.UI.views.block.hiddenFields?.miner && ( + { !config.features.rollup.isEnabled && !config.UI.views.block.hiddenFields?.miner && ( <> { getNetworkValidatorTitle() } { +const LatestDepositsItem = ({ item, isLoading }: Props) => { const timeAgo = dayjs(item.l1_block_timestamp).fromNow(); const isMobile = useIsMobile(); - if (!feature.isEnabled) { + if (!feature.isEnabled || feature.type !== 'optimistic') { return null; } @@ -116,4 +116,4 @@ const LatestTxsItem = ({ item, isLoading }: Props) => { ); }; -export default React.memo(LatestTxsItem); +export default React.memo(LatestDepositsItem); diff --git a/ui/home/LatestZkEvmL2Batches.pw.tsx b/ui/home/LatestZkEvmL2Batches.pw.tsx index 5a470ac854..ee27d19012 100644 --- a/ui/home/LatestZkEvmL2Batches.pw.tsx +++ b/ui/home/LatestZkEvmL2Batches.pw.tsx @@ -13,7 +13,7 @@ const BATCHES_API_URL = buildApiUrl('homepage_zkevm_l2_batches'); const test = base.extend({ // eslint-disable-next-line @typescript-eslint/no-explicit-any - context: contextWithEnvs(configs.featureEnvs.zkRollup) as any, + context: contextWithEnvs(configs.featureEnvs.zkEvmRollup) as any, }); test('default view +@mobile +@dark-mode', async({ mount, page }) => { diff --git a/ui/home/LatestZkEvmL2Batches.tsx b/ui/home/LatestZkEvmL2Batches.tsx index 6ff806909c..246991b285 100644 --- a/ui/home/LatestZkEvmL2Batches.tsx +++ b/ui/home/LatestZkEvmL2Batches.tsx @@ -4,7 +4,7 @@ import { AnimatePresence } from 'framer-motion'; import React from 'react'; import type { SocketMessage } from 'lib/socket/types'; -import type { ZkEvmL2TxnBatchesItem } from 'types/api/zkEvmL2TxnBatches'; +import type { ZkEvmL2TxnBatchesItem } from 'types/api/zkEvmL2'; import { route } from 'nextjs-routes'; diff --git a/ui/home/LatestZkevmL2BatchItem.tsx b/ui/home/LatestZkevmL2BatchItem.tsx index 0575a37623..b2d8b93bb3 100644 --- a/ui/home/LatestZkevmL2BatchItem.tsx +++ b/ui/home/LatestZkevmL2BatchItem.tsx @@ -6,12 +6,12 @@ import { import { motion } from 'framer-motion'; import React from 'react'; -import type { ZkEvmL2TxnBatchesItem } from 'types/api/zkEvmL2TxnBatches'; +import type { ZkEvmL2TxnBatchesItem } from 'types/api/zkEvmL2'; import { route } from 'nextjs-routes'; import BlockTimestamp from 'ui/blocks/BlockTimestamp'; -import ZkEvmBatchEntityL2 from 'ui/shared/entities/block/ZkEvmBatchEntityL2'; +import BatchEntityL2 from 'ui/shared/entities/block/BatchEntityL2'; import LinkInternal from 'ui/shared/LinkInternal'; import ZkEvmL2TxnBatchStatus from 'ui/shared/statusTag/ZkEvmL2TxnBatchStatus'; @@ -35,7 +35,7 @@ const LatestZkevmL2BatchItem = ({ batch, isLoading }: Props) => { p={ 6 } > - { const { data, isPlaceholderData, isError, dataUpdatedAt } = useApiQuery('homepage_stats', { @@ -32,7 +33,7 @@ const Stats = () => { const zkEvmLatestBatchQuery = useApiQuery('homepage_zkevm_latest_batch', { queryOptions: { placeholderData: 12345, - enabled: config.features.zkEvmRollup.isEnabled, + enabled: rollupFeature.isEnabled && rollupFeature.type === 'zkEvm', }, }); @@ -68,7 +69,7 @@ const Stats = () => { content = ( <> - { config.features.zkEvmRollup.isEnabled ? ( + { rollupFeature.isEnabled && rollupFeature.type === 'zkEvm' ? ( { const hasAccount = useHasAccount(); - if (config.features.optimisticRollup.isEnabled || hasAccount) { + if ((rollupFeature.isEnabled && rollupFeature.type === 'optimistic') || hasAccount) { const tabs = [ { id: 'txn', title: 'Latest txn', component: }, - config.features.optimisticRollup.isEnabled && { id: 'deposits', title: 'Deposits (L1→L2 txn)', component: }, + rollupFeature.isEnabled && rollupFeature.type === 'optimistic' && { id: 'deposits', title: 'Deposits (L1→L2 txn)', component: }, hasAccount && { id: 'watchlist', title: 'Watch list', component: }, ].filter(Boolean); return ( diff --git a/ui/l2OutputRoots/OutputRootsListItem.tsx b/ui/outputRoots/optimisticL2/OptimisticL2OutputRootsListItem.tsx similarity index 86% rename from ui/l2OutputRoots/OutputRootsListItem.tsx rename to ui/outputRoots/optimisticL2/OptimisticL2OutputRootsListItem.tsx index 4a4a9337d0..834e1a5a35 100644 --- a/ui/l2OutputRoots/OutputRootsListItem.tsx +++ b/ui/outputRoots/optimisticL2/OptimisticL2OutputRootsListItem.tsx @@ -1,7 +1,7 @@ import { Flex, Skeleton } from '@chakra-ui/react'; import React from 'react'; -import type { L2OutputRootsItem } from 'types/api/l2OutputRoots'; +import type { OptimisticL2OutputRootsItem } from 'types/api/optimisticL2'; import config from 'configs/app'; import dayjs from 'lib/date/dayjs'; @@ -11,14 +11,14 @@ import TxEntityL1 from 'ui/shared/entities/tx/TxEntityL1'; import HashStringShortenDynamic from 'ui/shared/HashStringShortenDynamic'; import ListItemMobileGrid from 'ui/shared/ListItemMobile/ListItemMobileGrid'; -const feature = config.features.optimisticRollup; +const rollupFeature = config.features.rollup; -type Props = { item: L2OutputRootsItem; isLoading?: boolean }; +type Props = { item: OptimisticL2OutputRootsItem; isLoading?: boolean }; -const OutputRootsListItem = ({ item, isLoading }: Props) => { +const OptimisticL2OutputRootsListItem = ({ item, isLoading }: Props) => { const timeAgo = dayjs(item.l1_timestamp).fromNow(); - if (!feature.isEnabled) { + if (!rollupFeature.isEnabled || rollupFeature.type !== 'optimistic') { return null; } @@ -72,4 +72,4 @@ const OutputRootsListItem = ({ item, isLoading }: Props) => { ); }; -export default OutputRootsListItem; +export default OptimisticL2OutputRootsListItem; diff --git a/ui/l2OutputRoots/OutputRootsTable.tsx b/ui/outputRoots/optimisticL2/OptimisticL2OutputRootsTable.tsx similarity index 54% rename from ui/l2OutputRoots/OutputRootsTable.tsx rename to ui/outputRoots/optimisticL2/OptimisticL2OutputRootsTable.tsx index 96ce6c9c40..762554759a 100644 --- a/ui/l2OutputRoots/OutputRootsTable.tsx +++ b/ui/outputRoots/optimisticL2/OptimisticL2OutputRootsTable.tsx @@ -1,19 +1,19 @@ import { Table, Tbody, Th, Tr } from '@chakra-ui/react'; import React from 'react'; -import type { L2OutputRootsItem } from 'types/api/l2OutputRoots'; +import type { OptimisticL2OutputRootsItem } from 'types/api/optimisticL2'; import { default as Thead } from 'ui/shared/TheadSticky'; -import OutputRootsTableItem from './OutputRootsTableItem'; +import OptimisticL2OutputRootsTableItem from './OptimisticL2OutputRootsTableItem'; type Props = { - items: Array; + items: Array; top: number; isLoading?: boolean; } -const OutputRootsTable = ({ items, top, isLoading }: Props) => { +const OptimisticL2OutputRootsTable = ({ items, top, isLoading }: Props) => { return ( @@ -27,11 +27,15 @@ const OutputRootsTable = ({ items, top, isLoading }: Props) => { { items.map((item, index) => ( - + )) }
); }; -export default OutputRootsTable; +export default OptimisticL2OutputRootsTable; diff --git a/ui/l2OutputRoots/OutputRootsTableItem.tsx b/ui/outputRoots/optimisticL2/OptimisticL2OutputRootsTableItem.tsx similarity index 81% rename from ui/l2OutputRoots/OutputRootsTableItem.tsx rename to ui/outputRoots/optimisticL2/OptimisticL2OutputRootsTableItem.tsx index e64b613a82..3668051424 100644 --- a/ui/l2OutputRoots/OutputRootsTableItem.tsx +++ b/ui/outputRoots/optimisticL2/OptimisticL2OutputRootsTableItem.tsx @@ -1,7 +1,7 @@ import { Flex, Td, Tr, Skeleton } from '@chakra-ui/react'; import React from 'react'; -import type { L2OutputRootsItem } from 'types/api/l2OutputRoots'; +import type { OptimisticL2OutputRootsItem } from 'types/api/optimisticL2'; import config from 'configs/app'; import dayjs from 'lib/date/dayjs'; @@ -10,14 +10,14 @@ import BlockEntityL2 from 'ui/shared/entities/block/BlockEntityL2'; import TxEntityL1 from 'ui/shared/entities/tx/TxEntityL1'; import HashStringShortenDynamic from 'ui/shared/HashStringShortenDynamic'; -const feature = config.features.optimisticRollup; +const rollupFeature = config.features.rollup; -type Props = { item: L2OutputRootsItem; isLoading?: boolean }; +type Props = { item: OptimisticL2OutputRootsItem; isLoading?: boolean }; -const OutputRootsTableItem = ({ item, isLoading }: Props) => { +const OptimisticL2OutputRootsTableItem = ({ item, isLoading }: Props) => { const timeAgo = dayjs(item.l1_timestamp).fromNow(); - if (!feature.isEnabled) { + if (!rollupFeature.isEnabled || rollupFeature.type !== 'optimistic') { return null; } @@ -58,4 +58,4 @@ const OutputRootsTableItem = ({ item, isLoading }: Props) => { ); }; -export default OutputRootsTableItem; +export default OptimisticL2OutputRootsTableItem; diff --git a/ui/pages/Withdrawals.pw.tsx b/ui/pages/BeaconChainWithdrawals.pw.tsx similarity index 93% rename from ui/pages/Withdrawals.pw.tsx rename to ui/pages/BeaconChainWithdrawals.pw.tsx index 15dd8bfbdc..ab4cc8fa7a 100644 --- a/ui/pages/Withdrawals.pw.tsx +++ b/ui/pages/BeaconChainWithdrawals.pw.tsx @@ -7,7 +7,7 @@ import TestApp from 'playwright/TestApp'; import buildApiUrl from 'playwright/utils/buildApiUrl'; import * as configs from 'playwright/utils/configs'; -import Withdrawals from './Withdrawals'; +import BeaconChainWithdrawals from './BeaconChainWithdrawals'; const test = base.extend({ // eslint-disable-next-line @typescript-eslint/no-explicit-any @@ -35,7 +35,7 @@ test('base view +@mobile', async({ mount, page }) => { const component = await mount( - + , ); diff --git a/ui/pages/Withdrawals.tsx b/ui/pages/BeaconChainWithdrawals.tsx similarity index 87% rename from ui/pages/Withdrawals.tsx rename to ui/pages/BeaconChainWithdrawals.tsx index d060e8bb05..73e4d0294b 100644 --- a/ui/pages/Withdrawals.tsx +++ b/ui/pages/BeaconChainWithdrawals.tsx @@ -12,8 +12,8 @@ import DataListDisplay from 'ui/shared/DataListDisplay'; import PageTitle from 'ui/shared/Page/PageTitle'; import useQueryWithPages from 'ui/shared/pagination/useQueryWithPages'; import StickyPaginationWithText from 'ui/shared/StickyPaginationWithText'; -import WithdrawalsListItem from 'ui/withdrawals/WithdrawalsListItem'; -import WithdrawalsTable from 'ui/withdrawals/WithdrawalsTable'; +import BeaconChainWithdrawalsListItem from 'ui/withdrawals/beaconChain/BeaconChainWithdrawalsListItem'; +import BeaconChainWithdrawalsTable from 'ui/withdrawals/beaconChain/BeaconChainWithdrawalsTable'; const feature = config.features.beaconChain; @@ -41,7 +41,7 @@ const Withdrawals = () => { <> { data.items.map(((item, index) => ( - { ))) } - + ) : null; diff --git a/ui/pages/Home.tsx b/ui/pages/Home.tsx index 14d9cc2684..2176842285 100644 --- a/ui/pages/Home.tsx +++ b/ui/pages/Home.tsx @@ -12,6 +12,8 @@ import ProfileMenuDesktop from 'ui/snippets/profileMenu/ProfileMenuDesktop'; import SearchBar from 'ui/snippets/searchBar/SearchBar'; import WalletMenuDesktop from 'ui/snippets/walletMenu/WalletMenuDesktop'; +const rollupFeature = config.features.rollup; + const Home = () => { return ( @@ -44,7 +46,7 @@ const Home = () => { - { config.features.zkEvmRollup.isEnabled ? : } + { rollupFeature.isEnabled && rollupFeature.type === 'zkEvm' ? : } diff --git a/ui/pages/L2Deposits.pw.tsx b/ui/pages/OptimisticL2Deposits.pw.tsx similarity index 94% rename from ui/pages/L2Deposits.pw.tsx rename to ui/pages/OptimisticL2Deposits.pw.tsx index 94c62178b8..b1737edd05 100644 --- a/ui/pages/L2Deposits.pw.tsx +++ b/ui/pages/OptimisticL2Deposits.pw.tsx @@ -7,7 +7,7 @@ import TestApp from 'playwright/TestApp'; import buildApiUrl from 'playwright/utils/buildApiUrl'; import * as configs from 'playwright/utils/configs'; -import L2Deposits from './L2Deposits'; +import OptimisticL2Deposits from './OptimisticL2Deposits'; const DEPOSITS_API_URL = buildApiUrl('l2_deposits'); const DEPOSITS_COUNT_API_URL = buildApiUrl('l2_deposits_count'); @@ -40,7 +40,7 @@ test('base view +@mobile', async({ mount, page }) => { const component = await mount( - + , ); diff --git a/ui/pages/L2Deposits.tsx b/ui/pages/OptimisticL2Deposits.tsx similarity index 83% rename from ui/pages/L2Deposits.tsx rename to ui/pages/OptimisticL2Deposits.tsx index 707511145a..aa71178691 100644 --- a/ui/pages/L2Deposits.tsx +++ b/ui/pages/OptimisticL2Deposits.tsx @@ -5,14 +5,14 @@ import useApiQuery from 'lib/api/useApiQuery'; import { rightLineArrow, nbsp } from 'lib/html-entities'; import { L2_DEPOSIT_ITEM } from 'stubs/L2'; import { generateListStub } from 'stubs/utils'; -import DepositsListItem from 'ui/l2Deposits/DepositsListItem'; -import DepositsTable from 'ui/l2Deposits/DepositsTable'; +import OptimisticDepositsListItem from 'ui/deposits/optimisticL2/OptimisticDepositsListItem'; +import OptimisticDepositsTable from 'ui/deposits/optimisticL2/OptimisticDepositsTable'; import DataListDisplay from 'ui/shared/DataListDisplay'; import PageTitle from 'ui/shared/Page/PageTitle'; import useQueryWithPages from 'ui/shared/pagination/useQueryWithPages'; import StickyPaginationWithText from 'ui/shared/StickyPaginationWithText'; -const L2Deposits = () => { +const OptimisticL2Deposits = () => { const { data, isError, isPlaceholderData, pagination } = useQueryWithPages({ resourceName: 'l2_deposits', options: { @@ -40,7 +40,7 @@ const L2Deposits = () => { <> { data.items.map(((item, index) => ( - { ))) } - + ) : null; @@ -84,4 +84,4 @@ const L2Deposits = () => { ); }; -export default L2Deposits; +export default OptimisticL2Deposits; diff --git a/ui/pages/L2OutputRoots.pw.tsx b/ui/pages/OptimisticL2OutputRoots.pw.tsx similarity index 93% rename from ui/pages/L2OutputRoots.pw.tsx rename to ui/pages/OptimisticL2OutputRoots.pw.tsx index d4f85eec48..8c19f64377 100644 --- a/ui/pages/L2OutputRoots.pw.tsx +++ b/ui/pages/OptimisticL2OutputRoots.pw.tsx @@ -7,7 +7,7 @@ import TestApp from 'playwright/TestApp'; import buildApiUrl from 'playwright/utils/buildApiUrl'; import * as configs from 'playwright/utils/configs'; -import OutputRoots from './L2OutputRoots'; +import OptimisticL2OutputRoots from './OptimisticL2OutputRoots'; const test = base.extend({ // eslint-disable-next-line @typescript-eslint/no-explicit-any @@ -40,7 +40,7 @@ test('base view +@mobile', async({ mount, page }) => { const component = await mount( - + , ); diff --git a/ui/pages/L2OutputRoots.tsx b/ui/pages/OptimisticL2OutputRoots.tsx similarity index 83% rename from ui/pages/L2OutputRoots.tsx rename to ui/pages/OptimisticL2OutputRoots.tsx index c66211c781..dac63f79cf 100644 --- a/ui/pages/L2OutputRoots.tsx +++ b/ui/pages/OptimisticL2OutputRoots.tsx @@ -4,14 +4,14 @@ import React from 'react'; import useApiQuery from 'lib/api/useApiQuery'; import { L2_OUTPUT_ROOTS_ITEM } from 'stubs/L2'; import { generateListStub } from 'stubs/utils'; -import OutputRootsListItem from 'ui/l2OutputRoots/OutputRootsListItem'; -import OutputRootsTable from 'ui/l2OutputRoots/OutputRootsTable'; +import OptimisticL2OutputRootsListItem from 'ui/outputRoots/optimisticL2/OptimisticL2OutputRootsListItem'; +import OptimisticL2OutputRootsTable from 'ui/outputRoots/optimisticL2/OptimisticL2OutputRootsTable'; import DataListDisplay from 'ui/shared/DataListDisplay'; import PageTitle from 'ui/shared/Page/PageTitle'; import useQueryWithPages from 'ui/shared/pagination/useQueryWithPages'; import StickyPaginationWithText from 'ui/shared/StickyPaginationWithText'; -const L2OutputRoots = () => { +const OptimisticL2OutputRoots = () => { const { data, isError, isPlaceholderData, pagination } = useQueryWithPages({ resourceName: 'l2_output_roots', options: { @@ -38,7 +38,7 @@ const L2OutputRoots = () => { <> { data.items.map(((item, index) => ( - { ))) } - + ) : null; @@ -82,4 +82,4 @@ const L2OutputRoots = () => { ); }; -export default L2OutputRoots; +export default OptimisticL2OutputRoots; diff --git a/ui/pages/L2TxnBatches.pw.tsx b/ui/pages/OptimisticL2TxnBatches.pw.tsx similarity index 94% rename from ui/pages/L2TxnBatches.pw.tsx rename to ui/pages/OptimisticL2TxnBatches.pw.tsx index 4216bb0c3b..fb6c40a307 100644 --- a/ui/pages/L2TxnBatches.pw.tsx +++ b/ui/pages/OptimisticL2TxnBatches.pw.tsx @@ -7,7 +7,7 @@ import TestApp from 'playwright/TestApp'; import buildApiUrl from 'playwright/utils/buildApiUrl'; import * as configs from 'playwright/utils/configs'; -import L2TxnBatches from './L2TxnBatches'; +import OptimisticL2TxnBatches from './OptimisticL2TxnBatches'; const test = base.extend({ // eslint-disable-next-line @typescript-eslint/no-explicit-any @@ -40,7 +40,7 @@ test('base view +@mobile', async({ mount, page }) => { const component = await mount( - + , ); diff --git a/ui/pages/L2TxnBatches.tsx b/ui/pages/OptimisticL2TxnBatches.tsx similarity index 82% rename from ui/pages/L2TxnBatches.tsx rename to ui/pages/OptimisticL2TxnBatches.tsx index 4afaa838aa..6d8decf462 100644 --- a/ui/pages/L2TxnBatches.tsx +++ b/ui/pages/OptimisticL2TxnBatches.tsx @@ -5,14 +5,14 @@ import useApiQuery from 'lib/api/useApiQuery'; import { nbsp } from 'lib/html-entities'; import { L2_TXN_BATCHES_ITEM } from 'stubs/L2'; import { generateListStub } from 'stubs/utils'; -import TxnBatchesListItem from 'ui/l2TxnBatches/TxnBatchesListItem'; -import TxnBatchesTable from 'ui/l2TxnBatches/TxnBatchesTable'; import DataListDisplay from 'ui/shared/DataListDisplay'; import PageTitle from 'ui/shared/Page/PageTitle'; import useQueryWithPages from 'ui/shared/pagination/useQueryWithPages'; import StickyPaginationWithText from 'ui/shared/StickyPaginationWithText'; +import OptimisticL2TxnBatchesListItem from 'ui/txnBatches/optimisticL2/OptimisticL2TxnBatchesListItem'; +import OptimisticL2TxnBatchesTable from 'ui/txnBatches/optimisticL2/OptimisticL2TxnBatchesTable'; -const L2TxnBatches = () => { +const OptimisticL2TxnBatches = () => { const { data, isError, isPlaceholderData, pagination } = useQueryWithPages({ resourceName: 'l2_txn_batches', options: { @@ -39,14 +39,16 @@ const L2TxnBatches = () => { <> { data.items.map(((item, index) => ( - ))) } - + + + ) : null; @@ -81,4 +83,4 @@ const L2TxnBatches = () => { ); }; -export default L2TxnBatches; +export default OptimisticL2TxnBatches; diff --git a/ui/pages/L2Withdrawals.pw.tsx b/ui/pages/OptimisticL2Withdrawals.pw.tsx similarity index 93% rename from ui/pages/L2Withdrawals.pw.tsx rename to ui/pages/OptimisticL2Withdrawals.pw.tsx index 5ea8399a3f..70742da848 100644 --- a/ui/pages/L2Withdrawals.pw.tsx +++ b/ui/pages/OptimisticL2Withdrawals.pw.tsx @@ -7,7 +7,7 @@ import TestApp from 'playwright/TestApp'; import buildApiUrl from 'playwright/utils/buildApiUrl'; import * as configs from 'playwright/utils/configs'; -import L2Withdrawals from './L2Withdrawals'; +import OptimisticL2Withdrawals from './OptimisticL2Withdrawals'; const test = base.extend({ // eslint-disable-next-line @typescript-eslint/no-explicit-any @@ -40,7 +40,7 @@ test('base view +@mobile', async({ mount, page }) => { const component = await mount( - + , ); diff --git a/ui/pages/L2Withdrawals.tsx b/ui/pages/OptimisticL2Withdrawals.tsx similarity index 82% rename from ui/pages/L2Withdrawals.tsx rename to ui/pages/OptimisticL2Withdrawals.tsx index 8d17f7ed25..43ec837ad2 100644 --- a/ui/pages/L2Withdrawals.tsx +++ b/ui/pages/OptimisticL2Withdrawals.tsx @@ -5,14 +5,14 @@ import useApiQuery from 'lib/api/useApiQuery'; import { rightLineArrow, nbsp } from 'lib/html-entities'; import { L2_WITHDRAWAL_ITEM } from 'stubs/L2'; import { generateListStub } from 'stubs/utils'; -import WithdrawalsListItem from 'ui/l2Withdrawals/WithdrawalsListItem'; -import WithdrawalsTable from 'ui/l2Withdrawals/WithdrawalsTable'; import DataListDisplay from 'ui/shared/DataListDisplay'; import PageTitle from 'ui/shared/Page/PageTitle'; import useQueryWithPages from 'ui/shared/pagination/useQueryWithPages'; import StickyPaginationWithText from 'ui/shared/StickyPaginationWithText'; +import OptimisticL2WithdrawalsListItem from 'ui/withdrawals/optimisticL2/OptimisticL2WithdrawalsListItem'; +import OptimisticL2WithdrawalsTable from 'ui/withdrawals/optimisticL2/OptimisticL2WithdrawalsTable'; -const L2Withdrawals = () => { +const OptimisticL2Withdrawals = () => { const { data, isError, isPlaceholderData, pagination } = useQueryWithPages({ resourceName: 'l2_withdrawals', options: { @@ -38,14 +38,14 @@ const L2Withdrawals = () => { const content = data?.items ? ( <> { data.items.map(((item, index) => ( - ))) } - + ) : null; @@ -81,4 +81,4 @@ const L2Withdrawals = () => { ); }; -export default L2Withdrawals; +export default OptimisticL2Withdrawals; diff --git a/ui/pages/ZkEvmL2TxnBatch.pw.tsx b/ui/pages/ZkEvmL2TxnBatch.pw.tsx index 852ecc3afb..b2d2e49f51 100644 --- a/ui/pages/ZkEvmL2TxnBatch.pw.tsx +++ b/ui/pages/ZkEvmL2TxnBatch.pw.tsx @@ -11,7 +11,7 @@ import ZkEvmL2TxnBatch from './ZkEvmL2TxnBatch'; const test = base.extend({ // eslint-disable-next-line @typescript-eslint/no-explicit-any - context: contextWithEnvs(configs.featureEnvs.zkRollup) as any, + context: contextWithEnvs(configs.featureEnvs.zkEvmRollup) as any, }); const hooksConfig = { diff --git a/ui/pages/ZkEvmL2TxnBatch.tsx b/ui/pages/ZkEvmL2TxnBatch.tsx index 5241cb8369..48301dd891 100644 --- a/ui/pages/ZkEvmL2TxnBatch.tsx +++ b/ui/pages/ZkEvmL2TxnBatch.tsx @@ -16,8 +16,8 @@ import PageTitle from 'ui/shared/Page/PageTitle'; import useQueryWithPages from 'ui/shared/pagination/useQueryWithPages'; import RoutedTabs from 'ui/shared/Tabs/RoutedTabs'; import TabsSkeleton from 'ui/shared/Tabs/TabsSkeleton'; +import ZkEvmL2TxnBatchDetails from 'ui/txnBatches/zkEvmL2/ZkEvmL2TxnBatchDetails'; import TxsWithFrontendSorting from 'ui/txs/TxsWithFrontendSorting'; -import ZkEvmL2TxnBatchDetails from 'ui/zkEvmL2TxnBatches/ZkEvmL2TxnBatchDetails'; const ZkEvmL2TxnBatch = () => { const router = useRouter(); diff --git a/ui/pages/ZkEvmL2TxnBatches.pw.tsx b/ui/pages/ZkEvmL2TxnBatches.pw.tsx index 8c403a4620..a94f883bda 100644 --- a/ui/pages/ZkEvmL2TxnBatches.pw.tsx +++ b/ui/pages/ZkEvmL2TxnBatches.pw.tsx @@ -11,7 +11,7 @@ import ZkEvmL2TxnBatches from './ZkEvmL2TxnBatches'; const test = base.extend({ // eslint-disable-next-line @typescript-eslint/no-explicit-any - context: contextWithEnvs(configs.featureEnvs.zkRollup) as any, + context: contextWithEnvs(configs.featureEnvs.zkEvmRollup) as any, }); const BATCHES_API_URL = buildApiUrl('zkevm_l2_txn_batches'); diff --git a/ui/pages/ZkEvmL2TxnBatches.tsx b/ui/pages/ZkEvmL2TxnBatches.tsx index 562be180c9..5f20907025 100644 --- a/ui/pages/ZkEvmL2TxnBatches.tsx +++ b/ui/pages/ZkEvmL2TxnBatches.tsx @@ -8,8 +8,8 @@ import DataListDisplay from 'ui/shared/DataListDisplay'; import PageTitle from 'ui/shared/Page/PageTitle'; import useQueryWithPages from 'ui/shared/pagination/useQueryWithPages'; import StickyPaginationWithText from 'ui/shared/StickyPaginationWithText'; -import ZkEvmTxnBatchesListItem from 'ui/zkEvmL2TxnBatches/ZkEvmTxnBatchesListItem'; -import ZkEvmTxnBatchesTable from 'ui/zkEvmL2TxnBatches/ZkEvmTxnBatchesTable'; +import ZkEvmTxnBatchesListItem from 'ui/txnBatches/zkEvmL2/ZkEvmTxnBatchesListItem'; +import ZkEvmTxnBatchesTable from 'ui/txnBatches/zkEvmL2/ZkEvmTxnBatchesTable'; const ZkEvmL2TxnBatches = () => { const { data, isError, isPlaceholderData, pagination } = useQueryWithPages({ diff --git a/ui/pages/__screenshots__/Withdrawals.pw.tsx_default_base-view-mobile-1.png b/ui/pages/__screenshots__/BeaconChainWithdrawals.pw.tsx_default_base-view-mobile-1.png similarity index 100% rename from ui/pages/__screenshots__/Withdrawals.pw.tsx_default_base-view-mobile-1.png rename to ui/pages/__screenshots__/BeaconChainWithdrawals.pw.tsx_default_base-view-mobile-1.png diff --git a/ui/pages/__screenshots__/Withdrawals.pw.tsx_mobile_base-view-mobile-1.png b/ui/pages/__screenshots__/BeaconChainWithdrawals.pw.tsx_mobile_base-view-mobile-1.png similarity index 100% rename from ui/pages/__screenshots__/Withdrawals.pw.tsx_mobile_base-view-mobile-1.png rename to ui/pages/__screenshots__/BeaconChainWithdrawals.pw.tsx_mobile_base-view-mobile-1.png diff --git a/ui/pages/__screenshots__/L2Deposits.pw.tsx_default_base-view-mobile-1.png b/ui/pages/__screenshots__/OptimisticL2Deposits.pw.tsx_default_base-view-mobile-1.png similarity index 100% rename from ui/pages/__screenshots__/L2Deposits.pw.tsx_default_base-view-mobile-1.png rename to ui/pages/__screenshots__/OptimisticL2Deposits.pw.tsx_default_base-view-mobile-1.png diff --git a/ui/pages/__screenshots__/L2Deposits.pw.tsx_mobile_base-view-mobile-1.png b/ui/pages/__screenshots__/OptimisticL2Deposits.pw.tsx_mobile_base-view-mobile-1.png similarity index 100% rename from ui/pages/__screenshots__/L2Deposits.pw.tsx_mobile_base-view-mobile-1.png rename to ui/pages/__screenshots__/OptimisticL2Deposits.pw.tsx_mobile_base-view-mobile-1.png diff --git a/ui/pages/__screenshots__/L2OutputRoots.pw.tsx_default_base-view-mobile-1.png b/ui/pages/__screenshots__/OptimisticL2OutputRoots.pw.tsx_default_base-view-mobile-1.png similarity index 100% rename from ui/pages/__screenshots__/L2OutputRoots.pw.tsx_default_base-view-mobile-1.png rename to ui/pages/__screenshots__/OptimisticL2OutputRoots.pw.tsx_default_base-view-mobile-1.png diff --git a/ui/pages/__screenshots__/L2OutputRoots.pw.tsx_mobile_base-view-mobile-1.png b/ui/pages/__screenshots__/OptimisticL2OutputRoots.pw.tsx_mobile_base-view-mobile-1.png similarity index 100% rename from ui/pages/__screenshots__/L2OutputRoots.pw.tsx_mobile_base-view-mobile-1.png rename to ui/pages/__screenshots__/OptimisticL2OutputRoots.pw.tsx_mobile_base-view-mobile-1.png diff --git a/ui/pages/__screenshots__/L2TxnBatches.pw.tsx_default_base-view-mobile-1.png b/ui/pages/__screenshots__/OptimisticL2TxnBatches.pw.tsx_default_base-view-mobile-1.png similarity index 100% rename from ui/pages/__screenshots__/L2TxnBatches.pw.tsx_default_base-view-mobile-1.png rename to ui/pages/__screenshots__/OptimisticL2TxnBatches.pw.tsx_default_base-view-mobile-1.png diff --git a/ui/pages/__screenshots__/L2TxnBatches.pw.tsx_mobile_base-view-mobile-1.png b/ui/pages/__screenshots__/OptimisticL2TxnBatches.pw.tsx_mobile_base-view-mobile-1.png similarity index 100% rename from ui/pages/__screenshots__/L2TxnBatches.pw.tsx_mobile_base-view-mobile-1.png rename to ui/pages/__screenshots__/OptimisticL2TxnBatches.pw.tsx_mobile_base-view-mobile-1.png diff --git a/ui/pages/__screenshots__/L2Withdrawals.pw.tsx_default_base-view-mobile-1.png b/ui/pages/__screenshots__/OptimisticL2Withdrawals.pw.tsx_default_base-view-mobile-1.png similarity index 100% rename from ui/pages/__screenshots__/L2Withdrawals.pw.tsx_default_base-view-mobile-1.png rename to ui/pages/__screenshots__/OptimisticL2Withdrawals.pw.tsx_default_base-view-mobile-1.png diff --git a/ui/pages/__screenshots__/L2Withdrawals.pw.tsx_mobile_base-view-mobile-1.png b/ui/pages/__screenshots__/OptimisticL2Withdrawals.pw.tsx_mobile_base-view-mobile-1.png similarity index 100% rename from ui/pages/__screenshots__/L2Withdrawals.pw.tsx_mobile_base-view-mobile-1.png rename to ui/pages/__screenshots__/OptimisticL2Withdrawals.pw.tsx_mobile_base-view-mobile-1.png diff --git a/ui/shared/entities/address/AddressEntityL1.tsx b/ui/shared/entities/address/AddressEntityL1.tsx index 5df57f35d7..4732061644 100644 --- a/ui/shared/entities/address/AddressEntityL1.tsx +++ b/ui/shared/entities/address/AddressEntityL1.tsx @@ -7,14 +7,14 @@ import config from 'configs/app'; import * as AddressEntity from './AddressEntity'; -const feature = config.features.optimisticRollup; +const rollupFeature = config.features.rollup; const AddressEntityL1 = (props: AddressEntity.EntityProps) => { - if (!feature.isEnabled) { + if (!rollupFeature.isEnabled) { return null; } - const defaultHref = feature.L1BaseUrl + route({ + const defaultHref = rollupFeature.L1BaseUrl + route({ pathname: '/address/[hash]', query: { ...props.query, diff --git a/ui/shared/entities/block/ZkEvmBatchEntityL2.tsx b/ui/shared/entities/block/BatchEntityL2.tsx similarity index 81% rename from ui/shared/entities/block/ZkEvmBatchEntityL2.tsx rename to ui/shared/entities/block/BatchEntityL2.tsx index 338a8f0f26..a0572b3b7d 100644 --- a/ui/shared/entities/block/ZkEvmBatchEntityL2.tsx +++ b/ui/shared/entities/block/BatchEntityL2.tsx @@ -8,13 +8,13 @@ import config from 'configs/app'; import * as BlockEntity from './BlockEntity'; -const feature = config.features.zkEvmRollup; +const rollupFeature = config.features.rollup; -const ZkEvmBatchEntityL2 = (props: BlockEntity.EntityProps) => { +const BatchEntityL2 = (props: BlockEntity.EntityProps) => { const linkProps = _omit(props, [ 'className' ]); const partsProps = _omit(props, [ 'className', 'onClick' ]); - if (!feature.isEnabled) { + if (!rollupFeature.isEnabled) { return null; } @@ -31,4 +31,4 @@ const ZkEvmBatchEntityL2 = (props: BlockEntity.EntityProps) => { ); }; -export default chakra(ZkEvmBatchEntityL2); +export default chakra(BatchEntityL2); diff --git a/ui/shared/entities/block/BlockEntityL1.tsx b/ui/shared/entities/block/BlockEntityL1.tsx index 6816ac8e8a..a364685b29 100644 --- a/ui/shared/entities/block/BlockEntityL1.tsx +++ b/ui/shared/entities/block/BlockEntityL1.tsx @@ -8,13 +8,13 @@ import config from 'configs/app'; import * as BlockEntity from './BlockEntity'; -const feature = config.features.optimisticRollup; +const rollupFeature = config.features.rollup; const BlockEntityL1 = (props: BlockEntity.EntityProps) => { const linkProps = _omit(props, [ 'className' ]); const partsProps = _omit(props, [ 'className', 'onClick' ]); - if (!feature.isEnabled) { + if (!rollupFeature.isEnabled) { return null; } @@ -24,7 +24,7 @@ const BlockEntityL1 = (props: BlockEntity.EntityProps) => { diff --git a/ui/shared/entities/block/BlockEntityL2.tsx b/ui/shared/entities/block/BlockEntityL2.tsx index b1722d53fa..1a0c3e06a8 100644 --- a/ui/shared/entities/block/BlockEntityL2.tsx +++ b/ui/shared/entities/block/BlockEntityL2.tsx @@ -6,13 +6,13 @@ import config from 'configs/app'; import * as BlockEntity from './BlockEntity'; -const feature = config.features.optimisticRollup; +const rollupFeature = config.features.rollup; const BlockEntityL2 = (props: BlockEntity.EntityProps) => { const linkProps = _omit(props, [ 'className' ]); const partsProps = _omit(props, [ 'className', 'onClick' ]); - if (!feature.isEnabled) { + if (!rollupFeature.isEnabled) { return null; } diff --git a/ui/shared/entities/tx/TxEntityL1.tsx b/ui/shared/entities/tx/TxEntityL1.tsx index 3b72f1894c..635116dd0a 100644 --- a/ui/shared/entities/tx/TxEntityL1.tsx +++ b/ui/shared/entities/tx/TxEntityL1.tsx @@ -8,13 +8,13 @@ import config from 'configs/app'; import * as TxEntity from './TxEntity'; -const feature = config.features.optimisticRollup.isEnabled ? config.features.optimisticRollup : config.features.zkEvmRollup; +const rollupFeature = config.features.rollup; const TxEntityL1 = (props: TxEntity.EntityProps) => { const partsProps = _omit(props, [ 'className', 'onClick' ]); const linkProps = _omit(props, [ 'className' ]); - if (!feature.isEnabled) { + if (!rollupFeature.isEnabled) { return null; } @@ -24,7 +24,7 @@ const TxEntityL1 = (props: TxEntity.EntityProps) => { diff --git a/ui/shared/statusTag/ZkEvmL2TxnBatchStatus.tsx b/ui/shared/statusTag/ZkEvmL2TxnBatchStatus.tsx index f7601bde46..55d98dd7db 100644 --- a/ui/shared/statusTag/ZkEvmL2TxnBatchStatus.tsx +++ b/ui/shared/statusTag/ZkEvmL2TxnBatchStatus.tsx @@ -1,6 +1,6 @@ import React from 'react'; -import type { ZkEvmL2TxnBatchesItem } from 'types/api/zkEvmL2TxnBatches'; +import type { ZkEvmL2TxnBatchesItem } from 'types/api/zkEvmL2'; import type { StatusTagType } from './StatusTag'; import StatusTag from './StatusTag'; diff --git a/ui/tx/details/TxDetailsWithdrawalStatus.pw.tsx b/ui/tx/details/TxDetailsWithdrawalStatus.pw.tsx index f7d491999e..b4cc8c6171 100644 --- a/ui/tx/details/TxDetailsWithdrawalStatus.pw.tsx +++ b/ui/tx/details/TxDetailsWithdrawalStatus.pw.tsx @@ -2,7 +2,7 @@ import { Box } from '@chakra-ui/react'; import { test as base, expect } from '@playwright/experimental-ct-react'; import React from 'react'; -import type { L2WithdrawalStatus } from 'types/api/l2Withdrawals'; +import type { OptimisticL2WithdrawalStatus } from 'types/api/optimisticL2'; import contextWithEnvs from 'playwright/fixtures/contextWithEnvs'; import TestApp from 'playwright/TestApp'; @@ -10,7 +10,7 @@ import * as configs from 'playwright/utils/configs'; import TxDetailsWithdrawalStatus from './TxDetailsWithdrawalStatus'; -const statuses: Array = [ +const statuses: Array = [ 'Waiting for state root', 'Ready for relay', 'Relayed', diff --git a/ui/tx/details/TxDetailsWithdrawalStatus.tsx b/ui/tx/details/TxDetailsWithdrawalStatus.tsx index fd8564b871..b2b7c88ce4 100644 --- a/ui/tx/details/TxDetailsWithdrawalStatus.tsx +++ b/ui/tx/details/TxDetailsWithdrawalStatus.tsx @@ -1,14 +1,14 @@ import { Button } from '@chakra-ui/react'; import React from 'react'; -import type { L2WithdrawalStatus } from 'types/api/l2Withdrawals'; -import { WITHDRAWAL_STATUSES } from 'types/api/l2Withdrawals'; +import type { OptimisticL2WithdrawalStatus } from 'types/api/optimisticL2'; +import { WITHDRAWAL_STATUSES } from 'types/api/optimisticL2'; import TxEntityL1 from 'ui/shared/entities/tx/TxEntityL1'; import VerificationSteps from 'ui/shared/verificationSteps/VerificationSteps'; interface Props { - status: L2WithdrawalStatus | undefined; + status: OptimisticL2WithdrawalStatus | undefined; l1TxHash: string | undefined; } @@ -55,7 +55,7 @@ const TxDetailsWithdrawalStatus = ({ status, l1TxHash }: Props) => { return ( } + steps={ steps as unknown as Array } currentStep={ status } rightSlot={ rightSlot } my={ hasClaimButton ? '-6px' : 0 } diff --git a/ui/tx/details/TxInfo.tsx b/ui/tx/details/TxInfo.tsx index 21edbe4e0f..d26cdecdf3 100644 --- a/ui/tx/details/TxInfo.tsx +++ b/ui/tx/details/TxInfo.tsx @@ -33,8 +33,8 @@ import DetailsInfoItemDivider from 'ui/shared/DetailsInfoItemDivider'; import DetailsSponsoredItem from 'ui/shared/DetailsSponsoredItem'; import DetailsTimestamp from 'ui/shared/DetailsTimestamp'; import AddressEntity from 'ui/shared/entities/address/AddressEntity'; +import BatchEntityL2 from 'ui/shared/entities/block/BatchEntityL2'; import BlockEntity from 'ui/shared/entities/block/BlockEntity'; -import ZkEvmBatchEntityL2 from 'ui/shared/entities/block/ZkEvmBatchEntityL2'; import HashStringShortenDynamic from 'ui/shared/HashStringShortenDynamic'; import IconSvg from 'ui/shared/IconSvg'; import LogDecodedInputData from 'ui/shared/logs/LogDecodedInputData'; @@ -53,6 +53,9 @@ 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'; + +const rollupFeature = config.features.rollup; + interface Props { data: Transaction | undefined; isLoading: boolean; @@ -123,7 +126,7 @@ const TxInfo = ({ data, isLoading, socketStatus }: Props) => { @@ -134,7 +137,7 @@ const TxInfo = ({ data, isLoading, socketStatus }: Props) => { ) } - { config.features.optimisticRollup.isEnabled && data.op_withdrawals && data.op_withdrawals.length > 0 && ( + { rollupFeature.isEnabled && rollupFeature.type === 'optimistic' && data.op_withdrawals && data.op_withdrawals.length > 0 && ( { hint="Batch index for this transaction" isLoading={ isLoading } > - @@ -419,7 +422,7 @@ const TxInfo = ({ data, isLoading, socketStatus }: Props) => { ) } ) } - { data.tx_burnt_fee && !config.UI.views.tx.hiddenFields?.burnt_fees && !config.features.optimisticRollup.isEnabled && ( + { data.tx_burnt_fee && !config.UI.views.tx.hiddenFields?.burnt_fees && !(rollupFeature.isEnabled && rollupFeature.type === 'optimistic') && ( { /> ) } - { config.features.optimisticRollup.isEnabled && ( + { rollupFeature.isEnabled && rollupFeature.type === 'optimistic' && ( <> { data.l1_gas_used && ( > & { socketStatus: 'close' | 'error' | undefined; setRefetchOnError: { @@ -46,7 +48,7 @@ export default function useTxQuery(params?: Params): TxQuery { queryOptions: { enabled: Boolean(hash) && params?.isEnabled !== false, refetchOnMount: false, - placeholderData: config.features.zkEvmRollup.isEnabled ? TX_ZKEVM_L2 : TX, + placeholderData: rollupFeature.isEnabled && rollupFeature.type === 'zkEvm' ? TX_ZKEVM_L2 : TX, retry: (failureCount, error) => { if (isRefetchEnabled) { return false; diff --git a/ui/l2TxnBatches/TxnBatchesListItem.tsx b/ui/txnBatches/optimisticL2/OptimisticL2TxnBatchesListItem.tsx similarity index 87% rename from ui/l2TxnBatches/TxnBatchesListItem.tsx rename to ui/txnBatches/optimisticL2/OptimisticL2TxnBatchesListItem.tsx index 3efba7b03e..f82d558c8f 100644 --- a/ui/l2TxnBatches/TxnBatchesListItem.tsx +++ b/ui/txnBatches/optimisticL2/OptimisticL2TxnBatchesListItem.tsx @@ -1,7 +1,7 @@ import { Skeleton, VStack } from '@chakra-ui/react'; import React from 'react'; -import type { L2TxnBatchesItem } from 'types/api/l2TxnBatches'; +import type { OptimisticL2TxnBatchesItem } from 'types/api/optimisticL2'; import { route } from 'nextjs-routes'; @@ -13,14 +13,14 @@ import TxEntityL1 from 'ui/shared/entities/tx/TxEntityL1'; import LinkInternal from 'ui/shared/LinkInternal'; import ListItemMobileGrid from 'ui/shared/ListItemMobile/ListItemMobileGrid'; -const feature = config.features.optimisticRollup; +const rollupFeature = config.features.rollup; -type Props = { item: L2TxnBatchesItem; isLoading?: boolean }; +type Props = { item: OptimisticL2TxnBatchesItem; isLoading?: boolean }; -const TxnBatchesListItem = ({ item, isLoading }: Props) => { +const OptimisticL2TxnBatchesListItem = ({ item, isLoading }: Props) => { const timeAgo = dayjs(item.l1_timestamp).fromNow(); - if (!feature.isEnabled) { + if (!rollupFeature.isEnabled || rollupFeature.type !== 'optimistic') { return null; } @@ -87,4 +87,4 @@ const TxnBatchesListItem = ({ item, isLoading }: Props) => { ); }; -export default TxnBatchesListItem; +export default OptimisticL2TxnBatchesListItem; diff --git a/ui/l2TxnBatches/TxnBatchesTable.tsx b/ui/txnBatches/optimisticL2/OptimisticL2TxnBatchesTable.tsx similarity index 69% rename from ui/l2TxnBatches/TxnBatchesTable.tsx rename to ui/txnBatches/optimisticL2/OptimisticL2TxnBatchesTable.tsx index 17770faa01..567343302c 100644 --- a/ui/l2TxnBatches/TxnBatchesTable.tsx +++ b/ui/txnBatches/optimisticL2/OptimisticL2TxnBatchesTable.tsx @@ -1,19 +1,19 @@ import { Table, Tbody, Th, Tr } from '@chakra-ui/react'; import React from 'react'; -import type { L2TxnBatchesItem } from 'types/api/l2TxnBatches'; +import type { OptimisticL2TxnBatchesItem } from 'types/api/optimisticL2'; import { default as Thead } from 'ui/shared/TheadSticky'; -import TxnBatchesTableItem from './TxnBatchesTableItem'; +import OptimisticL2TxnBatchesTableItem from './OptimisticL2TxnBatchesTableItem'; type Props = { - items: Array; + items: Array; top: number; isLoading?: boolean; } -const TxnBatchesTable = ({ items, top, isLoading }: Props) => { +const OptimisticL2TxnBatchesTable = ({ items, top, isLoading }: Props) => { return ( @@ -27,7 +27,7 @@ const TxnBatchesTable = ({ items, top, isLoading }: Props) => { { items.map((item, index) => ( - { ); }; -export default TxnBatchesTable; +export default OptimisticL2TxnBatchesTable; diff --git a/ui/l2TxnBatches/TxnBatchesTableItem.tsx b/ui/txnBatches/optimisticL2/OptimisticL2TxnBatchesTableItem.tsx similarity index 83% rename from ui/l2TxnBatches/TxnBatchesTableItem.tsx rename to ui/txnBatches/optimisticL2/OptimisticL2TxnBatchesTableItem.tsx index 8409b8e736..c485bbebc8 100644 --- a/ui/l2TxnBatches/TxnBatchesTableItem.tsx +++ b/ui/txnBatches/optimisticL2/OptimisticL2TxnBatchesTableItem.tsx @@ -1,7 +1,7 @@ import { Td, Tr, VStack, Skeleton } from '@chakra-ui/react'; import React from 'react'; -import type { L2TxnBatchesItem } from 'types/api/l2TxnBatches'; +import type { OptimisticL2TxnBatchesItem } from 'types/api/optimisticL2'; import { route } from 'nextjs-routes'; @@ -12,14 +12,14 @@ import BlockEntityL2 from 'ui/shared/entities/block/BlockEntityL2'; import TxEntityL1 from 'ui/shared/entities/tx/TxEntityL1'; import LinkInternal from 'ui/shared/LinkInternal'; -const feature = config.features.optimisticRollup; +const rollupFeature = config.features.rollup; -type Props = { item: L2TxnBatchesItem; isLoading?: boolean }; +type Props = { item: OptimisticL2TxnBatchesItem; isLoading?: boolean }; -const TxnBatchesTableItem = ({ item, isLoading }: Props) => { +const OptimisticL2TxnBatchesTableItem = ({ item, isLoading }: Props) => { const timeAgo = dayjs(item.l1_timestamp).fromNow(); - if (!feature.isEnabled) { + if (!rollupFeature.isEnabled || rollupFeature.type !== 'optimistic') { return null; } @@ -78,4 +78,4 @@ const TxnBatchesTableItem = ({ item, isLoading }: Props) => { ); }; -export default TxnBatchesTableItem; +export default OptimisticL2TxnBatchesTableItem; diff --git a/ui/zkEvmL2TxnBatches/ZkEvmL2TxnBatchDetails.tsx b/ui/txnBatches/zkEvmL2/ZkEvmL2TxnBatchDetails.tsx similarity index 97% rename from ui/zkEvmL2TxnBatches/ZkEvmL2TxnBatchDetails.tsx rename to ui/txnBatches/zkEvmL2/ZkEvmL2TxnBatchDetails.tsx index 80a2e1d38c..1501d6a681 100644 --- a/ui/zkEvmL2TxnBatches/ZkEvmL2TxnBatchDetails.tsx +++ b/ui/txnBatches/zkEvmL2/ZkEvmL2TxnBatchDetails.tsx @@ -3,8 +3,8 @@ import type { UseQueryResult } from '@tanstack/react-query'; import { useRouter } from 'next/router'; import React from 'react'; -import { ZKEVM_L2_TX_BATCH_STATUSES } from 'types/api/zkEvmL2TxnBatches'; -import type { ZkEvmL2TxnBatch } from 'types/api/zkEvmL2TxnBatches'; +import { ZKEVM_L2_TX_BATCH_STATUSES } from 'types/api/zkEvmL2'; +import type { ZkEvmL2TxnBatch } from 'types/api/zkEvmL2'; import { route } from 'nextjs-routes'; diff --git a/ui/zkEvmL2TxnBatches/ZkEvmTxnBatchesListItem.tsx b/ui/txnBatches/zkEvmL2/ZkEvmTxnBatchesListItem.tsx similarity index 91% rename from ui/zkEvmL2TxnBatches/ZkEvmTxnBatchesListItem.tsx rename to ui/txnBatches/zkEvmL2/ZkEvmTxnBatchesListItem.tsx index 0d54b9c4eb..76aaf2ac74 100644 --- a/ui/zkEvmL2TxnBatches/ZkEvmTxnBatchesListItem.tsx +++ b/ui/txnBatches/zkEvmL2/ZkEvmTxnBatchesListItem.tsx @@ -1,26 +1,26 @@ import { Skeleton, Text } from '@chakra-ui/react'; import React from 'react'; -import type { ZkEvmL2TxnBatchesItem } from 'types/api/zkEvmL2TxnBatches'; +import type { ZkEvmL2TxnBatchesItem } from 'types/api/zkEvmL2'; import { route } from 'nextjs-routes'; import config from 'configs/app'; import dayjs from 'lib/date/dayjs'; -import ZkEvmBatchEntityL2 from 'ui/shared/entities/block/ZkEvmBatchEntityL2'; +import BatchEntityL2 from 'ui/shared/entities/block/BatchEntityL2'; import TxEntityL1 from 'ui/shared/entities/tx/TxEntityL1'; import LinkInternal from 'ui/shared/LinkInternal'; import ListItemMobileGrid from 'ui/shared/ListItemMobile/ListItemMobileGrid'; import ZkEvmL2TxnBatchStatus from 'ui/shared/statusTag/ZkEvmL2TxnBatchStatus'; -const feature = config.features.zkEvmRollup; +const rollupFeature = config.features.rollup; type Props = { item: ZkEvmL2TxnBatchesItem; isLoading?: boolean }; const ZkEvmTxnBatchesListItem = ({ item, isLoading }: Props) => { const timeAgo = dayjs(item.timestamp).fromNow(); - if (!feature.isEnabled) { + if (!rollupFeature.isEnabled || rollupFeature.type !== 'zkEvm') { return null; } @@ -29,7 +29,7 @@ const ZkEvmTxnBatchesListItem = ({ item, isLoading }: Props) => { Batch # - { const timeAgo = dayjs(item.timestamp).fromNow(); - if (!feature.isEnabled) { + if (!rollupFeature.isEnabled || rollupFeature.type !== 'zkEvm') { return null; } return ( { view === 'list' && (items as Array).slice(0, renderedItemsNum).map((item, index) => ( - + )) } { view === 'address' && (items as Array).slice(0, renderedItemsNum).map((item, index) => ( - + )) } { view === 'block' && (items as Array).slice(0, renderedItemsNum).map((item, index) => ( - + )) } @@ -62,4 +62,4 @@ const WithdrawalsTable = ({ items, isLoading, top, view }: Props) => { ); }; -export default WithdrawalsTable; +export default BeaconChainWithdrawalsTable; diff --git a/ui/withdrawals/WithdrawalsTableItem.tsx b/ui/withdrawals/beaconChain/BeaconChainWithdrawalsTableItem.tsx similarity index 93% rename from ui/withdrawals/WithdrawalsTableItem.tsx rename to ui/withdrawals/beaconChain/BeaconChainWithdrawalsTableItem.tsx index 2cc0ed0fb8..d6fa92ab5f 100644 --- a/ui/withdrawals/WithdrawalsTableItem.tsx +++ b/ui/withdrawals/beaconChain/BeaconChainWithdrawalsTableItem.tsx @@ -21,7 +21,7 @@ type Props = ({ view: 'block'; }) & { isLoading?: boolean }; -const WithdrawalsTableItem = ({ item, view, isLoading }: Props) => { +const BeaconChainWithdrawalsTableItem = ({ item, view, isLoading }: Props) => { return ( @@ -76,4 +76,4 @@ const WithdrawalsTableItem = ({ item, isLoading }: Props) => { ); }; -export default WithdrawalsTableItem; +export default OptimisticL2WithdrawalsTableItem;
- { switch (view) { case 'address': { return ( - { } case 'block': { return ( - { } case 'list': { return ( - { +const BeaconChainWithdrawalsListItem = ({ item, isLoading, view }: Props) => { if (!feature.isEnabled) { return null; } @@ -87,4 +87,4 @@ const WithdrawalsListItem = ({ item, isLoading, view }: Props) => { ); }; -export default WithdrawalsListItem; +export default BeaconChainWithdrawalsListItem; diff --git a/ui/withdrawals/WithdrawalsTable.tsx b/ui/withdrawals/beaconChain/BeaconChainWithdrawalsTable.tsx similarity index 73% rename from ui/withdrawals/WithdrawalsTable.tsx rename to ui/withdrawals/beaconChain/BeaconChainWithdrawalsTable.tsx index c5248ec092..e3848a56ad 100644 --- a/ui/withdrawals/WithdrawalsTable.tsx +++ b/ui/withdrawals/beaconChain/BeaconChainWithdrawalsTable.tsx @@ -9,7 +9,7 @@ import config from 'configs/app'; import useLazyRenderedList from 'lib/hooks/useLazyRenderedList'; import { default as Thead } from 'ui/shared/TheadSticky'; -import WithdrawalsTableItem from './WithdrawalsTableItem'; +import BeaconChainWithdrawalsTableItem from './BeaconChainWithdrawalsTableItem'; const feature = config.features.beaconChain; @@ -27,7 +27,7 @@ const feature = config.features.beaconChain; view: 'block'; }); -const WithdrawalsTable = ({ items, isLoading, top, view }: Props) => { +const BeaconChainWithdrawalsTable = ({ items, isLoading, top, view }: Props) => { const { cutRef, renderedItemsNum } = useLazyRenderedList(items, !isLoading); if (!feature.isEnabled) { @@ -48,13 +48,13 @@ const WithdrawalsTable = ({ items, isLoading, top, view }: Props) => {
@@ -63,4 +63,4 @@ const WithdrawalsTableItem = ({ item, view, isLoading }: Props) => { ); }; -export default WithdrawalsTableItem; +export default BeaconChainWithdrawalsTableItem; diff --git a/ui/l2Withdrawals/WithdrawalsListItem.tsx b/ui/withdrawals/optimisticL2/OptimisticL2WithdrawalsListItem.tsx similarity index 84% rename from ui/l2Withdrawals/WithdrawalsListItem.tsx rename to ui/withdrawals/optimisticL2/OptimisticL2WithdrawalsListItem.tsx index 585b3f7688..444f3fb027 100644 --- a/ui/l2Withdrawals/WithdrawalsListItem.tsx +++ b/ui/withdrawals/optimisticL2/OptimisticL2WithdrawalsListItem.tsx @@ -1,7 +1,7 @@ import { Skeleton } from '@chakra-ui/react'; import React from 'react'; -import type { L2WithdrawalsItem } from 'types/api/l2Withdrawals'; +import type { OptimisticL2WithdrawalsItem } from 'types/api/optimisticL2'; import config from 'configs/app'; import dayjs from 'lib/date/dayjs'; @@ -11,15 +11,15 @@ import TxEntityL1 from 'ui/shared/entities/tx/TxEntityL1'; import LinkExternal from 'ui/shared/LinkExternal'; import ListItemMobileGrid from 'ui/shared/ListItemMobile/ListItemMobileGrid'; -const feature = config.features.optimisticRollup; +const rollupFeature = config.features.rollup; -type Props = { item: L2WithdrawalsItem; isLoading?: boolean }; +type Props = { item: OptimisticL2WithdrawalsItem; isLoading?: boolean }; -const WithdrawalsListItem = ({ item, isLoading }: Props) => { +const OptimisticL2WithdrawalsListItem = ({ item, isLoading }: Props) => { const timeAgo = item.l2_timestamp ? dayjs(item.l2_timestamp).fromNow() : null; const timeToEnd = item.challenge_period_end ? dayjs(item.challenge_period_end).fromNow(true) + ' left' : null; - if (!feature.isEnabled) { + if (!rollupFeature.isEnabled || rollupFeature.type !== 'optimistic') { return null; } @@ -68,8 +68,8 @@ const WithdrawalsListItem = ({ item, isLoading }: Props) => { Status - { item.status === 'Ready for relay' ? - { item.status } : + { item.status === 'Ready for relay' && rollupFeature.L2WithdrawalUrl ? + { item.status } : { item.status } } @@ -98,4 +98,4 @@ const WithdrawalsListItem = ({ item, isLoading }: Props) => { ); }; -export default WithdrawalsListItem; +export default OptimisticL2WithdrawalsListItem; diff --git a/ui/l2Withdrawals/WithdrawalsTable.tsx b/ui/withdrawals/optimisticL2/OptimisticL2WithdrawalsTable.tsx similarity index 59% rename from ui/l2Withdrawals/WithdrawalsTable.tsx rename to ui/withdrawals/optimisticL2/OptimisticL2WithdrawalsTable.tsx index 603d52ef5b..b46eb35c69 100644 --- a/ui/l2Withdrawals/WithdrawalsTable.tsx +++ b/ui/withdrawals/optimisticL2/OptimisticL2WithdrawalsTable.tsx @@ -1,19 +1,19 @@ import { Table, Tbody, Th, Tr } from '@chakra-ui/react'; import React from 'react'; -import type { L2WithdrawalsItem } from 'types/api/l2Withdrawals'; +import type { OptimisticL2WithdrawalsItem } from 'types/api/optimisticL2'; import { default as Thead } from 'ui/shared/TheadSticky'; -import WithdrawalsTableItem from './WithdrawalsTableItem'; +import OptimisticL2WithdrawalsTableItem from './OptimisticL2WithdrawalsTableItem'; type Props = { - items: Array; + items: Array; top: number; isLoading?: boolean; } -const WithdrawalsTable = ({ items, top, isLoading }: Props) => { +const OptimisticL2WithdrawalsTable = ({ items, top, isLoading }: Props) => { return ( @@ -29,11 +29,11 @@ const WithdrawalsTable = ({ items, top, isLoading }: Props) => { { items.map((item, index) => ( - + )) }
); }; -export default WithdrawalsTable; +export default OptimisticL2WithdrawalsTable; diff --git a/ui/l2Withdrawals/WithdrawalsTableItem.tsx b/ui/withdrawals/optimisticL2/OptimisticL2WithdrawalsTableItem.tsx similarity index 79% rename from ui/l2Withdrawals/WithdrawalsTableItem.tsx rename to ui/withdrawals/optimisticL2/OptimisticL2WithdrawalsTableItem.tsx index 6df6254116..099c5e12a7 100644 --- a/ui/l2Withdrawals/WithdrawalsTableItem.tsx +++ b/ui/withdrawals/optimisticL2/OptimisticL2WithdrawalsTableItem.tsx @@ -1,7 +1,7 @@ import { Td, Tr, Skeleton } from '@chakra-ui/react'; import React from 'react'; -import type { L2WithdrawalsItem } from 'types/api/l2Withdrawals'; +import type { OptimisticL2WithdrawalsItem } from 'types/api/optimisticL2'; import config from 'configs/app'; import dayjs from 'lib/date/dayjs'; @@ -10,15 +10,15 @@ import TxEntity from 'ui/shared/entities/tx/TxEntity'; import TxEntityL1 from 'ui/shared/entities/tx/TxEntityL1'; import LinkExternal from 'ui/shared/LinkExternal'; -const feature = config.features.optimisticRollup; +const rollupFeature = config.features.rollup; - type Props = { item: L2WithdrawalsItem; isLoading?: boolean }; + type Props = { item: OptimisticL2WithdrawalsItem; isLoading?: boolean }; -const WithdrawalsTableItem = ({ item, isLoading }: Props) => { +const OptimisticL2WithdrawalsTableItem = ({ item, isLoading }: Props) => { const timeAgo = item.l2_timestamp ? dayjs(item.l2_timestamp).fromNow() : 'N/A'; const timeToEnd = item.challenge_period_end ? dayjs(item.challenge_period_end).fromNow(true) + ' left' : ''; - if (!feature.isEnabled) { + if (!rollupFeature.isEnabled || rollupFeature.type !== 'optimistic') { return null; } @@ -51,8 +51,8 @@ const WithdrawalsTableItem = ({ item, isLoading }: Props) => { 		- { item.status === 'Ready for relay' ? - { item.status } : + { item.status === 'Ready for relay' && rollupFeature.L2WithdrawalUrl ? + { item.status } : { item.status } }