Adding smart contracts dynamically to Drizzle – Alan Arvelo

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


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.

Coins Kaufen: Bitcoin.deAnycoinDirektCoinbaseCoinMama (mit Kreditkarte)Paxfull

Handelsplätze / Börsen: | KuCoinBinanceBitMexBitpandaeToro

Lending / Zinsen erhalten: Celsius NetworkCoinlend (Bot)

Cloud Mining: HashflareGenesis MiningIQ Mining

Werbung: Immobilienmakler HeidelbergMakler Heidelberg

By continuing to use the site, you agree to the use of cookies. more information

The cookie settings on this website are set to "allow cookies" to give you the best browsing experience possible. If you continue to use this website without changing your cookie settings or you click "Accept" below then you are consenting to this.