project screenshot 1
project screenshot 2
project screenshot 3

StarSeal

StarSeal: The Web3 app for digital NFT autographs! Celebrities can sign fans' digital collectibles, and friends can leave their mark on each other's NFTs. It's like getting your favorite star's autograph or a keepsake from a buddy, but for the digital age. Powered by EAS.

StarSeal

Created At

Superhack 2024

Project Description

StarSeal is a Web3 app that lets celebrities digitally autograph NFTs using Ethereum Attestation Service (EAS) on the Base Mainnet. It's like getting a celebrity to sign your T-shirt, but for digital collectibles. The project combines a user-friendly Next.js frontend with EAS blockchain tech to make these digital autographs secure and verifiable.

Here's how it works: A celebrity can input an NFT's details (address and token ID) and add a personal message, just like they'd write on a physical autograph. This creates a blockchain record (called an attestation) in EAS that proves the celebrity autographed that specific NFT.

Fans can then use StarSeal to check if their NFT has been autographed. They just need to enter the NFT info and the celebrity's wallet address. If there's a match, StarSeal displays the autograph details, including the celebrity's message and when it was signed.

Behind the scenes, StarSeal uses EAS schemas to organize the autograph data. It talks to EAS using their software tools to create and look up autographs. To make the experience even cooler, StarSeal integrates with OpenSea. This means when you check an autograph, you also see a picture of the NFT and its name, making it feel more like showing off a signed collectible.

The whole system is designed to be transparent and secure, thanks to blockchain technology. It's a new way for fans to connect with their favorite celebrities in the world of digital collectibles, bridging the gap between traditional autographs and the NFT space.

I also wrote a blog post tutorial about how StarSeal was built, explaining the core principles of EAS here: https://mirror.xyz/0xF00CE1f047b5347C03A28DaD1a084396a2EA71fa/_9k_anA5giY3yVjMUzzuN7bOzX8lov-f6cq179zrVpk

How it's Made

I have documented the entire app in this blog post, which serves also as a tutorial that teaches the core features of EAS and how to implement them into an app. The blog post is here: https://mirror.xyz/0xF00CE1f047b5347C03A28DaD1a084396a2EA71fa/_9k_anA5giY3yVjMUzzuN7bOzX8lov-f6cq179zrVpk

Note: For this project I have used the Base Mainnet.

StarSeal is built using a mix of modern web technologies and blockchain tools. I started by creating a wireframe to outline the basic structure and flow of the app. This was then turned into a more detailed Figma design to get a clear picture of the user interface before diving into the code.

The frontend is a Next.js app, which gives us the benefits of React with server-side rendering. To make the UI more engaging, I've used Framer Motion for smooth animations and React Hot Toast for sleek notifications. RainbowKit is integrated to handle wallet connections, making it easy for users to link their Ethereum wallets.

For interacting with the blockchain, I'm using a combination of ethers.js, wagmi, and viem. The core of the app revolves around the Ethereum Attestation Service (EAS) SDK, which we use to create and verify the digital autographs.

On the data querying side, I've set up Apollo Client with GraphQL to fetch attestation data from EAS. This allows for efficient and flexible data retrieval, especially when checking if an NFT has been autographed.

To make the NFT display more visually appealing, I've integrated the OpenSea SDK. When a user checks an autograph, we fetch the NFT's image and details from OpenSea, giving a richer experience.

I created a custom schema in EAS that includes the NFT address, token ID, and the autograph message. This schema is then used both when creating new autographs and when querying existing ones.

The "Sign" function is where the magic happens. When a celebrity signs an NFT, we use the EAS SDK to create an attestation. This involves encoding the NFT data and the message according to our schema, then sending it to the EAS contract on the blockchain.

For the "Check" function, we use a GraphQL query to search for attestations matching the given NFT and signer address. If found, we decode the attestation data and display it along with the NFT details from OpenSea.

All of this comes together to create a seamless experience where users can autograph NFTs and verify these autographs, all backed by the security and transparency of blockchain technology through EAS.

background image mobile

Join the mailing list

Get the latest news and updates