update frontend to latest main

.github/workflows/checks.yml

@@ -0,0 +1,133 @@
+name: Checks
+on:
+  workflow_call:
+  workflow_dispatch:
+  pull_request:
+    types: [ opened, synchronize, unlabeled ]
+    paths-ignore:
+      - '.github/ISSUE_TEMPLATE/**'
+      - '.husky/**'
+      - '.vscode/**'
+      - 'deploy/**'
+      - 'docs/**'
+      - 'public/**'
+      - 'stub/**'
+
+concurrency:
+  group: ${{ github.workflow }}-${{ github.ref }}
+  cancel-in-progress: true
+
+jobs:
+  code_quality:
+    name: Code quality
+    runs-on: ubuntu-latest
+    if: ${{ !contains(github.event.pull_request.labels.*.name, 'WIP') && !(github.event.action == 'unlabeled' && github.event.label.name != 'WIP') }}
+    steps:
+      - name: Checkout repo
+        uses: actions/checkout@v3
+
+      - name: Setup node
+        uses: actions/setup-node@v3
+        with:
+          node-version: 18
+          cache: 'yarn'
+
+      - name: Cache node_modules
+        uses: actions/cache@v3
+        id: cache-node-modules
+        with:
+          path: |
+            node_modules
+          key: node_modules-${{ runner.os }}-${{ hashFiles('yarn.lock') }}
+
+      - name: Install dependencies
+        if: steps.cache-node-modules.outputs.cache-hit != 'true'
+        run: yarn --frozen-lockfile
+
+      - name: Run ESLint
+        run: yarn lint:eslint
+
+      - name: Compile TypeScript
+        run: yarn lint:tsc
+
+  jest_tests:
+    name: Jest tests
+    needs: [ code_quality ]
+    runs-on: ubuntu-latest
+    steps:
+      - name: Checkout repo
+        uses: actions/checkout@v3
+
+      - name: Setup node
+        uses: actions/setup-node@v3
+        with:
+          node-version: 18
+          cache: 'yarn'
+
+      - name: Cache node_modules
+        uses: actions/cache@v3
+        id: cache-node-modules
+        with:
+          path: |
+            node_modules
+          key: node_modules-${{ runner.os }}-${{ hashFiles('yarn.lock') }}
+
+      - name: Install dependencies
+        if: steps.cache-node-modules.outputs.cache-hit != 'true'
+        run: yarn --frozen-lockfile
+
+      - name: Run Jest
+        run: yarn test:jest
+
+  pw_tests:
+    name: 'Playwright tests / Project: ${{ matrix.project }}'
+    needs: [ code_quality ]
+    runs-on: ubuntu-latest
+    container:
+      image: mcr.microsoft.com/playwright:v1.35.1-focal
+
+    strategy:
+      fail-fast: false
+      matrix:
+        project: [ default, mobile, dark-color-mode ]
+
+    steps:
+      - name: Install git-lfs
+        run: apt-get update && apt-get install git-lfs
+
+      - name: Checkout repo
+        uses: actions/checkout@v3
+        with:
+          lfs: 'true'
+
+      - name: Setup node
+        uses: actions/setup-node@v3
+        with:
+          node-version: 18
+          cache: 'yarn'
+
+      - name: Cache node_modules
+        uses: actions/cache@v3
+        id: cache-node-modules
+        with:
+          path: |
+            node_modules
+          key: node_modules-${{ runner.os }}-${{ hashFiles('yarn.lock') }}
+
+      - name: Install dependencies
+        if: steps.cache-node-modules.outputs.cache-hit != 'true'
+        run: yarn --frozen-lockfile
+
+      - name: Run PlayWright
+        run: yarn test:pw:ci
+        env:
+          HOME: /root
+          PW_PROJECT: ${{ matrix.project }}
+
+      - name: Upload test results
+        if: always()
+        uses: actions/upload-artifact@v3
+        with:
+          name: playwright-report-${{ matrix.project }}
+          path: playwright-report
+          retention-days: 10

.github/workflows/publish-image.yml

