NFT Themer

NFT Themer is a decentralized application (DApp) that harnesses the power of blockchain technology and our themer smart contracts to enable users to craft distinctive themed NFTs. These themed NFTs are not just static collectibles; they come alive with pre-defined interactive themes that respond to computer inputs such as mouse hovers and clicks. Users have the creative freedom to either upload their digital artworks or choose an existing NFT as their canvas.

Key Features:

Payment Flexibility: The platform seamlessly integrates $APE Token, among other supported payment tokens, as the means to access the theming services. Users can choose from a variety of tokens for their convenience, and the platform's admin can accommodate new payment methods upon request.

Efficient Asset Storage: The project leverages the InterPlanetary File System (IPFS) through nft.storage to securely store and retrieve digital assets. Multiple gateway URLs are employed to ensure the smooth retrieval of assets, enriching the user experience.

Cross-Chain Compatibility: Smart contracts underpinning the NFT Themer project are deployed on various blockchain networks, including Polygon Mumbai, Polygon zkEVM, Scroll Sepolia, Mantle Testnet, and other EVM-based chains. This multi-chain deployment enhances accessibility and scalability.

Creative Possibilities: The NFT Themer project serves as a versatile tool for a diverse range of creative applications. Users can customize collectibles, elevate gaming assets, personalize digital art pieces, and explore limitless artistic expressions. The platform empowers users to breathe life into their NFTs.

User Flow Summary:

NFT Selection: Users begin by selecting an existing NFT as their starting point for customization.

Payment: Users can conveniently pay for the theming service using $APE Token or other supported payment tokens.

Theming: The selected payment token is used to cover the theming service cost. The NFT Themer contract swiftly mints a new themed NFT based on the user's chosen customizations.

Ownership: The newly minted themed NFT is added to the user's wallet, ready to be showcased, traded, or admired. In the case of deployment on Polygon Mumbai, the themed NFTs are seamlessly viewable on the OpenSea NFT Marketplace.

The NFT Themer project represents a dynamic fusion of technology and creativity, offering a unique canvas for users to express themselves through themed NFTs that truly come to life. It's a gateway to a world of artistic possibilities within the blockchain ecosystem.

Building the NFT Themer project involved several technologies, from smart contract development and deployment to web development for the user interface. Here are the details of how the project was built:

Smart Contract Development:

Hardhat and Solidity: The project used Hardhat, a development environment for Ethereum, and the Solidity programming language to design, test, and deploy the smart contracts. These tools allowed for efficient contract development, testing, and deployment.

Themer.sol: The primary smart contract, when deployed, creates the Token Factory for themed NFTs, which is named ThemedERC721.sol. Themer.sol manages the theming process, including payment handling, and interacts with other contracts to create themed NFTs.

ThemedERC721.sol: This smart contract, created by Themer.sol, serves as the foundation for creating and managing themed NFTs. It allows users to mint new themed NFTs and stores information about the themes and customizations applied to each NFT.

MockedAPE Token: A mock APE token was created and integrated into Themer.sol to demonstrate the charging mechanism. This token is used to make users pay for each theming service when they customize their assets.

SquareCard.sol: An on-chain theme contract named SquareCard.sol was developed to theme static NFTs. This contract is used to apply themes to existing NFTs.

Frontend Development:

Next.js and Tailwind CSS: Next.js, a React framework, and Tailwind CSS were used for web development. These technologies provide a foundation for building responsive and interactive web interfaces.

Dropzone.js: The Dropzone.js library was integrated into the frontend to enable users to drag and drop files seamlessly. This functionality simplifies the process of customizing NFTs by uploading creative assets.

IPFS and nft.storage: The project utilizes the InterPlanetary File System (IPFS) for storing and retrieving metadata and image files associated with themed NFTs. The nft.storage service is used to upload files to IPFS and fetch metadata.

Gateway URLs: To ensure that the image URLs are accessible on-chain, multiple Gateway URLs are used to retrieve and display images. This is a crucial aspect of the on-chain theming process, as smart contracts cannot directly access or fetch IPFS files.

Minting Themed NFTs:

createThemedNFT Function: ThemedNFTs are minted using the createThemedNFT function. Users provide the payment token address, theme address, themer address, and other relevant information. If users choose an existing NFT as a base, the token address and token ID are collected to retrieve the image of the NFT.

Token Spending Approval: To initiate the minting transaction, users must first approve token spending for the APE token. This approval allows the smart contract to spend APE tokens on behalf of the user for the theming service.

APE Token Faucet: The project includes an APE token faucet, which is integrated into the platform. Users can request 1 million APE tokens from the faucet. Each theming service requires only 1 APE token.

Interactive Themed NFTs:

AnimationURL: Themed NFTs are designed to be highly interactive and engaging. They incorporate an animationURL by Supported NFT Marketplace like Opensea so it can respond to user interactions, such as mouse hovers, screen touches, and other computer inputs. This interactivity makes the NFTs unique, modern, and visually appealing.

The NFT Themer project brings together these technologies to create a platform where users can personalize and customize NFTs, enabling them to express their creativity and make their NFTs stand out in the blockchain ecosystem. The project leverages the blockchain's transparency and security while providing a user-friendly interface for customization.