Readme files and package updates

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 <YOUR_SUBGRAPH_NAME>`
+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.

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.

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",

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=

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.

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"
-  ]
+  }
 }

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 <SUBGRAPH_SLUG>
+```
+
+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 <YOUR_SUBGRAPH_NAME>
+   ```
+
+### Frontend Configuration
+
+Update the `graphUrl` in `../frontend/utils/util.ts` with your deployed subgraph URL.