Merge pull request #127 from blockscout/favicons-titles

add favicons, change titles

.env.example

@@ -11,4 +11,4 @@ NEXT_PUBLIC_FOOTER_GITHUB_LINK=https://github.com/blockscout/blockscout
 NEXT_PUBLIC_FOOTER_TWITTER_LINK=https://www.twitter.com/blockscoutcom
 NEXT_PUBLIC_FOOTER_TELEGRAM_LINK=https://t.me/poa_network
 NEXT_PUBLIC_FOOTER_STAKING_LINK=https://duneanalytics.com/maxaleks/xdai-staking
-NEXT_PUBLIC_SUPPORTED_NETWORKS=[{"name":"Gnosis Chain","type":"xdai","subType":"mainnet","group":"mainnets","isAccountSupported":true},{"name":"Optimism on Gnosis Chain","type":"xdai","subType":"optimism","group":"mainnets"},{"name":"Arbitrum on xDai","type":"xdai","subType":"aox","group":"mainnets"},{"name":"Ethereum","type":"eth","subType":"mainnet","group":"mainnets"},{"name":"Ethereum Classic","type":"etc","subType":"mainnet","group":"mainnets"},{"name":"POA","type":"poa","subType":"core","group":"mainnets"},{"name":"RSK","type":"rsk","subType":"mainnet","group":"mainnets"},{"name":"Gnosis Chain Testnet","type":"xdai","subType":"testnet","group":"testnets","isAccountSupported":true},{"name":"POA Sokol","type":"poa","subType":"sokol","group":"testnets"},{"name":"ARTIS Σ1","type":"artis","subType":"sigma1","group":"other"},{"name":"LUKSO L14","type":"lukso","subType":"l14","group":"other"}]
+NEXT_PUBLIC_SUPPORTED_NETWORKS=[{"name":"Gnosis Chain","type":"xdai","subType":"mainnet","group":"mainnets","isAccountSupported":true},{"name":"Optimism on Gnosis Chain","shortName":"OoG","type":"xdai","subType":"optimism","group":"mainnets","icon":"https://www.fillmurray.com/60/60"},{"name":"Arbitrum on xDai","type":"xdai","subType":"aox","group":"mainnets"},{"name":"Ethereum","shortName":"ETH","type":"eth","subType":"mainnet","group":"mainnets"},{"name":"Ethereum Classic","shortName":"ETC","type":"etc","subType":"mainnet","group":"mainnets"},{"name":"POA","shortName":"POA","type":"poa","subType":"core","group":"mainnets"},{"name":"RSK","shortName":"RBTC","type":"rsk","subType":"mainnet","group":"mainnets"},{"name":"Gnosis Chain Testnet","type":"xdai","subType":"testnet","group":"testnets","isAccountSupported":true},{"name":"POA Sokol","shortName":"POA","type":"poa","subType":"sokol","group":"testnets"},{"name":"ARTIS Σ1","type":"artis","subType":"sigma1","group":"other"},{"name":"LUKSO L14","shortName":"POA","type":"lukso","subType":"l14","group":"other"}]
\ No newline at end of file

lib/networks/availableNetworks.ts

@@ -44,6 +44,7 @@ export default NETWORKS;
 //   },
 //   {
 //     name: 'Optimism on Gnosis Chain',
+//     shortName: 'OoG',
 //     type: 'xdai',
 //     subType: 'optimism',
 //     group: 'mainnets',
@@ -57,24 +58,28 @@ export default NETWORKS;
 //   },
 //   {
 //     name: 'Ethereum',
+//     shortName: 'ETH',
 //     type: 'eth',
 //     subType: 'mainnet',
 //     group: 'mainnets',
 //   },
 //   {
 //     name: 'Ethereum Classic',
+//     shortName: 'ETC',
 //     type: 'etc',
 //     subType: 'mainnet',
 //     group: 'mainnets',
 //   },
 //   {
 //     name: 'POA',
+//     shortName: 'POA',
 //     type: 'poa',
 //     subType: 'core',
 //     group: 'mainnets',
 //   },
 //   {
 //     name: 'RSK',
+//     shortName: 'RBTC',
 //     type: 'rsk',
 //     subType: 'mainnet',
 //     group: 'mainnets',
@@ -88,6 +93,7 @@ export default NETWORKS;
 //   },
 //   {
 //     name: 'POA Sokol',
+//     shortName: 'POA',
 //     type: 'poa',
 //     subType: 'sokol',
 //     group: 'testnets',
