feat(taikoon): taikoon ui setup (#16854)

Co-authored-by: Daniel Wang <99078276+dantaik@users.noreply.github.com>

.github/workflows/taikoon-ui.yml

@@ -0,0 +1,38 @@
+name: Taikoon UI
+
+on:
+  push:
+    branches: [main]
+    paths:
+      - "packages/taikoon-ui/**"
+  pull_request:
+    paths:
+      - "packages/taikoon-ui/**"
+
+jobs:
+  build:
+    runs-on: [taiko-runner]
+    steps:
+      - name: Cancel previous runs
+        uses: styfle/cancel-workflow-action@0.12.1
+        with:
+          access_token: ${{ github.token }}
+
+      - name: Checkout repository
+        uses: actions/checkout@v4
+        with:
+          submodules: recursive
+
+      - name: Install pnpm dependencies
+        uses: ./.github/actions/install-pnpm-dependencies
+
+      - name: Check formatting
+        working-directory: ./packages/taikoon-ui
+        run: pnpm lint
+
+      - name: Frontend build
+        working-directory: ./packages/taikoon-ui
+        run: |
+          export PUBLIC_WALLETCONNECT_PROJECT_ID="fake_project_id"
+          export PUBLIC_IPFS_GATEWAY="https://ipfs.io/ipfs/"
+          pnpm build

packages/taikoon-ui/.env.example

@@ -0,0 +1,2 @@
+PUBLIC_WALLETCONNECT_PROJECT_ID=
+PUBLIC_IPFS_GATEWAY=

packages/taikoon-ui/.eslintignore

@@ -0,0 +1,20 @@
+.DS_Store
+node_modules
+coverage
+/build
+/.svelte-kit
+/package
+.env
+.env.*
+!.env.example
+
+# Generated files
+/src/abi/*
+CHANGELOG.md
+
+# Ignore files for PNPM, NPM and YARN
+pnpm-lock.yaml
+package-lock.json
+yarn.lock
+
+src/generated/*

packages/taikoon-ui/.eslintrc.cjs

@@ -0,0 +1,49 @@
+module.exports = {
+    root: true,
+    extends: [
+        'eslint:recommended',
+        'plugin:@typescript-eslint/recommended',
+        'plugin:svelte/recommended',
+        'prettier',
+    ],
+    parser: '@typescript-eslint/parser',
+    plugins: ['@typescript-eslint', 'simple-import-sort'],
+    rules: {
+        'linebreak-style': ['error', 'unix'],
+        'simple-import-sort/imports': 'error',
+        'simple-import-sort/exports': 'error',
+        'no-console': ['error', { allow: ['warn', 'error'] }],
+        'no-irregular-whitespace': 'off'
+    },
+    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',
+            },
+        },
+        {
+            files: ['*.ts', '*.svelte'],
+            rules: {
+                // TS will take care of this potential error. For more information please visit:
+                // https://typescript-eslint.io/linting/troubleshooting/#i-get-errors-from-the-no-undef-rule-about-global-variables-not-being-defined-even-though-there-are-no-typescript-errors
+                'no-undef': 'off',
+                '@typescript-eslint/ban-ts-comment': 'off',
+                '@typescript-eslint/no-explicit-any': 'off',
+
+
+            },
+        },
+    ],
+}

packages/taikoon-ui/.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/taikoon-ui/.prettierignore

@@ -0,0 +1,4 @@
+# Ignore files for PNPM, NPM and YARN
+pnpm-lock.yaml
+package-lock.json
+yarn.lock

packages/taikoon-ui/.prettierrc

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

packages/taikoon-ui/README.md

@@ -0,0 +1,58 @@
+# Frontend
+
+## Install
+
+```bash
+npm install
+```
+
+## Run
+
+Start the development server:
+
+```bash
+npm start
+```
+
+## Storybook
+
+Tool to develop UI components in isolation. Run the following command to start the storybook server:
+
+```bash
+npm run storybook
+```
+
+---
+
+## Status Tracker
+
+### Pages
+
+| Page          | Status | Notes |
+| ------------- | ------ | ----- |
+| Countdown     |        |       |
+| Landing       |        |       |
+| Mint          |        |       |
+| Auction       |        |       |
+| Explore       |        |       |
+| Your Taikoons |        |       |
+
+### Components
+
+| Component      | Status                | Notes |
+| -------------- | --------------------- | ----- |
+| Header         |                       |       |
+| Countdown      |                       |       |
+| NFT Renderer   |                       |       |
+| Background     |                       |       |
+| Landing Header | Design Ready          |       |
+| Landing Text   | Design Ready          |       |
+| Landing FAQ    | Design Ready          |       |
+| Landing Links  | Design Ready          |       |
+| Footer         | Design Ready          |       |
+| Mint Form      | Design Ready          |       |
+| Auction Form   | Design Ready          |       |
+| Card           | In Storybook          |       |
+| Button         | In Storybook          |       |
+| Text Input     | Implemented on Weblab |       |
+| Spinner        | In Storybook          |

packages/taikoon-ui/package.json

@@ -0,0 +1,72 @@
+{
+  "name": "taikoon-ui",
+  "version": "0.0.1",
+  "private": true,
+  "scripts": {
+    "dev": "vite dev",
+    "build": "vite build",
+    "preview": "vite preview",
+    "test": "npm run test:integration && npm run test:unit",
+    "check": "svelte-kit sync && svelte-check --tsconfig ./tsconfig.json",
+    "check:watch": "svelte-kit sync && svelte-check --tsconfig ./tsconfig.json --watch",
+    "lint": "prettier --check ./src && eslint ./src --fix",
+    "format": "prettier --write ./src",
+    "test:integration": "playwright test",
+    "test:unit": "vitest",
+    "start": "npm run generate:abi && vite dev --open",
+    "generate:abi": "cd ../taikoon && pnpm compile && cd - && wagmi generate"
+  },
+  "devDependencies": {
+    "@chromatic-com/storybook": "^1.3.1",
+    "@playwright/test": "^1.28.1",
+    "@sveltejs/adapter-auto": "^3.0.0",
+    "@sveltejs/kit": "^2.0.0",
+    "@sveltejs/vite-plugin-svelte": "^3.0.0",
+    "@types/eslint": "^8.56.0",
+    "@types/node": "^20.12.7",
+    "@typescript-eslint/eslint-plugin": "^7.0.0",
+    "@typescript-eslint/parser": "^7.0.0",
+    "convert-csv-to-json": "^2.44.0",
+    "eslint": "^8.56.0",
+    "eslint-config-prettier": "^9.1.0",
+    "eslint-plugin-simple-import-sort": "^12.0.0",
+    "eslint-plugin-storybook": "^0.8.0",
+    "eslint-plugin-svelte": "^2.35.1",
+    "p-map": "^7.0.2",
+    "prettier": "^3.1.1",
+    "prettier-plugin-svelte": "^3.1.2",
+    "raw-body": "^2.5.2",
+    "svelte": "^4.2.7",
+    "svelte-check": "^3.6.0",
+    "svelte-copy": "^1.4.2",
+    "svelte-i18n": "^4.0.0",
+    "svelte-scrolling": "^1.4.0",
+    "tailwindcss-image-rendering": "^1.0.2",
+    "tslib": "^2.4.1",
+    "typescript": "^5.0.0",
+    "vite": "^5.0.3",
+    "vite-tsconfig-paths": "^4.3.2",
+    "vitest": "^1.2.0",
+    "which": "^4.0.0"
+  },
+  "type": "module",
+  "dependencies": {
+    "@openzeppelin/merkle-tree": "^1.0.6",
+    "@wagmi/cli": "^2.1.4",
+    "@wagmi/connectors": "^4.1.18",
+    "@wagmi/core": "^2.6.9",
+    "@web3modal/common": "^4.1.1",
+    "@web3modal/ui": "^4.1.1",
+    "@web3modal/wagmi": "^4.1.1",
+    "@zerodevx/svelte-toast": "^0.9.5",
+    "autoprefixer": "^10.4.19",
+    "daisyui": "^4.10.1",
+    "dayjs": "^1.11.10",
+    "debug": "^4.3.4",
+    "minidenticons": "^4.2.1",
+    "postcss": "^8.4.38",
+    "svelte-countdown": "^1.1.2",
+    "tailwindcss": "^3.4.3",
+    "viem": "^2.9.26"
+  }
+}

packages/taikoon-ui/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/taikoon-ui/postcss.config.js

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

packages/taikoon-ui/src/app.config.ts

@@ -0,0 +1,62 @@
+export const recommendedProcessingFee = {
+  ethGasLimit: BigInt(900_000),
+  erc20NotDeployedGasLimit: BigInt(3_100_000),
+  erc20DeployedGasLimit: BigInt(1_100_000),
+  erc721NotDeployedGasLimit: BigInt(2_400_000),
+  erc721DeployedGasLimit: BigInt(1_100_000),
+  erc1155NotDeployedGasLimit: BigInt(2_600_000),
+  erc1155DeployedGasLimit: BigInt(1_100_000),
+};
+
+export const processingFeeComponent = {
+  closingDelayOptionClick: 300,
+  intervalComputeRecommendedFee: 20_000,
+};
+
+export const bridgeService = {
+  noOwnerGasLimit: BigInt(140_000),
+  noERC20TokenDeployedGasLimit: BigInt(3_000_000),
+  erc20GasLimitThreshold: BigInt(2_500_000),
+
+  noERC721TokenDeployedGasLimit: BigInt(2_400_000),
+  erc721GasLimitThreshold: BigInt(3_000_000),
+
+  noERC1155TokenDeployedGasLimit: BigInt(2_600_000),
+  erc1155GasLimitThreshold: BigInt(3_000_000),
+};
+
+export const pendingTransaction = {
+  waitTimeout: 300_000,
+};
+
+export const storageService = {
+  bridgeTxPrefix: 'transactions',
+  customTokenPrefix: 'custom-tokens',
+};
+
+export const bridgeTransactionPoller = {
+  interval: 20_000,
+};
+
+export const statusComponent = {
+  minimumEthToClaim: 0.0001,
+};
+
+export const transactionConfig = {
+  pageSizeDesktop: 6,
+  pageSizeMobile: 5,
+  blurTransitionTime: 300,
+};
+
+export const toastConfig = {
+  duration: 5000,
+};
+
+export const apiService = {
+  timeout: 5000,
+};
+
+export const ipfsConfig = {
+  gatewayTimeout: 200,
+  overallTimeout: 5000,
+};