Trait Generator: URL State'ten Mint Metadata'ya (Trait Generator Url State Mint Metadata)

Trait seçimi kaybolursa mint tekrar edilemez

Bare Crypto generator uygulaması, avatar parçalarını (skin, saç, aksesuar vb.) react-url-query ile adres çubuğuna yazar. Rastgeleleştirme, indirme ve paylaşım aynı URL state üzerinden akar. İndirilen PNG/SVG ve seçilen option seti, koleksiyon mint metadata'sındaki attributes dizisine dönüşecek hammaddedir — generator bir oyuncak değil, mint hunisinin görsel sözlüğüdür.

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

Bu bölüm, URL-senkron generator'ın mint metadata hattına nasıl bağlandığını ve hangi sözleşmelerin yazılması gerektiğini gösterir.

Kavramlar ilk geçtiği yerde

📦 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.

URL'de olmayan bir trait, destek talebinde 'aynı avatarı geri getir' diye çözülemez.

Neden URL?

Generator Create sayfası option key'lerini UrlQueryParamTypes.string ile bağlar. Randomize tüm option'ları örnekler ve onChangeUrlQueryParams ile push eder. Böylece bir görünüm bir link olur — Discord'a yapıştırılabilir, mint öncesi review edilebilir.

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

PNG ve SVG indirme

SVG, Avatar DOM outerHTML'inden blob olarak iner. PNG yolu SVG'yi image olarak yükler, canvas'a 2× scale çizer, file-saver ile avataaars.png verir. Mint hattı genelde raster veya SVG'yi IPFS'e pinler; metadata image alanına hash yazar.

Metadata sözleşmesi

Marketplace mint formu attributes'a en azından artist gibi alanlar koyar. Generator trait'leri aynı şemaya map edilmelidir: her URL key → trait_type, seçilen değer → value. Aksi halde Viewer ve ileride rarity araçları farklı diller konuşur.

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

Huni bağlantısı

Generator → indir / paylaş → mint client metadata → IPFS → zincir tokenURI. Bare Crypto'da bu uygulamalar ayrı repolardır; sözleşme isimleri ve attribute vocabulary ortak tutulmazsa ürün yüzeyi kopar.

Bu bölümde en çok karışan eşleştirmeler

❌ 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

Kendi sisteminizi denetleme listesi

1. Hangi trait key'leri URL'de yaşıyor, hangileri local-only?
2. Randomize sonrası link başka tarayıcıda aynı SVG'yi üretiyor mu?
3. Mint metadata attributes generator key'leriyle birebir mi?
4. PNG boyutu / SVG hash mint image alanı için yeterli mi?
5. Trait vocabulary versiyonu metadata'da nerede donduruluyor?

Bu bölümden aklında kalması gerekenler

1. URL-senkron trait'ler üretken görünümü tekrar edilebilir kılar.
2. PNG/SVG indirme mint image beslemesidir; attributes ayrı map ister.
3. Generator ile mint client aynı trait vocabulary'sini paylaşmalıdır.

Paylaşılamayan avatar, mint edilemeyen metadata demektir.