diff --git a/packages/taikoon-ui/src/components/Collection/Collection.svelte b/packages/taikoon-ui/src/components/Collection/Collection.svelte index 8692ed6721..932d922ef3 100644 --- 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,8 +61,9 @@
{title}
+
- {#each tokenIds as tokenId} + {#each visibleTokenIds as tokenId} @@ -57,6 +71,15 @@ {/each}
+ + diff --git a/packages/taikoon-ui/src/components/NftRenderer/NftRenderer.svelte b/packages/taikoon-ui/src/components/NftRenderer/NftRenderer.svelte index 74a8ae7bf0..cef078fb9a 100644 --- 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 index eb0edcafbf..35df21346e 100644 --- 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 { 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 b/packages/taikoon-ui/src/lib/ipfs/httpGet.ts similarity index 52% rename from packages/taikoon-ui/src/lib/ipfs/get.ts rename to packages/taikoon-ui/src/lib/ipfs/httpGet.ts index fd1f7a6d4e..090659e2b3 100644 --- a/packages/taikoon-ui/src/lib/ipfs/get.ts +++ b/packages/taikoon-ui/src/lib/ipfs/httpGet.ts @@ -1,4 +1,4 @@ -export default async function get(url: string, json?: boolean): Promise { +export default async function httpGet(url: string, json?: boolean): Promise { 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 index aaf516e2bb..7d30d458f3 100644 --- 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 index fca3f71006..4c9f626f7f 100644 --- 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; }