Flashblocks for Base chains (#2919)

* flashblocks tab

* add env variables

* minor fixes

* fix ts

* change package for decompressing socket data

* design updates

* [skip ci] delete unused env

* automatic mode switching for table

* fix validator schema

Author: tom2drum

configs/app/features/flashblocks.ts

@@ -0,0 +1,25 @@
+import type { Feature } from './types';
+
+import { getEnvValue } from '../utils';
+
+const title = 'Flashblocks';
+
+const socketUrl = getEnvValue('NEXT_PUBLIC_FLASHBLOCKS_SOCKET_URL');
+
+const config: Feature<{ socketUrl: string }> = (() => {
+
+  if (socketUrl) {
+    return Object.freeze({
+      title,
+      isEnabled: true,
+      socketUrl,
+    });
+  }
+
+  return Object.freeze({
+    title,
+    isEnabled: false,
+  });
+})();
+
+export default config;

configs/app/features/index.ts

@@ -17,6 +17,7 @@ export { default as easterEggBadge } from './easterEggBadge';
 export { default as easterEggPuzzleBadge } from './easterEggPuzzleBadge';
 export { default as externalTxs } from './externalTxs';
 export { default as faultProofSystem } from './faultProofSystem';
+export { default as flashblocks } from './flashblocks';
 export { default as gasTracker } from './gasTracker';
 export { default as getGasButton } from './getGasButton';
 export { default as googleAnalytics } from './googleAnalytics';

configs/envs/.env.base

@@ -9,6 +9,9 @@ NEXT_PUBLIC_APP_PORT=3000
 NEXT_PUBLIC_APP_ENV=development
 NEXT_PUBLIC_API_WEBSOCKET_PROTOCOL=ws
 
+NEXT_PUBLIC_FLASHBLOCKS_SOCKET_URL=wss://mainnet.flashblocks.base.org/ws
+NEXT_PUBLIC_IS_TESTNET=false
+
 # Instance ENVs
 NEXT_PUBLIC_ADMIN_SERVICE_API_HOST=https://admin-rs.services.blockscout.com
 NEXT_PUBLIC_API_BASE_PATH=/

decs.d.ts

@@ -1,2 +1,3 @@
 declare module 'react-identicons';
 declare module 'use-font-face-observer';
+declare module 'brotli-compress/js';

deploy/tools/envs-validator/schema.ts

@@ -705,6 +705,12 @@ const address3rdPartyWidgetsConfigSchema = yup
       }),
   });
 
+const flashblocksSchema = yup
+  .object()
+  .shape({
+    NEXT_PUBLIC_FLASHBLOCKS_SOCKET_URL: yup.string().test(urlTest),
+  });
+
 const schema = yup
   .object()
   .noUnknown(true, (params) => {
@@ -1141,6 +1147,7 @@ const schema = yup
   .concat(tacSchema)
   .concat(address3rdPartyWidgetsConfigSchema)
   .concat(addressMetadataSchema)
-  .concat(userOpsSchema);
+  .concat(userOpsSchema)
+  .concat(flashblocksSchema);
 
 export default schema;

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

@@ -93,3 +93,4 @@ NEXT_PUBLIC_REWARDS_SERVICE_API_HOST=https://example.com
 NEXT_PUBLIC_ADDRESS_3RD_PARTY_WIDGETS=['widget-1', 'widget-2']
 NEXT_PUBLIC_ADDRESS_3RD_PARTY_WIDGETS_CONFIG_URL=https://example.com
 NEXT_PUBLIC_NAVIGATION_PROMO_BANNER_CONFIG={'img_url': 'https://example.com/promo.svg', 'text': 'Promo text', 'bg_color': {'light': 'rgb(250, 245, 255)', 'dark': 'rgb(68, 51, 122)'}, 'text_color': {'light': 'rgb(107, 70, 193)', 'dark': 'rgb(233, 216, 253)'}, 'link_url': 'https://example.com'}
+NEXT_PUBLIC_FLASHBLOCKS_SOCKET_URL=wss://example.com/ws

docs/ENVS.md

@@ -77,6 +77,7 @@ All json-like values should be single-quoted. If it contains a hash (`#`) or a d
   - [Save on gas with GasHawk](#save-on-gas-with-gashawk)
   - [Rewards service API](#rewards-service-api)
   - [DEX pools](#dex-pools)
+  - [Flashblocks](#flashblocks)
   - [Address 3rd party widgets](#address-3rd-party-widgets)
 - [3rd party services configuration](#external-services-configuration)
 
@@ -934,6 +935,16 @@ This feature enables Blockscout Merits program. It requires that the [My account
 
  
 
+### Flashblocks
+
+This feature allows users to view [Flashblocks](https://docs.base.org/base-chain/flashblocks/apps)-related content in the explorer, including the Flashblocks real-time feed. It currently supports only Base chains.
+
+| Variable | Type| Description | Compulsoriness  | Default value | Example value | Version |
+| --- | --- | --- | --- | --- | --- | --- |
+| NEXT_PUBLIC_FLASHBLOCKS_SOCKET_URL | `string` | Public WebSocket endpoint to stream Flashblocks data | Required | - | `wss://mainnet.flashblocks.base.org/ws` | v2.3.0+ |
+
+ 
+
 ### Address 3rd party widgets
 
 This feature allows to display widgets on the address page with data from 3rd party services.

icons/flashblock.svg

@@ -6,6 +6,7 @@ function generateCspPolicy() {
     descriptors.app(),
     descriptors.ad(),
     descriptors.cloudFlare(),
+    descriptors.flashblocks(),
     descriptors.gasHawk(),
     descriptors.googleAnalytics(),
     descriptors.googleFonts(),
@@ -17,6 +18,7 @@ function generateCspPolicy() {
     descriptors.monaco(),
     descriptors.multichain(),
     descriptors.rollbar(),
+    descriptors.rollup(),
     descriptors.safe(),
     descriptors.usernameApi(),
     descriptors.walletConnect(),

nextjs/csp/generateCspPolicy.ts

@@ -1,7 +1,5 @@
 import type CspDev from 'csp-dev';
 
-import { getFeaturePayload } from 'configs/app/features/types';
-
 import config from 'configs/app';
 
 import { KEY_WORDS } from '../utils';
@@ -45,7 +43,6 @@ export function app(): CspDev.DirectiveDescriptor {
 
       // chain RPC server
       ...config.chain.rpcUrls,
-      ...(getFeaturePayload(config.features.rollup)?.parentChain?.rpcUrls ?? []),
       'https://infragrid.v.network', // RPC providers
 
       // github (spec for api-docs page)