project screenshot 1
project screenshot 2
project screenshot 3
project screenshot 4
project screenshot 5
project screenshot 6

Attrium

Attrium is an on-chain trait economy built on Zora V3 and Polygon to achieve maximum composability, allowing for true expression of self on the blockchain.

Attrium

Created At

Metabolism

Winner of

trophy

🥇 Polygon — Best use on ZORA V3 on Polygon

trophy

🧙‍♂️ nft.storage — Storage Wizard

trophy

🏆 Metabolism Finalist

Project Description

A token is a representation of something, whether it be a real-world asset, artwork, or identity. Identity NFT collections are often static. Any metadata changes are typically random or out of the holders' control. Identities currently conform to tokens instead of the other way around. Attrium is an economy where compatible tokens conform to identities. The user is enabled to sell metadata traits they don't want and buy metadata traits they do. Attrium believes identity tokens should have the capacity for maximum composability, allowing for true expression of self on the blockchain.

Attrium proposes the Attribute NFT paradigm in which a parent NFT's attributes are themselves NFTs. Attrium's marketplace enables users to list and buy Attribute NFTs via the Zora V3 API Asks v.1.1 Module on Polygon Mumbai. The Attrium marketplace is currently host to three Attribute NFTs from the CC0 project, Nouns. The intent is that upon purchase of an Attribute NFT, a direct impact is had on the parent NFT's artwork and/or metadata via on-chain SVG rendering. Attrium aims to set the foundation for NFT collection customizations!

How it's Made

Having briefly researched nested and dynamic NFT standards and approaches, like Charged Particles and RMRK, I've become interested in a paradigm that emphasizes on-chain rendering and a tight coupling between parent and child NFT. My first stab at it is Attrium which hosts NFT collections, in which the metadata attributes of a parent NFT are themselves NFTs. We define these trait NFTs as Attribute NFTs, and the parent they compose, the Parent NFT. The Attribute NFT only contains the required properties defined in the ERC721 Metadata JSON Schema.

The proof-of-concept collection used to showcase the Attribute NFT paradigm for Attrium is Nouns. Each Nouns metadata attribute is ideally tokenized and minted through dedicated ERC721 contracts, coded in Solidity. For this hack, only three values of the body attribute type were tokenized and can be viewed at https://attrium.vercel.app/marketplace. The intent is for Attrium Nouns to look inside their holders' wallets to check if they have a corresponding Attribute NFT. If a wallet contains both a Parent NFT and Attribute NFT, the Attrium Noun will reference this particular attribute in the SVG render. This is the first step in "linking" Parent NFTs and their corresponding Attribute NFTs.

All metadata for the Attribute NFTs are hosted on IPFS via NFT.Storage. NFT.Storage's NFT UP desktop program was the easiest and smoothest decentralized storage upload experience I've ever had — I'll definitely be recommending to fellow developers. Also to note, the Nouns ethos might motivate future implementations to keep the artwork compressed on-chain and sourced from each dedicated Attribute NFT contract.

The Attribute NFT paradigm builds upon the Nouns contracts' metadata seeds storage variable and on-chain SVG renderer that dictate a Noun's attributes and image. The contracts for Attrium's Nouns were forked from the Nouns contracts and simplified, in the process doing away with governance, Nounder mints, minting restrictions, and more. Still somewhat a beginner at Solidity, I haven't yet taken off my Remix training wheels and used the browser IDE for the entirety of smart contract development.

Attrium Noun Parent NFTs and Attribute NFTs live on Polygon Mumbai, so I was hoping the Zora indexer would be live on Polygon Mumbai to easily index and display the Attribute NFTs in the marketplace and selling/listing flow. Unfortunately it wasn't, so I decided to use wagmi (https://wagmi.sh/) to query the Attribute NFT contract directly for the baseURI and use axios (https://axios-http.com/) to retrieve the pinned IPFS metadata and image. Although I took care to keep the hacky approach generalized, there's definitely some hardcoded sugar in there :) I also was looking forward to using the NFTPreview React component, but I couldn't figure out how to style the component as desired.

The Attrium marketplace interfaces with the Zora V3 Asks v1.1 module on Polygon Mumbai. Attrium users can list and buy compatible Attribute NFTs through the Asks Module, like the Attrium Noun Attribute NFTs. I used wagmi (which uses ethers under the hood) to execute createAsk and fillAsk transactions, which worked well.

Lastly, I used the Zora SDK (ZDK) to pull Ethereum Nouns attribute types, collection size, number of owners, volume, and floor. The contextual Nouns collection data noticeably improved the "marketplace vibe" of Attrium. I really enjoyed the abstractions built on top of the indexer, and I'm excited to use it on more networks in the future!

As a solo developer for this project, I was impressed with the speed and quality of my Figma designs. After which, I coded them up with the React framework Next.js, Chakra UI, Framer Motion, and TypeScript (and shoutout Rainbow Kit for the best wallet connection UX out there!). I'm also pleased with the pace at which I digested the complexity of the Nouns contracts; however, I'm still a bit slow at Solidity so I didn't get as far as I would have liked with the dynamic NFT portion 🐌

background image mobile

Join the mailing list

Get the latest news and updates