On-chain generative NFT collection

Overview

ETH Time

ETH Time is a new NFT collection created to explore new ways of generating NFTs on-chain. It is inspired by existing projects such as Zora's Zorbs. We wanted to play with the idea of having NFTs change as they are used the same way that physical objects do.

An ETH Time NFT is made of three parts: the bottom shade color is determined by the current NFT owner and the unique token id, while the top shade color is determined by the history of the NFT. The NFT look will change as it's exchanged between people. Inspired by instant film cameras, we added a timestamp in the bottom right corner. We use a binary clock to obtain a more minimal look and to work around the limited amount of data the on-chain SVG can contain.

Together with the NFT collection smart contract, we built a website where users can mint the NFT and exchange them with their friends. To improve user experience, we integrated with ENS to 1) display human-friendly addresses 2) display a customized avatar for the owner of an NFT, 3) send the NFT to an ENS name. Users can save their NFT by clicking the "Save Image" button and easily share it on social-media.

How it's made

The smart contract is developed from scratch using:

  • Dapptools for managing the project and testing.
  • Solmate for the ERC721 contract.
  • BokkyPooBahsDateTimeLibrary to get the current hour and minutes.
  • Bas64.sol to encode the SVG image to base 64.
  • TCL to script dapptools and avoid repetitive tasks.

The web application is implemented using:

  • Next.js.
  • Ethers.js, Web3 React, and useDapp to interact with ETH from the application.
  • @davatar/react to display the ENS avatar of the current NFT owner.
  • The website is hosted on Vercel.

The application displays a live version of the user collection by fetching historical Transfer events and listening for new events.

Since the application is using the Rinkeby test network, we integrate ENS by creating a separate JSON RPC provider (connected to mainnet). We also use the wallet JSON RPC API to remind users to switch to the Rinkeby network before minting.

You might also like...

A peculiar little website that uses Eleventy + Netlify + Puppeteer to create generative poster designs

A peculiar little website that uses Eleventy + Netlify + Puppeteer to create generative poster designs

Garden — Generative Jamstack Posters "Garden" is an experiment in building creative, joyful online experiences using core web technologies. 🧱 Buildin

Jun 13, 2022

A generative engine that takes various png layers on a sprite sheet format, combines them and then converts them into a .gif file

A generative engine that takes various png layers on a sprite sheet format, combines them and then converts them into a .gif file

Welcome to the Generative Animated Engine v3.0.1 🐤 [8 minute read] This repo used to be called jalagar/Generative_Gif_Engine but because it now suppo

May 24, 2022

Project template repo for generative art projects on the fx(hash) platform

Project template repo for generative art projects on the fx(hash) platform

