Here is a quick and easy way to add and update multiple dNFTs for our collection using the Revise SDK.
Create a collection
Start by making a collection using the Revise SDK with the your collection name and uri.
const collection = await revise.addCollection({name: "My Dynamic Football Team", uri: "..CREATE YOUR UNIQUE URI"})
// Collection Name : Use any name you want for your collection (this gets shown in the marketplace))
// Collection_URI : Use a unique name (no spaces or special characters)
// this will generate a unique link for your collection
// for e.g. if you choose "mydynamicplayer12345"
// your baseURI wil be "mydynamicplayer12345.revise.link"After execution of the above code you will receive a unique collection ID as a response, copy it and paste it in your .env file or any other config file that you are maintaining as we will need it in the future while adding the dNFTs into your collection.
Storing NFT ID’s in a smart contract
Now in case you are using dNFT for various purposes in the tool , there might be a lot of dNFTs getting added to your tool and in order to update them we will need to store their IDs. Storing them in contract is the safest, so we have provided a contract below for context and for you to use.
// SPDX-License-Identifier: MIT
pragma solidity ^0.8.10;
//using counters provided by openzeppelin, one can aso write their own counter program
import "@openzeppelin/contracts/utils/Counters.sol";
contract RealEstate {
using Counters for Counters.Counter;
//making a counter to keep track of the number of dnft added to the collection
Counters.Counter private nftcount;
//function that will return the current number of dnft
function currNFTcount() public view returns(uint256) {
return nftcount.current();
}
//function that increase the count when a dnft is added to the collection
function incNFTcount() private {
nftcount.increment();
}
//array that will store the dnft ids in form of string
string[] private nftTokenIds;
//function that adds the dnft to the array and inc the nftcount
function addNFT(string memory _nftTokenId) authorized(msg.sender) public payable {
nftTokenIds.push(_nftTokenId);
incNFTcount();
}
//function that returns all the dnftid added to the collection
function getAllNFTIds() public view returns(string[] memory) {
return nftTokenIds;
}
}Now we have a dNFT collection and a smart contract to store the nftcount and the nftID
Connecting our previous smart contract to our js file
Before we start adding NFTs, we need to connect the smart contract we previously created with our Javascript code. There are various way of doing the below, but we prefer this method. Feel free to follow other methods, but ensure that you can establish a connection with the smart contract.
import Reactfrom "react";
const { ethers } = require("ethers");
const {
Contract, // address of the contract
ContractABI, //abi of the contract
key, //authkey provided by revise SDK
collectionId, // collection Id recorded when we made the collection previously
} = require("./constants");
const { Web3Modal } = require("web3modal");
const { Revise } = require("revise-sdk");
const revise = new Revise({ auth: key });
export const TransactionContext = React.createContext();
export const TransactionProvider = ({ children }) => {
const getEthereumContract = async () => {
// Talk to the smart contact in Ethereum blockchain
const provider = new ethers.providers.Web3Provider(window.ethereum);
await provider.send("eth_requestAccounts", []);
// Implement the signing in metamask
const signer = provider.getSigner();
// Three ingredients to fetch an contact
const transactionContract = new ethers.Contract(
Contract,
ContractABI,
signer
);
// logging the contrac
return transactionContract;
};
//other functions that are needed to be coded , like the generateNFT we will add after this .....
//....
//.....
return (
<TransactionContext.Provider
value={{
connectWallet,
checkIfWalletIsConnect,
generateNFT,
}}
>
{children}
</TransactionContext.Provider>
);
};Adding NFTs to our collection
Now let’s implement the function which handles the part of adding the NFT to the collection.
const generateNFT = async (param1,param2,param3) => {
const contract = await getEthereumContract();
// setting index to the current nft count number
let index = await contract.currNFTcount();
let ind = 1 + index.toNumber();
let indfinal = ind.toString();
// function to add the nft to the collection
const res = await revise.addNFT(
{
name: "xyz",
tokenId: indfinal,
description:
"This is a dnft made for demo purposes " +
" " +
landdetails,
image: "https://i.ibb.co/4dXWQhC/Frame-57.gif",
},
[
{ param1: param1 },
{ param2: param2 },
{ param3: param3 },
],
collectionId
);
console.log(res.id);
const nftadded = await contract.addNFT(
res.id,
{
gasLimit: 5000000,
}
);
await nftadded.wait();
};
The images above show the NFTs being added on the Revise Dashboard.
You can have an array of objects containing relevant data and then loop over the array while conditionally triggering the function above. Below is just a simple example of how to use it , the function above can be used as per need of the tool so feel free to experiment/change.
const { connectWallet, currentAccount, generateNFT } =React.useContext(TransactionContext);
let nftdata=[{"data about nft1"},{"data about nft2"},{"data about nft3"},{"data about nft4"}..]
const multiplenft = () => {
for(let i=0 ; i<nftdata.length;i++){
generateNFT(data);
}
}Updating multiple NFTs at the same time
As the NFTs has been added to the collection, we can now look at how to update them simultaneously. To achieve this we will use the array we prepared on the contract earlier which is nftTokenIds. We will acquire the array from contract and then loop it to update each and every NFT in out collection using their respective nftID.
We will be using Alchemy this time to integrate our contract to our Javascript - this is just another way to integrate contracts. You can choose whatever way you are comfortable with.
const { ethers } = require("ethers");
conequire("axios");
const {
Contract,
ContractABI,
key,
collectionId,
} = require("./constants");
let nftt = null;
//example data
const home = [
{
coins: "0",
image: "https://i.ibb.co/0DKLtm0/home0.png",
},
{
coins: "1",
image: "https://i.ibb.co/JmHs3RJ/Home1.png",
},
{
coins: "2",
image: "https://i.ibb.co/YcBDqF9/Home2.png",
},
{
coins: "3",
image: "https://i.ibb.co/Nj65rrj/Home3.png",
},
{
coins: "4",
image: "https://i.ibb.co/j5SvNtN/Home4.png",
},
];
async function API() {
//current param of the dnft
let param1 = nftt?.nft?.metaData[1]?.param1;
let param2 = nftt?.nft?.metaData[1]?.param2;
//do changes in the parameters or metadata of the dnft as you like using different conditional statments and apis
//then return the desired changed data back to the update function
let data = Home[param1];
return data;
}
//function to fetch the nftarray from the contract
const fetchNftArray = async () => {
const alchemy = new ethers.providers.AlchemyProvider(
"maticmum",
"key"
);
const contract = new ethers.Contract(
Contract,
ContractABI,
alchemy
);
const allNftIds = await contract.getAllNFTIds();
return allNftIds;
};
//function that takes care of the update of the dnfts whose ids we acquired from the contract
async function update() {
const nftArray = await fetchNftArray();
for (let i = 0; i < nftArray.length; i++) {
const res = await revise.fetchNFT(nftArray[i]);
const nft = revise.nft(res);
nftt = nft;
revise
.every("10s")
.listenTo(API)
.start(async (data) => {
await nft
.setProperty("param1", data.coins)
.setImage(data.image)
.save();
});
}
}
update();
Conclusion
To summarize:
Create a collection
Store the NFT IDs in a smart contract - because its safer!
Add NFTs to our collection and connect the smart contract from step 2 to your code
Update multiple NFTs at the same time - while using Alchemy
And that’s all! Hope you found that easy and learned something new. Happy building on Revise!
Comments