tests

configs/envs/.env.pw

@@ -8,11 +8,13 @@ NEXT_PUBLIC_APP_ENV=testing
 # ui config
 NEXT_PUBLIC_BLOCKSCOUT_VERSION=v4.1.7-beta
 NEXT_PUBLIC_NETWORK_EXPLORERS=[{'title':'Bitquery','baseUrl':'https://explorer.bitquery.io/','paths':{'tx':'/goerli/tx','address':'/goerli/address','token':'/goerli/token','block':'/goerli/block'}},{'title':'Etherscan','baseUrl':'https://goerli.etherscan.io/','paths':{'tx':'/tx','address':'/address','token':'/token','block':'/block'}}]
+NEXT_PUBLIC_GIT_TAG=v1.0.11
 NEXT_PUBLIC_HOMEPAGE_CHARTS=['daily_txs','coin_price','market_cap']
 NEXT_PUBLIC_HOMEPAGE_SHOW_AVG_BLOCK_TIME=true
 NEXT_PUBLIC_HOMEPAGE_SHOW_GAS_TRACKER=true
 NEXT_PUBLIC_HOMEPAGE_PLATE_BACKGROUND=
 NEXT_PUBLIC_FEATURED_NETWORKS=
+NEXT_PUBLIC_FOOTER_LINKS=
 NEXT_PUBLIC_NETWORK_LOGO=
 NEXT_PUBLIC_NETWORK_LOGO_DARK=
 NEXT_PUBLIC_NETWORK_ICON=

mocks/config/footerLinks.ts

+import type { CustomLinksGroup } from 'types/footerLinks';
+
+export const FOOTER_LINKS: Array<CustomLinksGroup> = [
+  {
+    title: 'Company',
+    links: [
+      {
+        text: 'Advertise',
+        url: 'https://coinzilla.com/',
+      },
+      {
+        text: 'Staking',
+        url: '',
+      },
+      {
+        text: 'Contact us',
+        url: '',
+      },
+      {
+        text: 'Brand assets',
+        url: '',
+      },
+      {
+        text: 'Term of service',
+        url: '',
+      },
+    ],
+  },
+  {
+    title: 'Community',
+    links: [
+      {
+        text: 'API docs',
+        url: '',
+      },
+      {
+        text: 'Knowledge base',
+        url: '',
+      },
+      {
+        text: 'Network status',
+        url: '',
+      },
+      {
+        text: 'Learn Alphabet',
+        url: '',
+      },
+    ],
+  },
+  {
+    title: 'Product',
+    links: [
+      {
+        text: 'Stake Alphabet',
+        url: '',
+      },
+      {
+        text: 'Build token',
+        url: '',
+      },
+      {
+        text: 'Build DAPPS',
+        url: '',
+      },
+      {
+        text: 'NFT marketplace',
+        url: '',
+      },
+      {
+        text: 'Become validator',
+        url: '',
+      },
+
+    ],
+  },
+];

types/footerLinks.ts

+type CustomLink = {
+  text: string;
+  url: string;
+}
+
+export type CustomLinksGroup = {
+  title: string;
+  links: Array<CustomLink>;
+}

ui/snippets/footer/Footer.pw.tsx

