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

.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

.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 }}

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

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"
   }

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>

packages/taikoon-ui/src/components/AnimatedArrow/index.ts

@@ -0,0 +1 @@
+export { default as AnimatedArrow } from './AnimatedArrow.svelte';

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;

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}

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',
+);

packages/taikoon-ui/src/components/ConnectButton/ConnectButton.svelte

@@ -4,6 +4,8 @@
   import { formatEther } from 'viem';
   import { zeroAddress } from 'viem';
 
+  import { ResponsiveController } from '$components/core/ResponsiveController';
+  import { Spinner } from '$components/core/Spinner';
   import { getChainImage } from '$lib/chain';
   import { web3modal } from '$lib/connect';
   import { refreshUserBalance } from '$lib/util/balance';
@@ -13,11 +15,18 @@
   import { account } from '$stores/account';
   import { ethBalance } from '$stores/balance';
   import { connectedSourceChain } from '$stores/network';
-  import { Button } from '$ui/Button';
   import { config } from '$wagmi-config';
 
+  let windowSize: 'sm' | 'md' | 'lg' = 'md';
+
   import type { IAddress } from '../../types';
-  import { addressClasses, buttonContentClasses, chainIconClasses, connectedButtonClasses } from './classes';
+  import {
+    addressClasses,
+    buttonContentClasses,
+    chainIconClasses,
+    connectButtonClasses,
+    connectedButtonClasses,
+  } from './classes';
   export let connected = false;
 
   let web3modalOpen = false;
@@ -48,6 +57,9 @@
     if (!account.address) return;
     balance = await getBalance(account.address);
   });
+
+  import { Icons } from '$components/core/Icons';
+  const { CircleUserRegular: CircleUserIcon } = Icons;
 </script>
 
 {#if connected}
@@ -56,22 +68,31 @@
       alt="chain icon"
       class={chainIconClasses}
       src={(currentChainId && getChainImage(currentChainId)) || 'chains/ethereum.svg'} />
-    <span class={buttonContentClasses}
-      >{`Ξ ${parseFloat(formatEther(balance)).toFixed(3)}`}
-      <span class={addressClasses}>
-        {#await shortenAddress(accountAddress, 4, 6)}
-          ...
-        {:then displayAddress}
-          {displayAddress}
-        {/await}
-      </span>
-    </span>
+    {#if windowSize !== 'md'}
+      <span class={buttonContentClasses}
+        >{`Ξ ${parseFloat(formatEther(balance)).toFixed(3)}`}
+        <span class={addressClasses}>
+          {#await shortenAddress(accountAddress)}
+            ...
+          {:then displayAddress}
+            {displayAddress}
+          {/await}
+        </span>
+      </span>{/if}
   </button>
 {:else}
-  <Button type="primary" loading={web3modalOpen} iconLeft={'CircleUserRegular'} on:click={connectWallet}>
+  <button class={connectButtonClasses} on:click={connectWallet}>
     {#if web3modalOpen}
-      Connecting
-    {:else}Connect Wallet
+      <Spinner size="sm" />
+      {#if windowSize !== 'md'}
+        Connecting
+      {/if}
+    {:else}
+      <CircleUserIcon size="16" />
+      {#if windowSize !== 'md'}
+        Connect Wallet{/if}
     {/if}
-  </Button>
+  </button>
 {/if}
+
+<ResponsiveController bind:windowSize />

packages/taikoon-ui/src/components/ConnectButton/classes.ts

@@ -6,6 +6,7 @@ export const connectedButtonClasses = classNames(
   'rounded-full',
   'flex',
   'items-center',
+  'h-[44px]',
   'gap-2',
   'font-bold',
 );
@@ -23,9 +24,28 @@ export const buttonContentClasses = classNames(
 export const addressClasses = classNames(
   'flex',
   'rounded-full',
-  'p-2.5',
+  'px-2.5',
+  'py-2',
   'bg-neutral-background',
   'border border-divider-border',
 );
 
-export const chainIconClasses = classNames('w-[24px]', 'ml-1');
+export const chainIconClasses = classNames(
+  'w-[24px]',
+  'ml-1',
+  //'md:ml-[0]',
+  'md:mx-2',
+);
+
+export const connectButtonClasses = classNames(
+  'w-max',
+  'h-[44px]',
+  'bg-primary',
+  'rounded-full',
+  'flex flex-row',
+  'justify-center',
+  'items-center',
+  'px-4',
+  'gap-4',
+  'font-medium',
+);