0

My smart contract constructor function accepts 2 parameters for being deployed.

I have developed a user interface for this contract by Hardhat, React, and Ethers.

Now I want to create an HTML form on the React page that receives the two required parameters from the user and deploys a new contract based on the given parameters and shows the address of the new contract.

My question is this: Is it possible to deploy a new smart contract on the UI? ( Filling out the form desirably and clicking the submit button to see the new deployed smart contract address )

Thanks in advance for any kind of help

3 Answers 3

2

yes, you can just ethers.js on your frontend code to deploy a contract like you did in Hardhat.

const contractFactory = new ethers.ContractFactory(abi, initbytesCode ,signer);
const contract = await contractFactory.deploy(para1, para2);
const address = contract.address;
1
  • Thanks for the tip! Do you have any additional resources (link) to send me so I can dig deeper into it and resolve my problem Commented Jun 15, 2022 at 16:38
0

Yes, it is possible, just need to put .As Jiaming Li says, you can put this inside your function like this for deploying new token contract:

async function createNewToken( tokenName, tokenSymbol ) {

const Token = await deploy("ERC20", {
        from: deployer,
        args: [ tokenName, tokenSymbol ]
        log: true,
        waitConfirmations : network.config.blockConfirmations || 1,
    })
}

Then you can put this function into a button as "onClick" ,but before that you should set: deployer , network.config.blockConfirmations , and also get your parameters from user in anyway that you prefer.

Its just example for deploy ERC20 token, but you can change contract and parameters to deploy another contracts.

Another point is try to add some parameters about gas and make sure deployer has enough balance to deploy contract

0
  • You can get the signer by ethers.providers.getSigner(), documentation can be found here for ethers v5.4
  • ContractFactory is the interface for instantiating the interface, more info can be found here
  • Followed by the deploy method, with the params that match with constructor from the smart contract
import { useState } from 'react'
import { ethers } from 'ethers'

function App() {
  const [param1, setParam1] = useState('')
  const [param2, setParam2] = useState('')

  const handleDeploy = async () => {
    const signer = await ethers.providers.getSigner()
    const Factory = new ethers.ContractFactory(abi, bytecodes, signer)
    const contract = await Factory.deploy(param1, param2)

    console.log(contract.address)
  }

  return (
    <>
      <input
        type="text"
        onChange={(event) => setParam1(event.target.value)}
        value={param1}
      />
      <input
        type="text"
        onChange={(event) => setParam2(event.target.value)}
        value={param2}
      />
      <button onClick={handleDeploy}>Deploy</button>
    </>
  )
}

export default App

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.