feat(taikoon): ui qa checklist (#16870)

Co-authored-by: Daniel Wang <99078276+dantaik@users.noreply.github.com> Co-authored-by: bearni95 <bearni95@users.noreply.github.com> Co-authored-by: Karim <karim@taiko.xyz>
taikoxyz · May 14, 2024 · e965597 · e965597
1 parent 8463c0d
commit e965597
Show file tree

Hide file tree

Showing 122 changed files with 2,769 additions and 4,571 deletions.
diff --git a/.github/workflows/taikoon-ui--ci.yml b/.github/workflows/taikoon-ui--ci.yml
@@ -18,17 +18,20 @@ jobs:
 
       - name: Install pnpm dependencies
         uses: ./.github/actions/install-pnpm-dependencies
+      # This step is needed because the .env file is not committed to the repository
+      # and the Svelte check complains about not finding the exports from $env/static/public,
+      # which will be generated based on the .env file when running `svelte-kit sync`
+      - name: Copy .env.example to .env
+        working-directory: ./packages/taikoon-ui
+        run: cp .env.example .env
 
       - 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
+        run: pnpm build
 
       - name: Svelte check
         working-directory: ./packages/taikoon-ui
-        run: pnpm svelte:check
+        run: pnpm check
 
       - name: Check formatting
         working-directory: ./packages/taikoon-ui

diff --git a/.github/workflows/taikoon-ui.yml b/.github/workflows/taikoon-ui.yml
@@ -20,8 +20,8 @@ jobs:
     needs: build-and-test
     uses: ./.github/workflows/repo--vercel-deploy.yml
     with:
-          environment: 'preview'
-          flags: ''
+      environment: "preview"
+      flags: ""
     secrets:
       vercel_project_id: ${{ secrets.VERCEL_PROJECT_ID_TAIKOON_UI_MAINNET }}
       vercel_org_id: ${{ secrets.VERCEL_ORG_ID }}
@@ -32,8 +32,8 @@ jobs:
     needs: build-and-test
     uses: ./.github/workflows/repo--vercel-deploy.yml
     with:
-      environment: 'production'
-      flags: '--prod'
+      environment: "production"
+      flags: "--prod"
     secrets:
       vercel_project_id: ${{ secrets.VERCEL_PROJECT_ID_TAIKOON_UI_MAINNET }}
       vercel_org_id: ${{ secrets.VERCEL_ORG_ID }}

diff --git a/packages/docs-site/src/content/docs/network-reference/addresses.md b/packages/docs-site/src/content/docs/network-reference/addresses.md
@@ -5,44 +5,42 @@ description: Network reference page describing various important addresses on Ta
 
 ## Ethereum (Holesky) contracts
 
-
-| Contract Name (Shared)          | Address                              |
-| ----------------------- | -------------------------------------------- |
-| SharedAddressManager    | `0x7D3338FD5e654CAC5B10028088624CA1D64e74f7` |
-| TaikoToken              | `0x6490E12d480549D333499236fF2Ba6676C296011` |
-| SignalService           | `0x6Fc2fe9D9dd0251ec5E0727e826Afbb0Db2CBe0D` |
-| Bridge                  | `0xA098b76a3Dd499D3F6D58D8AcCaFC8efBFd06807` |
-| ERC20Vault              | `0x2259662ed5dE0E09943Abe701bc5f5a108eABBAa` |
-| ERC721Vault             | `0x046b82D9010b534c716742BE98ac3FEf3f2EC99f` |
-| ERC1155Vault            | `0x9Ae5945Ab34f6182F75E16B73e037421F341fEe3` |
-
-
-| Contract Name (Rollup-Specific)         | Address                      |
-| ----------------------- | -------------------------------------------- |
-| TaikoL1                 | `0x79C9109b764609df928d16fC4a91e9081F7e87DB` |
-| RollupAddressManager    | `0x1F027871F286Cf4B7F898B21298E7B3e090a8403` |
-| GuardianProver          | `0x92F195a8702da2104aE8E3E10779176E7C35d6BC` |
-| AssignmentHook          | `0x9e640a6aadf4f664CF467B795c31332f44AcBe6c` |
-| SgxVerifier             | `0x532EFBf6D62720D0B2a2Bb9d11066E8588cAE6D9` |
-| AutomataDcapAttestation | `0xC6cD3878Fc56F2b2BaB0769C580fc230A95e1398` |
-| PemCertChainLib         | `0x08d7865e7F534d743Aba5874A9AD04bcB223a92E` |
+| Contract Name (Shared) | Address                                      |
+| ---------------------- | -------------------------------------------- |
+| SharedAddressManager   | `0x7D3338FD5e654CAC5B10028088624CA1D64e74f7` |
+| TaikoToken             | `0x6490E12d480549D333499236fF2Ba6676C296011` |
+| SignalService          | `0x6Fc2fe9D9dd0251ec5E0727e826Afbb0Db2CBe0D` |
+| Bridge                 | `0xA098b76a3Dd499D3F6D58D8AcCaFC8efBFd06807` |
+| ERC20Vault             | `0x2259662ed5dE0E09943Abe701bc5f5a108eABBAa` |
+| ERC721Vault            | `0x046b82D9010b534c716742BE98ac3FEf3f2EC99f` |
+| ERC1155Vault           | `0x9Ae5945Ab34f6182F75E16B73e037421F341fEe3` |
+
+| Contract Name (Rollup-Specific) | Address                                      |
+| ------------------------------- | -------------------------------------------- |
+| TaikoL1                         | `0x79C9109b764609df928d16fC4a91e9081F7e87DB` |
+| RollupAddressManager            | `0x1F027871F286Cf4B7F898B21298E7B3e090a8403` |
+| GuardianProver                  | `0x92F195a8702da2104aE8E3E10779176E7C35d6BC` |
+| AssignmentHook                  | `0x9e640a6aadf4f664CF467B795c31332f44AcBe6c` |
+| SgxVerifier                     | `0x532EFBf6D62720D0B2a2Bb9d11066E8588cAE6D9` |
+| AutomataDcapAttestation         | `0xC6cD3878Fc56F2b2BaB0769C580fc230A95e1398` |
+| PemCertChainLib                 | `0x08d7865e7F534d743Aba5874A9AD04bcB223a92E` |
 
 ## Taiko (Hekla) contracts
 
-| Contract Name (Shared)       | Address                              |
-| -------------------- | -------------------------------------------- |
-| Bridge               | `0x1670090000000000000000000000000000000001` |
-| ERC20Vault           | `0x1670090000000000000000000000000000000002` |
-| ERC721Vault          | `0x1670090000000000000000000000000000000003` |
-| ERC1155Vault         | `0x1670090000000000000000000000000000000004` |
-| SignalService        | `0x1670090000000000000000000000000000000005` |
-| SharedAddressManager | `0x1670090000000000000000000000000000000006` |
-
-| Contract Name (Rollup-Specific)        | Address                    |
-| -------------------- | -------------------------------------------- |
-| TaikoL2              | `0x1670090000000000000000000000000000010001` |
-| RollupAddressManager | `0x1670090000000000000000000000000000010002` |
-| BridgedTaikoToken    | `0xebf1f662bf092ff0d913a9fe9d7179b0efef1611` |
+| Contract Name (Shared) | Address                                      |
+| ---------------------- | -------------------------------------------- |
+| Bridge                 | `0x1670090000000000000000000000000000000001` |
+| ERC20Vault             | `0x1670090000000000000000000000000000000002` |
+| ERC721Vault            | `0x1670090000000000000000000000000000000003` |
+| ERC1155Vault           | `0x1670090000000000000000000000000000000004` |
+| SignalService          | `0x1670090000000000000000000000000000000005` |
+| SharedAddressManager   | `0x1670090000000000000000000000000000000006` |
+
+| Contract Name (Rollup-Specific) | Address                                      |
+| ------------------------------- | -------------------------------------------- |
+| TaikoL2                         | `0x1670090000000000000000000000000000010001` |
+| RollupAddressManager            | `0x1670090000000000000000000000000000010002` |
+| BridgedTaikoToken               | `0xebf1f662bf092ff0d913a9fe9d7179b0efef1611` |
 
 ## Rollup contracts owner
 

diff --git a/packages/docs-site/src/content/docs/resources/prover-marketplace.md b/packages/docs-site/src/content/docs/resources/prover-marketplace.md
@@ -9,5 +9,5 @@ Any provers added to this page must be tested by the team to ensure they have go
 
 ## Prover marketplace list
 
-| Name   | Endpoint                              |
-| ------ | ------------------------------------- |
+| Name | Endpoint |
+| ---- | -------- |
diff --git a/packages/taikoon-ui/.env.example b/packages/taikoon-ui/.env.example
@@ -1,2 +1,3 @@
-PUBLIC_WALLETCONNECT_PROJECT_ID=
-PUBLIC_IPFS_GATEWAY=
+PUBLIC_WALLETCONNECT_PROJECT_ID=fake
+PUBLIC_IPFS_GATEWAY=https://taikoons-fake-ipfs-gateway.vercel.app/ipfs/
+PUBLIC_LAUNCH_DATE=2024-05-26T00:00:00
diff --git a/packages/taikoon-ui/package.json b/packages/taikoon-ui/package.json
@@ -7,7 +7,8 @@
     "build": "vite build",
     "preview": "vite preview",
     "test": "npm run test:integration && npm run test:unit",
-    "check": "svelte-kit sync && svelte-check --tsconfig ./tsconfig.json",
+    "svelte:check": "svelte-kit sync && svelte-check --tsconfig ./tsconfig.json",
+    "check": "npm run svelte:check",
     "check:watch": "svelte-kit sync && svelte-check --tsconfig ./tsconfig.json --watch",
     "lint": "prettier --check ./src && eslint ./src --fix",
     "format": "prettier --write ./src",
@@ -23,10 +24,12 @@
     "@sveltejs/kit": "^2.0.0",
     "@sveltejs/vite-plugin-svelte": "^3.0.0",
     "@types/eslint": "^8.56.0",
+    "@types/jest": "^29.5.12",
     "@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",
+    "dotenv": "^16.4.5",
     "eslint": "^8.56.0",
     "eslint-config-prettier": "^9.1.0",
     "eslint-plugin-simple-import-sort": "^12.0.0",
@@ -65,7 +68,6 @@
     "debug": "^4.3.4",
     "minidenticons": "^4.2.1",
     "postcss": "^8.4.38",
-    "svelte-countdown": "^1.1.2",
     "tailwindcss": "^3.4.3",
     "viem": "^2.9.29"
   }

