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.
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
When a user clicks the createDHackathon button, we could immediately call drizzle.addContract() from the front-end.
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.
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.
Same scenario, a user clicks the button and creates a new DHackathon contract. We capture the emitted smart contract event, “DHackathonCreated” via a middleware.
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.
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