test: added app dir

packages/app/.eslintignore

@@ -0,0 +1,2 @@
+dist
+storybook-static

packages/app/.eslintrc.cjs

@@ -0,0 +1,9 @@
+/* eslint-env node */
+require("@rushstack/eslint-patch/modern-module-resolution");
+
+module.exports = {
+  extends: ["@matterlabs/eslint-config-vue"],
+  env: {
+    "vue/setup-compiler-macros": true,
+  },
+};

packages/app/.firebaserc

@@ -0,0 +1,27 @@
+{
+  "projects": {
+    "default": "staging-scan-v2"
+  },
+  "targets": {
+    "scan-v2": {
+      "hosting": {
+        "web": [
+          "scan-v2"
+        ],
+        "storybook": [
+          "storybook-scan-v2"
+        ]
+      }
+    },
+    "staging-scan-v2": {
+      "hosting": {
+        "web": [
+          "staging-scan-v2"
+        ],
+        "storybook": [
+          "staging-storybook-scan-v2"
+        ]
+      }
+    }
+  }
+}

packages/app/.storybook/main.js

@@ -0,0 +1,39 @@
+const path = require('path');
+
+module.exports = {
+  "stories": [
+    "../src/**/*.stories.mdx",
+    "../src/**/*.stories.@(js|jsx|ts|tsx)"
+  ],
+  "addons": [
+    "@storybook/addon-links",
+    "@storybook/addon-essentials",
+    {
+      name: "@storybook/addon-postcss",
+      options: {
+        postcssLoaderOptions: {
+          implementation: require("postcss")
+        }
+      }
+    }
+  ],
+  "framework": "@storybook/vue3",
+  "core": {
+    "builder": "webpack5"
+  },
+  webpackFinal: async (config, { configType }) => {
+
+    config.module.rules.push({
+      test: /\.scss$/,
+      use: ['style-loader', 'css-loader', 'sass-loader', 'postcss-loader',],
+      include: path.resolve(__dirname, '../'),
+    });
+
+    config.resolve.alias = {
+      ...config.resolve.alias,
+      '@': path.join(__dirname, "../src"),
+    };
+
+    return config;
+  },
+}

packages/app/.storybook/preview.js

@@ -0,0 +1,29 @@
+import "../src/assets/tailwind.scss";
+import { createI18n } from "vue-i18n";
+import enUS from "../src/locales/en.json";
+import { app } from '@storybook/vue3'
+import $testId from "../src/plugins/testId";
+
+app.component('RouterLink', {
+  template: `<a v-bind="$props" href="#"><slot /></a>`
+});
+
+const i18n = createI18n({
+  locale: "en",
+  allowComposition: true,
+  messages: {
+    en: enUS,
+  },
+});
+app.use(i18n)
+app.use($testId)
+
+export const parameters = {
+  actions: { argTypesRegex: "^on[A-Z].*" },
+  controls: {
+    matchers: {
+      color: /(background|color)$/i,
+      date: /Date$/,
+    },
+  },
+}

packages/app/Dockerfile