diff --git a/packages/taikoon-ui/src/components/AnimatedArrow/AnimatedArrow.svelte b/packages/taikoon-ui/src/components/AnimatedArrow/AnimatedArrow.svelte
@@ -0,0 +1,45 @@
+<script lang="ts">
+  import { Icons } from '$components/core/Icons';
+  import { classNames } from '$lib/util/classNames';
+  export let isHovered = false;
+  const ArrowIcon = Icons.ArrowRightFilled;
+
+  const wrapperClasses = classNames(
+    'bg-primary-content',
+    'rounded-full',
+    'w-[32px]',
+    'h-[32px]',
+    'flex',
+    'items-center',
+    'justify-center',
+    'overflow-hidden',
+  );
+
+  $: arrowsWrapper = classNames(
+    'w-full',
+    'h-full',
+    'relative',
+
+    'flex',
+    'items-center',
+    'justify-center',
+    'transition',
+    'transform',
+    isHovered ? 'translate-x-[100%]' : null,
+    'ease-in-out',
+    'duration-300',
+  );
+
+  const arrowClasses = classNames('absolute');
+
+  const leftArrowClasses = classNames(arrowClasses, 'left-[-100%]');
+
+  const rightArrowClasses = classNames(arrowClasses);
+</script>
+
+<div class={wrapperClasses}>
+  <div class={arrowsWrapper}>
+    <ArrowIcon size="32" class={leftArrowClasses} />
+    <ArrowIcon size="32" class={rightArrowClasses} />
+  </div>
+</div>
diff --git a/packages/taikoon-ui/src/components/AnimatedArrow/index.ts b/packages/taikoon-ui/src/components/AnimatedArrow/index.ts
@@ -0,0 +1 @@
+export { default as AnimatedArrow } from './AnimatedArrow.svelte';
diff --git a/packages/taikoon-ui/src/components/AnimatedTaikoon/AnimatedTaikoon.svelte b/packages/taikoon-ui/src/components/AnimatedTaikoon/AnimatedTaikoon.svelte
@@ -1,11 +1,15 @@
-<script>
-  import { getContext } from 'svelte';
-  const ctx = getContext('iconCtx') ?? {};
+<script lang="ts">
   export let size = 'full';
