Call a Solidity function with arguments in ethers.js

Question

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?

Answer 1

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

onClick={(event) => Migration1(e)}


function Migration1(e){
 e.preventDefault()  //     <---- this prevent the form from being submited and run your code instead
}

The part you call ethers is not. It's actually React.

In your case

use onClick={(e) => Migration1(e)}

and put this inside migration1 function

e.preventDefault()