feat(status-page): First PR for a Status Page (#11449)

* status page

* verified blocks

* gas price

* peers

* l2 peers

* faster mempool

* queued

* status updates, onclick udpates

* displays

* netwokr => protocol

* bump intervals

* commit pnpm lock

* tokenomcis use l2provider

* unused files

packages/status-page/.babelrc

@@ -0,0 +1,8 @@
+{
+    "presets": [["@babel/preset-env", {"targets": {"node": "current"}}]],
+    "env": {
+      "test": {
+        "plugins": ["transform-es2015-modules-commonjs"]
+      }
+  }
+  }

packages/status-page/.default.env

@@ -0,0 +1,9 @@
+VITE_NODE_ENV=dev
+VITE_L1_RPC_URL="https://l1rpc.a1.taiko.xyz"
+VITE_L2_RPC_URL="https://l2rpc.a1.taiko.xyz"
+VITE_TAIKO_L2_ADDRESS="0x0000777700000000000000000000000000000001"
+VITE_TAIKO_L1_ADDRESS="0x7B3AF414448ba906f02a1CA307C56c4ADFF27ce7"
+VITE_L2_BOOTNODE_URL="http://104.198.208.154:8545"
+VITE_TOKENOMICS_ENABLED=false
+VITE_L1_EXPLORER_URL="https://l1explorer.a1.taiko.xyz"
+VITE_L2_EXPLORER_URL="https://l2explorer.a1.taiko.xyz"

packages/status-page/.eslintignore

@@ -0,0 +1,6 @@
+build
+coverage
+node_modules
+example
+LICENSES
+public

packages/status-page/.eslintrc.cjs

@@ -0,0 +1,81 @@
+module.exports = {
+    env: {
+        node: true,
+        browser: true,
+        es2021: true,
+        webextensions: true,
+    },
+    extends: ["eslint:recommended"],
+    parser: "@typescript-eslint/parser",
+    parserOptions: {
+        ecmaVersion: "latest",
+        sourceType: "module",
+        extraFileExtensions: [".svelte"],
+    },
+    plugins: ["svelte3", "@typescript-eslint"],
+    rules: {
+        "linebreak-style": ["error", "unix"],
+        quotes: ["error", "double"],
+        semi: ["error", "always"],
+    },
+    ignorePatterns: ["node_modules"], // todo: lets lint that separately, or move it to its own package
+    settings: {
+        "svelte3/typescript": require("typescript"),
+    },
+    overrides: [
+        {
+            files: ["*.ts", "*.svelte"],
+            extends: [
+                "plugin:@typescript-eslint/recommended",
+                "plugin:@typescript-eslint/recommended-requiring-type-checking",
+            ],
+            parserOptions: {
+                project: ["./tsconfig.json"],
+                tsconfigRootDir: __dirname,
+            },
+            rules: {
+                "@typescript-eslint/no-inferrable-types": 0,
+                "@typescript-eslint/unbound-method": "off",
+                "@typescript-eslint/no-empty-interface": "off",
+            },
+        },
+        {
+            files: ["*.svelte"],
+            processor: "svelte3/svelte3",
+            // typescript and svelte dont work with template handlers yet.
+            // https://stackoverflow.com/questions/63337868/svelte-typescript-unexpected-tokensvelteparse-error-when-adding-type-to-an-ev
+            // we need these 3 rules to be able to do:
+            // on:change=(e) => anyFunctionHere().
+            // when svelte is updated, we can remove these 5 rules for svelte files.
+            rules: {
+                "@typescript-eslint/no-explicit-any": "off",
+                "@typescript-eslint/no-implicit-any": "off",
+                "@typescript-eslint/no-unsafe-assignment": "off",
+                "@typescript-eslint/no-unsafe-member-access": "off",
+                "@typescript-eslint/no-unsafe-argument": "off",
+                "@typescript-eslint/no-unsafe-call": "off",
+                "@typescript-eslint/restrict-template-expressions": [
+                    "warn",
+                    {
+                        allowNumber: true,
+                        allowBoolean: true,
+                        allowNullish: true,
+                        allowAny: true,
+                    },
+                ],
+            },
+        },
+        {
+            files: ["*.spec.ts"],
+            plugins: ["jest"],
+            rules: {
+                "@typescript-eslint/no-explicit-any": "off",
+                "@typescript-eslint/no-empty-function": "off",
+                "@typescript-eslint/no-unused-vars": "off",
+                "@typescript-eslint/no-unsafe-assignment": "off",
+                "@typescript-eslint/unbound-method": "off",
+                "jest/unbound-method": "error",
+            },
+        },
+    ],
+};

packages/status-page/.gitignore

@@ -0,0 +1,30 @@
+# Logs
+logs
+*.log
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+pnpm-debug.log*
+lerna-debug.log*
+
+node_modules
+dist
+dist-ssr
+*.local
+
+# Editor directories and files
+.vscode/*
+!.vscode/extensions.json
+.idea
+.DS_Store
+*.suo
+*.ntvs*
+*.njsproj
+*.sln
+*.sw?
+.env
+.a1.env
+.s.env
+
+# vite
+vite.config.ts.timestamp-*.mjs

packages/status-page/README.md

@@ -0,0 +1,9 @@
+# Status Page
+
+## Installation
+
+`pnpm install`
+
+## Usage
+
+`pnpm start`

packages/status-page/index.html

@@ -0,0 +1,20 @@
+<!DOCTYPE html>
+<html data-theme="dark" lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <link rel="icon" type="image/png" href="./taiko-favicon.png" />
+    <link rel="preconnect" href="https://fonts.googleapis.com" />
+    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
+    <link
+      href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;700&display=swap"
+      rel="stylesheet"
+    />
+
+    <title>Taiko Status</title>
+  </head>
+  <body>
+    <div id="app"></div>
+    <script type="module" src="/src/main.ts"></script>
+  </body>
+</html>

packages/status-page/jest.config.js

@@ -0,0 +1,55 @@
+/** @type {import('@ts-jest/dist/types').InitialOptionsTsJest} */
+export default {
+    transform: {
+        "^.+\\.js$": "babel-jest",
+        "^.+\\.ts$": "ts-jest",
+        "^.+\\.svelte$": [
+            "svelte-jester",
+            {
+                preprocess: true,
+            },
+        ],
+    },
+    globals: {
+        'ts-jest': {
+            diagnostics: {
+              ignoreCodes: [1343]
+            },
+            astTransformers: {
+              before: [
+                {
+                    path: 'node_modules/ts-jest-mock-import-meta',
+                }
+              ],
+            }
+          }
+      }, 
+    transformIgnorePatterns: ["node_modules/(?!(svelte-i18n)/)"],
+    moduleFileExtensions: ["ts", "js", "svelte", "json"],
+    collectCoverage: true,
+    coverageDirectory: "coverage",
+    coverageReporters: [
+        "lcov",
+        "text",
+        "cobertura",
+        "json-summary",
+        "json",
+        "text-summary",
+        "json",
+    ],
+    coverageThreshold: {
+        global: {
+            statements: 98.36,
+            branches: 79,
+            functions: 96,
+            lines: 100,
+        },
+    },
+    modulePathIgnorePatterns: ["<rootDir>/public/build/"],
+    preset: "ts-jest",
+    testEnvironment: "jsdom",
+    testPathIgnorePatterns: ["<rootDir>/node_modules/"],
+    coveragePathIgnorePatterns: ["<rootDir>/src/components/"],
+    testTimeout: 40 * 1000,
+    watchPathIgnorePatterns: ["node_modules"],
+};

packages/status-page/package.json

@@ -0,0 +1,75 @@
+{
+  "name": "@taiko/status-page",
+  "version": "0.0.0",
+  "private": true,
+  "type": "module",
+  "scripts": {
+    "start": "pnpm run dev",
+    "dev": "vite",
+    "build": "vite build",
+    "preview": "vite preview",
+    "check": "svelte-check --tsconfig ./tsconfig.json",
+    "test": "pnpm exec jest",
+    "prettier": "pnpm exec prettier '**/*.{ts,svelte}'",
+    "prettier:write": "pnpm run prettier -- --write",
+    "prettier:check": "pnpm run prettier -- --check",
+    "svelte:check": "npx svelte-check --ignore test-app",
+    "lint": "pnpm exec eslint './**/*.{ts,svelte}' --ignore-path .eslintignore",
+    "lint:fix": "pnpm exec eslint --fix './**/*.{ts,svelte}' --ignore-path .eslintignore"
+  },
+  "devDependencies": {
+    "@babel/preset-env": "^7.16.0",
+    "@sveltejs/vite-plugin-svelte": "^1.0.1",
+    "@tsconfig/svelte": "^3.0.0",
+    "@types/eslint": "^8.2.1",
+    "@types/estree": "^0.0.50",
+    "@types/jest": "^27.0.2",
+    "@types/mixpanel": "^2.14.3",
+    "@types/sanitize-html": "^2.6.2",
+    "@typescript-eslint/eslint-plugin": "^5.16.0",
+    "@typescript-eslint/parser": "^5.16.0",
+    "@zerodevx/svelte-toast": "^0.6.3",
+    "autoprefixer": "^10.4.13",
+    "babel-jest": "^27.3.1",
+    "babel-plugin-transform-es2015-modules-commonjs": "^6.26.2",
+    "daisyui": "1.16.6",
+    "jest": "^27.5.1",
+    "node-sass": "^7.0.1",
+    "postcss": "^8.4.19",
+    "postcss-cli": "^7.1.2",
+    "postcss-loader": "^6.2.0",
+    "prettier": "2.7.1",
+    "rollup-plugin-node-builtins": "^2.0.0",
+    "rollup-plugin-polyfill-node": "^0.10.2",
+    "svelte": "^3.53.1",
+    "svelte-check": "^2.8.0",
+    "svelte-heros-v2": "^0.3.10",
+    "svelte-jester": "^2.1.5",
+    "svelte-loader": "^3.1.2",
+    "svelte-preprocess": "^4.10.7",
+    "tailwindcss": "^3.2.4",
+    "theme-change": "^2.2.0",
+    "ts-jest": "^27.0.7",
+    "ts-jest-mock-import-meta": "^0.12.0",
+    "ts-loader": "^9.2.6",
+    "tslib": "^2.4.0",
+    "typescript": "^4.6.4",
+    "vite": "^3.0.0",
+    "vite-plugin-static-copy": "^0.12.0"
+  },
+  "dependencies": {
+    "@coinbase/wallet-sdk": "^3.6.3",
+    "@ethersproject/experimental": "^5.7.0",
+    "@lottiefiles/svelte-lottie-player": "^0.2.0",
+    "@sveltestack/svelte-query": "^1.6.0",
+    "@wagmi/connectors": "^0.1.1",
+    "@wagmi/core": "^0.8.0",
+    "axios": "^1.2.0",
+    "buffer": "^6.0.3",
+    "ethers": "^5.7.1",
+    "extend-expect": "link:@testing-library/jest-dom/extend-expect",
+    "identicon.js": "^2.3.3",
+    "svelte-i18n": "^3.5.1",
+    "svelte-spa-router": "^3.2.0"
+  }
+}

packages/status-page/postcss.config.cjs

@@ -0,0 +1,6 @@
+module.exports = {
+  plugins: {
+    tailwindcss: {},
+    autoprefixer: {},
+  }
+}

packages/status-page/src/App.svelte

@@ -0,0 +1,66 @@
+<script lang="ts">
+  import { wrap } from "svelte-spa-router/wrap";
+  import QueryProvider from "./components/providers/QueryProvider.svelte";
+  import Router from "svelte-spa-router";
+  import Home from "./pages/home/Home.svelte";
+  import { setupI18n } from "./i18n";
+  import Navbar from "./components/Navbar.svelte";
+  import { ethers } from "ethers";
+  setupI18n({ withLocale: "en" });
+
+  const l1Provider = new ethers.providers.JsonRpcProvider(
+    import.meta.env.VITE_L1_RPC_URL
+  );
+  const l2Provider = new ethers.providers.JsonRpcProvider(
+    import.meta.env.VITE_L2_RPC_URL
+  );
+  const l2BootnodeProvider = new ethers.providers.JsonRpcProvider(
+    import.meta.env.VITE_L2_BOOTNODE_URL
+  );
+
+  const routes = {
+    "/": wrap({
+      component: Home,
+      props: {
+        l1Provider: l1Provider,
+        l1TaikoAddress: import.meta.env.VITE_TAIKO_L1_ADDRESS,
+        l2Provider: l2Provider,
+        l2TaikoAddress: import.meta.env.VITE_TAIKO_L2_ADDRESS,
+        l2BootnodeProvider: l2BootnodeProvider,
+        isTokenomicsEnabled: import.meta.env.VITE_TOKENOMICS_ENABLED,
+        l1ExplorerUrl: import.meta.env.VITE_L1_EXPLORER_URL,
+        l2ExplorerUrl: import.meta.env.VITE_L2_EXPLORER_URL,
+      },
+      userData: {},
+    }),
+  };
+</script>
+
+<QueryProvider>
+  <main>
+    <Navbar />
+    <Router {routes} />
+  </main>
+</QueryProvider>
+
+<style global lang="postcss">
+  @tailwind base;
+  @tailwind components;
+  @tailwind utilities;
+
+  main {
+    font-family: "Inter", sans-serif;
+  }
+
+  .green {
+    color: #7cfc00;
+  }
+
+  .red {
+    color: #ff9494;
+  }
+
+  .yellow {
+    color: #eed202;
+  }
+</style>