Skip to main content
useTokens fetches the token list from the Alphscan API (GET /token/all) using the client from context. It manages page index, loading, error, and refetch.

​
When to use

  • Inside AlphscanProvider.
  • When you need a paginated list of tokens with loading/error state and page control.

​
Signature

function useTokens(options?: UseTokensOptions): UseTokensResult

​
UseTokensOptions

OptionTypeDefaultDescription
pagenumber0Initial page (0-based).
pageSizenumber20Page size.
enabledbooleantrueIf false, no request is sent.

​
UseTokensResult

FieldTypeDescription
tokensTokenEntry[]Current page of tokens.
totalnumberTotal count.
pagenumberCurrent page (0-based).
pageSizenumberPage size.
totalPagesnumberTotal pages.
loadingbooleanRequest in progress.
errorError or nullError if request failed.
setPage(page: number) => voidSet current page (triggers refetch).
refetch() => Promise<void>Refetch current page.

​
Example

import { useTokens } from "@alphscan/sdk-react";

function TokenList() {
  const { tokens, total, page, setPage, totalPages, pageSize, loading, error } =
    useTokens({ pageSize: 20, enabled: true });
  const offset = page * pageSize;

  if (loading) return <p>Loading…</p>;
  if (error) return <p>Error: {error.message}</p>;

  return (
    <div>
      <ul>
        {tokens.map((t) => (
          <li key={t.id}>{t.symbol} – {t.name}</li>
        ))}
      </ul>
      <p>Page {page + 1} / {totalPages} ({total} total)</p>
      <button onClick={() => setPage(page - 1)} disabled={page === 0}>Prev</button>
      <button onClick={() => setPage(page + 1)} disabled={page >= totalPages - 1}>Next</button>
    </div>
  );
}
The hook uses 0-based page internally and sends page + 1 to the API.