From be294c66764d658423d58902076594afdc470e96 Mon Sep 17 00:00:00 2001 From: Francisco Ramos Date: Thu, 22 Jun 2023 17:06:41 +0200 Subject: [PATCH] feat(bridge-ui-v2): tailwind config and other setups (#14016) Co-authored-by: dave | d1onys1us <13951458+d1onys1us@users.noreply.github.com> --- README.md | 1 + packages/bridge-ui-v2/.eslintrc.cjs | 16 +- packages/bridge-ui-v2/.prettierrc | 1 + packages/bridge-ui-v2/package.json | 2 + packages/bridge-ui-v2/src/app.d.ts | 4 + packages/bridge-ui-v2/src/app.html | 20 +- .../src/components/Button/Button.svelte | 57 +++++ .../src/components/Button/index.ts | 1 + .../src/components/Header/Header.svelte | 17 ++ .../src/components/Header/index.ts | 1 + .../src/components/Icon/Icon.svelte | 53 +++++ .../bridge-ui-v2/src/components/Icon/index.ts | 1 + .../components/LinkButton/LinkButton.svelte | 18 ++ .../src/components/LinkButton/index.ts | 1 + .../src/components/Logo/Logo.svelte | 11 + .../src/components/Logo/LogoWithText.svelte | 29 +++ .../bridge-ui-v2/src/components/Logo/index.ts | 2 + .../SideNavigation/SideNavigation.svelte | 63 +++++ .../src/components/SideNavigation/index.ts | 1 + packages/bridge-ui-v2/src/index.test.ts | 7 - .../src/libs/classNames/classNames.test.ts | 8 + .../src/libs/classNames/classNames.ts | 3 + .../bridge-ui-v2/src/libs/classNames/index.ts | 1 + .../bridge-ui-v2/src/routes/+layout.svelte | 12 +- packages/bridge-ui-v2/src/routes/+page.svelte | 2 +- .../src/routes/activities/+page.svelte | 1 + .../src/routes/faucet/+page.svelte | 1 + packages/bridge-ui-v2/src/styles/base.css | 11 + .../bridge-ui-v2/src/styles/components.css | 54 +++++ packages/bridge-ui-v2/tailwind.config.js | 218 +++++++++++++++++- packages/bridge-ui-v2/tsconfig.json | 10 +- packages/bridge-ui-v2/vite.config.ts | 1 + pnpm-lock.yaml | 175 ++++++++++---- 33 files changed, 735 insertions(+), 68 deletions(-) create mode 100644 packages/bridge-ui-v2/src/components/Button/Button.svelte create mode 100644 packages/bridge-ui-v2/src/components/Button/index.ts create mode 100644 packages/bridge-ui-v2/src/components/Header/Header.svelte create mode 100644 packages/bridge-ui-v2/src/components/Header/index.ts create mode 100644 packages/bridge-ui-v2/src/components/Icon/Icon.svelte create mode 100644 packages/bridge-ui-v2/src/components/Icon/index.ts create mode 100644 packages/bridge-ui-v2/src/components/LinkButton/LinkButton.svelte create mode 100644 packages/bridge-ui-v2/src/components/LinkButton/index.ts create mode 100644 packages/bridge-ui-v2/src/components/Logo/Logo.svelte create mode 100644 packages/bridge-ui-v2/src/components/Logo/LogoWithText.svelte create mode 100644 packages/bridge-ui-v2/src/components/Logo/index.ts create mode 100644 packages/bridge-ui-v2/src/components/SideNavigation/SideNavigation.svelte create mode 100644 packages/bridge-ui-v2/src/components/SideNavigation/index.ts delete mode 100644 packages/bridge-ui-v2/src/index.test.ts create mode 100644 packages/bridge-ui-v2/src/libs/classNames/classNames.test.ts create mode 100644 packages/bridge-ui-v2/src/libs/classNames/classNames.ts create mode 100644 packages/bridge-ui-v2/src/libs/classNames/index.ts create mode 100644 packages/bridge-ui-v2/src/routes/activities/+page.svelte create mode 100644 packages/bridge-ui-v2/src/routes/faucet/+page.svelte diff --git a/README.md b/README.md index 11f96da21c..a924a65f13 100644 --- a/README.md +++ b/README.md @@ -39,6 +39,7 @@ taiko-mono/ ├── packages │ ├── branding: Taiko branding materials. │ ├── bridge-ui: Taiko bridge frontend UI. +│ ├── bridge-ui-v2: Taiko bridge frontend UI v2 (🚧 under construction 🚧). │ ├── eventindexer: Event indexer. │ ├── fork-diff: Fork diff page (currently, for geth). │ ├── protocol: Taiko protocol and bridge smart contracts. diff --git a/packages/bridge-ui-v2/.eslintrc.cjs b/packages/bridge-ui-v2/.eslintrc.cjs index de411bb4fb..70d7556f37 100644 --- a/packages/bridge-ui-v2/.eslintrc.cjs +++ b/packages/bridge-ui-v2/.eslintrc.cjs @@ -2,7 +2,13 @@ module.exports = { root: true, extends: ['eslint:recommended', 'plugin:@typescript-eslint/recommended', 'plugin:svelte/recommended', 'prettier'], parser: '@typescript-eslint/parser', - plugins: ['@typescript-eslint'], + 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'] }], + }, parserOptions: { sourceType: 'module', ecmaVersion: 2020, @@ -21,5 +27,13 @@ module.exports = { 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', + }, + }, ], }; diff --git a/packages/bridge-ui-v2/.prettierrc b/packages/bridge-ui-v2/.prettierrc index e73c41e8ef..aa5a4f5d3d 100644 --- a/packages/bridge-ui-v2/.prettierrc +++ b/packages/bridge-ui-v2/.prettierrc @@ -1,6 +1,7 @@ { "semi": true, "tabWidth": 2, + "useTabs": false, "printWidth": 120, "singleQuote": true, "trailingComma": "all", diff --git a/packages/bridge-ui-v2/package.json b/packages/bridge-ui-v2/package.json index 86fb84c8c2..b7bd0e1e90 100644 --- a/packages/bridge-ui-v2/package.json +++ b/packages/bridge-ui-v2/package.json @@ -26,6 +26,7 @@ "daisyui": "3.1.1", "eslint": "^8.28.0", "eslint-config-prettier": "^8.5.0", + "eslint-plugin-simple-import-sort": "^10.0.0", "eslint-plugin-svelte": "^2.26.0", "postcss": "^8.4.24", "prettier": "^2.8.0", @@ -43,6 +44,7 @@ "@wagmi/core": "^1.2.0", "@web3modal/ethereum": "^2.4.7", "@web3modal/html": "^2.4.7", + "debug": "^4.3.4", "viem": "^1.0.7" } } diff --git a/packages/bridge-ui-v2/src/app.d.ts b/packages/bridge-ui-v2/src/app.d.ts index 899c7e8fca..bbbab873ca 100644 --- a/packages/bridge-ui-v2/src/app.d.ts +++ b/packages/bridge-ui-v2/src/app.d.ts @@ -7,6 +7,10 @@ declare global { // interface PageData {} // interface Platform {} } + + type Maybe = T | null | undefined; + type MaybeArray = T | T[] | null | undefined; + type MaybePromise = T | Promise | null | undefined; } export {}; diff --git a/packages/bridge-ui-v2/src/app.html b/packages/bridge-ui-v2/src/app.html index 055757421a..ff9d5e137c 100644 --- a/packages/bridge-ui-v2/src/app.html +++ b/packages/bridge-ui-v2/src/app.html @@ -3,10 +3,28 @@ + + + + + + %sveltekit.head% + + -
%sveltekit.body%
+ %sveltekit.body% diff --git a/packages/bridge-ui-v2/src/components/Button/Button.svelte b/packages/bridge-ui-v2/src/components/Button/Button.svelte new file mode 100644 index 0000000000..4b04c59208 --- /dev/null +++ b/packages/bridge-ui-v2/src/components/Button/Button.svelte @@ -0,0 +1,57 @@ + + + diff --git a/packages/bridge-ui-v2/src/components/Button/index.ts b/packages/bridge-ui-v2/src/components/Button/index.ts new file mode 100644 index 0000000000..70948d65ee --- /dev/null +++ b/packages/bridge-ui-v2/src/components/Button/index.ts @@ -0,0 +1 @@ +export { default } from './Button.svelte'; diff --git a/packages/bridge-ui-v2/src/components/Header/Header.svelte b/packages/bridge-ui-v2/src/components/Header/Header.svelte new file mode 100644 index 0000000000..3cb9adefef --- /dev/null +++ b/packages/bridge-ui-v2/src/components/Header/Header.svelte @@ -0,0 +1,17 @@ + + +
+
+ + +
+ + +
diff --git a/packages/bridge-ui-v2/src/components/Header/index.ts b/packages/bridge-ui-v2/src/components/Header/index.ts new file mode 100644 index 0000000000..4720fed74f --- /dev/null +++ b/packages/bridge-ui-v2/src/components/Header/index.ts @@ -0,0 +1 @@ +export { default } from './Header.svelte'; diff --git a/packages/bridge-ui-v2/src/components/Icon/Icon.svelte b/packages/bridge-ui-v2/src/components/Icon/Icon.svelte new file mode 100644 index 0000000000..7e58622bb1 --- /dev/null +++ b/packages/bridge-ui-v2/src/components/Icon/Icon.svelte @@ -0,0 +1,53 @@ + + + + {#if type === 'bridge'} + + + {:else if type === 'faucet'} + + {:else if type === 'activities'} + + {:else if type === 'explorer'} + + + + {:else if type === 'guide'} + + {:else if type === 'bars-menu'} + + {/if} + diff --git a/packages/bridge-ui-v2/src/components/Icon/index.ts b/packages/bridge-ui-v2/src/components/Icon/index.ts new file mode 100644 index 0000000000..891245c586 --- /dev/null +++ b/packages/bridge-ui-v2/src/components/Icon/index.ts @@ -0,0 +1 @@ +export { default } from './Icon.svelte'; diff --git a/packages/bridge-ui-v2/src/components/LinkButton/LinkButton.svelte b/packages/bridge-ui-v2/src/components/LinkButton/LinkButton.svelte new file mode 100644 index 0000000000..6883ea183a --- /dev/null +++ b/packages/bridge-ui-v2/src/components/LinkButton/LinkButton.svelte @@ -0,0 +1,18 @@ + + + + + diff --git a/packages/bridge-ui-v2/src/components/LinkButton/index.ts b/packages/bridge-ui-v2/src/components/LinkButton/index.ts new file mode 100644 index 0000000000..b9ac5eeaff --- /dev/null +++ b/packages/bridge-ui-v2/src/components/LinkButton/index.ts @@ -0,0 +1 @@ +export { default } from './LinkButton.svelte'; diff --git a/packages/bridge-ui-v2/src/components/Logo/Logo.svelte b/packages/bridge-ui-v2/src/components/Logo/Logo.svelte new file mode 100644 index 0000000000..fc81afb9b0 --- /dev/null +++ b/packages/bridge-ui-v2/src/components/Logo/Logo.svelte @@ -0,0 +1,11 @@ + + + + + diff --git a/packages/bridge-ui-v2/src/components/Logo/LogoWithText.svelte b/packages/bridge-ui-v2/src/components/Logo/LogoWithText.svelte new file mode 100644 index 0000000000..7e2c5c320a --- /dev/null +++ b/packages/bridge-ui-v2/src/components/Logo/LogoWithText.svelte @@ -0,0 +1,29 @@ + + + + + + + + + + diff --git a/packages/bridge-ui-v2/src/components/Logo/index.ts b/packages/bridge-ui-v2/src/components/Logo/index.ts new file mode 100644 index 0000000000..d79383d31b --- /dev/null +++ b/packages/bridge-ui-v2/src/components/Logo/index.ts @@ -0,0 +1,2 @@ +export { default } from './Logo.svelte'; +export { default as LogoWithText } from './LogoWithText.svelte'; diff --git a/packages/bridge-ui-v2/src/components/SideNavigation/SideNavigation.svelte b/packages/bridge-ui-v2/src/components/SideNavigation/SideNavigation.svelte new file mode 100644 index 0000000000..b94030f138 --- /dev/null +++ b/packages/bridge-ui-v2/src/components/SideNavigation/SideNavigation.svelte @@ -0,0 +1,63 @@ + + + + +
+ + +
+ +
+ +
+
+
diff --git a/packages/bridge-ui-v2/src/components/SideNavigation/index.ts b/packages/bridge-ui-v2/src/components/SideNavigation/index.ts new file mode 100644 index 0000000000..780c44a062 --- /dev/null +++ b/packages/bridge-ui-v2/src/components/SideNavigation/index.ts @@ -0,0 +1 @@ +export { default, drawerToogleId } from './SideNavigation.svelte'; diff --git a/packages/bridge-ui-v2/src/index.test.ts b/packages/bridge-ui-v2/src/index.test.ts deleted file mode 100644 index 964d287251..0000000000 --- a/packages/bridge-ui-v2/src/index.test.ts +++ /dev/null @@ -1,7 +0,0 @@ -import { describe, it, expect } from 'vitest'; - -describe('sum test', () => { - it('adds 1 + 2 to equal 3', () => { - expect(1 + 2).toBe(3); - }); -}); diff --git a/packages/bridge-ui-v2/src/libs/classNames/classNames.test.ts b/packages/bridge-ui-v2/src/libs/classNames/classNames.test.ts new file mode 100644 index 0000000000..7c8e2a3178 --- /dev/null +++ b/packages/bridge-ui-v2/src/libs/classNames/classNames.test.ts @@ -0,0 +1,8 @@ +import { classNames } from './classNames'; + +test('classNames lib', () => { + expect(classNames('class1', 'class2 class3')).toBe('class1 class2 class3'); + expect(classNames('class1', 'class2', null)).toBe('class1 class2'); + expect(classNames('class1', 'class2', undefined)).toBe('class1 class2'); + expect(classNames('class1', null, 'class3', '', 'class5')).toBe('class1 class3 class5'); +}); diff --git a/packages/bridge-ui-v2/src/libs/classNames/classNames.ts b/packages/bridge-ui-v2/src/libs/classNames/classNames.ts new file mode 100644 index 0000000000..4a60c3b72b --- /dev/null +++ b/packages/bridge-ui-v2/src/libs/classNames/classNames.ts @@ -0,0 +1,3 @@ +export function classNames(...classes: Array>) { + return classes.filter(Boolean).join(' '); +} diff --git a/packages/bridge-ui-v2/src/libs/classNames/index.ts b/packages/bridge-ui-v2/src/libs/classNames/index.ts new file mode 100644 index 0000000000..b27a95c767 --- /dev/null +++ b/packages/bridge-ui-v2/src/libs/classNames/index.ts @@ -0,0 +1 @@ +export { classNames } from './classNames'; diff --git a/packages/bridge-ui-v2/src/routes/+layout.svelte b/packages/bridge-ui-v2/src/routes/+layout.svelte index 2f82dae116..dbeaca9ae2 100644 --- a/packages/bridge-ui-v2/src/routes/+layout.svelte +++ b/packages/bridge-ui-v2/src/routes/+layout.svelte @@ -1,11 +1,13 @@ -
-
-
+ +
+
-
-
+ diff --git a/packages/bridge-ui-v2/src/routes/+page.svelte b/packages/bridge-ui-v2/src/routes/+page.svelte index e2d532c64b..d62b797872 100644 --- a/packages/bridge-ui-v2/src/routes/+page.svelte +++ b/packages/bridge-ui-v2/src/routes/+page.svelte @@ -1 +1 @@ -

Welcome to Bridge UI v2

+TODO: Bridge form diff --git a/packages/bridge-ui-v2/src/routes/activities/+page.svelte b/packages/bridge-ui-v2/src/routes/activities/+page.svelte new file mode 100644 index 0000000000..2f51a25ec5 --- /dev/null +++ b/packages/bridge-ui-v2/src/routes/activities/+page.svelte @@ -0,0 +1 @@ +TODO: Activities diff --git a/packages/bridge-ui-v2/src/routes/faucet/+page.svelte b/packages/bridge-ui-v2/src/routes/faucet/+page.svelte new file mode 100644 index 0000000000..448831cab8 --- /dev/null +++ b/packages/bridge-ui-v2/src/routes/faucet/+page.svelte @@ -0,0 +1 @@ +TODO: Faucet diff --git a/packages/bridge-ui-v2/src/styles/base.css b/packages/bridge-ui-v2/src/styles/base.css index 2f02db53f6..afbf5d0685 100644 --- a/packages/bridge-ui-v2/src/styles/base.css +++ b/packages/bridge-ui-v2/src/styles/base.css @@ -1 +1,12 @@ @tailwind base; + +@layer base { + html { + font-family: Public Sans, system-ui, sans-serif; + } + + html, + body { + height: 100%; + } +} diff --git a/packages/bridge-ui-v2/src/styles/components.css b/packages/bridge-ui-v2/src/styles/components.css index 020aabafde..e0b0df28f1 100644 --- a/packages/bridge-ui-v2/src/styles/components.css +++ b/packages/bridge-ui-v2/src/styles/components.css @@ -1 +1,55 @@ @tailwind components; + +@layer components { + /* Typography */ + .title-subsection-regular { + @apply font-normal text-[22px]/6; + } + + .title-subsection-bold { + @apply font-bold text-[22px]/6; + } + + .title-body-regular { + @apply font-normal text-lg/6; + } + + .title-body-bold { + @apply font-bold text-lg/6; + } + + .body-regular { + @apply font-normal text-base; + } + + .body-bold { + @apply font-bold text-base; + } + + .body-small-regular { + @apply font-normal text-sm; + } + + .body-small-bold { + @apply font-bold text-sm; + } + + .callout-regular { + @apply font-normal text-sm; + } + + .callout-bold { + @apply font-bold text-sm; + } + + .link-large-regular { + @apply font-normal text-base; + } + + .link-regular { + @apply font-normal text-sm; + } + /* End Typography */ + + /* TODO: add more components here */ +} diff --git a/packages/bridge-ui-v2/tailwind.config.js b/packages/bridge-ui-v2/tailwind.config.js index e1ee40c924..149aaf731c 100644 --- a/packages/bridge-ui-v2/tailwind.config.js +++ b/packages/bridge-ui-v2/tailwind.config.js @@ -2,9 +2,225 @@ import daisyuiPlugin from 'daisyui'; /** @type {import('tailwindcss').Config} */ export default { + darkMode: ['class', '[data-theme]'], content: ['./src/**/*.{html,js,svelte,ts}'], theme: { - extend: {}, + extend: { + colors: { + /*************** + * Base colors * + ***************/ + + grey: { + 0: '#FFFFFF', + 5: '#FAFAFA', + 10: '#F3F3F3', + 50: '#E7E7E7', + 100: '#CACBCE', + 200: '#ADB1B8', + 300: '#91969F', + 400: '#767C89', + 500: '#5D636F', + 600: '#444A55', + 700: '#2B303B', + 800: '#191E28', + 900: '#0B101B', + 1000: '#050912', + }, + + pink: { + 0: '#FFFFFF', + 5: '#FFF8FC', + 10: '#FFE7F6', + 50: '#FFC6E9', + 100: '#FF98D8', + 200: '#FF6FC8', + 300: '#FF40B6', + 400: '#E81899', + 500: '#C8047D', + 600: '#9A0060', + 700: '#7D004E', + 800: '#4B002F', + 900: '#240017', + 1000: '#050912', + }, + + red: { + 0: '#FFFFFF', + 5: '#FEF5F5', + 10: '#FFE7E7', + 50: '#FFC5C5', + 100: '#FF9B9C', + 200: '#FD7576', + 300: '#F15C5D', + 400: '#DB4546', + 500: '#CE2C2D', + 600: '#BB1A1B', + 700: '#790102', + 800: '#440000', + 900: '#250000', + 1000: '#050912', + }, + + green: { + 0: '#FFFFFF', + 5: '#F2FFFA', + 10: '#E4FFF4', + 50: '#BFFFE4', + 100: '#89FFCD', + 200: '#65F0B6', + 300: '#47E0A0', + 400: '#2DCA88', + 500: '#19BA76', + 600: '#059458', + 700: '#005E36', + 800: '#00321D', + 900: '#001C10', + 1000: '#050912', + }, + + yellow: { + 0: '#FFFFFF', + 5: '#FFFCF3', + 10: '#FFF6DE', + 50: '#FFEAB5', + 100: '#FFDC85', + 200: '#FFCF55', + 300: '#F8C23B', + 400: '#EBB222', + 500: '#DBA00D', + 600: '#C28B00', + 700: '#775602', + 800: '#382800', + 900: '#201700', + 1000: '#050912', + }, + + /******************* + * Semantic colors * + *******************/ + + primary: { + DEFAULT: 'var(--primary-brand)', + brand: 'var(--primary-brand)', + content: 'var(--primary-content)', + link: { + DEFAULT: 'var(--primary-link)', + hover: 'var(--primary-link-hover)', + }, + icon: 'var(--primary-icon)', + background: 'var(--primary-background)', + interactive: { + DEFAULT: 'var(--primary-interactive)', + hover: 'var(--primary-interactive-accent)', + accent: 'var(--primary-interactive-accent)', + }, + }, + + secondary: { + DEFAULT: 'var(--secondary-brand)', + brand: 'var(--secondary-brand)', + content: 'var(--secondary-content)', + icon: 'var(--secondary-icon)', + interactive: { + hover: 'var(--secondary-interactive-hover)', + }, + }, + + tertiary: { + content: 'var(--tertiary-content)', + interactive: { + hover: 'var(--tertiary-interactive-hover)', + }, + }, + + 'positive-sentiment': 'var(--positive-sentiment)', + 'negative-sentiment': 'var(--negative-sentiment)', + 'warning-sentiment': 'var(--warning-sentiment)', + + 'elevated-background': 'var(--elevated-background)', + 'neutral-background': 'var(--neutral-background)', + 'overlay-background': 'var(--overlay-background)', + }, + }, }, + plugins: [daisyuiPlugin], + + // https://daisyui.com/docs/config/ + daisyui: { + darkTheme: 'dark', // name of one of the included themes for dark mode + base: true, // applies background color and foreground color for root element by default + styled: true, // include daisyUI colors and design decisions for all components + utils: true, // adds responsive and modifier utility classes + rtl: false, // rotate style direction from left-to-right to right-to-left. You also need to add dir="rtl" to your html tag and install `tailwindcss-flip` plugin for Tailwind CSS. + prefix: '', // prefix for daisyUI classnames (components, modifiers and responsive class names. Not colors) + logs: true, // Shows info about daisyUI version and used config in the console when building your CSS + themes: [ + { + dark: { + 'color-scheme': 'dark', + '--btn-text-case': 'capitalize', + + '--primary-brand': '#C8047D', // pink-500 + '--primary-content': '#F3F3F3', // grey-10 + '--primary-link': '#FF6FC8', // pink-200 + '--primary-link-hover': '#FFC6E9', // pink-50 + '--primary-icon': '#CACBCE', // grey-100 + '--primary-background': '#0B101B', // grey-900 + '--primary-interactive': '#C8047D', // pink-500 + '--primary-interactive-accent': '#E81899', // pink-400 + + '--secondary-brand': '#E81899', // pink-400 + '--secondary-content': '#ADB1B8', // grey-200 + '--secondary-icon': '#444A55', // grey-600 + '--secondary-interactive-hover': '#2B303B', // grey-700 + + '--tertiary-content': '#5D636F', // grey-500 + '--tertiary-interactive-hover': '#444A55', // grey-600 + '--tertiary-interactive-accent': '#5D636F', // grey-500 + + '--positive-sentiment': '#47E0A0', // green-300 + '--negative-sentiment': '#F15C5D', // red-300 + '--warning-sentiment': '#EBB222', // yellow-400 + + '--elevated-background': '#191E28', // grey-800 + '--neutral-background': '#2B303B', // grey-700 + '--overlay-background': 'rgba(12, 17, 28, 0.5)', // grey-900|50% + + // ================================ // + + primary: '#C8047D', // pink-500, + 'primary-focus': '#E81899', // pink-400 + 'primary-content': '#F3F3F3', // grey-10 + + 'base-100': '#0B101B', // grey-900 + 'base-content': '#F3F3F3', // grey-10 + + success: '#00321D', // green-800 + error: '#440000', // red-800 + warning: '#382800', // yellow-800 + }, + + light: { + // TODO: add light theme + + 'color-scheme': 'light', + '--btn-text-case': 'capitalize', + + '--primary-content': '#191E28', // grey-800 + '--primary-background': '#FAFAFA', // grey-5 + + // ================================ // + + 'base-100': '#FAFAFA', // grey-5 + 'base-content': '#191E28', // grey-800 + + success: '#E4FFF4', // green-10 + error: '#FFE7E7', // red-10 + warning: '#FFF6DE', // yellow-10 + }, + }, + ], + }, }; diff --git a/packages/bridge-ui-v2/tsconfig.json b/packages/bridge-ui-v2/tsconfig.json index 794b95b642..e7077ce86c 100644 --- a/packages/bridge-ui-v2/tsconfig.json +++ b/packages/bridge-ui-v2/tsconfig.json @@ -8,7 +8,15 @@ "resolveJsonModule": true, "skipLibCheck": true, "sourceMap": true, - "strict": true + "strict": true, + + "paths": { + "@components/*": ["./src/components/*"], + "@libs/*": ["./src/libs/*"] + }, + + // https://vitest.dev/config/#globals + "types": ["vitest/globals"] } // Path aliases are handled by https://kit.svelte.dev/docs/configuration#alias // diff --git a/packages/bridge-ui-v2/vite.config.ts b/packages/bridge-ui-v2/vite.config.ts index 5edbb389fd..86857fa053 100644 --- a/packages/bridge-ui-v2/vite.config.ts +++ b/packages/bridge-ui-v2/vite.config.ts @@ -4,6 +4,7 @@ import { defineConfig } from 'vitest/config'; export default defineConfig({ plugins: [sveltekit()], test: { + globals: true, include: ['src/**/*.{test,spec}.{js,ts}'], }, }); diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml index 1501be6ee1..89a08b66b0 100644 --- a/pnpm-lock.yaml +++ b/pnpm-lock.yaml @@ -204,13 +204,16 @@ importers: dependencies: '@wagmi/core': specifier: ^1.2.0 - version: 1.2.0(react@18.2.0)(typescript@5.1.3)(viem@1.0.7) + version: 1.2.0(debug@4.3.4)(typescript@5.1.3)(viem@1.0.7) '@web3modal/ethereum': specifier: ^2.4.7 version: 2.4.7(@wagmi/core@1.2.0)(viem@1.0.7) '@web3modal/html': specifier: ^2.4.7 - version: 2.4.7(react@18.2.0) + version: 2.4.7 + debug: + specifier: ^4.3.4 + version: 4.3.4 viem: specifier: ^1.0.7 version: 1.0.7(typescript@5.1.3) @@ -242,6 +245,9 @@ importers: eslint-config-prettier: specifier: ^8.5.0 version: 8.8.0(eslint@8.42.0) + eslint-plugin-simple-import-sort: + specifier: ^10.0.0 + version: 10.0.0(eslint@8.42.0) eslint-plugin-svelte: specifier: ^2.26.0 version: 2.30.0(eslint@8.42.0)(svelte@3.59.1) @@ -271,7 +277,7 @@ importers: version: 5.1.3 vite: specifier: ^4.3.0 - version: 4.3.9(@types/node@20.3.1) + version: 4.3.9 vitest: specifier: ^0.32.2 version: 0.32.2 @@ -2709,7 +2715,7 @@ packages: engines: {node: ^12.22.0 || ^14.17.0 || >=16.0.0} dependencies: ajv: 6.12.6 - debug: 4.3.4(supports-color@8.1.1) + debug: 4.3.4 espree: 9.5.2 globals: 13.20.0 ignore: 5.2.4 @@ -3213,7 +3219,7 @@ packages: engines: {node: '>=10.10.0'} dependencies: '@humanwhocodes/object-schema': 1.2.1 - debug: 4.3.4(supports-color@8.1.1) + debug: 4.3.4 minimatch: 3.1.2 transitivePeerDependencies: - supports-color @@ -3617,7 +3623,7 @@ packages: engines: {node: '>=14.0.0'} dependencies: '@types/debug': 4.1.8 - debug: 4.3.4(supports-color@8.1.1) + debug: 4.3.4 semver: 7.5.2 superstruct: 1.0.3 transitivePeerDependencies: @@ -5052,7 +5058,7 @@ packages: sirv: 2.0.3 svelte: 3.59.1 undici: 5.22.0 - vite: 4.3.9(@types/node@20.3.1) + vite: 4.3.9 transitivePeerDependencies: - supports-color dev: true @@ -5066,9 +5072,9 @@ packages: vite: ^4.0.0 dependencies: '@sveltejs/vite-plugin-svelte': 2.4.1(svelte@3.59.1)(vite@4.3.9) - debug: 4.3.4(supports-color@8.1.1) + debug: 4.3.4 svelte: 3.59.1 - vite: 4.3.9(@types/node@20.3.1) + vite: 4.3.9 transitivePeerDependencies: - supports-color dev: true @@ -5104,13 +5110,13 @@ packages: vite: ^4.0.0 dependencies: '@sveltejs/vite-plugin-svelte-inspector': 1.0.2(@sveltejs/vite-plugin-svelte@2.4.1)(svelte@3.59.1)(vite@4.3.9) - debug: 4.3.4(supports-color@8.1.1) + debug: 4.3.4 deepmerge: 4.3.1 kleur: 4.1.5 magic-string: 0.30.0 svelte: 3.59.1 svelte-hmr: 0.15.1(svelte@3.59.1) - vite: 4.3.9(@types/node@20.3.1) + vite: 4.3.9 vitefu: 0.2.4(vite@4.3.9) transitivePeerDependencies: - supports-color @@ -5799,7 +5805,7 @@ packages: '@typescript-eslint/scope-manager': 5.59.11 '@typescript-eslint/type-utils': 5.59.11(eslint@8.42.0)(typescript@5.1.3) '@typescript-eslint/utils': 5.59.11(eslint@8.42.0)(typescript@5.1.3) - debug: 4.3.4(supports-color@8.1.1) + debug: 4.3.4 eslint: 8.42.0 grapheme-splitter: 1.0.4 ignore: 5.2.4 @@ -5922,7 +5928,7 @@ packages: '@typescript-eslint/scope-manager': 5.59.11 '@typescript-eslint/types': 5.59.11 '@typescript-eslint/typescript-estree': 5.59.11(typescript@5.1.3) - debug: 4.3.4(supports-color@8.1.1) + debug: 4.3.4 eslint: 8.42.0 typescript: 5.1.3 transitivePeerDependencies: @@ -6025,7 +6031,7 @@ packages: dependencies: '@typescript-eslint/typescript-estree': 5.59.11(typescript@5.1.3) '@typescript-eslint/utils': 5.59.11(eslint@8.42.0)(typescript@5.1.3) - debug: 4.3.4(supports-color@8.1.1) + debug: 4.3.4 eslint: 8.42.0 tsutils: 3.21.0(typescript@5.1.3) typescript: 5.1.3 @@ -6122,7 +6128,7 @@ packages: dependencies: '@typescript-eslint/types': 5.59.11 '@typescript-eslint/visitor-keys': 5.59.11 - debug: 4.3.4(supports-color@8.1.1) + debug: 4.3.4 globby: 11.1.0 is-glob: 4.0.3 semver: 7.5.1 @@ -6463,7 +6469,7 @@ packages: - typescript - utf-8-validate - /@wagmi/connectors@2.2.0(@wagmi/chains@1.1.0)(react@18.2.0)(typescript@5.1.3)(viem@1.0.7): + /@wagmi/connectors@2.2.0(@wagmi/chains@1.1.0)(debug@4.3.4)(typescript@5.1.3)(viem@1.0.7): resolution: {integrity: sha512-pI1ed2V8dC8Gro0YbXrJedFj5U9HHD/zUe9MMUaV3ews2LY6qziSXZp9Dw6TKyiSJ5ANbRlZcl40AmSPozkZmw==} peerDependencies: '@wagmi/chains': '>=1.0.0' @@ -6480,9 +6486,9 @@ packages: '@safe-global/safe-apps-provider': 0.15.2 '@safe-global/safe-apps-sdk': 7.11.0 '@wagmi/chains': 1.1.0(typescript@5.1.3) - '@walletconnect/ethereum-provider': 2.8.0(@walletconnect/modal@2.4.7) + '@walletconnect/ethereum-provider': 2.8.0(@walletconnect/modal@2.4.7)(debug@4.3.4) '@walletconnect/legacy-provider': 2.0.0 - '@walletconnect/modal': 2.4.7(react@18.2.0) + '@walletconnect/modal': 2.4.7 abitype: 0.8.7(typescript@5.1.3) eventemitter3: 4.0.7 typescript: 5.1.3 @@ -6530,7 +6536,7 @@ packages: - utf-8-validate - zod - /@wagmi/core@1.2.0(react@18.2.0)(typescript@5.1.3)(viem@1.0.7): + /@wagmi/core@1.2.0(debug@4.3.4)(typescript@5.1.3)(viem@1.0.7): resolution: {integrity: sha512-7onf13u0atdXOnoitB+pivnIUPJman7Y8GITKkxwmcwJ3lpE1U/grYE7xHcKN7av7KEu0DozvKPhN7nJ/7OErw==} peerDependencies: typescript: '>=5.0.4' @@ -6540,12 +6546,12 @@ packages: optional: true dependencies: '@wagmi/chains': 1.1.0(typescript@5.1.3) - '@wagmi/connectors': 2.2.0(@wagmi/chains@1.1.0)(react@18.2.0)(typescript@5.1.3)(viem@1.0.7) + '@wagmi/connectors': 2.2.0(@wagmi/chains@1.1.0)(debug@4.3.4)(typescript@5.1.3)(viem@1.0.7) abitype: 0.8.7(typescript@5.1.3) eventemitter3: 4.0.7 typescript: 5.1.3 viem: 1.0.7(typescript@5.1.3) - zustand: 4.3.8(react@18.2.0) + zustand: 4.3.8 transitivePeerDependencies: - '@react-native-async-storage/async-storage' - bufferutil @@ -6656,7 +6662,7 @@ packages: - encoding - utf-8-validate - /@walletconnect/ethereum-provider@2.8.0(@walletconnect/modal@2.4.7): + /@walletconnect/ethereum-provider@2.8.0(@walletconnect/modal@2.4.7)(debug@4.3.4): resolution: {integrity: sha512-nVVJtZUpoeurFjoEPYlrUHkT3YleCpEC9YAMKJyEIB3MZZInttcGxGyi0vwFQ+trCfuX8RrdKUPQ952NvxvCvw==} peerDependencies: '@walletconnect/modal': '>=2' @@ -6668,10 +6674,10 @@ packages: '@walletconnect/jsonrpc-provider': 1.0.13 '@walletconnect/jsonrpc-types': 1.0.3 '@walletconnect/jsonrpc-utils': 1.0.8 - '@walletconnect/modal': 2.4.7(react@18.2.0) + '@walletconnect/modal': 2.4.7 '@walletconnect/sign-client': 2.8.0 '@walletconnect/types': 2.8.0 - '@walletconnect/universal-provider': 2.8.0 + '@walletconnect/universal-provider': 2.8.0(debug@4.3.4) '@walletconnect/utils': 2.8.0 events: 3.3.0 transitivePeerDependencies: @@ -6863,11 +6869,11 @@ packages: resolution: {integrity: sha512-ZtKRio4uCZ1JUF7LIdecmZt7FOLnX72RPSY7aUVu7mj7CSfxDwUn6gBuK6WGtH+NZCldBqDl5DenI5fFSvkKYw==} deprecated: 'Deprecated in favor of dynamic registry available from: https://github.com/walletconnect/walletconnect-registry' - /@walletconnect/modal@2.4.7(react@18.2.0): + /@walletconnect/modal@2.4.7: resolution: {integrity: sha512-kFpvDTT44CgNGcwQVC0jHrYed4xorghKX1DOGo8ZfBSJ5TJx3p6d6SzLxkH1cZupWbljWkYS6SqvZcUBs8vWpg==} dependencies: - '@web3modal/core': 2.4.7(react@18.2.0) - '@web3modal/ui': 2.4.7(react@18.2.0) + '@web3modal/core': 2.4.7 + '@web3modal/ui': 2.4.7 transitivePeerDependencies: - react dev: false @@ -6989,7 +6995,7 @@ packages: - lokijs dev: false - /@walletconnect/universal-provider@2.8.0: + /@walletconnect/universal-provider@2.8.0(debug@4.3.4): resolution: {integrity: sha512-BMsGiINI3rT7DRyDJM7miuWG6vDVE0PV6zMcCXIMDYYPay7zFvJxv2VHEx9an4MutrvQR76NTRyG//i1K84VOQ==} dependencies: '@walletconnect/jsonrpc-http-connection': 1.0.7 @@ -7064,11 +7070,11 @@ packages: tslib: 1.14.1 dev: false - /@web3modal/core@2.4.7(react@18.2.0): + /@web3modal/core@2.4.7: resolution: {integrity: sha512-FZMmI4JnEZovRDdN+PZBMe2ot8ly+UftVkZ6lmtfgiRZ2Gy3k/4IYE8/KwOSmN63Lf2Oj2077buLR17i0xoKZA==} dependencies: buffer: 6.0.3 - valtio: 1.10.5(react@18.2.0) + valtio: 1.10.5 transitivePeerDependencies: - react dev: false @@ -7079,23 +7085,23 @@ packages: '@wagmi/core': '>=1' viem: '>=1' dependencies: - '@wagmi/core': 1.2.0(react@18.2.0)(typescript@5.1.3)(viem@1.0.7) + '@wagmi/core': 1.2.0(debug@4.3.4)(typescript@5.1.3)(viem@1.0.7) viem: 1.0.7(typescript@5.1.3) dev: false - /@web3modal/html@2.4.7(react@18.2.0): + /@web3modal/html@2.4.7: resolution: {integrity: sha512-bneYbx6lXS2toQ5kuJlbIJ0uOGNVyZDeABIhW4JeucNzM4ml1OqFVQr5JaimoYnaD08KRnleLz1nQi+nBBqTrA==} dependencies: - '@web3modal/core': 2.4.7(react@18.2.0) - '@web3modal/ui': 2.4.7(react@18.2.0) + '@web3modal/core': 2.4.7 + '@web3modal/ui': 2.4.7 transitivePeerDependencies: - react dev: false - /@web3modal/ui@2.4.7(react@18.2.0): + /@web3modal/ui@2.4.7: resolution: {integrity: sha512-5tU9u5CVYueZ9y+1x1A1Q0bFUfk3gOIKy3MT6Vx+aI0RDxVu7OYQDw6wbNPlgz/wd9JPYXG6uSv8WTBpdyit8Q==} dependencies: - '@web3modal/core': 2.4.7(react@18.2.0) + '@web3modal/core': 2.4.7 lit: 2.7.5 motion: 10.16.2 qrcode: 1.5.3 @@ -7610,7 +7616,7 @@ packages: resolution: {integrity: sha512-Zn4cw2NEqd+9fiSVWMscnjyQ1a8Yfoc5oBajLeo5w+YBHgDUcEBY2hS4YpTz6iN5f/2zQiktcuM6tS8x1p9dpA==} engines: {node: '>= 8.0.0'} dependencies: - debug: 4.3.4(supports-color@8.1.1) + debug: 4.3.4 depd: 1.1.2 humanize-ms: 1.2.1 transitivePeerDependencies: @@ -10756,6 +10762,17 @@ packages: ms: 2.1.3 dev: true + /debug@4.3.4: + resolution: {integrity: sha512-PRWFHuSU3eDtQJPvnNY7Jcket1j0t5OuOsFzPPzsekD52Zl8qUfFIPEiswXqIvHWGVHOgX+7G/vCNNhehwxfkQ==} + engines: {node: '>=6.0'} + peerDependencies: + supports-color: '*' + peerDependenciesMeta: + supports-color: + optional: true + dependencies: + ms: 2.1.2 + /debug@4.3.4(supports-color@8.1.1): resolution: {integrity: sha512-PRWFHuSU3eDtQJPvnNY7Jcket1j0t5OuOsFzPPzsekD52Zl8qUfFIPEiswXqIvHWGVHOgX+7G/vCNNhehwxfkQ==} engines: {node: '>=6.0'} @@ -12182,6 +12199,14 @@ packages: eslint: 7.32.0 dev: true + /eslint-plugin-simple-import-sort@10.0.0(eslint@8.42.0): + resolution: {integrity: sha512-AeTvO9UCMSNzIHRkg8S6c3RPy5YEwKWSQPx3DYghLedo2ZQxowPFLGDN1AZ2evfg6r6mjBSZSLxLFsWSu3acsw==} + peerDependencies: + eslint: '>=5.0.0' + dependencies: + eslint: 8.42.0 + dev: true + /eslint-plugin-svelte3@4.0.0(eslint@7.32.0)(svelte@3.53.1): resolution: {integrity: sha512-OIx9lgaNzD02+MDFNLw0GEUbuovNcglg+wnd/UY0fbZmlQSz7GlQiQ1f+yX0XvC07XPcDOnFcichqI3xCwp71g==} peerDependencies: @@ -12204,7 +12229,7 @@ packages: dependencies: '@eslint-community/eslint-utils': 4.4.0(eslint@8.42.0) '@jridgewell/sourcemap-codec': 1.4.15 - debug: 4.3.4(supports-color@8.1.1) + debug: 4.3.4 eslint: 8.42.0 esutils: 2.0.3 known-css-properties: 0.27.0 @@ -12340,7 +12365,7 @@ packages: ajv: 6.12.6 chalk: 4.1.2 cross-spawn: 7.0.3 - debug: 4.3.4(supports-color@8.1.1) + debug: 4.3.4 doctrine: 3.0.0 escape-string-regexp: 4.0.0 eslint-scope: 7.2.0 @@ -13525,7 +13550,7 @@ packages: debug: optional: true dependencies: - debug: 4.3.4(supports-color@8.1.1) + debug: 4.3.4 /for-each@0.3.3: resolution: {integrity: sha512-jqYfLp7mo9vIyQf8ykW2v7A+2N4QjeCeI5+Dz9XraiO1ign81wjiH7Fb9vSOWvQfNtmSa4H2RoQTrrXivdUZmw==} @@ -15515,7 +15540,7 @@ packages: peerDependencies: ws: '*' dependencies: - ws: 8.12.0(bufferutil@4.0.7)(utf-8-validate@5.0.10) + ws: 8.12.0 /isstream@0.1.2: resolution: {integrity: sha512-Yljz7ffyPbrLpLngrMtZ7NduUgVvi6wG9RJ9IUcyCd59YQ911PBJphODUcbOVbqYfxe1wuYf/LJ8PauMRwsM/g==} @@ -23789,6 +23814,12 @@ packages: qs: 6.11.2 dev: true + /use-sync-external-store@1.2.0: + resolution: {integrity: sha512-eEgnFxGQ1Ife9bzYs6VLi8/4X6CObHMw9Qr9tPY43iKwsPw8xE8+EFsf/2cFZ5S3esXgpWgtSCtLNS41F+sKPA==} + peerDependencies: + react: ^16.8.0 || ^17.0.0 || ^18.0.0 + dev: false + /use-sync-external-store@1.2.0(react@18.2.0): resolution: {integrity: sha512-eEgnFxGQ1Ife9bzYs6VLi8/4X6CObHMw9Qr9tPY43iKwsPw8xE8+EFsf/2cFZ5S3esXgpWgtSCtLNS41F+sKPA==} peerDependencies: @@ -23908,7 +23939,7 @@ packages: spdx-expression-parse: 3.0.1 dev: true - /valtio@1.10.5(react@18.2.0): + /valtio@1.10.5: resolution: {integrity: sha512-jTp0k63VXf4r5hPoaC6a6LCG4POkVSh629WLi1+d5PlajLsbynTMd7qAgEiOSPxzoX5iNvbN7iZ/k/g29wrNiQ==} engines: {node: '>=12.20.0'} peerDependencies: @@ -23918,8 +23949,7 @@ packages: optional: true dependencies: proxy-compare: 2.5.1 - react: 18.2.0 - use-sync-external-store: 1.2.0(react@18.2.0) + use-sync-external-store: 1.2.0 dev: false /varint@5.0.2: @@ -24006,7 +24036,7 @@ packages: abitype: 0.8.7(typescript@5.1.3) isomorphic-ws: 5.0.0(ws@8.12.0) typescript: 5.1.3 - ws: 8.12.0(bufferutil@4.0.7)(utf-8-validate@5.0.10) + ws: 8.12.0 transitivePeerDependencies: - bufferutil - utf-8-validate @@ -24019,7 +24049,7 @@ packages: hasBin: true dependencies: cac: 6.7.14 - debug: 4.3.4(supports-color@8.1.1) + debug: 4.3.4 mlly: 1.3.0 pathe: 1.1.0 picocolors: 1.0.0 @@ -24080,6 +24110,38 @@ packages: fsevents: 2.3.2 dev: true + /vite@4.3.9: + resolution: {integrity: sha512-qsTNZjO9NoJNW7KnOrgYwczm0WctJ8m/yqYAMAK9Lxt4SoySUfS5S8ia9K7JHpa3KEeMfyF8LoJ3c5NeBJy6pg==} + engines: {node: ^14.18.0 || >=16.0.0} + hasBin: true + peerDependencies: + '@types/node': '>= 14' + less: '*' + sass: '*' + stylus: '*' + sugarss: '*' + terser: ^5.4.0 + peerDependenciesMeta: + '@types/node': + optional: true + less: + optional: true + sass: + optional: true + stylus: + optional: true + sugarss: + optional: true + terser: + optional: true + dependencies: + esbuild: 0.17.19 + postcss: 8.4.24 + rollup: 3.25.1 + optionalDependencies: + fsevents: 2.3.2 + dev: true + /vite@4.3.9(@types/node@20.3.1): resolution: {integrity: sha512-qsTNZjO9NoJNW7KnOrgYwczm0WctJ8m/yqYAMAK9Lxt4SoySUfS5S8ia9K7JHpa3KEeMfyF8LoJ3c5NeBJy6pg==} engines: {node: ^14.18.0 || >=16.0.0} @@ -24132,7 +24194,7 @@ packages: vite: optional: true dependencies: - vite: 4.3.9(@types/node@20.3.1) + vite: 4.3.9 dev: true /vitest@0.32.2: @@ -24179,7 +24241,7 @@ packages: cac: 6.7.14 chai: 4.3.7 concordance: 5.0.4 - debug: 4.3.4(supports-color@8.1.1) + debug: 4.3.4 local-pkg: 0.4.3 magic-string: 0.30.0 pathe: 1.1.0 @@ -25047,6 +25109,18 @@ packages: utf-8-validate: optional: true + /ws@8.12.0: + resolution: {integrity: sha512-kU62emKIdKVeEIOIKVegvqpXMSTAMLJozpHZaJNDYqBjzlSYXQGviYwN1osDLJ9av68qHd4a2oSjd7yD4pacig==} + engines: {node: '>=10.0.0'} + peerDependencies: + bufferutil: ^4.0.1 + utf-8-validate: '>=5.0.2' + peerDependenciesMeta: + bufferutil: + optional: true + utf-8-validate: + optional: true + /ws@8.12.0(bufferutil@4.0.7)(utf-8-validate@5.0.10): resolution: {integrity: sha512-kU62emKIdKVeEIOIKVegvqpXMSTAMLJozpHZaJNDYqBjzlSYXQGviYwN1osDLJ9av68qHd4a2oSjd7yD4pacig==} engines: {node: '>=10.0.0'} @@ -25332,7 +25406,7 @@ packages: react: 18.2.0 use-sync-external-store: 1.2.0(react@18.2.0) - /zustand@4.3.8(react@18.2.0): + /zustand@4.3.8: resolution: {integrity: sha512-4h28KCkHg5ii/wcFFJ5Fp+k1J3gJoasaIbppdgZFO4BPJnsNxL0mQXBSFgOgAdCdBj35aDTPvdAJReTMntFPGg==} engines: {node: '>=12.7.0'} peerDependencies: @@ -25344,8 +25418,7 @@ packages: react: optional: true dependencies: - react: 18.2.0 - use-sync-external-store: 1.2.0(react@18.2.0) + use-sync-external-store: 1.2.0 dev: false /zwitch@2.0.4: