Merge branch 'main' into fe-make-l1blockexplorer-config-not-required

.github/workflows/release.yml

@@ -111,6 +111,20 @@ jobs:
           file: packages/worker/Dockerfile
           no-cache: true
 
+      - name: Build and push Docker image for App
+        uses: docker/build-push-action@v4
+        with:
+          push: true
+          tags: |
+              "matterlabs/block-explorer-app:latest"
+              "matterlabs/block-explorer-app:v${{ needs.createReleaseVersion.outputs.releaseVersion }}"
+              "matterlabs/block-explorer-app:${{ steps.setVersionForFlux.outputs.imageTag }}"
+              "us-docker.pkg.dev/matterlabs-infra/matterlabs-docker/block-explorer-app:latest"
+              "us-docker.pkg.dev/matterlabs-infra/matterlabs-docker/block-explorer-app:v${{ needs.createReleaseVersion.outputs.releaseVersion }}"
+              "us-docker.pkg.dev/matterlabs-infra/matterlabs-docker/block-explorer-app:${{ steps.setVersionForFlux.outputs.imageTag }}"
+          file: packages/app/Dockerfile
+          no-cache: true
+
   deployFrontendToStaging:
     name: Deploy Block Explorer frontend to staging
     runs-on: ubuntu-latest

docker-compose-cli.yaml

@@ -0,0 +1,74 @@
+version: '3.2'
+
+services:
+  app:
+    build:
+      context: .
+      dockerfile: ./packages/app/Dockerfile
+    environment:
+      - VITE_APP_ENVIRONMENT=local
+    ports:
+      - '3010:3010'
+    depends_on:
+      - api
+    restart: unless-stopped
+
+  worker:
+    build:
+      context: .
+      dockerfile: ./packages/worker/Dockerfile
+    environment:
+      - PORT=3001
+      - LOG_LEVEL=verbose
+      - NODE_ENV=development
+      - DATABASE_HOST=postgres
+      - DATABASE_USER=postgres
+      - DATABASE_PASSWORD=postgres
+      - DATABASE_NAME=block-explorer
+      - BLOCKCHAIN_RPC_URL=http://host.docker.internal:3050
+      - BATCHES_PROCESSING_POLLING_INTERVAL=1000
+    ports:
+      - '3001:3001'
+      - '9229:9229'
+      - '9230:9230'
+    restart: unless-stopped
+
+  api:
+    build:
+      context: .
+      dockerfile: ./packages/api/Dockerfile
+    environment:
+      - PORT=3020
+      - METRICS_PORT=3005
+      - LOG_LEVEL=verbose
+      - NODE_ENV=development
+      - DATABASE_URL=postgres://postgres:postgres@postgres:5432/block-explorer
+    ports:
+      - '3020:3020'
+      - '3005:3005'
+      - '9231:9229'
+      - '9232:9230'
+    depends_on:
+      - worker
+    restart: unless-stopped
+
+  postgres:
+    image: "postgres:14"
+    logging:
+      driver: none 
+    volumes:
+      - postgres:/var/lib/postgresql/data
+    ports:
+      - "5432:5432"
+    healthcheck:
+      test: [ "CMD-SHELL", "pg_isready -U postgres" ]
+      interval: 5s
+      timeout: 5s
+      retries: 5
+    environment:
+      - POSTGRES_USER=postgres
+      - POSTGRES_PASSWORD=postgres
+      - POSTGRES_DB=block-explorer
+
+volumes:
+  postgres:

docker-compose.yaml

@@ -4,6 +4,7 @@ services:
     build:
       context: .
       dockerfile: ./packages/app/Dockerfile
+      target: development-stage
     command: npm run --prefix packages/app dev -- --host
     ports:
       - '3010:3010'

packages/app/Dockerfile

