13 posts tagged with "NFT"

Welcome to our NFT generation and deployment tutorial! In just two clicks, you can create and deploy your own valuable NFTs. Our tutorial will guide you through the process of generating and deploying unique NFTs quickly and easily.

This tutorial will guide you on how to set up your environment to create an AI-generated NFT collection. You will learn how to configure your .env file, run the backend and frontend servers, and ensure that you have enough faucet funds.

What is DALL-E 2?

DALL-E 2 is an artificial intelligence (AI) model developed by OpenAI. DALL-E 2 is designed to generate images from textual descriptions.

It is capable of generating complex and detailed images. It can create images that are up to 1024x1024 pixels in size, and can generate multiple objects and textures within a single image. DALL-E 2 can also create images that are animated and can be interacted with.

INSTALLING THE PROJECT​

CREATING STARTON PROJECT​

1. Clone the project from Starton AI generative NFT collection GitHub.

SETTING UP ENVIRONMENT VARIABLES​

Before you start setting up the project, you need to set the environment variables.

1. In the backend folder of the project, set up an .env according to .env.example:

API_HOST=localhost
API_PORT=8000

## Put on the following line your Starton API key (available at https://app.starton.com)
STARTON_API_URL='https://api.starton.io/v3'
STARTON_API_KEY=

## Put on the following line your Signer wallet address
STARTON_SIGNER_WALLET=

## Put on the following line your OpenAI API key (available at https://platform.openai.com/account/api-keys)
OPEN_AI_API_KEY=

1. In the frontend set up your .env file according to .env.example :

NEXT_PUBLIC_BACK_URL=http://localhost:8000

SETTING UP THE SERVER SIDE​

Here we would like to enter the data needed to generate and deploy your collection as well as entering your API, so that you can authenticate safely to the API.

1. Go to the backend folder of the project.
2. Run the command yarn install to install the required dependencies.
3. Start the server by running the command yarn dev.

SETTING UP OUR CLIENT SIDE​

On the client side, we will set up all the information of your smart contract to connect your project to Web3Auth.

1. Go to the frontend folder of the project.
2. Run the command yarn install to install the required dependencies.

RUNNING THE PROJECT​

To run your project, you will need to run commands both on server and client side.

1. In server, run the command yarn dev
2. In client, run the command yarn dev

Visit http://localhost:3000 to test your project.

GENERATING AND DEPLOYING YOUR COLLECTION​

Once started, visit http://localhost:3000 to enter the following parameters:

1. Enter the receiver wallet of the NFT (where you want to send the NFTs).
2. Select the network on which you want to deploy your NFTs. If you are testing, then use the testnet network, and if you are ready to deploy, use the mainnet network (between Polygon, Avalanche, Binance, and Ethereum).
3. Choose the number of NFTs that you want to create for your collection.
4. Enter the prompt that will generate the images for your NFTs. You can use different prompts to create unique and personalised NFTs.
5. Click Generate to display the assets for your NFTs.
6. Review the generated assets.
7. Once you are satisfied with the images, click Deploy.

Congratulations! You just deployed an NFT collection of images generated by AI.

In this tutorial, you will learn how to sell an NFT in an Auction.

Deploy an ERC721​

You will start by deploying an ERC721 that will be the base of the NFT you want to sell in an auction.

Upload Contract-level metadata on IPFS​

To enter a name on the marketplace’s dashboard and perceive fees when someone sells one of our NFTs, we need to implement the contract-level metadata.

Here are the values we will use:

{
	"name": "My Super NFT on Auction",
	"description": "You’ve never seen NFTs this beautiful.",
	"image": "",
	"external_link": "",
	"seller_fee_basis_points": 100,
	"fee_recipient": "PUT YOUR ADDRESS HERE"
}

We now have the content of our metadata, we need to upload it on IPFS.

To upload our files on IPFS we will now use the Starton IPFS pinning service.

As the contract-level metadata only needs to be uploaded once, we can directly do it from our dashboard.

1. Go to IPFS.
2. Click Upload.
3. Select JSON.
4. Enter JSON content.
5. Enter a name for the file.
6. Click Upload.

Once done, a column “CID” appears with a value for our file. We will use this data for the Contract Uri Suffix of our smart contract!

Upload a file on IPFS​

We also use IPFS to store the content that will be referenced in our deployed contract. We do not store the content directly on blockchain as it is too heavy and would induce a very high cost. The best solution is to store it somewhere else and only store a reference on-chain.

1. Go to IPFS.
2. Click Upload.
3. Select File(s).
4. Select content.
5. Enter a name for the file.
6. Click Upload.

Once our image uploaded, let's upload its metadata so that we can call it from our smart contract function.

Upload the metadata of your content on IPFS​

1. Go to IPFS.
2. Click Upload.
3. Select JSON.
4. Select content.
5. Enter a name for the file.
6. Click Upload.

Everything we need to sell your NFT is an auction is done.

Deploy the base contract​

We will deploy the contract only once, so we will do it directly from Starton’s dashboard.

We can access the list of templates in the Smart contract section.

1. Select the ERC721 NFT Smart Contract template.
2. Enter:

• a name for your contract,
• a wallet to sign the transaction,
• a blockchain / network on which to deploy, here BNB testnet.
• the parameters of our contract. For more information on parameters, check out the Deploying a Smart Contract.

For example, we can call our contract “Best NFTs on BNB” and deploy it on the BNB Testnet network.

The following constructor parameters are:

• definitiveName: This name stored on blockchain, we will use “Best NFTs on BNB”.
• initialTokenUri: This is the public URL that contains the metadata of the collection. Here it starts with ipfs://ipfs/,
• initialContractUri: The URI of the metadata that will be used to give more details about the description.
• initialOwnerOrMultisigContract: The address that will own the NFT Collection.

We can finally deploy our contract!

Deploy an ERC721 Auction​

We will deploy the contract only once, so we will do it directly from Starton’s dashboard.

We can access the list of templates in the Smart contract section.

1. Select the ERC721 Auction template.
2. Enter:

• definitiveTokenAddress: The token address of the ERC721 that you want to sell.
• definitiveFeeReceiver: The address that will receive all the price paid to mint the NFTs.
• initialStartingPrice: The initial price that the NFT will be sold for.
• initialMinPriceDifference: The price increase that a user needs to at least put to bid on top of the current auction winner.
• initialStartTime: The time when the sale will begin and users can bid.
• initialEndTime: The time when the sale will end and users couldn't bid anymore.
• initialTokenURI: The URI that will be append in the end of the base token URI for the token that will be minted.

Interact with your contract​

You can now bid, claim, or start a new auction. The mint of your NFT is made when the bidder which has won the auction claims it.

In this tutorial, you will learn how to sell an NFT collection in an Auction.

Deploy an ERC1155 Auction Sale smart contract​

You can start by accessing the list of templates in the Smart contract section. Then, you can deploy the smart contract from code.

const axios = require("axios")

const axiosInstance = axios.create({
	baseURL: "https://api.starton.com",
	headers: {
		"x-api-key": "PUT HERE YOUR API KEY",
	},
})

axiosInstance
	.post("/v3/smart-contract/from-template", {
		network: "",
		signerWallet: "",
		templateId: "ERC1155_AUCTION_SALE",
		name: "",
		description: "",
		params: [
			"", //definitiveTokenAddress
			"", //definitiveFeeReceiver
			"", //initialStartingPrice
			"", //initialMinPriceDifference
			"", //initialStartTime
			"", //initialEndTime
			"", //initialTokenID
			"", //initialTokenAmount
		],
	})
	.then((response) => {
		console.log(response.data)
	})

1. Select the ERC1155 Auction template.
2. Enter:

• definitiveTokenAddress: The token address of the ERC1155 that you want to sell.
• definitiveFeeReceiver: The address that will receive all the price paid to mint the NFTs.
• initialStartingPrice: The initial price that the NFT will be sold for.
• initialMinPriceDifference: The price increase that a user needs to at least put to bid on top of the current auction winner.
• initialStartTime: The time when the sale will begin and users can bid.
• initialEndTime: The time when the sale will end and users couldn't bid anymore.
• initialTokenURI: The URI that will be append in the end of the base token URI for the token that will be minted.
• initialTokenID: The token id of the token that will be minted for the auction.
• initialTokenAmount: The amount of tokens that will be minted for the auction.

Giving ownership to your sale contract​

For the sale contract to be able to mint new tokens, you are going to need to grant the newly created contract the MINTER_ROLE over the base contract deployed.

You will need:

• the address of the base ERC1155 contract
• the address of the Sale contract
• the data of the Minter Role (in bytes)

Retrieving the MINTER_ROLE​

First, let's get the minter role:

const axios = require("axios")

const axiosInstance = axios.create({
	baseURL: "https://api.starton.com",
	headers: {
		"x-api-key": "PUT HERE YOUR API KEY",
	},
})

axiosInstance
	.post("/v3/smart-contract/{network}/{YOUR_BASE_CONTRACT}/read", {
		functionName: "MINTER_ROLE",
		params: [],
	})
	.then((response) => {
		console.log(response.data)
	})

Granting the minter role to your Sale contract​

To grant the minter role to your contract, you can use the following request:

const axios = require("axios")

const axiosInstance = axios.create({
	baseURL: "https://api.starton.com",
	headers: { "x-api-key": "PUT HERE YOUR API KEY" },
})

axiosInstance
	.post("/v3/smart-contract/${network}/${YOUR SMART CONTRAT ADDRESS}/call", {
		functionName: "grantRole(bytes32,address)",
		params: [
			"0x9f2df0fed2c77648de5860a4cc508cd0818c85b8b8a1ab4ceeef8d981c8956a6", // MINTER_ROLE
			"", // account
		],
		signerWallet: "",
		speed: "average",
	})
	.then((response) => {
		console.log(response.data)
	})

• account: The whitelist sale contract address

Interact with your contract​

You can now bid, claim, or start a new auction. The mint of your NFT is made when the bider which has won the auction claims it.

In this tutorial, you will learn how to sell an NFT.

Deploy an ERC721​

You will start by deploying an ERC721 that will be the base of the NFT you want to sell.

Upload Contract-level metadata on IPFS​

To enter a name on the marketplace’s dashboard and perceive fees when someone sells one of our NFTs, we need to implement the contract-level metadata.

Here are the values we will use:

{
  "name": "My Super NFT for Sale",
  "description": "You’ve never seen NFTs this beautiful.",
  "image": "",// the URI of your image, for example ipfs://CID_OF_YOUR_IMG
  "external_link": "",
  "seller_fee_basis_points": 100,
  "fee_recipient": "PUT YOUR ADDRESS HERE"
}

We now have the content of our metadata, we need to upload it on IPFS.

To upload our files on IPFS we will now use the Starton IPFS pinning service.

As the contract-level metadata only needs to be uploaded once, we can directly do it from our dashboard.

1. Go to IPFS.
2. Click Upload.
3. Select JSON.
4. Enter JSON content.
5. Enter a name for the file.
6. Click Upload.

Once done, a column “CID” appears with a value for our file. We will use this data for the Contract Uri Suffix of our smart contract!

Upload a file on IPFS​

We also use IPFS to store the content that will be referenced in our deployed contract. We do not store the content directly on blockchain as it is too heavy and would induce a very high cost. The best solution is to store it somewhere else and only store a reference on-chain.

1. Go to IPFS.
2. Click Upload.
3. Select File(s).
4. Select content.
5. Enter a name for the file.
6. Click Upload.

Once our image uploaded, let's upload its metadata so that we can call it from our smart contract function.

Upload the metadata of your content on IPFS​

1. Go to IPFS.
2. Click Upload.
3. Select JSON.
4. Select content.
5. Enter a name for the file.
6. Click Upload.

Everything we need to sell your NFT is an auction is done.

Deploy the base contract​

We will deploy the contract only once, so we will do it directly from Starton’s dashboard.

We can access the list of templates in the Smart contract section.

1. Select the ERC721 NFT Smart Contract template.
2. Enter:
   • a name for your contract,
   • a wallet to sign the transaction,
   • a blockchain / network on which to deploy, here BNB testnet.
   • the parameters of our contract. For more information on parameters, check out the Deploying a Smart Contract.

For example, we can call our contract “Best NFTs on BNB” and deploy it on the BNB Testnet network.

The following constructor parameters are:

• definitiveName: This name stored on blockchain, we will use “Best NFTs on BNB”.
• initialTokenUri: This is the public URL that contains the metadata of the collection. Here it starts with ipfs://ipfs/,
• initialContractUri: The URI of the metadata that will be used to give more details about the description.
• initialOwnerOrMultisigContract: The address that will own the NFT Collection.

We can finally deploy our contract!

Deploy an ERC721 Sale​

We will deploy the contract only once, so we will do it directly from Starton’s dashboard.

We can access the list of templates in the Smart contract section.

1. Select the ERC721 Sale template.
2. Enter:

• definitiveTokenAddress: The token address of the ERC721 that you want to sell.
• definitivePrice: The price that the NFTs will be sold for.
• definitiveStartTime: The time when the sale will begin and users can mint tokens.
• definitiveEndTime: The time when the sale will end and users couldn't mint anymore tokens.
• definitiveMaxTokensPerAddress: The maximum amount of tokens that can be minted by a single address.
• definitiveMaxSupply: The maximum amount of tokens that can be minted during the sale.
• definitiveFeeReceiver: The address that will receive all the price paid to mint the NFTs.

Interact with your contract​

Once your NFT is sold, you can withdraw the amount received during the sale by interacting with the smart contract.

1. On the smart contract page, click Interact.
2. Select the withdraw function.
3. Click Run.

The amount is transferred from the address of the smart contract to the address of the fee receiver.

In this tutorial, you will learn how to sell an NFT in an Auction.

Deploy an ERC721​

You will start by deploying an ERC721 that will be the base of the NFT you want to sell in an auction.

Upload Contract-level metadata on IPFS​

To enter a name on the marketplace’s dashboard and perceive fees when someone sells one of our NFTs, we need to implement the contract-level metadata.

Here are the values we will use:

{
	"name": "My Super NFT on Auction",
	"description": "You’ve never seen NFTs this beautiful.",
	"image": "",
	"external_link": "",
	"seller_fee_basis_points": 100,
	"fee_recipient": "PUT YOUR ADDRESS HERE"
}

We now have the content of our metadata, we need to upload it on IPFS.

To upload our files on IPFS we will now use the Starton IPFS pinning service.

As the contract-level metadata only needs to be uploaded once, we can directly do it from our dashboard.

1. Go to IPFS.
2. Click Upload.
3. Select JSON.
4. Enter JSON content.
5. Enter a name for the file.
6. Click Upload.

Once done, a column “CID” appears with a value for our file. We will use this data for the Contract Uri Suffix of our smart contract!

Upload a file on IPFS​

We also use IPFS to store the content that will be referenced in our deployed contract. We do not store the content directly on blockchain as it is too heavy and would induce a very high cost. The best solution is to store it somewhere else and only store a reference on-chain.

1. Go to IPFS.
2. Click Upload.
3. Select File(s).
4. Select content.
5. Enter a name for the file.
6. Click Upload.

Once our image uploaded, let's upload its metadata so that we can call it from our smart contract function.

Upload the metadata of your content on IPFS​

1. Go to IPFS.
2. Click Upload.
3. Select JSON.
4. Select content.
5. Enter a name for the file.
6. Click Upload.

Everything we need to sell your NFT is an auction is done.

Deploy the base contract​

We will deploy the contract only once, so we will do it directly from Starton’s dashboard.

We can access the list of templates in the Smart contract section.

1. Select the ERC721 NFT Smart Contract template.
2. Enter:
   • a name for your contract,
   • a wallet to sign the transaction,
   • a blockchain / network on which to deploy, here BNB testnet.
   • the parameters of our contract. For more information on parameters, check out the Deploying a Smart Contract.

For example, we can call our contract “Best NFTs on BNB” and deploy it on the BNB Testnet network.

The following constructor parameters are:

• definitiveName: This name stored on blockchain, we will use “Best NFTs on BNB”.
• initialTokenUri: This is the public URL that contains the metadata of the collection. Here it starts with ipfs://ipfs/,
• initialContractUri: The URI of the metadata that will be used to give more details about the description.
• initialOwnerOrMultisigContract: The address that will own the NFT Collection.

We can finally deploy our contract!

Deploy an ERC721 Auction​

We will deploy the contract only once, so we will do it directly from Starton’s dashboard.

We can access the list of templates in the Smart contract section.

1. Select the ERC721 Auction template.
2. Enter:

• definitiveTokenAddress: The token address of the ERC721 that you want to sell.
• definitiveFeeReceiver: The address that will receive all the price paid to mint the NFTs.
• initialStartingPrice: The initial price that the NFT will be sold for.
• initialMinPriceDifference: The price increase that a user needs to at least put to bid on top of the current auction winner.
• initialStartTime: The time when the sale will begin and users can bid.
• initialEndTime: The time when the sale will end and users couldn't bid anymore.
• initialTokenURI: The URI that will be append in the end of the base token URI for the token that will be minted.

Interact with your contract​

You can now bid, claim, or start a new auction. The mint of your NFT is made when the bidder which has won the auction claims it.

If you want to mint more than one edition of your NFT, you'll need to create a smart contract using an ERC1155-flavored template.

When minting an NFT collection, you make multiple identical editions of the content. This is one type of collection. Multiple digital items will be issued. They will feature identical content with a different, unique token ID for each NFT. In this case, you will have a unique token ID for each digital item issued with its unique data.

In this tutorial, we will:

• Deploy the smart contract template for your collection
• Mint the first NFT of your collection

Deploying the smart contract​

const axios = require("axios")

const axiosInstance = axios.create({
baseURL: "https://api.starton.com",
headers: {"x-api-key": "PUT HERE YOUR API KEY"},
})

axiosInstance
.post("/v3/smart-contract/from-template", {
network: "",
signerWallet: "",
templateId: "ERC1155_META_TRANSACTION",
name: "My first NFT collection",
description: "This is my first collection of NFT ",
params: [
"myFirstCollection",
"", // Initial Token URI
"", // Initial Contract URI
"", // Initial Owner of Multi Sig Contract
],
speed: "average",
})
.then((response) => {
console.log(response.data)
})