@@ -100,6 +106,7 @@ export default NETWORKS;
 //   },
 //   {
 //     name: 'LUKSO L14',
+//     shortName: 'POA',
 //     type: 'lukso',
 //     subType: 'l14',
 //     group: 'other',

lib/networks/getNetworkTitle.ts

+import NETWORKS from './availableNetworks';
+
+export default function getNetworkTitle({ network_type: type, network_sub_type: subType }: {network_type: string; network_sub_type: string}) {
+  const currentNetwork = NETWORKS.find(n => n.type === type && n.subType === subType);
+  if (currentNetwork) {
+    return currentNetwork.name + (currentNetwork.shortName ? ` (${ currentNetwork.shortName })` : '') + ' Explorer';
+  }
+  return '';
+}

pages/[network_type]/[network_sub_type]/account/api_key.tsx

-import type { NextPage, GetStaticPaths } from 'next';
+import type { NextPage, GetStaticPaths, GetStaticProps, GetStaticPropsResult } from 'next';
 import Head from 'next/head';
 import React from 'react';
 
 import getAvailablePaths from 'lib/networks/getAvailablePaths';
+import getNetworkTitle from 'lib/networks/getNetworkTitle';
 import ApiKeys from 'ui/pages/ApiKeys';
 
-const ApiKeysPage: NextPage = () => {
+type PageParams = {
+  network_type: string;
+  network_sub_type: string;
+}
+
+type Props = {
+  pageParams: PageParams;
+}
+
+const ApiKeysPage: NextPage<Props> = ({ pageParams }: Props) => {
+  const title = getNetworkTitle(pageParams);
   return (
     <>
-      <Head><title>API keys</title></Head>
+      <Head><title>{ title }</title></Head>
       <ApiKeys/>
     </>
   );
@@ -20,8 +31,10 @@ export const getStaticPaths: GetStaticPaths = async() => {
   return { paths: getAvailablePaths(), fallback: false };
 };
 
-export const getStaticProps = async() => {
+export const getStaticProps: GetStaticProps = async(context): Promise<GetStaticPropsResult<Props>> => {
   return {
-    props: {},
+    props: {
+      pageParams: context.params as PageParams,
+    },
   };
 };

pages/[network_type]/[network_sub_type]/account/custom_abi.tsx

-import type { NextPage, GetStaticPaths } from 'next';
+import type { NextPage, GetStaticPaths, GetStaticProps, GetStaticPropsResult } from 'next';
 import Head from 'next/head';
 import React from 'react';
 
 import getAvailablePaths from 'lib/networks/getAvailablePaths';
+import getNetworkTitle from 'lib/networks/getNetworkTitle';
 import CustomAbi from 'ui/pages/CustomAbi';
 
-const CustomAbiPage: NextPage = () => {
+type PageParams = {
+  network_type: string;
+  network_sub_type: string;
+}
+
+type Props = {
+  pageParams: PageParams;
+}
+
+const CustomAbiPage: NextPage<Props> = ({ pageParams }: Props) => {
+  const title = getNetworkTitle(pageParams);
   return (
     <>
-      <Head><title>Custom ABI</title></Head>
+      <Head><title>{ title }</title></Head>
       <CustomAbi/>
     </>
   );
@@ -20,8 +31,10 @@ export const getStaticPaths: GetStaticPaths = async() => {
   return { paths: getAvailablePaths(), fallback: false };
 };
 
-export const getStaticProps = async() => {
+export const getStaticProps: GetStaticProps = async(context): Promise<GetStaticPropsResult<Props>> => {
   return {
-    props: {},
+    props: {
+      pageParams: context.params as PageParams,
+    },
   };
 };

pages/[network_type]/[network_sub_type]/account/public_tags_request.tsx

-import type { NextPage, GetStaticPaths } from 'next';
+import type { NextPage, GetStaticPaths, GetStaticProps, GetStaticPropsResult } from 'next';
 import Head from 'next/head';
 import React from 'react';
 
 import getAvailablePaths from 'lib/networks/getAvailablePaths';
+import getNetworkTitle from 'lib/networks/getNetworkTitle';
 import PublicTags from 'ui/pages/PublicTags';
 
-const PublicTagsPage: NextPage = () => {
+type PageParams = {
+  network_type: string;
+  network_sub_type: string;
+}
+
+type Props = {
+  pageParams: PageParams;
+}
+
+const PublicTagsPage: NextPage<Props> = ({ pageParams }: Props) => {
+  const title = getNetworkTitle(pageParams);
   return (
     <>
-      <Head><title>Public tags</title></Head>
+      <Head><title>{ title }</title></Head>
       <PublicTags/>
     </>
   );
@@ -20,8 +31,10 @@ export const getStaticPaths: GetStaticPaths = async() => {
   return { paths: getAvailablePaths(), fallback: false };
 };
 
-export const getStaticProps = async() => {
+export const getStaticProps: GetStaticProps = async(context): Promise<GetStaticPropsResult<Props>> => {
   return {
-    props: {},
+    props: {
+      pageParams: context.params as PageParams,
+    },
   };
 };

pages/[network_type]/[network_sub_type]/account/tag_address.tsx

-import type { NextPage, GetStaticPaths } from 'next';
+import type { NextPage, GetStaticPaths, GetStaticProps, GetStaticPropsResult } from 'next';
 import Head from 'next/head';
 import React from 'react';
 
 import getAvailablePaths from 'lib/networks/getAvailablePaths';
+import getNetworkTitle from 'lib/networks/getNetworkTitle';
 import PrivateTags from 'ui/pages/PrivateTags';
 
-const AddressTagsPage: NextPage = () => {
+type PageParams = {
+  network_type: string;
+  network_sub_type: string;
+}
+
+type Props = {
+  pageParams: PageParams;
+}
+
+const AddressTagsPage: NextPage<Props> = ({ pageParams }: Props) => {
+  const title = getNetworkTitle(pageParams);
   return (
     <>
-      <Head><title>Public tags</title></Head>
+      <Head><title>{ title }</title></Head>
       <PrivateTags tab="address"/>
     </>
   );
@@ -20,8 +31,10 @@ export const getStaticPaths: GetStaticPaths = async() => {
   return { paths: getAvailablePaths(), fallback: false };
 };
 
-export const getStaticProps = async() => {
+export const getStaticProps: GetStaticProps = async(context): Promise<GetStaticPropsResult<Props>> => {
   return {
-    props: {},
+    props: {
+      pageParams: context.params as PageParams,
+    },
   };
 };

pages/[network_type]/[network_sub_type]/account/tag_transaction.tsx

-import type { NextPage, GetStaticPaths } from 'next';
+import type { NextPage, GetStaticPaths, GetStaticProps, GetStaticPropsResult } from 'next';
 import Head from 'next/head';
 import React from 'react';
 
 import getAvailablePaths from 'lib/networks/getAvailablePaths';
+import getNetworkTitle from 'lib/networks/getNetworkTitle';
 import PrivateTags from 'ui/pages/PrivateTags';
 
-const TransactionTagsPage: NextPage = () => {
+type PageParams = {
+  network_type: string;
+  network_sub_type: string;
+}
+
+type Props = {
+  pageParams: PageParams;
+}
+
+const TransactionTagsPage: NextPage<Props> = ({ pageParams }: Props) => {
+  const title = getNetworkTitle(pageParams);
   return (
     <>
-      <Head><title>Public tags</title></Head>
+      <Head><title>{ title }</title></Head>
       <PrivateTags tab="transaction"/>
     </>
   );
@@ -20,8 +31,10 @@ export const getStaticPaths: GetStaticPaths = async() => {
   return { paths: getAvailablePaths(), fallback: false };
 };
 
-export const getStaticProps = async() => {
+export const getStaticProps: GetStaticProps = async(context): Promise<GetStaticPropsResult<Props>> => {
   return {
-    props: {},
+    props: {
+      pageParams: context.params as PageParams,
+    },
   };
 };

pages/[network_type]/[network_sub_type]/account/watchlist.tsx

-import type { NextPage, GetStaticPaths } from 'next';
+import type { NextPage, GetStaticPaths, GetStaticProps, GetStaticPropsResult } from 'next';
 import Head from 'next/head';
 import React from 'react';
 
 import getAvailablePaths from 'lib/networks/getAvailablePaths';
+import getNetworkTitle from 'lib/networks/getNetworkTitle';
 import WatchList from 'ui/pages/Watchlist';
 
-const WatchListPage: NextPage = () => {
+type PageParams = {
+  network_type: string;
+  network_sub_type: string;
+}
+
+type Props = {
+  pageParams: PageParams;
+}
+
+const WatchListPage: NextPage<Props> = ({ pageParams }: Props) => {
+  const title = getNetworkTitle(pageParams);
   return (
     <>
-      <Head><title>Watch list</title></Head>
+      <Head>
+        <title>{ title }</title>
+      </Head>
       <WatchList/>
     </>
   );
@@ -20,8 +33,10 @@ export const getStaticPaths: GetStaticPaths = async() => {
   return { paths: getAvailablePaths(), fallback: false };
 };
 
-export const getStaticProps = async() => {
+export const getStaticProps: GetStaticProps = async(context): Promise<GetStaticPropsResult<Props>> => {
   return {
-    props: {},
+    props: {
+      pageParams: context.params as PageParams,
+    },
   };
 };

pages/_document.tsx

@@ -13,6 +13,10 @@ class MyDocument extends Document {
             href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600&display=swap"
             rel="stylesheet"
           />
+          <link rel="icon" sizes="32x32" type="image/png" href="/favicon-32x32.png"/>
+          <link rel="icon" sizes="16x16" type="image/png"href="/favicon-16x16.png"/>
+          <link rel="apple-touch-icon" sizes="180x180" href="/apple-touch-icon.png"/>
+          <link rel="mask-icon" href="/safari-pinned-tab.svg" color="#5bbad5"/>
         </Head>
         <body>
           <ColorModeScript initialColorMode={ theme.config.initialColorMode }/>

public/safari-pinned-tab.svg

+<?xml version="1.0" standalone="no"?>
+<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 20010904//EN"
+ "http://www.w3.org/TR/2001/REC-SVG-20010904/DTD/svg10.dtd">
+<svg version="1.0" xmlns="http://www.w3.org/2000/svg"
+ width="700.000000pt" height="700.000000pt" viewBox="0 0 700.000000 700.000000"
+ preserveAspectRatio="xMidYMid meet">
+<metadata>
+Created by potrace 1.14, written by Peter Selinger 2001-2017
+</metadata>
+<g transform="translate(0.000000,700.000000) scale(0.100000,-0.100000)"
+fill="#000000" stroke="none">
+<path d="M1497 6989 c-116 -28 -223 -134 -254 -250 -3 -13 -7 -220 -9 -459 -3
+-487 -5 -507 -73 -596 -45 -60 -102 -101 -172 -123 -46 -15 -96 -18 -354 -19
+-165 0 -320 -3 -345 -7 -124 -18 -238 -120 -274 -246 -15 -49 -16 -295 -14
+-2539 l3 -2485 26 -56 c37 -79 90 -133 167 -171 l67 -33 470 0 470 0 55 26
+c73 34 136 99 174 179 l31 65 1 2480 c0 1364 4 2496 8 2515 21 88 99 191 176
+230 74 38 116 42 425 42 339 -1 387 6 471 63 53 37 99 93 130 160 17 37 19 77
+21 470 2 281 -1 449 -8 485 -21 107 -96 201 -198 249 l-56 26 -450 2 c-247 1
+-467 -3 -488 -8z"/>
+<path d="M4442 6990 c-100 -24 -188 -99 -236 -200 l-30 -65 -1 -435 c-1 -303
+2 -449 10 -480 28 -108 92 -185 195 -234 l65 -31 302 -2 c308 -2 352 -7 425
+-44 78 -40 153 -138 174 -229 4 -19 8 -1146 9 -2505 1 -1832 4 -2480 13 -2510
+26 -91 101 -177 192 -223 l55 -27 451 -3 c439 -3 453 -3 515 18 109 37 191
+121 223 230 15 50 17 266 16 2528 0 2431 0 2473 -20 2528 -34 99 -115 180
+-215 215 -51 18 -87 20 -363 22 -289 3 -310 5 -363 25 -73 29 -152 104 -187
+179 l-27 58 -5 465 -5 465 -26 56 c-37 79 -90 133 -167 171 l-67 33 -450 2
+c-247 1 -465 -2 -483 -7z"/>
+<path d="M2965 4200 c-124 -29 -219 -116 -259 -236 -15 -47 -17 -149 -17
+-1176 0 -1114 0 -1126 21 -1181 43 -114 141 -200 254 -224 43 -8 840 -10 897
+-2 143 22 265 146 286 291 10 65 8 2209 -1 2258 -18 89 -82 179 -161 226 -91
+53 -106 54 -565 53 -234 -1 -438 -5 -455 -9z"/>
+</g>
+</svg>

types/networks.ts

@@ -4,6 +4,7 @@ export type NetworkGroup = 'mainnets' | 'testnets' | 'other';
 
 export interface Network {
   name: string;
+  shortName?: string;
   // basePath = /<type>/<subType>, e.g. /xdai/mainnet
   type: string;
   subType: string;