Minting dApp Template

Made by Giants & NF-Tim by Creative Tim

Live Demo

This is a dApp template based on erd-next-starter by Giants & soft-ui-dashboard-tailwind by Creative Tim. The Minting Smart contract used in the live demo is elven-nft-minter-sc by Julian.

It offers authentication with Maiar App, Web Wallet, Extension, and Ledger. It also includes methods to easily sign and make transactions, query smart contracts, and a few utility methods.

This template can be used as a starting point for any minting dApp. It comes with the most common sections like:

• Header
• About us
• NFTs Carousel
• Roadmap
• Team
• FAQ

Getting Started

Clone repository

git clone https://github.com/Elrond-Giants/giants-nftim-minting-dapp.git

Install the dependencies

npm install

Set the .env file

We have included the .env.development and .env.production files, which contain just elrond-specific environment variables.

To interact with a minting smart contract, create your .env file and set the NEXT_PUBLIC_CONTRACT_ADDRESS variable.

Launch and explore

npm run dev

Open your browser, go to http://localhost:3000 and start exploring.

How To's

Sign and send transaction

To make a transaction, simply use the hook useTransction and everything will be taken care for, from signing the transaction to status notifications.

Smart contract call:

import { useTransaction } from "../hooks/useTransaction";
import { TransactionPayload } from "@elrondnetwork/erdjs/out";

const { makeTransaction } = useTransaction();
const txData = TransactionPayload.contractCall()
  .setFunction(new ContractFunction("SomeFunction"))
  .addArg(new BigUIntValue(10))
  .build();

await makeTransaction({
  receiver: "erd...",
  data: txData,
  value: 0.01,
});

Make query

To read data from the Smart Contract, like total number of NFTs, the price per NFT, etc, you can use a query.

export const getTotalTokensLeft = async (): Promise<number> => {
  const { data: data } = await querySc(contractAddress, "getTotalTokensLeft", { outputType: "int" });

  return parseInt(data, 10);
};

Deploy

Checkout the Next.js deployment documentation for details.

Reporting Issues

We use GitHub Issues as the official bug tracker for this template. Here are some advices for our users that want to report an issue:

1. Make sure that you are using the latest version of the template.
2. Providing us reproducible steps for the issue will shorten the time it takes for it to be fixed.
3. Some issues may be browser specific, so specifying in what browser you encountered the issue might help.

Resources

• Live Preview
• License Agreement
• Open Issues
• soft-ui-dashboard-tailwind

License

GPL-3.0 license

Useful Links

• Giants Website
• Creative Tim Website
• NF-Tim Website
• Giants Twitter
• NF-Tim Twitter