-  export let role = ctx.role || 'img';
-  export let ariaLabel = 'angle up solid';
-  export let title = {};
-  export let desc = {};
+  export let role = 'img';
+  export let ariaLabel = 'animated taikoon';
+  export let title = {
+    id: `animated-taikoon-title-${Math.random().toString(36).substring(7)}`,
+    title: ariaLabel,
+  };
+  export let desc = {
+    id: `animated-taikoon-desc-${Math.random().toString(36).substring(7)}`,
+    desc: 'An animated taikoon',
+  };
   import { onDestroy, onMount } from 'svelte';
 
   import { Theme, theme } from '../../stores/theme';
@@ -32,7 +36,7 @@
 
   $: colorPairIndex = 0;
 
-  let animationIntervalId;
+  let animationIntervalId: any;
   onMount(() => {
     animationIntervalId = setInterval(() => {
       primaryColor = colorPairs[colorPairIndex].primary;

diff --git a/packages/taikoon-ui/src/components/Collection/Collection.svelte b/packages/taikoon-ui/src/components/Collection/Collection.svelte
@@ -1,21 +1,21 @@
 <script lang="ts">
   import { getContext } from 'svelte';
-  import { t } from 'svelte-i18n';
 
   import { ResponsiveController } from '$components/core/ResponsiveController';
   import { classNames } from '$lib/util/classNames';
-  import { InputBox } from '$ui/InputBox';
-  import { Select } from '$ui/Select';
+  import type { ITaikoonDetail } from '$stores/taikoonDetail';
 
   import { NftRenderer } from '../NftRenderer';
-  import { filterFormWrapperClasses, taikoonsWrapperClasses, wrapperClasses } from './classes';
+  import { filterFormWrapperClasses, taikoonsWrapperClasses, titleClasses, wrapperClasses } from './classes';
   import { default as TaikoonDetail } from './TaikoonDetail.svelte';
 
   export let tokenIds: number[] = [];
   let windowSize: 'sm' | 'md' | 'lg' = 'md';
 
+  export let title: string = 'The Collection';
+
   export let isLoading = false;
-  const taikoonDetailState = getContext('taikoonDetail');
+  const taikoonDetailState = getContext<ITaikoonDetail>('taikoonDetail');
 
   $: selectedTaikoonId = -1;
 
@@ -40,23 +40,7 @@
   {/if}
   <div class="flex flex-col w-full h-full">
     <div class={filterFormWrapperClasses}>
-      <InputBox class="w-full" size="lg" placeholder={$t('content.collection.search.placeholder')} />
-
-      <Select
-        onSelect={(value) => {
-          console.warn(value);
-        }}
-        label={$t('content.collection.filter.latest')}
-        options={[
-          {
-            label: $t('content.collection.filter.latest'),
-            value: 'latest',
-          },
-          {
-            label: $t('content.collection.filter.oldest'),
-            value: 'oldest',
-          },
-        ]} />
+      <div class={titleClasses}>{title}</div>
     </div>
     <div class={taikoonsWrapperClasses}>
       {#each tokenIds as tokenId}

diff --git a/packages/taikoon-ui/src/components/Collection/classes.ts b/packages/taikoon-ui/src/components/Collection/classes.ts
@@ -34,6 +34,7 @@ export const taikoonsWrapperClasses = classNames(
   'gap-5',
   'p-5',
   'grid',
+  'xl:grid-cols-8',
   'lg:grid-cols-6',
   'md:grid-cols-4',
   'grid-cols-3',
@@ -74,3 +75,10 @@ export const detailTitleClasses = classNames(
 );
 
 export const chipWrapperClasses = classNames('my-2', 'flex', 'flex-row', 'w-full', 'justify-start');
+
+export const titleClasses = classNames(
+  'font-clash-grotesk',
+  'text-[57px]/[64px]',
+  'text-content-primary',
+  'font-semibold',
+);