Minting the first NFT of your collection​

    const axios = require("axios")

    const axiosInstance = axios.create({
        baseURL: "https://api.starton.com/",
        headers: {
            "x-api-key": "PUT HERE YOUR API KEY",
        },
    })

    axiosInstance.post(
        "/v3/smart-contract/polygon-amoy/0xc900546AA43C88aBcAF70c20448DF45917c8363A/call",
    {
        functionName: "mint(address,uint256,uint256,bytes)",
        params: [
        "", // the signer wallet
        "", // the receiving wallet
        "1",// the ID
        "1" // the amount
        ],
        signerWallet: "",
        speed: "average"
    }).then((response) => {
        console.log(response.data)
    })

In this tutorial, we will create your own token. The fixed supply version of this standard guarantees no token will ever be created after the initial emission. Fungible tokens are token from which the value of each token is equal to another.

In this tutorial, we will:

• Deploy the smart contract template for your token
• Process your first token transfer

Deploying the Smart contract from our template​

const axios = require("axios")

const axiosInstance = axios.create({
baseURL: "https://api.starton.com",
headers: {
"x-api-key": "PUT HERE YOUR API KEY",
},
})

axiosInstance
.post("/v3/smart-contract/from-template", {
network: "", // The blockchain network on which you want to deploy your smart contract
signerWallet: "", // The address of the signer wallet
templateId: "ERC20_META_TRANSACTION",
name: "", // The name of the contract on Starton
description: "", // The description of the contract on Starton
params: [
"", // The name of your smart contract which will be reflected on-chain.
"", //  The symbol of your smart contract which will be reflected on-chain
"", // The total amount of tokens that will ever be minted.
"", // The address that will own the ERC20 contract.
],
})
.then((response) => {
console.log(response.data)
})

Transferring your first token​

const axios = require("axios")

const axiosInstance = axios.create({
baseURL: "https://api.starton.com",
headers: {
"x-api-key": "PUT HERE YOUR API KEY",
},
})

axiosInstance
.post("/v3/smart-contract/YOUR_SMART_CONTRACT_NETWORK/YOUR_SMART_CONTRACT_ADDRESS/call", {
functionName: "transfer(address,uint256)",
params: [
    "", // Enter the wallet receiving tokens.
    "", //amount of token transferred
],
signerWallet: "", // Enter the wallet from which tokens will be transferred.
speed: "average",
})
.then((response) => {
console.log(response.data)
})

Congratulations! You've transferred your first token.

In this tutorial, we will create your own token. The mintable supply version of this standard guarantees no token will ever be created after the initial emission. Fungible tokens are token from which the value of each token is equal to another.

In this tutorial, we will:

• Deploy the smart contract template for your token
• Process your first token transfer

Deploying the Smart contract from our template​

const axios = require("axios")

const axiosInstance = axios.create({
    baseURL: "https://api.starton.com",
    headers: {
        "x-api-key": "PUT HERE YOUR API KEY",
    },
})

axiosInstance
    .post("/v3/smart-contract/from-template", {
        network: "", // The blockchain network on which you want to deploy your smart contract
        signerWallet: "", // The address of the signer wallet
        templateId: "ERC20_MINT_META_TRANSACTION",
        name: "", // The name of the contract on Starton
        description: "", // The description of the contract on Starton
        params: [
            "", // The name of your smart contract which will be reflected on-chain.
            "", //  The symbol of your smart contract which will be reflected on-chain
            "", // The total amount of tokens that will ever be minted.
            "", // The address that will own the ERC20 contract.
        ],
    })
    .then((response) => {
        console.log(response.data)
    })

Congrats on deploying your smart contract.

Process your first token transfer​

const axios = require("axios")

const axiosInstance = axios.create({
    baseURL: "https://api.starton.com",
    headers: {
        "x-api-key": "PUT HERE YOUR API KEY",
    },
})

axiosInstance
    .post("/v3/smart-contract/YOUR_SMART_CONTRACT_NETWORK/YOUR_SMART_CONTRACT_ADDRESS/call", {
        functionName: "transfer(address,uint256)",
        params: [
            "", // Enter the wallet receiving tokens.
            "", //amount of token transferred
        ],
        signerWallet: "", // Enter the wallet from which tokens will be transferred.
        speed: "average",
    })
    .then((response) => {
        console.log(response.data)
    })

Congratulations! You've transferred your first token.

In this tutorial, we will see how we can deploy a smart contract and interact with it to mint NFTs on BNB Chain testnet in 6 steps. We will use random images uploaded on IPFS (a distributed file storage system) and assigned to an BNB Chain address.

You will:

• Upload the contract-level metadata
• Use a template from Starton for our smart contract (ERC721).
• Deploy it with Starton from the dashboard. To deploy contracts from code, see Deploying a smart contract from code.
• Upload the content of our NFTs and their metadata on IPFS.
• Interact with our smart contract using Starton API in order to mint the NFTs and give it to a specific address.

If you feel stuck or have questions, feel free to get in touch in our Discord. We’ll be glad to help you!

Upload the contract level metadata on IPFS​

To enter a name on the marketplace’s dashboard and perceive fees when someone sells one of our NFTs, we need to implement the contract-level metadata.

Here are the values we will use:

{
	name: "My Super NFT on BNB",
	description: "You’ve never seen NFTs this beautiful.",
	image: "URI of your image", // This will be used as the image of your collection
	external_link: "",
	seller_fee_basis_points: 100,
	fee_recipient: "PUT YOUR ADDRESS HERE",
}

We now have the content of our metadata, we need to upload it on IPFS.

To upload our files on IPFS we will now use the Starton IPFS pinning service.

As the contract-level metadata only needs to be uploaded once, we can directly do it from our dashboard.

1. Go to IPFS.
2. Click Upload.
3. Select JSON.
4. Enter JSON content.
5. Enter a name for the file.
6. Click Upload.

Once done, a column “CID” appears with a value for our file. We will use this data for the Contract Uri Suffix of our smart contract!

Choose a smart contract template​

Several standards of smart contracts have been developed for NFTs.

The most used ones are ERC721 and the ERC1155. If you want to see in more details the differences between the two standards, read The Difference Between ERC721 vs ERC1155.

Today, we will use the ERC721 smart contract template.

Deploy the contract with Starton​

We will deploy the contract only once, so we will do it directly from Starton’s dashboard.

We can access the list of templates in the Smart contract section.