+import { test as base, expect } from '@playwright/experimental-ct-react';
+import React from 'react';
+
+import { FOOTER_LINKS } from 'mocks/config/footerLinks';
+import contextWithEnvs from 'playwright/fixtures/contextWithEnvs';
+import TestApp from 'playwright/TestApp';
+
+import Footer from './Footer';
+
+const FOOTER_LINKS_URL = 'https://localhost:3000/footer-links.json';
+
+base.describe('with custom links, 4 cols', () => {
+  const test = base.extend({
+    context: contextWithEnvs([
+      { name: 'NEXT_PUBLIC_FOOTER_LINKS', value: FOOTER_LINKS_URL },
+      // eslint-disable-next-line @typescript-eslint/no-explicit-any
+    ]) as any,
+  });
+
+  test('base view +@dark-mode +@mobile', async({ mount, page }) => {
+    await page.route(FOOTER_LINKS_URL, (route) => {
+      return route.fulfill({
+        body: JSON.stringify(FOOTER_LINKS),
+      });
+    });
+
+    await mount(
+      <TestApp>
+        <Footer/>
+      </TestApp>,
+    );
+
+    await expect(page).toHaveScreenshot();
+  });
+});
+
+base.describe('with custom links, 2 cols', () => {
+  const test = base.extend({
+    context: contextWithEnvs([
+      { name: 'NEXT_PUBLIC_FOOTER_LINKS', value: FOOTER_LINKS_URL },
+      // eslint-disable-next-line @typescript-eslint/no-explicit-any
+    ]) as any,
+  });
+
+  test('base view +@dark-mode +@mobile', async({ mount, page }) => {
+    await page.route(FOOTER_LINKS_URL, (route) => {
+      return route.fulfill({
+        body: JSON.stringify([ FOOTER_LINKS[0] ]),
+      });
+    });
+
+    await mount(
+      <TestApp>
+        <Footer/>
+      </TestApp>,
+    );
+
+    await expect(page).toHaveScreenshot();
+  });
+});
+
+base.describe('without custom links', () => {
+  base('base view +@dark-mode +@mobile', async({ mount, page }) => {
+
+    await mount(
+      <TestApp>
+        <Footer/>
+      </TestApp>,
+    );
+
+    await expect(page).toHaveScreenshot();
+  });
+});

ui/snippets/footer/Footer.tsx

@@ -2,6 +2,8 @@ import { Box, Grid, Flex, Text, Link, VStack, Skeleton } from '@chakra-ui/react'
 import { useQuery } from '@tanstack/react-query';
 import React from 'react';
 
+import type { CustomLinksGroup } from 'types/footerLinks';
+
 import appConfig from 'configs/app/config';
 import discussionsIcon from 'icons/discussions.svg';
 import editIcon from 'icons/edit.svg';
@@ -15,6 +17,8 @@ import NetworkAddToWallet from 'ui/shared/NetworkAddToWallet';
 import ColorModeToggler from '../header/ColorModeToggler';
 import FooterLinkItem from './FooterLinkItem';
 
+const MAX_LINKS_COLUMNS = 3;
+
 const API_VERSION_URL = `https://github.com/blockscout/blockscout/tree/${ appConfig.blockScoutVersion }`;
 // const FRONT_VERSION_URL = `https://github.com/blockscout/frontend/tree/${ appConfig.frontendVersion }`;
 
@@ -52,20 +56,10 @@ const BLOCSKOUT_LINKS = [
   },
 ];
 
-type CustomLink = {
-  text: string;
-  url: string;
-}
-
-type CustomLinksGroup = {
-  title: string;
-  links: Array<CustomLink>;
-}
-
 const Footer = () => {
   const fetch = useFetch();
 
-  const { isLoading, data } = useQuery<unknown, ResourceError<unknown>, Array<CustomLinksGroup>>(
+  const { isLoading, data: linksData } = useQuery<unknown, ResourceError<unknown>, Array<CustomLinksGroup>>(
     [ 'footer-links' ],
     async() => fetch(appConfig.footerLinks || ''),
     {
@@ -98,7 +92,13 @@ const Footer = () => {
           </Text>
         ) }
       </Box>
-      <Grid gap={{ base: 6, lg: 12 }} gridTemplateColumns={{ base: 'repeat(auto-fill, 160px)', lg: 'repeat(4, 160px)' }}>
+      <Grid
+        gap={{ base: 6, lg: 12 }}
+        gridTemplateColumns={ appConfig.footerLinks ?
+          { base: 'repeat(auto-fill, 160px)', lg: `repeat(${ (linksData?.length || MAX_LINKS_COLUMNS) + 1 }, 160px)` } :
+          'auto'
+        }
+      >
         <Box minW="160px" w={ appConfig.footerLinks ? '160px' : '100%' }>
           { appConfig.footerLinks && <Text fontWeight={ 500 } mb={ 3 }>Blockscout</Text> }
           <Grid
@@ -121,8 +121,8 @@ const Footer = () => {
             </Box>
           ))
         ) }
-        { appConfig.footerLinks && data && (
-          data.slice(0, 3).map(linkGroup => (
+        { appConfig.footerLinks && linksData && (
+          linksData.slice(0, MAX_LINKS_COLUMNS).map(linkGroup => (
             <Box minW="160px" key={ linkGroup.title }>
               <Text fontWeight={ 500 } mb={ 3 }>{ linkGroup.title }</Text>
               <VStack spacing={ 2 } alignItems="start">