feat(nfts): taikoon-ui performance upgrades (#17720)

taikoxyz · Jul 4, 2024 · 936bb95 · 936bb95
1 parent 3220a22
commit 936bb95
Show file tree

Hide file tree

Showing 6 changed files with 51 additions and 22 deletions.
diff --git a/packages/taikoon-ui/src/components/Collection/Collection.svelte b/packages/taikoon-ui/src/components/Collection/Collection.svelte
@@ -2,6 +2,7 @@
   import { ResponsiveController } from '@taiko/ui-lib';
   import { getContext, onMount } from 'svelte';
 
+  import { Button } from '$components/core/Button';
   import { classNames } from '$lib/util/classNames';
   import type { ITaikoonDetail } from '$stores/taikoonDetail';
 
@@ -10,6 +11,7 @@
   import { default as TaikoonDetail } from './TaikoonDetail.svelte';
 
   export let tokenIds: number[] = [];
+
   let windowSize: 'sm' | 'md' | 'lg' = 'md';
 
   export let disableClick = false;
@@ -21,10 +23,21 @@
 
   $: selectedTaikoonId = -1;
 
+  $: visibleTokenIds = [] as number[];
   onMount(() => {
     onRouteChange();
   });
 
+  $: tokenBatch = 50;
+  $: tokenIds,
+    visibleTokenIds.length === 0 &&
+      (visibleTokenIds = tokenIds.length > tokenBatch ? tokenIds.slice(0, tokenBatch) : tokenIds);
+
+  function loadMore() {
+    const nextBatch = tokenIds.slice(visibleTokenIds.length, visibleTokenIds.length + tokenBatch);
+    visibleTokenIds = [...visibleTokenIds, ...nextBatch];
+  }
+
   async function onRouteChange() {
     const hash = location.hash;
     const taikoonId = parseInt(hash.replace('#', ''));
@@ -48,15 +61,25 @@
     <div class={filterFormWrapperClasses}>
       <div class={titleClasses}>{title}</div>
     </div>
+
     <div class={taikoonsWrapperClasses}>
-      {#each tokenIds as tokenId}
+      {#each visibleTokenIds as tokenId}
         <a
           href={disableClick ? '#' : `#${tokenId}`}
           class={classNames('w-full', 'rounded-xl', 'lg:rounded-3xl', 'md:rounded-2xl', 'overflow-hidden')}>
           <NftRenderer size="full" {tokenId} />
         </a>
       {/each}
     </div>
+
+    <Button
+      block
+      wide
+      type="primary"
+      class="my-12"
+      disabled={tokenIds.length === visibleTokenIds.length}
+      on:click={loadMore}>
+      More</Button>
   </div>
 </div>
 

diff --git a/packages/taikoon-ui/src/components/NftRenderer/NftRenderer.svelte b/packages/taikoon-ui/src/components/NftRenderer/NftRenderer.svelte
@@ -6,7 +6,6 @@
   import { DynamicImage } from '$components/DynamicImage';
   import IPFS from '$lib/ipfs';
   import { classNames } from '$lib/util/classNames';
-  //import { nftCache } from '$stores/nftCache';
   import { Theme, theme } from '$stores/theme';
   import { Spinner } from '$ui/Spinner';
 
@@ -18,18 +17,6 @@
 
   async function getTokenUri(id: number) {
     if (tokenId <= 0 || Number.isNaN(id)) return '';
-    /*
-    const cached = $nftCache[id];
-    let metadata;
-    if (!cached) {
-      metadata = await IPFS.getMetadata(id);
-      nftCache.set({
-        ...$nftCache,
-        [id]: JSON.stringify(metadata),
-      });
-    } else {
-      metadata = JSON.parse(cached);
-    }*/
     const metadata = await IPFS.getMetadata(id);
     if (!metadata || !metadata.image) return '';
     tokenURI = metadata.image;

diff --git a/packages/taikoon-ui/src/lib/ipfs/getMetadata.ts b/packages/taikoon-ui/src/lib/ipfs/getMetadata.ts
@@ -1,5 +1,10 @@
+import { get } from 'svelte/store';
+
+import { nftCache } from '$stores/nftCache';
+
 import Token from '../token';
-import get from './get';
+import httpGet from './httpGet';
+//import get from './get';
 
 export interface ITokenMetadata {
   name: string;
@@ -8,6 +13,20 @@ export interface ITokenMetadata {
 }
 export default async function getMetadata(tokenId: number): Promise<ITokenMetadata> {
   const tokenURI = await Token.tokenURI(tokenId);
-  const metadata = (await get(tokenURI, true)) as ITokenMetadata;
+  // const metadata = (await get(tokenURI, true)) as ITokenMetadata;
+
+  const cachedIds = get(nftCache);
+  const cached = cachedIds[tokenId];
+  let metadata;
+  if (!cached) {
+    metadata = (await httpGet(tokenURI, true)) as ITokenMetadata;
+    nftCache.set({
+      ...cachedIds,
+      [tokenId]: JSON.stringify(metadata),
+    });
+  } else {
+    metadata = JSON.parse(cached);
+  }
+
   return metadata;
 }
diff --git a/packages/taikoon-ui/src/lib/ipfs/get.ts → packages/taikoon-ui/src/lib/ipfs/httpGet.ts b/packages/taikoon-ui/src/lib/ipfs/get.ts → packages/taikoon-ui/src/lib/ipfs/httpGet.ts
@@ -1,4 +1,4 @@
-export default async function get(url: string, json?: boolean): Promise<any> {
+export default async function httpGet(url: string, json?: boolean): Promise<any> {
   const response = await fetch(url);
   return json ? response.json() : response.text();
 }
diff --git a/packages/taikoon-ui/src/lib/ipfs/index.ts b/packages/taikoon-ui/src/lib/ipfs/index.ts
@@ -1,8 +1,8 @@
-import get from './get';
 import getMetadata from './getMetadata';
+import httpGet from './httpGet';
 
 const IPFS = {
-  get,
+  get: httpGet,
   getMetadata,
 };
 

diff --git a/packages/taikoon-ui/src/lib/wagmi/publicClient.ts b/packages/taikoon-ui/src/lib/wagmi/publicClient.ts
@@ -1,10 +1,10 @@
 import { createPublicClient, http } from 'viem';
-import { holesky } from 'viem/chains';
+import { taiko } from 'viem/chains';
 
 export default async function publicClient() {
   const client = createPublicClient({
-    chain: holesky,
-    transport: http('https://1rpc.io/holesky'),
+    chain: taiko,
+    transport: http('https://rpc.mainnet.taiko.xyz'),
   });
   return client;
 }