diff --git a/.gitignore b/.gitignore
index 00703a3..0343544 100644
--- a/.gitignore
+++ b/.gitignore
@@ -7,4 +7,6 @@ snfoundry_cache/
.env
accounts/
.snfoundry_cache/
-coverage/
\ No newline at end of file
+coverage/
+node_modules/
+dist/
diff --git a/app/.gitignore b/app/.gitignore
new file mode 100644
index 0000000..4bf964e
--- /dev/null
+++ b/app/.gitignore
@@ -0,0 +1,3 @@
+node_modules/
+dist/
+*.png
diff --git a/app/README.md b/app/README.md
new file mode 100644
index 0000000..60a4939
--- /dev/null
+++ b/app/README.md
@@ -0,0 +1,114 @@
+# Add a Beast
+
+Self-service web app for adding a species to the bestiary. Upload pixel art,
+name it, choose where it can be minted — one transaction, no permission needed.
+
+```bash
+pnpm install
+pnpm build:sdk # the app consumes the SDK's build output
+pnpm dev:app
+```
+
+## Configuration
+
+Defaults point at the Sepolia deployment in `docs/sepolia-v3-deployment.md`.
+Override with a `.env`:
+
+```
+VITE_STARKNET_RPC_URL=https://api.cartridge.gg/x/starknet/sepolia
+VITE_BEASTS_NFT=0x...
+VITE_BEASTS_REGISTRY=0x...
+```
+
+## Pages
+
+Hash routing, so every page is a real shareable URL on a static host.
+
+| URL | |
+|---|---|
+| `#/` | Add a Beast |
+| `#/collection/0xabc…` | Every Beast an address holds. **Swap the address to view any wallet** — no connection needed |
+| `#/beasts` | The bestiary, one card per species. The original 75 are behind a toggle |
+| `#/beasts/76` | Every Beast of one species, strongest first |
+| `#/manage` | Species you control |
+| `#/manage/76` | Per-species controls |
+
+Grouping the bestiary by species is the default because the collection is
+unbounded and a single species can hold 1,243 Beasts — a flat list of every
+token would be unreadable long before it was useful.
+
+Species pages read the contract's own per-species rank list rather than
+scanning, so the ordering shown is the one the collection itself uses.
+
+## What the app does
+
+**Register.** Four art variants are required — which one a Beast shows is
+decided by the shiny and animated bits in its token ID, so a species cannot ship
+a partial set. Art is validated client-side against the same rules the contract
+enforces (media type, base64 structure, PNG/GIF magic bytes) *and* decoded by
+the browser, because a file that will not decode here renders broken for every
+holder. Registration mints the artist's Genesis Beast in the same transaction.
+
+**Manage.** Lists every species the connected wallet holds the artist role for,
+with its live art, and opens the per-species controls: replace art, rotate or
+pause the minter, lock either one permanently, opt into kill stats, transfer
+the artist role, or graduate to a custom art provider.
+
+The list comes from the wallet's own tokens: the collection exposes
+`token_of_owner_by_index`, and a Genesis Beast is any token with no affixes, so
+the species a wallet controls fall straight out of a local decode. That works
+because the **artist role is ownership of the Genesis Beast** — there is no
+separate role to drift from the token. Everything is artist-only on-chain; the
+UI hides what the caller cannot do and the contract is the real gate.
+
+Transferring a species means sending its Genesis Beast, which the dashboard
+spells out before it asks for a signature.
+
+Art thumbnails come from each species' own provider, which for a custom
+provider is arbitrary contract code. One that reverts costs its own thumbnail,
+not the whole list.
+
+## Art loading
+
+Art is fetched per Beast, not per species. A community provider receives the
+whole decoded Beast, so it may legitimately vary art by affix, tier or level —
+caching by species would show the wrong picture for exactly the providers that
+make the interface worth having. Requests are batched and the cache is keyed by
+token ID, shared across pages.
+
+The contract validates art structurally — media type, base64, magic bytes — but
+cannot prove a payload decodes. A tile whose art will not render says so rather
+than showing a broken-image icon.
+
+## The preview card is an approximation
+
+`CardPreview` mirrors the layout of the on-chain SVG so an artist can judge
+their work in context before paying for a transaction. It is **not** the
+contract's renderer — that lives in `src/beast_svg.cairo` and only produces
+output once a species exists. Porting it byte-for-byte to TypeScript would let
+the preview be exact; until then, treat the card as indicative and `token_uri`
+as the truth.
+
+## Session policy
+
+The Cartridge connector pre-approves the registry's *management* entrypoints, so
+an artist signs once and can then iterate without a popup per change.
+`register_beast_with_art` is deliberately excluded: it mints a provenance token
+and permanently assigns a species ID, so it should always be an explicit
+signature.
+
+## Smoke test
+
+`scripts/smoke.mjs` drives the built app in headless Chromium against the live
+deployment — it checks the chain read renders, name validation rejects an
+injection attempt, the preview derives power correctly, and the dashboard loads
+a real species.
+
+```bash
+pnpm build && pnpm preview &
+node scripts/smoke.mjs
+```
+
+It needs a Playwright browser; in this dev container that means
+`LD_LIBRARY_PATH=/workspace/.playwright-libs/root/usr/lib/x86_64-linux-gnu` and
+an `executablePath` pointing at the cached Chromium.
diff --git a/app/index.html b/app/index.html
new file mode 100644
index 0000000..6d78a75
--- /dev/null
+++ b/app/index.html
@@ -0,0 +1,12 @@
+
+
+
+
+
+ Add a Beast — onchain bestiary
+
+
+
+
+
+
diff --git a/app/package.json b/app/package.json
new file mode 100644
index 0000000..0bd5e2d
--- /dev/null
+++ b/app/package.json
@@ -0,0 +1,30 @@
+{
+ "name": "@provable-games/beasts-app",
+ "private": true,
+ "version": "0.1.0",
+ "type": "module",
+ "scripts": {
+ "dev": "vite",
+ "build": "tsc -b && vite build",
+ "preview": "vite preview",
+ "typecheck": "tsc --noEmit"
+ },
+ "dependencies": {
+ "@cartridge/connector": "^0.13.12",
+ "@cartridge/controller": "^0.13.12",
+ "@provable-games/beasts-sdk": "workspace:*",
+ "@starknet-react/chains": "5.0.3",
+ "@starknet-react/core": "^5.0.1",
+ "react": "^18.2.0",
+ "react-dom": "^18.2.0",
+ "starknet": "9.4.2"
+ },
+ "devDependencies": {
+ "@types/react": "^18.2.0",
+ "@types/react-dom": "^18.2.0",
+ "@vitejs/plugin-react": "^4.3.0",
+ "playwright": "^1.62.1",
+ "typescript": "^5.8.3",
+ "vite": "^5.4.0"
+ }
+}
diff --git a/app/scripts/smoke.mjs b/app/scripts/smoke.mjs
new file mode 100644
index 0000000..c5bfaad
--- /dev/null
+++ b/app/scripts/smoke.mjs
@@ -0,0 +1,83 @@
+import { chromium } from 'playwright';
+import { mkdtempSync, writeFileSync } from 'node:fs';
+import { tmpdir } from 'node:os';
+import { join } from 'node:path';
+
+// 32x32 PNG: magenta border on all four sides, green corner-to-corner
+// diagonal. Real Beast art is this size, and the border is the tell — if the
+// preview crops, an edge goes missing.
+const TEST_PNG =
+ 'iVBORw0KGgoAAAANSUhEUgAAACAAAAAgCAIAAAD8GO2jAAAAiklEQVR4nLXNSw6AIAyEYQ7B2vvfEk1sULFAHzOZf9FVv9JKoyar9WAk76+LZDwAyfgADGME4IYCYA0dABpTAGWsAIixAfLGHkgaJiBjWIGw4QBihg8IGG7Aa0QAlxEE7EYcMBopwGJkga0BANYGBlgYMGBmIAHVAAN/Aw8MBgV4GyygG0TgNmTUTqHjAu38soSbAAAAAElFTkSuQmCC';
+
+const fixtureDir = mkdtempSync(join(tmpdir(), 'beasts-smoke-'));
+const pngPath = join(fixtureDir, 'test.png');
+writeFileSync(pngPath, Buffer.from(TEST_PNG, 'base64'));
+
+const browser = await chromium.launch({
+ executablePath:
+ '/home/ubuntu/.cache/ms-playwright/chromium_headless_shell-1228/chrome-headless-shell-linux64/chrome-headless-shell',
+});
+const page = await browser.newPage({ viewport: { width: 1280, height: 1400 } });
+const errors = [];
+page.on('console', (m) => { if (m.type() === 'error') errors.push(m.text()); });
+page.on('pageerror', (e) => errors.push(`pageerror: ${e.message}`));
+
+await page.goto('http://localhost:4173/', { waitUntil: 'domcontentloaded' });
+await page.waitForTimeout(5000);
+
+console.log('H1:', await page.textContent('h1'));
+const body = await page.textContent('body');
+const m = body.match(/(\d+) species in the bestiary so far/);
+console.log('LIVE CHAIN READ:', m ? m[0] : 'FAILED — no species count rendered');
+console.log('art slots:', await page.locator('.art-slot').count());
+console.log('preview card:', await page.locator('.card').count());
+
+// Client-side name validation, no wallet needed.
+await page.fill('input[placeholder="Gloomfang"]', 'bad"name');
+await page.waitForTimeout(200);
+console.log('rejects injection name:', JSON.stringify(await page.locator('.field__error').first().textContent()));
+
+await page.fill('input[placeholder="Gloomfang"]', 'Gloomfang');
+await page.waitForTimeout(200);
+console.log('accepts valid name — card title:', JSON.stringify(await page.textContent('.card__title')));
+
+// Tier drives the power number on the preview card.
+await page.selectOption('select >> nth=1', '1');
+await page.waitForTimeout(200);
+const power = await page.locator('.stat', { hasText: 'Power' }).textContent();
+console.log('tier 1 power (level 10 x 5):', JSON.stringify(power));
+
+// Preview sizing. A percentage height against an `aspect-ratio` parent
+// resolves to `auto`, so a square Beast used to size itself from its own 1:1
+// ratio, overflow the wider frame, and get cropped by `overflow: hidden`.
+await page.locator('.art-slot__drop input[type=file]').first().setInputFiles(pngPath);
+await page.waitForTimeout(1200);
+const artBox = await page.locator('.card__art').boundingBox();
+const imgBox = await page.locator('.card__art img').boundingBox();
+console.log('preview art fits its frame:',
+ imgBox.height <= artBox.height + 1 && imgBox.width <= artBox.width + 1,
+ `(img ${Math.round(imgBox.width)}x${Math.round(imgBox.height)} in frame ${Math.round(artBox.width)}x${Math.round(artBox.height)})`);
+
+await page.screenshot({ path: 'smoke-register.png', fullPage: true });
+
+// Manage lists the species the connected wallet controls, so with no wallet
+// it has to ask for one rather than opening an empty page.
+await page.click('button:has-text("Manage")');
+await page.waitForTimeout(800);
+console.log('Manage without a wallet prompts connect:',
+ (await page.locator('.modal').count()) > 0 && (await page.locator('.mine').count()) === 0);
+
+// Wallet picker: both wallet families must be offered, and a wallet whose
+// extension is absent must say so rather than fail silently.
+const wallets = await page.locator('.wallet__name').allTextContents();
+const states = await page.locator('.wallet__state').allTextContents();
+console.log('wallets offered:', wallets.map((w, i) => `${w}${states[i] ? ` (${states[i]})` : ''}`));
+// A centred fixed overlay: narrow, and vertically centred in the viewport
+// whatever the page scroll position.
+const box = await page.locator('.modal').boundingBox();
+const vh = page.viewportSize().height;
+const centred = Math.abs(box.y + box.height / 2 - vh / 2) < 40;
+console.log('modal is a centred overlay:', box.width <= 400 && centred);
+
+console.log('CONSOLE ERRORS:', errors.length ? errors.slice(0, 4) : 'none');
+await browser.close();
diff --git a/app/src/App.tsx b/app/src/App.tsx
new file mode 100644
index 0000000..cc6df82
--- /dev/null
+++ b/app/src/App.tsx
@@ -0,0 +1,223 @@
+import { useAccount, useDisconnect } from '@starknet-react/core';
+import { BeastsClient, type BeastDefinition } from '@provable-games/beasts-sdk';
+import { useCallback, useEffect, useMemo, useState } from 'react';
+import { ADDRESSES, provider } from './lib/chain';
+import { href, useRoute } from './lib/router';
+import { Collection } from './components/Collection';
+import { ConnectModal } from './components/ConnectModal';
+import { Dashboard } from './components/Dashboard';
+import { MySpecies } from './components/MySpecies';
+import { RegisterForm, type RegistrationInput } from './components/RegisterForm';
+import { SpeciesCollection } from './components/SpeciesCollection';
+import { SpeciesIndex } from './components/SpeciesIndex';
+
+export function App() {
+ const { address, account } = useAccount();
+ const { disconnect } = useDisconnect();
+ const [route, navigate] = useRoute();
+
+ const [connecting, setConnecting] = useState(false);
+ const [submitting, setSubmitting] = useState(false);
+ const [error, setError] = useState();
+ const [definition, setDefinition] = useState(null);
+ const [speciesCount, setSpeciesCount] = useState(null);
+
+ const client = useMemo(() => new BeastsClient(provider(), ADDRESSES, account), [account]);
+
+ const refresh = useCallback(async () => {
+ setSpeciesCount(await client.speciesCount().catch(() => null));
+ if (route.name !== 'manage-species') {
+ setDefinition(null);
+ return;
+ }
+ try {
+ setDefinition(await client.getDefinition(route.beastId));
+ setError(undefined);
+ } catch {
+ setDefinition(null);
+ setError(`Species ${route.beastId} is not registered`);
+ }
+ }, [client, route]);
+
+ useEffect(() => {
+ void refresh();
+ }, [refresh]);
+
+ async function register(input: RegistrationInput) {
+ setSubmitting(true);
+ setError(undefined);
+ try {
+ const before = await client.speciesCount();
+ await client.execute(
+ client.registerWithArtCall({
+ name: input.name,
+ beastType: input.beastType,
+ tier: input.tier,
+ minter: input.minter,
+ art: input.art,
+ }),
+ );
+ // species_count counts genesis too, so the new ID is the old count + 1.
+ navigate({ name: 'manage-species', beastId: before + 1n });
+ } catch (e) {
+ setError(e instanceof Error ? e.message : String(e));
+ } finally {
+ setSubmitting(false);
+ }
+ }
+
+ const isArtist = !!address && !!definition && BigInt(definition.artist) === BigInt(address);
+
+ function openMine() {
+ if (address) navigate({ name: 'manage' });
+ else setConnecting(true);
+ }
+
+ function openMyCollection() {
+ if (address) navigate({ name: 'collection', address });
+ else setConnecting(true);
+ }
+
+ return (
+
+ Anyone can add a species to the bestiary. Upload pixel art, name it,
+ pick where it lives — one transaction, no permission needed. You keep
+ the Genesis Beast: the creator's token, one per species, forever.
+
+ {speciesCount !== null && (
+
+ {speciesCount.toString()} species in the bestiary so far.
+
+ );
+}
diff --git a/app/src/components/BeastTile.tsx b/app/src/components/BeastTile.tsx
new file mode 100644
index 0000000..15be85a
--- /dev/null
+++ b/app/src/components/BeastTile.tsx
@@ -0,0 +1,72 @@
+import { useState } from 'react';
+import {
+ BEAST_TYPE_NAMES,
+ type Beast,
+ beastPower,
+ fullBeastName,
+ isGenesis,
+} from '@provable-games/beasts-sdk';
+
+interface Props {
+ beast: Beast;
+ speciesName: string;
+ /** `undefined` while loading, `null` when the provider could not be read. */
+ art: string | null | undefined;
+ rank?: number;
+ onClick?: () => void;
+ subtitle?: string;
+}
+
+/**
+ * One Beast, as a tile. Everything shown except the species name and the art
+ * comes straight out of the token ID.
+ */
+export function BeastTile({ beast, speciesName, art, rank, onClick, subtitle }: Props) {
+ const genesis = isGenesis(beast);
+ // The contract validates art structurally — media type, base64, magic bytes
+ // — but cannot prove the payload decodes. A species whose art is malformed
+ // must degrade to a note, not a browser's broken-image icon.
+ const [decodeFailed, setDecodeFailed] = useState(false);
+ const body = (
+ <>
+
+ Lv {beast.level}
+ HP {beast.health}
+ {/* Genesis Beasts sit outside the ranked list, so rank 0 is "unranked",
+ not "first". */}
+ {genesis ? 'Unranked' : rank ? `Rank ${rank}` : ''}
+
+
+ );
+
+ return onClick ? (
+
+ ) : (
+
{body}
+ );
+}
diff --git a/app/src/components/CardPreview.tsx b/app/src/components/CardPreview.tsx
new file mode 100644
index 0000000..91dde9d
--- /dev/null
+++ b/app/src/components/CardPreview.tsx
@@ -0,0 +1,84 @@
+import { BEAST_TYPE_NAMES, BeastType, prefixName, suffixName } from '@provable-games/beasts-sdk';
+
+interface Props {
+ name: string;
+ tier: number;
+ beastType: BeastType;
+ art?: string;
+ shiny: boolean;
+ /** Sample affixes, so the artist can see how a named variant reads. */
+ prefix: number;
+ suffix: number;
+ level: number;
+ health: number;
+}
+
+/**
+ * Approximation of the card the contract renders.
+ *
+ * This is NOT the on-chain SVG — that is built by `src/beast_svg.cairo` and
+ * only exists once a species is registered. This preview mirrors its layout
+ * and the values it derives so an artist can judge their art in context
+ * before paying for a transaction. After registration the app shows the real
+ * `token_uri` output instead.
+ */
+export function CardPreview({
+ name,
+ tier,
+ beastType,
+ art,
+ shiny,
+ prefix,
+ suffix,
+ level,
+ health,
+}: Props) {
+ const power = level * (6 - tier);
+ const displayName =
+ prefix > 0 && suffix > 0
+ ? `"${prefixName(prefix)} ${suffixName(suffix)}" ${name || 'Unnamed'}`
+ : name || 'Unnamed';
+
+ return (
+
+
+ {displayName}
+
+
+
+ {art ? (
+
+ ) : (
+
Upload art to preview
+ )}
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ Preview only — the collection renders this card fully onchain.
+ {prefix > 0 && ' Affixes shown are a sample: every mint draws its own.'}{' '}
+ Ranks and kill stats appear once a Beast is minted.
+
+ );
+}
diff --git a/app/src/components/ConnectModal.tsx b/app/src/components/ConnectModal.tsx
new file mode 100644
index 0000000..579ce2b
--- /dev/null
+++ b/app/src/components/ConnectModal.tsx
@@ -0,0 +1,108 @@
+import { useConnect } from '@starknet-react/core';
+import type { Connector } from '@starknet-react/core';
+import { useState } from 'react';
+
+interface Props {
+ onClose: () => void;
+}
+
+/**
+ * Wallet picker.
+ *
+ * Connectors arrive from `WalletProvider`: Cartridge Controller first (it
+ * needs no extension, which is the likely case for a first-time artist), then
+ * any injected wallet. Recommended-but-not-installed wallets are still listed
+ * so the choice is visible rather than hidden — clicking one sends the artist
+ * to its download page, which is `InjectedConnector`'s own behaviour.
+ *
+ * Connection failures are shown here. Swallowing them is what makes a Connect
+ * button look broken.
+ */
+export function ConnectModal({ onClose }: Props) {
+ const { connect, connectors } = useConnect();
+ const [pending, setPending] = useState(null);
+ const [error, setError] = useState(null);
+
+ async function pick(connector: Connector) {
+ setPending(connector.id);
+ setError(null);
+ try {
+ await connect({ connector });
+ onClose();
+ } catch (e) {
+ setError(describe(e));
+ } finally {
+ setPending(null);
+ }
+ }
+
+ return (
+
+
e.stopPropagation()}>
+
+
Connect a wallet
+
+
+
+
+ You need Sepolia STRK to register a Beast. Browsing and previewing
+ work without a wallet.
+
+
+
+ {connectors.map((connector) => {
+ // Controller runs in a hosted iframe, so it is always available;
+ // injected wallets are only there if their extension is.
+ const installed = connector.available();
+ return (
+
+ You are not the artist for this species. These controls are read-only.
+
+ )}
+ {error &&
{error}
}
+
+
+
Minting
+ {definition.minterLocked ? (
+
+ The minter is locked to {short(definition.minter)} and can
+ never change. Holders can rely on that.
+
+ ) : (
+ <>
+
+ Set to zero to pause. Pausing stops new mints; it never affects
+ Beasts already minted.
+
+
+ setMinter(e.target.value)}
+ />
+
+
+
+
+
+ )}
+
+
+
+
Artwork
+ {definition.artLocked ? (
+
+ Art is locked.{' '}
+ {definition.factoryProvider
+ ? 'This species is frozen: the art is stored onchain and can never change.'
+ : 'The provider address is frozen, but a custom provider can still change what it returns — so refreshes stay available.'}
+
+ ) : definition.factoryProvider ? (
+ <>
+
+ Replacing art re-renders every Beast of this species and notifies
+ marketplaces automatically. Limited to one refresh per hour.
+
+ This species renders through your own provider at{' '}
+ {short(definition.artProvider)}. Announce changes so
+ marketplaces re-read it.
+
+
+
+ )}
+
+
+ Advanced: swap art provider
+
+ Point this species at your own IBeastArtProvider contract
+ to vary art by affix, tier or level. Your provider must return an
+ allowlisted image data URI or rendering will fail for your species.
+
+
+ setCustomProvider(e.target.value)}
+ />
+
+
+
+
+ {!definition.artLocked && (
+
+ )}
+
+
+
+
Kill stats
+
+ Optional. A stats source lets your Beasts show how many Adventurers
+ they have slain. It must implement the stats interface; set zero to
+ turn stats off.
+
+
+ setStatsSource(e.target.value)}
+ />
+
+
+
+
+
+
Transfer this species
+
+ Control of {definition.name} is ownership of its
+ Genesis Beast — there is no separate role. Sending the token hands the
+ new holder everything on this page, and you lose it. Selling the
+ Genesis Beast on any marketplace does the same thing.
+
+ About {slots.toLocaleString()} storage slots. There is no size cap —
+ if you are willing to pay for it and the network accepts it, it is
+ valid — but larger art means a more expensive registration.
+
+ )}
+
+
+
+
2. Identity
+
+
+
+
+
+
+
+
+
+
3. Who can mint it
+
+ Usually a Loot Survivor dungeon. Players earn your Beast by
+ defeating it there — Beasts are not sold, they are captured.
+
+ {BEAST_TYPE_NAMES[summary.beastType]} · Tier {summary.tier} ·{' '}
+ {summary.minted} of {MAX_SUPPLY_PER_SPECIES.toLocaleString()} minted
+ {summary.community ? '' : ' · one of the original 75'}
+
+ );
+}
diff --git a/app/src/components/SpeciesIndex.tsx b/app/src/components/SpeciesIndex.tsx
new file mode 100644
index 0000000..0e4f430
--- /dev/null
+++ b/app/src/components/SpeciesIndex.tsx
@@ -0,0 +1,137 @@
+import {
+ BEAST_TYPE_NAMES,
+ type BeastsClient,
+ type SpeciesSummary,
+ genesisBeast,
+} from '@provable-games/beasts-sdk';
+import { useEffect, useState } from 'react';
+import { artFor, useArt } from '../lib/useArt';
+
+interface Props {
+ client: BeastsClient;
+ onOpen: (beastId: bigint) => void;
+}
+
+/**
+ * The whole bestiary, one card per species.
+ *
+ * Grouping by species is the default because the collection is unbounded and
+ * a species can hold up to 1,243 Beasts — a flat list of every token would be
+ * unreadable long before it was useful. Selecting a species opens its own
+ * collection.
+ *
+ * Each card shows the species' Genesis Beast as the representative art: it is
+ * the one Beast guaranteed to exist for every registered species.
+ */
+export function SpeciesIndex({ client, onOpen }: Props) {
+ const [species, setSpecies] = useState([]);
+ const [total, setTotal] = useState(null);
+ const [error, setError] = useState(null);
+ const [showGenesis, setShowGenesis] = useState(false);
+
+ useEffect(() => {
+ let cancelled = false;
+ setSpecies([]);
+ setError(null);
+
+ async function load() {
+ try {
+ const count = Number(await client.speciesCount());
+ if (cancelled) return;
+ setTotal(count);
+
+ // Community species first — they are the ones that change.
+ const order = [
+ ...range(76, count),
+ ...(showGenesis ? range(1, Math.min(75, count)) : []),
+ ];
+
+ const collected: SpeciesSummary[] = [];
+ for (let i = 0; i < order.length && !cancelled; i += 4) {
+ const batch = await Promise.all(
+ order.slice(i, i + 4).map((id) =>
+ client.getSpeciesSummary(BigInt(id)).catch(() => null),
+ ),
+ );
+ collected.push(...batch.filter((s): s is SpeciesSummary => s !== null));
+ if (!cancelled) setSpecies([...collected]);
+ }
+ } catch (e) {
+ if (!cancelled) setError(e instanceof Error ? e.message : String(e));
+ }
+ }
+
+ void load();
+ return () => {
+ cancelled = true;
+ };
+ }, [client, showGenesis]);
+
+ const representatives = species.map((s) => genesisBeast(s.beastId, s.tier, s.beastType));
+ const art = useArt(client, representatives);
+
+ return (
+
+
+
+
The bestiary
+
+ {total === null
+ ? 'Counting species…'
+ : showGenesis
+ ? `All ${total} species. Open one to see every Beast of its kind.`
+ : `${Math.max(0, total - 75)} community ${total - 75 === 1 ? 'species' : 'species'} of ${total}. Open one to see every Beast of its kind.`}
+