feat(bridge-ui-v2): tailwind config and other setups (#14016)

Co-authored-by: dave | d1onys1us <[email protected]>
taikoxyz · Jun 22, 2023 · be294c6 · alkindivv · Aug 10, 2023 · be294c6
1 parent 4794f45
commit be294c6
Show file tree

Hide file tree

Showing 33 changed files with 735 additions and 68 deletions.
diff --git a/README.md b/README.md
@@ -39,6 +39,7 @@ taiko-mono/
 ├── <a href="./packages">packages</a>
 │   ├── <a href="./packages/branding">branding</a>: Taiko branding materials.
 │   ├── <a href="./packages/bridge-ui">bridge-ui</a>: Taiko bridge frontend UI.
+│   ├── <a href="./packages/bridge-ui-v2">bridge-ui-v2</a>: Taiko bridge frontend UI v2 (🚧 under construction 🚧).
 │   ├── <a href="./packages/eventindexer">eventindexer</a>: Event indexer.
 │   ├── <a href="./packages/fork-diff">fork-diff</a>: Fork diff page (currently, for geth).
 │   ├── <a href="./packages/protocol">protocol</a>: Taiko protocol and bridge smart contracts.

diff --git 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
@@ -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
@@ -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
@@ -7,6 +7,10 @@ declare global {
     // interface PageData {}
     // interface Platform {}
   }
+
+  type Maybe<T> = T | null | undefined;
+  type MaybeArray<T> = T | T[] | null | undefined;
+  type MaybePromise<T> = T | Promise<T> | null | undefined;
 }
 
 export {};
diff --git a/packages/bridge-ui-v2/src/app.html b/packages/bridge-ui-v2/src/app.html
@@ -3,10 +3,28 @@
   <head>
     <meta charset="utf-8" />
     <link rel="icon" href="%sveltekit.assets%/taiko-favicon.svg" />
+
+    <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=Public+Sans:wght@100;400&display=swap" rel="stylesheet" />
+
     <meta name="viewport" content="width=device-width" />
+
     %sveltekit.head%
+
+    <script>
+      // On page load or when changing themes, best to add inline in `head` to avoid FOUC
+      if (
+        localStorage.theme === 'dark' ||
+        (!('theme' in localStorage) && window.matchMedia('(prefers-color-scheme: dark)').matches)
+      ) {
+        document.documentElement.classList.add('dark');
+      } else {
+        document.documentElement.classList.remove('dark');
+      }
+    </script>
   </head>
   <body data-sveltekit-preload-data="hover">
-    <div style="display: contents">%sveltekit.body%</div>
+    %sveltekit.body%
   </body>
 </html>
