0

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?

2
  • Please clarify your specific problem or provide additional details to highlight exactly what you need. As it's currently written, it's hard to tell exactly what you're asking.
    – Community Bot
    Oct 26, 2021 at 21:42
  • I also tried with <form onClick={migration1}>but no results Oct 26, 2021 at 21:44

1 Answer 1

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()
6
  • thank you for your time. How should I integrate this in react? I started to study it a few days ago so I am a newbie. So I added this function in the React component and now my submit button looks like that: <button onClick={(e) => runMigration(e)}>Create</button> Is that right? IF yes, where I call the {migration1} Oct 26, 2021 at 22:13
  • 1
    run migration was a fictive name you actually want you function to be called. sorry if it's confusing Oct 26, 2021 at 22:17
  • Ok I did it { const migration1 = async (t) => { t.preventDefault(); ... }. Now the page is not refreshing but still can't call the payable function from Smart Contract. Oct 26, 2021 at 22:17
  • Alos, another question: What did you use for your wallet connect button from your personal web-page? I like it Oct 26, 2021 at 22:19
  • 1
    I"m using web3SafeModal. Your going to have to rework the web3 connection with react. Check my youtube i have a class youtu.be/UR_yQtvhQAk Oct 26, 2021 at 22:20

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.