1. Select the ERC721 template.
2. Enter:
   • a name for your contract,
   • a wallet to sign the transaction,
   • a blockchain / network on which to deploy, here BNB testnet.
   • the parameters of our contract. For more information on parameters, check out the Deploying a Smart Contract.

For example, we can call our contract “Best NFTs on BNB” and deploy it on the BNB Testnet network.

The following constructor parameters are:

• Name: This name stored on blockchain, we will use “Best NFTs on BNB”.
• Symbol: The symbol that will be displayed on blockchain explorers for example. We’ll use “BNFTBNB”.
• Base Uri: This corresponds to the root of the url that will be used to find the content. We’ll use “ipfs://ipfs/“ as we store the content on IPFS.
• Owner Or Multi Sig Contract: This is the address of the owner of the smart contract. We will put our Starton account address that can be found in the “Wallets” section and should be the one chosen at the top as well.
• Contract Uri Suffix: This corresponds to the CID of your contract-level metadata on IPFS. This is needed for example if you want to perceive fees when your NFTs are sold on OpenSea.

We can finally deploy our contract!

With our smart contract deployed, you are redirected on the page where we will interact with our contract.

Minting an NFT​

The process of minting a new NFT and sending it to an address goes in three steps:

• We upload the content of our NFT on IPFS (as it is too heavy to be stored on-chain) and get the CID of the content.
• We upload a metadata object as a JSON file on IPFS as we do not reference the content directly in the contract. Instead, we put the CID of the content in a metadata object that we upload on IPFS.
• We call the function “mint” of our smart contract, giving the CID of our metadata object and the address that will receive the NFT.

You can choose to mint NFT from code or from Starton's interface.

const axios = require("axios")
const FormData = require("form-data")
const starton = axios.create({
	baseURL: "https://api.starton.com/v3",
	headers: {
		"x-api-key": "YOUR_STARTON_API_KEY",
	},
})

// The image variable should be a buffer
async function uploadImageOnIpfs(image, name) {
	let data = new FormData()
	data.append("file", image, name)
	data.append("isSync", "true")

	const ipfsImg = await starton.post("/ipfs/file", data, {
		maxBodyLength: "Infinity",
		headers: { "Content-Type": `multipart/form-data; boundary=${data._boundary}` },
	})
	return ipfsImg.data
}

async function uploadMetadataOnIpfs(imgCid) {
	const metadataJson = {
		name: `A Wonderful NFT`,
		description: `Probably the most awesome NFT ever created !`,
		image: `ipfs://ipfs/${imgCid}`,
	}
	const ipfsMetadata = await starton.post("/ipfs/json", {
		name: "My NFT metadata Json",
		content: metadataJson,
		isSync: true,
	})
	return ipfsMetadata.data
}

const SMART_CONTRACT_NETWORK = "binance-testnet"
const SMART_CONTRACT_ADDRESS = ""
const WALLET_IMPORTED_ON_STARTON = ""
async function mintNft(receiverAddress, metadataCid) {
	const nft = await starton.post(`/smart-contract/${SMART_CONTRACT_NETWORK}/${SMART_CONTRACT_ADDRESS}/call`, {
		functionName: "mint",
		signerWallet: WALLET_IMPORTED_ON_STARTON,
		speed: "low",
		params: [receiverAddress, metadataCid],
	})
	return nft.data
}

const RECEIVER_ADDRESS = ""
const imgBuffer = ""
const ipfsImg = await uploadImageOnIpfs(imgBuffer, "filename.png")
const ipfsMetadata = await uploadMetadataOnIpfs(ipfsImgData.cid)
const nft = await mintNft(RECEIVER_ADDRESS, ipfsMetadata.cid)

Results​

Annnnnd it’s done! Congratulations!

Once all of this is executed, the content should be on IPFS, and associated to the given address in our ERC721 contract.

You can check our NFT on the market element marketplace. Use your contract address to modify the following link: https://testnets.element.market/assets/bsctest/YOUR_CONTRACT_ADDRESS/0

Conclusion​

We have seen in this tutorial how to upload NFTs on a decentralised file system, how to deploy an ERC721 smart contract using Starton, how to make it compatible with marketplaces standards and how we can dynamically mint the NFTs from code to send them to people!

We hope you liked this tutorial and that you will follow along in this epic journey of making Web3 the new standard for Internet! We are very eager to see what you can build with NFTs. Do not hesitate to share what you’ve done!

In this tutorial, we will see how we can deploy a smart contract and interact with it to mint NFTs dynamically from code. We will use random images uploaded on IPFS (a distributed file storage system) and assigned to an Ethereum address.

You will :

• Use a template from Starton for our smart contract (ERC721).
• Deploy it with Starton from the dashboard. To deploy contracts from code, see Deploying a smart contract from code.
• Upload the content of our NFTs and their metadata on IPFS.
• Interact with our smart contract using Starton API in order to mint the NFTs and give it to a specific address.

If you feel stuck or have questions, feel free to get in touch in our Discord. We’ll be glad to help you!

Choose a smart contract template​

Several standards of smart contracts have been developed for NFTs.

The most used ones are ERC721 and the ERC1155. The main big difference between the two is that in an ERC721, every NFT is unique which means you will have to reference the content for each of them. Meanwhile the ERC1155 enables you to create “collections” where there are several copies of the same NFT.

The ERC721, which is easier to use, still can be used to upload several copies of the same content, but is less optimised for this use case than the ERC1155. If you want to see in more details the differences between the two standards, read The Difference Between ERC721 vs ERC1155.

Today, we will use the ERC721 smart contract template.

We’ll also use IPFS to store the content that will be referenced in our deployed contract. We do not store the content directly on blockchain as it is too heavy and would induce a very high cost. The best solution is to store it somewhere else and only store a reference on-chain.

Deploy the contract with Starton​

We will deploy the contract only once, so we will do it directly from Starton’s dashboard.

We can access the list of templates in the Smart contract section.

1. Select the ERC721 template.
2. Enter:

• a name for your contract,
• a wallet to sign the transaction,
• a blockchain / network on which to deploy,
• the parameters of our contract. For more information on parameters, check out the Deploying a Smart Contract.

For example, we can call our contract “My Super NFTs” and deploy it on the Polygon amoy network.

The following constructor parameters are:

