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 @@
+
- {#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;
}