Add env variable to set Celenium Explorer URL (#2728)

* Add env variable to set Celenium Explorer URL

Fixes #2724

* fix test

* [skip ci] update version in docs

configs/app/features/rollup.ts

@@ -41,6 +41,7 @@ const config: Feature<{
   DA: {
     celestia: {
       namespace: string | undefined;
+      celeniumUrl: string | undefined;
     };
   };
 }> = (() => {
@@ -59,6 +60,7 @@ const config: Feature<{
       DA: {
         celestia: {
           namespace: type === 'arbitrum' ? getEnvValue('NEXT_PUBLIC_ROLLUP_DA_CELESTIA_NAMESPACE') : undefined,
+          celeniumUrl: getEnvValue('NEXT_PUBLIC_ROLLUP_DA_CELESTIA_CELENIUM_URL'),
         },
       },
     });

configs/envs/.env.rari_testnet

@@ -38,3 +38,4 @@ NEXT_PUBLIC_SEO_ENHANCED_DATA_ENABLED=false
 NEXT_PUBLIC_VIEWS_ADDRESS_IDENTICON_TYPE=jazzicon
 NEXT_PUBLIC_VISUALIZE_API_HOST=https://visualizer.services.blockscout.com
 NEXT_PUBLIC_ROLLUP_DA_CELESTIA_NAMESPACE=0x00000000000000000000000000000000000000ca1de12a9905be97beaf
+NEXT_PUBLIC_ROLLUP_DA_CELESTIA_CELENIUM_URL=https://mocha.celenium.io/blob
\ No newline at end of file

deploy/tools/envs-validator/schema.ts

@@ -417,6 +417,14 @@ const rollupSchema = yup
         then: (schema) => schema,
         otherwise: (schema) => schema.max(-1, 'NEXT_PUBLIC_ROLLUP_DA_CELESTIA_NAMESPACE can only be used if NEXT_PUBLIC_ROLLUP_TYPE is set to \'arbitrum\' '),
       }),
+    NEXT_PUBLIC_ROLLUP_DA_CELESTIA_CELENIUM_URL: yup
+      .string()
+      .test(urlTest)
+      .when('NEXT_PUBLIC_ROLLUP_TYPE', {
+        is: (value: string) => value === 'arbitrum' || value === 'optimistic',
+        then: (schema) => schema,
+        otherwise: (schema) => schema.max(-1, 'NEXT_PUBLIC_ROLLUP_DA_CELESTIA_CELENIUM_URL can only be used if NEXT_PUBLIC_ROLLUP_TYPE is set to \'arbitrum\' or \'optimistic\''),
+      }),
   });
 
 const celoSchema = yup

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

@@ -5,3 +5,4 @@ NEXT_PUBLIC_ROLLUP_PARENT_CHAIN_NAME=DuckChain
 NEXT_PUBLIC_ROLLUP_PARENT_CHAIN={'baseUrl':'https://explorer.duckchain.io','currency':{'name':'Quack','symbol':'QUACK','decimals':18},'isTestnet':true,'id':42,'name':'DuckChain','rpcUrls':['https://rpc.duckchain.io']}
 
 NEXT_PUBLIC_ROLLUP_DA_CELESTIA_NAMESPACE=0x00000000000000000000000000000000000000ca1de12a9905be97beaf
+NEXT_PUBLIC_ROLLUP_DA_CELESTIA_CELENIUM_URL=https://mocha.celenium.io/blob
\ No newline at end of file

docs/ENVS.md

