I deployed a smart contract that have this function:
function createNewMigration(string memory title, IERC20 oldTokenAddress, IERC20 newTokenAddress,
uint256 decimalsOldToken, uint256 decimalsNewToken, uint256 divider, uint256 tokensForDistribution) public payable {
require(msg.value == normalMigrationFee, "You need to pay the fee to start the migration!");
address newMigration = address(new MigrationHelper(msg.sender, title, oldTokenAddress, newTokenAddress,
decimalsOldToken, decimalsNewToken, divider, tokensForDistribution));
migrations.push(newMigration);
}
and now I try to call it using ethers.js like that:
const [title, setTitle] = React.useState("");
const [oldTokenAddress, setOldTokenAddress] = React.useState("");
const [oldTokenDecimals, setOldTokenDecimals] = React.useState("");
const [newTokenAddress, setNewTokenAddress] = React.useState("");
const [newTokenDecimals, setNewTokenDecimals] = React.useState("");
const [divider, setDivider] = React.useState("");
const [tokenLogo, setTokenLogo] = React.useState("");
const [tokensForDistribution, setTokensForDistribution] = React.useState("");
….
const migration1 = async () => {
try {
const { ethereum } = window;
if (ethereum) {
const provider = new ethers.providers.Web3Provider(ethereum);
const signer = provider.getSigner();
const Factory = new ethers.Contract(CONTRACT_ADDRESS, contractAbi, signer);
const waveTxn = await Factory.createNewMigration(title, ethers.utils.getAddress(oldTokenAddress), ethers.utils.getAddress(newTokenAddress), oldTokenDecimals, newTokenDecimals, divider, tokensForDistribution, {gasLimit:300000});
console.log("Mining...", waveTxn.hash);
await waveTxn.wait();
console.log("Mined -- ", waveTxn.hash);
} else {
console.log("Ethereum object doesn't exist!");
}
} catch (error) {
console.log(error)
}
}
those variables get their values using the following form:
<form>
<input type="text" id="fname" name="firstname" placeholder="Project Name"
value={title}
onChange={e => setTitle(e.target.value)}/>
<br />
<input type="text" id="lname" name="lastname" placeholder="Old Token Address" value={oldTokenAddress}
onChange={e => setOldTokenAddress(e.target.value)}/>
<br/>
<input type="text" id="lname" name="lastname" placeholder="Old Token Decimals" value={oldTokenDecimals}
onChange={e => setOldTokenDecimals(e.target.value)}/>
<br/>
<input type="text" id="lname" name="lastname" placeholder="New Token Address"
value={newTokenAddress}
onChange={e => setNewTokenAddress(e.target.value)} />
<br/>
<input type="text" id="lname" name="lastname" placeholder="New Token Decimals"
value={newTokenDecimals}
onChange={e => setNewTokenDecimals(e.target.value)}/>
<br/>
<input type="text" id="lname" name="lastname" placeholder="Divider"
value={divider}
onChange={e => setDivider(e.target.value)}/>
<br/>
<input type="text" id="lname" name="lastname" placeholder="Amount of new tokens for distribution)"
value={tokensForDistribution}
onChange={e => setTokensForDistribution(e.target.value)}/>
<br/>
<input type="text" id="lname" name="lastname" placeholder="Logo Link (eg: www.tokenwebsite.com/tokenlogo.png)"
value={tokenLogo}
onChange={e => setTokenLogo(e.target.value)}/>
<br/>
<button onClick={migration1}>Create</button>
</form>
When I click on Create button will only refresh the page. I also tried with
What do you think? Where do you see the problem?
Best Answer
The refresh of the page when you click a button is probably due to the submit event method not being prevented to happen.
Example to prevent refresh
The part you call ethers is not. It's actually React.
In your case
and put this inside migration1 function