@@ -0,0 +1,75 @@
+name: Publish Docker image
+
+on:
+    workflow_dispatch:
+        inputs:
+            tags:
+                description: Image tags
+                required: false
+                type: string
+            platforms:
+                description: Image platforms (you can specify multiple platforms separated by comma)
+                required: false
+                type: string
+                default: linux/amd64
+    workflow_call:
+        inputs:
+            tags:
+                description: Image tags
+                required: false
+                type: string
+            platforms:
+                description: Image platforms (you can specify multiple platforms separated by comma)
+                required: false
+                type: string
+                default: linux/amd64
+
+jobs:
+    run:
+        name: Run
+        runs-on: ubuntu-latest
+        steps:
+            -   name: Check out the repo
+                uses: actions/checkout@v4
+
+            -   name: Set up Docker Buildx
+                uses: docker/setup-buildx-action@v3
+
+            # Will automatically make nice tags, see the table here https://github.com/docker/metadata-action#basic
+            -   name: Docker meta
+                id: meta
+                uses: docker/metadata-action@v5
+                with:
+                    images: ghcr.io/blockscout/frontend
+
+            -   name: Login to GitHub Container Registry
+                uses: docker/login-action@v2
+                with:
+                    registry: ghcr.io
+                    username: ${{ github.actor }}
+                    password: ${{ secrets.GITHUB_TOKEN }}
+
+            -   name: Add SHORT_SHA env property with commit short sha
+                run: echo "SHORT_SHA=`echo ${GITHUB_SHA} | cut -c1-8`" >> $GITHUB_ENV
+
+            -   name: Debug
+                env:
+                    REF_TYPE: ${{ github.ref_type }}
+                    REF_NAME: ${{ github.ref_name }}
+                run: |
+                    echo "ref_type: $REF_TYPE"
+                    echo "ref_name: $REF_NAME"
+    
+            -   name: Build and push
+                uses: docker/build-push-action@v5
+                with:
+                    context: .
+                    file: ./Dockerfile
+                    push: true
+                    cache-from: type=gha
+                    tags: ${{ inputs.tags || steps.meta.outputs.tags }}
+                    platforms: ${{ inputs.platforms }}
+                    labels: ${{ steps.meta.outputs.labels }}
+                    build-args: |
+                        GIT_COMMIT_SHA=${{ env.SHORT_SHA }}
+                        GIT_TAG=${{ github.ref_type == 'tag' && github.ref_name || '' }}

.gitignore

@@ -25,6 +25,7 @@
 .DS_Store
 *.pem
 .tools
+grafana
 
 # debug
 npm-debug.log*

.vscode/tasks.json

@@ -338,15 +338,19 @@
             "options": [
               "main",
               "main.L2",
-              "poa_core",
-              "eth_goerli",
-              "sepolia",
+              "localhost",
+              "base",
+              "gnosis",
               "eth",
-              "rootstock",
+              "eth_goerli",
+              "eth_sepolia",
+              "optimism",
+              "optimism_sepolia",
               "polygon",
+              "rootstock",
+              "stability",
               "zkevm",
-              "gnosis",
-              "localhost",
+              "zksync",
             ],
             "default": "main"
         },

Dockerfile

@@ -3,7 +3,8 @@
 # *****************************
 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
+RUN apk add --no-cache libc6-compat python3 make g++
+RUN ln -sf /usr/bin/python3 /usr/bin/python
 
 ### APP
 # Install dependencies
@@ -118,6 +119,11 @@ RUN ["chmod", "-R", "777", "./public"]
 COPY --from=builder /app/.env.registry .
 COPY --from=builder /app/.env .
 
+# Copy ENVs presets
+ARG ENVS_PRESET
+ENV ENVS_PRESET=$ENVS_PRESET
+COPY ./configs/envs ./configs/envs
+
 # Automatically leverage output traces to reduce image size
 # https://nextjs.org/docs/advanced-features/output-file-tracing
 COPY --from=builder --chown=nextjs:nodejs /app/.next/standalone ./

configs/app/chain.ts

