get backend version from api (#1012)

* get backend version from api

* fix tests

.env.template

@@ -29,7 +29,6 @@ NEXT_PUBLIC_NETWORK_RPC_URL=__PLACEHOLDER_FOR_NEXT_PUBLIC_NETWORK_RPC_URL__
 NEXT_PUBLIC_IS_TESTNET=__PLACEHOLDER_FOR_NEXT_PUBLIC_IS_TESTNET__
 
 # ui config
-NEXT_PUBLIC_BLOCKSCOUT_VERSION=__PLACEHOLDER_FOR_NEXT_PUBLIC_BLOCKSCOUT_VERSION__
 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__

configs/app/config.ts

@@ -116,7 +116,6 @@ const config = Object.freeze({
   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',

configs/envs/.env.eth

@@ -9,7 +9,6 @@ NEXT_PUBLIC_APP_ENV=development
 NEXT_PUBLIC_FEATURED_NETWORKS=https://raw.githubusercontent.com/blockscout/frontend-configs/dev/configs/featured-networks/eth.json
 NEXT_PUBLIC_NETWORK_EXPLORERS=[{'title':'Etherscan','baseUrl':'https://etherscan.io/','paths':{'tx':'/tx','address':'/address','token':'/token','block':'/block'}}]
 NEXT_PUBLIC_GRAPHIQL_TRANSACTION=0xf7d4972356e6ae44ae948d0cf19ef2beaf0e574c180997e969a2837da15e349d
-NEXT_PUBLIC_BLOCKSCOUT_VERSION=v4.1.7-beta
 NEXT_PUBLIC_API_SPEC_URL=https://raw.githubusercontent.com/blockscout/blockscout-api-v2-swagger/main/swagger.yaml
 
 # network config

configs/envs/.env.eth_goerli

@@ -9,7 +9,6 @@ NEXT_PUBLIC_APP_ENV=development
 NEXT_PUBLIC_FEATURED_NETWORKS=https://raw.githubusercontent.com/blockscout/frontend-configs/dev/configs/featured-networks/eth-goerli.json
 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_GRAPHIQL_TRANSACTION=0xf7d4972356e6ae44ae948d0cf19ef2beaf0e574c180997e969a2837da15e349d
-NEXT_PUBLIC_BLOCKSCOUT_VERSION=v4.1.7-beta
 NEXT_PUBLIC_API_SPEC_URL=https://raw.githubusercontent.com/blockscout/blockscout-api-v2-swagger/main/swagger.yaml
 
 # network config

configs/envs/.env.jest

@@ -6,7 +6,6 @@ NEXT_PUBLIC_APP_INSTANCE=jest
 NEXT_PUBLIC_APP_ENV=testing
 
 # ui config
-NEXT_PUBLIC_BLOCKSCOUT_VERSION=v4.1.7-beta
 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']

configs/envs/.env.localhost

@@ -6,7 +6,6 @@ NEXT_PUBLIC_APP_INSTANCE=local
 NEXT_PUBLIC_APP_ENV=development
 
 # ui config
-NEXT_PUBLIC_BLOCKSCOUT_VERSION=v4.1.7-beta
 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.main

@@ -9,7 +9,6 @@ NEXT_PUBLIC_APP_ENV=development
 NEXT_PUBLIC_FEATURED_NETWORKS=https://raw.githubusercontent.com/blockscout/frontend-configs/dev/configs/featured-networks/eth-goerli.json
 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_GRAPHIQL_TRANSACTION=0xf7d4972356e6ae44ae948d0cf19ef2beaf0e574c180997e969a2837da15e349d
-NEXT_PUBLIC_BLOCKSCOUT_VERSION=v4.1.7-beta
 NEXT_PUBLIC_API_SPEC_URL=https://raw.githubusercontent.com/blockscout/blockscout-api-v2-swagger/main/swagger.yaml
 
 # network config

configs/envs/.env.main.L2

@@ -12,7 +12,6 @@ NEXT_PUBLIC_HOMEPAGE_PLATE_BACKGROUND=linear-gradient(136.9deg,rgb(107 94 236) 1
 NEXT_PUBLIC_GRAPHIQL_TRANSACTION=0x4a0ed8ddf751a7cb5297f827699117b0f6d21a0b2907594d300dc9fed75c7e62
 NEXT_PUBLIC_WEB3_DEFAULT_WALLET=coinbase
 NEXT_PUBLIC_WEB3_DISABLE_ADD_TOKEN_TO_WALLET=true
-NEXT_PUBLIC_BLOCKSCOUT_VERSION=v4.1.7-beta
 NEXT_PUBLIC_API_SPEC_URL=https://raw.githubusercontent.com/blockscout/blockscout-api-v2-swagger/main/swagger.yaml
 
 # network config

configs/envs/.env.poa_core

@@ -13,7 +13,6 @@ NEXT_PUBLIC_HOMEPAGE_CHARTS=['daily_txs','coin_price','market_cap']
 #NEXT_PUBLIC_HOMEPAGE_PLATE_TEXT_COLOR=\#DCFE76
 NEXT_PUBLIC_NETWORK_LOGO=https://raw.githubusercontent.com/blockscout/frontend-configs/dev/configs/network-logos/poa.svg
 NEXT_PUBLIC_NETWORK_ICON=https://raw.githubusercontent.com/blockscout/frontend-configs/dev/configs/network-icons/poa.svg
-NEXT_PUBLIC_BLOCKSCOUT_VERSION=v4.1.7-beta
 NEXT_PUBLIC_API_SPEC_URL=https://raw.githubusercontent.com/blockscout/blockscout-api-v2-swagger/main/swagger.yaml
 
 # network config

configs/envs/.env.pw

@@ -6,7 +6,6 @@ NEXT_PUBLIC_APP_INSTANCE=pw
 NEXT_PUBLIC_APP_ENV=testing
 
 # ui config
-NEXT_PUBLIC_BLOCKSCOUT_VERSION=v4.1.7-beta
 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']

deploy/values/main/values.yaml

@@ -280,8 +280,6 @@ frontend:
     # api config
     NEXT_PUBLIC_API_BASE_PATH:
       _default: /
-    NEXT_PUBLIC_BLOCKSCOUT_VERSION:
-      _default: v5.1.2-beta
     NEXT_PUBLIC_APP_ENV:
       _default: stable
     NEXT_PUBLIC_APP_INSTANCE:

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

@@ -60,8 +60,6 @@ frontend:
   nodeSelector:
     enabled: false
   environment:
-    NEXT_PUBLIC_BLOCKSCOUT_VERSION:
-      _default: v5.1.0-beta
     NEXT_PUBLIC_APP_ENV:
       _default: preview
     NEXT_PUBLIC_APP_INSTANCE:

deploy/values/review/values.yaml.gotmpl

@@ -56,8 +56,6 @@ frontend:
   nodeSelector:
     enabled: false
   environment:
-    NEXT_PUBLIC_BLOCKSCOUT_VERSION:
-      _default: v5.1.2-beta
     NEXT_PUBLIC_APP_ENV:
       _default: preview
     NEXT_PUBLIC_APP_INSTANCE:

docs/ENVS.md

@@ -31,7 +31,6 @@ 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_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'}}]` |

lib/api/resources.ts

@@ -28,6 +28,7 @@ import type {
 import type { AddressesResponse } from 'types/api/addresses';
 import type { BlocksResponse, BlockTransactionsResponse, Block, BlockFilters, BlockWithdrawalsResponse } from 'types/api/block';
 import type { ChartMarketResponse, ChartTransactionResponse } from 'types/api/charts';
+import type { BackendVersionConfig } from 'types/api/configs';
 import type { SmartContract, SmartContractReadMethod, SmartContractWriteMethod, SmartContractVerificationConfig } from 'types/api/contract';
 import type { VerifiedContractsResponse, VerifiedContractsFilters, VerifiedContractsCounters } from 'types/api/contracts';
 import type { IndexingStatus } from 'types/api/indexingStatus';
@@ -466,6 +467,11 @@ export const RESOURCES = {
     path: '/api/v2/optimism/txn-batches/count',
   },
 
+  // CONFIGS
+  config_backend_version: {
+    path: '/api/v2/config/backend-version',
+  },
+
   // DEPRECATED
   old_api: {
     path: '/api',
@@ -609,6 +615,7 @@ Q extends 'l2_output_roots_count' ? number :
 Q extends 'l2_withdrawals_count' ? number :
 Q extends 'l2_deposits_count' ? number :
 Q extends 'l2_txn_batches_count' ? number :
+Q extends 'config_backend_version' ? BackendVersionConfig :
 never;
 /* eslint-enable @typescript-eslint/indent */
 

lib/hooks/useIssueUrl.tsx

@@ -4,14 +4,28 @@ import appConfig from 'configs/app/config';
 import isBrowser from 'lib/isBrowser';
 
 const base = 'https://github.com/blockscout/blockscout/issues/new/';
+const labels = 'new UI';
+const title = `${ appConfig.network.name }: <Issue Title>`;
 
-const bodyTemplate = `*Describe your issue here.*
+export default function useIssueUrl(backendVersion: string | undefined) {
+  const [ userAgent, setUserAgent ] = React.useState('');
+  const isInBrowser = isBrowser();
+
+  React.useEffect(() => {
+    if (isInBrowser) {
+      setUserAgent(window.navigator.userAgent);
+    }
+  }, [ isInBrowser ]);
+
+  const body = React.useMemo(() => {
+    return `
+*Describe your issue here.*
 
 ### Environment
 
-* Backend Version/branch/commit: ${ appConfig.blockScoutVersion }
+* Backend Version/branch/commit: ${ backendVersion }
 * Frontend Version+commit: ${ [ appConfig.frontendVersion, appConfig.frontendCommit ].filter(Boolean).join('+') }
-* User Agent: __userAgent__
+* User Agent: ${ userAgent }
 
 ### Steps to reproduce
 
@@ -23,23 +37,10 @@ const bodyTemplate = `*Describe your issue here.*
 
 ### Actual behaviour
 
-*Tell us what happens instead.*`;
-
-const labels = 'new UI';
+*Tell us what happens instead.*
+    `;
+  }, [ backendVersion, userAgent ]);
 
-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) });
+  const params = new URLSearchParams({ labels, title, body });
   return base + '?' + params.toString();
-
 }

types/api/configs.ts

+export interface BackendVersionConfig {
+  backend_version: string;
+}

ui/pages/CsvExport.pw.tsx

@@ -34,7 +34,7 @@ test('base view +@mobile +@dark-mode', async({ mount, page }) => {
 
   await page.waitForResponse('https://www.google.com/recaptcha/api2/**');
 
-  await expect(component).toHaveScreenshot({
+  await expect(component.locator('main')).toHaveScreenshot({
     mask: [ page.locator('.recaptcha') ],
     maskColor: configs.maskColor,
   });

ui/snippets/footer/Footer.pw.tsx

@@ -5,11 +5,13 @@ import type { WindowProvider } from 'wagmi';
 import { FOOTER_LINKS } from 'mocks/config/footerLinks';
 import contextWithEnvs from 'playwright/fixtures/contextWithEnvs';
 import TestApp from 'playwright/TestApp';
+import buildApiUrl from 'playwright/utils/buildApiUrl';
 import * as configs from 'playwright/utils/configs';
 
 import Footer from './Footer';
 
 const FOOTER_LINKS_URL = 'https://localhost:3000/footer-links.json';
+const BACKEND_VERSION_API_URL = buildApiUrl('config_backend_version');
 
 base.describe('with custom links, 4 cols', () => {
   const test = base.extend({
@@ -78,6 +80,13 @@ base.describe('without custom links', () => {
         isMetaMask: true,
       } as WindowProvider;
     });
+    await page.route(BACKEND_VERSION_API_URL, (route) => {
+      return route.fulfill({
+        body: JSON.stringify({
+          backend_version: 'v5.2.0-beta.+commit.1ce1a355',
+        }),
+      });
+    });
 
     await mount(
       <TestApp>

ui/snippets/footer/Footer.tsx

@@ -11,22 +11,29 @@ import discordIcon from 'icons/social/discord.svg';
 import gitIcon from 'icons/social/git.svg';
 import twitterIcon from 'icons/social/tweet.svg';
 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 NetworkAddToWallet from 'ui/shared/NetworkAddToWallet';
 
 import ColorModeToggler from '../header/ColorModeToggler';
 import FooterLinkItem from './FooterLinkItem';
+import getApiVersionUrl from './utils/getApiVersionUrl';
 
 const MAX_LINKS_COLUMNS = 3;
 
-const API_VERSION_URL = `https://github.com/blockscout/blockscout/tree/${ appConfig.blockScoutVersion }`;
 // const FRONT_VERSION_URL = `https://github.com/blockscout/frontend/tree/${ appConfig.frontendVersion }`;
 
 const Footer = () => {
 
-  const issueUrl = useIssueUrl();
-  const BLOCSKOUT_LINKS = [
+  const { data: backendVersionData } = useApiQuery('config_backend_version', {
+    queryOptions: {
+      staleTime: Infinity,
+    },
+  });
+  const apiVersionUrl = getApiVersionUrl(backendVersionData?.backend_version);
+  const issueUrl = useIssueUrl(backendVersionData?.backend_version);
+  const BLOCKSCOUT_LINKS = [
     {
       icon: editIcon,
       iconSize: '16px',
@@ -83,9 +90,9 @@ const Footer = () => {
             Blockscout is a tool for inspecting and analyzing EVM based blockchains. Blockchain explorer for Ethereum Networks.
         </Text>
         <VStack spacing={ 1 } mt={ 6 } alignItems="start">
-          { appConfig.blockScoutVersion && (
+          { apiVersionUrl && (
             <Text fontSize="xs">
-                Backend: <Link href={ API_VERSION_URL } target="_blank">{ appConfig.blockScoutVersion }</Link>
+                Backend: <Link href={ apiVersionUrl } target="_blank">{ backendVersionData?.backend_version }</Link>
             </Text>
           ) }
           { (appConfig.frontendVersion || appConfig.frontendCommit) && (
@@ -112,7 +119,7 @@ const Footer = () => {
             gridAutoFlow={{ base: 'row', lg: appConfig.footerLinks ? 'row' : 'column' }}
             mt={{ base: 0, lg: appConfig.footerLinks ? 0 : '100px' }}
           >
-            { BLOCSKOUT_LINKS.map(link => <FooterLinkItem { ...link } key={ link.text }/>) }
+            { BLOCKSCOUT_LINKS.map(link => <FooterLinkItem { ...link } key={ link.text }/>) }
           </Grid>
         </Box>
         { appConfig.footerLinks && isLoading && (

ui/snippets/footer/utils/getApiVersionUrl.tsx

+export default function getApiVersionUrl(version: string | undefined): string | undefined {
+  if (!version) {
+    return;
+  }
+
+  const [ tag, commit ] = version.split('.+commit.');
+
+  if (commit) {
+    return `https://github.com/blockscout/blockscout/commit/${ commit }`;
+  }
+
+  return `https://github.com/blockscout/blockscout/tree/${ tag }`;
+}