Générateur de traits : état de l'URL vers les métadonnées Mint (Generateur DE Traits Etat DE Lurl Vers Les Metadonnees Mint)

Mint ne peut pas être répété si la sélection de traits est perdue

L'application génératrice Bare Crypto écrit les parties de l'avatar (peau, cheveux, accessoires, etc.) dans la barre d'adresse avec react-url-query. La randomisation, le téléchargement et le partage transitent par le même état d'URL. Le PNG/SVG téléchargé et le jeu d'options sélectionné sont la matière première qui deviendra la chaîne attributes dans les métadonnées de la collection Mint — le générateur n'est pas un jouet, mais le dictionnaire visuel de l'entonnoir de menthe.```text 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

## Concepts à la première mention```text
📦 URL State
Trait seçimlerinin sorgu parametrelerinde yaşaması; yenileme ve paylaşımda aynı görünüm.

📦 OptionContext
Generator'ın tüm trait anahtarlarını ve seçenek kümelerini tutan bağlam.

📦 Mint Metadata
IPFS'e yazılan JSON: name, description, image, attributes.

📦 Trait Attribute
`trait_type` + `value` çifti; marketplace Viewer filtreleri için ham madde.
```Un trait qui ne figure pas dans l'URL ne peut pas être résolu en disant « ramener le même avatar » dans une demande d'assistance.

## Pourquoi une URL ?

La page Créer un générateur lie les touches d'option avec `UrlQueryParamTypes.string`. Randomisez les échantillons de toutes les options et pousses avec `onChangeUrlQueryParams`. Ainsi, une vue devient un lien – peut être collée dans Discord, examinée avant d'être créée.```text
URL as source of truth
  ?topType=…&clotheType=…&avatarStyle=Circle
         ↓
  OptionContext.setData(props)
         ↓
  deterministic render
```## Téléchargement PNG et SVG

SVG est téléchargé sous forme de blob à partir du DOM Avatar `outerHTML`. Le chemin PNG charge le SVG sous forme d'image, dessine une échelle 2× sur le canevas, renvoie `file-saver` et `avataaars.png`. Le pipeline Mint épingle généralement raster ou SVG sur IPFS ; Écrit un hachage dans le champ de métadonnées `image`.

## Contrat de métadonnées

Le formulaire Marketplace Mint place au moins des champs comme artiste dans les attributs. Les traits du générateur doivent être mappés sur le même schéma : chaque clé URL → `trait_type`, valeur sélectionnée → `value`. Sinon, le Viewer et les futurs outils de rareté parleront des langues différentes.```text
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
```## Connexion à l'entonnoir

Générateur → télécharger/partager → métadonnées du client Mint → IPFS → chaîne `tokenURI`. Chez Bare Crypto, ces applications sont des dépôts distincts ; Si les noms de contrats et le vocabulaire des attributs ne restent pas communs, la surface du produit se brisera.

## Les confrontations les plus déroutantes de cet épisode```text
❌ Generator sadece marketing widget'ıdır
✓ Mint metadata vocabulary'sinin kaynağıdır

❌ Trait'leri yalnız React state'te tutmak yeter
✓ Paylaşım ve destek için URL veya eşdeğeri gerekir

❌ PNG indirmek metadata demektir
✓ Metadata JSON + image URI ayrıdır; attributes map edilmelidir

❌ Tüm query key'lerini körlemesine kabul etmek
✓ Allowlist ve varsayılanlar olmadan bozuk görünümler çoğalır

Liste de contrôle de votre propre système

1. Quelles clés de caractéristiques se trouvent dans l'URL et lesquelles sont uniquement locales ?
2. Le lien après randomisation produit-il le même SVG dans un autre navigateur ?
3. Les attributs des métadonnées Mint sont-ils identiques aux clés du générateur ?
4. La taille PNG/le hachage SVG est-il suffisant pour un espace d'image minutieux ?
5. Où la version du vocabulaire des traits est-elle figée dans les métadonnées ?

Choses à retenir de cette section

1. Les traits synchrones avec les URL rendent la vue générative reproductible.
2. Le téléchargement PNG/SVG est un flux d’images à la menthe ; les attributs nécessitent une carte distincte.
3. Le générateur et le client Mint doivent partager le même vocabulaire de traits.

Un avatar qui ne peut pas être partagé signifie des métadonnées qui ne peuvent pas être créées.