Introduction to Drizzle | Ethereum Dapp Tutorial with Drizzle (Beginner)

Introduction to Drizzle | Ethereum Dapp Tutorial with Drizzle (Beginner)


In this episode I’m going to introduce
you Drizzle, a front-end framework for
Ethereum dapps. We will also build a
simple Dapp using this framework, Truffle
and React. This is a free episode of EatTheBlocks Pro. If you want to access the
source code of this tutorial, go to EatTheBlocks Pro and create a free account
by clicking on this button “enroll now”. If
you want to get access to even more
video about Ethereum and Solidity
programming you can also purchase a
subscription to EatTheBlocks Pro and
you’ll get access to more than 100 videos
including some extra video about Drizzle.
First we will see what is Drizzle. Then, I
will show you when do you need it. Then, I
will show you what are the integration
with other frameworks. Then, I will show
you the components of Drizzle. Then, I
will show you how it works. And finally,
we will do an Dapp tutorial with
Drizzle. First what is Drizzle? Drizzle is
a JavaScript framework to help you build
the front-end of your Dapp. It’s available
as an NPM package. So you can install it
very simply with your command line. It
was released by the team of the Truffle
framework in early 2018 and it’s pretty
much to this date the only front-end
framework for Dapps. In the JavaScript
world whenever a new front-end framework
is introduced, people always wonder what
is the purpose of this? Is it really
useful? That’s a fair question. So, you
probably notice that there is a lot of
boilerplate code when you deal with web3, like for example when you import
the contract artifact or when you
configure the web3 object. Beside
this, you also have to write the code for
calling the function of your smart
contract, and, it can be quite repetitive.
Drizzle reduces this boilerplate code a
lot and simplify the integration of your
front-end with the smart contract. With
Drizzle, a lot of the integration with
your smart contract becomes declarative
instead of imperative, a little bit like
the difference between CSS and
JavaScript for example. In other words,
you just need to do the right
configuration and drizzle will figure
out the rest. Now that you know a bit
more about Drizzle, a good question to
ask yourself is when
you actually need it? and how does it
compare to just using web3?
There is no exact answer but generally
speaking with Drizzle you can get
started much faster than by just using
web3. You just need a few
configurations and you can start to
communicate with your smart contract
right away. There are a two downsides
though. First you need to do some extra
learning compared to just using
web3.
And second it can be also a little bit
less flexible than just using web3. This
being said, Drizzle is very modular and
you can choose to use more or less
components depending on how much
flexibility you need and which
integration with other framework you
want.
Speaking of integration, how does drizzle
integrate with other framework? On the
front-end side, Drizzle can be used with
different frameworks, even though it was
primarily developed for React. Under the
hood, it uses Redux and Saga, two popular
libraries for state management in React.
You don’t have to use these libraries in
your application, but if you do, it’s
possible to integrate your reducers and
your sagas with the ones of Drizzle.
Drizzle also uses web3 and you can
still access the web3 object in
your code if you need more flexibility.
That’s a nice escape hatch to have. On
the backend, in theory you could use any
smart contract framework you want.
Drizzle imports a JSON file that
describes your smart contract. All that
Drizzle requires is that this JSON file
follows the format of a library called
“truffle-contract-artifact”, with among
other things some fields like the “abi”
and the deployment address of the smart
contract. If you really wanted, you could
use a framework different from
truffle and take care yourself of
creating the contract artifact, but
unless you have a very good reason to do
so, it’s most simple to just use Truffle,
and it will produce this contract
artifact out of the box. Next, let’s talk
about the component of Drizzle. Drizzle
has three main components: “drizzle”,
“react-drizzle” and “react-drizzle components”. Drizzle is the library that holds the
core of the logic of Drizzle. It is
framework agnostic, which means you can
plug it to any other front-end framework
like React, Vue or Angular. You can just
use this and integrate Drizzle manually
with the rest of your application if you
want. “react-drizzle” allows you to easily
integrate Drizzle to your React
application. It provides a higher holder
provider component that wraps you other
components and pass them down the state
of Drizzle. And finally, there is the
“react-drizzle-components” which provides
some ready-to-use React components for
your application, such as a component to
display accounts, a component to read the
data from your smart contract and
another one to write data. Just a word of
caution: in this tutorial we are going to
use a both Drizzle,
“react-drizzle” and “react-drizzle
components”. Depending on the tutorial
that you will find online, they use more
or less of these components. For example
the official tutorial does not use “react
-drizzle-components”. Alright, so now let’s
see how it works.
First Drizzle needs to know which smart
contract you track, and it does this with
a configuration object. Then, Drizzle will
do two things: first,
it will connect to the Ethereum blockchain
with web3. Then it will maintain
its own copy of the state of the smart
contract in a Redux store client-side. It
will take care of maintaining this data
up-to-date. You don’t have to do anything.
Then, it will relay transactions to the
smart contract, or in other words it will
relay all the data writes. The
synchronization with the data of the
smart contract is really crucial, so
let’s give more details. First, Drizzle
subscribes to new block headers using web3.
Block headers contain metadata
about each block in the blockchain.
Whenever a new block header comes in,
Drizzle check if it contains any
transaction relevant to the contract
we are watching, as configured initially. if
it does, it updates its state, otherwise it
just ignore the block header. One last
thing I would like to tell you about the
inner workings of Drizzle is that even
though the data is kept up-to-date by
Drizzle it’s up to the developer of the
Dapp to re-render the UI when the data of
Drizzle changes. This can be done simply
using React and “react-drizzle”. So now
it’s time for our
Dapp tutorial with Drizzle. We are
going to create a very simple storage
smart contract. Our smart contract will
be able to get and set a variable. On the
frontend we are going to build a UI to
be able to interact with a smart
contract. Beside the core package of
drizzle we are also going to use
“react-drizzle” and “react-drizzle- components” as
well as Truffle and React. Alright so go
to your terminal and we are going to
start the coding. So first for this
tutorial you need to have installed the
Truffle command-line. So if you haven’t
done so already you can do this very
easily with `npm install -g truffle`
and it’s gonna install the command line.
So I already have it I don’t need to do
it. So now I want to create a folder for
our project so I’m gonna create a folder
called drizzle and inside drizzle we’re
going to init a Truffle project so here
`truffle init`, enter.. So now if I check
what is inside our directory then you
will recognize the typical truffle folder
layout. By the way I’m using truffle
version 5 so this is an important
precision. Just make sure you have at
least truffle version 5. If you’re using
an older version then you might have
some problems with this tutorial so make
sure to update before following this
tutorial. Okay so let me clear up my
screen and first I would like to create
a very simple smart contract. So as I
mentioned before our smart contract will
be a simple storage smart contract that
has a single variable and will have two
functions: one function to set the value
of this variable and another function to
get the value of this variable, very easy.
So let’s create a new file in contract
and we call this “Storage.sol”. We’ll
start with the pragma statement so
`pragma solidity ^0.5.0 “. So you can use
a newer version of solidity if you want
As long as it’s at least 0.5 something.
Then we create our contracts contract
storage and then we define our variables.
So we call our variable if is of type
string, that’s a public variable and we
call it `data`. Next we’re going to create
a getter function. So a getter function
will return the value of our data
variable. So function will call this `getData()`… doesn’t take any argument. That’s a
function of type view, it doesn’t modify
the data of the smart contract, that’s an
`external` function that can be called
from outside of smart contract and it
returns a string of memory location
memory and inside it just return data by
the way I’ve you have probably noticed
it actually this Gator function is not
strictly necessary because when you
declare a data a variable as a public in
solidity it automatically create a
getter function with the same name of
the variable so that means that we’ll
have a get a function called data here
but just to make things explicit I want
to create is a get data function all
right so now we’re going to create our
second function that’s our setter
function that can modify the value of
data so function set data it takes a
single argument that’s a string so
string of memory location code data
because our function will be external
and we’re going to call the parameter
underscore data and here we’re gonna
make this external okay so open the
curly braces and very simply we’re just
gonna assign underscore data to data
very easy so I keep this smart contract
very simple because the point is not to
teach you a very complex smart contract
but the point of this video is to teach
you drizzle however even if the smart
contract is very simple we still have a
getter function and a setter function so
data read and data right so those are
the two kind of function that you will
find in all your smart contracts
including the most complex one
so it will still be applicable to more
complex smut contract okay so let’s open
a new terminal and I’m gonna try to
compile my smart contract just to make
sure that there is no error truffle
compiled okay everything works fine so
now the next thing we need to do is to
create a migration file so that we are
able to deploy our smart contract to the
blockchain so we can use the truffle
command line to help us so truffle
create migration and we call this
migration storage so truffle just
created a migration in a migration
folder so that’s the first thing that
you see on my screen so let’s go back to
the code editor and we’re going to edit
this migration file so usually I never
remember exactly how to write this
migration so my little trick is that I
always copy the other migration file
that is created by truffle for another
smart contract that is called migration
that’s a smart contract that is used
internally by truffle we don’t need to
care to take care of it but it’s quite
handy to just copy past the migration
from here so let’s go back to our
migration file I just passed what I got
from truffle and basically I’m going to
replace all the instances of migrations
by storage so here I’m gonna use some
vim Fupa if you have your own code
editor probably you can do the same so
migration is going to be replaced by
storage and okay and so normally it
should work okay so everything has been
replaced so back to our other window and
what I want to do now is to deploy our
smart contract and make sure that
everything works
so first let’s spin up a truffle console
so truffle develop so it’s going to
start an instance of ganache and we’re
gonna land right inside the truffle
console
okay so inside I’m gonna run the my
great – – reset command sorry it’s just
at the bottom of the screen it’s a
little bit cut
so it’s gonna take a couple of second
and I see that the migration worked fine
so everything is good no error in
solidity and we are able to deploy our
smart contract cool so now it’s time to
start our front-end so as I mentioned
before for the front-end we are going to
use react but I don’t really want to
bother to setup react myself it’s a
little bit troublesome take some time so
we are going to use create react app
that’s a very famous dependency on
github that is used to bootstrap your
react application if you have front-end
developer you’re probably very familiar
with this if you’ve never heard about it
it’s a good chance to learn about this
project it’s very handy to start your
react app so we are going to use this
that’s a NPM package so it’s very easily
installable so back to our terminal I’m
gonna open another terminal window and
in this terminal window if you’ve never
used create react app before you can
install it very easily with NPM install
– G create react app here again the
global flag is important because you
want to be able to use this CLI from
anywhere on your pruning system so me I
already have it so I don’t need to
install it and the next thing to do
once it’s install is to use this create
react app and then space and you give it
the name of the project to the folder to
create so we’re gonna create a folder
call app and also we’re going to use the
– – use – NPM flag so that allow you to
create a react app using the NPM package
manager otherwise is going to default to
young so that is of you know but for
this tutorial let’s just keep it simple
and we’re gonna use NPM for everything
so press ENTER and it’s gonna boot drop
everything
and at the end of the installation
you’ll see a couple of comments that you
can execute in your newly created react
application the most important one is
NPM start that’s how you start your web
pack dev server and you’ll be able to
see your application on the front end
okay so let’s go in the app folder let’s
grab my screen and let’s see what is
inside that is a typical photo layout
for a react project so in public you
have all the static asset including the
HTML page and in the SRC folder that’s
where you have all the source code for
JavaScript so you have indexed J’s file
so that’s how we’re going to bootstrap
our react app and you have Abdo JS which
is the main component of the app so
we’re going to work a lot on this
component and also in your own drizzle
project if you your app is actually more
complex then you also have some other
component in this SRC folder and there
are also some other files that we’re
going to ignore like a logo like the
test file the CSS and the serviceworker
we won’t need this one so now we are
going to install drizzle by installing a
couple of NPM packages inside the app
folder we’re going to run NPM install
drizzle drizzle react and drizzle react
components the first package is the co
package of drizzle it can be used
standalone the second package is the
adapter that allows you to connect
drizzle to react and the last package is
some extra react components that are
useful when using drizzle
okay so nod result is install next we
are going to configure it so for this we
are going to create a configuration file
that we are going to put in the SRC
directory so let’s create this file so
SRC and the file is called drizzle
options GS you don’t have to call your
configuration file like this but it’s
generally a convention that is followed
with drizzle project in this file we are
going to create a Java Script object to
configure drizzle this file can take
several keys but the only required key
is contracts contract is an array of the
different contract artifacts that will
be managed by drizzle we are going to
manage only one contract artifact which
is for our storage smart contract so
let’s define this storage variable and
we will need to reference the JSON file
that was produced by truffle when we
compile the smart contract so this JSON
file is not inside the drizzle project
but is inside the truffle project so we
need to go back to directory before we
can access this folder okay so that’s it
for the required option of drizzle next
we’re going to add an optional option to
drizzle and that’s gonna be for the
connection to web series so I’m gonna
pass as snippet so here I have a web
suite key and this web streaky takes
another kit it’s called fallback so
drizzle is going to use this option if
it doesn’t find any injected web sorry
provider so basically if you don’t have
meta masks installed so in our case I
don’t want to use meta master in
development because that’s a little bit
troublesome that forced us to also
configure mini masks and this is
slightly outside the scope of this video
tutorial so I just like to avoid this so
we’re gonna use a browser session
without meta mask install and so drizzle
is gonna fall back using this option
here that we specify and it’s going to
connect to our ganache instance and
finally we need to export our option
objects with it we can use it from other
modules so let’s do an export default
options okay there are many other
options that you can put in the options
object and if you want to know more
about this you can check out the
document
of drizzle at this URL and you have a
complete description of all the other
things that you can put inside in this
tutorial we are going to put another key
a little bit later but first I want to
show you something else so let’s just
take a post on the configuration now ok
so now let’s open the main component of
our app so it’s SRC up the Jazz and so
we’re going to first do some cleanup
because there are some stuff that we
don’t need so this is some boilerplate
code that was created by the create
react app CLI so first of all we donate
the logo we don’t care also about the
CSS what else pretty much everything
that is inside actually we don’t really
care so let’s get rid of of everything
okay
and in this component we are going to
first configure drizzle so first we’re
going to import the drizzle options that
we just created so import drizzle option
from drizzle option normally we have to
import the drizzle object and
instantiated using the drizzle options
and then manually connect it to a react
app but this is a tedious process and
there is a more convenient solution
using the drizzle react package that we
install just before so let’s do this so
let’s import a component that is called
drizzle provider and that’s a component
that you can find in the drizzle react
package so from drizzle react so this is
a higher-order components that’s going
to wrap the other component of your
react application and it’s going to
instantiate this drizzle object and pass
a few objects to child component that
will allow this child companies to
interact with drizzle so it’s gonna make
everything more simple so once we have
imported this then in our return
statement here in our render fun
chin then we’re gonna reference this
higher-order component like this so
drizzle provider and this component
takes a single prop so that’s a protocol
options and these options we’re gonna
pass it drizzle options and then we’re
going to close this component and
basically all our other react component
they’re going to be inside so that’s it
for setting up and configuring the
drizzle now we need to run the front end
just before I need to give a child
component to this drizzle provider
component otherwise it’s going to
complain so let’s just create like a
dummy component we’re just gonna call it
a storage tap and here we close our div
okay so now open a new terminal window
inside the app directory so this is the
directory of drizzle then you execute
NPM start and it’s going to start the
web pack dev server and basically send
you to the web browser where you will be
able to see the front-end so in my case
I’m already running an other application
on put 3000 so it’s basically it’s gonna
find another available port for me but
in your case if through the port 3000 is
available it’s not gonna tell you this
then you’re gonna be taken to a new tab
in your browser so just here a word of
caution if you have made a mask
installed in your browser it’s not going
to work properly because I want to avoid
using meta masks so in this case you’re
going to take the same URL but you’re
gonna load it in an incognito session of
Chrome and that will basically allow us
to totally bypass meta mask and directly
connect to ganache but of course in
production user will need to connect
with meta mask and they will not connect
directly to ganache of course alright so
with this being said let’s move on so
what pac is showing me an error failed
to compile mm-hmm what is the problem I
friend
module not fun you attempted to import
contract storage to JSON which falls
outside of the project SRC directory ok
so the problem here is like the Cree
react up utility that we use to
kick-start our react project does not
allow import outside the SRC directory
so if I come back to my terminal and
I’ll show you what we have inside our
directory so LS SRC
so this is all our source code for a
Java Script but we cannot import
anything that is outside this directory
correct react app does this for security
just as that you don’t do any mistake
however in our case we have a problem
because our contract artifact is outside
this directory so how are we going to do
this so actually there are three
solution to this so first we could
create a sim bling link from the built
directory of truffle to a directory
inside our SRC directory so with the ln
– s command you can achieve a sorry ln –
s command you can achieve this then
another solution would be to modify the
web pack configuration of create react
app so that we don’t have this rule of
not being able to import anything
outside as a c directory so for this you
will need to first eject the react app
so that will basically export the web
pack configuration of the project and in
this web pack configuration you will
need to delete the configuration of the
module scope plugin so first eject then
remove module scope plug-in from web
pack and the last solution so that’s the
most simple that’s what we are going to
do is to change the configuration of
ruffle to save the contract artifact in
another directory inside our SRC
directory so change configuration of
truffle so we’re going to do this so now
open the configuration file of truffles
that’s truffle – config yes so you
should see some comment to give you some
basically some tips if you want to
configure your truffle project but we
can ignore everything and when you see
module dot exports we’re going to add
something to this configuration object
so let’s add a new line just below and
we gonna add contract underscore build
underscore directory and the path that
we’re going to give is so first we want
to enter the app folder where we have
our drizzle project then the SRC
directory where we have our JavaScript
source file and inside this SRC
directory we’re going to put all our
contract artifacts in a contracts folder
so you don’t need to manually create
this folder treefles gonna do it itself
next time it compiles the smart contract
okay so now we need to recompile our
smart contract and redeploy them to the
blockchain oops
actually I forgot a comma after this key
so now we need to go to our truffle
console and redeploy our smart contract
which will also recompile it too and
place the contract artifact in a new
folder that we just defined in the
configuration of truffle so if you just
go ahead and run the migrate – – reset
command in the truffle console you might
think that it’s fine but actually it’s
not because this truffle console has not
picked up yet on the new configuration
of truffle so we need to exit this
truffle console with ctrl C – time and
then we’re going to relaunch it so
truffle develop and this time it’s gonna
pick up on the new configuration of
truffle and place the contract artifact
in the new directory so here I run my
grade – – reset a knife I check the
content of our new contracts folder then
it should not be empty – LS SRC contract
and I can see my contract artifact cool
so now let’s modify the import path of
our contract artifact in our drizzle
option file so let’s go to a drizzle
option file and here when we import our
storage contract artifact this time
we’re not going to go outside the SRC
directory but we can just go to the new
contracts directory and web pack should
be happy now so if I go to my front end
I can see that now I’m able to run
front end without any error so what we
just did with the custom contract folder
worked we solved our problem cool so now
we have our drizzle application setup
but we’re not doing anything with it
we’re not interacting with the the smart
contract so let’s go back to our code
and let’s see how we can interact with
our smart contract so before we’re able
to interact with our smart contract I
need to show you what are the different
objects that are provided by this
drizzle provider component so we are
going to create a container component
and this container component is going to
connect to the riddick store provided by
a drizzle provider and we’re going to
console.log the content of this riddick
store and see what is inside so let’s
create this new component so in the same
directory so the SRC directory let’s
create a file called “Container.js”. So
we’re going to import the usual stuff
when we start a react component. So
“import React, { Component }…”
“…from react’ and here let’s
create our class component, so class
container extends component okay we’re
gonna export this component export
default container okay so next let’s
define a render function so render and
this render function first is going to
console.log this props so these props
will be connected to the Redux store
so we will see all the content of the
Redux stores next to this console.log
statement and after which is gonna
return for now just a dummy HTML so diff
storage okay so if you use redux before
you know that in order to connect a
component to your Redux store you need
to use the connect function of redux for
drizzle it’s exactly the same thing
there is also a connect function but
this dump drizzle provided itself so
let’s import this drizzle connect func
so import drizzle connect ah have some
problem with the spelling drizzle
connect
okay let’s collect and this is from
drizzle react so the same package that
we used before for our provider
component next we need to define a map
state two props function so again
exactly the same as Ridge reacts so here
let’s define this function map state two
props so this function is going to be
used by drizzle connect to know how to
map it’s ridic state to the props of the
container so this is a function that’s
going to take a single argument the
state and it’s going to return an object
that define the relationship between
state and props so I just want to make
it simple and I just want to see the
entirety of the states so here my props
will be a prop call state and I will
just assign the state to it but actually
with es6 we don’t even need to do this
you can just close the curly braces and
this is absolutely equivalent to what I
just showed you before so drizzle
Connect will basically put the entire
riddick store in a property called
state in our props so this is a little
bit silly but we just do this to be able
to console.log everything and then we
make use of drizzle Connect so here
we’re going to wrap our container
component with drizzle connect so
drizzle connect so the first argument
will be our component and the second
argument will be maps take two props map
state two props okay and now we need to
render this component in our app so back
to our app component and instead of this
storage tap HTML here we’re gonna render
a new component so that’s gonna be
container and here we close the tag and
we also import the container so import
container from
container okay by the way it’s better to
group your dependency and separate them
from other dependencies so here on the
drizzle options I’m gonna put it below
okay so now let’s see in the front end
what we have okay so this is our front
end so now let’s open the JavaScript
console and see what we have inside so
we have this object so this is the
entire rhetoric store and what we’re
interested in is this state key so let’s
expand this and let’s see what is inside
so this is what the drizzle provider has
done for us so we have our 10 accounts
these are accounts provided by ganache
so there are 10 of them and also the
account balances so these balances are
kept up to date by drizzle so if there
is any change and this will also update
so this is really cool then the most
interesting is this contracts keys
inside you will find entries for all the
smart contract that we define in the
drizzle option file every time you call
a read-only function of your smart
contract the result of the call is going
to be stored in one of these entries so
here you can see that we have different
entries for each of the function of the
smart contract and inside these entries
once you start to make call to your
smart contract then the result of this
code will be store their index by
argument value so if you call the same
function with two different arguments
then you will have two entries then if
you scroll down you will see some other
key like current block or drizzle status
so drizzle status allow you to know when
you can use drizzle so here we can see
it’s initialized but at the beginning
drizzle status is not initialized so as
long as it’s not initialized you need to
show a loading screen and we will see
just after how to do this really simply
using drizzle react components and after
you have a transaction stack and a
transaction key that allow you to
respectively know the status of pending
transaction and of transaction that were
already done and then you have a
webserie key that tells you if Webster
is initialized or not and which network
we are on okay so now that we finish our
tour of the reduce store provided by the
drizzle provider component let’s go back
to our app component and now I would
like to wait for the drizzle object to
be ready
before we render the rest of the child
components so we can do this manually by
checking out the drizzles tariffs key of
the state of drizzle like I showed you
just before but we can do something even
more simple by using a loading component
using the drizzle react component
package so let’s do this so just before
the input drizzle provider we’re going
to do an other import so we’re gonna
import loading container from drizzle
react components and then we’re going to
wrap our container component inside our
written statement by this loading
container here loading container and
just below we’re gonna close a loading
container okay so now container is only
going to be rendered when drizzle is
ready before the loading container is
going to show a loading screen so we’re
gonna save this and see in the front end
height looks like so in my browser if I
force a reload manually then you will
see a very quick flickering with a
loading screen so you can try it a
couple of time if you didn’t see clearly
so it just show you that this loading
component is working properly okay so
now the next step is to set up a
component to be able to actually
interact with our smart contract so if
you remember we have two functions one
function to get the data and another
function to set the data so in our
component we will need to have a user
interface for these two functions so
let’s go back to our code editor and we
are going to create a new file so as our
C and our code is my component and in
this new file so we set up the usual
react code so import react from react so
this time it’s going to be a functional
component so cost my component equals it
doesn’t take any argument I’m going to
ignore the props and it’s going to
return
just a precision here the fact that I
use the parentheses and not a curly
braces is not an error
it’s an es6 notation that allow you to
return directly what is inside the
parentheses with that the region
statement and inside this D if we’re
going to do several things so first we
are going to display the account
balances so there are several way to do
this so one way is to make use of the
drill drizzles state directly and fetch
the data that we need but there is a
more simple way using the drizzle react
components so we’re going to do the
simple way so just below react we can
import our first component to this
component is called account data and we
get it from drizzle react component and
the way to use it is very simple so
inside the div we reference the account
data component and we can pass it
different drops so the first one is the
index of the account that we want to
show so that’s the account index key and
we want the first account so here we
pass 0 careful because if you check the
documentation of drizzle react
components on github the documentation
is outdated and there will show you a
string instead of a number but if you do
this you’re going to see an error in the
console so just don’t follow this
outdated documentation then we can also
specify which units we want so units
equal either for other unit you can
check the get up repo and we can also
set up the precision so how many decimal
we want so for that let’s say that I
want three decimal ok and then I close
my tag here ok and then I’m gonna put a
little description here it’s gonna be
balance of first account so next we need
another component to display the value
of the data variable inside our smart
contract and we can get the value of
this variable by executing the get data
function so first we need to import a
new component from drizzle react compare
that’s a component that is called
contracted data contract data allow you
to read the value from your smart
contract so here we’re gonna do another
h2 title and we’re gonna call this get
data and after we’re gonna use our
contract data component and so this
component has several props the first
one is the contract props so you need to
tell this component which smart contract
are you referencing so in our case we
are referencing storage by the way this
is not related to the name of the
variable in your drizzle options file
but this is related to the name of your
smart contract in solidity so in your
city code if you define you contract
with a lowercase s then here it also
needs to be lowercase well in our case
it’s application so we’ll leave it like
this then another prop that you need to
pass is the method props so you need to
tell the contract data component which
method are you calling on the storage
smart contract so in our case is the
getdata method so once again this needs
to be exactly the same name as in your
solidity code that’s going to be all the
props that we’re going to pass to the
contract data component but there are
some other props for example if this is
a method that accept an argument then
you can use the method ox prop and this
prop is going to expect an array of
arguments so if you first argument is 0
for example then the first entry in the
array will be 0 if the second argument
is a string B be for example then here
is going to be B etc etc so we don’t
have any arguments so let’s get rid of
this then you have different format
props that you can pass so for example
to utf-8 so that is a boolean prop so
you don’t need to do anything else like
to UTF equal true you just need to pass
this component and you will studied
start it to true so this is useful for
example if you return some abides value
and you want them to be converted to
utf-8 which is human readable similarly
you also have to a ski so this is also
useful if you have some bytes value as
well but in our
this is already a string in a smart
contract so we don’t need this and
finally you can hide the loading
indicator if you want with the hide in
the gate or boolean prop again we’re not
gonna use it
okay so let’s close this tag and lastly
we need to be able to call this set it
data function to change the value of the
data variable so we’re gonna need
another component from drizzle react
components so let’s go up and actually
let’s put every import on its online
because we start to have a lot of input
here and for the last import that’s
going to be a component called contract
form so let’s go back inside our my
component function and here for our new
title it’s gonna be set data to be close
the title and after we render our
contract from component so this is for
function where you change the data of
the smart contract so any function we
doesn’t have view pure or constant
keyword will need to be used with the
contract from component so the API is
very similar to the contract data
component so first you need to specify
the contract so that’s the same contract
storage then you need to specify the
method so our method is set data then
you obviously don’t have a method
ARC’s props because that’s going to be a
form that is displayed to users so they
knew to the value of the argument will
be provided by the user we don’t know in
advance however there is another props
that does not exist in a contract data
component which is called labels so
labels will allow you to specify which
label you want next to each form so
label is going to receive an array of
strings the first string is what is
shown next to the first input so our
first and only input is for the data
parameter so here we’re going to put a
new value of data okay and here I’m
gonna close the array and close my curly
brace okay and then I’m gonna close also
my component tag okay
oops and I forgot to close my single
quote okay now it’s fine no like
actually let’s rearrange the prop to
make it a little bit more tidy so
everybody on its own line so there is
space for everybody okay cool so now
we’re done with my component so now we
need to make use of it so back to the
app component so we’re going to import
it to import my component from my
component actually we can get rid of the
container because we don’t need it
anymore
and here we render my component and
notice how we don’t need to take it out
of of passing the drizzle object to my
component because we are using drizzle
react components then we don’t need to
use drizzle Connect like we did in the
container component so this is extremely
convenient to use the drizzle react
components however the condition to be
able to use drizzle react component is
that you wrap all your component with a
drizzle provider if you forget to do
this then the drizzle react components
are going to complain okay so here I’ve
saved my app component so I’m going to
go back to my web browser and there is
an error mm-hmm I forgot to export my
component mm-hmm
bad Julien you made a mistake okay let’s
go back to my component and we’re gonna
export it so export default my component
alright let’s go back to our browser and
this time cool this time drizzle is
happy so we have three section here so
first this section is the account data
component balance of first account so we
can see the address of the account and
the balance of the account so it’s a bad
100 ether so the difference with 100 if
there is because we use this account to
do our contract deployment so it cost a
little bit of gas and so it gas is
Ether to this why we don’t have exactly
100 then “getData()”. so “getData()” does not
show anything because our data variable
was not initialized. So by default it’s
an empty string. And finally the “set()”
function that allows to change the value
of the data variable. So we have a form
and a submit button that was created by
Drizzle and we also can see the label
that we pass as a prop to the contract
ContractForm component so here we’re going to
use it, we’re going to say that our new
value for data is “hello”,
so between double quote, let’s click on
“submit” and magically my get data
component auto-update, this is super cool!
We didn’t have to take care of the logic
of refetching the data from the smart
contract, Drizzle automatically keeps our
client side state in-sync with the state
of the smart contract. So that is really
really really super cool that it’s very
powerful and I can really simplify your
smart contracts, so I really hope that
you understand the value of Drizzle now.
This is extremely powerful, and by the
way just to make it clear here in the
“setData()” function if we had had several
arguments for our function, then we would
have had several input fields but just
a single submit button, and it would have
worked exactly the same. So that’s it for
this long introduction to Drizzle, sorry
for the long duration but there was
really a lot of things to say about Drizzle. This is a very convenient
framework but it’s also not very easy to
understand and the documentation is not
always up-to-date as I mentioned during
this tutorial so you gotta be careful of
what you read online. Before we finish
this video I would like to make it clear
that what I taught you in this tutorial
is just one way of using Drizzle but as
I mentioned Drizzle is actually very
flexible and you can use more or less
components. So if we go back to our App
component that means that for example
“drizzle-react” and “drizzle-react-components” were two totally optional
dependencies if we wanted more
flexibility we could have created our
Drizzle object ourselves and we could
also have created our components
ourselves instead of using “drizzle-react
-components” if you are a paid member of
EatTheBlocks Pro you’ll get access to my
other video on “advanced Drizzle”. In this
video I will show you how we can do without “drizzle-react” and without
“drizzle-react-components” by writing our own
custom react components
for Drizzle and a lot of thing I’d like
to tell you before we finish this video
is “Drizzle Box”. So “Drizzle Box” is a
pre-configured Drizzle project that you
can very easily download on your computer
using the “truffle unbox drizzle” command.
So with this command you had… you will
have a whole skeleton of Drizzle app. So
it is already integrated with Truffle, it
has already a couple of smart contracts
and examples on how to set up the
relevant UI with Drizzle and React. So if
you are really in a hurry
that is the absolute fastest way to get
started with Drizzle. Make sure to
subscribe to the channel to see more video
like this and if you have any questions
you can ask them in the comments of this
video. That’s it for today thanks for
watching.

10 thoughts on “Introduction to Drizzle | Ethereum Dapp Tutorial with Drizzle (Beginner)

  1. wonderfull tutorial……..Thumbs up!!!!
    Would love to have access to the advanced drizzle tutorials but i cant seem to enroll 🙁

  2. Hi Juliem, Nice video-tutorial. Thank for the demo. I'm interested too in entering as a pro to eattheblocks to see the whole course of drizzle.

  3. not very realte but which plugin did you use for those react syntax highlight in vim, those syntax highlight is good

  4. Very helping tutorial 🙂
    I need some help. I have a payable function without any arguments in my contract. I want the user to enter the amount of ether he/she wants to send to my contract. The problem is, drizzle-react-component's "ContractForm" not showing any input area to let the user enter the amount of ether. Can you tell me how to do it?

  5. I followed the code exactly in this video but inside app.js I am getting an error saying "Could not find a declaration file for module 'drizzle-react'." on line import { DrizzleProvider } from 'drizzle-react'. I googled a lot on this but could get this through, Please help.

  6. Liked video and thanks for posting. I ran into a problem tho – when I put in the <LoadingContainer> (App.js) my page is now stuck on a message that says "Loading dapp…". When I go to the console here is the error:
    "index.js:1375 Contract Storage not found on network ID: 42" || network ID:42 is Kovan (MetaMask) correct? How can I change that? My head hurts 🙁

Leave a Reply

Your email address will not be published. Required fields are marked *