add favicons, change titles

.env.example

@@ -9,4 +9,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.ts

@@ -44,6 +44,7 @@ export const NETWORKS: Array<Network> = (() => {
 //   },
 //   {
 //     name: 'Optimism on Gnosis Chain',
+//     shortName: 'OoG',
 //     type: 'xdai',
 //     subType: 'optimism',
 //     group: 'mainnets',
@@ -57,24 +58,28 @@ export const NETWORKS: Array<Network> = (() => {
 //   },
 //   {
 //     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 const NETWORKS: Array<Network> = (() => {
 //   },
 //   {
 //     name: 'POA Sokol',
+//     shortName: 'POA',
 //     type: 'poa',
 //     subType: 'sokol',
 //     group: 'testnets',
@@ -100,6 +106,7 @@ export const NETWORKS: Array<Network> = (() => {
 //   },
 //   {
 //     name: 'LUKSO L14',
+//     shortName: 'POA',
 //     type: 'lukso',
 //     subType: 'l14',
 //     group: 'other',
@@ -115,3 +122,11 @@ export function isAccountRoute(route: string) {
 export function getAvailablePaths() {
   return NETWORKS.map(({ type, subType }) => ({ params: { network_type: type, network_sub_type: subType } }));
 }
+
+export 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';
+import { getAvailablePaths, getNetworkTitle } from 'lib/networks';
 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 +30,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';
+import { getAvailablePaths, getNetworkTitle } from 'lib/networks';
 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 +30,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';
+import { getAvailablePaths, getNetworkTitle } from 'lib/networks';
 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 +30,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';
+import { getAvailablePaths, getNetworkTitle } from 'lib/networks';
 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 +30,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';
+import { getAvailablePaths, getNetworkTitle } from 'lib/networks';
 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 +30,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';
+import { getAvailablePaths, getNetworkTitle } from 'lib/networks';
 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 +32,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

@@ -17,6 +17,8 @@ class MyDocument extends Document {
             href="https://fonts.googleapis.com/css2?family=Raleway:ital,wght@0,500;0,600;1,400&display=swap"
             rel="stylesheet"
           />
+          <link rel="icon" href="/favicon32.png"/>
+          <link rel="icon" href="/favicon16.png"/>
         </Head>
         <body>
           <ColorModeScript initialColorMode={ theme.config.initialColorMode }/>

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;