Developers Forum for XinFin XDC Network

Shashank Gupta
Shashank Gupta

Posted on • Updated on

[Solved] Problem trying to connect XDC contract with React.js

import React, { useState } from "react";
import "./App.css";
import { ethers } from "ethers";
import { abi } from "./../../artifacts/contracts/MyEpicNFT.sol/JettNFT.json"; // Replace with your contract ABI

function App() {
const [to, setTo] = useState("");
const [tokenId, setTokenId] = useState(0);
App.jsx
App.jsx

const [uri, setUri] = useState("");
const [message, setMessage] = useState("");

const connectWallet = async () => {
if (window.ethereum) {
try {
const provider = new ethers.BrowserProvider(window.ethereum);
const signer = await provider.getSigner();
const contractAddress = "0xf39Fd6e51aad88F6F4ce6aB8827279cffFb92266";
const contract = new ethers.Contract(contractAddress, abi, signer);

    // Mint NFT
    const tx = await contract.mint(to, tokenId, uri);
    await tx.wait();

    setMessage("NFT minted successfully!");
  } catch (error) {
    setMessage(`Error: ${error.message}`);
  }
} else {
  setMessage("Please install MetaMask and connect to your wallet.");
}
Enter fullscreen mode Exit fullscreen mode

};

return (


NFT Minting App



Recipient Address:
type="text"
id="to"
value={to}
onChange={(e) => setTo(e.target.value)}
/>


Token ID:
type="number"
id="tokenId"
value={tokenId}
onChange={(e) => setTokenId(e.target.value)}
/>


Token URI:
type="text"
id="uri"
value={uri}
onChange={(e) => setUri(e.target.value)}
/>

Mint NFT

{message}



);
}

export default App;

Hardhat.config.js:
require("@nomicfoundation/hardhat-toolbox");
require("dotenv").config({ path: ".env" });

const XINFIN_NETWORK_URL = process.env.XINFIN_NETWORK_URL;
const XINFIN_PRIVATE_KEY = process.env.XINFIN_PRIVATE_KEY;

module.exports = {
solidity: "0.8.0",
networks: {
xinfin: {
url: XINFIN_NETWORK_URL,
accounts: [XINFIN_PRIVATE_KEY],
},
},
};

ERROR:
Error: missing revert data (action="estimateGas", data=null, reason=null, transaction={ "data": "0xd3fc9864000000000000000000000000336309c9af4aaedc4395a99f3f3b2029aa9bb9c300000000000000000000000000000000000000000000000000000000000000b20000000000000000000000000000000000000000000000000000000000000060000000000000000000000000000000000000000000000000000000000000005f68747470733a2f2f626166796265696476636a6b6d64746167623373357072633767337778737768706a3668646b6c6d3364723463633278736b6c61636235617032712e697066732e647765622e6c696e6b2f4d696e6974686f6e2e706e6700", "from": "0x336309C9aF4aaeDC4395a99f3F3b2029Aa9BB9c3", "to": "0xf39Fd6e51aad88F6F4ce6aB8827279cffFb92266" }, invocation=null, revert=null, code=CALL_EXCEPTION, version=6.7.1)

Discussion (4)

Collapse
shashankgupta10 profile image
Shashank Gupta Author

Thanks for the help @mitali_blocksscan !!
I migrated to truffle and the problem is solved.
I think it was a problem with hardhat.
I tried everything when i was on hardhat but to no avail
Now it is working absolutely fine, all thanks to @mitali_blocksscan thanks for all the help!!

Collapse
lance profile image
Lance Lilly

Were you able to get through this?

Collapse
cryptosandtokens profile image
Robert Aronovici

Not sure if this is a bug, but we can find a few of the devs to debug and see what is happening that's causing the stake error...

Collapse
mitali_blocksscan profile image
Mitali_BlocksScan

Hey @shashankgupta10
Can you please check your ethers version.
Please install ethers@5