Dynamically add contract to Drizzle

Here is a quick solution for:

  • adding a new contract to Drizzle (dynamically, after initialization)
  • dynamically rendering a UI for this contract

To add a new contract to Drizzle:

  • Deploy the contract with web3 (not necessary, maybe that its already deployed…)
  • Call the addContract() method of Drizzle with the contract name and a web3 contract instance
const response = await myContract
  .deploy(/**/)
  .send(/**/);

drizzle.addContract({
  name: 'myContract', 
  web3Contract: new web3.eth.Contract(
    myContract.options.jsonInterface, 
    response.options.address
  )
 setShowNewUI(); //React Hook, or setState() if using old React API
});

Then conditionally render a React component where you have the a ui for the new contract(<NewUI /> below). This component will have access to the new contract via Drizzle.

return (
  <div>
    {showNewUI ? <NewUI /> : null}
  </div>
);

BONUS: If you want to make the contract name dynamic:

  • Save the dynamic name in state just after you call addContract() on Drizzle with the name
  • When you render the ui component of the new contract, pass a prop with the dynamic name
  • Inside this component, use this props to know which contract name to refer to in Drizzle

PS: the official docs for dynamically adding a contract to Drizzle are here:

Thanks for that, and I’m still struggling with it !! Below is MyContract.js which is the interface for MyContract.sol that will be add automatically as you explained. Can I ask you kindly to complete the code? I tried to do so but I got this error

Parsing error: Can not use keyword 'await' outside an async function

MyContract.js

import React, { Component } from "react";

class MyContract extends Component {
  state = {};

  render() {
    return (
      <div>
        <h1>test</h1>
      </div>
    );
  }
}
export default MyContract;

In Javascript, you can only use await in async functions. I dont know exactly where you got this error, but to solve it you ned to wrap the await call in an async function like this:

async function foo() {
  //do stuff
  await someAsyncOperationHere();
}

Please see below. I want to access an instance of Operator.sol. I still get error :frowning:

import React, { Component } from "react";
import OperatorCntract from "../../contracts/Operator.json";

class Operator extends Component {
  state = { dataKey: null };

  componentDidMount() {
    
    const { drizzle } = this.props;
    var OperatorCntractConfig = {
      contractName: "Operator",
      web3Contract: new drizzle.web3.eth.Contract(
        OperatorCntract.abi,
        "0xcb96480FE27D37C8fB60a29528e20672fc903491"
      )
    };
    drizzle.addContract(OperatorCntractConfig);

    const Operator = drizzle.contracts.Operator.address;
    console.log(Operator);
  }

  render() {
    return <div></div>;
  }
}
export default Operator;

What is the error you are getting?