When it comes to NFTs, the metadata is what makes each one unique and valuable. However, NFTs are typically viewed as static pieces of digital art, with their metadata unable to be changed. But what if that could change? What if we could make NFTs dynamic and interactive? That's what inspired us to build a gas-free platform for trait swapping within the Bufficorn Buidl Brigade collection.

Leveraging the existing offchain metadata storage for the collection, we were able to create a solution that enables dynamic changes to the metadata, allowing users to swap traits without the need for gas fees. This innovation opens up new possibilities for NFT collections, creating a more vibrant and engaging ecosystem that encourages experimentation and creativity.

Bufficorn Buidl Brigade is a unique NFT collection with a focus on community and collaboration. The collection features a range of adorable buff - unicorns, each with their own set of traits that make them unique. But what sets the project apart from other NFT collections is the ability for users to swap traits with one another, creating a dynamic and ever-changing ecosystem.

And the best part? This can be done without incurring any gas fees, thanks to a cutting-edge platform built by us at RaidGuild. In this article, I'll dive into the details of how this project was built, what features it offers, and the technical challenges that were overcome along the way.

Key features

Self Swaps

Elevate your Bufficorns' game by swapping any number of traits within your own collection. Whether you're looking to boost their rarity or customize their look, self swaps offer a quick and easy way to trade between your own Bufficorns.

Peer to Peer Swaps

Looking to trade with others? Peer to peer swaps let you browse for a Bufficorns directly or search by ENS or ETH address. Confirming the swap is easy, but be aware that execution can fail if the Bufficorn ownership or traits have been modified.

Offered Swaps

Don't want to spend time searching for a specific Bufficorn to trade with? Simply offer up one of your traits and request something in return. Others can browse a public directory of open offers and accept your offer with a valid trait, making swapping both fun and easy.

Bufficorn Genetics

Want to track your Bufficorns' journey through the metadata changes? Our IPFS-based tracking system stores metadata updates whenever you complete a swap, letting you view the history of your Bufficorns' appearance and traits.

Personalized Profile

Keep track of all your swaps and offers in one place with your personalized profile page. View your Bufficorns, completed swaps, and pending confirmations all in one convenient location.

Real-time Notifications

Stay up to date on all your swaps and offers with real-time notifications. You'll be notified instantly when someone accepts your offer or when a swap you initiated is confirmed.

Swap Previews

Not sure how a swap will look before you execute it? Preview the changes with our swap preview feature, letting you see how your Bufficorn will look with the new traits.

Custom Rarity Impact Previews

Dynamic metadata makes predicting rarity scores for swaps impossible, which is why we developed a custom rarity prediction mechanism. With our feature, you can preview the impact of a swap on both Bufficorns' rarity scores and plan your trades accordingly.

From Concept to Reality

To bring trait swapping to life without incurring gas fees, we relied on the Bufficorn Buidl Brigade collection's existing offchain metadata storage. This allowed us to establish a solid foundation for our custom API and database, which we developed to handle the complex task of validating incoming requests and real-time metadata updates. Without a robust backend architecture, swapping traits could have resulted in unexpected outcomes and compromised the integrity of the entire collection.

Additionally, we needed to ensure that the swap script responsible for swapping traits between Bufficorns would generate fresh metadata that remained consistent with the original collection. To accomplish this, we developed a script that read the existing metadata, generated a new image based on the swapped traits, and replaced the old metadata with the new version.

Our Technical Setup

• At the core of Bufficorn lies a custom API built on Express.js and GraphQL. This powerful API enables our frontend to interact seamlessly with the backend for a variety of functions including swapping traits, user authentication, managing accounts, and serving frontend magic.

• To store crucial data related to Bufficorns, swaps, user accounts, and other aspects of our platform, we employ MongoDB as our primary database. This choice allows us to enjoy the flexibility and scalability we need to manage large amounts of data.

• For storing metadata updates to the Bufficorns, we leverage the already existing AWS S3 for its fast read/write capabilities, ensuring instant image loads without needing to make any on-chain mutations.

• We chose IPFS to preserve the metadata history of Bufficorns, as it allows for immutability and is well-suited for loading images at a reasonable speed. Since the history of each Bufficorn must remain unchangeable, IPFS is the ideal choice for our needs.

• For the frontend, we use Next.js, a React-based framework that provides server-side rendering (SSR), automatic code splitting, and optimized performance. This allows us to reduce the load on client-side rendering, handle large loads of images, optimally serve pages to our users and benefit from other cool features that it offers.

