observer/web/src/components/EventPanel.tsx

/**
 * Every firing of one kind of event.
 *
 * The feed behind a row of the event index: which block, which accounts, what
 * fields. Rendered through the same `Payload` as every other decoded value, so
 * a pallet added next year has a working page the first time it emits.
 */

import { useEffect, useState } from 'react'
import { Link } from 'react-router-dom'

import type { AccountEvent } from '../api/generated/AccountEvent'
import { RequestFailed, fetchEventFeed } from '../api/rest'
import { height as fmtHeight, when } from '../lib/format'
import { href } from '../lib/routes'
import { Payload } from './Payload'

export function EventPanel({
  chain,
  pallet,
  variant,
  decimals,
  symbol,
}: {
  chain: string
  pallet: string
  variant: string
  decimals: number
  symbol: string
}) {
  const [rows, setRows] = useState<AccountEvent[] | null>(null)
  const [error, setError] = useState<string | null>(null)
  const [before, setBefore] = useState<number | null>(null)

  useEffect(() => {
    const controller = new AbortController()
    setRows(null)
    setError(null)
    fetchEventFeed(chain, pallet, variant, before ?? undefined, controller.signal)
      .then(setRows)
      .catch((e: unknown) => {
        if (controller.signal.aborted) return
        setError(e instanceof RequestFailed ? e.message : 'Could not reach the observer.')
      })
    return () => controller.abort()
  }, [chain, pallet, variant, before])

  const oldest = rows && rows.length > 0 ? rows[rows.length - 1]!.height : null

  return (
    <section className="panel" style={{ marginBottom: 26 }}>
      <div className="panel-head">
        <div>
          <div className="eyebrow">Event</div>
          <h2 className="panel-title" style={{ marginTop: 4, textTransform: 'none' }}>
            <code>
              {pallet}::{variant}
            </code>
          </h2>
        </div>
        <Link className="segmented panel-button" to={href({ chain, index: 'event' })}>
          All events
        </Link>
      </div>

      {error && <p className="empty">{error}</p>}
      {!error && rows === null && <p className="empty">Reading the record…</p>}
      {rows !== null && rows.length === 0 && (
        <p className="empty">
          This event has not fired in the indexed range. The runtime declares it and the chain has
          not reached for it.
        </p>
      )}

      {rows !== null && rows.length > 0 && (
        <div className="scroll-x">
          <table className="board">
            <caption className="visually-hidden">
              Every firing of {pallet}::{variant}, newest first
            </caption>
            <thead>
              <tr>
                <th scope="col">Block</th>
                <th scope="col" className="left">
                  Fields
                </th>
                <th scope="col" className="event-when">
                  When
                </th>
              </tr>
            </thead>
            <tbody>
              {rows.map((e) => (
                <tr key={`${e.height}-${e.index}`}>
                  <td className="numeral">
                    <Link to={href({ chain, block: String(e.height) })}>
                      #{fmtHeight(e.height)}
                    </Link>
                  </td>
                  <td className="left">
                    <Payload
                      value={e.fields}
                      ctx={{ chain, addresses: e.addresses, decimals, symbol }}
                    />
                  </td>
                  <td className="numeral event-when" style={{ color: 'var(--text-muted)' }}>
                    {when(e.at)}
                  </td>
                </tr>
              ))}
            </tbody>
          </table>
        </div>
      )}

      <div className="pager">
        <button
          className="segmented panel-button"
          disabled={before === null}
          onClick={() => setBefore(null)}
        >
          ← Newest
        </button>
        <button
          className="segmented panel-button"
          disabled={oldest === null || oldest <= 1}
          onClick={() => setBefore(oldest)}
        >
          Older →
        </button>
      </div>
    </section>
  )
}