sdk-react-ui overview

@alphscan/sdk-react-ui provides React components for displaying normalized events (e.g. from the transaction normalized-events API). Components use Tailwind CSS and support dark mode. They are designed to work with data from @alphscan/sdk or @alphscan/sdk-react (e.g. useTxNormalizedEvents).

Repository & package

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

Part of AlphScan; npm packages are private until release.

Features

NormalizedEventsList — render a list of normalized events with optional custom row component or per-category row (e.g. ContractCallEventRow for contract_call).
NormalizedEventRow — default row for any event (category, from/to, amount, tx link).
NormalizedEventRowByCategory — picks a category-specific row when available, otherwise NormalizedEventRow.
ContractCallEventRow — detailed row for contract_call events (method, parameters, token approved).

Package

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

Peer: react >= 18. Styling: import @alphscan/sdk-react-ui/styles.css (Tailwind output).

Quick example

import { NormalizedEventsList } from "@alphscan/sdk-react-ui";
import "@alphscan/sdk-react-ui/styles.css";
import { useTxNormalizedEvents } from "@alphscan/sdk-react";

function TxEvents({ txId }: { txId: string | undefined }) {
  const { data, loading, error } = useTxNormalizedEvents(txId);
  if (loading || error || !data) return null;
  return (
    <NormalizedEventsList
      events={data.events}
      emptyMessage="No events"
      explorerUrl="https://explorer.alephium.org"
    />
  );
}

Exports

Export	Description
NormalizedEventsList	List container with configurable row rendering.
NormalizedEventRow	Default event row.
NormalizedEventRowByCategory	Category-aware row (e.g. contract_call).
ContractCallEventRow	Row for contract_call events.

Next steps

Installation

Install and add styles.

NormalizedEventsList

List component and props.

Event row components

NormalizedEventRow, ContractCallEventRow, NormalizedEventRowByCategory.

Components reference

All components and props.

​Repository & package

​Features

​Package

​Quick example

​Exports

​Next steps