• We've implemented a robust real-time notification system for swaps and offers using Redis and GraphQL subscriptions. Redis, an in-memory data store, provides low latency and high throughput for handling these notifications. Meanwhile, GraphQL subscriptions make it easy and straightforward to implement real-time updates, since our API is already GraphQL-based.

• We use Ethers and Web3.js for on-chain validations to verify ownership and authenticate requests to the backend using EIP 712-based signatures.

• For our design system, we use Chakra UI, a React-based UI framework that provides a range of reusable components and styles.

• For data queries and management, we use TanStack and Apollo Client. This allows us to automatically re-fetch data whenever there's a change, handle errors & precisely control caching behavior, and optimize queries to our API for faster results.

Challenges and Solutions

Crafting a unique platform like the Bufficorn Buidl Brigade Swapper was no easy feat. Our team encountered various challenges, but we persevered and found effective solutions. Here are some of the obstacles we faced and how we overcame them.

Overcoming the Challenge of Indexing and Curation

One of the first challenges we faced was fetching all the Bufficorns owned by a particular address. Since there isn't a direct way to grab this information from the contract, we initially considered writing a subgraph to index and curate the data. However, we didn't want to invest our resources into building a subgraph from scratch and managing the indexing and curation ourselves.

Instead, we found a solution by leveraging the NFT API provided by Alchemy. This API provided everything we needed and was particularly adept at response times, accuracy, and quick updates whenever Bufficorns were transferred between accounts. By utilizing this API, we were able to overcome the challenge of indexing and curation, ultimately saving ourselves time and resources.

Overcoming Image Caching and State Challenges

Controlling the caching behavior of images on a browser and maintaining the state of Bufficorns in our dapp presented some challenges. To handle the image caching, we added a dynamic timestamp as a query parameter to the image URI, forcing the browser to refresh the image when there is an update whenever a state change occurs.

src={${BASE_IMAGE_URI}/${tokenId}.png?time=${Math.round(Date.now() / 10000)}}

For Bufficorns rendered on pages, we needed to display the appropriate image based on the current state of the dapp. For example, when viewing a completed swap, we want to show the current image of the Bufficorn as well as the image during the actual time of the swap. This switching of images takes a few seconds, and we use placeholders to represent the load times and fallbacks. Other parts of the dapp also require the state of the Bufficorn images to reflect what the user is currently viewing. By carefully managing these image states, we were able to create a seamless user experience for our platform.

Overcoming Swap Script Integration Complexities

Integrating the swap script within the backend posed several challenges as there are multiple moving parts involved. Once a valid swap request is made, the swap script is called to execute various operations.

1. The first step was to fetch the token URI and compute the DNA based on the traits. Next, the DNA values of the Bufficorns needed to be swapped based on the traits to be exchanged. This step required careful consideration as it was important to ensure the integrity of the swap process.

2. Fetching individual layers of the Bufficorns and redrawing the images using node-canvas was another challenging task. This process is both memory and time consuming, which required several optimizations to reduce consumption.

3. The final step was to generate fresh metadata, upload old metadata to IPFS for preserving history, and replace the metadata of both Bufficorns in S3 with new ones. This process was time-consuming, but it was necessary to maintain the integrity of the swap.

Overall, we made a lot of optimizations to reduce the consumption of memory and time as much as possible. On average, it takes a reasonable amount of time between 4s to 10s to finish the swap. With careful planning and optimization, we were able to overcome the challenges of integrating the swap script and ensure smooth operation of the swapping process.

Tackling Outdated NFT Metadata on Marketplaces

Swapping traits in NFTs can cause a ripple effect in NFT marketplaces, leading to two main issues that need to be addressed.

• Outdated Metadata on Marketplaces

NFT marketplaces often require metadata to be permanent, but after a swap has been made, the metadata doesn't refresh, leading to outdated information on marketplaces. To solve this, we implemented a solution that forces the metadata to refresh through an API available for marketplaces such as Opensea and Rarible.

• Catching Rug Pull Activities

Dynamic and constantly evolving metadata makes it possible for someone to swap traits and accept an offer made to their Bufficorn before the swap, resulting in confusion and rug pull activities. To tackle this issue, we built our anti-rug monitoring system that detects such activities and immediately bans users from using the swap tool until they are allowed back.

How it works?

To ensure compliance with our community guidelines, we monitor NFT sales on Opensea, which accounts for the majority of our trading volume. Using Opensea's stream API, a Node.js worker decodes the transaction data to extract the offer and acceptance timestamps for a Bufficorn sell event. If a swap is detected within this time period, the worker adds the seller address, the sold Bufficorn, and any other Bufficorns held in the seller’s wallet to a banlist. This banlist prevents the address from using the swap tool & also the Bufficorns to be used for swaps until they are removed from the list, thus ensuring a level playing field for all participants.

