footer

.env.template

@@ -6,6 +6,10 @@ NEXT_PUBLIC_APP_HOST=__PLACEHOLDER_FOR_NEXT_PUBLIC_APP_HOST__
 NEXT_PUBLIC_APP_PORT=__PLACEHOLDER_FOR_NEXT_PUBLIC_APP_PORT__
 NEXT_PUBLIC_AUTH_URL=__PLACEHOLDER_FOR_NEXT_PUBLIC_AUTH_URL__
 
+# version config
+NEXT_PUBLIC_GIT_COMMIT_SHA=__PLACEHOLDER_FOR_NEXT_PUBLIC_GIT_COMMIT_SHA__
+NEXT_PUBLIC_GIT_TAG = __PLACEHOLDER_FOR_NEXT_PUBLIC_GIT_TAG__
+
 # network config
 NEXT_PUBLIC_NETWORK_NAME=__PLACEHOLDER_FOR_NEXT_PUBLIC_NETWORK_NAME__
 NEXT_PUBLIC_NETWORK_SHORT_NAME=__PLACEHOLDER_FOR_NEXT_PUBLIC_NETWORK_SHORT_NAME__
@@ -26,11 +30,8 @@ NEXT_PUBLIC_IS_TESTNET=__PLACEHOLDER_FOR_NEXT_PUBLIC_IS_TESTNET__
 
 # ui config
 NEXT_PUBLIC_BLOCKSCOUT_VERSION=__PLACEHOLDER_FOR_NEXT_PUBLIC_BLOCKSCOUT_VERSION__
-NEXT_PUBLIC_FOOTER_GITHUB_LINK=__PLACEHOLDER_FOR_NEXT_PUBLIC_FOOTER_GITHUB_LINK__
-NEXT_PUBLIC_FOOTER_TWITTER_LINK=__PLACEHOLDER_FOR_NEXT_PUBLIC_FOOTER_TWITTER_LINK__
-NEXT_PUBLIC_FOOTER_TELEGRAM_LINK=__PLACEHOLDER_FOR_NEXT_PUBLIC_FOOTER_TELEGRAM_LINK__
-NEXT_PUBLIC_FOOTER_STAKING_LINK=__PLACEHOLDER_FOR_NEXT_PUBLIC_FOOTER_STAKING_LINK__
 NEXT_PUBLIC_FEATURED_NETWORKS=__PLACEHOLDER_FOR_NEXT_PUBLIC_FEATURED_NETWORKS__
+NEXT_PUBLIC_FOOTER_LINKS=__PLACEHOLDER_FOR_NEXT_PUBLIC_FOOTER_LINKS__
 NEXT_PUBLIC_NETWORK_EXPLORERS=__PLACEHOLDER_FOR_NEXT_PUBLIC_NETWORK_EXPLORERS__
 NEXT_PUBLIC_OTHER_LINKS=__PLACEHOLDER_FOR_NEXT_PUBLIC_OTHER_LINKS__
 NEXT_PUBLIC_MARKETPLACE_CONFIG_URL=__PLACEHOLDER_FOR_NEXT_PUBLIC_MARKETPLACE_CONFIG_URL__

Dockerfile

@@ -35,6 +35,8 @@ WORKDIR /app
 # pass commit sha to the app (uses by sentry.io as release version)
 ARG GIT_COMMIT_SHA
 ENV NEXT_PUBLIC_GIT_COMMIT_SHA=$GIT_COMMIT_SHA
+
+# pass git tag to the app (for the footer link)
 ARG GIT_TAG
 ENV NEXT_PUBLIC_GIT_TAG=$GIT_TAG
 

configs/app/config.ts

