sdk-react overview

@alphscan/sdk-react provides React bindings for the Alphscan API: a provider, hooks, and type-safe access to tokens and normalized events. It depends on @alphscan/sdk and is designed to work with @alphscan/sdk-react-ui for rendering.

Repository & package

	Link
GitHub	github.com/AlphScan/sdk-react
npm	npmjs.com/package/@alphscan/sdk-react

Part of AlphScan; npm packages are private until release.

Features

AlphscanProvider — wrap your app to provide the SDK client to the tree.
useClient() — get the client from context for one-off API calls.
useTokens() — paginated token list with loading/error state.
useTxNormalizedEvents() — fetch normalized events for a transaction by ID.

Package

npm install @alphscan/sdk-react @alphscan/sdk
# or
pnpm add @alphscan/sdk-react @alphscan/sdk

Peer: react >= 18.

Quick example

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

function TokenList() {
  const { data, loading, error, page, setPage } = useTokens({ pageSize: 20 });
  if (loading) return <p>Loading...</p>;
  if (error) return <p>Error: {error.message}</p>;
  return (
    <ul>
      {data?.tokens.map((t) => <li key={t.id}>{t.symbol}</li>)}
    </ul>
  );
}

function App() {
  return (
    <AlphscanProvider apiUrl="https://api.alphscan.io" apiKey="">
      <TokenList />
    </AlphscanProvider>
  );
}

Next steps

Installation

Install and add the package.

Provider & useClient

AlphscanProvider and useClient().

useTokens

Paginated token list hook.

useTxNormalizedEvents

Transaction normalized events hook.

Hooks reference

All hooks and options.

​Repository & package

​Features

​Package

​Quick example

​Next steps