Hero banner: move heading copy to configurable text in hero banner JSON (#3335)

* Hero banner: move 'explorer' to new ENV

Resolves #3290

* [skip ci] update docs

deploy/scripts/og_image_generator.js

@@ -23,7 +23,7 @@ if (process.env.NEXT_PUBLIC_OG_IMAGE_URL) {
   try {
     const bannerConfig = JSON.parse(process.env.NEXT_PUBLIC_HOMEPAGE_HERO_BANNER_CONFIG?.replaceAll('\'', '"') || '{}');
     const data = {
-      title: `${ process.env.NEXT_PUBLIC_NETWORK_NAME } explorer`,
+      title: bannerConfig.text || `${ process.env.NEXT_PUBLIC_NETWORK_NAME } explorer`,
       logo_url: process.env.NEXT_PUBLIC_NETWORK_LOGO_DARK ?? process.env.NEXT_PUBLIC_NETWORK_LOGO,
       background: bannerConfig.background?.[0],
       title_color: bannerConfig.text_color?.[0],

deploy/tools/envs-validator/schemas/ui.ts

@@ -38,6 +38,7 @@ const heroBannerSchema: yup.ObjectSchema<HeroBannerConfig> = yup.object()
       search: yup.object({
         border_width: yup.array().max(2).of(yup.string()),
       }),
+      text: yup.string(),
     });
 
 export const homepageSchema = yup.object({

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

@@ -10,7 +10,7 @@ NEXT_PUBLIC_HOMEPAGE_STATS=['total_txs','wallet_addresses']
 NEXT_PUBLIC_API_DOCS_TABS=[]
 NEXT_PUBLIC_FEATURED_NETWORKS=http://example.com
 NEXT_PUBLIC_FOOTER_LINKS=http://example.com
-NEXT_PUBLIC_HOMEPAGE_HERO_BANNER_CONFIG={'background':['linear-gradient(90deg, rgb(232, 52, 53) 0%, rgb(139, 28, 232) 100%)'],'text_color':['rgb(255, 255, 255)']}
+NEXT_PUBLIC_HOMEPAGE_HERO_BANNER_CONFIG={'background':['linear-gradient(90deg, rgb(232, 52, 53) 0%, rgb(139, 28, 232) 100%)'],'text_color':['rgb(255, 255, 255)'],'text': 'Duck migration observer'}
 NEXT_PUBLIC_MULTICHAIN_BALANCE_PROVIDER_CONFIG=[{'name': 'zerion', 'url_template': 'https://app.zerion.io/{address}/overview', 'logo': 'https://raw.githubusercontent.com/blockscout/frontend-configs/main/configs/marketplace-logos/zerion.svg'}]
 NEXT_PUBLIC_NETWORK_ICON=http://example.com
 NEXT_PUBLIC_NETWORK_ICON_DARK=http://example.com

docs/ENVS.md

@@ -148,10 +148,11 @@ Also, be aware that if you customize the name of the currency or any of its deno
 
 #### Hero banner configuration properties
 
-_Note_ Here, all values are arrays of up to two strings. The first string represents the value for the light color mode, and 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.
+_Note_ Here, some values are arrays of up to two strings. The first string represents the value for the light color mode, and 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 |
 | --- | --- | --- | --- | --- | --- |
+| text | `string` | The text on the banner | - | `{ chain_name } explorer` | `Duck migration observer` |
 | background | `[string, string]` | Banner background (could be a solid color, gradient or picture). The string should be a valid `background` CSS property value. | - | `['radial-gradient(103.03% 103.03% at 0% 0%, rgba(183, 148, 244, 0.8) 0%, rgba(0, 163, 196, 0.8) 100%), var(--chakra-colors-blue-400)']` | `['lightpink','no-repeat bottom 20% right 0px/100% url(https://placekitten/1400/200)']` |
 | text_color | `[string, string]` | Banner text background. The string should be a valid `color` CSS property value. | - | `['white']` | `['lightpink','#DCFE76']` |
 | border | `[string, string]` | Banner border. The string should be a valid `border` CSS property value. | - | - | `['1px solid yellow','4px dashed #DCFE76']` |

types/homepage.ts

@@ -32,6 +32,7 @@ export interface HeroBannerConfig {
   search?: {
     border_width?: Array<string | undefined>;
   };
+  text?: string;
 }
 
 export interface HighlightsBannerConfig {

ui/home/HeroBanner.pw.tsx

@@ -24,7 +24,7 @@ authTest('customization +@dark-mode', async({ render, page, mockEnvs, mockApiRes
   await mockEnvs([
     ...ENVS_MAP.rewardsService,
     // eslint-disable-next-line max-len
-    [ 'NEXT_PUBLIC_HOMEPAGE_HERO_BANNER_CONFIG', `{"background":["lightpink","no-repeat center/cover url(${ IMAGE_URL })"],"text_color":["deepskyblue","white"],"border":["3px solid green","3px dashed yellow"],"button":{"_default":{"background":["deeppink"],"text_color":["white"]},"_selected":{"background":["lime"]}}}` ],
+    [ 'NEXT_PUBLIC_HOMEPAGE_HERO_BANNER_CONFIG', `{"text": "Duck migration observer","background":["lightpink","no-repeat center/cover url(${ IMAGE_URL })"],"text_color":["deepskyblue","white"],"border":["3px solid green","3px dashed yellow"],"button":{"_default":{"background":["deeppink"],"text_color":["white"]},"_selected":{"background":["lime"]}}}` ],
   ]);
 
   await page.route(IMAGE_URL, (route) => {

ui/home/HeroBanner.tsx

@@ -49,6 +49,16 @@ const HeroBanner = () => {
       config.UI.homepage.heroBanner?.border?.[1] || config.UI.homepage.heroBanner?.border?.[0] || BORDER_DEFAULT,
   };
 
+  const text = (() => {
+    if (config.UI.homepage.heroBanner?.text) {
+      return config.UI.homepage.heroBanner.text;
+    }
+
+    return config.meta.seo.enhancedDataEnabled ?
+      `${ config.chain.name } blockchain explorer` :
+      `${ config.chain.name } explorer`;
+  })();
+
   return (
     <Flex
       w="100%"
@@ -68,11 +78,7 @@ const HeroBanner = () => {
             fontWeight={{ base: 500, lg: 700 }}
             color={ textColor }
           >
-            {
-              config.meta.seo.enhancedDataEnabled ?
-                `${ config.chain.name } blockchain explorer` :
-                `${ config.chain.name } explorer`
-            }
+            { text }
           </Heading>
           { config.UI.navigation.layout === 'vertical' && (
             <Box display={{ base: 'none', lg: 'flex' }} gap={ 2 }>