merge ui-qa-checklist into feat/taikoon-alt-networks

taikoxyz · May 9, 2024 · 36cc13d · 36cc13d
2 parents 2d88ba1 + d6a7ee0
commit 36cc13d
Show file tree

Hide file tree

Showing 125 changed files with 18,331 additions and 1,570 deletions.
diff --git a/.github/workflows/bridge-ui-ci.yml b/.github/workflows/bridge-ui-ci.yml
@@ -1,7 +1,6 @@
 name: Bridge UI Build and Checks
 
-on:
-  workflow_call
+on: workflow_call
 
 jobs:
   build:

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

diff --git a/.github/workflows/guardians-ui-ci.yml b/.github/workflows/guardians-ui-ci.yml
@@ -1,7 +1,6 @@
 name: Guardians UI Build and Checks
 
-on:
-  workflow_call
+on: workflow_call
 
 jobs:
   check-guardian-prover-health-check-ui:

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

diff --git a/.github/workflows/taikoon-ui-ci.yml b/.github/workflows/taikoon-ui-ci.yml
@@ -1,7 +1,6 @@
 name: Taikoon UI Build and Checks
 
-on:
-  workflow_call
+on: workflow_call
 
 jobs:
   build:
@@ -20,24 +19,17 @@ jobs:
       - name: Install pnpm dependencies
         uses: ./.github/actions/install-pnpm-dependencies
 
-      - name: Copy .env.example to .env
-        working-directory: ./packages/guardian-prover-health-check-ui
-        run: cp .env.example .env
-
-      - name: Export config to .env
-        working-directory: ./packages/guardian-prover-health-check-ui
-        run: pnpm export:config
-
       - 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/"
+          export $(cat .env.example | xargs)
           pnpm build
 
       - name: Svelte check
         working-directory: ./packages/taikoon-ui
-        run: pnpm svelte:check
+        run: |
+          export $(cat .env.example | xargs)
+          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/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/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/.github/workflows/vercel-deploy.yml b/.github/workflows/vercel-deploy.yml
@@ -11,18 +11,18 @@ on:
         required: true
     secrets:
       vercel_project_id:
-        description: 'Vercel Project ID'
+        description: "Vercel Project ID"
         required: true
       vercel_org_id:
-        description: 'Vercel ORG ID'
+        description: "Vercel ORG ID"
         required: true
       vercel_token:
-        description: 'Vercel TOKEN'
+        description: "Vercel TOKEN"
         required: true
 
 env:
-    VERCEL_ORG_ID: ${{ secrets.vercel_org_id }}
-    VERCEL_PROJECT_ID: ${{ secrets.vercel_project_id }}
+  VERCEL_ORG_ID: ${{ secrets.vercel_org_id }}
+  VERCEL_PROJECT_ID: ${{ secrets.vercel_project_id }}
 
 jobs:
   build-deploy:

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
@@ -23,10 +23,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 +67,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',
+);