Merge pull request #21 from subspace/muhammad/frontend

update blockscout frontend

.devcontainer/devcontainer.json

@@ -1,6 +1,6 @@
 {
 	"name": "blockscout dev",
-	"image": "mcr.microsoft.com/devcontainers/typescript-node:18",
+	"image": "mcr.microsoft.com/devcontainers/typescript-node:20",
 	"forwardPorts": [ 3000 ],
 	"customizations": {
 		"vscode": {

.env.example

@@ -1,7 +1,10 @@
-NEXT_PUBLIC_SENTRY_DSN=xxx
-SENTRY_CSP_REPORT_URI=xxx
+NEXT_PUBLIC_SENTRY_DSN=https://sentry.io
+SENTRY_CSP_REPORT_URI=https://sentry.io
 NEXT_PUBLIC_WALLET_CONNECT_PROJECT_ID=xxx
 NEXT_PUBLIC_RE_CAPTCHA_APP_SITE_KEY=xxx
 NEXT_PUBLIC_GOOGLE_ANALYTICS_PROPERTY_ID=UA-XXXXXX-X
 NEXT_PUBLIC_MIXPANEL_PROJECT_TOKEN=xxx
-NEXT_PUBLIC_AUTH0_CLIENT_ID=xxx
+NEXT_PUBLIC_GROWTH_BOOK_CLIENT_KEY=xxx
+NEXT_PUBLIC_AUTH0_CLIENT_ID=xxx
+FAVICON_GENERATOR_API_KEY=xxx
+NEXT_PUBLIC_GROWTH_BOOK_CLIENT_KEY=xxx

.eslintignore

@@ -4,4 +4,5 @@ node_modules_linux
 playwright/envs.js
 deploy/tools/envs-validator/index.js
 deploy/tools/feature-reporter/build/**
-deploy/tools/feature-reporter/index.js
+deploy/tools/feature-reporter/index.js
+public/**

.eslintrc.js

@@ -2,6 +2,11 @@ const RESTRICTED_MODULES = {
   paths: [
     { name: 'dayjs', message: 'Please use lib/date/dayjs.ts instead of directly importing dayjs' },
     { name: '@chakra-ui/icons', message: 'Using @chakra-ui/icons is prohibited. Please use regular svg-icon instead (see examples in "icons/" folder)' },
+    { name: '@metamask/providers', message: 'Please lazy-load @metamask/providers or use useProvider hook instead' },
+    { name: '@metamask/post-message-stream', message: 'Please lazy-load @metamask/post-message-stream or use useProvider hook instead' },
+  ],
+  patterns: [
+    'icons/*',
   ],
 };
 
@@ -20,6 +25,7 @@ module.exports = {
     'plugin:@typescript-eslint/recommended',
     'plugin:jest/recommended',
     'plugin:playwright/playwright-test',
+    'plugin:@tanstack/eslint-plugin-query/recommended',
   ],
   plugins: [
     'es5',
@@ -31,6 +37,7 @@ module.exports = {
     'eslint-plugin-import-helpers',
     'jest',
     'eslint-plugin-no-cyrillic-string',
+    '@tanstack/query',
   ],
   parser: '@typescript-eslint/parser',
   parserOptions: {
@@ -305,7 +312,15 @@ module.exports = {
       },
     },
     {
-      files: [ 'configs/**/*.js', 'configs/**/*.ts', '*.config.ts', 'playwright/**/*.ts', 'deploy/tools/**' ],
+      files: [
+        '*.config.ts',
+        '*.config.js',
+        'playwright/**',
+        'deploy/tools/**',
+        'middleware.ts',
+        'nextjs/**',
+        'instrumentation*.ts',
+      ],
       rules: {
         // for configs allow to consume env variables from process.env directly
         'no-restricted-properties': [ 0 ],

.github/workflows/deploy-subspace.yml

@@ -55,5 +55,3 @@ jobs:
           labels: ${{ steps.meta.outputs.labels }}
           build-args: |
             GIT_COMMIT_SHA=${{ env.SHORT_SHA }}
-
-

.github/workflows/e2e-tests.yml

@@ -93,4 +93,4 @@ jobs:
     name: Run tests
     needs: deploy_e2e
     uses: blockscout/blockscout-ci-cd/.github/workflows/e2e_new.yaml@master
-    secrets: inherit
+    secrets: inherit

.gitignore

@@ -12,6 +12,11 @@
 # next.js
 /.next/
 /out/
+/public/assets/
+/public/envs.js
+/public/icons/sprite.svg
+/public/icons/README.md
+/analyze
 
 # production
 /build
@@ -46,5 +51,6 @@ yarn-error.log*
 /playwright/.cache/
 /playwright/.browser/
 /playwright/envs.js
+/playwright/affected-tests.txt
 
 **.dec**

.nvmrc

@@ -1 +1 @@
-18
+20.11.0

.vscode/tasks.json

@@ -155,6 +155,27 @@
                 "instanceLimit": 1
             }
         },
+        {
+            "type": "shell",
+            "command": "yarn test:pw:detect-affected",
+            "problemMatcher": [],
+            "label": "pw: detect affected",
+            "detail": "detect PW tests affected by changes in current branch",
+            "presentation": {
+                "reveal": "always",
+                "panel": "shared",
+                "focus": true,
+                "close": false,
+                "revealProblems": "onProblem",
+            },
+            "icon": {
+                "color": "terminal.ansiBlue",
+                "id": "diff"
+            },
+            "runOptions": {
+                "instanceLimit": 1
+            },
+        },
 
         // JEST TESTS
         {
@@ -265,7 +286,7 @@
         },
         {
             "type": "npm",
-            "script": "format-svg",
+            "script": "svg:format",
             "problemMatcher": [],
             "label": "format svg",
             "detail": "format svg files with svgo",
@@ -305,6 +326,7 @@
             "options": [
               "",
               "--update-snapshots",
+              "--update-snapshots --affected",
               "--ui",
             ],
             "default": ""
@@ -318,9 +340,12 @@
               "main.L2",
               "poa_core",
               "eth_goerli",
+              "sepolia",
               "eth",
               "rootstock",
               "polygon",
+              "zkevm",
+              "gnosis",
               "localhost",
             ],
             "default": "main"

Dockerfile

@@ -1,7 +1,7 @@
 # *****************************
 # *** STAGE 1: Dependencies ***
 # *****************************
-FROM node:18-alpine AS deps
+FROM node:20.11.0-alpine AS deps
 # Check https://github.com/nodejs/docker-node/tree/b4117f9333da4138b03a546ec926ef50a31506c3#nodealpine to understand why libc6-compat might be needed.
 RUN apk add --no-cache libc6-compat
 
@@ -30,7 +30,7 @@ RUN yarn --frozen-lockfile
 # *****************************
 # ****** STAGE 2: Build *******
 # *****************************
-FROM node:18-alpine AS builder
+FROM node:20.11.0-alpine AS builder
 RUN apk add --no-cache --upgrade libc6-compat bash
 
 # pass commit sha and git tag to the app image
@@ -47,9 +47,9 @@ WORKDIR /app
 COPY --from=deps /app/node_modules ./node_modules
 COPY . .
 
-# Generate .env.production with ENVs placeholders and save build args into .env file
-COPY --chmod=+x ./deploy/scripts/make_envs_template.sh ./
-RUN ./make_envs_template.sh ./docs/ENVS.md
+# Generate .env.registry with ENVs list and save build args into .env file
+COPY --chmod=+x ./deploy/scripts/collect_envs.sh ./
+RUN ./collect_envs.sh ./docs/ENVS.md
 
 # Next.js collects completely anonymous telemetry data about general usage.
 # Learn more here: https://nextjs.org/telemetry
@@ -58,29 +58,27 @@ RUN ./make_envs_template.sh ./docs/ENVS.md
 
 # Build app for production
 RUN yarn build
+RUN yarn svg:build-sprite
 
 
 ### FEATURE REPORTER
 # Copy dependencies and source code, then build
 COPY --from=deps /feature-reporter/node_modules ./deploy/tools/feature-reporter/node_modules
 RUN cd ./deploy/tools/feature-reporter && yarn compile_config
-RUN cd ./deploy/tools/feature-reporter &&  yarn build
+RUN cd ./deploy/tools/feature-reporter && yarn build
 
 
 ### ENV VARIABLES CHECKER
 # Copy dependencies and source code, then build 
-WORKDIR /envs-validator
-COPY --from=deps /envs-validator/node_modules ./node_modules
-COPY ./deploy/tools/envs-validator .
-COPY ./types/envs.ts .
-RUN yarn build
+COPY --from=deps /envs-validator/node_modules ./deploy/tools/envs-validator/node_modules
+RUN cd ./deploy/tools/envs-validator && yarn build
 
 
 # *****************************
 # ******* STAGE 3: Run ********
 # *****************************
 # Production image, copy all the files and run next
-FROM node:18-alpine AS runner
+FROM node:20.11.0-alpine AS runner
 RUN apk add --no-cache --upgrade bash curl jq unzip
 
 ### APP
@@ -92,25 +90,32 @@ WORKDIR /app
 RUN addgroup --system --gid 1001 nodejs
 RUN adduser --system --uid 1001 nextjs
 
+# Set the correct permission for prerender cache
+RUN mkdir .next
+RUN chown nextjs:nodejs .next
+
 COPY --from=builder /app/next.config.js ./
 COPY --from=builder /app/public ./public
 COPY --from=builder /app/package.json ./package.json
-COPY --from=builder /envs-validator/index.js ./envs-validator.js
+COPY --from=builder /app/deploy/tools/envs-validator/index.js ./envs-validator.js
 COPY --from=builder /app/deploy/tools/feature-reporter/index.js ./feature-reporter.js
 
 # Copy scripts
 ## Entripoint
 COPY --chmod=+x ./deploy/scripts/entrypoint.sh .
-## ENV replacer
-COPY --chmod=+x ./deploy/scripts/replace_envs.sh .
+## ENV validator and client script maker
+COPY --chmod=+x ./deploy/scripts/validate_envs.sh .
+COPY --chmod=+x ./deploy/scripts/make_envs_script.sh .
+## Assets downloader
+COPY --chmod=+x ./deploy/scripts/download_assets.sh .
 ## Favicon generator
 COPY --chmod=+x ./deploy/scripts/favicon_generator.sh .
 COPY ./deploy/tools/favicon-generator ./deploy/tools/favicon-generator
 RUN ["chmod", "-R", "777", "./deploy/tools/favicon-generator"]
 RUN ["chmod", "-R", "777", "./public"]
 
 # Copy ENVs files
-COPY --from=builder /app/.env.production .
+COPY --from=builder /app/.env.registry .
 COPY --from=builder /app/.env .
 
 # Automatically leverage output traces to reduce image size

README.md

@@ -10,7 +10,7 @@
 
 App is distributed as a docker image. Here you can find information about the [package](https://github.com/blockscout/frontend/pkgs/container/frontend) and its recent [releases](https://github.com/blockscout/frontend/releases).
 
-You can configure your app by passing necessary environment variables when stating the container. See full list of ENVs and their description [here](./docs/ENVS.md).
+You can configure your app by passing necessary environment variables when starting the container. See full list of ENVs and their description [here](./docs/ENVS.md).
 
 ```sh
 docker run -p 3000:3000 --env-file <path-to-your-env-file> ghcr.io/blockscout/frontend:latest
@@ -29,6 +29,7 @@ See our [Contribution guide](./docs/CONTRIBUTING.md) for pull request protocol.
 - [Contribution guide](./docs/CONTRIBUTING.md)
 - [Making a custom build](./docs/CUSTOM_BUILD.md)
 - [Frontend migration guide](https://docs.blockscout.com/for-developers/frontend-migration)
+- [Manual deployment guide with backend and microservices](https://docs.blockscout.com/for-developers/deployment/manual-deployment-guide)
 
 ## License
 

configs/app/api.ts

@@ -2,17 +2,17 @@ import stripTrailingSlash from 'lib/stripTrailingSlash';
 
 import { getEnvValue } from './utils';
 
-const apiHost = getEnvValue(process.env.NEXT_PUBLIC_API_HOST);
-const apiSchema = getEnvValue(process.env.NEXT_PUBLIC_API_PROTOCOL) || 'https';
-const apiPort = getEnvValue(process.env.NEXT_PUBLIC_API_PORT);
+const apiHost = getEnvValue('NEXT_PUBLIC_API_HOST');
+const apiSchema = getEnvValue('NEXT_PUBLIC_API_PROTOCOL') || 'https';
+const apiPort = getEnvValue('NEXT_PUBLIC_API_PORT');
 const apiEndpoint = [
   apiSchema || 'https',
   '://',
   apiHost,
   apiPort && ':' + apiPort,
 ].filter(Boolean).join('');
 
-const socketSchema = getEnvValue(process.env.NEXT_PUBLIC_API_WEBSOCKET_PROTOCOL) || 'wss';
+const socketSchema = getEnvValue('NEXT_PUBLIC_API_WEBSOCKET_PROTOCOL') || 'wss';
 const socketEndpoint = [
   socketSchema,
   '://',
@@ -22,9 +22,11 @@ const socketEndpoint = [
 
 const api = Object.freeze({
   host: apiHost,
+  protocol: apiSchema,
+  port: apiPort,
   endpoint: apiEndpoint,
   socket: socketEndpoint,
-  basePath: stripTrailingSlash(getEnvValue(process.env.NEXT_PUBLIC_API_BASE_PATH) || ''),
+  basePath: stripTrailingSlash(getEnvValue('NEXT_PUBLIC_API_BASE_PATH') || ''),
 });
 
 export default api;

configs/app/app.ts

@@ -1,23 +1,23 @@
 import { getEnvValue } from './utils';
 
-const appPort = getEnvValue(process.env.NEXT_PUBLIC_APP_PORT);
-const appSchema = getEnvValue(process.env.NEXT_PUBLIC_APP_PROTOCOL);
-const appHost = getEnvValue(process.env.NEXT_PUBLIC_APP_HOST);
+const appPort = getEnvValue('NEXT_PUBLIC_APP_PORT');
+const appSchema = getEnvValue('NEXT_PUBLIC_APP_PROTOCOL');
+const appHost = getEnvValue('NEXT_PUBLIC_APP_HOST');
 const baseUrl = [
   appSchema || 'https',
   '://',
   appHost,
   appPort && ':' + appPort,
 ].filter(Boolean).join('');
-const isDev = process.env.NODE_ENV === 'development';
+const isDev = getEnvValue('NEXT_PUBLIC_APP_ENV') === 'development';
 
 const app = Object.freeze({
   isDev,
   protocol: appSchema,
   host: appHost,
   port: appPort,
   baseUrl,
-  useProxy: getEnvValue(process.env.NEXT_PUBLIC_USE_NEXT_JS_PROXY) === 'true',
+  useProxy: getEnvValue('NEXT_PUBLIC_USE_NEXT_JS_PROXY') === 'true',
 });
 
 export default app;

configs/app/chain.ts

@@ -3,17 +3,21 @@ import { getEnvValue } from './utils';
 const DEFAULT_CURRENCY_DECIMALS = 18;
 
 const chain = Object.freeze({
-  id: getEnvValue(process.env.NEXT_PUBLIC_NETWORK_ID),
-  name: getEnvValue(process.env.NEXT_PUBLIC_NETWORK_NAME),
-  shortName: getEnvValue(process.env.NEXT_PUBLIC_NETWORK_SHORT_NAME),
+  id: getEnvValue('NEXT_PUBLIC_NETWORK_ID'),
+  name: getEnvValue('NEXT_PUBLIC_NETWORK_NAME'),
+  shortName: getEnvValue('NEXT_PUBLIC_NETWORK_SHORT_NAME'),
   currency: {
-    name: getEnvValue(process.env.NEXT_PUBLIC_NETWORK_CURRENCY_NAME),
-    symbol: getEnvValue(process.env.NEXT_PUBLIC_NETWORK_CURRENCY_SYMBOL),
-    decimals: Number(getEnvValue(process.env.NEXT_PUBLIC_NETWORK_CURRENCY_DECIMALS)) || DEFAULT_CURRENCY_DECIMALS,
+    name: getEnvValue('NEXT_PUBLIC_NETWORK_CURRENCY_NAME'),
+    weiName: getEnvValue('NEXT_PUBLIC_NETWORK_CURRENCY_WEI_NAME'),
+    symbol: getEnvValue('NEXT_PUBLIC_NETWORK_CURRENCY_SYMBOL'),
+    decimals: Number(getEnvValue('NEXT_PUBLIC_NETWORK_CURRENCY_DECIMALS')) || DEFAULT_CURRENCY_DECIMALS,
   },
-  rpcUrl: getEnvValue(process.env.NEXT_PUBLIC_NETWORK_RPC_URL),
-  isTestnet: getEnvValue(process.env.NEXT_PUBLIC_IS_TESTNET) === 'true',
-  verificationType: getEnvValue(process.env.NEXT_PUBLIC_NETWORK_VERIFICATION_TYPE) || 'mining',
+  governanceToken: {
+    symbol: getEnvValue('NEXT_PUBLIC_NETWORK_GOVERNANCE_TOKEN_SYMBOL'),
+  },
+  rpcUrl: getEnvValue('NEXT_PUBLIC_NETWORK_RPC_URL'),
+  isTestnet: getEnvValue('NEXT_PUBLIC_IS_TESTNET') === 'true',
+  verificationType: getEnvValue('NEXT_PUBLIC_NETWORK_VERIFICATION_TYPE') || 'mining',
 });
 
 export default chain;