ViewBasedRoyaltyNFT

Screenshots

Problem Statement

The "Create" page is used to mint new NFTs and set parameters such as: how much in ETH a user must pay to view the content on the NFT, how long the viewer can view the content for after paying (until the view-ability expires), all the addresses which should be allocated part of the royalty. The "Home" page shows all the tokens on the ERC721 where the content is only visible if the connected address can "view" the NFT (meaning the address was the creator or has "view" access at the given time). This project is composed of several key components. Starting with the derivative of the ERC721 standard, the smart contract used has the primary responsibility of facilitating payments, determining when an NFT may or may not be viewed by a certain address and allowing content creators to customize how much would be needed to view a certain NFT and how long it can be viewed for before another payment is required. The second critical component for this project is the mechanism to conceal the location of content . At the moment the goal is to use the Pinata Submarine API to store the content on a private IPFS node and utilize a gateway which will check with the smart contract if a certain NFT can be viewed by a certain address (if it can then the content is revealed). During the time of submission the dApp is not using the Submarine API - it is using public IPFS. Implementing the use of Submarine will be something I continue to work on after the hackathon.

Solution

Solidity (ERC721), ethers.js to communicate with the network, React.js for the frontend, IPFS for storage of the NFT content. Most of the testing for the smart contract code was performed through Remix. Given the goal of this project is to gate the viewership of NFTs, it was important to allow a user to view the content of an NFT if the ERC721 contract returned 'true' when queried if a certain address can view the token's URI. Something that might be considered hacky (or cheating depending how you look at it) is that the front end was forked off an Opensea clone from a dAppUniversity tutorial. I was planning on pairing with an engineer who had much stronger frontend skills than I do, but I ended up getting sick and we decided its best if the person joined another team. So I needed a workable UI fairly quickly and thought using an Opensea clone would do the trick.