Trait-Generator: URL-State zu Mint-Metadaten (Trait Generator Url State Zu Mint Metadaten)

Verschwindet die Trait-Wahl, ist Mint nicht reproduzierbar

Die Bare-Crypto-Generator-App schreibt Avatar-Teile (Haut, Haar, Accessoires, …) per react-url-query in die Adresszeile. Randomize, Download und Share fließen über diesen URL-State. PNG/SVG plus Option-Set sind Rohstoff für Mint-Metadaten-attributes — der Generator ist kein Spielzeug, sondern das visuelle Vokabular des Mint-Funnels.

Trait options (avatars OptionContext)
        ↓ sync
  URL query params (react-url-query)
        ↓
  Avatar render (SVG DOM)
        ├─ download PNG (canvas rasterize)
        ├─ download SVG (outerHTML blob)
        └─ shareable deep link
        ↓
  Mint metadata attributes[]
    trait_type / value pairs

Dieser Teil zeigt, wie ein URL-synchroner Generator an den Mint-Metadaten-Pfad anschließt — und welche Verträge geschrieben werden müssen.

Begriffe, dort definiert, wo sie zuerst auftauchen

📦 URL-State
Trait-Auswahl in Query-Params, damit Refresh und Share denselben Look behalten.

📦 OptionContext
Kontext mit allen Trait-Keys und Option-Mengen.

📦 Mint-Metadaten
JSON auf IPFS: name, description, image, attributes.

📦 Trait-Attribute
`trait_type` + `value` — Futter für Viewer-Filter.

Ein Trait, der nie in die URL kommt, ist im Support nicht als 'gleicher Avatar' rekonstruierbar.

Warum URL?

Create bindet Option-Keys mit UrlQueryParamTypes.string. Randomize sampelt und pusht via onChangeUrlQueryParams. Ein Look wird ein Link — Discord-fähig, vor dem Mint prüfbar.

URL as source of truth
  ?topType=…&clotheType=…&avatarStyle=Circle
         ↓
  OptionContext.setData(props)
         ↓
  deterministic render

PNG- und SVG-Download

SVG als Blob aus Avatar-DOM-outerHTML. PNG lädt SVG als Image, zeichnet 2× auf Canvas, speichert avataaars.png. Mint pinnt Raster/SVG nach IPFS und schreibt den Hash in image.

Metadaten-Vertrag

Das Marketplace-Mint-Formular legt Felder wie artist in attributes. Generator-Traits müssen auf dasselbe Schema: URL-Key → trait_type, Wert → value.

ADR sketch
  Decision: URL-synced traits as mint attribute source
  Why: shareable looks; reproducible before mint
  Trade-off: long query strings; need allowlisted keys
  Follow-up: freeze trait vocabulary version in metadata

Funnel-Verbindung

Generator → Download/Share → Mint-Client-Metadaten → IPFS → tokenURI. Ohne gemeinsames Trait-Vokabular reißt die Produktoberfläche.

Die am häufigsten verwechselten Zuordnungen

❌ Generator ist nur Marketing-Widget
✓ Er ist Quelle des Mint-Metadaten-Vokabulars

❌ Traits nur in React-State reichen
✓ Share/Support brauchen URL oder Äquivalent

❌ PNG-Download = Metadaten
✓ JSON + image URI sind getrennt; attributes mappen

❌ Jeden Query-Key blind akzeptieren
✓ Ohne Allowlist multiplizieren kaputte Looks

Checkliste zur Prüfung des eigenen Systems

1. Welche Trait-Keys leben in der URL vs. lokal?
2. Reproduziert der Link nach Randomize dasselbe SVG?
3. Passen Mint-attributes 1:1 zu Generator-Keys?
4. Reicht PNG/SVG für das Mint-image-Feld?
5. Wo wird die Vocabulary-Version eingefroren?

Was aus diesem Teil bleiben sollte

1. URL-synchrone Traits machen Looks reproduzierbar.
2. PNG/SVG speist Mint-image; attributes brauchen explizites Mapping.
3. Generator und Mint-Client teilen ein Trait-Vokabular.

Ein unteilbarer Avatar ist unmintbare Metadaten.