fx(hash) x thi.ng project template About This template repo provides a compact, ready-to-go scaffolding for generative art projects aimed at the fx(ha

Dec 21, 2022

NFT Game Starter Project: https://github.com/buildspace/buildspace-nft-game-starter

Running React on Repl.it React is a popular JavaScript library for building user interfaces. Vite is a blazing fast frontend build tool that includes

Feb 11, 2022

Dead simple program to upload NFT data to IPFS via nft.storage

Dead simple program to upload NFT data to IPFS via nft.storage

NFTP The simplest way to publish files and folders to IPFS, with one command. 100% FREE to upload as much files as you want, powered by nft.storage. N

Dec 11, 2022

Candy Shop is a JavaScript library that allows DAOs, NFT projects and anyone to create an NFT marketplace on Solana in minutes!

Candy Shop is a JavaScript library that allows DAOs, NFT projects and anyone to create an NFT marketplace on Solana in minutes!

Candy Shop (IN BETA) Intro Candy Shop is a JavaScript library that allows DAOs, NFT projects and anyone to create an NFT marketplace on Solana in minu

Dec 15, 2022

Script to fetch all NFT owners using moralis API. This script output is a data.txt file containing all owner addresses of a given NFT and their balances.

Script to fetch all NFT owners using moralis API. This script output is a data.txt file containing all owner addresses of a given NFT and their balances.

🔎 Moralis NFT Snapshot Moralis NFT API will only return 500 itens at a time when its is called. For that reason, a simple logic is needed to fetch al

Jun 23, 2022

An example of an NFT Gated Website for thirdweb's NFT Gated Website Guide

NFT Gated Website "One of the more dynamic use cases for NFTs is using them as a membership pass to the NFT holders. Let’s assume you want to create a

Jan 3, 2023

Create your own custom NFT minting page using thirdweb's NFT Drop contract

Customizable NFT Drop Minting Page In this example, you can create your own NFT Drop minting page just by customising the template with your branding,

Dec 24, 2022
Build your own generative art NFT collection with 21 lines of JavaScript

Avatar Collection Build your own Generative Art NFT Collection in 1 minute. Quickstart Just run the following to get started: git clone https://github

rarepress 79 Dec 16, 2022
React Gatsby static web tool for generative artists working on token based NFT artwork (ex: Artblocks)

token-art-tools React Gatsby static web tool for generative artists working on token/hash based NFT artwork (ex: Artblocks) https://ctrlshiftmake.gith

Owen Moore 71 Dec 15, 2022
🐲 Epic NFTs [UI] - Proyecto que te permitirá conectar tu billetera y acuñar un NFT, podrás revender el NFT en OpenSea. El NFT en sí se puede personalizar

?? Epic NFTs [UI] El proyecto se encuentra deployado en Vercel para que puedan verlo e interactuar con él, toda crítica o comentario se agradece, pued

Braian D. Vaylet 17 Oct 22, 2022
Fullstack Dynamic NFT Mini Game built using 💎 Diamond Standard [EIP 2535] 🏃‍♀️Players can use Hero NFT to battle against Thanos ⚔ Heroes can be Healed by staking their NFT 🛡

?? Fullstack Dynamic NFT Mini Game ?? ?? Using Diamond Standard Play On ?? ?? ⏩ http://diamond-dapp.vercel.app/ Project Description ?? Fullstack Dynam

Shiva Shanmuganathan 21 Dec 23, 2022
NFT Marketplace framework to build standalone NFT marketplace or inApp/inGame NFT marketplace

NFT Marketplace This project is a decentalized NFT Marketplace framework which is to be the baseline for you to build standalone NFT marketplace or in

Reddio, inc. 14 Dec 19, 2022
An ERC-721 like NFT contract with Plutus scripts and Lucid as off-chain framework

Gatsby minimal TypeScript starter ?? Quick start Create a Gatsby site. Use the Gatsby CLI to create a new site, specifying the minimal TypeScript star

Berry 10 Sep 23, 2022
Passport NFT using on-chain metadata

Passport NFT Collection Setup yarn Environment File (.env) RINKEBY_URL: Ethereum (Rinkeby) Testnet Provider endpoint MATIC_URL: Polygon (Matic Mumbai)

Kei Nakano 2 Jun 2, 2022
In game dev, generative art, and creative coding, sine is a ubiquitous function that is often used as a spring-like oscillator for a given parameter.

In game dev, generative art, and creative coding, sine is a ubiquitous function that is often used as a spring-like oscillator for a given parameter.

Mark Racette 3 Feb 22, 2022
A generative engine that takes various png layers on a sprite sheet format, combines them and then converts them into a .gif file

Welcome to the Generative GIF Engine v2.0.4 ?? [8 minute read] This python and node app generates layered-based gifs to create NFT gif art! It is fast

Jalagar 112 Jan 2, 2023
Cardinal generator encompasses serverless functions and smart contracts for rendering generative NFTs

Cardinal Generator An open protocol for generative NFTs. Background Cardinal generator encompasses serverless functions and smart contracts for render

Cardinal 31 Dec 6, 2022