diff --git a/packages/bridge-ui-v2/src/components/Button/Button.svelte b/packages/bridge-ui-v2/src/components/Button/Button.svelte
@@ -0,0 +1,57 @@
+<script lang="ts">
+  import { classNames } from '@libs/classNames';
+
+  type ButtonType = 'neutral' | 'primary' | 'secondary' | 'accent' | 'info' | 'success' | 'warning' | 'error' | 'ghost';
+  type ButtonSize = 'lg' | 'md' | 'sm' | 'xs';
+  type ButtonShape = 'circle' | 'square';
+
+  export let type: Maybe<ButtonType> = null;
+  export let size: Maybe<ButtonSize> = null;
+  export let shape: Maybe<ButtonShape> = null;
+  export let outline = false;
+  export let block = false;
+  export let wide = false;
+
+  // Remember, with Tailwind's classes you cannot use string interpolation: `btn-${type}`.
+  // The whole class name must appear in the code in order for Tailwind compiler to know
+  // it must be included during build-time.
+  // https://tailwindcss.com/docs/content-configuration#dynamic-class-names
+  const typeMap: Record<ButtonType, string> = {
+    neutral: 'btn-neutral',
+    primary: 'btn-primary',
+    secondary: 'btn-secondary',
+    accent: 'btn-accent',
+    info: 'btn-info',
+    success: 'btn-success',
+    warning: 'btn-warning',
+    error: 'btn-error',
+    ghost: 'btn-ghost',
+  };
+
+  const sizeMap: Record<ButtonSize, string> = {
+    lg: 'btn-lg',
+    md: 'btn-md',
+    sm: 'btn-sm',
+    xs: 'btn-xs',
+  };
+
+  const shapeMap: Record<ButtonShape, string> = {
+    circle: 'btn-circle',
+    square: 'btn-square',
+  };
+
+  const classes = classNames(
+    'btn',
+    type ? typeMap[type] : null,
+    size ? sizeMap[size] : null,
+    shape ? shapeMap[shape] : null,
+    outline ? 'btn-outline' : null,
+    block ? 'btn-block' : null,
+    wide ? 'btn-wide' : null,
+    $$props.class,
+  );
+</script>
+
+<button {...$$restProps} class={classes} on:click>
+  <slot />
+</button>
diff --git a/packages/bridge-ui-v2/src/components/Button/index.ts 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
@@ -0,0 +1,17 @@
+<script lang="ts">
+  import Button from '../Button';
+  import Icon from '../Icon';
+  import Logo from '../Logo';
+  import { drawerToogleId } from '../SideNavigation';
+</script>
+
+<header class="sticky md:px-10 md:py-7 flex justify-between">
+  <div class="flex space-x-2 items-center md:hidden">
+    <label for={drawerToogleId} class="btn btn-ghost drawer-button">
+      <Icon type="bars-menu" />
+    </label>
+    <Logo />
+  </div>
+
+  <Button>Connect Wallet</Button>
+</header>
diff --git a/packages/bridge-ui-v2/src/components/Header/index.ts 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
@@ -0,0 +1,53 @@
+<script lang="ts">
+  type IconType = 'bridge' | 'faucet' | 'activities' | 'explorer' | 'guide' | 'bars-menu';
+
+  export let type: IconType;
+  export let width = 20;
+  export let height = 20;
+  export let fillClass = 'fill-primary-icon';
+</script>
+
+<svg {width} {height} viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
+  {#if type === 'bridge'}
+    <path
+      class={fillClass}
+      d="M2.46168 11.1902C2.14602 10.8745 1.96868 10.4464 1.96868 10C1.96868 9.55359 2.14602 9.12546 2.46168 8.80981L5.90002 5.37146C6.21568 5.05581 6.6438 4.87847 7.09021 4.87847C7.53662 4.87847 7.96475 5.05581 8.28041 5.37146L8.94163 6.03268L6.95797 8.01634C6.43187 8.54244 6.13631 9.25598 6.13631 10C6.13631 10.744 6.43187 11.4576 6.95797 11.9837L8.94163 13.9673L8.28041 14.6285C7.96475 14.9442 7.53662 15.1215 7.09021 15.1215C6.6438 15.1215 6.21568 14.9442 5.90002 14.6285L2.46168 11.1902Z" />
+    <path
+      class={fillClass}
+      d="M8.28126 8.80981C7.9656 9.12546 7.78826 9.55359 7.78826 10C7.78826 10.4464 7.9656 10.8745 8.28126 11.1902L11.7196 14.6285C12.0353 14.9442 12.4634 15.1215 12.9098 15.1215C13.3562 15.1215 13.7843 14.9442 14.1 14.6285L17.5383 11.1902C17.854 10.8745 18.0313 10.4464 18.0313 10C18.0313 9.55359 17.854 9.12546 17.5383 8.80981L14.1 5.37146C13.7843 5.05581 13.3562 4.87847 12.9098 4.87847C12.4634 4.87847 12.0353 5.05581 11.7196 5.37147L8.28126 8.80981Z" />
+  {:else if type === 'faucet'}
+    <path
+      class={fillClass}
+      fill-rule="evenodd"
+      clip-rule="evenodd"
+      d="M4.65625 3.89672C6.73885 3.55347 8.87659 3.375 11.0555 3.375C13.2345 3.375 15.3722 3.55347 17.4548 3.89672C17.7693 3.94854 18 4.22039 18 4.53909V6.5249C18 7.0429 17.7942 7.53968 17.4279 7.90596L13.3637 11.9702C12.9974 12.3365 12.7916 12.8333 12.7916 13.3513V15.987C12.7916 16.5804 12.5219 17.1415 12.0586 17.5122L10.3772 18.8573C10.1817 19.0137 9.914 19.0442 9.68844 18.9357C9.46287 18.8273 9.31942 18.5992 9.31942 18.349V13.3513C9.31942 12.8333 9.11364 12.3365 8.74736 11.9702L4.68314 7.90596C4.31686 7.53968 4.11108 7.0429 4.11108 6.5249V4.53909C4.11108 4.22039 4.3418 3.94854 4.65625 3.89672Z" />
+  {:else if type === 'activities'}
+    <path
+      class={fillClass}
+      fill-rule="evenodd"
+      clip-rule="evenodd"
+      d="M2.5 3C1.67157 3 1 3.67157 1 4.5V8.5C1 9.32843 1.67157 10 2.5 10H8.5C9.32843 10 10 9.32843 10 8.5V4.5C10 3.67157 9.32843 3 8.5 3H2.5ZM13.5 5C12.6716 5 12 5.67157 12 6.5V13.5C12 14.3284 12.6716 15 13.5 15H17.5C18.3284 15 19 14.3284 19 13.5V6.5C19 5.67157 18.3284 5 17.5 5H13.5ZM3.5 12C2.67157 12 2 12.6716 2 13.5V15.5C2 16.3284 2.67157 17 3.5 17H9.5C10.3284 17 11 16.3284 11 15.5V13.5C11 12.6716 10.3284 12 9.5 12H3.5Z" />
+  {:else if type === 'explorer'}
+    <path
+      class={fillClass}
+      d="M15.5 2C14.6716 2 14 2.67157 14 3.5V16.5C14 17.3284 14.6716 18 15.5 18H16.5C17.3284 18 18 17.3284 18 16.5V3.5C18 2.67157 17.3284 2 16.5 2H15.5Z" />
+    <path
+      class={fillClass}
+      d="M9.5 6C8.67157 6 8 6.67157 8 7.5V16.5C8 17.3284 8.67157 18 9.5 18H10.5C11.3284 18 12 17.3284 12 16.5V7.5C12 6.67157 11.3284 6 10.5 6H9.5Z" />
+    <path
+      class={fillClass}
+      d="M3.5 10C2.67157 10 2 10.6716 2 11.5V16.5C2 17.3284 2.67157 18 3.5 18H4.5C5.32843 18 6 17.3284 6 16.5V11.5C6 10.6716 5.32843 10 4.5 10H3.5Z" />
+  {:else if type === 'guide'}
+    <path
+      class={fillClass}
+      fill-rule="evenodd"
+      clip-rule="evenodd"
+      d="M18 10C18 14.4183 14.4183 18 10 18C5.58172 18 2 14.4183 2 10C2 5.58172 5.58172 2 10 2C14.4183 2 18 5.58172 18 10ZM8.93934 6.93931C8.64645 7.23221 8.17157 7.23221 7.87868 6.93931C7.58579 6.64642 7.58579 6.17155 7.87868 5.87865C9.05025 4.70708 10.9497 4.70708 12.1213 5.87865C13.2929 7.05023 13.2929 8.94972 12.1213 10.1213C11.7288 10.5138 11.2528 10.7756 10.75 10.9051V11.25C10.75 11.6642 10.4142 12 10 12C9.58579 12 9.25 11.6642 9.25 11.25V10.75C9.25 10.0297 9.81995 9.57826 10.3313 9.46322C10.5982 9.40318 10.8516 9.26969 11.0607 9.06063C11.6464 8.47485 11.6464 7.5251 11.0607 6.93931C10.4749 6.35353 9.52513 6.35353 8.93934 6.93931ZM10 15C10.5523 15 11 14.5523 11 14C11 13.4477 10.5523 13 10 13C9.44771 13 9 13.4477 9 14C9 14.5523 9.44771 15 10 15Z" />
+  {:else if type === 'bars-menu'}
+    <path
+      class={fillClass}
+      fill-rule="evenodd"
+      clip-rule="evenodd"
+      d="M2 4.75C2 4.33579 2.33579 4 2.75 4H17.25C17.6642 4 18 4.33579 18 4.75C18 5.16421 17.6642 5.5 17.25 5.5H2.75C2.33579 5.5 2 5.16421 2 4.75ZM2 10C2 9.58579 2.33579 9.25 2.75 9.25H17.25C17.6642 9.25 18 9.58579 18 10C18 10.4142 17.6642 10.75 17.25 10.75H2.75C2.33579 10.75 2 10.4142 2 10ZM2 15.25C2 14.8358 2.33579 14.5 2.75 14.5H17.25C17.6642 14.5 18 14.8358 18 15.25C18 15.6642 17.6642 16 17.25 16H2.75C2.33579 16 2 15.6642 2 15.25Z" />
+  {/if}
+</svg>
diff --git a/packages/bridge-ui-v2/src/components/Icon/index.ts 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
@@ -0,0 +1,18 @@
+<script lang="ts">
+  import { classNames } from '@libs/classNames';
+
+  type LinkTarget = '_blank' | '_self';
+
+  export let active = false;
+  export let href = '/';
+  export let target: LinkTarget = '_self';
+
+  $: activeClass = active ? 'bg-primary-interactive hover:bg-primary-interactive-hover' : '';
+</script>
+
+<a
+  {href}
+  {target}
+  class={classNames('btn btn-ghost rounded-full body-bold flex justify-start content-center', activeClass)}>
+  <slot />
+</a>
diff --git a/packages/bridge-ui-v2/src/components/LinkButton/index.ts 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
@@ -0,0 +1,11 @@
+<script lang="ts">
+  export let fillClass = 'fill-pink-500';
+  export let width = 38;
+  export let height = 34;
+</script>
+
+<svg {width} {height} viewBox="0 0 253 226" fill="none" xmlns="http://www.w3.org/2000/svg">
+  <path
+    class={fillClass}
+    d="M247.018 182.255L203.941 123.73C199.262 117.37 192.332 113.56 184.953 112.72C183.273 112.526 181.773 111.551 180.933 110.081C180.078 108.611 179.988 106.826 180.663 105.266C183.618 98.4567 183.798 90.5524 180.618 83.323L151.476 16.7586C147.156 6.87446 137.392 0.5 126.608 0.5C115.824 0.5 106.06 6.88945 101.74 16.7586L72.5975 83.323C69.4327 90.5524 69.5977 98.4567 72.5525 105.266C73.2274 106.826 73.1224 108.611 72.2825 110.081C71.4276 111.551 69.9427 112.526 68.2628 112.72C60.8834 113.56 53.9541 117.37 49.2745 123.73L6.1981 182.255C-0.191359 190.939 -0.836313 202.578 4.54823 211.922C9.94778 221.251 20.3569 226.516 31.066 225.331L103.285 217.292C111.129 216.422 117.894 212.327 122.303 206.358C123.308 204.993 124.913 204.183 126.608 204.183C128.303 204.183 129.893 204.993 130.913 206.358C135.322 212.327 142.087 216.422 149.931 217.292L222.15 225.331C232.859 226.531 243.268 221.266 248.668 211.922C254.052 202.578 253.407 190.939 247.018 182.255ZM91.4359 91.6773L120.623 25.0379C121.673 22.6531 124.028 21.1082 126.623 21.1082C129.218 21.1082 131.572 22.6531 132.622 25.0379L161.81 91.6773C162.725 93.7771 162.53 96.2069 161.27 98.1267C160.01 100.047 157.88 101.201 155.57 101.201H97.6603C95.3655 101.201 93.2207 100.047 91.9608 98.1267C90.7009 96.2069 90.5059 93.7771 91.4209 91.6773H91.4359ZM106.42 193.129C105.385 195.184 103.375 196.563 101.095 196.818L28.8012 204.858C26.2214 205.143 23.7016 203.883 22.3967 201.633C21.0918 199.383 21.2568 196.578 22.8017 194.479L65.923 135.894C67.2879 134.049 69.4778 132.999 71.7726 133.134C74.0674 133.254 76.1372 134.529 77.2921 136.523L77.3371 136.598L106.21 186.604L106.255 186.679C107.41 188.674 107.47 191.104 106.435 193.144L106.42 193.129ZM132.547 170.511C131.318 172.625 129.068 173.945 126.608 173.945C124.163 173.945 121.898 172.64 120.668 170.526L98.4853 132.114C97.2554 129.999 97.2554 127.374 98.4853 125.259C99.7152 123.145 101.965 121.825 104.425 121.825H148.776C151.221 121.825 153.486 123.115 154.716 125.244C155.945 127.374 155.945 129.984 154.716 132.099L132.547 170.511ZM230.834 201.633C229.529 203.883 227.024 205.158 224.43 204.873L152.136 196.833C149.856 196.578 147.846 195.199 146.811 193.144C145.776 191.089 145.836 188.659 146.991 186.679L147.036 186.604L175.909 136.598L175.954 136.523C177.109 134.529 179.178 133.254 181.473 133.134C183.768 133.014 185.958 134.049 187.323 135.894L230.444 194.479C231.989 196.578 232.139 199.383 230.849 201.633H230.834Z" />
+</svg>