Low code NFT marketplace#

To make it quicker and easier to develop and run an NFT marketplace, the Low-Code NFT Minting tool and marketplace have been created. It includes built-in smart contracts, a template user interface, and various functionalities, including the following:

Connect with Concordium Wallet for Web
Buy/Sell NFTs with a fixed price
Mint NFTs with providing metadata
Mint NFTs without metadata / with Pinata API key + IPFS Integration
Mint NFT collections with/without metadata (Pinata API key)
Mint Semi-Fungible tokens by specifying the token amount from a basic user interface
Set royalties of NFTs
Set a commission (for the marketplace owner)

Create a marketplace

Before starting, make sure that you have the following installed:

Concordium Wallet for Web - setup instructions
node.js verion 14.17.0 or above. If you already have node.js run node -v to check the version. You can use nvm to manage multiple Node versions installed on a single machine.
Yarn - a package manager for JavaScript; replaces the npm client.
A code editor of your choice, such as Visual Studio Code.

Once you have the above installed, do the following:

Clone the repository with the following command:

git clone https://github.com/Concordium/concordium-dapp-examples/tree/main/low-code-nft-marketplace

Install the repository’s dependencies with the following command:
cd Low-Code-NFT-Framework/market-ui && yarn install
Run the application with the following command. It starts the marketplace example dApp automatically in localhost:3000 starting with the example page.
yarn start

Initialize the marketplace

In this step, you will create an instance of the deployed marketplace with the connected wallet address. You can specify the commission and run your own marketplace.

Note

You can also build and deploy a new marketplace contract by following these steps.

Connect to the application with your Concordium Wallet for Web.

Note

Before continue, make sure that you have some CCDs in your wallet to be able to initialize the Marketplace. Since this is testnet you can ask for testnet CCDs when you set up your account.
Click Create My Marketplace.
A form appears that allows you to create a marketplace instance with two options. First, you can either create a marketplace instance from the one which is already deployed by you. Second, you can create your marketplace contract instance from the smart contract deployed by Concordium. Specify the commission and click Deploy New. This calls the initialize function of the marketplace contract and that instance will be your account’s.
The Concordium Wallet for Web presents a pop up and asks for your approval. To approve the traansaction click Sign & submit.

When the transaction is finalized, you have your own, empty marketplace. You see the contract instance address in the address bar of the browser or you can check it from your Concordium Wallet for Web as described in the following.

empty marketplace with contract address highlighted in address bar

To check the contract instance and find the address in the Concordium Wallet for Web:

Click on an account so that you see the account details and transaction log.

As you can see there is a contract initialization transaction in the log, and when you click it, the Events section tells you that you have initialized smart contract Market-NFT at address 2258,0. In your case this number will be different and you will need it in the next section.

Configure the application

The following describes the necessary steps to run your own marketplace that is generated from the deployed marketplace contract.

Now you have to configure your code base accordingly. Go to your project’s folder/market-ui and open the Constants.ts file in a code editor. Update the MARKETPLACE_CONTRACT_ADDRESS with your contract instance address value generated in the previous section. In this file in general you will find all constant files, such as address, schema, and module references. You can find more details about these constant variables in this section.

constants.ts file open in code editor with address highlighted

When you specify the contract instance address value, the template will be interacting with your instance, meaning it will have a clean marketplace like below to remove new instance creation from your marketplace and change the CREATE_NEW__MARKETPLACE flag to false.

constants.ts file open in code editor with create new marketplace flag highlighted

You now have your own marketplace with the commission rate you specified.

Mint NFTs providing metadata
While you are minting an NFT, in most of the cases you will be storing a URL value that redirects people to a JSON-formatted file. That file should contain a link to the digital asset itself, its name, and description and could potentially include lots of additional attributes to suffice Concordium Interoperability Standard 2(CIS-2). You can host these files and assets anywhere but using a decentralized solution will be our approach.

Note

A CIS-2 token metadata example and details can be found at this link.

To prepare the metadata, you should have a link to your digital asset preferably from IPFS. You can check this tutorial to learn about how you can store data on IPFS with running a node.

When you have an IPFS link to the asset create a JSON file on a text editor, fill it like below and save it.
{
    "name": "YOUR NFT NAME",
    "description": "YOUR NFT DESCRIPTION",
    "display": {
        "url": "https://ipfs.io/ipfs....paste your url here"
    },
    "attributes": [
        {
            "name": "some attribute",
            "type": "string",
            "value": "999"
        }
        {
            "name": "another attribute",
            "type": "string",
            "value": "1"
        }
        {
            "name": "third attribute",
            "type": "string",
            "value": "7.2"
        }
    ]
}
Now, you need to store this page on the IPFS as well. It will generate a URL and you are going to store it on-chain.

At the Connect Pinana screen click SKIP. Pinata is described in the next section.

In the Set metadata Url text box, provide the URL that redirects you to the JSON formatted metadata. If you also want to store the hash value of the file check Include Hash? but remember this storing extra data on-chain comes with an extra cost.

Set the tokenID and the token quantity which has to be 1 to create a unique Non-Fungible Token. Click DONE.

You see a final screen to review before minting your token. When you click MINT your Concordium Wallet for Web prompts you for your signature. Click Sign & submit to start the transaction. Once it’s finalized you will see another pop-up that says All Minted.
Mint NFTs with Pinata

Pinata is a commercial pinning solution that pins your data stored on Interplanetary File System (IPFS). You can find more information about it in this link. Concordium NFT Marketplace Template has built-in integration with Pinata and IPFS that allows artists to mint their collection with a few steps.

When you upload data on IPFS the most important thing that you need to be careful about it is making sure that data is stored/hosted on at least one device and this can be achievable by running a node all the time somewhere. But that may not be an option for everybody who wants to mint NFTs for various reasons like cost, time, and some technical skills. At that moment, Pinata comes in to solve that issue. They run a node on behalf of you and give you an API key. You can access your IPFS node via that API key through their gateway.

Since IPFS and Pinata are widely used in the space, Concordium NFT Marketplace Template has built-in integration with them. To use this functionality create an API key on the platform and copy the JWT (JSON Web Token) to use in the marketplace while minting.

Now paste the API key in the textbox as shown below.

Click CONNECT. When the connection is established, you will be able to upload images either by selecting them from a folder or just dragging and dropping them. You are not limited to uploading 1-2 images, and thanks to the template, the metadata generator is easier than creating one for every item.

Set your token IDs and click Upload for each.

The template’s backend will use your API key to upload the data, and retrieves the IPFS link of it and then you will just complete the details about your tokens as described below.

Fill out them and the marketplace will create metadata for you when you click CREATE for each of the tokens. Specify the quantity as 1 and click DONE.

Click MINT. Your Concordium Wallet for Web prompts you to click Sign and Submit to approve the transaction and mint your NFTs.