OP Fault Proofs support

configs/app/features/faultProofSystem.ts

@@ -0,0 +1,22 @@
+import type { Feature } from './types';
+
+import { getEnvValue } from '../utils';
+import rollup from './rollup';
+
+const title = 'Fault proof system';
+
+const config: Feature<{ isEnabled: true }> = (() => {
+  if (rollup.isEnabled && rollup.type === 'optimistic' && getEnvValue('NEXT_PUBLIC_FAULT_PROOF_ENABLED') === 'true') {
+    return Object.freeze({
+      title,
+      isEnabled: true,
+    });
+  }
+
+  return Object.freeze({
+    title,
+    isEnabled: false,
+  });
+})();
+
+export default config;

configs/app/features/index.ts

@@ -8,6 +8,7 @@ export { default as bridgedTokens } from './bridgedTokens';
 export { default as blockchainInteraction } from './blockchainInteraction';
 export { default as csvExport } from './csvExport';
 export { default as dataAvailability } from './dataAvailability';
+export { default as faultProofSystem } from './faultProofSystem';
 export { default as gasTracker } from './gasTracker';
 export { default as googleAnalytics } from './googleAnalytics';
 export { default as graphqlApiDocs } from './graphqlApiDocs';

configs/envs/.env.optimism_sepolia

@@ -61,3 +61,4 @@ NEXT_PUBLIC_VIEWS_CONTRACT_SOLIDITYSCAN_ENABLED=true
 NEXT_PUBLIC_ROLLUP_TYPE=optimistic
 NEXT_PUBLIC_ROLLUP_L2_WITHDRAWAL_URL=https://app.optimism.io/bridge/withdraw
 NEXT_PUBLIC_ROLLUP_L1_BASE_URL=https://eth-sepolia.blockscout.com/
+NEXT_PUBLIC_FAULT_PROOF_ENABLED=true

deploy/tools/envs-validator/schema.ts

@@ -629,6 +629,16 @@ const schema = yup
     NEXT_PUBLIC_GAS_TRACKER_ENABLED: yup.boolean(),
     NEXT_PUBLIC_GAS_TRACKER_UNITS: yup.array().transform(replaceQuotes).json().of(yup.string<GasUnit>().oneOf(GAS_UNITS)),
     NEXT_PUBLIC_DATA_AVAILABILITY_ENABLED: yup.boolean(),
+    NEXT_PUBLIC_FAULT_PROOF_ENABLED: yup.boolean()
+      .when('NEXT_PUBLIC_ROLLUP_TYPE', {
+        is: 'optimistic',
+        then: (schema) => schema,
+        otherwise: (schema) => schema.test(
+          'not-exist',
+          'NEXT_PUBLIC_FAULT_PROOF_ENABLED can only be used with NEXT_PUBLIC_ROLLUP_TYPE=optimistic',
+          value => value === undefined,
+        ),
+      }),
 
     // 6. External services envs
     NEXT_PUBLIC_WALLET_CONNECT_PROJECT_ID: yup.string(),

deploy/tools/envs-validator/test/.env.rollup

@@ -1,3 +1,4 @@
 NEXT_PUBLIC_ROLLUP_TYPE=optimistic
 NEXT_PUBLIC_ROLLUP_L1_BASE_URL=https://example.com
-NEXT_PUBLIC_ROLLUP_L2_WITHDRAWAL_URL=https://example.com
+NEXT_PUBLIC_ROLLUP_L2_WITHDRAWAL_URL=https://example.com
+NEXT_PUBLIC_FAULT_PROOF_ENABLED=true

docs/ENVS.md

