- Introduction
- Project Description
a. Tech Stack
b. Role System
c. Royalties
d. IPFS
e. MetaMask - Features
a. Backend
b. Frontend - Future Work
- How to Run
a. Backend
b. MetaMask
c. IPFS
d. Frontend
Building a reputation early is extremely important for all aspiring artists. However, in order to do so while still in school, students would need to produce artwork to meet fair and museum schedules while also completing their regular coursework. This overload of work is not sustainable for most full-time students and can lead to negative consequences, including burnout. Yet, if students wait until graduation to begin entering the industry, they will likely have a period of minimal income, as they create art and wait for sales to increase. Lack of income combined with a possible debt from student loans can form a massive barrier of entry for recent graduates. Therefore, a solution is needed that would allow students to begin exposing themselves to the industry on their schedule, while also fulfilling their own responsibilities and coursework.
One such solution is a digital NFT marketplace, which allows artists to create unique digital artworks and sell them online. However, while students could list on such marketplaces, their art would be hidden amongst thousands of more well-known digital artists. For this reason, we wish to create a Cooper Union NFT marketplace with the sole purpose of giving Cooper Union artists a platform on which their art can be seen and purchased.
The purpose of this project was to develop an Ethereum-based NFT marketplace following the ERC-1155 token standard. The marketplace would restrict minting to Cooper Union students alone and would be driven by the Cooper Union name brand. This proof-of-concept would display the possibilities of applying an NFT marketplace to an academic institution and would initiate conversations within Cooper Union on its development.
The full project paper can be read here.
The marketplace was developed on the Ethereum blockchain using the Solidity language, the ERC1155 token standard, and the EIP2981 royalty standard. NFTs are stored on IPFS, MetaMask is used to interact with users' Ethereum wallets, and the frontend was developed in React.
The core feature of this marketplace is the restriction of minting art to current students. This is accomplished through a system of account roles built into the marketplace smart contract, which is implemented using OpenZeppelin’s AccessControl library. Users are not required to have a role, but the available roles are: Cooper Union, Admin, Current Student, and Previous Student.
The Cooper Union role is automatically assigned to the account that deploys the marketplace contract. This account, presumably run by Cooper Union administration, would have control over main aspects of the marketplace; currently, this is limited to the marketplace transaction fee, but more customizability could be added in the future as required. The marketplace owner also has the ability to assign the Admin role to other accounts; these admin accounts would be responsible for validating students, assigning them the Current Student role, and changing the role to Previous Student upon graduation. Realistically, these admins would be Cooper Union administrators working in tandem with the registrar. Current students have the ability to mint new artwork, while previous students have no distinct functionality, but are tracked in case future features require it. All accounts, though, including those without a specified role, have the ability to purchase art on the marketplace and resell all owned art.
Another essential feature of the marketplace is creator royalties; when an NFT is resold, a percentage of the sale price is paid to the creator of the NFT, or another Ethereum wallet of their choosing. This functionality is accomplished by implementing the EIP-2981 NFT Royalty Standard in the NFT smart contract. When a creator mints a new piece of artwork, they may specify a royalty percentage up to fifteen percent as well as the desired royalty receiver; these fields cannot be changed and are stored within the NFT smart contract, where they can be requested by any marketplace implementing this royalty standard. Therefore, since most marketplaces are adopting EIP-2981, NFTs minted and sold on the Cooper NFT Marketplace can be integrated into the wider Ethereum marketplace network.
While NFTs can be stored on the blockchain itself, this can become prohibitively expensive as each byte of data used incurs a fee. A more common approach, which is implemented in this project, is storing the NFT elsewhere and storing a hash of the token address on the blockchain. At first glance, this may appear less secure, but platforms exist that solve these issues. The system used in this project, and promoted by Ethereum, is InterPlanetary File System (IPFS).
IPFS is a distributed system for storing and accessing files, websites, applications, and data. The two main features of IPFS are decentralization and content addressing. Files are stored across all nodes participating in the system, allowing for data resiliency, so if a server goes down, the token will not be lost. Additionally, tokens are addressed by hashes of the content contained. Therefore, the address for a given block of data, or token, will never change, and if the content of the data changes, it will be given a new address. Meaning, once an IPFS address is stored on the blockchain, the content it references cannot be modified or tampered with.
The pipeline for minting an NFT on this marketplace is as follows: Once the necessary information is acquired, the file or artwork is uploaded to IPFS. IPFS, as described above, will return a content id (CID) referring to the file. This CID is packaged with other information to create the NFT metadata, which is then uploaded to IPFS. The CID referring to the metadata is passed to the NFT contract where it is used as the token ID of the newly minted NFT.
For the purposes of this project, Infura was used to access IPFS. Infura is a platform that provides dedicated IPFS nodes for blockchain-based applications; testing of the marketplace did not reach the threshold of Infura’s free tier, but constant access from the Cooper Union student body most likely would. Therefore, if this project is further developed upon and ultimately deployed, Cooper Union would benefit from hosting their own IPFS node, which they could use to store all NFTs listed on their marketplace.
Many choices exist for connecting Ethereum wallets to marketplaces, but one of the most popular options, which is used in this project, is MetaMask. MetaMask is a crypto wallet browser extension that allows users to link their Ethereum wallets with websites. Wallets, on this marketplace and most others, act as a user’s unique identifier and account. Once linked, this marketplace will have the ability to initiate Ethereum transactions on behalf of the user, which must then be accepted and paid for through MetaMask; no transaction can occur without the user explicitely accepting. In order to access any account-based functionality, including viewing owned NFTs and purchasing NFTs, users would have to connect their MetaMask wallet.
The backend of the marketplace consists of two Ethereum smart contracts; one smart contract controls the minting and ownership of NFTs, while the other contract runs the marketplace. Functionality of the marketplace contract includes: assigning roles; creating, editing, selling, and canceling market listings; and various methods to fetch desired information.
The marketplace frontend was developed with ReactJS and interacts with the Ethereum smart contracts using the EthersJS library. All pages of the marketplace are responsive to screen size and will work on mobile devices. Regardless of whether a user has connected a wallet or not, they will be able to access the home page, the about page, the explore page, and individual NFT pages.
When entering the site, users will be greeted with a home page containing a ‘Discover New Art’ button that redirects to the explore page, a carousel displaying recently listed NFTs, and basic information for sellers and buyers.
1.Home.Page.mp4
On the explore page, users can view all NFTs currently listed on the marketplace, displayed as a grid of NFT cards. Each NFT card displays the NFT image, which will enlarge on hover, the seller, the price in ETH, and an approximate price in USD, using a conversation rate from the Coinbase API. If a user has connected a wallet, they will be able to click on the heart icon to add the NFT to their favorites, so that it can be viewed at a later time on the favorites page.
Any page that displays NFTs, like the explore page, will contain a filter bar that allows the user to search NFT names and descriptions, or select a desired sort order; the possible fields to sort by are date listed and price, ascending and descending. Selecting the icon right of the sort selector will open a filters modal with more filter options depending on the page, and clicking the rightmost button will reset all filters.
2.Explore.Page.mp4
If a user selects an NFT image, they will be redirected to that NFT’s page, which will display all information shown on the NFT card as well as the NFT’s description. The buttons, or actions, available on the individual NFT page will depend on if the user owns the given NFT. If the user does not own the viewed NFT, then it will be available to purchase; clicking the purchase button will open a prompt from MetaMask to accept the transaction and pay the desired sale price. If the user owns the NFT, then they will have access to a cancel listing button and an edit listing button, if listed, or a list NFT button if not listed.
3.NFT.Page.mp4
If a user has not connected their MetaMask account, a login button will appear in the navbar and all attempts to access wallet-required pages will redirect to the login page. On the login page, if the user has installed the MetaMask browser, a button will appear that will open a MetaMask connection prompt; this MetaMask prompt will ask the user to select which wallets they would like to connect. If the user has not previously installed MetaMask, the page will supply a short description of the extension and offer a link to its download page.
4.MetaMask.mp4
Once a wallet is connected, users will be able to access the favorites page and the My NFTs page, which allow them to view NFTs they have favorited and NFTs they own, respectively. On the My NFTs page, users can toggle between viewing listed and unlisted NFT, as well as set a maximum and minimum price, through the filters modal.
If an NFT is unlisted, the NFT card will display a “List NFT” button instead of the price. Selecting this button will open a modal that will allow the user to easily list the NFT.
5.My.NFTs.Page.mp4
On the create page, if the current user has been assigned the student role, then the create NFT form will be displayed. This easy-to-use form will walk the user through submitting all the necessary information to mint an NFT of their artwork. At the top of the form, users can drag and drop a file or click on the box to open a file viewer. Once uploaded, a preview of the file will be displayed. Selecting the “What are Royalties?” button will open a modal containing a short description of marketplace royalties. It is possible to opt-out of royalties, if the user is not interested; however, if the user decides to add a royalty percentage, which maxes out at fifteen percent, they can select to send the royalties to their own wallet, to Cooper Union, or to a wallet they write in. Listing the to-be-minted NFT on the marketplace is opt-in. If the user opts not to list the NFT, it will be minted and added to their owned, and unlisted, NFTs; if the user adds a sale price, then the minted NFT will be immediately listed on the marketplace. Listing the NFT at the time of minting saves the user some gas fees as one less transaction is required.
If a non-student account attempts to mint an NFT, the page will instead display the option to request access. If selected, a modal will open requesting the student’s information, which would then be sent to the marketplace admins.
8.Create.Page.mp4
6.Create.Page.-.No.Access.mp4
If the current user has been assigned as an admin, then they will have access to an admin page, which will appear in their navbar. This admin page would contain any settings relevant to admins, but at the moment only contains a form to update users’ roles. In this form, an admin can add as many valid wallet addresses, or accounts, as they wish, and the selector options will display all role-changing actions applicable to all wallet addresses given.
7.Admin.Page.-.Update.Status.mp4
Although the core implementation of the desired marketplace has been completed, there is still a lot more to accomplish. Future work on the current marketplace design would include fleshing out incomplete features and adding new ones that could not be completed in the allotted time. These additional features include user profiles, minting multiple NFTs in a single batch operation, minting fungible tokens with a specified edition size, auction style sales, listing end-times, favorited counter, and NFT collections. These features are similar to larger marketplaces and would greatly benefit this marketplace’s user experience.
The current design of the marketplace requires the user to pay for all minting. However, in a marketplace run by an academic institution, this would create an unfair advantage to wealthier students who can afford to list more artwork. Two possible solutions to this issue were discussed, along with their drawbacks. The first possibility was to have Cooper Union pay for all gas fees; the issue with this system, though, is that Cooper Union would want to confirm that the art they are paying for is actual art, and not someone attempting to mess with the system and waste money. Determining this, however, would require a staff member acting as a marketplace gatekeeper, approving NFTs they believe to be genuine, and a database to store the NFTs until they are approved and minted. Implementing this would require hiring someone for the gatekeeper position, as well as open up the school to issues with determining which art is truly genuine.
An alternative solution would be to have Cooper Union allot each student a specific minting allowance. No gatekeeper would be required, since students attempting to waste money would just be wasting their own. If this could be implemented within the smart contract, then the school wouldn’t need to be involved in the minting process other than supplying the funds. This is a promising solution, but would require significantly more discussion and thought before it would be approved by the school administration.
Connecting the marketplace to the institution’s website is another potential application of our project. The donation page could have a section to donate NFTs; these NFT would be sold on the marketplace and all proceeds and future royalties would go to Cooper Union.
Finally, the largest change that would need to be completed in the future, is moving the marketplace to an alternate blockchain. Throughout our discussions with students and faculty of the School of Art and Architecture, we received pushback for using the Ethereum blockchain, because of its environmental implications. Since this project was meant as a proof-of-concept to present to administration, Ethereum was chosen due to the abundance of documentation. However, if Cooper Union wishes to proceed with this marketplace, the smart contracts will need to be rewritten for a blockchain that better aligns with the institution's values.
Both the frontend & backend use NodeJS v16.13.0 and the Yarn Package Manager.
Ensure the correct version of Node is installed and active, and then use yarn install in each directory to install all dependencies.
Hardhat is used to compile, deploy, and test the Ethereum smart contracts.
In order to deploy a local Ethereum network node to test smart contracts on, run npx hardhat node.
If successful, hardhat will print a series of test Ethereum wallets that can be imported into MetaMask.
Once the Ethereum node is set up, the contracts can be deployed with npx hardhat run scripts/deploy.ts --network localhost.
This will run the deploy script and, if successful, will print the addresses of both contracts.
To allow the frontend to send requests to the smart contracts, create a file named CONTRACT_ADDRESSES.ts in the frontend/src/services directory and paste the following code, filling in the contract addresses printed by Hardhat.
// Blockchain Addresses for Smart Contracts
export const CU_NFT_ADDRESS = '0x#############################';
export const CU_MARKETPLACE_ADDRESS = '0x#############################';To connect MetaMask to the test network, Show Test Networks will need to be enabled in Settings -> Advanced. Once enabled, use the network dropdown menu to select Localhost 8545.
The test Ethereum wallets printed by Hardhat can now be added to MetaMask by selecting Import Accounts and pasting the private keys of the accounts desired. When testing, Account 0 will be the account that deployed the contract and will be given the Cooper Union & Admin marketplace roles.
Infura was used to access IPFS in this project. To connect this project to Infura, create an Infura account and a free-tier IPFS project.
In the frontend/src/services directory, create a file named IPFS_AUTH.ts and paste the following code, filling in the project ID & secret:
// Project ID & Secret for Infura
export const IPFS_PROJECT_ID = '####################';
export const IPFS_PROJECT_SECRET = '####################';Use yarn start to deploy the react server and start the frontend on http://localhost:3000/.