envs for footer links and networks

.env.example

-API_AUTHORIZATION_TOKEN=xxx
+API_AUTHORIZATION_TOKEN=xxx
\ No newline at end of file
+NEXT_PUBLIC_BLOCKSCOUT_VERSION=xxx
+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_ANALYTICS_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"}]
\ No newline at end of file

lib/networks.ts

@@ -10,88 +10,100 @@ import poaSokolIcon from 'icons/networks/poa-sokol.svg';
 import poaIcon from 'icons/networks/poa.svg';
 import rskIcon from 'icons/networks/rsk.svg';
 
-export const NETWORKS: Array<Network> = [
-  {
-    name: 'Gnosis Chain',
-    type: 'xdai',
-    subType: 'mainnet',
-    icon: gnosisIcon,
-    group: 'mainnets',
-    isAccountSupported: true,
-    isNewUiSupported: true,
-  },
-  {
-    name: 'Optimism on Gnosis Chain',
-    type: 'xdai',
-    subType: 'optimism',
-    icon: optimismIcon,
-    group: 'mainnets',
-  },
-  {
-    name: 'Arbitrum on xDai',
-    type: 'xdai',
-    subType: 'aox',
-    icon: arbitrumIcon,
-    group: 'mainnets',
-  },
-  {
-    name: 'Ethereum',
-    type: 'eth',
-    subType: 'mainnet',
-    icon: ethereumIcon,
-    group: 'mainnets',
-  },
-  {
-    name: 'Ethereum Classic',
-    type: 'etc',
-    subType: 'mainnet',
-    icon: ethereumClassicIcon,
-    group: 'mainnets',
-  },
-  {
-    name: 'POA',
-    type: 'poa',
-    subType: 'core',
-    icon: poaIcon,
-    group: 'mainnets',
-  },
-  {
-    name: 'RSK',
-    type: 'rsk',
-    subType: 'mainnet',
-    icon: rskIcon,
-    group: 'mainnets',
-  },
-  {
-    name: 'Gnosis Chain Testnet',
-    type: 'xdai',
-    subType: 'testnet',
-    icon: arbitrumIcon,
-    group: 'testnets',
-    isAccountSupported: true,
-    isNewUiSupported: true,
-  },
-  {
-    name: 'POA Sokol',
-    type: 'poa',
-    subType: 'sokol',
-    icon: poaSokolIcon,
-    group: 'testnets',
-  },
-  {
-    name: 'ARTIS Σ1',
-    type: 'artis',
-    subType: 'sigma1',
-    icon: artisIcon,
-    group: 'other',
-  },
-  {
-    name: 'LUKSO L14',
-    type: 'lukso',
-    subType: 'l14',
-    group: 'other',
-  },
-];
+// will change later when we agree how to host network icons
+const ICONS: Record<string, React.FunctionComponent<React.SVGAttributes<SVGElement>>> = {
+  'xdai/mainnet': gnosisIcon,
+  'xdai/optimism': optimismIcon,
+  'xdai/aox': arbitrumIcon,
+  'eth/mainnet': ethereumIcon,
+  'etc/mainnet': ethereumClassicIcon,
+  'poa/core': poaIcon,
+  'rsk/mainnet': rskIcon,
+  'xdai/testnet': arbitrumIcon,
+  'poa/sokol': poaSokolIcon,
+  'artis/sigma1': artisIcon,
+};
+
+export const NETWORKS: Array<Network> = (() => {
+  try {
+    const networksFromConfig: Array<Network> = JSON.parse(process.env.NEXT_PUBLIC_SUPPORTED_NETWORKS || '[]');
+    return networksFromConfig.map((network) => ({ ...network, icon: ICONS[`${ network.type }/${ network.subType }`] }));
+  } catch (error) {
+    return [];
+  }
+})();
+
+// for easy env creation
+// const FOR_CONFIG = [
+//   {
+//     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',
+//   },
+// ];
 
 export const ACCOUNT_ROUTES = [ '/watchlist', '/private-tags', '/public-tags', '/api-keys', '/custom-abi' ];
 

types/networks.ts

@@ -10,5 +10,4 @@ export interface Network {
   group: 'mainnets' | 'testnets' | 'other';
   icon?: FunctionComponent<SVGAttributes<SVGElement>>;
   isAccountSupported?: boolean;
-  isNewUiSupported?: boolean;
 }

ui/navigation/NavFooter.tsx

@@ -8,11 +8,14 @@ import twIcon from 'icons/social/tweet.svg';
 import getDefaultTransitionProps from 'theme/utils/getDefaultTransitionProps';
 
 const SOCIAL_LINKS = [
-  { link: '#gh', icon: ghIcon },
-  { link: '#tw', icon: twIcon },
-  { link: '#tg', icon: tgIcon },
-  { link: '#stats', icon: statsIcon },
-];
+  { link: process.env.NEXT_PUBLIC_FOOTER_GITHUB_LINK, icon: ghIcon },
+  { link: process.env.NEXT_PUBLIC_FOOTER_TWITTER_LINK, icon: twIcon },
+  { link: process.env.NEXT_PUBLIC_FOOTER_TELEGRAM_LINK, icon: tgIcon },
+  { link: process.env.NEXT_PUBLIC_FOOTER_ANALYTICS_LINK, icon: statsIcon },
+].filter(({ link }) => link !== undefined);
+
+const BLOCKSCOUT_VERSION = process.env.NEXT_PUBLIC_BLOCKSCOUT_VERSION;
+const VERSION_URL = `https://github.com/blockscout/blockscout/tree/${ BLOCKSCOUT_VERSION }`;
 
 interface Props {
   isCollapsed: boolean;
@@ -47,7 +50,7 @@ const NavFooter = ({ isCollapsed }: Props) => {
           <Text variant="secondary">
             Blockscout is a tool for inspecting and analyzing EVM based blockchains. Blockchain explorer for Ethereum Networks.
           </Text>
-          <Text variant="secondary">Version: <Link>v4.2.1-beta</Link></Text>
+          <Text variant="secondary">Version: <Link href={ VERSION_URL } target="_blank">{ BLOCKSCOUT_VERSION }</Link></Text>
         </>
       ) }
     </VStack>

ui/navigation/networkMenu/NetworkMenuLink.tsx

@@ -15,7 +15,7 @@ interface Props extends Network {
   routeName: string;
 }
 
-const NetworkMenuLink = ({ name, type, subType, icon, isActive, routeName, isAccountSupported, isNewUiSupported }: Props) => {
+const NetworkMenuLink = ({ name, type, subType, icon, isActive, routeName, isAccountSupported }: Props) => {
   const isAccount = isAccountRoute(routeName);
   const localPath = (() => {
     if (isAccount && isAccountSupported) {
@@ -32,7 +32,7 @@ const NetworkMenuLink = ({ name, type, subType, icon, isActive, routeName, isAcc
   const pathName = `/${ type }/${ subType }${ localPath }`;
 
   // will fix later after we agree on CI/CD workflow
-  const href = isNewUiSupported ? pathName : 'https://blockscout.com' + pathName;
+  const href = type === 'xdai' ? pathName : 'https://blockscout.com' + pathName;
   const hasIcon = Boolean(icon);
   const colors = useColors({ hasIcon });