Adding smart contracts dynamically to Drizzle

Slight familiarity with Drizzle, React, and Ethereum is recommended.

Drizzle helps keep track of smart contracts in the front end. One just adds the smart contracts of interest to the DrizzleOptions object at instantiation.

But what happens if, during usage, one needs to start tracking a new smart contract.

This could be a contract that has just been created, e.g. via a Factory contract, or a pre-existing contract that is of interest to the current user. Drizzle has the capability to dynamically add contracts to and delete contracts from the DrizzleStore.

Drizzle’s official and concise documentation of this feature is here, Adding contracts dynamically with Drizzle. What follows is a descriptive implementation example.

Imagine we have a DHackathonFactory contract (Decentralized Hackathon -> DHackathon), that allows users to create and own DHackathon child contracts.

When the app starts, we add the DHackathonFactory contract to the DrizzleStore via the DrizzleOptions object.

DrizzleOptions object

The DHackathonFactory Contract UI.

A console.log of Drizzle tracking the DHackathonFactory contract

However, we need a way to dynamically add the DHackathon contracts as they are created by our users. Luckily, Drizzle has this capability. From the Drizzle docs:

You can programmatically add contracts to Drizzle using either drizzle.addContract() or the ADD_CONTRACT action

drizzle.addContract()

When a user clicks the createDHackathon button, we could immediately call drizzle.addContract() from the front-end.

User clicks the button to create a new DHackathon contract

We use drizzle.addContract() to add the new contract to the DrizzleStore

A console.log of Drizzle now tracking the New DHackathon contract

And this works beautifully.

But what if we need information returned from a smart contract event to properly initialize and track the new DHackathon contract.

Store.dispatch() method

Say the address of the newly created contract is not passed to us from the front-end but instead from a smart contract event. Or we need other values returned from events for the new contract’s constructor, or to name the new contract more appropriately in the DrizzleStore.

For all these situations, we can catch the event of interest in a middleware (read on React middleware to learn more about middleware in this context), get the values we need, and use the ADD_CONTRACT action dispatcher to add the new contract to the DrizzleStore, with the desired data.

User clicks the button to create a new DHackathon contract

Same scenario, a user clicks the button and creates a new DHackathon contract. We capture the emitted smart contract event, “DHackathonCreated” via a middleware.

Drizzle emits actions for every smart contract event that fires.

In the middleware.js file above, we get the DHackathon ID and the recently minted contract’s address from the event DHackathonCreated. We then follow the same setup and use the store.dispatch() method to emit an ADD_CONTRACTaction that drizzle will recognize and do its magic.

New DHackathon contract tracked in Drizzle Store.

Note this new DHackathon contract is named by the ID returned on its creation event and is linked to the address returned on the same DHackathonCreated event.

Similarly, we could:

You can also delete contracts using either drizzle.deleteContract() or the DELETE_CONTRACT action.

The above is a useful pattern that will evolve in the near future. Hope this article helped clarify its implementation.

All the code for this example can be found at alanarvelo’s DHackathon code.

My package.json dependencies are:

Front-end dependencies & versions.

My global environment setup is:

node@v8.12.0, npm@6.4.1, truffle@5.0.32, macOS Catalina v10.15.1