@alphscan/sdk-react-ui

React UI components for Alphscan, built with Tailwind CSS. Includes overridable display components for normalized events.

Install

In your app (from the monorepo):

pnpm add @alphscan/sdk-react-ui

Ensure @alphscan/normalized-events and react are available (peer/dep).

Styles

Import the built Tailwind CSS once in your app (e.g. in main.tsx or _app.tsx):

import "@alphscan/sdk-react-ui/styles.css";

Normalized events display

Default list

import { NormalizedEventsList } from "@alphscan/sdk-react-ui";
import type { NormalizedEvent } from "@alphscan/normalized-events";

const events: NormalizedEvent[] = [...];

<NormalizedEventsList
  events={events}
  eventRowProps={{ explorerUrl: "https://explorer.alephium.org" }}
  emptyMessage="No events for this transaction"
/>

Override with custom row component

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

function MyEventRow({ event, index }: { event: NormalizedEvent; index: number }) {
  return <div key={event.id}>Custom: {event.category}</div>;
}

<NormalizedEventsList events={events} EventRowComponent={MyEventRow} />

Override with render prop

<NormalizedEventsList
  events={events}
  renderEvent={(event, index) => (
    <article key={event.id}>{/* custom markup */}</article>
  )}
/>

Style the default row

Use eventRowProps to pass className, badgeClassName, contentClassName, explorerUrl, amountDecimals to the default NormalizedEventRow:

<NormalizedEventsList
  events={events}
  eventRowProps={{
    className: "my-4 border-2",
    badgeClassName: "bg-blue-100",
    explorerUrl: "https://explorer.alephium.org",
    amountDecimals: 6,
  }}
/>

Single event row

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

<NormalizedEventRow
  event={event}
  explorerUrl="https://explorer.alephium.org"
  className="rounded-xl"
/>

Overridable API summary

| Prop | Description | |------|-------------| | renderEvent(event, index) | Custom ReactNode for each event (replaces default row). | | EventRowComponent | Component { event, index } used for each event (replaces default row). | | eventRowProps | Props passed to the default NormalizedEventRow (className, explorerUrl, etc.). | | className / listClassName | Container and list wrapper classes. | | emptyMessage | Shown when events.length === 0. |