@@ -0,0 +1,37 @@
+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/*
+
+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
+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 -c-1 --proxy="http://127.0.0.1:$PORT/index.html?"

packages/app/README.md

@@ -0,0 +1,116 @@
+# zkSync Era Block Explorer App
+## Overview
+`zkSync Era Block Explorer App` is a front-end app providing an easy-to-use interface for users to view and inspect transactions, blocks, contracts and more on [zkSync Era](https://zksync.io) blockchain.
+
+## Recommended IDE Setup
+
+[VSCode](https://code.visualstudio.com/) + [Volar](https://marketplace.visualstudio.com/items?itemName=johnsoncodehk.volar) (and disable Vetur) + [TypeScript Vue Plugin (Volar)](https://marketplace.visualstudio.com/items?itemName=johnsoncodehk.vscode-typescript-vue-plugin).
+
+## Type Support for `.vue` Imports in TS
+
+TypeScript cannot handle type information for `.vue` imports by default, so we replace the `tsc` CLI with `vue-tsc` for type checking. In editors, we need [TypeScript Vue Plugin (Volar)](https://marketplace.visualstudio.com/items?itemName=johnsoncodehk.vscode-typescript-vue-plugin) to make the TypeScript language service aware of `.vue` types.
+
+If the standalone TypeScript plugin doesn't feel fast enough to you, Volar has also implemented a [Take Over Mode](https://github.com/johnsoncodehk/volar/discussions/471#discussioncomment-1361669) that is more performant. You can enable it by the following steps:
+
+1. Disable the built-in TypeScript Extension
+    1) Run `Extensions: Show Built-in Extensions` from VSCode's command palette
+    2) Find `TypeScript and JavaScript Language Features`, right click and select `Disable (Workspace)`
+2. Reload the VSCode window by running `Developer: Reload Window` from the command palette.
+
+## Installation
+
+```bash
+$ npm install
+```
+
+### Environment configs
+Public environment configs are stored in `src/configs` folder and are named as `<appEnvironment>.config.json` where `appEnvironment` is the name of the environment set in `VITE_APP_ENVIRONMENT` env variable.
+Currently there are 3 different environments for the project: `local`, `staging` and `production`, each with its corresponding configuration file.
+
+### Adding a new network to the config
+In order to change the configuration for the environment, you need to change its configuration file. By default, there are 4 networks configured for the `local` environment: `local`, `stage`, `testnet` and `mainnet`. Your local network might be different from what is configured in `local.config.json` in such case you should edit the config and set correct values for your setup. You can also add new items to the `networks` array and they will automatically appear in the networks dropdown on UI. 
+
+Example of `local.config.json` extended with the new network:
+
+```
+import stagingConfig from "./staging.config";
+
+import type { EnvironmentConfig } from ".";
+
+const config: EnvironmentConfig = {
+  networks: [
+    {
+      apiUrl: "http://localhost:3020",
+      verificationApiUrl: "https://zksync2-testnet-explorer.zksync.dev",
+      hostnames: ["localhost"],
+      icon: "/images/icons/zksync-arrows.svg",
+      l2ChainId: 270,
+      l2NetworkName: "Local",
+      maintenance: false,
+      name: "local",
+      published: true,
+      rpcUrl: "http://localhost:3050",
+    },
+    // next network has been just added
+    {
+      apiUrl: "http://localhost:3030",
+      verificationApiUrl: "https://zksync2-testnet-explorer.zksync.dev",
+      hostnames: ["localhost"],
+      icon: "/images/icons/zksync-arrows.svg",
+      l2ChainId: 270,
+      l2NetworkName: "Local Hyperchain",
+      maintenance: false,
+      name: "local-hyperchain",
+      published: true,
+      rpcUrl: "http://localhost:3070",
+    },
+    ...stagingConfig.networks,
+  ],
+};
+
+export default config;
+```
+
+### Compile and Hot-Reload for Development
+
+```sh
+npm run dev
+```
+
+### Type-Check, Compile and Minify for Production
+
+```sh
+npm run build
+```
+
+### Run Unit Tests with [Vitest](https://vitest.dev/)
+
+```sh
+npm run test
+```
+
+### Run End-to-End Tests with [Playwright](https://www.playwright.io/)
+
+```sh
+npm run test:e2e
+```
+
+### Lint with [ESLint](https://eslint.org/)
+
+```sh
+npm run lint
+```
+
+## Production links
+ - [Web Application](https://explorer.zksync.io)
+ - [Storybook](https://storybook-scan-v2.zksync.dev)
+
+
+## Verify Block Explorer UI test results in GitHub Actions
+GitHub Actions test results are available in:
+
+- `GitHub Actions` --> `Summary` page at the very end of a page.
+- Inside of each test run in the log: `Feature on Mainnet + Sepolia` --> `@search` --> `Upload test results to Allure reporter` --> `https://raw.githack.com/matter-labs/block-explorer/gh-pages/_github.run_number_/index.html`
+- Directly via a link `https://raw.githack.com/matter-labs/block-explorer/gh-pages/_github.run_number_/index.html` after each PR running. The history of test runs for public view locates in `gh-pages` branch.
+
+In case of 404 page, make sure that the folder with its `github.run_number` exists in the `gh-pages`. If the folder exist, try again in a few minutes as `https://raw.githack.com` needs to update the data. Public report link will be available when the 'Allure Report' job will be succesfully executed.

packages/app/cucumber.mjs

@@ -0,0 +1,25 @@
+const getWorldParams = () => {
+  const params = {
+    foo: "bar",
+  };
+
+  return params;
+};
+
+export default {
+  requireModule: ["ts-node/register"],
+  paths: ["tests/e2e/features/**/*.feature"],
+  require: ["tests/e2e/src/**/*.ts"],
+  format: [
+    //"json:tests/e2e/reports/cucumber-report.json",
+    //"html:tests/e2e/reports/report.html",
+    "summary",
+    "progress-bar",
+    "@cucumber/pretty-formatter",
+    "./tests/e2e/src/support/reporters/allure-reporter.js",
+  ],
+  formatOptions: { snippetInterface: "async-await" },
+  worldParameters: getWorldParams(),
+  publishQuiet: true,
+  retry: 1,
+};

