Add logo and copyright to page footer (#2051)

* Footer upgrade: logo and copyright

Fixes #2037

* add link to all chains to footer

* fix text color

lib/html-entities.ts

@@ -23,3 +23,4 @@ export const apos = String.fromCharCode(39); // apostrophe '
 export const shift = String.fromCharCode(8679); // upwards white arrow ⇧
 export const cmd = String.fromCharCode(8984); // place of interest sign ⌘
 export const alt = String.fromCharCode(9095); // alternate key symbol ⎇
+export const copy = String.fromCharCode(169); // copyright symbol ©

public/icons/name.d.ts

@@ -22,6 +22,7 @@
 	| "blobs/text"
 	| "block_slim"
 	| "block"
+	| "brands/blockscout"
 	| "brands/safe"
 	| "brands/solidity_scan"
 	| "burger"
@@ -39,7 +40,6 @@
 	| "copy"
 	| "cross"
 	| "delete"
-	| "discussions"
 	| "docs"
 	| "donate"
 	| "dots"

ui/snippets/footer/Footer.tsx

@@ -1,5 +1,5 @@
 import type { GridProps } from '@chakra-ui/react';
-import { Box, Grid, Flex, Text, Link, VStack, Skeleton } from '@chakra-ui/react';
+import { Box, Grid, Flex, Text, Link, VStack, Skeleton, useColorModeValue } from '@chakra-ui/react';
 import { useQuery } from '@tanstack/react-query';
 import React from 'react';
 
@@ -10,6 +10,8 @@ import type { ResourceError } from 'lib/api/resources';
 import useApiQuery from 'lib/api/useApiQuery';
 import useFetch from 'lib/hooks/useFetch';
 import useIssueUrl from 'lib/hooks/useIssueUrl';
+import { copy } from 'lib/html-entities';
+import IconSvg from 'ui/shared/IconSvg';
 import NetworkAddToWallet from 'ui/shared/NetworkAddToWallet';
 
 import FooterLinkItem from './FooterLinkItem';
@@ -30,6 +32,8 @@ const Footer = () => {
   });
   const apiVersionUrl = getApiVersionUrl(backendVersionData?.backend_version);
   const issueUrl = useIssueUrl(backendVersionData?.backend_version);
+  const logoColor = useColorModeValue('blue.600', 'white');
+
   const BLOCKSCOUT_LINKS = [
     {
       icon: 'edit' as const,
@@ -62,10 +66,10 @@ const Footer = () => {
       url: 'https://discord.gg/blockscout',
     },
     {
-      icon: 'discussions' as const,
-      iconSize: '20px',
-      text: 'Discussions',
-      url: 'https://github.com/orgs/blockscout/discussions',
+      icon: 'brands/blockscout' as const,
+      iconSize: '18px',
+      text: 'All chains',
+      url: 'https://www.blockscout.com/chains-and-projects',
     },
     {
       icon: 'donate' as const,
@@ -118,25 +122,37 @@ const Footer = () => {
   const renderProjectInfo = React.useCallback((gridArea?: GridProps['gridArea']) => {
     return (
       <Box gridArea={ gridArea }>
-        <Link fontSize="xs" href="https://www.blockscout.com">blockscout.com</Link>
+        <Flex columnGap={ 2 } fontSize="xs" lineHeight={ 5 } alignItems="center" color="text">
+          <span>Made with</span>
+          <Link href="https://www.blockscout.com" isExternal display="inline-flex" color={ logoColor } _hover={{ color: logoColor }}>
+            <IconSvg
+              name="networks/logo-placeholder"
+              width="80px"
+              height={ 4 }
+            />
+          </Link>
+        </Flex>
         <Text mt={ 3 } fontSize="xs">
           Blockscout is a tool for inspecting and analyzing EVM based blockchains. Blockchain explorer for Ethereum Networks.
         </Text>
-        <VStack spacing={ 1 } mt={ 6 } alignItems="start">
+        <Box mt={ 6 } alignItems="start" fontSize="xs" lineHeight={ 5 }>
           { apiVersionUrl && (
-            <Text fontSize="xs">
+            <Text>
               Backend: <Link href={ apiVersionUrl } target="_blank">{ backendVersionData?.backend_version }</Link>
             </Text>
           ) }
           { frontendLink && (
-            <Text fontSize="xs">
+            <Text>
               Frontend: { frontendLink }
             </Text>
           ) }
-        </VStack>
+          <Text>
+            Copyright { copy } Blockscout Limited 2023-{ (new Date()).getFullYear() }
+          </Text>
+        </Box>
       </Box>
     );
-  }, [ apiVersionUrl, backendVersionData?.backend_version, frontendLink ]);
+  }, [ apiVersionUrl, backendVersionData?.backend_version, frontendLink, logoColor ]);
 
   const containerProps: GridProps = {
     as: 'footer',