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

Co-authored-by: Daniel Wang <[email protected]>

.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/[email protected]
+ 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,
+};