Made by Giants & NF-Tim by Creative Tim
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
git clone https://github.com/Elrond-Giants/giants-nftim-minting-dapp.gitnpm installWe 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.
npm run devOpen your browser, go to http://localhost:3000 and start exploring.
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,
});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);
};Checkout the Next.js deployment documentation for details.
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:
- Make sure that you are using the latest version of the template.
- Providing us reproducible steps for the issue will shorten the time it takes for it to be fixed.
- Some issues may be browser specific, so specifying in what browser you encountered the issue might help.