feat: load more token holders

greymass · Dec 16, 2024 · 2f636e9 · 2f636e9
1 parent 863b76f
commit 2f636e9
Show file tree

Hide file tree

Showing 3 changed files with 21 additions and 4 deletions.
diff --git a/src/routes/[network]/(explorer)/token/[contract]/[symbol]/+page.svelte b/src/routes/[network]/(explorer)/token/[contract]/[symbol]/+page.svelte
@@ -1,4 +1,5 @@
 <script lang="ts">
+	import Button from '$lib/components/button/button.svelte';
 	import Code from '$lib/components/code.svelte';
 	import Account from '$lib/components/elements/account.svelte';
 	import AssetText from '$lib/components/elements/asset.svelte';
@@ -62,6 +63,12 @@
 			{/each}
 		</tbody>
 	</table>
+
+	{#if data.loadMoreUrl}
+		<Button href={data.loadMoreUrl} data-sveltekit-noscroll data-sveltekit-replacestate
+			>Load more</Button
+		>
+	{/if}
 {/if}
 
 {#if context.settings.data.debugMode}

diff --git a/src/routes/[network]/(explorer)/token/[contract]/[symbol]/+page.ts b/src/routes/[network]/(explorer)/token/[contract]/[symbol]/+page.ts
@@ -12,10 +12,12 @@ class LightAPIBalance extends Struct {
 	@Struct.field(Asset) declare balance: Asset;
 }
 
-export const load: PageLoad = async ({ fetch, params, parent }) => {
+export const load: PageLoad = async ({ fetch, params, parent, url }) => {
 	const { network } = await parent();
 
-	const response = await fetch(`/${network}/api/token/${params.contract}/${params.symbol}`);
+	const count = Number(url.searchParams.get('count')) || 100;
+	const baseUrl = `/${network}/api/token/${params.contract}/${params.symbol}?count=${count}`;
+	const response = await fetch(baseUrl);
 	const json = await response.json();
 
 	const stats = API.v1.GetCurrencyStatsItemResponse.from(json.stats);
@@ -26,10 +28,17 @@ export const load: PageLoad = async ({ fetch, params, parent }) => {
 		});
 	});
 
+	// Prevent loading more than 1000 entries since the API ends at 1000
+	const loadMoreUrl =
+		count < 1000
+			? `/${network}/token/${params.contract}/${params.symbol}?count=${count + 100}`
+			: undefined;
+
 	return {
 		numholders: json.numholders,
 		topholders,
 		stats,
+		loadMoreUrl,
 		title: `${stats.supply.symbol.name} Token`,
 		subtitle: `A token on the ${params.contract} smart contract.`,
 		pageMetaTags: {

diff --git a/src/routes/[network]/api/token/[contract]/[symbol]/+server.ts b/src/routes/[network]/api/token/[contract]/[symbol]/+server.ts
@@ -4,7 +4,7 @@ import { getChainDefinitionFromParams, NetworkState } from '$lib/state/network.s
 import { getCacheHeaders } from '$lib/utils';
 import { getBackendNetwork, getLightAPIURL } from '$lib/wharf/client/ssr';
 
-export async function GET({ fetch, params }: RequestEvent) {
+export async function GET({ fetch, params, url }: RequestEvent) {
 	const chain = getChainDefinitionFromParams(String(params.network));
 	if (!chain) {
 		return json({ error: 'Invalid chain specified' }, { status: 400 });
@@ -18,8 +18,9 @@ export async function GET({ fetch, params }: RequestEvent) {
 	}
 	const contract = params.contract.toLocaleLowerCase();
 	const symbol = params.symbol?.toLocaleUpperCase();
+	const count = Number(url.searchParams.get('count')) || 100;
 	const stats = await network.client.v1.chain.get_currency_stats(contract, symbol);
-	const topholders = await getTopHolders(network, contract, symbol);
+	const topholders = await getTopHolders(network, contract, symbol, count);
 	const numholders = await getNumHolders(network, contract, symbol);
 
 	return json(