• Name: This name stored on blockchain, we will keep “My Super NFTs”.
• Symbol: The symbol that will be displayed on blockchain explorers for example. We’ll use “MSNFT”.
• Base Uri: This corresponds to the root of the url that will be used to find the content. We’ll use “ipfs://ipfs/“ as we store the content on IPFS.
• Owner Or Multi Sig Contract: This is the address of the owner of the smart contract. We will put our Starton account address that can be found in the “Wallets” section and should be the one chosen at the top as well.
• Contract Uri Suffix: This corresponds to the IPFS cid of your contract level metadata. This is needed for example if you want to perceive fees when your NFTs are sold on OpenSea.

To be able to fill this field we need to upload a JSON file that respects OpenSea’s specification for the contract level metadata on IPFS.

Lost on the Contract Uri Suffix part? Let’s see this in more details so we can finish the deployment of our contract.

Upload the contract level metadata on IPFS​

We need to implement OpenSea’s specification the contract level metadata.

This enables us to add a name on the OpenSea’s dashboard and perceive fees when someone sells one of our NFTs.

Here are the values we will use:

{
	"name": "My Super NFTs",
	"description": "You’ve never seen NFTs this beautiful.",
	"image": "",
	"external_link": "",
	"seller_fee_basis_points": 100,
	"fee_recipient": "PUT YOUR ADDRESS HERE"
}

We now have the content of our metadata, we need to upload it on IPFS.

On IPFS, the content is not referred using an address like we are used to with urls, but by the content’s value.

Let’s see the difference: When we query some content based on location we implicitly ask: "Give me the content that is located at https://… no matter what it is that you find".

Whereas when we query some content based on its value on IPFS we implicitly ask: "Find the content on the network with the hash XXXXXXX and give it to me, no matter who where it is".

With the location based approach we are specific on the “How” and not on the “What” while with the content based approach it is the opposite. Using the content based approach, we are sure we get the content we want, without it being altered, replaced or infected as otherwise the hash would have changed as well.

And it is a game changer as we do no longer need to rely on trust!

The hash of the content is called a Content IDentifier (CID) on IPFS.

And when we will upload our contract-level metadata on IPFS we will get a CID back, which is the value we need to put as the Contract Suffix Uri in our smart contract.

To upload our files on IPFS we will now use the Starton IPFS pinning service.

As the contract-level metadata only needs to be uploaded once, we can directly do it from our dashboard Once done, a column “CID” appears with a value for our file that starts with “Qm”. This is the value we need for the Contract Uri Suffix of our smart contract! We can finally deploy our contract!

With our smart contract deployed, we are redirected on the page to interact with our contract.

We won’t interact with it from the dashboard but you can click on the smart contract address at the top to see our contract in the blockchain explorer. You will see next how to upload dynamically our images on IPFS from code with the API.

Minting an NFT​

The process of minting a new NFT and sending it to an address goes in three steps:

• We upload the content on IPFS (as it is too heavy to be stored on-chain) and get the CID of the content.
• We upload a metadata object as a JSON file on IPFS as we do not reference the content directly in the contract. Instead, we put the CID of the content in a metadata object that we upload on IPFS.
• We call the function “mint” of our smart contract, giving the CID of our metadata object and the address that will receive the NFT.

Prepare our connection to the Starton API​

const axios = require("axios")
const FormData = require("form-data")

const starton = axios.create({
	baseURL: "https://api.starton.com/v3",
	headers: {
		"x-api-key": "YOUR_STARTON_API_KEY",
	},
})

Do not forget to replace the x-api-key value by your own! It is needed to authenticate yourself with our API.

You can find your API keys and generate new ones in the API section.

Upload an image on IPFS with the Starton API​

We can create a simple function like this one:

// The image variable should be a buffer
async function uploadImageOnIpfs(image, name) {
	let data = new FormData()
	data.append("file", image, name)
	data.append("isSync", "true")

	const ipfsImg = await starton.post("/ipfs/file", data, {
		maxBodyLength: "Infinity",
		headers: { "Content-Type": `multipart/form-data; boundary=${data._boundary}` },
	})
	return ipfsImg.data
}

By calling this function, providing our image as a buffer as a parameter, we should get back an object containing our image’s CID which we will use next in the metadata object.

Upload the metadata json of our NFT​

Consult the metadata standard format on OpenSea documentation. We can define a new function using our image’s CID to upload the metadata on IPFS:

async function uploadMetadataOnIpfs(imgCid) {
	const metadataJson = {
		name: `A Wonderful NFT`,
		description: `Probably the most awesome NFT ever created !`,
		image: `ipfs://ipfs/${imgCid}`,
	}
	const ipfsMetadata = await starton.post("/ipfs/json", {
		name: "My NFT metadata Json",
		content: metadataJson,
		isSync: true,
	})
	return ipfsMetadata.data
}

Feel free to change the name and description that suit your needs.

Mint the NFT on the smart contract using the metadata’s CID​

Finally, we can call our smart contract “mint” function with the receiver’s address and the CID of the metadata we just uploaded:

const SMART_CONTRACT_NETWORK = "polygon-amoy"
const SMART_CONTRACT_ADDRESS = ""
const WALLET_IMPORTED_ON_STARTON = ""

async function mintNft(receiverAddress, metadataCid) {
	const nft = await starton.post(`/smart-contract/${SMART_CONTRACT_NETWORK}/${SMART_CONTRACT_ADDRESS}/call`, {
		functionName: "mint",
		signerWallet: WALLET_IMPORTED_ON_STARTON,
		speed: "low",
		params: [receiverAddress, metadataCid],
	})
	return nft.data
}

You will need to modify the SMART_CONTRACT_ADDRESS and WALLET_IMPORTED_ON_STARTON variables so they match your contract and your wallet.

Assemble everything to complete the flow​

We can now make the complete flow in only a few lines of code.

Notice that you need to define the receiver of the NFT and set the imgBuffer variable.

const RECEIVER_ADDRESS = ""
const imgBuffer = ""

async function uploadMint() {
	const ipfsImg = await uploadImageOnIpfs(imgBuffer, "filename.png")
	const ipfsMetadata = await uploadMetadataOnIpfs(ipfsImgData.cid)
	const nft = await mintNft(RECEIVER_ADDRESS, ipfsMetadata.cid)
}

Annnnnd it’s done! Congratulations!