packages/app/env.d.ts

@@ -0,0 +1 @@
+/// <reference types="vite/client" />

packages/app/firebase.json

@@ -0,0 +1,84 @@
+{
+  "hosting": [
+    {
+      "target": "web",
+      "public": "dist",
+      "ignore": ["firebase.json", "**/.*", "**/node_modules/**", "**/*.map"],
+      "rewrites": [
+        {
+          "source": "**",
+          "destination": "/index.html"
+        }
+      ],
+      "headers": [
+        {
+          "source": "**",
+          "headers": [
+            {
+              "key": "Cache-Control",
+              "value": "no-cache, no-store, must-revalidate"
+            },
+            {
+              "key": "Referrer-Policy",
+              "value": "no-referrer, strict-origin-when-cross-origin"
+            },
+            {
+              "key": "X-Content-Type-Options",
+              "value": "nosniff"
+            },
+            {
+              "key": "X-Frame-Options",
+              "value": "DENY"
+            },
+            {
+              "key": "X-XSS-Protection",
+              "value": "1; mode=block"
+            },
+            {
+              "key": "Content-Security-Policy-Report-Only",
+              "value": "default-src 'self'; child-src 'self' blob:; script-src 'self' 'unsafe-eval' blob:; connect-src https://*.ingest.sentry.io https://firestore.googleapis.com/ https://*.zkscan.io https://*.zksync.io https://*.zksync.dev https://storage.googleapis.com; style-src 'self' fonts.googleapis.com; font-src 'self' fonts.gstatic.com; img-src 'self' https://assets.coingecko.com blob: data: https://firebasestorage.googleapis.com/v0/b/token-library.appspot.com/o/;"
+            }
+          ]
+        }
+      ]
+    },
+    {
+      "target": "storybook",
+      "public": "storybook-static",
+      "ignore": ["firebase.json", "**/.*", "**/node_modules/**"],
+      "rewrites": [
+        {
+          "source": "**",
+          "destination": "/index.html"
+        }
+      ],
+      "headers": [
+        {
+          "source": "**",
+          "headers": [
+            {
+              "key": "Cache-Control",
+              "value": "no-cache, no-store, must-revalidate"
+            },
+            {
+              "key": "Referrer-Policy",
+              "value": "no-referrer, strict-origin-when-cross-origin"
+            },
+            {
+              "key": "X-Content-Type-Options",
+              "value": "nosniff"
+            },
+            {
+              "key": "X-Frame-Options",
+              "value": "SAMEORIGIN"
+            },
+            {
+              "key": "X-XSS-Protection",
+              "value": "1; mode=block"
+            }
+          ]
+        }
+      ]
+    }
+  ]
+}