@@ -1,5 +1,5 @@
-FROM node:18.17.1-alpine
-ENV NODE_ENV=development
+FROM node:18.17.1-alpine AS base-stage
+ENV NODE_ENV=production
 
 WORKDIR /usr/src/app
 RUN apk add --update python3 make g++ && rm -rf /var/cache/apk/*
@@ -8,5 +8,30 @@ COPY --chown=node:node .npmrc .npmrc
 COPY --chown=node:node lerna.json ./
 COPY --chown=node:node package*.json ./
 COPY --chown=node:node ./packages/app/package*.json ./packages/app/
+RUN npm ci --ignore-scripts && npm cache clean --force
+COPY --chown=node:node ./packages/app/. ./packages/app
+RUN rm -f .npmrc
+
+FROM base-stage AS development-stage
+ENV NODE_ENV=development
+COPY --chown=node:node .npmrc .npmrc
 RUN npm ci
-COPY --chown=node:node ./packages/app/. ./packages/app
+RUN rm -f .npmrc
+
+FROM development-stage AS build-stage
+RUN npm run build
+
+FROM base-stage AS production-stage
+COPY --chown=node:node --from=build-stage /usr/src/app/packages/app/dist ./packages/app/dist
+RUN npm i -g http-server
+
+ARG NODE_ENV=production
+ENV NODE_ENV $NODE_ENV
+
+ARG PORT=3010
+ENV PORT $PORT
+
+USER node
+WORKDIR /usr/src/app/packages/app/dist
+
+CMD http-server -p $PORT

packages/app/src/composables/useAddress.ts

@@ -93,6 +93,9 @@ export default (context = useContext()) => {
   const item = ref(<null | AddressItem>null);
 
   const getContractVerificationInfo = async (address: string): Promise<ContractVerificationInfo | null> => {
+    if (!context.currentNetwork.value.verificationApiUrl) {
+      return null;
+    }
     try {
       return await $fetch(`${context.currentNetwork.value.verificationApiUrl}/contract_verification/info/${address}`);
     } catch (e) {

packages/app/src/composables/useContractABI.ts

@@ -12,6 +12,9 @@ import { checksumAddress } from "@/utils/formatters";
 
 const retrieveAddressInfo = useMemoize(
   async (address: Address, context: Context = useContext()) => {
+    if (!context.currentNetwork.value.verificationApiUrl) {
+      return null;
+    }
     return await $fetch(`${context.currentNetwork.value.verificationApiUrl}/contract_verification/info/${address}`);
   },
   {

packages/app/src/configs/dev.config.json

@@ -2,7 +2,6 @@
   "networks": [
     {
       "apiUrl": "http://localhost:3020",
-      "verificationApiUrl": "http://127.0.0.1:3070",
       "bridgeUrl": "http://localhost:3000/bridge",
       "hostnames": [
         "localhost"

packages/app/src/configs/index.ts

@@ -1,7 +1,7 @@
 export type NetworkConfig = {
   name: string;
   icon: string;
-  verificationApiUrl: string;
+  verificationApiUrl?: string;
   apiUrl: string;
   newProverUrl: string;
   rpcUrl: string;

packages/app/src/configs/local.config.json

@@ -2,7 +2,6 @@
   "networks": [
     {
       "apiUrl": "http://localhost:3020",
-      "verificationApiUrl": "http://127.0.0.1:3070",
       "bridgeUrl": "http://localhost:3000/bridge",
       "hostnames": [
         "localhost"

packages/app/tests/composables/useAddress.spec.ts

@@ -118,6 +118,22 @@ describe("useAddresses", () => {
       });
     });
 
+    it("doesn't make contract verification request when network has no verificationApiUrl", async () => {
+      const currentNetwork = computed(() => ({ apiUrl: "http://api.url" }));
+      // eslint-disable-next-line @typescript-eslint/no-explicit-any
+      const { item, getByAddress } = useAddress({ currentNetwork } as any);
+      await getByAddress("0xc31f9d4cbf557b6cf0ad2af66d44c358f7fa7a1c");
+      expect($fetch).toHaveBeenCalledOnce();
+      expect($fetch).toHaveBeenCalledWith("http://api.url/address/0xc31f9d4cbf557b6cf0ad2af66d44c358f7fa7a1c");
+      expect(item.value).toEqual({
+        address: "0xc31f9d4cbf557b6cf0ad2af66d44c358f7fa7a1c",
+        balances: {},
+        type: "contract",
+        verificationInfo: null,
+        proxyInfo: null,
+      });
+    });
+
     it("takes proxy implementation contract from implementation function when it exists", async () => {
       const { item, getByAddress } = useAddress();
       await getByAddress("0xc31f9d4cbf557b6cf0ad2af66d44c358f7fa7a1c");

packages/app/tests/composables/useContractABI.spec.ts

@@ -1,4 +1,4 @@
-import { ref } from "vue";
+import { computed, ref } from "vue";
 
 import { describe, expect, it, type SpyInstance, vi } from "vitest";
 
@@ -66,6 +66,14 @@ describe("useContractABI:", () => {
     expect(isRequestFailed.value).toEqual(true);
     mock.mockRestore();
   });
+  it("doesn't make request when there is no verification api url", async () => {
+    const mock = ($fetch as unknown as SpyInstance).mockClear();
+    // eslint-disable-next-line @typescript-eslint/no-explicit-any
+    const { getCollection } = useContractABI({ currentNetwork: computed(() => ({})) } as any);
+    await getCollection(["0x5550000000000000000000000000000000000000"]);
+    expect(mock).toHaveBeenCalledTimes(0);
+    mock.mockRestore();
+  });
   it("caches the results", async () => {
     const mock = ($fetch as unknown as SpyInstance).mockClear();
     const { getCollection } = useContractABI();

packages/app/tests/mocks.ts

@@ -22,7 +22,7 @@ import type { Provider } from "zksync-web3";
 
 export const GOERLI_NETWORK: NetworkConfig = {
   name: "goerli",
-  verificationApiUrl: "",
+  verificationApiUrl: "https://zksync2-testnet-explorer.zksync.dev",
   apiUrl: "https://block-explorer-api.testnets.zksync.dev",
   icon: "",
   l2ChainId: 280,
@@ -37,7 +37,7 @@ export const GOERLI_NETWORK: NetworkConfig = {
 };
 export const GOERLI_BETA_NETWORK: NetworkConfig = {
   name: "goerli-beta",
-  verificationApiUrl: "",
+  verificationApiUrl: "https://zksync2-testnet-explorer.zksync.dev",
   apiUrl: "https://block-explorer-api.mock.zksync.dev",
   icon: "",
   l2ChainId: 270,