How to build an interface to interact with smart contract instances [Drizzle & React]

Hi everyone

I want to develop a Dapp using React and Drizzle that contains two web interfaces: Regulator (interact with regulator.sol ) and Operator (interact with operator.sol ) and Operator. The Regulator is responsible for creating and adding a new Operator in the system. Each time the Regulator adds a new Operator, a new instance of the Operator.sol is created to represent the new operator. See the below code for details. My questions are:

1- By knowing the address of an Operator instance, how can I interact with it from the Operator web interface? The idea is that each Operator can use the Operator web interface to interact with his smart contract. So the Operator web interface should be dynamic.

2- when and how can I do the immigration for Operator.sol as it would not have immigrated when the dapp is deployed for the first time?

pragma solidity 0.5.12;

contract Regulator{
    
    mapping (address => address ) public operator;
    
    event newOperator(address ownerAddress, address contractAddress);
    
    function createNewOperator(string memory _name, uint _age, address _owner) public returns (address) {
        Operator op = new Operator(_name,_age,_owner);
        
        operator[_owner] = address(op);
        
        emit newOperator(address(_owner),address(op));
    }
}

contract Operator{
    
    string private name;
    uint private age;
    address private owner;
    
    constructor(string memory _name, uint _age, address _owner) public
    {
        name = _name;
        age = _age;
        owner = _owner;
    }
    
    function getInfo() view external returns (string memory _name, uint _age, address _owner)
    {
        _name =name;
        _age = age;
        _owner = owner;

    }
}

Question 1

If the contract is deployed before the frontend, you can just add a contract to the configuration of Drizzle and use Drizzle to interact with it.

You will find an introduction to Drizzle here for how to do that.

Question 2

Not quite sure what to say about when to deploy your smart contract. I understand it’s deployed dynamically from the frontend? So it’s up to you to decide in your business logic how it works. For example you can have a button, and in the onClick() callback of this button you trigger the deployment:

const deployContract = async () => {
  const response = await myContract
    .deploy(/**/)
    .send(/**/); //See the doc of Web3 here https://web3js.readthedocs.io/en/v1.2.0/web3-eth-contract.html#deploy
  
 drizzle.addContract({
  name: `myContract ${counter + 1}`, //Save and increment a counter in your state to give different names to each new contract
  web3Contract: new web3.eth.Contract( /*abi => from truffle contract*/, /*address => from response*/)
}

render() {
  <div>
   <Button onClick={deployContract}>Deploy</Button>
  </div>
}

2- when and how can I do the immigration

setShowNewUI(); //React Hook, or setState() if using old React API
});

Thanks a lot.

Regarding your answer for question 1, what about if there are many instances of a contract? how can I add/access a specific instance using drizzle?

Again thank you for your help :slight_smile:

Drizzle does not have the concept of “instance of a same contract”. It only knows how to register contracts by name.

So if you register several time the same contract, you will need to use 3 different names for registrations, and these are the names you will use to reference the instances you want.

hope that helps :slight_smile: