fix(nfts): taikoon-ui design r4 (#17423)

packages/taikoon-ui/package.json

@@ -14,7 +14,7 @@
  "format": "prettier --write ./src",
  "test:integration": "playwright test",
  "test:unit": "vitest",
- "start": "npm run generate:abi && vite dev --open",
+ "start": "npm run generate:abi && vite dev --open --host 0.0.0.0",
  "generate:abi": "cd ../nfts && pnpm compile && cd - && wagmi generate"
  },
  "devDependencies": {

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

@@ -5,7 +5,7 @@
  const ArrowIcon = Icons.ArrowRightFilled;
 
  const wrapperClasses = classNames(
- 'bg-primary-content',
+ 'bg-white',
  'rounded-full',
  'w-[32px]',
  'h-[32px]',
@@ -19,7 +19,6 @@
  'w-full',
  'h-full',
  'relative',
-
  'flex',
  'items-center',
  'justify-center',

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

@@ -1,7 +1,7 @@
 <script lang="ts">
- import { getContext } from 'svelte';
+ import { ResponsiveController } from '@taiko/ui-lib';
+ import { getContext, onMount } from 'svelte';
 
- import { ResponsiveController } from '$components/core/ResponsiveController';
  import { classNames } from '$lib/util/classNames';
  import type { ITaikoonDetail } from '$stores/taikoonDetail';
 
@@ -21,15 +21,19 @@
 
  $: selectedTaikoonId = -1;
 
+ onMount(() => {
+ onRouteChange();
+ });
+
  async function onRouteChange() {
  const hash = location.hash;
  const taikoonId = parseInt(hash.replace('#', ''));
- if (isNaN(taikoonId)) return;
- selectedTaikoonId = taikoonId;
+ selectedTaikoonId = isNaN(taikoonId) ? -1 : taikoonId;
+
  taikoonDetailState.set({
  ...$taikoonDetailState,
  tokenId: taikoonId,
- isModalOpen: true,
+ isModalOpen: taikoonId > 0,
  });
  }
 </script>

packages/taikoon-ui/src/components/Collection/TaikoonDetail.svelte

@@ -9,17 +9,18 @@
  import { Spinner } from '$ui/Spinner';
 
  import Token from '../../lib/token';
+ import type { IAddress } from '../../types';
  import { NftRenderer } from '../NftRenderer';
  import { chipWrapperClasses, detailClasses, detailContainerClasses, detailTitleClasses } from './classes';
 
  export let isLoading = false;
  export let taikoonId: number = -1;
 
  $: shortenedAddress = '...';
-
+ $: owner = '0x0' as IAddress;
  async function updateShortenedAddress() {
  if (taikoonId < 0) return;
- const owner = await Token.ownerOf(taikoonId);
+ owner = await Token.ownerOf(taikoonId);
  shortenedAddress = await shortenAddress(owner);
  }
 
@@ -36,6 +37,7 @@
  withEvents
  on:click={() => {
  taikoonId = -1;
+ window.location.hash = '';
  }}
  class="my-2 bg-transparent"
  size="14" />
@@ -51,10 +53,7 @@
  </p>
 
  <div class={detailContainerClasses}>
- <InfoRow
- label={$t('content.collection.ownedBy')}
- value={shortenedAddress}
- href={'/collection/${taikoon.owner}'} />
+ <InfoRow label={$t('content.collection.ownedBy')} value={shortenedAddress} href={`/collection/${owner}`} />
  </div>
  {/if}
  </div>

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

@@ -1,10 +1,10 @@
 <script lang="ts">
+ import { ResponsiveController } from '@taiko/ui-lib';
  import { getAccount } from '@wagmi/core';
  import { onDestroy, onMount } from 'svelte';
  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';
@@ -27,7 +27,10 @@
  connectButtonClasses,
  connectedButtonClasses,
  } from './classes';
+
  export let connected = false;
+ import { Icons } from '$components/core/Icons';
+ const { CircleUserRegular: CircleUserIcon } = Icons;
 
  let web3modalOpen = false;
  let unsubscribeWeb3Modal = noop;
@@ -52,14 +55,21 @@
 
  onDestroy(unsubscribeWeb3Modal);
 
- connectedSourceChain.subscribe(async () => {
+ $: balanceStr = '0.000';
+
+ async function load() {
  const account = getAccount(config);
  if (!account.address) return;
  balance = await getBalance(account.address);
- });
 
- import { Icons } from '$components/core/Icons';
- const { CircleUserRegular: CircleUserIcon } = Icons;
+ if (parseFloat(formatEther(balance)) > 10) {
+ balanceStr = parseFloat(formatEther(balance)).toFixed(1);
+ } else {
+ balanceStr = parseFloat(formatEther(balance)).toFixed(3);
+ }
+ }
+
+ $: $account, load();
 </script>
 
 {#if connected}
@@ -70,9 +80,9 @@
  src={(currentChainId && getChainImage(currentChainId)) || 'chains/ethereum.svg'} />
  {#if windowSize !== 'md'}
  <span class={buttonContentClasses}
- >{`Ξ ${parseFloat(formatEther(balance)).toFixed(3)}`}
+ >{`Ξ ${balanceStr}`}
  <span class={addressClasses}>
- {#await shortenAddress(accountAddress)}
+ {#await shortenAddress(accountAddress, 5, 2)}
  ...
  {:then displayAddress}
  {displayAddress}

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

@@ -32,9 +32,13 @@ export const addressClasses = classNames(
 
 export const chainIconClasses = classNames(
  'w-[24px]',
- 'ml-1',
- //'md:ml-[0]',
+ // sm
+ 'ml-3',
+ // md
  'md:mx-2',
+ // lg
+ 'lg:ml-2',
+ 'lg:mr-0',
 );
 
 export const connectButtonClasses = classNames(

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

@@ -1,17 +1,14 @@
 <script lang="ts">
- import { getAccount } from '@wagmi/core';
+ import { ResponsiveController } from '@taiko/ui-lib';
  import { zeroAddress } from 'viem';
 
- import TaikoonsIcon from '$assets/taikoons-icon.png';
  import { Icons } from '$components/core/Icons';
- import { ResponsiveController } from '$components/core/ResponsiveController';
  import { MobileMenu } from '$components/MobileMenu';
+ import Token from '$lib/token';
+ import User from '$lib/user';
  import { classNames } from '$lib/util/classNames';
- import isCountdownActive from '$lib/util/isCountdownActive';
  import { account } from '$stores/account';
- import { connectedSourceChain } from '$stores/network';
  import { pageScroll } from '$stores/pageScroll';
- import { config } from '$wagmi-config';
 
  import type { IAddress } from '../../types';
  import { ConnectButton } from '../ConnectButton';
@@ -33,30 +30,38 @@
 
  $: headerClasses = classNames(
  baseHeaderClasses,
- $pageScroll ? 'md:glassy-background-lg' : null,
- $pageScroll ? 'md:border-b-[1px] md:border-border-divider-default' : 'md:border-b-[1px] md:border-transparent',
+ $pageScroll ? 'glassy-background-lg' : null,
+ $pageScroll ? 'border-b-[1px] border-border-divider-default' : 'border-b-[1px] border-transparent',
  $$props.class,
  );
 
- $: taikoonsOptions = [
- {
- icon: 'FileImageRegular',
- label: 'The 888',
- href: '/collection/',
- },
- ];
-
- connectedSourceChain.subscribe(async () => {
- if (address !== zeroAddress) return;
- const account = getAccount(config);
- if (!account.address) return;
- address = account.address;
- taikoonsOptions.push({
- icon: 'FileImageRegular',
- label: 'Collection',
- href: `/collection/${address.toLowerCase()}`,
- });
- });
+ $: $account, checkYourCollection();
+ $: displayYourTaikoonsButton = false;
+ $: isChecking = false;
+ async function checkYourCollection() {
+ if (isChecking) return;
+ isChecking = true;
+ if (!$account || !$account.address || $account.address === zeroAddress) {
+ displayYourTaikoonsButton = false;
+ isChecking = false;
+ return;
+ }
+
+ if (displayYourTaikoonsButton) return;
+
+ address = $account.address;
+
+ if (!address || address === zeroAddress) {
+ isChecking = false;
+ return;
+ }
+
+ const canMint = await Token.canMint();
+ const totalMintCount = await User.totalWhitelistMintCount();
+
+ displayYourTaikoonsButton = !canMint && totalMintCount > 0;
+ isChecking = false;
+ }
 
  let windowSize: 'sm' | 'md' | 'lg' = 'md';
 </script>
@@ -66,38 +71,30 @@
 <div class={wrapperClasses}>
  <div class={classNames(headerClasses, $$props.class)}>
  <a href="/" class={classNames()}>
- <img alt="taikoons-logo" class={taikoonsIconClasses} src={TaikoonsIcon} />
+ <img alt="taikoons-logo" class={taikoonsIconClasses} src="/taikoons-icon.svg" />
  </a>
 
  {#if windowSize === 'sm'}
  <div class={rightSectionClasses}>
- {#if isCountdownActive()}
- <ThemeButton />
- {:else}
- <button on:click={() => (isMobileMenuOpen = !isMobileMenuOpen)} class={mobileMenuButtonClasses}>
- {#if isMobileMenuOpen}
- <CloseMenuIcon size="14" />
- {:else}
- <MenuIcon size="14" />
- {/if}
- </button>
- {/if}
+ <button on:click={() => (isMobileMenuOpen = !isMobileMenuOpen)} class={mobileMenuButtonClasses}>
+ {#if isMobileMenuOpen}
+ <CloseMenuIcon size="14" />
+ {:else}
+ <MenuIcon size="14" />
+ {/if}
+ </button>
  </div>
  {:else}
- {#if !isCountdownActive()}
- <div class={menuButtonsWrapperClasses}>
- <a href="/mint" type="neutral" class={navButtonClasses}>Mint</a>
+ <div class={menuButtonsWrapperClasses}>
+ <a href="/mint" type="neutral" class={navButtonClasses}>Mint</a>
 
- <a href="/collection" type="neutral" class={navButtonClasses}>Collection</a>
- {#if address !== zeroAddress}
- <a href={`/collection/${address.toLowerCase()}`} type="neutral" class={navButtonClasses}> Your taikoons</a>
- {/if}
- </div>
- {/if}
- <div class={rightSectionClasses}>
- {#if !isCountdownActive()}
- <ConnectButton connected={$account?.isConnected} />
+ <a href="/collection" type="neutral" class={navButtonClasses}>Collection</a>
+ {#if displayYourTaikoonsButton}
+ <a href={`/collection/${address.toLowerCase()}`} type="neutral" class={navButtonClasses}> Your taikoons</a>
  {/if}
+ </div>
+ <div class={rightSectionClasses}>
+ <ConnectButton connected={$account?.isConnected} />
  <div class="hidden md:inline-flex">
  <div class={themeButtonSeparatorClasses} />
  <ThemeButton />

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

@@ -45,6 +45,7 @@ export const wrapperClasses = classNames('w-full', 'z-0', 'fixed', 'top-0');
 export const themeButtonSeparatorClasses = 'v-sep my-auto ml-0 mr-4 h-[24px]';
 
 export const navButtonClasses = classNames(
+ 'btn btn-neutral',
  'w-[140px]',
  'h-[44px]',
  'bg-nav-button',