Once all of this is executed, the content should be on IPFS, and associated to the given address in our ERC721 contract. You should be able to see the NFTs on OpenSea or via this link https://testnets.opensea.io/collection/my-super-nfts.

Conclusion​

We have seen in this tutorial how to upload NFTs on a decentralised file system, how to deploy an ERC721 smart contract using Starton, how to make it compatible with OpenSea’s standards and how we can dynamicaly mint the NFTs from code to send them to people!

We hope you liked this tutorial and that you will follow along in this epic journey of making Web3 the new standard for Internet! We are very eager to see what you can build with NFTs. Do not hesitate to share what you’ve done!

You can also deploy your smart contract from our web application.

Setting up your environment​

Installing Nestjs CLI​

To install Nestjs CLI, run:

yarn global add @nestjs/cli

Installing Dependencies​

• axios: A promise based HTTP client for Node.js
• nodemailer: A package that allow easy email sending

yarn add axios nodemailer

Dev dependencies​

• @types/.*: provide the necessary typings for you to use libraries or modules in your TypeScript code with type checking and IntelliSense support

Update the schema.prisma file​

In the last tutorial we have generated a schema.prisma file inside the prisma directory. Update it to add different collections:

// This is your Prisma schema file,
// learn more about it in the docs: https://pris.ly/d/prisma-schema

generator client {
  provider = "prisma-client-js"
}

datasource db {
  provider = "mongodb"
  url      = env("DATABASE_URL")
}

model User {
  id                String     @id @default(auto()) @map("_id") @db.ObjectId
  email             String     @unique
  password          String
  publicAddress     String     @unique
  items             Item[]     @relation()
  sentTransfers     Transfer[] @relation("sentTransfers")
  receivedTransfers Transfer[] @relation("receivedTransfers")
  createdAt         DateTime   @default(now())
}

model Collection {
  id              String @id @default(auto()) @map("_id") @db.ObjectId
  contractAddress String @unique
  name            String @unique
  description     String
  items           Item[]
  nextTokenId     Int
}

model Item {
  id           String     @id @default(auto()) @map("_id") @db.ObjectId
  collection   Collection @relation(fields: [collectionId], references: [id])
  collectionId String     @db.ObjectId
  tokenId      String     @unique
  ownerAddress String     @unique
  owner        User?      @relation(fields: [ownerId], references: [id])
  ownerId      String?    @db.ObjectId
  transfers    Transfer[]
  createdAt    DateTime   @default(now())
  updatedAt    DateTime   @updatedAt
}

model Transfer {
  id         String   @id @default(auto()) @map("_id") @db.ObjectId
  item       Item     @relation(fields: [itemId], references: [id])
  itemId     String   @db.ObjectId
  from       String
  fromUser   User     @relation("sentTransfers", fields: [fromUserId], references: [id])
  fromUserId String   @db.ObjectId
  to         String
  toUser     User     @relation("receivedTransfers", fields: [toUserId], references: [id])
  toUserId   String   @db.ObjectId
  txHash     String   @unique
  createdAt  DateTime @default(now())
}

model RevokedToken {
  id  String @id @default(auto()) @map("_id") @db.ObjectId
  jti String @unique
}

User​

The *User* collection is defined to store user information. It has the following fields:

• id: The unique identifier for the user, generated automatically.
• email: The user's email address, which must be unique.
• password: The user's password.
• publicAddress: The user's public address on the blockchain.
• items: An array of Item objects that the user owns.
• sentTransfers: An array of Transfer objects representing transfers that the user has sent.
• receivedTransfers: An array of Transfer objects representing transfers that the user has received.
• createdAt: The date and time the user was created, generated automatically.

Collection​

The *Collection* collection is defined to store information about NFT collections. It has the following fields:

• id: The unique identifier for the collection, generated automatically.
• contractAddress: The public address of the contract that manages the collection on the blockchain.
• name: The name of the collection, which must be unique.
• description: A description of the collection.
• items: An array of Item objects representing the NFTs in the collection.
• nextTokenId: The ID of the next NFT to be created in the collection.

Item​

The *Item* collection is defined to store information about NFTs. It has the following fields:

• id: The unique identifier for the NFT, generated automatically.
• collection: The collection that the NFT belongs to.
• collectionId: The ID of the Collection that the NFT belongs to.
• tokenId: The ID of the NFT on the blockchain.
• ownerAddress: The public address of the current owner of the NFT on the blockchain.
• owner: An array of User objects representing the users that own the NFT.
• ownerId: An array of ids of the Users that own the NFT.
• transfers: An array of Transfer objects representing the transfers that the NFT has been involved in.
• createdAt: The date and time the NFT was created, generated automatically.
• updatedAt: The date and time the NFT was last updated.

Transfer​

The *Transfer* collection is defined to store information about transfers of NFTs. It has the following fields:

• id: The unique identifier for the transfer, generated automatically.
• item: The Item object representing the NFT that was transferred.
• itemId: The id of the Item that was transferred.
• from: The public address of the user who sent the NFT.
• fromUser: The User object representing the user who sent the NFT.
• fromUserId: The id of the User who sent the NFT.
• to: The public address of the user who received the NFT.
• toUser: The User object representing the user who received the NFT.
• toUserId: The id of the User who received the NFT.
• txHash: The transaction hash of the transfer on the blockchain.
• createdAt: The date and time the transfer was created, generated automatically.

RevokedToken​

The *RevokedToken* collection is defined to store information about revoked JWT tokens. It has the following fields:

• id: The unique identifier for the revoked token, generated automatically.
• jti: The "JWT ID" of the revoked token, which must be unique.

Updating the Sign-up route​

In the last tutorial our users registered themselves to our app with an email and a password. Since we want to monitor when they receive an NFT, we need to ask them for their public key at registration.

Create a new SignUp.dto.ts in the src/user directory:

import { IsEmail, IsEthereumAddress, IsStrongPassword } from 'class-validator';

export default class SignUpDto {
  @IsEmail()
  email: string;

  @IsStrongPassword()
  password: string;

  @IsEthereumAddress()
  publicAddress: string;
}

This DTO includes a public address field, which allows users to provide their public EVM address. We will use this address to identify when a user receives a new NFT.

Update the DTO type in the controller:

