observer/web/src/components/StateIndex.tsx

/**
 * What is true right now.
 *
 * Everything else on this site is history — headers, events, extrinsics, all of
 * it a record of what happened. This is the other half, and it answers the
 * questions history cannot.
 *
 * The treasury is the case that made it necessary. This chain's treasury
 * address was set at genesis, so no extrinsic ever carried it and no event ever
 * announced it: `TreasuryPallet::set_treasury_account` shows *never* on the
 * call index and `TreasuryAccountUpdated` shows *never* on the event index, and
 * both are true. The address exists only in state, and until the observer could
 * read state the honest answer to "which address is the treasury" was that we
 * did not know.
 *
 * Read live on every request rather than indexed. State is what is true now,
 * and a cached copy of now is a copy of some earlier now wearing the same face.
 */

import { useEffect, useState } from 'react'

import type { ChainState } from '../api/generated/ChainState'
import { RequestFailed, fetchState } from '../api/rest'
import { height as fmtHeight } from '../lib/format'
import { Payload } from './Payload'

export function StateIndex({
  chain,
  decimals,
  symbol,
}: {
  chain: string
  decimals: number
  symbol: string
}) {
  const [state, setState] = useState<ChainState | null>(null)
  const [error, setError] = useState<string | null>(null)

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

  return (
    <section className="panel" style={{ marginBottom: 26 }}>
      <div className="panel-head">
        <h2 className="panel-title">State</h2>
        {state && (
          <span className="eyebrow">
            {state.entries.length} entries at #{fmtHeight(state.height)}
            {state.spec_version !== null && ` · runtime v${state.spec_version}`}
          </span>
        )}
      </div>

      {error && <p className="empty">{error}</p>}
      {!error && state === null && <p className="empty">Reading the chain…</p>}

      {state !== null && (
        <>
          <div className="scroll-x">
            <table className="board">
              <caption className="visually-hidden">
                Every storage entry readable without a key, decoded
              </caption>
              <thead>
                <tr>
                  <th scope="col" className="left">
                    Entry
                  </th>
                  <th scope="col" className="left">
                    Value
                  </th>
                </tr>
              </thead>
              <tbody>
                {state.entries.map((e) => (
                  <tr key={`${e.pallet}.${e.name}`}>
                    <td className="left">
                      <div className="call-cell">
                        <code>
                          {e.pallet}::{e.name}
                        </code>
                        <span className="runtime-type">{e.type_name}</span>
                        {e.docs && <span className="runtime-doc">{e.docs}</span>}
                      </div>
                    </td>
                    <td className="left">
                      {e.error ? (
                        <span className="runtime-modifier" title={e.error}>
                          unreadable
                        </span>
                      ) : e.value === null || e.value === undefined ? (
                        /* An `optional` entry with nothing in it. Not zero, not
                           empty — the chain holds nothing there, and for the
                           treasury address that difference is the answer. */
                        <span className="runtime-modifier">unset</span>
                      ) : (
                        <span className="state-value">
                          {typeof e.value === 'object' ? (
                            <Payload
                              value={e.value}
                              ctx={{ chain, addresses: {}, decimals, symbol }}
                            />
                          ) : (
                            <span className="numeral">{String(e.value)}</span>
                          )}
                          {e.is_default && (
                            <span
                              className="runtime-modifier"
                              title="Storage holds nothing here; this is the default the runtime supplies."
                            >
                              default
                            </span>
                          )}
                        </span>
                      )}
                    </td>
                  </tr>
                ))}
              </tbody>
            </table>
          </div>

          <p className="panel-note">
            Read live from the chain at the block above, and decoded against the runtime's own
            declaration of each entry's type — including which hash its key uses, which is why a
            value appears here at all rather than as a key nobody can compute. Only entries needing
            no key are listed; a map like <code>System::Account</code> is read per account, on its
            own page.
          </p>
        </>
      )}
    </section>
  )
}