feat(ui): Template / initial repo for UI

.github/workflows/typescript.yml

@@ -0,0 +1,55 @@
+name: UI
+
+on:
+  push:
+    branches: [main]
+    paths:
+      - "packages/ui/**"
+  pull_request:
+    paths:
+      - "packages/ui/**"
+
+jobs:
+  build:
+    runs-on: ubuntu-latest
+    steps:
+      - name: Cancel Previous Runs
+        uses: styfle/cancel-workflow-action@0.11.0
+        with:
+          access_token: ${{ github.token }}
+
+      - uses: actions/checkout@v3
+      - uses: actions/setup-node@v3
+        with:
+          node-version: "16.15"
+
+      - uses: pnpm/action-setup@v2
+        name: Install pnpm
+        id: pnpm-install
+        with:
+          version: 7
+          run_install: false
+
+      - name: Get pnpm store directory
+        id: pnpm-cache
+        shell: bash
+        run: |
+          echo "STORE_PATH=$(pnpm store path)" >> $GITHUB_OUTPUT
+
+      - uses: actions/cache@v3
+        name: Setup pnpm cache
+        with:
+          path: ${{ steps.pnpm-cache.outputs.STORE_PATH }}
+          key: ${{ runner.os }}-pnpm-store-${{ hashFiles('**/pnpm-lock.yaml') }}
+          restore-keys: |
+            ${{ runner.os }}-pnpm-store-
+
+      - name: ui - Unit Tests
+        working-directory: ./packages/ui
+        run: pnpm install && pnpm run test
+
+      - name: ui - Upload coverage to Codecov
+        uses: codecov/codecov-action@v3
+        with:
+          directory: ./packages/ui/coverage
+          flags: ui

.husky/pre-commit

@@ -1,4 +1,4 @@
 #!/usr/bin/env sh
 . "$(dirname -- "$0")/_/husky.sh"
 
-pnpm --filter "@taiko/proto" lint-staged
+pnpm --filter "@taiko/proto" lint-staged

README.md