@@ -472,6 +472,7 @@ This feature is **enabled by default** with the `coinzilla` ads provider. To swi
 | NEXT_PUBLIC_ROLLUP_PARENT_CHAIN_NAME | `string` | Set to customize L1 transaction status labels in the UI (e.g., "Sent to <chain-name>"). This setting is applicable only for Arbitrum-based chains. **DEPRECATED** _Use `NEXT_PUBLIC_ROLLUP_PARENT_CHAIN` instead_ | - | - | `DuckChain` | v1.37.0+ |
 | NEXT_PUBLIC_ROLLUP_PARENT_CHAIN | `ParentChain`, see details [below](#parent-chain-configuration-properties) | Configuration parameters for the parent chain. | - | - | `{'baseUrl':'https://explorer.duckchain.io'}` | v1.38.0+ |
 | NEXT_PUBLIC_ROLLUP_DA_CELESTIA_NAMESPACE | `string` | Hex-string for creating a link to the transaction batch on the Seleneium explorer. "0x"-format and 60 symbol length. Available only for Arbitrum roll-ups. | - | - | `0x00000000000000000000000000000000000000ca1de12a9905be97beaf` | v1.38.0+ |
+| NEXT_PUBLIC_ROLLUP_DA_CELESTIA_CELENIUM_URL | `string` | URL for the Selenium explorer. It is used to create links to the Data Availability Blobs page. The URL should contain the full path without any search parameters related to the blob, as these will be constructed at runtime for each blob separately. Available only for Optimistic or Arbitrum roll-ups. | - | - | `https://mocha.celenium.io/blob` | v2.0.2+ |
 
 #### Parent chain configuration properties
 

playwright/fixtures/mockEnvs.ts

@@ -21,12 +21,14 @@ export const ENVS_MAP: Record<string, Array<[string, string]>> = {
     [ 'NEXT_PUBLIC_ROLLUP_L1_BASE_URL', 'https://localhost:3101' ],
     [ 'NEXT_PUBLIC_ROLLUP_L2_WITHDRAWAL_URL', 'https://localhost:3102' ],
     [ 'NEXT_PUBLIC_FAULT_PROOF_ENABLED', 'true' ],
+    [ 'NEXT_PUBLIC_ROLLUP_DA_CELESTIA_CELENIUM_URL', 'https://mocha.celenium.io/blob' ],
   ],
   arbitrumRollup: [
     [ 'NEXT_PUBLIC_ROLLUP_TYPE', 'arbitrum' ],
     [ 'NEXT_PUBLIC_ROLLUP_L1_BASE_URL', 'https://localhost:3101' ],
     [ 'NEXT_PUBLIC_ROLLUP_PARENT_CHAIN_NAME', 'DuckChain' ],
     [ 'NEXT_PUBLIC_ROLLUP_DA_CELESTIA_NAMESPACE', '0x1234' ],
+    [ 'NEXT_PUBLIC_ROLLUP_DA_CELESTIA_CELENIUM_URL', 'https://mocha.celenium.io/blob' ],
   ],
   shibariumRollup: [
     [ 'NEXT_PUBLIC_ROLLUP_TYPE', 'shibarium' ],

ui/shared/batch/CeleniumLink.tsx

 import { Flex, Icon } from '@chakra-ui/react';
 import React from 'react';
 
+import config from 'configs/app';
 // eslint-disable-next-line no-restricted-imports
 import celeniumIcon from 'icons/brands/celenium.svg';
 import hexToBase64 from 'lib/hexToBase64';
 import { Link } from 'toolkit/chakra/link';
 
+const feature = config.features.rollup;
+
 interface Props {
   commitment: string;
   namespace: string;
   height: number;
+  fallback?: React.ReactNode;
 }
 
 function getCeleniumUrl(props: Props) {
-  const url = new URL('https://mocha.celenium.io/blob');
+  try {
+    if (!feature.isEnabled || !feature.DA.celestia.celeniumUrl) {
+      return undefined;
+    }
+
+    const url = new URL(feature.DA.celestia.celeniumUrl);
 
     url.searchParams.set('commitment', hexToBase64(props.commitment));
     url.searchParams.set('hash', hexToBase64(props.namespace));
     url.searchParams.set('height', String(props.height));
 
     return url.toString();
+  } catch (error) {}
 }
 
 const CeleniumLink = (props: Props) => {
+  const url = getCeleniumUrl(props);
+
+  if (!url) {
+    return props.fallback ?? null;
+  }
+
   return (
     <Flex alignItems="center" columnGap={ 2 }>
       <Icon as={ celeniumIcon } boxSize={ 5 }/>

ui/txnBatches/optimisticL2/OptimisticL2TxnBatchBlobCelestia.tsx

@@ -29,7 +29,7 @@ const OptimisticL2TxnBatchBlobCelestia = ({ blobs, isLoading }: Props) => {
                 <CopyToClipboard text={ blob.commitment }/>
               </Flex>
             </GridItem>
-            <CeleniumLink commitment={ blob.commitment } namespace={ blob.namespace } height={ blob.height }/>
+            <CeleniumLink commitment={ blob.commitment } namespace={ blob.namespace } height={ blob.height } fallback={ <GridItem/> }/>
             <GridItem fontWeight={ 600 }>Height</GridItem>
             <GridItem colSpan={ 2 }>
               { blob.height }