@@ -12,8 +12,8 @@ const chain = Object.freeze({
     symbol: getEnvValue('NEXT_PUBLIC_NETWORK_CURRENCY_SYMBOL'),
     decimals: Number(getEnvValue('NEXT_PUBLIC_NETWORK_CURRENCY_DECIMALS')) || DEFAULT_CURRENCY_DECIMALS,
   },
-  governanceToken: {
-    symbol: getEnvValue('NEXT_PUBLIC_NETWORK_GOVERNANCE_TOKEN_SYMBOL'),
+  secondaryCoin: {
+    symbol: getEnvValue('NEXT_PUBLIC_NETWORK_SECONDARY_COIN_SYMBOL'),
   },
   rpcUrl: getEnvValue('NEXT_PUBLIC_NETWORK_RPC_URL'),
   isTestnet: getEnvValue('NEXT_PUBLIC_IS_TESTNET') === 'true',

configs/app/features/addressMetadata.ts

@@ -0,0 +1,27 @@
+import type { Feature } from './types';
+
+import { getEnvValue } from '../utils';
+
+const apiHost = getEnvValue('NEXT_PUBLIC_METADATA_SERVICE_API_HOST');
+
+const title = 'Address metadata';
+
+const config: Feature<{ api: { endpoint: string; basePath: string } }> = (() => {
+  if (apiHost) {
+    return Object.freeze({
+      title,
+      isEnabled: true,
+      api: {
+        endpoint: apiHost,
+        basePath: '',
+      },
+    });
+  }
+
+  return Object.freeze({
+    title,
+    isEnabled: false,
+  });
+})();
+
+export default config;

configs/app/features/adsBanner.ts

@@ -1,7 +1,7 @@
 import type { Feature } from './types';
 import type { AdButlerConfig } from 'types/client/adButlerConfig';
 import { SUPPORTED_AD_BANNER_PROVIDERS } from 'types/client/adProviders';
-import type { AdBannerProviders } from 'types/client/adProviders';
+import type { AdBannerProviders, AdBannerAdditionalProviders } from 'types/client/adProviders';
 
 import { getEnvValue, parseEnvJson } from '../utils';
 
@@ -11,6 +11,8 @@ const provider: AdBannerProviders = (() => {
   return envValue && SUPPORTED_AD_BANNER_PROVIDERS.includes(envValue) ? envValue : 'slise';
 })();
 
+const additionalProvider = getEnvValue('NEXT_PUBLIC_AD_BANNER_ADDITIONAL_PROVIDER') as AdBannerAdditionalProviders;
+
 const title = 'Banner ads';
 
 type AdsBannerFeaturePayload = {
@@ -23,6 +25,15 @@ type AdsBannerFeaturePayload = {
       mobile: AdButlerConfig;
     };
   };
+} | {
+  provider: Exclude<AdBannerProviders, 'adbutler' | 'none'>;
+  additionalProvider: 'adbutler';
+  adButler: {
+    config: {
+      desktop: AdButlerConfig;
+      mobile: AdButlerConfig;
+    };
+  };
 }
 
 const config: Feature<AdsBannerFeaturePayload> = (() => {
@@ -44,6 +55,24 @@ const config: Feature<AdsBannerFeaturePayload> = (() => {
       });
     }
   } else if (provider !== 'none') {
+
+    if (additionalProvider === 'adbutler') {
+      const desktopConfig = parseEnvJson<AdButlerConfig>(getEnvValue('NEXT_PUBLIC_AD_ADBUTLER_CONFIG_DESKTOP'));
+      const mobileConfig = parseEnvJson<AdButlerConfig>(getEnvValue('NEXT_PUBLIC_AD_ADBUTLER_CONFIG_MOBILE'));
+
+      return Object.freeze({
+        title,
+        isEnabled: true,
+        provider,
+        additionalProvider,
+        adButler: {
+          config: {
+            desktop: desktopConfig,
+            mobile: mobileConfig,
+          },
+        },
+      });
+    }
     return Object.freeze({
       title,
       isEnabled: true,

configs/app/features/dataAvailability.ts

@@ -0,0 +1,21 @@
+import type { Feature } from './types';
+
+import { getEnvValue } from '../utils';
+
+const title = 'Data availability';
+
+const config: Feature<{ isEnabled: true }> = (() => {
+  if (getEnvValue('NEXT_PUBLIC_DATA_AVAILABILITY_ENABLED') === 'true') {
+    return Object.freeze({
+      title,
+      isEnabled: true,
+    });
+  }
+
+  return Object.freeze({
+    title,
+    isEnabled: false,
+  });
+})();
+
+export default config;