@Post('auth/sign-up')
  async signUp(
    @Body() newUser: SignUpDto,
    @Res() res: Response,
  ): Promise<void> {
    try {
      const { user, token }: { user: Partial<User>; token: string } =
        await this.userService.signUp(newUser);

      delete user.password;

      res.cookie('jwt', token, { httpOnly: true });

      res.status(201).send({ user: user });
    } catch (err: unknown) {
      throw new InternalServerErrorException(err);
    }
  }

Creating a Starton module​

To simplify development, we will create a StartonModule. This module will wrap API calls into utility methods.

nest g module starton

import { Injectable } from '@nestjs/common';
import axios from 'axios';
import {
  cryptoquartzCollectionAddress,
  network,
  signerWallet,
} from 'src/utils/constants';

@Injectable()
export class StartonService {
  private readonly instance = axios.create({
    baseURL:
      'https://api.starton.com/v3/smart-contract/' +
      network +
      '/' +
      cryptoquartzCollectionAddress +
      '/',
    headers: {
      'x-api-key': process.env.STARTON_API_KEY,
    },
  });

  async initTransfer(from: string, to: string, tokenId: string) {
    await this.instance.post('call', {
      signerWallet,
      functionName: 'safeTransferFrom',
      params: [from, to, tokenId, 1, '0x00'],
    });
  }

  async initMint(to: string, tokenId: string) {
    await this.instance.post('call', {
      signerWallet,
      functionName: 'mint',
      params: [to, tokenId, 1, '0x00'],
    });
  }

  async initBurn(address: string, tokenId: string) {
    await this.instance.post('call', {
      signerWallet,
      functionName: 'burn',
      params: [address, tokenId, '0x00'],
    });
  }
}

First, we define an axios instance as a member of the StartonService class. This is convenient because we can configure the instance with a baseURL and headers, which prevents us from repeating ourselves in subsequent code.

Next, we define three wrappers for common API calls: transfers, mints, and burns:

initTransfer​

Initiate an NFT transfer by making a safeTransferFrom function call to the smart-contract

initMint​

Initiate an NFT mint by making a mint function call to the smart-contract

initBurn​

Initiate an NFT burn by making a burn function call to the smart-contract

Now that your have your StartonService, export it in a module:

nest g module starton

import { Module } from '@nestjs/common';
import { StartonService } from './starton.service';

@Module({
  imports: [],
  controllers: [],
  providers: [StartonService],
  exports: [StartonService],
})
export class StartonModule {}

Creating an EmailModule​

We will encapsulate the functions responsible for sending emails in a service that will be exported from the EmailModule.

nest g service email
nest g module email

import { Injectable } from '@nestjs/common';
import { createTransport } from 'nodemailer';

/*
|--------------------------------------------------------------------------
| MAILING SERVICE
|--------------------------------------------------------------------------
*/
@Injectable()
export class EmailService {
  // Utility object to send emails
  //--------------------------------------------------------------------------
  private readonly _transporter = createTransport(
    {
      host: process.env.EMAIL_HOST, // smtp.elasticemail.com
      port: process.env.EMAIL_PORT, // default to 2525 with elasticemail
      auth: {
        user: process.env.EMAIL_USER, // The email address that sends the message
        pass: process.env.EMAIL_PASS, // The password of the email address
      },
    },
    {
      from: `Cryptomancy <${process.env.EMAIL_USER}>`, // "from" field of the message
    },
  );

  // Verify SMTP configuration at construction
  //--------------------------------------------------------------------------
  constructor() {
    this._transporter.verify().then(() => {
      console.log('Ready to send emails');
    });
  }

  // Send an email
  //--------------------------------------------------------------------------
  async sendEmail(to: string, subject: string, text: string) {
    await this._transporter.sendMail({ to, subject, text });
  }
}

To send emails, we use nodemailer, a package that abstracts SMTP to make it easier to send emails. The first step is to define a transporter, which is responsible for transmitting emails. This can be done by calling the createTransport function and passing a configuration object as an argument to it. For this example we use smtp.elasticemail.com as host. You can create an account and generate SMTP credentials for free on their website.

In the constructor, we call the verify method to check if we are authenticated correctly and that the server is ready to accept messages.

We also define a single method, sendEmail, which takes a recipient email address, subject, and message body as parameters and send the email.

Create an Item resource​

ItemService​

Now that we have all the necessary utility services, we need services for adding and updating items in the database.

Run the following command to generate the ItemService under src/item/item.service.ts:

nest g service item

Update it to look like this:

/*
| Developed by Starton
| Filename : item.service.ts
| Author : Alexandre Schaffner ([email protected])
*/

import { Injectable } from '@nestjs/common';
import { Prisma } from '@prisma/client';
import { PrismaService } from 'src/prisma/prisma.service';
import { nullAddress } from 'src/utils/constants';

/*
|--------------------------------------------------------------------------
| ITEM SERVICE
|--------------------------------------------------------------------------
*/

@Injectable()
export class ItemService {
  constructor(private readonly prisma: PrismaService) {}

  async create(data: Prisma.ItemCreateInput) {
    await this.prisma.item.create({ data });
  }

  async updateByTokenId(tokenId: string, data: Prisma.ItemUpdateInput) {
    await this.prisma.item.update({ where: { tokenId }, data });
  }

  async deleteByTokenId(tokenId: string) {
    await this.prisma.item.delete({ where: { tokenId } });
  }

  async safeTransferFrom(
    collection: string,
    tokenId: string,
    from: string,
    to: string,
  ) {
    // Add item to database in case of a mint (from === nullAddress)
    //--------------------------------------------------------------------------
    if (from === nullAddress) {
      await this.prisma.item.create({
        data: {
          collection: {
            connect: {
              contractAddress: collection,
            },
          },
          tokenId,
          ownerAddress: to,
        },
      });

      // Increment nextTokenId in the database
      //--------------------------------------------------------------------------
      await this.prisma.collection.update({
        where: {
          contractAddress: collection,
        },
        data: {
          nextTokenId: {
            increment: 1,
          },
        },
      });

      // Update item's owner in case of a transfer
      //--------------------------------------------------------------------------
    } else {
      await this.prisma.item.updateMany({
        where: {
          AND: [
            { tokenId },
            { collection: { contractAddress: collection } },
            { ownerAddress: from },
          ],
        },
        data: {
          ownerAddress: to,
        },
      });
    }
  }
}