feat(bridge-ui-v2): initial setup v2 (#14013)

.github/workflows/bridge-ui-v2.yml

@@ -0,0 +1,45 @@
+name: Bridge UI v2
+
+on:
+  push:
+    branches: [main]
+    paths:
+      - "packages/bridge-ui-v2/**"
+  pull_request:
+    paths:
+      - "packages/bridge-ui-v2/**"
+
+jobs:
+  build:
+    runs-on: ubuntu-latest
+    steps:
+      - name: Cancel previous runs
+        uses: styfle/cancel-workflow-action@0.11.0
+        with:
+          access_token: ${{ github.token }}
+
+      - name: Checkout repository
+        uses: actions/checkout@v3
+
+      - name: Install pnpm dependencies
+        uses: ./.github/actions/install-pnpm-dependencies
+
+      - name: Svelte check
+        working-directory: ./packages/bridge-ui-v2
+        run: pnpm svelte:check
+
+      - name: Linting
+        working-directory: ./packages/bridge-ui-v2
+        run: pnpm lint
+
+      - name: Unit tests
+        working-directory: ./packages/bridge-ui-v2
+        run: pnpm test:unit
+
+      # TODO: Playwright tests?
+
+      - name: Upload coverage to Codecov
+        uses: codecov/codecov-action@v3
+        with:
+          directory: ./packages/bridge-ui-v2/coverage
+          flags: bridge-ui

.github/workflows/lint-pr.yml

@@ -20,6 +20,7 @@ jobs:
             repo
             branding
             bridge-ui
+            bridge-ui-v2
             deps
             eventindexer
             fork-diff

.gitignore

@@ -112,9 +112,6 @@ __pycache__/
 # whitepaper
 .pdf
 
-# Ignoring new Bridge UI work for the moment
-packages/bridge-ui-v2
-
 # Ignore .husky for new contributors using lefthook while maintaining
 # backwards compatibility for past contributors
 .husky

.release-please-manifest.json

@@ -2,6 +2,7 @@
   ".": "0.14.0",
   "packages/branding": "0.1.2",
   "packages/bridge-ui": "0.8.0",
+  "packages/bridge-ui-v2": "2.0.0",
   "packages/eventindexer": "0.6.0",
   "packages/fork-diff": "0.2.0",
   "packages/protocol": "0.9.0",

packages/bridge-ui-v2/.editorconfig

@@ -0,0 +1,10 @@
+root=true
+
+[*]
+end_of_line = lf
+insert_final_newline = true
+
+[*.{js,cjs,ts,svelte,css,json,yml,yaml}]
+charset = utf-8
+indent_style = space
+indent_size = 2

packages/bridge-ui-v2/.eslintignore

@@ -0,0 +1,13 @@
+.DS_Store
+node_modules
+/build
+/.svelte-kit
+/package
+.env
+.env.*
+!.env.example
+
+# Ignore files for PNPM, NPM and YARN
+pnpm-lock.yaml
+package-lock.json
+yarn.lock

packages/bridge-ui-v2/.eslintrc.cjs

@@ -0,0 +1,25 @@
+module.exports = {
+  root: true,
+  extends: ['eslint:recommended', 'plugin:@typescript-eslint/recommended', 'plugin:svelte/recommended', 'prettier'],
+  parser: '@typescript-eslint/parser',
+  plugins: ['@typescript-eslint'],
+  parserOptions: {
+    sourceType: 'module',
+    ecmaVersion: 2020,
+    extraFileExtensions: ['.svelte'],
+  },
+  env: {
+    browser: true,
+    es2017: true,
+    node: true,
+  },
+  overrides: [
+    {
+      files: ['*.svelte'],
+      parser: 'svelte-eslint-parser',
+      parserOptions: {
+        parser: '@typescript-eslint/parser',
+      },
+    },
+  ],
+};

packages/bridge-ui-v2/.gitignore

@@ -0,0 +1,10 @@
+.DS_Store
+node_modules
+/build
+/.svelte-kit
+/package
+.env
+.env.*
+!.env.example
+vite.config.js.timestamp-*
+vite.config.ts.timestamp-*

packages/bridge-ui-v2/.npmrc

@@ -0,0 +1,2 @@
+engine-strict=true
+resolution-mode=highest

packages/bridge-ui-v2/.prettierignore

@@ -0,0 +1,13 @@
+.DS_Store
+node_modules
+/build
+/.svelte-kit
+/package
+.env
+.env.*
+!.env.example
+
+# Ignore files for PNPM, NPM and YARN
+pnpm-lock.yaml
+package-lock.json
+yarn.lock

packages/bridge-ui-v2/.prettierrc

@@ -0,0 +1,12 @@
+{
+  "semi": true,
+  "tabWidth": 2,
+  "printWidth": 120,
+  "singleQuote": true,
+  "trailingComma": "all",
+  "bracketSameLine": true,
+
+  "plugins": ["prettier-plugin-svelte"],
+  "pluginSearchDirs": ["."],
+  "overrides": [{ "files": "*.svelte", "options": { "parser": "svelte" } }]
+}

packages/bridge-ui-v2/README.md

@@ -0,0 +1,38 @@
+# create-svelte
+
+Everything you need to build a Svelte project, powered by [`create-svelte`](https://github.com/sveltejs/kit/tree/master/packages/create-svelte).
+
+## Creating a project
+
+If you're seeing this, you've probably already done this step. Congrats!
+
+```bash
+# create a new project in the current directory
+npm create svelte@latest
+
+# create a new project in my-app
+npm create svelte@latest my-app
+```
+
+## Developing
+
+Once you've created a project and installed dependencies with `npm install` (or `pnpm install` or `yarn`), start a development server:
+
+```bash
+npm run dev
+
+# or start the server and open the app in a new browser tab
+npm run dev -- --open
+```
+
+## Building
+
+To create a production version of your app:
+
+```bash
+npm run build
+```
+
+You can preview the production build with `npm run preview`.
+
+> To deploy your app, you may need to install an [adapter](https://kit.svelte.dev/docs/adapters) for your target environment.

packages/bridge-ui-v2/package.json

@@ -0,0 +1,48 @@
+{
+  "name": "bridge-ui-v2",
+  "version": "2.0.0",
+  "private": true,
+  "scripts": {
+    "dev": "vite dev",
+    "build": "vite build",
+    "preview": "vite preview",
+    "test:pw": "playwright test",
+    "test:unit": "vitest run",
+    "test:unit:coverage": "vitest run --coverage",
+    "test:unit:watch": "vitest",
+    "svelte:check": "svelte-kit sync && svelte-check --tsconfig ./tsconfig.json",
+    "svelte:check:watch": "svelte-kit sync && svelte-check --tsconfig ./tsconfig.json --watch",
+    "format": "prettier --plugin-search-dir . --write .",
+    "lint": "prettier --plugin-search-dir . --check . && eslint .",
+    "lint:fix": "pnpm format && eslint . --fix"
+  },
+  "devDependencies": {
+    "@playwright/test": "^1.28.1",
+    "@sveltejs/adapter-auto": "^2.0.0",
+    "@sveltejs/kit": "^1.5.0",
+    "@typescript-eslint/eslint-plugin": "^5.45.0",
+    "@typescript-eslint/parser": "^5.45.0",
+    "autoprefixer": "^10.4.14",
+    "daisyui": "3.1.1",
+    "eslint": "^8.28.0",
+    "eslint-config-prettier": "^8.5.0",
+    "eslint-plugin-svelte": "^2.26.0",
+    "postcss": "^8.4.24",
+    "prettier": "^2.8.0",
+    "prettier-plugin-svelte": "^2.8.1",
+    "svelte": "^3.54.0",
+    "svelte-check": "^3.0.1",
+    "tailwindcss": "^3.3.2",
+    "tslib": "^2.4.1",
+    "typescript": "^5.0.0",
+    "vite": "^4.3.0",
+    "vitest": "^0.32.2"
+  },
+  "type": "module",
+  "dependencies": {
+    "@wagmi/core": "^1.2.0",
+    "@web3modal/ethereum": "^2.4.7",
+    "@web3modal/html": "^2.4.7",
+    "viem": "^1.0.7"
+  }
+}

packages/bridge-ui-v2/playwright.config.ts

@@ -0,0 +1,12 @@
+import type { PlaywrightTestConfig } from '@playwright/test';
+
+const config: PlaywrightTestConfig = {
+  webServer: {
+    command: 'npm run build && npm run preview',
+    port: 4173,
+  },
+  testDir: 'tests',
+  testMatch: /(.+\.)?(test|spec)\.[jt]s/,
+};
+
+export default config;

packages/bridge-ui-v2/postcss.config.js

@@ -0,0 +1,6 @@
+export default {
+  plugins: {
+    tailwindcss: {},
+    autoprefixer: {},
+  },
+};

packages/bridge-ui-v2/src/app.css

@@ -0,0 +1,4 @@
+@import './styles/base.css';
+@import './styles/components.css';
+@import './styles/utilities.css';
+@import './styles/override.css';

packages/bridge-ui-v2/src/app.d.ts

@@ -0,0 +1,12 @@
+// See https://kit.svelte.dev/docs/types#app
+// for information about these interfaces
+declare global {
+  namespace App {
+    // interface Error {}
+    // interface Locals {}
+    // interface PageData {}
+    // interface Platform {}
+  }
+}
+
+export {};

packages/bridge-ui-v2/src/app.html

@@ -0,0 +1,12 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="utf-8" />
+    <link rel="icon" href="%sveltekit.assets%/taiko-favicon.svg" />
+    <meta name="viewport" content="width=device-width" />
+    %sveltekit.head%
+  </head>
+  <body data-sveltekit-preload-data="hover">
+    <div style="display: contents">%sveltekit.body%</div>
+  </body>
+</html>

packages/bridge-ui-v2/src/index.test.ts

@@ -0,0 +1,7 @@
+import { describe, it, expect } from 'vitest';
+
+describe('sum test', () => {
+  it('adds 1 + 2 to equal 3', () => {
+    expect(1 + 2).toBe(3);
+  });
+});

packages/bridge-ui-v2/src/routes/+layout.svelte

@@ -0,0 +1,11 @@
+<script lang="ts">
+  import '../app.css';
+</script>
+
+<div class="container">
+  <header />
+  <main>
+    <slot />
+  </main>
+  <footer />
+</div>

packages/bridge-ui-v2/src/routes/+layout.ts

@@ -0,0 +1,7 @@
+/**
+ * Entry point
+ */
+
+// Setting this to false turns your app into an SPA
+// See https://kit.svelte.dev/docs/page-options#ssr
+export const ssr = false;

packages/bridge-ui-v2/src/routes/+page.svelte

@@ -0,0 +1 @@
+<h1>Welcome to Bridge UI v2</h1>

packages/bridge-ui-v2/src/styles/base.css

@@ -0,0 +1 @@
+@tailwind base;

packages/bridge-ui-v2/src/styles/components.css

@@ -0,0 +1 @@
+@tailwind components;

packages/bridge-ui-v2/src/styles/override.css

@@ -0,0 +1 @@
+/* Overrides styles */

packages/bridge-ui-v2/src/styles/utilities.css

@@ -0,0 +1 @@
+@tailwind utilities;

packages/bridge-ui-v2/svelte.config.js

@@ -0,0 +1,18 @@
+import adapter from '@sveltejs/adapter-auto';
+import { vitePreprocess } from '@sveltejs/kit/vite';
+
+/** @type {import('@sveltejs/kit').Config} */
+const config = {
+  // Consult https://kit.svelte.dev/docs/integrations#preprocessors
+  // for more information about preprocessors
+  preprocess: vitePreprocess(),
+
+  kit: {
+    // adapter-auto only supports some environments, see https://kit.svelte.dev/docs/adapter-auto for a list.
+    // If your environment is not supported or you settled on a specific environment, switch out the adapter.
+    // See https://kit.svelte.dev/docs/adapters for more information about adapters.
+    adapter: adapter(),
+  },
+};
+
+export default config;

packages/bridge-ui-v2/tailwind.config.js

@@ -0,0 +1,10 @@
+import daisyuiPlugin from 'daisyui';
+
+/** @type {import('tailwindcss').Config} */
+export default {
+  content: ['./src/**/*.{html,js,svelte,ts}'],
+  theme: {
+    extend: {},
+  },
+  plugins: [daisyuiPlugin],
+};

packages/bridge-ui-v2/tsconfig.json

@@ -0,0 +1,17 @@
+{
+  "extends": "./.svelte-kit/tsconfig.json",
+  "compilerOptions": {
+    "allowJs": true,
+    "checkJs": true,
+    "esModuleInterop": true,
+    "forceConsistentCasingInFileNames": true,
+    "resolveJsonModule": true,
+    "skipLibCheck": true,
+    "sourceMap": true,
+    "strict": true
+  }
+  // Path aliases are handled by https://kit.svelte.dev/docs/configuration#alias
+  //
+  // If you want to overwrite includes/excludes, make sure to copy over the relevant includes/excludes
+  // from the referenced tsconfig.json - TypeScript does not merge them in
+}