It’s recommended that anyone who wants to trade, buy or sell bufficorns use Opensea as that’s where we have taken most of the measures to reflect metadata accuracy & capture rug pulls.

Solving Rarity Calculation Challenges

Creating a custom rarity scoring system was crucial for our dynamic NFT collection. Traditional rarity calculators like Rarity.tools, Rarity Sniper, etc. were not suitable due to the constantly evolving metadata and simultaneous swaps. To address this, we developed a scoring mechanism that provides possible positive or negative impact points on a Bufficorn’s rarity. This approach eliminates false promises while still allowing users to anticipate how a swap could affect their Bufficorn’s rarity. This unique scoring system also introduces a fun strategic element to the game, allowing users to plan their swaps and climb the rarity ladder.

Technical Infrastructure at a Glance

A robust infrastructure is essential to the success of any project, and the Bufficorn Buidl Brigade Swapper is no exception. Here are some of the tools we're using to power our platform:

1. Alchemy NFT API - to quickly and easily retrieve information about all Bufficorns owned by an address. This allows us to provide users with a seamless experience when viewing their collections.

2. Infura - for IPFS uploads of metadata history and images. We also use a dedicated gateway to ensure that images load quickly, providing users with a smooth browsing experience.

3. Heroku - to host our backend API and workers, which provides us with a scalable and reliable platform for our services.

4. Mongo Atlas - to ensure that our data is secure and easily accessible, we use a M2 cluster with backups for our database hosting.

5. Upstash - for Redis hosting, which allows us to store and retrieve data quickly and efficiently for real time notifications.

6. Vercel - for our Next.js frontend and deployments. This combination offers the best production ready environments with options to enable Edge configs & technical analytics on performance.

7. AWS - to store token metadata, URIs & image layers. This provides us with a scalable and cost-effective solution for storing data that require a high uptime & faster responses.

8. Opensea and Rarible APIs - for metadata refresh ensuring that the Bufficorns are always up to date and accurate in those marketplaces.

9. Opensea Stream API - to monitor sale events and ensure that all transactions are fair and monitor possible rug pull activities.

Meet the Masterminds Behind Bufficorns

Introducing the talented team behind this innovative project! The team is comprised of skilled engineers, creative designers, expert project managers, and dedicated quality assurance personnel from RaidGuild.

• Bennisan, the creative mastermind responsible for designing and implementing beautiful design components on the frontend.

• Saimano, the full-stack wizard covering both web2 and web3 engineering and development, handling everything from the backend to the frontend and devops.

• Christina, the wordsmith crafting engaging copy and lore to bring the Bufficorns to life and capture the imagination of collectors. Her skills have helped create a captivating story for the project.

• Josh, the project manager who keeps everything running smoothly and ensures that Bufficorns are always at the forefront of innovation. He has expertly managed the entire project all through the finishline.

Additionally, the project has been supported by a team of experts from SporkDAO & EthDenver.

• Joshua, who provides NFT assets and conducts rigorous quality assurance testing to maintain the highest standards of excellence.

• Bill, who offers valuable support with domains and quality assurance testing to ensure the best possible user experience.

• Daniel, the mastermind behind the custom rarity calculations.

• Dave, for being an active listener & providing feedback.

• Isaac, who manages the AWS S3 storage and provides valuable support with the swap script.

Last but not least,

• Damu from BuidlGuidl, who offers valuable assistance with quality assurance testing and feedback.

The Bottom Line

This project is the result of a team of talented individuals who came together with a shared vision of creating a truly unique and remarkable NFT collection. This was no easy feat, as it demanded a range of expertise in web development, web3 interactions, API design, and DevOps management. But with our combined knowledge and skills, we were able to create a platform that fulfilled our vision of enabling dynamic changes to the metadata in a vibrant and engaging NFT ecosystem.

Despite the challenges of building a dynamic NFT collection, I am super glad that we have demonstrated our ability to overcome obstacles through creative solutions and infrastructure choices. From our custom rarity scoring mechanism to monitoring for rug pull activities, we have shown a commitment to creating a fair and enjoyable experience for all participants. We leveraged powerful APIs like Alchemy and Infura, as well as cloud hosting services like Heroku and Vercel, to build a robust and scalable infrastructure that supports the collection.

As the NFT market continues to evolve, the Bufficorn Buidl Brigade project serves as a testament to the power of innovation and collaboration in this exciting space. With the team's passion and dedication, we have created a dynamic and engaging NFT collection that is poised to thrive in the ever-changing market.