Working with Drizzle and Svelte (Part 1)
This post is the first in a series of posts where I share my experience writing a simple Dapp using Drizzle and Svelte.
Whilst working at EdgeFund I wanted to explore the possibility of creating a Dapp using Truffle Suite’s new collection of libraries called Drizzle.
The easiest way to get started with Drizzle according to the website is to use their seed React project by running truffle unbox drizzle, but having no react experience, I wanted to have a go at developing a Dapp without the additional react components and libraries by simply using the underlying drizzle technology instead.
To work with Drizzle, regardless of the front-end framework you decide to use for the UI, you need to configure your drizzle instance and connect it to the smart contract you want to work with. This is done through drizzle options.
I’m using our CoinToss contract as a basis for the front-end just so I have something simple to work against. I’ve packaged up our contract’s source code and compiled .json files into an npm package which I’m importing at the top and which I installed by running npm install @edgefund/core
Drizzle needs to know about the contract in order to know what functions and events are available and how to retrieve information about the contract when it detects any new blocks in the blockchain. You can also specify in the options file, how frequently (if at all) you’d like drizzle to poll for new blocks, or how often to check if you’re logged into an account with web3 (a library which is usually injected into the page by the MetaMask browser plugin).
With the drizzleOptions object created, it’s time to create our Drizzle redux store.
For this we need to make sure we have the drizzle npm package installed
npm install drizzle --save
In order to properly visualize what the drizzle store is doing, I recommend downloading and installing the Redux Dev Tools plugin for your browser.
Once you’ve created a simple index.html page and bundled and linked to your JavaScript, you should be able to see the following in your browser, provided you have the aforementioned plugin installed.
As you can see in the above chart diagram, the contract definition has been loaded and I have access to all the properties defined in the smart contract. I also have access to additional properties which tell me about the status of drizzle itself, whether it is initialized and synchronised with the blockchain and (through the web3 object), details on which network I’m connected to.
Having the drizzle store setup and the redux browser dev tools installed is a good starting point for beginning to build your Dapp.
In my next post I’ll explain how to interact with the drizzle and drizzleStore objects in order to start visualizing up-to-date data from your smart contract in the browser.
—
If you found this article interesting, please give it some claps and follow me on Medium to see more content like this.
I am currently working on EdgeFund, an open-source platform which offers a decentralized shared bankroll on the Blockchain. To learn more about EdgeFund, please visit our website or join our telegram group to chat to the team and be sure to follow us on Twitter!
