feat(bridge-ui): add a starter dapp so we can make future small dapps…

… easily (#13223)
taikoxyz · Feb 28, 2023 · 0680654 · 0680654
1 parent 6e8cb82
commit 0680654
Show file tree

Hide file tree

Showing 68 changed files with 2,486 additions and 28 deletions.
diff --git a/packages/starter-dapp/.babelrc b/packages/starter-dapp/.babelrc
@@ -0,0 +1,8 @@
+{
+    "presets": [["@babel/preset-env", {"targets": {"node": "current"}}]],
+    "env": {
+      "test": {
+        "plugins": ["transform-es2015-modules-commonjs"]
+      }
+  }
+  }
diff --git a/packages/starter-dapp/.default.env b/packages/starter-dapp/.default.env
@@ -0,0 +1,8 @@
+VITE_NODE_ENV=dev
+VITE_L1_RPC_URL=""
+VITE_L2_RPC_URL=""
+VITE_MAINNET_CHAIN_ID=
+VITE_TAIKO_CHAIN_ID=
+VITE_MAINNET_CHAIN_NAME=
+VITE_TAIKO_CHAIN_NAME=
+VITE_APP_NAME=Starter
diff --git a/packages/starter-dapp/.eslintignore b/packages/starter-dapp/.eslintignore
@@ -0,0 +1,6 @@
+build
+coverage
+node_modules
+example
+LICENSES
+public
diff --git a/packages/starter-dapp/.eslintrc.cjs b/packages/starter-dapp/.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",
+            },
+        },
+    ],
+};
diff --git a/packages/starter-dapp/.gitignore b/packages/starter-dapp/.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
diff --git a/packages/starter-dapp/README.md b/packages/starter-dapp/README.md
@@ -0,0 +1,30 @@
+# Starter dapp
+
+## Installation
+
+`pnpm install`
+
+## Usage
+
+`pnpm start`
+
+## Environment Variables
+
+You can use the following values in the `.env` file to spin up the Bridge UI locally.
+
+```
+VITE_NODE_ENV=dev
+VITE_L1_RPC_URL="https://l1rpc.internal.taiko.xyz/"
+VITE_L2_RPC_URL="https://l2rpc.internal.taiko.xyz/"
+VITE_L1_EXPLORER_URL="https://l1explorer.internal.taiko.xyz/"
+VITE_L2_EXPLORER_URL="https://l2explorer.internal.taiko.xyz/"
+VITE_MAINNET_CHAIN_ID=31336
+VITE_TAIKO_CHAIN_ID=167001
+VITE_MAINNET_CHAIN_NAME="Ethereum A2"
+VITE_TAIKO_CHAIN_NAME="Taiko A2"
+VITE_APP_NAME="Starter"
+```
+
+## Purpose
+
+A starter dapp set up ready to go to make frontends in Svelte for the Taiko network.
diff --git a/packages/starter-dapp/index.html b/packages/starter-dapp/index.html
@@ -0,0 +1,31 @@
+<!DOCTYPE html>
+<html 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>Bridge</title>
+  </head>
+  <body>
+    <div id="app"></div>
+    <script type="module" src="/src/main.ts"></script>
+  </body>
+
+  <script>
+    // On page load or when changing themes, best to add inline in `head` to avoid FOUC
+    if (localStorage.getItem('theme') === 'dark' || (!('theme' in localStorage) && window.matchMedia('(prefers-color-scheme: dark)').matches)) {
+      document.documentElement.setAttribute("data-theme", "dark")
+      localStorage.setItem('theme', 'dark');
+    } else {
+      document.documentElement.setAttribute("data-theme", "light")
+      localStorage.setItem('theme', 'light');
+    }
+  </script>
+</html>
diff --git a/packages/starter-dapp/jest.config.js b/packages/starter-dapp/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: 95,
+            branches: 72,
+            functions: 89,
+            lines: 95,
+        },
+    },
+    modulePathIgnorePatterns: ["<rootDir>/public/build/"],
+    preset: "ts-jest",
+    testEnvironment: "jsdom",
+    testPathIgnorePatterns: ["<rootDir>/node_modules/"],
+    coveragePathIgnorePatterns: ["<rootDir>/src/components/"],
+    testTimeout: 40 * 1000,
+    watchPathIgnorePatterns: ["node_modules"],
+};
diff --git a/packages/starter-dapp/package.json b/packages/starter-dapp/package.json
@@ -0,0 +1,74 @@
+{
+  "name": "@taiko/starter-dapp",
+  "version": "0.1.2",
+  "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",
+    "identicon.js": "^2.3.3",
+    "svelte-i18n": "^3.5.1",
+    "svelte-spa-router": "^3.2.0"
+  }
+}
diff --git a/packages/starter-dapp/postcss.config.cjs b/packages/starter-dapp/postcss.config.cjs
@@ -0,0 +1,6 @@
+module.exports = {
+  plugins: {
+    tailwindcss: {},
+    autoprefixer: {},
+  }
+}
diff --git a/packages/starter-dapp/public/taiko-favicon.png b/packages/starter-dapp/public/taiko-favicon.png