@@ -36,6 +36,7 @@ Please be aware that all environment variables prefixed with `NEXT_PUBLIC_` will
   - [Beacon chain](ENVS.md#beacon-chain)
   - [User operations](ENVS.md#user-operations-feature-erc-4337)
   - [Rollup chain](ENVS.md#rollup-chain)
+  - [Fault proof system](ENVS.md#fault-proof-system)
   - [Export data to CSV file](ENVS.md#export-data-to-csv-file)
   - [Google analytics](ENVS.md#google-analytics)
   - [Mixpanel analytics](ENVS.md#mixpanel-analytics)
@@ -401,6 +402,14 @@ This feature is **enabled by default** with the `coinzilla` ads provider. To swi
 
  
 
+### Fault proof system
+
+| Variable | Type| Description | Compulsoriness  | Default value | Example value |
+| --- | --- | --- | --- | --- | --- |
+| NEXT_PUBLIC_FAULT_PROOF_ENABLED | `boolean` | Set to `true` for chains with fault proof system enabled (OP stack only) | - | - | `true` |
+
+ 
+
 ### Export data to CSV file
 
 | Variable | Type| Description | Compulsoriness  | Default value | Example value |

lib/api/resources.ts

@@ -64,6 +64,7 @@ import type {
   OptimisticL2OutputRootsResponse,
   OptimisticL2TxnBatchesResponse,
   OptimisticL2WithdrawalsResponse,
+  OptimisticL2DisputeGamesResponse,
 } from 'types/api/optimisticL2';
 import type { RawTracesResponse } from 'types/api/rawTrace';
 import type { SearchRedirectResult, SearchResult, SearchResultFilters, SearchResultItem } from 'types/api/search';
@@ -650,6 +651,15 @@ export const RESOURCES = {
     path: '/api/v2/optimism/txn-batches/count',
   },
 
+  optimistic_l2_dispute_games: {
+    path: '/api/v2/optimism/games',
+    filterFields: [],
+  },
+
+  optimistic_l2_dispute_games_count: {
+    path: '/api/v2/optimism/games/count',
+  },
+
   // zkEvm L2
   zkevm_l2_deposits: {
     path: '/api/v2/zkevm/deposits',
@@ -853,6 +863,7 @@ export type PaginatedResources = 'blocks' | 'block_txs' |
 'token_instance_transfers' | 'token_instance_holders' |
 'verified_contracts' |
 'optimistic_l2_output_roots' | 'optimistic_l2_withdrawals' | 'optimistic_l2_txn_batches' | 'optimistic_l2_deposits' |
+'optimistic_l2_dispute_games' |
 'shibarium_deposits' | 'shibarium_withdrawals' |
 'zkevm_l2_deposits' | 'zkevm_l2_withdrawals' | 'zkevm_l2_txn_batches' | 'zkevm_l2_txn_batch_txs' |
 'zksync_l2_txn_batches' | 'zksync_l2_txn_batch_txs' |
@@ -955,20 +966,22 @@ Q extends 'optimistic_l2_output_roots' ? OptimisticL2OutputRootsResponse :
 Q extends 'optimistic_l2_withdrawals' ? OptimisticL2WithdrawalsResponse :
 Q extends 'optimistic_l2_deposits' ? OptimisticL2DepositsResponse :
 Q extends 'optimistic_l2_txn_batches' ? OptimisticL2TxnBatchesResponse :
+Q extends 'optimistic_l2_dispute_games' ? OptimisticL2DisputeGamesResponse :
 Q extends 'optimistic_l2_output_roots_count' ? number :
 Q extends 'optimistic_l2_withdrawals_count' ? number :
 Q extends 'optimistic_l2_deposits_count' ? number :
 Q extends 'optimistic_l2_txn_batches_count' ? number :
-Q extends 'config_backend_version' ? BackendVersionConfig :
-Q extends 'address_metadata_info' ? AddressMetadataInfo :
-Q extends 'address_metadata_tag_types' ? PublicTagTypesResponse :
+Q extends 'optimistic_l2_dispute_games_count' ? number :
 never;
 // !!! IMPORTANT !!!
 // See comment above
 /* eslint-enable @typescript-eslint/indent */
 
 /* eslint-disable @typescript-eslint/indent */
 export type ResourcePayloadB<Q extends ResourceName> =
+Q extends 'config_backend_version' ? BackendVersionConfig :
+Q extends 'address_metadata_info' ? AddressMetadataInfo :
+Q extends 'address_metadata_tag_types' ? PublicTagTypesResponse :
 Q extends 'blob' ? Blob :
 Q extends 'marketplace_dapps' ? Array<MarketplaceAppOverview> :
 Q extends 'marketplace_dapp' ? MarketplaceAppOverview :

lib/hooks/useNavItems.tsx

@@ -96,6 +96,12 @@ export default function useNavItems(): ReturnType {
       icon: 'output_roots',
       isActive: pathname === '/output-roots',
     };
+    const rollupDisputeGames = config.features.faultProofSystem.isEnabled ? {
+      text: 'Dispute games',
+      nextRoute: { pathname: '/dispute-games' as const },
+      icon: 'output_roots',
+      isActive: pathname === '/dispute-games',
+    } : null;
 
     const rollupFeature = config.features.rollup;
 
@@ -109,6 +115,7 @@ export default function useNavItems(): ReturnType {
         [
           blocks,
           rollupTxnBatches,
+          rollupDisputeGames,
           rollupFeature.type === 'optimistic' ? rollupOutputRoots : undefined,
         ].filter(Boolean),
         [

lib/metadata/getPageOgType.ts

@@ -35,6 +35,7 @@ const OG_TYPE_DICT: Record<Route['pathname'], OGPageType> = {
   '/csv-export': 'Regular page',
   '/deposits': 'Root page',
   '/output-roots': 'Root page',
+  '/dispute-games': 'Root page',
   '/batches': 'Root page',
   '/batches/[number]': 'Regular page',
   '/blobs/[hash]': 'Regular page',

lib/metadata/templates/description.ts

@@ -39,6 +39,7 @@ const TEMPLATE_MAP: Record<Route['pathname'], string> = {
   '/csv-export': DEFAULT_TEMPLATE,
   '/deposits': DEFAULT_TEMPLATE,
   '/output-roots': DEFAULT_TEMPLATE,
+  '/dispute-games': DEFAULT_TEMPLATE,
   '/batches': DEFAULT_TEMPLATE,
   '/batches/[number]': DEFAULT_TEMPLATE,
   '/blobs/[hash]': DEFAULT_TEMPLATE,

lib/metadata/templates/title.ts

@@ -33,6 +33,7 @@ const TEMPLATE_MAP: Record<Route['pathname'], string> = {
   '/csv-export': 'export data to CSV',
   '/deposits': 'deposits (L1 > L2)',
   '/output-roots': 'output roots',
+  '/dispute-games': 'dispute games',
   '/batches': 'tx batches (L2 blocks)',
   '/batches/[number]': 'L2 tx batch %number%',
   '/blobs/[hash]': 'blob %hash% details',

lib/mixpanel/getPageType.ts

@@ -33,6 +33,7 @@ export const PAGE_TYPE_DICT: Record<Route['pathname'], string> = {
   '/csv-export': 'Export data to CSV file',
   '/deposits': 'Deposits (L1 > L2)',
   '/output-roots': 'Output roots',
+  '/dispute-games': 'Dispute games',
   '/batches': 'Tx batches (L2 blocks)',
   '/batches/[number]': 'L2 tx batch details',
   '/blobs/[hash]': 'Blob details',

nextjs/getServerSideProps.ts

@@ -251,3 +251,13 @@ export const publicTagsSubmit: GetServerSideProps<Props> = async(context) => {
 
   return base(context);
 };
+
+export const disputeGames: GetServerSideProps<Props> = async(context) => {
+  if (!config.features.faultProofSystem.isEnabled) {
+    return {
+      notFound: true,
+    };
+  }
+
+  return base(context);
+};

nextjs/nextjs-routes.d.ts

@@ -35,6 +35,7 @@ declare module "nextjs-routes" {
     | StaticRoute<"/contract-verification">
     | StaticRoute<"/csv-export">
     | StaticRoute<"/deposits">
+    | StaticRoute<"/dispute-games">
     | StaticRoute<"/gas-tracker">
     | StaticRoute<"/graphiql">
     | StaticRoute<"/">

pages/dispute-games/index.tsx

@@ -0,0 +1,19 @@
+import type { NextPage } from 'next';
+import dynamic from 'next/dynamic';
+import React from 'react';
+
+import PageNextJs from 'nextjs/PageNextJs';
+
+const DisputeGames = dynamic(() => import('ui/pages/OptimisticL2DisputeGames'), { ssr: false });
+
+const Page: NextPage = () => {
+  return (
+    <PageNextJs pathname="/dispute-games">
+      <DisputeGames/>
+    </PageNextJs>
+  );
+};
+
+export default Page;
+
+export { disputeGames as getServerSideProps } from 'nextjs/getServerSideProps';

stubs/L2.ts

@@ -1,5 +1,6 @@
 import type {
   OptimisticL2DepositsItem,
+  OptimisticL2DisputeGamesItem,
   OptimisticL2OutputRootsItem,
   OptimisticL2TxnBatchesItem,
   OptimisticL2WithdrawalsItem,
@@ -45,3 +46,13 @@ export const L2_OUTPUT_ROOTS_ITEM: OptimisticL2OutputRootsItem = {
   l2_output_index: 50655,
   output_root: TX_HASH,
 };
+
+export const L2_DISPUTE_GAMES_ITEM: OptimisticL2DisputeGamesItem = {
+  contract_address: ADDRESS_HASH,
+  created_at: '2023-06-01T15:26:12.000000Z',
+  game_type: 0,
+  index: 6594,
+  l2_block_number: 50655,
+  resolved_at: null,
+  status: 'In progress',
+};

types/api/optimisticL2.ts

@@ -61,15 +61,15 @@ export type OptimisticL2WithdrawalsItem = {
   '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 OptimisticL2WithdrawalStatus =
+  'Waiting for state root' |
+  'Ready to prove' |
+  'In challenge period' |
+  'Waiting a game to resolve' |
+  'Ready to prove' |
+  'Proven' |
+  'Ready for relay' |
+  'Relayed';
 
 export type OptimisticL2WithdrawalsResponse = {
   items: Array<OptimisticL2WithdrawalsItem>;
@@ -78,3 +78,21 @@ export type OptimisticL2WithdrawalsResponse = {
     'nonce': string;
   };
 }
+
+export type OptimisticL2DisputeGamesResponse = {
+  items: Array<OptimisticL2DisputeGamesItem>;
+  'next_page_params': {
+    'items_count': number;
+    'index': number;
+  };
+}
+
+export type OptimisticL2DisputeGamesItem = {
+  contract_address: string;
+  created_at: string;
+  game_type: number;
+  index: number;
+  l2_block_number: number;
+  resolved_at: string | null;
+  status: string;
+}

ui/disputeGames/optimisticL2/OptimisticL2DisputeGamesListItem.tsx

@@ -0,0 +1,76 @@
+import { Skeleton } from '@chakra-ui/react';
+import React from 'react';
+
+import type { OptimisticL2DisputeGamesItem } from 'types/api/optimisticL2';
+
+import config from 'configs/app';
+import dayjs from 'lib/date/dayjs';
+import CopyToClipboard from 'ui/shared/CopyToClipboard';
+import BlockEntityL2 from 'ui/shared/entities/block/BlockEntityL2';
+import HashStringShorten from 'ui/shared/HashStringShorten';
+import ListItemMobileGrid from 'ui/shared/ListItemMobile/ListItemMobileGrid';
+
+const rollupFeature = config.features.rollup;
+
+type Props = { item: OptimisticL2DisputeGamesItem; isLoading?: boolean };
+
+const OptimisticL2DisputeGamesListItem = ({ item, isLoading }: Props) => {
+  if (!rollupFeature.isEnabled || rollupFeature.type !== 'optimistic') {
+    return null;
+  }
+
+  return (
+    <ListItemMobileGrid.Container>
+
+      <ListItemMobileGrid.Label isLoading={ isLoading }>Index</ListItemMobileGrid.Label>
+      <ListItemMobileGrid.Value fontWeight={ 600 } color="text">
+        <Skeleton isLoaded={ !isLoading } display="inline-block">{ item.index }</Skeleton>
+      </ListItemMobileGrid.Value>
+
+      <ListItemMobileGrid.Label isLoading={ isLoading }>Game type</ListItemMobileGrid.Label>
+      <ListItemMobileGrid.Value>
+        <Skeleton isLoaded={ !isLoading } display="inline-block">{ item.game_type }</Skeleton>
+      </ListItemMobileGrid.Value>
+
+      <ListItemMobileGrid.Label isLoading={ isLoading }>Address</ListItemMobileGrid.Label>
+      <ListItemMobileGrid.Value color="text">
+        <Skeleton isLoaded={ !isLoading } display="flex" overflow="hidden" w="100%" alignItems="center">
+          <HashStringShorten hash={ item.contract_address } type="long"/>
+          <CopyToClipboard text={ item.contract_address } ml={ 2 } isLoading={ isLoading }/>
+        </Skeleton>
+      </ListItemMobileGrid.Value>
+
+      <ListItemMobileGrid.Label isLoading={ isLoading }>L2 block #</ListItemMobileGrid.Label>
+      <ListItemMobileGrid.Value>
+        <BlockEntityL2
+          isLoading={ isLoading }
+          number={ item.l2_block_number }
+          fontSize="sm"
+          lineHeight={ 5 }
+          noIcon
+        />
+      </ListItemMobileGrid.Value>
+
+      <ListItemMobileGrid.Label isLoading={ isLoading }>Age</ListItemMobileGrid.Label>
+      <ListItemMobileGrid.Value>
+        <Skeleton isLoaded={ !isLoading } display="inline-block">{ dayjs(item.created_at).fromNow() }</Skeleton>
+      </ListItemMobileGrid.Value>
+
+      <ListItemMobileGrid.Label isLoading={ isLoading }>Status</ListItemMobileGrid.Label>
+      <ListItemMobileGrid.Value color="text">
+        <Skeleton isLoaded={ !isLoading } display="inline-block">{ item.status }</Skeleton>
+      </ListItemMobileGrid.Value>
+
+      { item.resolved_at && (
+        <>
+          <ListItemMobileGrid.Label isLoading={ isLoading }>Resolution age</ListItemMobileGrid.Label><ListItemMobileGrid.Value>
+            <Skeleton isLoaded={ !isLoading } display="inline-block">{ dayjs(item.resolved_at).fromNow() }</Skeleton>
+          </ListItemMobileGrid.Value>
+        </>
+      ) }
+
+    </ListItemMobileGrid.Container>
+  );
+};
+
+export default OptimisticL2DisputeGamesListItem;