Generador de rasgos: estado de URL para acuñar metadatos (Generador DE Rasgos Estado DE Url Para Acunar Metadatos)

Mint no se puede repetir si se pierde la selección de rasgo

La aplicación Bare Crypto Generator escribe partes del avatar (piel, cabello, accesorios, etc.) en la barra de direcciones con react-url-query. La aleatorización, la descarga y el intercambio fluyen a través del mismo estado de URL. El PNG/SVG descargado y el conjunto de opciones seleccionado son la materia prima que se convertirá en la cadena attributes en los metadatos de la colección Mint: el generador no es un juguete, sino el diccionario visual del embudo Mint.```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

## Conceptos en la primera mención```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 rasgo que no está en la URL no se puede resolver diciendo "traer de vuelta el mismo avatar" en una solicitud de soporte.

## ¿Por qué URL?

La página Crear generador vincula las claves de opción con `UrlQueryParamTypes.string`. Aleatorice muestras de todas las opciones y presione con `onChangeUrlQueryParams`. Entonces, una vista se convierte en un enlace: se puede pegar en Discord y revisarse antes de ser perfecto.```text
URL as source of truth
  ?topType=…&clotheType=…&avatarStyle=Circle
         ↓
  OptionContext.setData(props)
         ↓
  deterministic render
```## Descarga PNG y SVG

SVG se descarga como un blob desde Avatar DOM `outerHTML`. La ruta PNG carga el SVG como una imagen, dibuja una escala de 2× en el lienzo y devuelve `file-saver` y `avataaars.png`. Mint pipeline generalmente fija ráster o SVG a IPFS; Escribe un hash en el campo de metadatos `image`.

## Contrato de metadatos

El formulario Mint de Marketplace al menos coloca campos como artista en atributos. Los rasgos del generador deben asignarse al mismo esquema: cada clave de URL → `trait_type`, valor seleccionado → `value`. De lo contrario, el Visor y las futuras herramientas de rareza hablarán idiomas diferentes.```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
```## Conexión de embudo

Generador → descargar/compartir → metadatos del cliente mint → IPFS → cadena `tokenURI`. En Bare Crypto, estas aplicaciones son repositorios separados; Si los nombres de los contratos y el vocabulario de atributos no se mantienen comunes, la superficie del producto se romperá.

## Los enfrentamientos más confusos de este episodio.```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

Lista de verificación de su propio sistema

1. ¿Qué claves de rasgos se encuentran en la URL y cuáles son solo locales?
2. ¿El enlace después de la aleatorización produce el mismo SVG en otro navegador?
3. ¿Los atributos de metadatos de Mint son idénticos a las claves del generador?
4. ¿El tamaño PNG/hash SVG es suficiente para tener un espacio de imagen perfecto?
5. ¿Dónde está congelada la versión del vocabulario de rasgos en los metadatos?

Cosas para recordar de esta sección

1. Los rasgos sincrónicos de URL hacen que la vista generativa sea repetible.
2. La descarga PNG/SVG es una fuente de imágenes impecable; Los atributos requieren un mapa separado.
3. El generador y el cliente mint deben compartir el mismo vocabulario de rasgos.

Avatar que no se puede compartir significa metadatos que no se pueden acuñar.