diff --git a/README.md b/README.md index 09f5b2b..8417839 100644 --- a/README.md +++ b/README.md @@ -1,43 +1,46 @@ # NFT Marketplace -The whole NFT Marketplace. +This project consists of a backend, frontend, and subgraph to create a comprehensive NFT marketplace ecosystem. Users can mint, list, buy, and sell NFTs seamlessly. -## Install +## Project Structure -1. `$ cd backend` -2. `$ npm install` -3. `$ cd ../frontend` -4. `$ npm install` -5. `$ cd ../subgraph` -6. `$ npm install` +- **Backend:** Smart contracts for the NFT collection and marketplace. +- **Frontend:** Next.js application for interacting with the smart contracts. +- **Subgraph:** Subgraph using The Graph to gather blockchain data. + +## Features -## Run +- **Mint NFTs:** Create new NFTs and add them to your collection. +- **List NFTs:** List your NFTs for sale in the marketplace. +- **Buy NFTs:** Purchase listed NFTs from other users. +- **Cancel Listings:** Cancel your NFT listings. -1. `$ cd frontend` -2. `$ npm run dev` +## Setup +Follow the setup instructions in each of the subdirectories in this order: `backend`, `subgraph`, and `frontend`. -## Updating the NFT Marketplace contract +## Example workflow when updating contracts -If you want to change anything in the contract `../backend/contracts/NftMarketplaceV2.sol`, you have to follow these steps: +### NftMarketplaceV2 contract +If you want to change anything in the contract `backend/contracts/NftMarketplaceV2.sol`, you have to follow these steps: 1. `$ cd backend` 2. Update the contract 3. `$ npx hardhat deploy --network sepolia --contract NftMarketplaceV2` -4. Copy the contract's deployed address to: `../frontend/utils/deployedContracts.ts` and to `../subgraph/subgraph.yaml` -5. Copy the whole file from `../backend/artifacts/contracts/NftMarketplaceV2.sol/NftMarketplaceV2.json` to `../frontend/contracts` -6. Copy just the ABI array from `../backend/artifacts/contracts/NftMarketplaceV2.sol/NftMarketplaceV2.json` to `../subgraph/abis/NftMarketplaceV2.json` +4. Copy the contract's deployed address to: `frontend/utils/deployedContracts.ts` and to `subgraph/subgraph.yaml` +5. Copy the whole file from `backend/artifacts/contracts/NftMarketplaceV2.sol/NftMarketplaceV2.json` to `frontend/contracts` +6. Copy just the ABI array from `backend/artifacts/contracts/NftMarketplaceV2.sol/NftMarketplaceV2.json` to `subgraph/abis/NftMarketplaceV2.json` 7. `$ cd ../frontend` 8. `$ npm run compile-contract-types` 9. `$ cd ../subgraph` 10. `$ graph codegen` 11. `$ graph build` -12. `$ graph deploy --studio nft-marketplace-sepolia` -13. Update the `graphUrl` in `../frontend/utils/util.ts` +12. `$ graph deploy --studio ` +13. Update the `graphUrl` in `frontend/utils/util.ts` -## Updating the NFT Collection contract +### NftCollection contract -1. Update the `NftCollection.sol` contract in `./backend/contracts`. +1. Update the `NftCollection.sol` contract in `backend/contracts`. 2. Run `$ npx hardhat compile`. -3. Copy the artifact from `./backend/artifacts/contracts/NftCollection.sol/NftCollection.json` to the frontend here: `./frontend/contracts/NftCollection.json`. -4. Copy just the ABI from the artifact from `./backend/artifacts/contracts/NftCollection.sol/NftCollection.json` to the Graph here: `./subgraph/abis/NftCollection.json`. +3. Copy the artifact from `backend/artifacts/contracts/NftCollection.sol/NftCollection.json` to the frontend here: `frontend/contracts/NftCollection.json`. +4. Copy just the ABI from the artifact from `backend/artifacts/contracts/NftCollection.sol/NftCollection.json` to the Graph here: `subgraph/abis/NftCollection.json`. 5. Run `$ npm run compile-contract-types` in the frontend. diff --git a/backend/README.md b/backend/README.md index 263e8ea..b0a2929 100644 --- a/backend/README.md +++ b/backend/README.md @@ -1,39 +1,100 @@ -# Advanced Hardhat Project +# NFT Marketplace Hardhat Backend -This project demonstrates an advanced Hardhat use case, integrating other tools commonly used alongside Hardhat in the ecosystem. +This project consists of two main smart contracts: `NftCollection` and `NftMarketplaceV2`. Together, these contracts create a comprehensive NFT ecosystem where users can mint, list, buy, and sell NFTs. The marketplace contract also manages listing fees and interactions between buyers and sellers. -The project comes with smart contracts, tests with 100% coverage, and a script that deploys that contract and verifies it on Etherscan. +## Contracts -Install dependencies: +### 1. NftMarketplaceV2 -```shell -bun install -``` +The `NftMarketplaceV2` contract is a marketplace for listing and trading NFTs. It supports listing fees, buying, and canceling listings. Users can also add their NFT collections to the marketplace. -Fill out the `.env` file with the required information. +#### Features: +- **Listing and Buying:** Users can list their NFTs for sale and buy listed NFTs. +- **Canceling Listings:** Listings can be canceled by the owner of the NFT or the marketplace owner. +- **Listing Fee:** A configurable listing fee is required to list an NFT. +- **Collection Management:** Users can add their deployed NFT collections to the marketplace. -Deploy the contract to the Sepolia network: +#### Events: +- `ItemListed`: Emitted when an NFT is listed for sale. +- `ItemCanceled`: Emitted when a listing is canceled. +- `ItemBought`: Emitted when an NFT is bought. +- `CollectionAdded`: Emitted when a new NFT collection is added to the marketplace. -```shell -bunx hardhat deploy --network sepolia --contract NftMarketplaceV2 -``` +#### Functions: +- `listItem(address _nftAddress, uint256 _tokenId, uint256 _price)`: Lists an NFT for sale with the specified price. +- `cancelListing(address _nftAddress, uint256 _tokenId)`: Cancels a listed NFT. +- `buyItem(address _nftAddress, uint256 _tokenId)`: Buys a listed NFT. +- `addCollection(address _nftAddress)`: Adds an NFT collection to the marketplace. +- `setListingFee(uint256 _newFee)`: Sets a new listing fee. -Also try running some of the following tasks: +### 2. NftCollection -```shell -bunx hardhat accounts -bunx hardhat compile -bunx hardhat clean -bunx hardhat test -bunx hardhat node -bunx hardhat help -bunx hardhat coverage -REPORT_GAS=true bunx hardhat test -bunx eslint '**/*.{js,ts}' -bunx eslint '**/*.{js,ts}' --fix -bunx prettier '**/*.{json,sol,md}' --check -bunx prettier '**/*.{json,sol,md}' --write -bunx solhint 'contracts/**/*.sol' -bunx solhint 'contracts/**/*.sol' --fix -bunx hardhat verify --network sepolia DEPLOYED_CONTRACT_ADDRESS "Hello, Hardhat!" -``` +The `NftCollection` contract is an ERC721 implementation that allows the owner to mint NFTs with specific URIs. It integrates with a marketplace to automatically cancel listings when an NFT is transferred. + +#### Features: +- **Minting:** Only the owner can mint new NFTs. +- **Token URI Management:** Each token has a URI that can be set during minting. +- **Marketplace Integration:** Automatically cancels a listing in the marketplace when the NFT is transferred. +- **ERC721 Extensions:** Supports burnable tokens, enumerable tokens, and URI storage. + +#### Functions: +- `safeMint(address _to, string memory _uri)`: Mints a new token to the specified address with the given URI. +- `_afterTokenTransfer(address _from, address _to, uint256 _tokenId, uint256 amount)`: Checks if the token is listed in the marketplace and cancels the listing if it is. + +## Setup + +To get started with this project, follow these steps: + +### 1. Install dependencies: + Preferably use `bun` to install the dependencies: + ```sh + bun install + ``` + + Or use npm if you prefer: + ```sh + npm install + ``` + + Similary, choose `bunx` or `npx` for the other commands. + +### 2. Set env variables: + Fill out the `.env` file with the required information based on the `.env.example` file. + +### 3. Run tests: + ```sh + npx hardhat test + ``` + + You can also check the test coverage: + ```sh + npx hardhat coverage + ``` + + +### 4. Deploy: + If you want to deploy to your local node, start the node first: + + ```shell + bunx hardhat node + ``` + + Then deploy the contract: + + ```shell + bunx hardhat deploy --network localhost --contract NftMarketplaceV2 + ``` + + Deploy the `NftMarketplaceV2` contract to the blockchain network, for example Sepolia: + + ```shell + bunx hardhat deploy --network sepolia --contract NftMarketplaceV2 + ``` + + **Note 1:** Make sure to note down the contract address for the frontend application. + **Note 2:** The contract will automatically be verified on Etherscan if the API key is provided in the `.env` file. + **Note 3:** There is no need to deploy the `NftCollection` contract, as it is deployed by users on the frontend. + +## Usage + +After deploying the marketplace, you can interact with it through the frontend application. diff --git a/backend/bun.lockb b/backend/bun.lockb index 7f6a84c..24f90a0 100644 Binary files a/backend/bun.lockb and b/backend/bun.lockb differ diff --git a/backend/package.json b/backend/package.json index 502675b..bad4144 100644 --- a/backend/package.json +++ b/backend/package.json @@ -2,18 +2,10 @@ "name": "nft-marketplace-backend", "author": "Jan Cibulka", "version": "1.0.0", - "description": "NFT Marketplace using The Graph built as a part of the Lime Academy challenge.", + "description": "A comprehensive NFT ecosystem with smart contracts for minting, listing, buying, and selling NFTs. This project includes an ERC721 NFT collection contract and a marketplace contract.", "url": "https://github.com/jannden/nft-marketplace", - "private": true, "engines": { - "node": ">=16.0.0" - }, - "scripts": { - "test": "npx hardhat test", - "deploy": "npx hardhat deploy --network localhost", - "deploy:sepolia": "npx hardhat deploy --network sepolia", - "interact": "npx hardhat run --network localhost scripts/NftMarketplaceV2.interact.ts", - "interact:sepolia": "npx hardhat run --network sepolia scripts/NftMarketplaceV2.interact.ts" + "node": ">=20.0.0" }, "devDependencies": { "@nomiclabs/hardhat-ethers": "^2.2.3", @@ -27,10 +19,10 @@ "@types/node": "^20.12.13", "@typescript-eslint/eslint-plugin": "^7.11.0", "@typescript-eslint/parser": "^7.11.0", - "chai": "^5.1.1", + "chai": "^4.3.10", "dotenv": "^16.4.5", + "eslint": "8.57.0", "es6-promise": "^4.2.8", - "eslint": "^9.3.0", "eslint-config-prettier": "^9.1.0", "eslint-config-standard": "^17.1.0", "eslint-plugin-import": "^2.29.1", diff --git a/frontend/.env.example b/frontend/.env.example index 73e378c..e8d7fe7 100644 --- a/frontend/.env.example +++ b/frontend/.env.example @@ -1,5 +1,5 @@ // This can be used in .env.developement and .env.production -NEXT_PUBLIC_SERVER= +NEXT_PUBLIC_SERVER=http://localhost:4001 INFURA_IPFS_ID= INFURA_IPFS_SECRET= \ No newline at end of file diff --git a/frontend/README.md b/frontend/README.md index c6093fb..564086e 100644 --- a/frontend/README.md +++ b/frontend/README.md @@ -1,17 +1,38 @@ +# NFT Marketplace Next.js Frontend + +This is a Next.js frontend application for interacting with the NFT Marketplace and NFT Collection smart contracts. It allows users to mint, list, buy, and sell NFTs seamlessly. + ## Features -- Separate packages from [ethers.js](https://docs.ethers.io/v5/) for improved tree-shaking, often only ethers Contracts -- Hooks-first approach to fetching and caching data from Contracts and memoization for performance with [SWR](https://swr.vercel.app) -- [web3-react](https://github.com/NoahZinsmeister/web3-react) for ease of connecting to Web3 providers with a solid API -- Auto-generates types for the contract ABIs in the `/contracts` folder via [TypeChain](https://github.com/ethereum-ts/TypeChain) -- MetaMask connection -- WalletConnect connection +- **Mint NFTs:** Create new NFTs and add them to your collection. +- **List NFTs:** List your NFTs for sale in the marketplace. +- **Buy NFTs:** Purchase listed NFTs from other users. +- **Cancel Listings:** Cancel your NFT listings. + +## Installation + +### 1. Install dependencies: +Preferably use `bun` to install the dependencies: +```sh +bun install +``` -### Auto Contract Type Generation +### 2. Configure the Environment: +Create a `.env.development` and `.env.production` based on the `.env.example` file. Fill in the required values. -**Note**: After adding in your new contract ABIs (in JSON format) to the `/contracts` folder, run `bun run compile-contract-types` to generate the types. +### 3. Update the Contract Addresses: +Follow the instructions in the backend README to compile and deploy the NFT Marketplace contract. + +Update the contract address of NftMarketplaceV2 in `utils/deployedContracts.ts` with the address of your deployed contract. + +Add the full contract ABIs (in JSON format) to the `contracts` folder. You can find the ABIs in the `artifacts` folder of the `../backend` project. + +### 4. Compile Types from ABIs: +```sh +bun run compile-contract-types +``` -You can import these types when declaring a new Contract hook. The types generated show the function params and return types of your functions, among other helpful types. +You can import these types so that you know the function params and return types of the methods, among other helpful things. For example: ```ts import MY_CONTRACT_ABI from "../contracts/MY_CONTRACT.json"; @@ -23,12 +44,14 @@ export default function useMyContract() { } ``` -## Getting Started +### 5. Update the Graph URL: +Follow the instructions in the subgraph README to deploy the subgraph. +Update the `graphUrl` in `utils/util.ts` with the URL of your deployed subgraph. -First, run the development server: +## Running the Application -```bash -bun dev +```sh +bun run dev ``` Open [http://localhost:4001](http://localhost:4001) with your browser to see the result. \ No newline at end of file diff --git a/frontend/bun.lockb b/frontend/bun.lockb index c4158ac..9023ee1 100644 Binary files a/frontend/bun.lockb and b/frontend/bun.lockb differ diff --git a/frontend/package.json b/frontend/package.json index ac14ee5..0943758 100644 --- a/frontend/package.json +++ b/frontend/package.json @@ -2,9 +2,11 @@ "name": "nft-marketplace-frontend", "author": "Jan Cibulka", "version": "1.0.0", - "description": "NFT Marketplace using The Graph built as a part of the Lime Academy challenge.", + "description": "A Next.js frontend for interacting with the NFT Marketplace and NFT Collection smart contracts, allowing users to mint, list, buy, and sell NFTs seamlessly.", "url": "https://github.com/jannden/nft-marketplace", - "private": true, + "engines": { + "node": ">=20.0.0" + }, "scripts": { "dev": "next dev -p 4001", "build": "next build && next export", @@ -42,13 +44,10 @@ "@typechain/ethers-v5": "^11.1.2", "@types/node": "^20.12.13", "@types/react": "^18.3.3", - "eslint": "^9.2.0", + "eslint": "^8.57.0", "eslint-config-next": "^14.2.3", "ethers": "^5.7.2", "typechain": "^8.3.2", "typescript": "^5.4.5" - }, - "trustedDependencies": [ - "protobufjs" - ] + } } \ No newline at end of file diff --git a/subgraph/README.md b/subgraph/README.md new file mode 100644 index 0000000..d2897ee --- /dev/null +++ b/subgraph/README.md @@ -0,0 +1,55 @@ +# NFT Marketplace Subgraph Database + +This subgraph uses The Graph to gather data about the blockchain for the NFT Marketplace. + +## Setup + +### Installation +Install the dependencies with yarn: + ```sh + yarn install + ``` + +### Configuration + +1. **Update Marketplace Address:** + Modify `subgraph/subgraph.yaml` with the deployed marketplace address (NftMarketplaceV2). + +2. **Copy ABI:** +Copy just the ABI array from `../backend/artifacts/contracts/NftMarketplaceV2.sol/NftMarketplaceV2.json` to `subgraph/abis/NftMarketplaceV2.json`. Important: copy just the ABI array, not the whole file even though the filenames are the same. + +Do the same for the NftCollection contract. + +### Deploying the Subgraph + +If you don't have a subgraph already set up, you just need to install the Graph CLI: +```sh +npm install -g @graphprotocol/graph-cli +``` + +And authenticate: +```sh +graph init --studio +``` + +Once that's out of the way, you can deploy the subgraph: + + +1. **Generate Code:** + ```sh + graph codegen + ``` + +2. **Build the Subgraph:** + ```sh + graph build + ``` + +3. **Deploy the Subgraph:** + ```sh + graph deploy --studio + ``` + +### Frontend Configuration + +Update the `graphUrl` in `../frontend/utils/util.ts` with your deployed subgraph URL. \ No newline at end of file