Skip to main content
@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
GitHubgithub.com/AlphScan/sdk-react-ui
npmnpmjs.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

ExportDescription
NormalizedEventsListList container with configurable row rendering.
NormalizedEventRowDefault event row.
NormalizedEventRowByCategoryCategory-aware row (e.g. contract_call).
ContractCallEventRowRow 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.