Highlights banners on home page (#3175)

* basic implementation

* fix loading state of image

* tests

* try to fix flaky tests

Author: tom2drum

configs/app/ui.ts

@@ -71,6 +71,7 @@ const UI = Object.freeze({
     charts: parseEnvJson<Array<ChainIndicatorId>>(getEnvValue('NEXT_PUBLIC_HOMEPAGE_CHARTS')) || [],
     stats: homePageStats,
     heroBanner: parseEnvJson<HeroBannerConfig>(getEnvValue('NEXT_PUBLIC_HOMEPAGE_HERO_BANNER_CONFIG')),
+    highlights: getExternalAssetFilePath('NEXT_PUBLIC_HOMEPAGE_HIGHLIGHTS_CONFIG'),
   },
   views,
   indexingAlert: {

configs/envs/.env.main

@@ -9,6 +9,8 @@ NEXT_PUBLIC_APP_PORT=3000
 NEXT_PUBLIC_APP_ENV=development
 NEXT_PUBLIC_API_WEBSOCKET_PROTOCOL=ws
 
+NEXT_PUBLIC_HOMEPAGE_HIGHLIGHTS_CONFIG=https://raw.githubusercontent.com/blockscout/frontend-configs/main/configs/homepage-highlights/test.json
+
 # Instance ENVs
 NEXT_PUBLIC_AD_BANNER_ENABLE_SPECIFY=true
 NEXT_PUBLIC_ADDRESS_3RD_PARTY_WIDGETS=['talentprotocol', 'efp', 'webacy', 'deepdao', 'humanpassport', 'trustblock', 'smartmuv', 'blockscoutbadges', 'etherscore', 'gitpoap', 'drops', 'humanode']

deploy/scripts/download_assets.sh

@@ -27,6 +27,7 @@ ASSETS_ENVS=(
     "NEXT_PUBLIC_OG_IMAGE_URL"
     "NEXT_PUBLIC_ADDRESS_3RD_PARTY_WIDGETS_CONFIG_URL"
     "NEXT_PUBLIC_ZETACHAIN_SERVICE_CHAINS_CONFIG_URL"
+    "NEXT_PUBLIC_HOMEPAGE_HIGHLIGHTS_CONFIG"
 )
 
 # Create the assets directory if it doesn't exist

deploy/tools/envs-validator/index.ts

@@ -48,6 +48,7 @@ async function validateEnvs(appEnvs: Record<string, string>) {
       'NEXT_PUBLIC_FOOTER_LINKS',
       'NEXT_PUBLIC_ADDRESS_3RD_PARTY_WIDGETS_CONFIG_URL',
       'NEXT_PUBLIC_ZETACHAIN_SERVICE_CHAINS_CONFIG_URL',
+      'NEXT_PUBLIC_HOMEPAGE_HIGHLIGHTS_CONFIG',
     ];
 
     for await (const envName of envsWithJsonConfig) {

deploy/tools/envs-validator/schema.ts

@@ -164,6 +164,7 @@ const schema = yup
   .concat(featuresSchemas.beaconChainSchema)
   .concat(featuresSchemas.bridgedTokensSchema)
   .concat(featuresSchemas.defiDropdownSchema)
+  .concat(featuresSchemas.highlightsConfigSchema)
   .concat(featuresSchemas.marketplaceSchema)
   .concat(featuresSchemas.megaEthSchema)
   .concat(featuresSchemas.rollupSchema)

deploy/tools/envs-validator/schemas/features/highlights.ts

@@ -0,0 +1,25 @@
+import { HighlightsBannerConfig } from "types/homepage";
+import { urlTest } from "../../utils";
+import * as yup from 'yup';
+
+const highlightsBannerConfigSchema: yup.ObjectSchema<HighlightsBannerConfig> = yup.object({
+  title: yup.string().required(),
+  description: yup.string().required(),
+  title_color: yup.array().max(2).of(yup.string()),
+  description_color: yup.array().max(2).of(yup.string()),
+  background: yup.array().max(2).of(yup.string()),
+  side_img_url: yup.array().max(2).of(yup.string()),
+  is_pinned: yup.boolean(),
+  page_path: yup.string(),
+  redirect_url: yup.string().test(urlTest),
+});
+
+export const highlightsConfigSchema = yup
+  .object()
+  .shape({
+    NEXT_PUBLIC_HOMEPAGE_HIGHLIGHTS_CONFIG: yup
+      .array()
+      .json()
+      .of(highlightsBannerConfigSchema)
+      .min(2)
+  });

deploy/tools/envs-validator/schemas/features/index.ts

@@ -4,6 +4,7 @@ export * from './apiDocs';
 export * from './beaconChain';
 export * from './bridgedToken';
 export * from './defiDropdown';
+export * from './highlights';
 export * from './marketplace';
 export * from './megaEth';
 export * from './rollup';

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

@@ -92,3 +92,4 @@ 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
+NEXT_PUBLIC_HOMEPAGE_HIGHLIGHTS_CONFIG=https://example.com

deploy/tools/envs-validator/test/assets/configs/homepage_highlights_config.json

@@ -0,0 +1,21 @@
+[
+    {
+      "title": "Duck Deep into Transactions",
+      "description": "Explore and track all blockchain transactions",
+      "title_color": ["#1a472a", "#4ade80"],
+      "description_color": ["#374151", "#d1d5db"],
+      "background": ["#e0f2fe", "#0f172a"],
+      "side_img_url": [
+        "https://example.com",
+        "https://example.com"
+      ],
+      "page_path": "/txs"
+    },
+    {
+      "title": "Capybara Hot Spring Pools",
+      "description": "Monitor liquidity and staking pools",
+      "is_pinned": true,
+      "redirect_url": "https://example.com"
+    }
+  ]
+  

docs/ENVS.md

@@ -144,6 +144,7 @@ Also, be aware that if you customize the name of the currency or any of its deno
 | NEXT_PUBLIC_HOMEPAGE_CHARTS | `Array<'daily_txs' \| 'daily_operational_txs' \| 'coin_price'  \| 'secondary_coin_price' \| 'market_cap' \| 'tvl'>` | List of charts displayed on the home page | - | - | `['daily_txs','coin_price','market_cap']` | v1.0.x+ |
 | NEXT_PUBLIC_HOMEPAGE_STATS | `Array<'latest_batch' \| 'total_blocks'  \| 'average_block_time' \| 'total_txs' \| 'total_operational_txs' \| 'latest_l1_state_batch' \| 'wallet_addresses' \| 'gas_tracker' \| 'btc_locked' \| 'current_epoch'>` | List of stats widgets displayed on the home page | - | For zkSync, zkEvm and Arbitrum rollups: `['latest_batch','average_block_time','total_txs','wallet_addresses','gas_tracker']`, for other cases: `['total_blocks','average_block_time','total_txs','wallet_addresses','gas_tracker']` | `['total_blocks','total_txs','wallet_addresses']` | v1.35.x+ |
 | NEXT_PUBLIC_HOMEPAGE_HERO_BANNER_CONFIG | `HeroBannerConfig`, see details [below](#hero-banner-configuration-properties) | Configuration of hero banner appearance. | - | - | See [below](#hero-banner-configuration-properties) | v1.35.0+ |
+| NEXT_PUBLIC_HOMEPAGE_HIGHLIGHTS_CONFIG | `string` | URL of the file (in `.json` format only) that contains the configuration for banners on the application's homepage, showcasing some of its key functionality. See the full config format [below](#highlights-banner-configuration-properties). The config should contain at least 2 banners, but only 3 banners will be visible at the same time. A larger number of banners in the config allows for random banner rotation upon page load. | - | - | See [below](#highlights-banner-configuration-properties) | upcoming |
 
 #### Hero banner configuration properties
 
@@ -157,6 +158,23 @@ _Note_ Here, all values are arrays of up to two strings. The first string repres
 | search | `{ border_width: [string, string] }` | Search bar customization. Currently supports only width of the border (in px). | - | - | `{ 'border_width': ['0px', '2px'] }` |
 | button | `Partial<Record<'_default' \| '_hover' \| '_selected', {'background'?: [string, string]; 'text_color?:[string, string]'}>>` | The button on the banner. It has three possible states: `_default`, `_hover`, and `_selected`. The `_selected` state reflects when the user is logged in or their wallet is connected to the app. | - | - | `{'_default':{'background':['deeppink'],'text_color':['white']}}` |
 
+#### Highlights banner configuration properties
+
+_Note_ Some properties can hold an array of up to two strings. The first string represents the value for the light color mode, while the second string represents the value for the dark color mode. If the array contains only one string, it will be used for both color modes.
+
+| Variable | Type| Description | Compulsoriness  | Default value | Example value |
+| --- | --- | --- | --- | --- | --- |
+| title | `string` | Title on the banner | Required | - | `Duck Deep into Transactions` |
+| description | `string` | Short description of the feature | Required | - | `Explore and track all blockchain transactions` |
+| title_color | `[string, string]` | Text color of the title. | - | `['#101112', '#F8FCFF']` | `['#FFB8D4', '#D9FE41']` |
+| description_color | `[string, string]` | Text color of the description. | - | `['#718096', '#AEB1B6']` | `['#FFB8D4', '#D9FE41']` |
+| background | `[string, string]` | Banner background (could be a solid color, gradient or picture). The string should be a valid `background` CSS property value. | - | `['#EFF7FF', '#2A3340']` | `['deeppink']` |
+| side_img_url | `[string, string]` | URL of an image that appears on the right side of the banner. | - | - | `https://placekitten/1400/200` |
+| is_pinned | `boolean` | Indicates whether the banner should remain always visible despite potential rotation. | - | - | `https://placekitten/1400/200` |
+| page_path | `string` | Internal page path for constructing the banner link. | - | - | `/pools` |
+| redirect_url | `string` | External link on the banner. | - | - | `https://example.com` |
+
+
 &nbsp;
 
 ### Navigation