---
# System prepended metadata

title: ERC721

---

# ERC721
As a user I want to be able to connect my wallet to an application and mint new nft.

On this application we will require a minting page where the user will add title, description and upload a photo. And at the end of the process to call the minting function on the provided contract.

Minting function should be disabled if the user has not connected his/hers wallet on the app.

After successful minting the user should be notified that nft has minted successfully or if some error occurred notify the user about the error in the ui.



The 2nd part of the application is the user dashboard where the user can see nfts that user holds for this app.

When the user is on the dashboard and has connected his wallet. Display all nfts that user has minted on this app.
If the wallet is not connected, display a message to connect a wallet.

To display all nfts create an NFT Card that will show images in Resized dimensions and title.
Use the created nft card to display all nfts in a grid.
In services, add NFTService and add a minting function inside that file.

Use wagmi establish contract integration with the app. 

To pull all nfts for the user create a graph query to fetch all nfts that user owns.


ERC721 Mint function parameters: 
mint(to: string, uri: string);

Acceptance criteria: 
1. Create page for minting nft.
It should contain inputs for title, description and image.
Create function to upload image from local storage and store it to decentralised storage. (IPFS)
Use https://docs.opensea.io/docs/metadata-standards to create standardised json object and store the json object to decentralised storage.
2. Create service call to contracts
use wagmi integration to call minting function.
3. Create NFT Card
NFT card will display image, title and owner.
4. Create users profile
On top of the users profile show users address.
Show all minted nfts for a user in grid view. 
Display all nfts in nft cards.

Figma design:
https://www.figma.com/file/XB4gGDbJpYZfIQ7WKCUy8W/Untitled?node-id=0%3A1&t=Aq82EFBS6cP3Bo1Y-1

To fetch minted nfts for authorised wallet use Graph. 
Token object structure on graph: 
```
nfts {
    id
    tokenURI
    owner
}
```

Graph API:
https://api.thegraph.com/subgraphs/name/linumlabs/token-tracer-721


## Needed variables

Contracts are deployed on goerli network:
ERC721 

env var: 
```
NEXT_PUBLIC_CHAIN_ID=5
NEXT_PUBLIC_ALCHEMY_ENDPOINT=  // example https://www.alchemy-goerli.io/[API_KEY]
NEXT_PUBLIC_NFT_ADDRESS="0x3D216932E996c025E1d417c0396b1105a68963c6"

```

Needed INFO: 
IPFS_NODE = 'https://ipfs.io/ipfs';
GRAPH_ENDPOINT = 'https://api.thegraph.com/subgraphs/name/linumlabs/token-tracer-721';
Contract: https://goerli.etherscan.io/address/0x3D216932E996c025E1d417c0396b1105a68963c6#code
ABI: 
https://github.com/LinumLabs/web3-task-abi/blob/dev/Musharka721.json

Create your own ipfs infura 
example of fetching data from ipfs: https://infura-ipfs.io/ipfs/QmcSgvw7wcRkVJygzQgJ3HvjUJA5MLBA3Uwv95QWjh1S1F



When review is needed add @saksijas to your repo.
## Requirements
React, Typescript, NextJS.