@@ -6,6 +6,9 @@
 [![Golang](https://github.com/taikoxyz/taiko-mono/actions/workflows/golang.yml/badge.svg)](https://github.com/taikoxyz/taiko-mono/actions/workflows/golang.yml)
 [![Relayer](https://codecov.io/gh/taikoxyz/taiko-mono/branch/main/graph/badge.svg?token=E468X2PTJC&flag=relayer)](https://codecov.io/gh/taikoxyz/taiko-mono)
 
+[![Typescript](https://github.com/taikoxyz/taiko-mono/actions/workflows/golang.yml/badge.svg)](https://github.com/taikoxyz/taiko-mono/actions/workflows/typescript.yml)
+[![Bridge UI](https://codecov.io/gh/taikoxyz/taiko-mono/branch/main/graph/badge.svg?token=E468X2PTJC&flag=ui)](https://codecov.io/gh/taikoxyz/taiko-mono)
+
 <!-- PROJECT LOGO -->
 <br />
 <div align="center">

codecov.yml

@@ -17,6 +17,9 @@ flag_management:
     - name: relayer
       paths:
         - packages/relayer/**/*
+    - name: ui
+      paths:
+        - packages/ui/**/*
 
 comment:
   show_carryforward_flags: true

packages/ui/.babelrc

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

packages/ui/.default.env

@@ -0,0 +1,5 @@
+VITE_NODE_ENV=dev
+VITE_L1_RPC_URL=""
+VITE_L2_RPC_URL=""
+VITE_L1_BRIDGE_ADDRESS=0xa566811E9E63e4F573Df89d5453bB89F239F7e10
+VITE_L2_BRIDGE_ADDRESS=0xa566811E9E63e4F573Df89d5453bB89F239F7e10

packages/ui/.eslintignore

@@ -0,0 +1,9 @@
+build
+coverage
+node_modules
+gme-provider
+example
+LICENSES
+messages
+public
+test-app

packages/ui/.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", "gme-provider"], // 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/ui/.gitignore

@@ -0,0 +1,25 @@
+# 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

packages/ui/README.md

@@ -0,0 +1,48 @@
+# Svelte + TS + Vite
+
+This template should help get you started developing with Svelte and TypeScript in Vite.
+
+## Recommended IDE Setup
+
+[VS Code](https://code.visualstudio.com/) + [Svelte](https://marketplace.visualstudio.com/items?itemName=svelte.svelte-vscode).
+
+## Need an official Svelte framework?
+
+Check out [SvelteKit](https://github.com/sveltejs/kit#readme), which is also powered by Vite. Deploy anywhere with its serverless-first approach and adapt to various platforms, with out of the box support for TypeScript, SCSS, and Less, and easily-added support for mdsvex, GraphQL, PostCSS, Tailwind CSS, and more.
+
+## Technical considerations
+
+**Why use this over SvelteKit?**
+
+- It brings its own routing solution which might not be preferable for some users.
+- It is first and foremost a framework that just happens to use Vite under the hood, not a Vite app.
+  `vite dev` and `vite build` wouldn't work in a SvelteKit environment, for example.
+
+This template contains as little as possible to get started with Vite + TypeScript + Svelte, while taking into account the developer experience with regards to HMR and intellisense. It demonstrates capabilities on par with the other `create-vite` templates and is a good starting point for beginners dipping their toes into a Vite + Svelte project.
+
+Should you later need the extended capabilities and extensibility provided by SvelteKit, the template has been structured similarly to SvelteKit so that it is easy to migrate.
+
+**Why `global.d.ts` instead of `compilerOptions.types` inside `jsconfig.json` or `tsconfig.json`?**
+
+Setting `compilerOptions.types` shuts out all other types not explicitly listed in the configuration. Using triple-slash references keeps the default TypeScript setting of accepting type information from the entire workspace, while also adding `svelte` and `vite/client` type information.
+
+**Why include `.vscode/extensions.json`?**
+
+Other templates indirectly recommend extensions via the README, but this file allows VS Code to prompt the user to install the recommended extension upon opening the project.
+
+**Why enable `allowJs` in the TS template?**
+
+While `allowJs: false` would indeed prevent the use of `.js` files in the project, it does not prevent the use of JavaScript syntax in `.svelte` files. In addition, it would force `checkJs: false`, bringing the worst of both worlds: not being able to guarantee the entire codebase is TypeScript, and also having worse typechecking for the existing JavaScript. In addition, there are valid use cases in which a mixed codebase may be relevant.
+
+**Why is HMR not preserving my local component state?**
+
+HMR state preservation comes with a number of gotchas! It has been disabled by default in both `svelte-hmr` and `@sveltejs/vite-plugin-svelte` due to its often surprising behavior. You can read the details [here](https://github.com/rixo/svelte-hmr#svelte-hmr).
+
+If you have state that's important to retain within a component, consider creating an external store which would not be replaced by HMR.
+
+```ts
+// store.ts
+// An extremely simple external store
+import { writable } from 'svelte/store'
+export default writable(0)
+```

packages/ui/index.html

@@ -0,0 +1,13 @@
+<!DOCTYPE html>
+<html data-theme="dark" lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <link rel="icon" type="image/svg+xml" href="/vite.svg" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>BridgeP</title>
+  </head>
+  <body>
+    <div id="app"></div>
+    <script type="module" src="/src/main.ts"></script>
+  </body>
+</html>

packages/ui/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"],
+    setupFilesAfterEnv: ["@testing-library/jest-dom/extend-expect"],
+    collectCoverage: true,
+    coverageDirectory: "coverage",
+    coverageReporters: [
+        "lcov",
+        "text",
+        "cobertura",
+        "json-summary",
+        "json",
+        "text-summary",
+        "json",
+    ],
+    coverageThreshold: {
+        global: {
+            statements: 100,
+            branches: 100,
+            functions: 100,
+            lines: 100,
+        },
+    },
+    modulePathIgnorePatterns: ["<rootDir>/public/build/"],
+    preset: "ts-jest",
+    testEnvironment: "jsdom",
+    testPathIgnorePatterns: ["<rootDir>/node_modules/"],
+    testTimeout: 40 * 1000,
+    watchPathIgnorePatterns: ["node_modules"],
+};