@@ -96,15 +96,12 @@ const config = Object.freeze({
     rpcUrl: getEnvValue(process.env.NEXT_PUBLIC_NETWORK_RPC_URL),
     isTestnet: getEnvValue(process.env.NEXT_PUBLIC_IS_TESTNET) === 'true',
   },
-  footerLinks: {
-    github: getEnvValue(process.env.NEXT_PUBLIC_FOOTER_GITHUB_LINK),
-    twitter: getEnvValue(process.env.NEXT_PUBLIC_FOOTER_TWITTER_LINK),
-    telegram: getEnvValue(process.env.NEXT_PUBLIC_FOOTER_TELEGRAM_LINK),
-    staking: getEnvValue(process.env.NEXT_PUBLIC_FOOTER_STAKING_LINK),
-  },
   otherLinks: parseEnvJson<Array<NavItemExternal>>(getEnvValue(process.env.NEXT_PUBLIC_OTHER_LINKS)) || [],
   featuredNetworks: getEnvValue(process.env.NEXT_PUBLIC_FEATURED_NETWORKS),
+  footerLinks: getEnvValue(process.env.NEXT_PUBLIC_FOOTER_LINKS),
   blockScoutVersion: getEnvValue(process.env.NEXT_PUBLIC_BLOCKSCOUT_VERSION),
+  frontendVersion: getEnvValue(process.env.NEXT_PUBLIC_GIT_TAG),
+  frontendCommit: getEnvValue(process.env.NEXT_PUBLIC_GIT_COMMIT_SHA),
   isAccountSupported: getEnvValue(process.env.NEXT_PUBLIC_IS_ACCOUNT_SUPPORTED) === 'true',
   marketplaceConfigUrl: getEnvValue(process.env.NEXT_PUBLIC_MARKETPLACE_CONFIG_URL),
   marketplaceSubmitForm: getEnvValue(process.env.NEXT_PUBLIC_MARKETPLACE_SUBMIT_FORM),

configs/envs/.env.common

@@ -7,8 +7,6 @@ NEXT_PUBLIC_APP_ENV=development
 
 # ui config
 NEXT_PUBLIC_BLOCKSCOUT_VERSION=v4.1.7-beta
-NEXT_PUBLIC_FOOTER_GITHUB_LINK=https://github.com/blockscout/blockscout
-NEXT_PUBLIC_FOOTER_TWITTER_LINK=https://www.twitter.com/blockscoutcom
 NEXT_PUBLIC_API_SPEC_URL=https://raw.githubusercontent.com/blockscout/blockscout-api-v2-swagger/main/swagger.yaml
 
 # api config

configs/envs/.env.jest

@@ -5,8 +5,6 @@ NEXT_PUBLIC_APP_ENV=testing
 
 # ui config
 NEXT_PUBLIC_BLOCKSCOUT_VERSION=v4.1.7-beta
-NEXT_PUBLIC_FOOTER_GITHUB_LINK=https://github.com/blockscout/blockscout
-NEXT_PUBLIC_FOOTER_TWITTER_LINK=https://www.twitter.com/blockscoutcom
 NEXT_PUBLIC_IS_TESTNET=true
 
 # api config

configs/envs/.env.localhost

@@ -7,10 +7,6 @@ NEXT_PUBLIC_APP_ENV=development
 
 # ui config
 NEXT_PUBLIC_BLOCKSCOUT_VERSION=v4.1.7-beta
-NEXT_PUBLIC_FOOTER_TELEGRAM_LINK=https://t.me/poa_network
-NEXT_PUBLIC_FOOTER_STAKING_LINK=https://duneanalytics.com/maxaleks/xdai-staking
-NEXT_PUBLIC_FOOTER_GITHUB_LINK=https://github.com/blockscout/blockscout
-NEXT_PUBLIC_FOOTER_TWITTER_LINK=https://www.twitter.com/blockscoutcom
 NEXT_PUBLIC_FEATURED_NETWORKS=https://raw.githubusercontent.com/blockscout/frontend-configs/dev/configs/featured-networks/eth-goerli.json
 NEXT_PUBLIC_NETWORK_EXPLORERS=[{'title':'Anyblock','baseUrl':'https://explorer.anyblock.tools','paths':{'tx':'/ethereum/poa/core/transaction','address':'/ethereum/poa/core/address'}}]
 NEXT_PUBLIC_HOMEPAGE_CHARTS=['daily_txs','coin_price','market_cap']

configs/envs/.env.poa_core

@@ -1,6 +1,4 @@
 # ui config
-NEXT_PUBLIC_FOOTER_TELEGRAM_LINK=https://t.me/poa_network
-NEXT_PUBLIC_FOOTER_STAKING_LINK=https://duneanalytics.com/maxaleks/xdai-staking
 NEXT_PUBLIC_FEATURED_NETWORKS=https://raw.githubusercontent.com/blockscout/frontend-configs/dev/configs/featured-networks/eth-goerli.json
 NEXT_PUBLIC_NETWORK_EXPLORERS=[{'title':'Anyblock','baseUrl':'https://explorer.anyblock.tools','paths':{'tx':'/ethereum/poa/core/transaction','address':'/ethereum/poa/core/address','block':'/ethereum/poa/core/block'}}]
 NEXT_PUBLIC_HOMEPAGE_CHARTS=['daily_txs','coin_price','market_cap']

configs/envs/.env.pw

@@ -7,16 +7,14 @@ NEXT_PUBLIC_APP_ENV=testing
 
 # ui config
 NEXT_PUBLIC_BLOCKSCOUT_VERSION=v4.1.7-beta
-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_NETWORK_EXPLORERS=[{'title':'Bitquery','baseUrl':'https://explorer.bitquery.io/','paths':{'tx':'/goerli/tx','address':'/goerli/address','token':'/goerli/token','block':'/goerli/block'}},{'title':'Etherscan','baseUrl':'https://goerli.etherscan.io/','paths':{'tx':'/tx','address':'/address','token':'/token','block':'/block'}}]
+NEXT_PUBLIC_GIT_TAG=v1.0.11
 NEXT_PUBLIC_HOMEPAGE_CHARTS=['daily_txs','coin_price','market_cap']
 NEXT_PUBLIC_HOMEPAGE_SHOW_AVG_BLOCK_TIME=true
 NEXT_PUBLIC_HOMEPAGE_SHOW_GAS_TRACKER=true
 NEXT_PUBLIC_HOMEPAGE_PLATE_BACKGROUND=
 NEXT_PUBLIC_FEATURED_NETWORKS=
+NEXT_PUBLIC_FOOTER_LINKS=
 NEXT_PUBLIC_NETWORK_LOGO=
 NEXT_PUBLIC_NETWORK_LOGO_DARK=
 NEXT_PUBLIC_NETWORK_ICON=

deploy/values/l2-optimism-goerli/values.yaml

@@ -352,10 +352,6 @@ frontend:
   environment:
     NEXT_PUBLIC_BLOCKSCOUT_VERSION:
       _default: v5.1.5-beta
-    NEXT_PUBLIC_FOOTER_GITHUB_LINK:
-      _default: https://github.com/blockscout/blockscout
-    NEXT_PUBLIC_FOOTER_TWITTER_LINK:
-      _default: https://www.twitter.com/blockscoutcom
     NEXT_PUBLIC_APP_ENV:
       _default: stable
     NEXT_PUBLIC_APP_INSTANCE:

deploy/values/main/values.yaml

@@ -275,10 +275,6 @@ frontend:
       _default: /
     NEXT_PUBLIC_BLOCKSCOUT_VERSION:
       _default: v5.1.2-beta
-    NEXT_PUBLIC_FOOTER_GITHUB_LINK:
-      _default: https://github.com/blockscout/blockscout
-    NEXT_PUBLIC_FOOTER_TWITTER_LINK:
-      _default: https://www.twitter.com/blockscoutcom
     NEXT_PUBLIC_APP_ENV:
       _default: stable
     NEXT_PUBLIC_APP_INSTANCE:

deploy/values/review-l2/values.yaml.gotmpl

@@ -61,10 +61,6 @@ frontend:
   environment:
     NEXT_PUBLIC_BLOCKSCOUT_VERSION:
       _default: v5.1.0-beta
-    NEXT_PUBLIC_FOOTER_GITHUB_LINK:
-      _default: https://github.com/blockscout/blockscout
-    NEXT_PUBLIC_FOOTER_TWITTER_LINK:
-      _default: https://www.twitter.com/blockscoutcom
     NEXT_PUBLIC_APP_ENV:
       _default: preview
     NEXT_PUBLIC_APP_INSTANCE:

deploy/values/review/values.yaml.gotmpl

@@ -57,18 +57,10 @@ frontend:
   environment:
     NEXT_PUBLIC_BLOCKSCOUT_VERSION:
       _default: v5.1.2-beta
-    NEXT_PUBLIC_FOOTER_GITHUB_LINK:
-      _default: https://github.com/blockscout/blockscout
-    NEXT_PUBLIC_FOOTER_TWITTER_LINK:
-      _default: https://www.twitter.com/blockscoutcom
     NEXT_PUBLIC_APP_ENV:
       _default: preview
     NEXT_PUBLIC_APP_INSTANCE:
       _default: eth_goerli
-    NEXT_PUBLIC_FOOTER_TELEGRAM_LINK:
-      _default: https://t.me/poa_network
-    NEXT_PUBLIC_FOOTER_STAKING_LINK:
-      _default: https://duneanalytics.com/maxaleks/xdai-staking
     NEXT_PUBLIC_NETWORK_NAME:
       _default: Göerli
     NEXT_PUBLIC_NETWORK_SHORT_NAME:

docs/ENVS.md

@@ -30,11 +30,8 @@ The app instance could be customized by passing following variables to NodeJS en
 | --- | --- | --- | --- | --- | --- |
 | NEXT_PUBLIC_FEATURED_NETWORKS | `string` | URL of configuration file (`.json` format only) which contains list of featured networks that will be shown in the network menu. See [below](#featured-network-configuration-properties) list of available properties for particular network | - | - | `https://example.com/featured_networks_config.json` |
 | NEXT_PUBLIC_OTHER_LINKS | `Array<{url: string; text: string}>` | List of links for the "Other" navigation menu | - | - | `[{'url':'https://blockscout.com','text':'Blockscout'}]` |
+| NEXT_PUBLIC_FOOTER_LINKS | `string` | URL of configuration file (`.json` format only) which contains list of link groups to be displayed in the footer. See [below](#footer-links-configuration-properties) list of available properties for particular group | - | - | `https://example.com/footer_links_config.json` |
 | NEXT_PUBLIC_BLOCKSCOUT_VERSION | `string` | Current running version of Blockscout (used to display link to release in the footer) | - | - | `v.5.1.0-beta`
-| NEXT_PUBLIC_FOOTER_GITHUB_LINK | `string` | Link to Github in the footer | - | - | `https://github.com/blockscout/blockscout` |
-| NEXT_PUBLIC_FOOTER_TWITTER_LINK | `string` | Link to Twitter in the footer | - | - | `https://www.twitter.com/blockscoutcom` |
-| NEXT_PUBLIC_FOOTER_TELEGRAM_LINK | `string` | Link to Telegram in the footer | - | - | `https://t.me/poa_network` |
-| NEXT_PUBLIC_FOOTER_STAKING_LINK | `string` | Link to staking dashboard in the footer | - | - | `https://duneanalytics.com/maxaleks/xdai-staking` |
 | NEXT_PUBLIC_MARKETPLACE_CONFIG_URL | `string` | URL of configuration file (`.json` format only) which contains list of apps that will be shown on the marketplace page. See [below](#marketplace-app-configuration-properties) list of available properties for an app | - | - | `https://example.com/marketplace_config.json` |
 | NEXT_PUBLIC_MARKETPLACE_SUBMIT_FORM | `string` | Link to form where authors can submit their dapps to the marketplace | - | - | `https://airtable.com/shrqUAcjgGJ4jU88C` |
 | NEXT_PUBLIC_NETWORK_EXPLORERS | `Array<NetworkExplorer>` where `NetworkExplorer` can have following [properties](#network-explorer-configuration-properties) | Used to build up links to transactions, blocks, addresses in other chain explorers. | - | - | `[{'title':'Anyblock','baseUrl':'https://explorer.anyblock.tools','paths':{'tx':'/ethereum/poa/core/tx'}}]` |
@@ -108,6 +105,13 @@ For each application, you need to specify the `MarketplaceCategoryId` to which i
 
 *Note* The url of an entity will be constructed as `<baseUrl><paths[<entity-type>]><entity-id>`, e.g `https://explorer.anyblock.tools/ethereum/poa/core/tx/<tx-id>`
 
+## Footer links configuration properties
+
+| Variable | Type| Description | Is required  | Default value | Example value |
+| --- | --- | --- | --- | --- | --- |
+| title | `string` | Title of link group | yes | - | `Company` |
+| links | `Array<{'text':string;'url':string;}>` | list of links | yes | - | `[{'text':'Homepage','url':'https://www.blockscout.com'}]` |
+
 
 ## App configuration
 

lib/hooks/useIssueUrl.tsx

@@ -0,0 +1,45 @@
+import React from 'react';
+
+import appConfig from 'configs/app/config';
+import isBrowser from 'lib/isBrowser';
+
+const base = 'https://github.com/blockscout/blockscout/issues/new/';
+
+const bodyTemplate = `*Describe your issue here.*
+
+### Environment
+
+* Backend Version/branch/commit: ${ appConfig.blockScoutVersion }
+* Frontend Version+commit: ${ [ appConfig.frontendVersion, appConfig.frontendCommit ].filter(Boolean).join('+') }
+* User Agent: __userAgent__
+
+### Steps to reproduce
+
+*Tell us how to reproduce this issue.  ❤️ if you can push up a branch to your fork with a regression test we can run to reproduce locally.*
+
+### Expected behaviour
+
+*Tell us what should happen.*
+
+### Actual behaviour
+
+*Tell us what happens instead.*`;
+
+const labels = 'new UI';
+
+const title = `${ appConfig.network.name }: <Issue Title>`;
+
+export default function useIssueUrl() {
+  const [ userAgent, setUserAgent ] = React.useState('');
+  const isInBrowser = isBrowser();
+
+  React.useEffect(() => {
+    if (isInBrowser) {
+      setUserAgent(window.navigator.userAgent);
+    }
+  }, [ isInBrowser ]);
+
+  const params = new URLSearchParams({ labels, title, body: bodyTemplate.replace('__userAgent__', userAgent) });
+  return base + '?' + params.toString();
+
+}

lib/hooks/useNavItems.tsx

@@ -15,7 +15,6 @@ import globeIcon from 'icons/globe-b.svg';
 import graphQLIcon from 'icons/graphQL.svg';
 import outputRootsIcon from 'icons/output_roots.svg';
 import privateTagIcon from 'icons/privattags.svg';
-import profileIcon from 'icons/profile.svg';
 import publicTagIcon from 'icons/publictags.svg';
 import apiDocsIcon from 'icons/restAPI.svg';
 import rpcIcon from 'icons/RPC.svg';
@@ -27,6 +26,7 @@ import txnBatchIcon from 'icons/txn_batches.svg';
 import verifiedIcon from 'icons/verified.svg';
 import watchlistIcon from 'icons/watchlist.svg';
 import { rightLineArrow } from 'lib/html-entities';
+import UserAvatar from 'ui/shared/UserAvatar';
 
 interface ReturnType {
   mainNavItems: Array<NavItem | NavGroupItem>;
@@ -213,7 +213,7 @@ export default function useNavItems(): ReturnType {
     const profileItem = {
       text: 'My profile',
       nextRoute: { pathname: '/auth/profile' as const },
-      icon: profileIcon,
+      iconComponent: UserAvatar,
       isActive: pathname === '/auth/profile',
     };
 

lib/web3/wallets.ts

@@ -5,13 +5,11 @@ import metamaskIcon from 'icons/wallets/metamask.svg';
 
 export const WALLETS_INFO: Record<WalletType, WalletInfo> = {
   metamask: {
-    add_token_text: 'Add token to MetaMask',
-    add_network_text: 'Add network to MetaMask',
+    name: 'MetaMask',
     icon: metamaskIcon,
   },
   coinbase: {
-    add_token_text: 'Add token to Coinbase Wallet',
-    add_network_text: 'Add network to Coinbase Wallet',
+    name: 'Coinbase Wallet',
     icon: coinbaseIcon,
   },
 };

mocks/config/footerLinks.ts

@@ -0,0 +1,76 @@
+import type { CustomLinksGroup } from 'types/footerLinks';
+
+export const FOOTER_LINKS: Array<CustomLinksGroup> = [
+  {
+    title: 'Company',
+    links: [
+      {
+        text: 'Advertise',
+        url: 'https://coinzilla.com/',
+      },
+      {
+        text: 'Staking',
+        url: '',
+      },
+      {
+        text: 'Contact us',
+        url: '',
+      },
+      {
+        text: 'Brand assets',
+        url: '',
+      },
+      {
+        text: 'Term of service',
+        url: '',
+      },
+    ],
+  },
+  {
+    title: 'Community',
+    links: [
+      {
+        text: 'API docs',
+        url: '',
+      },
+      {
+        text: 'Knowledge base',
+        url: '',
+      },
+      {
+        text: 'Network status',
+        url: '',
+      },
+      {
+        text: 'Learn Alphabet',
+        url: '',
+      },
+    ],
+  },
+  {
+    title: 'Product',
+    links: [
+      {
+        text: 'Stake Alphabet',
+        url: '',
+      },
+      {
+        text: 'Build token',
+        url: '',
+      },
+      {
+        text: 'Build DAPPS',
+        url: '',
+      },
+      {
+        text: 'NFT marketplace',
+        url: '',
+      },
+      {
+        text: 'Become validator',
+        url: '',
+      },
+
+    ],
+  },
+];

theme/components/Link.ts

@@ -18,7 +18,7 @@ const variantPrimary = defineStyle((props) => {
 
 const variantSecondary = defineStyle((props) => {
   return {
-    color: mode('gray.500', 'gray.500')(props),
+    color: mode('gray.600', 'gray.500')(props),
     _hover: {
       color: mode('gray.600', 'gray.400')(props),
     },

types/client/navigation-items.ts

@@ -1,9 +1,15 @@
 import type { Route } from 'nextjs-routes';
+import type React from 'react';
+
+type NavIconOrComponent = {
+  icon?: React.FunctionComponent<React.SVGAttributes<SVGElement>>;
+} | {
+  iconComponent?: React.FC<{size?: number}>;
+};
 
 type NavItemCommon = {
   text: string;
-  icon?: React.FunctionComponent<React.SVGAttributes<SVGElement>>;
-}
+} & NavIconOrComponent;
 
 export type NavItemInternal = NavItemCommon & {
   nextRoute: Route;

types/client/wallets.ts

@@ -3,8 +3,7 @@ import type { providers } from 'ethers';
 export type WalletType = 'metamask' | 'coinbase';
 
 export interface WalletInfo {
-  add_token_text: string;
-  add_network_text: string;
+  name: string;
   icon: React.ElementType;
 }