From f37088f057fe8db50b4314e0a184002fd2393d76 Mon Sep 17 00:00:00 2001
From: tom goriunov <tom@ohhhh.me>
Date: Tue, 22 Oct 2024 17:55:53 +0200
Subject: [PATCH] Homepage for rollups: Latest blocks vs. Latest batches
 (#2308)

Homepage for rollups: block<>batch switcher

Fixes #2292
---
 configs/app/features/rollup.ts               |  5 ++++-
 deploy/tools/envs-validator/schema.ts        | 11 +++++++++++
 deploy/tools/envs-validator/test/.env.rollup |  3 ++-
 docs/ENVS.md                                 |  1 +
 ui/pages/Home.tsx                            | 18 +++++++++++++++---
 5 files changed, 33 insertions(+), 5 deletions(-)

diff --git a/configs/app/features/rollup.ts b/configs/app/features/rollup.ts
index 48c5422270..edd784b2af 100644
--- a/configs/app/features/rollup.ts
+++ b/configs/app/features/rollup.ts
@@ -16,7 +16,7 @@ const L2WithdrawalUrl = getEnvValue('NEXT_PUBLIC_ROLLUP_L2_WITHDRAWAL_URL');
 
 const title = 'Rollup (L2) chain';
 
-const config: Feature<{ type: RollupType; L1BaseUrl: string; L2WithdrawalUrl?: string }> = (() => {
+const config: Feature<{ type: RollupType; L1BaseUrl: string; L2WithdrawalUrl?: string; homepage: { showLatestBlocks: boolean } }> = (() => {
 
   if (type && L1BaseUrl) {
     return Object.freeze({
@@ -25,6 +25,9 @@ const config: Feature<{ type: RollupType; L1BaseUrl: string; L2WithdrawalUrl?: s
       type,
       L1BaseUrl: stripTrailingSlash(L1BaseUrl),
       L2WithdrawalUrl,
+      homepage: {
+        showLatestBlocks: getEnvValue('NEXT_PUBLIC_ROLLUP_HOMEPAGE_SHOW_LATEST_BLOCKS') === 'true',
+      },
     });
   }
 
diff --git a/deploy/tools/envs-validator/schema.ts b/deploy/tools/envs-validator/schema.ts
index a869ab4b9e..193178a694 100644
--- a/deploy/tools/envs-validator/schema.ts
+++ b/deploy/tools/envs-validator/schema.ts
@@ -287,6 +287,17 @@ const rollupSchema = yup
         then: (schema) => schema.test(urlTest).required(),
         otherwise: (schema) => schema.max(-1, 'NEXT_PUBLIC_ROLLUP_L2_WITHDRAWAL_URL can be used only if NEXT_PUBLIC_ROLLUP_TYPE is set to \'optimistic\' '),
       }),
+    NEXT_PUBLIC_ROLLUP_HOMEPAGE_SHOW_LATEST_BLOCKS: yup
+      .boolean()
+      .when('NEXT_PUBLIC_ROLLUP_TYPE', {
+        is: (value: string) => value,
+        then: (schema) => schema,
+        otherwise: (schema) => schema.test(
+          'not-exist',
+          'NEXT_PUBLIC_ROLLUP_HOMEPAGE_SHOW_LATEST_BLOCKS cannot not be used if NEXT_PUBLIC_ROLLUP_TYPE is not defined',
+          value => value === undefined,
+        ),
+      }),
   });
 
 const adButlerConfigSchema = yup
diff --git a/deploy/tools/envs-validator/test/.env.rollup b/deploy/tools/envs-validator/test/.env.rollup
index e7cacfb086..04100c6abe 100644
--- a/deploy/tools/envs-validator/test/.env.rollup
+++ b/deploy/tools/envs-validator/test/.env.rollup
@@ -1,4 +1,5 @@
 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_FAULT_PROOF_ENABLED=true
\ No newline at end of file
+NEXT_PUBLIC_FAULT_PROOF_ENABLED=true
+NEXT_PUBLIC_ROLLUP_HOMEPAGE_SHOW_LATEST_BLOCKS=true
\ No newline at end of file
diff --git a/docs/ENVS.md b/docs/ENVS.md
index c3e3ab1225..8d1f8c7565 100644
--- a/docs/ENVS.md
+++ b/docs/ENVS.md
@@ -433,6 +433,7 @@ This feature is **enabled by default** with the `coinzilla` ads provider. To swi
 | NEXT_PUBLIC_ROLLUP_L2_WITHDRAWAL_URL | `string` | URL for L2 -> L1 withdrawals (Optimistic stack only) | Required for `optimistic` rollups | - | `https://app.optimism.io/bridge/withdraw` | v1.24.0+ |
 | NEXT_PUBLIC_FAULT_PROOF_ENABLED | `boolean` | Set to `true` for chains with fault proof system enabled (Optimistic stack only) | - | - | `true` | v1.31.0+ |
 | NEXT_PUBLIC_HAS_MUD_FRAMEWORK | `boolean` | Set to `true` for instances that use MUD framework (Optimistic stack only) | - | - | `true` | v1.33.0+ |
+| NEXT_PUBLIC_ROLLUP_HOMEPAGE_SHOW_LATEST_BLOCKS | `boolean` | Set to `true` to display "Latest blocks" widget instead of "Latest batches" on the home page | - | - | `true` | v1.36.0+ |
 
 &nbsp;
 
diff --git a/ui/pages/Home.tsx b/ui/pages/Home.tsx
index 42a45e6cae..36af7cb459 100644
--- a/ui/pages/Home.tsx
+++ b/ui/pages/Home.tsx
@@ -14,6 +14,20 @@ import AdBanner from 'ui/shared/ad/AdBanner';
 const rollupFeature = config.features.rollup;
 
 const Home = () => {
+
+  const leftWidget = (() => {
+    if (rollupFeature.isEnabled && !rollupFeature.homepage.showLatestBlocks) {
+      switch (rollupFeature.type) {
+        case 'zkEvm':
+          return <LatestZkEvmL2Batches/>;
+        case 'arbitrum':
+          return <LatestArbitrumL2Batches/>;
+      }
+    }
+
+    return <LatestBlocks/>;
+  })();
+
   return (
     <Box as="main">
       <HeroBanner/>
@@ -23,9 +37,7 @@ const Home = () => {
       </Flex>
       <AdBanner mt={ 6 } mx="auto" display={{ base: 'flex', lg: 'none' }} justifyContent="center"/>
       <Flex mt={ 8 } direction={{ base: 'column', lg: 'row' }} columnGap={ 12 } rowGap={ 6 }>
-        { rollupFeature.isEnabled && rollupFeature.type === 'zkEvm' && <LatestZkEvmL2Batches/> }
-        { rollupFeature.isEnabled && rollupFeature.type === 'arbitrum' && <LatestArbitrumL2Batches/> }
-        { !(rollupFeature.isEnabled && (rollupFeature.type === 'arbitrum' || rollupFeature.type === 'zkEvm')) && <LatestBlocks/> }
+        { leftWidget }
         <Box flexGrow={ 1 }>
           <Transactions/>
         </Box>