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
2026-09-24 00:28:18 +00:00 · 2024-07-11 12:52:16 +02:00
parent 76abb6080f
commit 1c38438c1b
24 changed files with 32 additions and 18 deletions
@@ -0,0 +1,3 @@
+<svg viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
+  <path clip-rule="evenodd" d="M8.175 2.102a.834.834 0 0 0-.835-.832H5.36a.834.834 0 0 0-.835.832v1.972c0 .46-.374.832-.835.832H1.835A.834.834 0 0 0 1 5.74v12.155c0 .46.374.833.835.833h1.98a.834.834 0 0 0 .835-.832V5.739c0-.46.374-.833.835-.833H7.34a.834.834 0 0 0 .835-.832V2.102Zm7.3 0a.834.834 0 0 0-.835-.832h-1.98a.834.834 0 0 0-.835.832v1.972c0 .46.374.832.835.832h1.855c.461 0 .835.373.835.833v12.155c0 .46.374.833.835.833h1.98a.834.834 0 0 0 .835-.832V5.739a.834.834 0 0 0-.835-.833H16.31a.834.834 0 0 1-.835-.832V2.102Zm-3.65 6.962a.834.834 0 0 0-.835-.832H9.01a.834.834 0 0 0-.835.832v5.401c0 .46.374.833.835.833h1.98a.834.834 0 0 0 .835-.833V9.064Z" stroke="currentColor" stroke-width="1.4"/>
+</svg>
@@ -1,6 +0,0 @@
-<svg viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
-  <path fill-rule="evenodd" clip-rule="evenodd" d="M9.385 17.044c1.752 2.174 4.83 3.47 7.255 4.44v-2.52a5.76 5.76 0 0 0 0-11.52H16v2.281c.064.13.118.257.156.381L16 10.5v.5c.242-.242.259-.555.156-.894l.484-1.222a4.32 4.32 0 1 1 0 8.64H15.2v1.786c-1.654-.75-2.926-1.482-3.85-2.266H9.385Z" fill="currentColor"/>
-  <path fill-rule="evenodd" clip-rule="evenodd" d="M9.385 17.044c1.752 2.174 4.83 3.47 7.255 4.44v-2.52a5.76 5.76 0 0 0 0-11.52H16v2.281c.064.13.118.257.156.381L16 10.5v.5c.242-.242.259-.555.156-.894l.484-1.222a4.32 4.32 0 1 1 0 8.64H15.2v1.786c-1.654-.75-2.926-1.482-3.85-2.266H9.385Z" fill="currentColor"/>
-  <path d="M10.4 3.444H7.2a6.32 6.32 0 0 0-4.526 1.923A6.65 6.65 0 0 0 .8 10.008c0 1.741.674 3.41 1.874 4.642A6.32 6.32 0 0 0 7.2 16.572v2.872c4-1.64 9.6-4.102 9.6-9.436a6.65 6.65 0 0 0-1.875-4.641A6.32 6.32 0 0 0 10.4 3.444ZM8.8 14.931H7.2c-.63 0-1.255-.127-1.837-.374a4.793 4.793 0 0 1-1.557-1.068c-.446-.457-.8-1-1.04-1.597a5.033 5.033 0 0 1 0-3.768 4.933 4.933 0 0 1 1.04-1.597c.445-.457.975-.82 1.557-1.067A4.696 4.696 0 0 1 7.2 5.085h3.2a4.74 4.74 0 0 1 3.394 1.442 4.988 4.988 0 0 1 1.406 3.481c0 2.962-1.97 4.895-6.4 6.958v-2.035Z" fill="currentColor"/>
-  <path d="M10.4 3.444H7.2a6.32 6.32 0 0 0-4.526 1.923A6.65 6.65 0 0 0 .8 10.008c0 1.741.674 3.41 1.874 4.642A6.32 6.32 0 0 0 7.2 16.572v2.872c4-1.64 9.6-4.102 9.6-9.436a6.65 6.65 0 0 0-1.875-4.641A6.32 6.32 0 0 0 10.4 3.444ZM8.8 14.931H7.2c-.63 0-1.255-.127-1.837-.374a4.793 4.793 0 0 1-1.557-1.068c-.446-.457-.8-1-1.04-1.597a5.033 5.033 0 0 1 0-3.768 4.933 4.933 0 0 1 1.04-1.597c.445-.457.975-.82 1.557-1.067A4.696 4.696 0 0 1 7.2 5.085h3.2a4.74 4.74 0 0 1 3.394 1.442 4.988 4.988 0 0 1 1.406 3.481c0 2.962-1.97 4.895-6.4 6.958v-2.035Z" fill="currentColor"/>
-</svg>
@@ -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 ©
@@ -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"
@@ -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',