[Music]
uh build gild Dow and we are focused on
developer education uh in particular we
have this stack scaffold eth and this
curriculum speedrun aum.com uh if you
are interested in learning how to build
on ethereum or you even have friends
that are interested in building on
ethereum tell them to go speedrun
ethereum I see some familar faces that
were at the last sessions uh it's a lot
of the same similar content today we're
just going to start with scaffold eth
and build something simple and then I'm
GNA hand it off to Kevin Jones and he's
going to do a uh like an extensions
build I think so we're going to kind of
try to wrap two sessions into one here
I'll do the intro to scaffold eth and
then uh he'll do that
extensions and I think maybe we'll even
have like a little Q&A possibly in the
middle of them too while he's getting
ready so uh scaffold eth is our stack of
choice and uh it's great for prototyping
oh look at that we still got our nft up
I got to close stuff out here holy
cow sorry boop boop boop boop boop boop
boop boop boop boop okay here we go so
scaffold eth you can find it at scaffold
E.O it's uh it's a prototyping tool but
you can also push to production uh it's
good for tinkering and and we'll get
into it here so there's two ways to do
it you can kind of Clone the repo and
that's kind of the old way to do it and
the new way to do it is with npx create
eth and uh npx create eth is sort of
like the step toward our extension
system so we'll be using that uh mostly
today and uh yeah I think just to level
set real quick we probably I probably
didn't introduce this very well uh we're
g to have like a whole day here I think
we're in this room like all day today
till like 6:30 tonight or 5:30 or
something like that so we're going to do
introductory content right now I'm just
going to quickly show you how to build
and ship an app uh then Kevin will do
the extensions then I think we'll take a
lunch break and we'll come back and
we'll build uh a few more things and
then we're going to have a CTF later
today so a capture the flag where you
actually have to like hack some
contracts and mint some Flags so it's
it's going to be a lot of fun if you're
more technical the afternoon will be
better if you're just getting started uh
the morning will be better I so sorry to
all the people that I keep seeing at all
these talks you guys keep coming to my
talks and I keep doing the same builds
like I need to like innovate a little
bit here I try to do something a little
different every time just to make it
more interesting but thank you guys for
coming out and supporting okay let's go
let's get uh scaffold eth going here so
uh we're going to run MPX create eth and
it's going to be kind of like a little
uh Choose Your Own Adventure here it's
going to take us through let's see this
is Devcon app I'm going to call it
Devcon app 3 I think is where we're at
right now and uh this is kind of like
one of our more controversial things we
kind of still have defaulted to hard hat
it's taking us a while to like really
get Foundry the way we want in scaffold
e but you can choose between hard hat
and Foundry and Foundry is almost going
to be the default soon but uh it's up to
you you can choose either one both are
good uh Foundry you're going to spend
more time writing uh your tests in
solidity and so if you're building just
like a super complicated protocol like
Foundry is probably the option that you
should take because you're going to need
to write lots of tests um and those
tests run in solidity if you choose hard
hat it's a great option still uh I think
the deployments are a little smoother
and everything's in typescript so I
think hard hat leans a little bit more
toward like the app Builders uh and
they're doing a good job at like
speeding up too I think maybe one of the
concerns was that Foundry was just a lot
faster than hard hat and I think they're
they're improving a lot of those things
I just pick one randomly I think did
hard hat for my Devcon app number one
and I think I did Foundry for my Devcon
app number two and I'm just randomly
back to hard hat for Devcon app 3 but it
doesn't matter whether you choose
Foundry or hard hat it's still going to
be the same commands we're going to do a
yarn chain to bring up a chain yeah
what's up which one did you say
iscript uh that's F uh hard hat hard hat
is all your tests will run in typescript
so like when you build out a test Bank
in typescript you know go query this
amount make sure it's that amount write
to the contract and make sure it wrote
correctly you're going to be writing
that in typescript and so that makes it
really nice if you're going to also be
building an app because you can get in
and kind of copy that code right into
your app so if you're an app builder
sometimes writing those tests in
typescript make sense but it seems like
the gigar brains are moving toward
solidity as a testing you know what I'm
saying
like I can tell that they're smarter
than me and they know what they're doing
but I don't know exactly why but they're
they they're they're on to something so
I think that like the The Foundry and
testing with solidity is like the future
and probably where we'll go uh but as an
app builder I feel like I can relate uh
with typescript and JavaScript
more and like I said like when you can
copy paste right into your app it's
really nice okay so once everything is
installed and shout out to the
organizers this is cool like I've been
to conferences before where I've done
demos and the internet was not good
enough to install this whole stack and
we just installed the whole stack just
now so shout out uh to Skylar and the
team and the Devcon team nton okay and
of course all of you guys that are doing
all the work behind the scenes okay here
we go we're going to spin up our local
blockchain so like I said whether you're
using hard hat or Foundry it's the same
command with scaffold e we kind of
abstract it away a little bit and just
give you the commands that you need that
command was yarn chain so I ran a yarn
chain and that basically spins up my
local blockchain and then I can do a
yarn deploy and that's that's going to
deploy a uh the kind of like the
template smart contract that comes with
scaffold eth and then we're going to do
a yarn start in another terminal here so
it's kind of like launching a rocket you
got a few you got a few uh a few things
here it feels it feels overly
complicated but once you figure out that
this is kind of like mixing two packages
together and you sort of have this back
end that is the the uh blockchain and
then you have the front end which is
like your next JS it starts to make
sense how this works and scaffold eth uh
particularly does a good job with taking
your artifacts from your smart contract
and injecting them into your front end
and I'll show that when we start writing
the front end it's really nice because
it starts to give you hints and it knows
everything about your contract
already Okay so let's get into the code
I'm going to use cursor or code whatever
if you guys use code you just do code
dot right but I like cursor even if I'm
not using the AI feature I just use it
as my IDE most of the time but it's
really nice because it has this tab over
here where you can pull it out and be
like yo build some buttons and GPT or
claw will just like inline write the
code for you so definitely if you
haven't checked out cursor go go grab it
it's a great uh code ID okay so if we
look at our packages we have hard hat
and then we have nextjs like I said
that's kind of like your back end and
your front end and if we get into hard
hat we can find the contracts scaffold e
starts with this kind of generic
contract that has a little bit of
everything just to get you started a lot
of times you might just like carve it
out right that's why we called it
scaffold e you kind of need the
scaffolding but then as you get the
thing built that you want you can kind
of tear down some of the scaffolding oh
I think my little mic is going weird
okay here we go so uh let's get into
this contract and look at it and let's
just Tinker around I think one of the
first things to show off with scaffold
eth is just this this kind of Dev Loop
you'll get
into and let's let's look at that okay
so we've got some let's look at this
smart contract is that big enough you
guys can see that
okay yeah yeah okay so uh you've kind of
got your primitive data types whether
you're tracking addresses or strings or
bools or numbers uh there's mappings
between these primitive data types like
for any given address you can keep track
of a number like a balance or something
uh events The Constructor even a
modifier here which is a little goofy
you you can kind of get the syntax uh I
would recommend solidity by example if
you uh are feeling like you need a
little bit more uh help figuring out the
syntax and just getting a little bit
better at just writing your your first
you know few smart contracts definitely
check out solidity by example and just
like go through each of these examples
and just copy paste them into scaffold
eth and and they're they're really great
examples to learn from like for instance
like if we were going to go learn what a
mapping is all about we could get over
here and we could copy this mapping and
we could paste it into our smart
contract and then go dinker around with
it right that's that's kind of like a
good Loop to get into let me
specifically get to this contract and
Dink around with it but I just wanted to
show off solidity by example as kind of
a tangent here whenever you're writing
your smart contract if you're writing it
yourself and not just prompting AI you
probably want to like go to solidity by
example and find some of these uh kind
of nice copy paste examples but I'm
going to close that out we're we're
going to go for memory here okay so uh I
want to look at this set greeting
function it looks like we pass it in
some greeting a classic you know
greeting contract this guy's kind of
waving around am I okay here there we go
uh classic greeter contract we're going
to set some string uh but this is the
the neat little code block that I want
to test basically it's if you send money
in when you set the greeting it sets its
little premium flag to true and I think
that's going to be what what we'll do
here in a second okay so once we have
our backend up and we have our front end
up let's go visit our app here it is so
scaffold e kind of comes with you're
going to write some solidity and then
you're going to have this debug tab here
let me make this a little wider there we
go see that debug tab there we go this
debug Tab and this is going to give you
this really nice interface where you can
kind of just point-and-click try things
out you can poke at your contract you
can test your assumptions so let's go
look at that greeting contract let's go
set the greeting right and that's going
to teach us about burner wallets and eth
to way couple of the initial Concepts uh
let's let's just try to set it it's
going to yell at us so if I say hello
world and I hit send it's going to say
something like you don't have any money
and so right up here there's a nice
little uh when you're on Local Host it
recognizes you're on Local Host and it
gives you a nice little faucet button
but as soon as you push this thing to a
live Network that faucet will disappear
so I'm just going to click that and that
should give me some eth right now we've
got some some money to work with now the
second thing I want to bring up is
burner wallets uh you'll notice there's
a wallet here and I could my metamask if
I wanted but when we're doing local
development when we're doing uh quick
Dev I want to be able to just like hit a
button and send this transaction I want
to just be able to click it and have it
go right did you see that like that was
a transaction there's a transaction
that's a transaction that's a
transaction you get a transaction you
get a transaction so it's just faster
and it's a lot easier to kind of test
what you're doing to not have metamask
popping up and uh switching the chain ID
and a bunch of other things that you'll
run into but this thing's all ready to
go so by the time we push this thing to
a public network we'll be able to bring
metamask in and we'll be able to hide
those burner wallets but for now it
works really good for Dev and let me
just triple down on the burner wallet
thing real quick if I open up an
incognito window and I go to Local Host
see I get this account this sort of one
a55 let me do that
again Local Host and it's a new account
right because it's in uh Incognito and
it's keeping the private key at local
storage you're getting a new one each
time you bring up that incognito window
which which is super nice for testing
and and I'll show you that in a little
bit but basically you could say you have
this function that you only want the
owner to be able to call with this uh
with these burner wallets you can kind
of bring up the good guy burner wallet
bring up the bad guy burner wallet make
sure the good guy can do the thing make
sure the bad guy can't do the thing it's
not like an exhaustive test but it's a
great way to quickly test your
assumptions okay here we go let's go
hello world hello world 3 that's what
I'm oh whoops hello world three send it
okay so I want to get this premium flag
see over here these are all the like uh
read it's reading from our contract all
these different values and there's this
premium flag here that's still false so
what I want to do is send in some money
right the contract is still empty it
doesn't have any money what we're going
to do is we're going to send in
0.001 and here's the next weird thing
about building on blockchain is this
whole idea of eth verse way and again
solidity by example has a really good
ether verse way explainer here and
uh when you put a one so when I'm in a
smart contract and I put uh you know a
one right here that is one way right and
so if I wanted to send one E I need to
send one times oh get out of here 1
time time 10 to the power of 18 right
that is 1 e and the reason is the evm is
a super simple little computer computer
it doesn't want to mess around with
floating Point math so you don't do
decimals in solidity you have to
basically do whole numbers so sometimes
when you need to do something like uh
take a thing and add 5% to it you can't
just like multiply 1.05 you have to like
do some like numerator denominator stuff
uh but the the thing is is right here we
have this little button and it does that
for you now only would a developer need
this like once you start building your
front end you need to do the eth toway
conversions all in the background and
the user should not know about it you
should just be like I want to spend 01
eth go and it goes right or even better
uh the USD value of that 0.01 eth and
then maybe the 0.01 eth underneath it or
something like that but if I if I try to
send this right now with a 0.01 it's
going to give me like a big int error it
just doesn't like that right developers
need to remember and this is why we put
it into scaffold eth you have to hit
this button and you have to take it
times 10 18 and then you hit send and
there we go we made a transaction and
what I wanted to show off was if we send
in money it should set this premium flag
to true and it did it's true now right
and if we zero that out and send it
again does it does it zero I don't even
know but we can test our assumptions we
can just try it and see what it does yep
so now premium goes back to false okay
so let's write a quick little smart
contract app and specifically I want to
show you the sort of like core game Loop
that you'll get into with scaffold eth
and that's basically uh let's get out of
here you'll add some thing right like
what do we want to build do we want to
build uh let's do I like the the idea of
the beneficiary that one I I I've got
this like prediction like simple
prediction Market that I want to build
but I haven't like fully thought it out
and I don't think I should just figure
it out on stage so I think what I want
to do is do like a beneficiary and set
it up so the beneficiary receives some
money and we have like a little front
end where we can update the beneficiary
just set something in a smart contract
and that whoever that beneficiary is
will will make the money okay so we're
going to have a public
address Ben oh look at that thank you
beneficiary okay and it's set to the
zero address right now if I were to
deploy deploy
this it's going to be the zero app that
is the beneficiary but we do have a
beneficiary now but it's the zero
address right so let's start that off
with I think I'm going to do uh let's go
to address Vision atg doeth I want to
make this guy the
beneficiary yeah that dude right there
okay and then I'm going to paste that
into the contract right
here there we go okay so now we have
this beneficiary and we're going to need
probably some function that lets us set
the
beneficiary and let's make
that um we have this owner I don't know
we're just going to make this public so
this is another thing I do sometimes
when I do these demos is I make a very
insecure app and deploy it to production
and I think I'm probably going to do
that here basically I'm going to let
anyone set the beneficiary and then I
could I could delete all this stuff
probably but I'm mostly going to leave
it but there's this withdraw function
here and in this withdraw function only
the owner can withdraw the funds and I
don't want to do only owner actually I
want to kind of get rid of this idea of
the owner and I want to require
beneficiary there we go man co-pilot is
on point all right so and then I want
the beneficiary to get the
money okay and let's go test it out
right like I just made some changes to
the code and like this is a smart
contract that's going to be moving money
around and I want to be a little bit
more confident that I did the right
thing there so that's what this like
core Loop is about is like testing those
assumptions I've said that so many times
I need to come up with a new phrase uh
but let's go set or let's go set the
beneficiary to now watch this uh
scaffold eth has these components out of
the box like this address input field
which are really nice because they do
ens uh resolution ens avatars you got
the blocky you have the address but
let's see what happens there okay I was
able to set vitalic as the beneficiary
and I think I can set anyone of you
right I can do
send now someone should be able to hit
withdraw and pull the money out right so
let's say a bunch of people came in here
and said hello world and they paid
01 and they hit the button and they send
it right and now the smart contract
actually has money in it right there's
$32 sitting in that smart contract now
and we just want the beneficiary to be
able to get in here and hit withdraw and
we want to make sure that money
disappears and shows up over here I
didn't watch very closely but I'm going
to assume uh no let's not assume let's
figure it out let's let's let's prove it
real quick uh let's set another greeting
send some more money in so we're at
988 I'm G to re reload that all right
9882 now if I
withdraw I'm watching here what like
that decimal right there right we got to
make sure that yeah 99 okay good so this
is not an exhaustive test right you want
to build a whole test Bank to make sure
uh this thing does what it needs to do
and there aren't any weird edge cases
where you're going to lose money or get
money locked up
but in terms of our little smart
contract I now am able to like keep
track of some beneficiary and anyone in
the world could set that beneficiary and
when they come in only the beneficiary
is able to withdraw the money and it
goes to
them it's a simple little app uh you you
guys are the solidity developers you'll
spend more time building things uh I'm
going to build a silly little example
but this you're deploying an an always
is on app that will last forever
possibly longer than you and it's uh you
know nation state level hardness so
don't get thrown off by my silly little
examples like there's there's world
changing Tech here and uh sorry for my
simple examples but we're just going to
build like this little beneficiary
system okay so it's sort of working it
does what we needed to do I can set the
beneficiary uh there's some other
functions here that I'm just going to
leave the Ben can do the withdraw what I
want to do now is go start working on
the front end so just to recap the the
beginning of this is about tinkering
with your smart contract and putting in
some some solidity here and then testing
it out over here in scaffold eth uh in
this front end in the de debug contracts
Tab and you'll do that for a lot longer
than I did I'm kind of like time boxed
here to a short window uh but you'll uh
you'll get in this mode of tinkering
with solidity and getting things right
here and that will take longer of course
but once you've got it and let's just
pretend I do let's pretend that I have
built my whole app I've tested it it
works great it's very secure I'm about
to put it on a blockchain forever uh and
it's awesome I'm gonna actually take
this import out too I hate deploying
that on chain and paying for it let me
take that out here there's there's some
nice console log debugging you can do
with with hard hat and and that'll spit
out over here whenever there's a console
log in your code you'll see it over here
in your blockchain and really nice for
debugging especially when you're like
why isn't this decimal working I thought
I thought I could do that yeah okay I
just wanted to take that out and
redeploy let's see if everything's happy
here okay we're happy so you'll spend
more time on your smart contract I just
did a quick smart contract let's pretend
that it's all good to go now we're
thinking about our front end what do we
want we have this beneficiary and we can
set the beneficiary and we can withdraw
I think I want some kind of front end
that lets me put in an address and set
the beneficiary and then another address
and then another button underneath that
that lets me like withdraw the money or
something like that so we're going to
read and write from the chain in our in
our front end and let's go let's go
start working on that so this is kind of
phase two you're starting to your
contract is pretty solid you may come
back to your contract and add some
events in maybe add some read functions
but generally the functionality is
working you're good to go uh so most of
the time now we're going to be over here
in react land and normally I would
definitely just prompt GPT I would not
be writing this code uh but I feel like
that's kind of like lazy like I don't
think it's I I it feels weird to be
prompting GPT in front of 30 40 50
people and be like bro please full full
files only
like I feel like that uh that is a weird
experience to do in front of a bunch of
people so it still makes sense to for me
to maybe just like Live code this thing
rather than uh ask GPT but if I was at
home and it was just me I would be uh
yelling at the GPT to get it to work and
not actually writing my components
myself but we're going to write them
oursel and we're not actually going to
write them oursel I'm going to go to the
docs and I'm going to copy paste so
scaffold eth we go to the docs there's
this tab over here called interacting
with your contract and there's external
contracts too but interacting with your
contracts is kind of the first thing and
here it is there's here's how you read
from your contract and here's how you
write to your contract and this is using
wag me so you could always use wag me
from VM and look at their docs and go
learn some things uh We've wrapped it
slightly because scaffold eth handles
some wallet stuff and other things so
it's it's using the use read contract
from wag me but we called our own
function use scaffold read we just it
takes a couple less arguments and we
fill those things in for you it's a
simple piece of exraction but we we
think it's the right right move okay so
what we want to do is read from our
contract we have this smart contract
that's keeping track of this beneficiary
and I want to display the beneficiary on
my page okay and so far all we have is
the connected address oh shoot I got to
go show the page so we've all we've been
on debug contracts the whole time but if
I hit home here this is going to take me
back to the page and I've cleaned out
all the stuff that was here so now it's
just down to this and let's see what's
uh welcome
to this is going to be called uh I don't
know Devcon Devcon app 3 con app
3 uh the Benny beneficiary
beneficiary oh man I didn't spell it
right come on help me a r y did I get it
oh there we go thank you okay and now
that should change over here there we go
okay and it's showing us our connected
address uh has that little blocky and
everything but now what we want to do is
read who the beneficiary is from the
smart contract and I've got that piece
of code copied already so I'm going to
bring it in right here and paste okay so
this is where I was talking about it's
really nice because scaffold eth knows
about your contracts so as soon as I hit
uh one of these buttons here uh let's
see I think I just open the quotes maybe
it's going to start
H it's not which button is it
h it should
autocomplete to whatever the value is in
the contract something is not right
let's see oh we need to import it here
we go let's try that is that what's
happening basically when I open this
quote it should give me there we go
that's what I want so this little list
is the stuff from my smart contract so
as I'm banging away on that solidity and
I write out my smart contract it knows
about all that stuff and it can set it
here so instead of going to the smart
contract and being like what's that
variable I want to read I'm kind of in
line just like oh I'm going to your
contract and then I want the beneficiary
and I don't think there's any arguments
and let's hit save and then uh we want
to name it
beneficiary okay and it's yellow because
we're not using it yet but let's go down
here and put a div o what what was that
I like that yeah okay but I don't want
to use the address component it yet I
want to show it off raw first and then
it will help us understand what we want
to do next okay so now we should be
reading from our smart contract whoever
that address is that is the beneficiary
and we should be displaying it right
down here let's go look and see how that
looks oo looks good right almost it it's
working it's displaying the beneficiary
but this is kind of a gross it's kind of
like a full address a full hex address
kind of ugly looking what you'd like to
do is do NS resolution and a lot of
things like that so what you do is
instead of just doing beneficiary like
this you wrap it in an address component
and this address component comes out of
the box with scaffold e there's an
address and an address input and a few
others and I can show you in the docs
where to find those if you go to
components here there's all those uh
handy components and uh to extend that
we have an extension system that uses a
lot of other components like the like
onchain kit from Bas so if if you wanted
like a swap component you could use the
extension system to bring in the onchain
kit and just add that in too so we have
like lowlevel components and then the
extension system will have like some
nicer level components and uh Kevin
Jones will show that off here in a
little bit when I get done speedrunning
this okay so how is our front end
looking let's
go we have oh doesn't that look so much
nicer let's let's do that again so
whoops so this this is like at the eye
doctor you know number one or number two
number one number two doesn't that just
look gross and then when we do just this
quick change and we hit save and this
looks so much nicer I love it okay so we
are we're displaying who the beneficiary
is and we know who the connected address
is and then okay now we need to uh let's
see we want to write to the chain and I
think maybe we could H maybe let's just
make uh withdraw button first I think
that's the move that's the move so let's
go back to scaffold e docs so now we
want to write to our contract we're able
to read from our contract but now we
want to write to our contract so what
you do is you set up this like async
contract writer and that goes in with
your
hooks there okay and that's going to
talk to our contract it's already named
your contract o we need to install
it okay and then write your contract
async Okay so we've got this object now
that we can write to so then here is a
button I'm going to copy that button
exactly and I'm just going to use it and
let's go down here maybe set up like
some
divs uh let's do a div first there we go
then the button then hit save okay so
what is this doing it's writing to the
contract and it's calling set greeting
so we don't want to do the greeting
though what do we want to do we want
to call what I don't even know what set
beneficiary set greeting withdraw I
think we want with draw let's go with
with
draw okay and then there's no arguments
or value I think I can Trash both of
those and let's see call this
withdraw and hit save and let's see if
we have a button in our app now who get
out of here yeah cool now we have a
withdraw button man my front ends are so
ugly scaffold e does as good as it can
to like make this look nice but I just
tear it up and it looks terrible okay uh
can I hit withdraw here
it can't because I'm not the beneficiary
right because Austin Griffith is the
beneficiary I need to set this dude as
the beneficiary and we'll make some
front end to do this but let's just go
do it in the debug tab real quick just
to test that this withdraw function
Works yep it does Okay cool so now we're
reading and writing from our block from
our smart contract right we kind of
tinkered around with our smart contract
in phase one and we kind of built the
app that we wanted to build in terms of
the solidity like I said you might come
back and add some events but you're
pretty much done there then we kind of
move over in the front end land and we
start tinkering with how we want our
front end to look we've read the
beneficiary from the smart contract
we've used wagm to tell us who the
connected address is and then we've
written to the the chain with this nice
withdraw button here so the last thing I
want to add here is a little address
input field that lets you put in a new
beneficiary and save them and I think
let's see how am I going to do this
maybe down here let's just make another
div down here it's kind of
weird uh let's see I will want no I want
an
address I'm just going to go copy paste
it from the docs just go copy paste it
here we
go normally I would uh prompt the AI
with like examples and just have it
write it all for me but let's do it this
way I want address input okay so I want
to grab
this okay it looks like there's a state
oh yeah yep I want all that I want that
right there so you have some kind of
state over
here Boop and then you have your address
input right here on change it'll set the
address okay let's see how this looks do
I need to install
this yes I think I do let's see how
we're looking let's see what our app
looks like now
now uh oh uh oh U State we've got US
state is not defined we need to go to
that U state from react and make sure we
import
that
oh open Apple period there we go react
bring it in let's go let's go all right
how's our app looking now o there we go
okay there's a semicolon floating around
there I don't know what that is I'll go
get it in a second but now you should be
able to type in vitalic doe and you
should get that ens preview you should
get boy I need some padding this this
this app looks
terrible uh how do I do that maybe some
like class
name yeah oh we might even Center the
div what does that
do oh wow yeah okay let's get rid of
that weird uh semicolon too I don't know
where that's coming from uh right here
we don't need that okay and I kind of
like this class right here I'm going to
bring that and I'm going to give that to
all these other divs just so this thing
starts looking a little bit better one
for
you one for oh maybe oh oh oh maybe we
do let's do a div here and do that class
name yeah and then close the div here oh
I think it tried to close it for
me the AI can just write code better
than I can I just I shouldn't be doing
this there we go doesn't that look nice
H we need a little padding but I'm gonna
I'm going to go with it boy this is a
really ugly
frontend okay so we have the withdraw
that's working uh we have the address
input that's working it's tracked in
state I think what we need to do is one
more WR function where we uh set the
beneficiary so we're going to need one
more write function I'm just going to
copy paste uh actually that's all good I
can just use that right async so let's
go get another button from the docs oh
here I have it right here I'll just copy
this button here
right this
dude okay H I'll take the whole
div okay and we're going to put another
button underneath this and this is going
to set the
beneficiary and then for the function we
need set
beneficiary and there we go it wants to
give us some args that's what we want is
a dress the thing that we're keeping in
the state it is okay I think think we
might be happy let's see what we have
here okay well it looks ugly but let's
see can we set vitalic as the
beneficiary boy a little padding would
go a long ways there yeah it worked
right now vitalic is the beneficiary all
right let's try that again at. set him
as the
beneficiary there it is okay so it's
working all right uh and then if you are
the beneficiary like this dude
is
then once that updates to that you
should be able to hit withdraw and that
should work uh but if you're not let's
go back and do atg e again set him now
if I hit withdraw it should fail right
because I'm using the burner wallet yep
not the beneficiary okay
cool
um just want a little padding here it's
just driving me nuts let's see
p yeah there we
go there and there
how's that look yeah it's a little
better it's still
ugly okay and and another thing we might
do is only display the withdraw button
if the uh connected address is the
beneficiary like we should probably only
show this withdraw button if these two
are the same address and here's a great
chance to just prompt the GPT to do this
but we could say something like uh
please only show
the withdraw button if uh let's see what
do we have if
beneficiary
is equal to Connected address right
there we go let's
go yeah thank you and then it's just
going to give us the
code and we apply that and save and
let's go see now let's test it out out
okay so it looks like that withdraw
button is gone now that's okay but if we
set us to the
beneficiary does the withdraw button
come back that's what we want to test
yes it does all right GPT you got on the
first try thanks bro all right awesome
so this is kind of we're we're nearing
the end of phase two basically we've in
phase one we worked on our smart
contract we tinkered with it we went
back and forth we got our solidity right
in phase two we did a lot more react
kind of getting our buttons things wired
up we're reading and writing from our
smart contract phase three is now
deploying we want to put this thing out
into the world and to do that we'll have
to deploy both the smart contract and
the front end so to do that we're going
to need to yarn generate and yarn
generate will create a deployer account
so you don't you want to be very careful
with these deployer accounts you really
don't want to be like copy pasting
private keys they really should be like
living encrypted on your box uh so so
when we generate this account this is
like a one-time use account basically
like I'm only this this account should
only ever have enough money in it for me
to deploy this contract once or twice so
there's my uh address then I'm going do
yarn account to show
it okay there we go and now I'm going to
send some money in there and we're going
to put this thing on a live blockchain
let's go okay let's see I'm going to use
a Punk
wallet uh app built with uh scaffold eth
Let's see we had it on optimism
yesterday base let's see if I have any
base in here I think I'm going to deploy
this to base okay so I just select base
I scan my QR
code and I'm going to throw uh dollar at
it right it should be enough shouldn't
be too expensive oh time to retweet
shutter block I got
you yeah let's go re retweet on stage
okay so hopefully I just sent some money
here actually yeah I did okay let's do
yarn account and it'll even like give us
our balances on the different accounts
in his base in there
somewhere Local Host arbitrum let's just
see we're hoping I have some base in
here
somewhere ah there's only oh there it is
yep we got that we have
03 E Okay so we've created a uh
one-time use deployer account we've put
a dollar in it and now I'm going to do a
yarn deploy just like I was before but
instead of yarn deploying locally I'm
now going to do the Das Das Network and
I'm going to go with base this time now
hopefully this works but let's see what
if it complains about
anything we may just put a smart
contract out on a live
Network that's looking pretty pretty
good y'all Okay cool so our app though
still says hard hat up here we need to
get in and change our app over to base
and what that means is the whole app is
going to change network so right now if
I click on this dude's address it's
going to take me to a local block
Explorer which is cool and nice for
local debugging but this is also really
awesome as soon as I set this thing to
Bass then all of my address components
all throughout the app will now link to
the Bas scan block Explorer let's do
that real quick so I'm going to hit open
Apple p and find the scaffold config and
from the scaffold config I'm going to
change it right here and you can even do
like a comma separated list here you can
have multiple networks like you could
deploy your smart contract to optimism
and bass and let your users pick which
one they want to use even it's pretty
nice uh but we're just going to go with
base now watch this as soon as I hit
save here the whole app now switches
over to base and it doesn't let me use
burner wallets anymore
and that uh faucet is gone right by just
setting that one thing from Local Host
to base your app now knows that it's
like oh we're you know it's it's time to
sit at the big kids table we're going to
go use like our real wallets and real
money here and let's do
that okay yes there we go okay so we are
now talking to our live contract on base
but we're still at Local Host so a
second step that we'll get to in just a
second will be to deploy that the app
live to versell uh but first let's just
Tinker around and make sure everything's
working uh on chain correctly uh so
let's see can we set vitalic to the V
beneficiary real quick just to prove
that we can and I'm actually going to
pay real money to do this right I'm
going to pay like you know a fraction of
a
penny no no more more like 32 cents dang
there we go but and now hopefully
vitalic will become the
beneficiary I'm going to hit reload I'm
impatient there we go cool and it's
working okay and our withdraw button
disappears too looks pretty good okay so
then let's I I don't know let's set me
back to the
beneficiary and then maybe let's put
some money in the contract and then
withdraw from it make sure everything's
pretty solid and then we'll ship our app
you know what actually I'm going to
start shipping the app now because it
takes some time so uh kind of the
commands if if we go through the whole
stack of commands here we did yarn
install yarn chain yarn start uh to get
your account we do yarn generate and
then yarn account uh and here we're
going to do yarn this is the best
command out of all of them versel YOLO
Das dasr like please do not check
anything just ship it and that's what
we're going to go with
here yes
got to do the Choose Your Own Adventure
here of like picking the scope and the
account and all that o it's very
slow
no
no Devcon
3 okay so that will take a couple of
minutes to ship but now that it's
shipping it's nice because we can go
back can Tinker around with these these
few mechanics that we were worried about
here so can I set me back to the
beneficiary take basically take control
back uh of the
contract and then uh let's maybe even
send some money into it right let's do a
greeting that says hello
Devcon we nope I'm gonna do hearts
hearts hearts
classic hello Devcon hearts hearts
hearts and I'm going to send in some
money and technically this money could
be stolen like anybody out there could
go to the smart contract set themselves
at the beneficiary and hit withdraw I
don't think they'll do that but maybe
they will let's find out what
happens okay yeah $3 to be had if you
want to steal it you'd have to go find
the thing out on Bas scan or something
like that right like if we go look at
the contract here it's probably not even
verified yet but remember that contract
component all I have to do is click here
and it takes me right to the base scan
right the correct block Explorer for
whatever chain you're on and here is the
Smart contract but it is not verified
yet yep okay so I would need to verify
the contract before anybody is probably
going to attack it I don't think anybody
is going to figure out how to attack it
right now except for maybe you guys out
here which kind of have the alpha on it
so please come steal it like I I would
happily uh lose my $3 to anyone in here
who wants to steal it because that means
you guys are way ahead of the game and
really paying attention uh let's go here
uh Devcon hearts hearts hearts we got in
here NOP I need to say hit send here
wait didn't I hit send there why isn't
there any money in here let's reload
this real
quick okay maybe I didn't hit send I
wasn't paying attention let's try one
more time Devcon no it's right there
it's right there hearts hearts hearts
premium is true oh man what if someone
already stole the money like it's not in
the
contract
what yeah someone did look at that look
at this address this is not my address
this is someone else's address someone
got in and got it right away wow that's
really impressive that's neat okay well
someone stole my
$3 all right all right that's that's
pretty awesome to be honest like I uh
that's really cool so that's like
probably like a a bot that's like
watching for contracts to get deployed
and looking at the bite code and man
that's really
cool ah I know I don't even that's so
cool like I don't even I'm like thinking
about how like we could we could
definitely defend this right we could
set up a require statement here that
says only you know certain people could
set the beneficiary there is this idea
of this owner and we could say the owner
is the only one that can set the
beneficiary let's just do that let's
just do that all right so we learned a
lesson here about the Dark
Forest okay you know what I don't care
no we're shipping it this is this is
more fun like this let's just leave it
how it is the app is going everything is
good uh kudos to whoever is running that
bot and taking my $3 I'm probably going
to send them a couple more bucks here
for a little bit but check this out so
now our app is live and you can go to
versell and set up a domain on this
thing so within 30 minutes you can kind
of roughly crank out a smart contract
get a front end going and then deploy
the thing not just to base but also to
verel and there is a live URL so yeah
within 30 minutes we kind of built this
whole app and I'm going to go donate
another $3 to this uh attacker just cuz
uh I don't know that's that's pretty
cool let's see what are they doing let's
go look at this address real quick I'm
going well look at all those zeros oh
this is definitely a some
nerd they have how many is that that is
impressive yeah it's like an me bot that
has a bunch of leading zeros that is so
cool oh it's a contract we can even go
dink around with it oh maybe not
okay anyways uh let's let's set the
beneficiary back to hg. eth and let's
see if it like front runs me or what it
does that is so
cool uh oh here I have to I don't know
why I have to keep keep hitting this I
don't know if I need to like hard code
the gas limit or something metamask is
just not happy with me with gas
okay and now hopefully I am the
beneficiary and it shouldn't it
shouldn't steal it now right like
there's no Financial incentive for them
to set themselves as a beneficiary right
now what they want to do is wait until
there's money in the contract and then
almost like in a batch transaction set
themselves at the as the beneficiary and
sweep the money all in one transaction
automically and basically like you only
do that if you wo Portman you only do
that if you uh like can make the money
right so the me bot is probably sitting
there like we're going to do all of
these transactions and we're only going
to execute them if it works works and we
make money and if anything else goes
wrong or we don't make any money don't
do it right so as soon as I put money in
here it's going to disappear again which
is pretty cool but not great but pretty
pretty neat uh let's see what man really
I feel like we could if a bot is that
sophisticated I might like start making
this as part of my like curriculum where
actually you like know that a bot is
going to handle something for you and
you can have them like be like rolling
the dice for you and some game or
something like that I'm going to think
about that okay here we go
uh oh please take my
money Mr all it could be Mrs too yeah
right right I'm G say miss m all
zeros all
right right right it needs to be right
right so it's costing about 30 cents to
set the beneficiary right so then
another transaction maybe 60 cents like
it's got to be yeah within like a dollar
or something we did 0.00001 last time I
think and that was enough maybe we do 05
just to see let's see what this
does it would be really funny to like
calculate it just right and see like at
what point the bot takes
over but yeah here I go I'm gonna donate
another couple bucks to this bot
probably okay let's see there's the
transaction and does the money stay in
the contract or not let's see I'm
assuming it will be immediately swept if
Yep they're the beneficiary already that
is so cool oh man I'm G to use this for
something that is neat okay so this is
kind of the stack this is scaffold eth
this is how you can get started building
apps uh this is the way you would go
about tinkering with solidity kind of in
our first phase we used solidity by
example uh we wrote the solidity how we
thought we wanted it we left it very
very accessible and uh attackable uh but
you'll do a better job of that when
you're building real contracts don't do
what I do uh build a good contract in
phase one and then in phase two we kind
of built out the front end and then in
phase three we deployed the whole thing
so now uh I think I'm going to hand it
over to Kevin Jones to show off
extensions in a little bit but let me
just like pause here just to see if
there's any questions maybe we could do
like four minutes of Q why four minutes
four no a couple minutes of Q&A if
anybody has any quick questions and and
in the meantime I'll hand it over to
Kevin Jones and he can do the same thing
but he's going to use an extension
system probably graph or onchain graph
yeah that's what got got a sh got a sh
okay any quick questions yeah what was
the the yarn command to deploy it was
yarn deploy D- Network base oh the
versel oh yeah okay yeah and also this
is in the docs but it's versel it's yarn
versel colon YOLO space--
prod and that's what uh shipped the app
to for
sale
yep yeah yeah yeah I did I'm pretty
impressed I like that means that someone
is watching base for contracts to get
deployed they're decompiling the bik
code and they're looking for aack Val
vors where they can make money and
they're even doing this like batch
transa let's go see let's go see if he
batched the transaction or not she it
could it could let's see where is
it yes you do so uh yeah so when you
deploy a smart contract to any live
Network the code isn't out there yet you
have to go to the block Explorer and
upload your code and then on their side
they compile it and make sure it
compiles to the same thing and then they
display the code so if I to go look at
like
we what say one more
time the the block Explorer needs to
yeah so see how this contract has like
the green check and we can get in there
and actually like see the code for what
we how it
works yep yep so they have to verify
right because like they couldn't trust
you to do the verification you you send
you can send any code to them but it has
to compile down to the exact bite code
that's on chain for them to display that
codee up here does that make
sense uh it's not free I don't think
it's it's just like a really nice Cloud
hosting service uh I think it's probably
less decentralized we're a bunch of
Cipher punks here and versell is great
for quick front ends you can even like
this code is all open source and
forkable so if anybody wanted this code
or to dink around with it they could
just deploy their own front end if they
wanted so like you could create infinite
copies of this front end so so to me
it's like good enough decentralized but
also like you probably want to if you're
hardcore about this deploy your site to
ipfs also and have it live in some kind
of distributed storage that people can
access without even if versell goes down
you know you can have that stuff pinned
in ipfs but yes versel is a hosting
service I think we pay for it build
Guild has a paid account but you can get
started probably pretty cheap lots of
lots of guys can answer that question
better than I can here too we'll have a
whole day of build Guild people here so
uh like come just come hang out and ask
ask them some more and we can show you
around for sure okay any last questions
before I hang it out off to Kevin
Jones I'll be up here again after lunch
and we're going to do speedrun ethereum
we'll go through your first five apps on
ethereum yeah what was your
question there is a verify command but I
think you have to have your API key and
I don't want to like go digging through
my credentials right now but if I do
yarn let me try it
yarn
verify D- Network base let's just see
what happens here my guess is it's going
to say you need an API key yep I think
so there probably is some like base scan
API that I need to put into my config
but I don't want to go like digging
through that right now and expose like a
key in front of everyone uh
but I think yarn verify probably without
even anything on the
network I don't yeah it's not going to
work yeah this is this is trying to do
it locally but yes yarn verify is the
command
okay you how you guys feeling feeling
good you want to go let's go all right
all right thank you all I'll be back in
a little bit we'll be in this room all
day today this afternoon we're going to
be playing a CTF Capture the Flag it's
going to be awesome highly technical
we're going to give away prizes probably
like thousands of dollars thousand a
thousand of dollars we're going to also
give away a node we have a Precinct
build Guild node so if you go to client.
build Guild we've made our own build
Guild client it actually runs uh gu and
Lighthouse and these exist kind of all
around the world and it's like this
opt-in system where you can become a
distributed RPC for build Guild uh but
we're going to be giving some of these
away so you can get a box from us and
take it home and plug it in and it's
going to look like this it's going to
have W and Lighthouse sinking
automatically and lots of nerdy desktop
stuff okay thank you very much we'll be
here all
day for
[Music]
thank you so much
ohy hello welcome can you guys hear me
okay yeah seems a little low but that's
all right all right cool thank you you
guys so much uh my name is Kevin Jones
uh I actually work in Devil for the
graph so I work on the graph protocol uh
which is totally appropriate because I'm
going to show you guys the graph
extension for scaffold eth and talk a
little bit about the extensions um I'm
also core member of the build Guild do a
lot of workshops uh with the rest of the
crew here and uh yeah so um if you that
was an awesome Workshop by uh Austin uh
he covered really all the basics of
scaffold Le so I won't focus too much on
that but we will talk uh specifically
about uh some stuff that's on the on the
actual doc site so if we go to the docs
uh there's a section here for extensions
so you can come there uh it gives you
some uh basically like kind of overview
of what the extensions is you can have
like a GitHub repo with the extension
configuration and then you can just
execute it with this- e flag um and so
there's a lot of like Community
extensions if you go to I think it's the
build Guild website so if you go to
ble.com uh and you kind of scroll down a
little bit uh there's a section uh here
at least there used to be maybe it's on
the scaffold e website actually let's
see yeah here it is so scaffold e uh
there's a whole area here uh where or
like check out available extensions and
we did a hackathon I think not too long
ago so there's a lot of really cool ones
that have been built uh the very first
one was the subgraph one which is really
cool it's basically got a um you know
scaffold one of the cool things about it
is it's this very local development kind
of environment where you're just like
able to hack away without pushing
anything to a test net and so the sub
graph extension uh is exactly that as
well we actually can spin up a virtual
um infrastructure of the graph on our
machine test our subgraph configurations
just all locally using hard hat so we're
going to show it off and so what it
looks like uh but there's a bunch in
here right there's one for Ponder if you
prefer that and then there's like erc20
as Austin said there's the onchain kit
which is cool it's got a swap extension
uh so yeah and you could write your own
we'd love for people to build on that um
if you go back to the dock
and you go to extensions there's a list
of all the available extensions that
kind of we supported building uh the
build Guild has supported but you can
also get the list from you know the
scaffold teth website and then here
there's an extion U an explanation of
how you create your own so I personally
have never created my own U it's
definitely on my to-do list but I think
it's pretty easy I think it's very
simpler to how you create a a package
with the npx command you can also do
that uh using this uh extension
development utility so you can come in
here you can either uh clone the
repository or so you do need to clone
the repository which it's a special um
Branch here it's under the same scaffold
eth account but it's called Uh create
eth uh so you can clone that create eth
package install all the dependencies and
then run this kind of like build script
uh and then there's a CLI that allows
you to create new uh extensions so the
subgraph extens or the uh the extension
system is really cool um it really
allows to kind of make these custom
reusable um environments all built
around scaffold eth right so let's just
take a look at the the the graph one so
it used to be that we would have like a
special branch of scaffold eth but we're
moving away from that model right we're
we're moving to this extension model
which was designed by the core uh build
Guild team um and it's you know
basically this create eth uh extensions
repository so you can think of it this
this way there's the create eth pack
pack AG which is the way that you
install uh scaffolds with npx right um
and then there's the Crea extensions
which is like if you want to build your
own supported extension in the build
Guild Community you might do that so we
have all of our ones that we worked on
here and uh you know the very first one
again was the subgraph extension so if
we come here and go to the branch and
choose subgraph there's this nice read
me that kind of explains it right uh
this is read me I wrote which kind of
shows you exactly how to set it up so
anyone who wants to follow along can do
this but I'm going to actually spin it
up and show you guys how it works um
show of hands here who is hacking at the
hackathon few of you just a few huh um
okay so you know there is a graph Bounty
so one of the uh things I always tell
people is you could qualify for the
Bounty with this package um and use it
as kind of like a good starting point uh
who here has used the graph before who
who has used created a subgraph few of
you guys few of you who here knows what
the graph
does few of you some people from the
graph are here which is great um well
let me kind of preface it this way first
real quick because I think it makes
sense just to understand the context
this is not a talk about the graph but
it makes sense to why we would use this
graph extension scaffold e is like this
right it's got a front end it's got a
back end it's got all this cool
boilerplate code written it's got these
um you know all the proper packages you
need to build and create a a package um
or an app pretty
rapidly um and it's really the the
quintessential way that applications on
ethereum have been written pretty much
uh since Inception um but there is kind
of like this like missing Gap when it
comes to reading data from the
blockchain now scaffold eth is really
good it has these really cool like Hooks
and uh be able to like get the data that
you need just if you want to read it
directly from the you know RPC provider
but if you want to get like lots of data
you know if you're building a defile
application or if you're uh building
something like an nft platform with lots
of users uh the more users you have the
more scalable your data issue is so
using something like the graph is kind
of like a a solution to that problem so
you can think of it like this we're
still going to use scaffold eth but
we're going to use nextjs and hard hat
and then in the middle we're going to
have this kind of uh graph
infrastructure so we're GNA like we're
going to simulate this all inside of
Docker so the only difference here is
we're still using all the packages that
Austin used but we're we have a a a
layer that's going to run in Docker so
uh let's just spin it up so you guys can
see this is how you do it so you just do
npx create d e at latest and so we do
npx create D at
latest - e subgraph so same kind of
method we just use the MPX create e
command asks us what we
want my internet connection locked
did I do
something
uhhuh like like a
VPN oh tether oh I see what saying I
have a tether yeah let's do this let's
just try VPN
happen almost got disrupted right now
that was very scary I was like I've
never seen that error before Okay cool
so it's working now thank you so much
see build Guild homies got my back all
right so um it's going to do the same
thing it's going to give you this kind
of like Choose Your Own Adventure method
right so we're going to do I don't know
like um uh Devcon sure uh hit enter and
same thing we get to choose a package
should we support both uh I personally
like hard hat just because it's been
around for a while and I'm just so used
to writing the stuff in typescript but
you might choose Foundry like Austin
said if you want to write solidity test
it's the way to go uh or you might just
not use a chain at all maybe you just
want to use the graph for like doing
some data stuff you could do that as
well um so it's going to go through
install the packages for us um again
it's going to scaffold out an
environment now Austin mentioned that
scaffold e is this kind of like mono
repo right it's got the hard hat or The
Foundry and then it's got the nextjs
package well this is just going to give
us one additional package right it's
going to give us this additional folder
called subgraph right um and it's going
to lend that by going through and
basically using you know this uh where
is it right here using all the boiler
plate code that comes in here so if we
go to
extension and we go to
packages and we go under there you'll
see that there's this new subgraph
folder right so let's give it a second
on VPN is probably even a little bit
slower uh I'm using a cool tool called
t-mo just lets me split my screen up uh
this doesn't obviously need to be that
way um we can just do that in different
windows but let's do that so
Devcon CD Devcon okay cool and while
that's loading up let's just take a look
at the code because it should at least
be there for the most part okay so we
see this packages folder and then we see
there's an additional folder so in this
case we have this cool extension that we
can use uh called subgraph we can go in
there and we can start to see what's
available to us so it's the same exact
thing uh for scaffold eth we have the
contracts folder we have the same exact
sample contract and then on top of that
we have the nextjs folder with the same
exact code the difference is we also
have template in in some cool uh
additional code so an example would be
like in this case we wanted to have this
like subgraph uh route so uh scaffold E
uses um the app router functionality of
nextjs so we have this subgraph fold
and then inside of there we have this
dedicated folder uh or this dedicated
page with all the uh each the the the
code for the front end and I you'll see
what this looks like in a sec as soon as
it's done installing the packages uh
it's a little slow right now um and then
let's take a look at the graph so
without doing a full overview of the
graph I just want to kind of explain
like within a few words what a subgraph
is a subgraph is really just an API
right it's basically a uh an API layer
for any kind of blockchain data right
it's this middleware layer um and so we
basically want to create what are called
subgraphs to organize the data so just
like we have uh a contract here called
your contract and we have this concept
of updating the greeting which Austin
showed off right where you can like
update the greeting pay some gas pay
some value that greeting has an event
right so it has this basic event so that
event says who set the greeting what the
greeting was whether they paid some
value or not true or false and then what
that actual value was so this event is
kind of like what it's like a log on
ethereum right we want to keep track of
something and we probably want to
display that in our front end um so we
could just query that directly using
scaffold eth there's a there's a hook
for that if you go to scaffold eat.io
and you go to interacting with your
smart contract there is a uh event
history and then there is also a watch
contract event so there's two two ways
you can get information lots of
information or if you want to just like
watch all the the events that come off
you can also do that so it's easy to get
like small bits of data but if you want
to get like all of the events that
happen since you deployed your dap maybe
you want to get thousands of events it's
not effective to use something like this
because it's going to be too slow right
so uh we can take this event data and as
it gets emitted off of the blockchain
right here right we can index it that's
what the graph is it's an indexing
protocol right so if we go to that
subgraph folder and we go to the
subgraph configuration it it's already
pre predefined for us this example comes
with the network we care about and the
address of the smart contract it also
comes comes with the concept of what are
called entities and again we're not
going to go too far down that rabbit
hole but it's how we want to store the
data and then we have this Handler and
all of this stuff it's three it's three
files it's the configuration file it's
the uh schema which is like how we store
the data and it's the Handler which is
like how we process the data which is
run runs an assembly script you don't
need to understand that stuff but that's
what a subgraph is it's those three
things created to process data so if we
want to write our own custom subgraph we
can um but we're just going to use the
one that comes with this package for
Simplicity we're not going to change the
contract at all we're just going to show
how everything works so scaffold is done
installing so let's go up here let's go
into the Devcon folder let's do yarn uh
start oh sorry yarn chain sorry yarn
chain yarn
start and yarn
deploy now the difference with uh this
package because we have a third um you
know package that we're using the
subgraph package we also want to have
another window right so we still need
our chain we still need our front end we
want to do our deploys in this window
this last one is where we're going to
simulate the graph in Docker okay now
you don't need to know what Docker is
but uh Docker is basically a
virtualization layer that allows you to
Virtual run what are called containers
uh it's kind of like running virtual
machines but they're very very small uh
and so we're going to use the graph's
power or sorry the docker's power to do
that uh inside of what are called docker
containers again you don't need to know
that but to do that all we need to do is
do yarn run- node so that's going to
there's like a a file that's on there
called a Docker compos file that has all
the configuration defined for creating a
graph uh node on your machines and all
the infrastructure you need so you need
an ipfs node and you need a uh database
postgress database so it's it's pretty
much all configured you don't need to
change anything so we're doing that now
we're spinning up everything inside of
Docker so you need to have Docker
installed and that's just one example of
one of the extensions uh I think it's
the most relevant especially if you're
going to hack at a hackathon and you
want the graph Bounty uh who who doesn't
like bounties right so use the graph
graph one so you know it's working um at
least the graph uh infrastructure is set
up when it says downloading latest
blocks from ethereum so we have right
here so that basically means that the
graph node so graph node is the the the
thing that processes data it's what all
the indexers run it's a rust based
implementation of like data indexing uh
that is all running when that says ready
to download uh data's blocks so so we
have our chain we have our front end we
have the graph running now we just need
to uh deploy our subgraph so we again we
already have a subgraph that's here and
this subgraph keeps track of all the
events that come off of the greeting and
when those events happen it takes in the
data types and it processes those over
whatever Network we want so this is
Local Host it puts those uh data type
ENT as objects or I should say values
into a database in a certain data type
which are these and it basically stores
them and makes them available via
graphql so that's the power of the graph
is it creates an API for event data
which is super
powerful uh and it does that using
assembly script mappings right and so if
you come into your this assembly script
we'll see that nothing's actually uh
been generated yet so we need to
generate these types we use assembly
script with the graph which is a subset
of types scripts so it's kind of like
types script but it's a little bit more
um simple you can't do like Imports of
just standard types script libraries
needs to be an assembly script library
but it's super powerful in the sense
that you can use the type safety of your
Imports so we need to generate these so
let's go to scaffold eth so if we go to
scaffold eth and let's go to the
subgraph extension by the way how much
time do I
have any know no like 30 minutes 20
minutes something like that okay uh if I
need to stop just let me know all right
so this subgraph tab here is is this new
tab we get right because we're using
this new repo we've we've kind of
templated in uh some some code and so
now we can do some additional stuff so
you'll see on the bottom is I there's a
very basic read me that shows you how to
get started so to spin up the the
environment you do yarn run node I
already did that to create a subgraph
you run yarn local create to deploy your
subgraph you do yarn local ship to build
out assets for your front end you run
yarn graph client build because we use
graph client and then to clean up the
database if you need to you can clean
the node clean node so it tells you
exactly what you need to type so let's
do that um we don't have any data in our
contracts maybe we make some uh let's do
some things real quick let's send some
greetings uh let's do uh yo
Devcon and send we don't have any funds
let's get some some value all right so
Kevin was here I'm just sending a couple
things so we have that thank
you cool so I've sent a couple things
but they're kind of like lost in the
ethos of like ethereum like how do I get
that data well we could use the hook
right to get that data but if there's
like thousands of of events that have
happened well it's going to be pretty
clunky right so let's use the graph cool
so the next thing we need to do is we
have the infrastructure set up to
simulate the graph we're going to do a
yarn uh local DC create like
this boom so that's going to uh create
like kind of like a a skeleton
environment for our subgraph that's just
like a very simple command you need to
type that once then we're going to
actually like generate the code
build uh the subgraph and then try to
ship it uh with a few commands so we do
that by doing yard local
ship so what this does is it generates
all the types for the subgraph it builds
the sub graph into a wasm module right
because we use wasm in the graph and
then it ships it to the uh graph node
instance and it puts all the stuff into
ipfs that it needs to and it creates a a
graphql AP Pi endpoint for you and it
just does everything uh using the graph
infrastructure and then it asks you what
version you want to uh use as well so
just like you have versions in your
software your subgraph evolves over time
you add a new event to your subgraph
then you add a new version right so
let's do
0.0.1 hit
enter it's going to check if there's any
errors in the code right if there was
like something missing that was not
properly generated then it's going to
give you an error but it deployed
successfully we can see here that the
graph is indexing data cool let's go
back so uh first of all we'll go to the
subgraph tab and there we go we get the
commands or the data here on the bottom
um I'm kind of surprised it actually has
the data already um if you make change
to your subg graph you might have to
regenerate the types which is doing this
uh we use graph client which graph
client is like a front-end framework
it's it's similar to like Apollo uh or
um I forget the other one URL uh
I like graph client because it has it's
very simple you can do some interesting
things for like um working with graph ql
it's just a little bit more optimized I
think so we use graph client so there's
this additional command that you might
need to run to generate the types but as
you can see the data is already there uh
and so if we look at that code real
quick let's go to the ne uh nextjs
folder app subgraph there's the main
subgraph page and you'll see here we
create a table so we do this greeting
table which is down here at the very
bottom right here so we go to a
greetings table and go to the components
of that greeting table here it is so we
use uh we're doing using some state
where we have this kind of uh query that
we do by calling a get creating document
which is probably somewhere in here here
it is it's just a graphql query so if
you're not familiar with graphql graphql
is like a query language that allows you
to to query exactly what you want in a
very optimized way for front ends and so
we are using the graph for that and so
um we're using this kind of custom query
that gives us all of the data back in
one single HTTP query right instead of
calling the RPC over and over and over
and over and over again to get all the
events um we're just doing it in one
simple query and we're also getting uh
the greeting count and the address of
that uh of that person that sent the
greeting so we're getting a lot of
Advanced Data
just with one query
right uh and so yeah so what else do I
want to show off real quick so uh oh and
also it's going to give you this like
URL uh which is right here so let's grab
that real quick real quick I want to
show that off uh so if we go
to
Boom time 12 minutes I have I have
enough time to actually probably go over
the subgraph config if anyone's really
interested or I can ask questions answer
questions about extensions but let's
let's first of all I'll show this off so
this is called graph iql graph iql is
kind of like this um way that you can
like test your graphql configuration so
again the graph uses graphql heavily
right that's that's what we rely on for
people being able to access the data in
a in a reliable way so if we click
Explorer here on the left and sorry this
might be hard to read but we can see
that there's these data objects that
match what's in our schema so these are
kind of like what's in the database
basically so if we look at this the
graph graph ql configuration for the
subgraph and go to the schema these are
going to match so in our case we have
this greeter and so we have greetings
that happen and then we have senders
that send those greetings and we kind of
like build a database for all that stuff
and so all this data is what we're
storing in postgress and exposing via
graphql and that's what you're going to
see over here is these these entities so
if I want to get all the greetings maybe
I want to get like the first I don't
know one th000 for some reason and I
want to order them by the uh when they
were created and I want to do it
descending and I want to skip over the
first hundred for some reason or maybe
the first thousand you know you have a
lot of flexibility here I want to know
when they were created what it was the
ID and I want to know who sent it what
their address was and how many they've
sent and then I can hit play and I can
get that data back that's not working oh
because I skipped over let's not skip
there we go
so because I skipped the first thousand
there was no data but here we go this is
all my data so this is a graphql query
for uh that I'm that I'm creating and
this is the response that I'm getting so
what we're parsing in our front end on
over here um sorry in in here is the
data that's coming back from the Json
response over
graphql
cool hopefully that wasn't too fast that
was good um so I can also talk a little
bit about the the graph configuration
but why don't we like pause for a second
and see if anyone has questions first uh
about the extension system uh or about
the graph or anything that I uh talked
about right now so
far any
questions ber
ber no okay then let me let me talk
about the graph q a little bit uh the
subgraph configuration a little bit more
um definitely we we would love for
people to to build cool extensions so if
you're in the crowd and you are you know
working on a protocol that can take the
the scaffold eth and and create an
extension for it come talk to us we'd
love to hear what you want to build uh
and we can get it listed maybe on the on
the on the docks um but yeah please
please uh let us know if you think this
extension system is useful and like if
you would like to see any features or
any if you want to see a cool extension
built let me know uh but let me talk a
little bit more about the graph so
because I think it's probably the most
confusing thing of everything I just
talked about um but I want to cover this
part a little bit more because I didn't
really go too much into this assembly
script um one of the powerful things
about the graph is it allows you to uh
do some like interesting things like
during the time that an event happens so
the primary way we get data is events we
also have the ability to do what it
called substreams where we can get like
more block
data um but in this case uh the cool
thing about about assembly script is
again it's a subset of typescript so
it's pretty easy to to to understand but
let's walk through it a little bit so
when we uh write our our contract just
like scaffold eth generates the ABI
right to be able to interact with our uh
contract well the same thing goes for
the graph it needs uh the ABI as well so
we take the ABI and then we generate all
of the assembly script uh types that we
need
and store them into these files so in
this case there's a generated folder it
has the name of the contract and then it
has the schema types as well so how we
want to store the data so this is kind
of like how we want to read the data and
then this is how we want to write the
data right so these are the types this
other thing here is what we want to do
with the data so we use the graph TS
package to maybe we want to like um read
in addresses uh from the uh the thing
and store them a certain way uh in
typescript we need this like package
right so that's why in this case we're
using the big int package to do like
numbers uh to use big inss and so in
this case we only have one function that
the contract is uh sending and so we
have this ability to uh sorry one event
uh the greeting change event so we take
in the event here as part of the the
function right here greeting change and
then we create a a unique identifier for
the values of that actual uh string so
we do that by converting it to a hex
string then we try to load it in the
database so we try to see if it's
available if it's not available here uh
like it's like if it's the first person
Whoever has sent a greeting we just
create a new one right and then we
actually like set who that person that
that sent it is what the time stamp was
and then we do here this is where we use
the big int package to actually set the
value for the very first time as one
right so we do some interesting stuff
where we're actually storing the
greeting count offchain right we're not
sorting it on chain so the graph is
really good for that because if you have
stuff you want to like process like defi
related uh metrics uh and you want to
like just store that in an easy to
access way that's where the graph is
very powerful and then if this person
has come in and sent a greeting before
well they'll actually have a count of
one plus an additional one so it'll
count that and add that too right uh and
then the same thing goes for the
greeting like we do we create a an
identifier for the greeting create a new
one using the string the uh that heex
string and then we set all those
variables for the greeting the sender
the premium the value the Tim stamp and
the transaction hash and then here is
where all that data gets saved so it's
kind of simple um and the cool thing
about the graph actually if you use the
CL it will generate all this stuff for
you so you don't need to write this
stuff but it's good to understand how it
works um cool all right so uh I know
it's that part's probably a little
complicated but at least you guys get an
idea of why you would use the extension
uh why you would use the graphic
extension and yeah uh any questions at
all there's got to be at least one
question come on no no
no
yes
personally what is it that you most
excites you about this project and and
the new things that it enables scaffold
e or the graph the graph the graph the
graph well the graph is great because um
you know it really allows you to uh you
know improve the usability of the data
from the blockchain um and so you can
build some interesting stuff uh I think
what I'm most excited about is you know
the advancements that we're making in
indexing with like
substreams um and yeah just the the the
Network's getting the network is very
secure uh distributed decentralized and
we're like sticking very much to that
ethos right where we believe that
decentralized is super important and so
about I know was six months ago maybe
not that that long we used to have a
hosted service we've completely moved
away from that and everything is on the
decentralized network and we're we're
moving to continue that uh and and focus
on
decentralization so thank you yep thank
you cool we got four minutes any other
questions yep back there let's get you
mic uh back there green sweatshirt
okay so first one uh maybe it's because
I don't know the graph and so on but you
can run mutations like in graphql or is
only for indexing data and fets from uh
the blockchain sorry I missed the first
part can you say it again yeah in
graphql you can do querium mutations and
here in the graph you are able to run
mutations in the same way or
computations yeah yes okay yeah you so
you can essentially do like in there I
mean I'm doing like a plus or I'm just
adding some stuff uh there's time series
data you can do with the graph where you
can like have like uh something happen
over a certain period of time and
aggregate um so there's some stuff you
can do automatically with some some base
stuff but yeah it's more yeah you can do
computation you just can't do like you
can't like it's not an oracle where you
could go out and like fetch some
information and get that back um it's
just stuff that you can do locally
inside of assembly script and process
and store okay and the second one
uh how much uh is autogenerated by the
Avi is only the the types from the
schema or also in the Handler we are
autogenerating on yeah so if you use so
that's a good question so the so the
thing is it won't generate the the the
it won't generate all the assembly
script code for you it will just
generate the types but the CLI like the
graph CLI if you go to the gra.com and
install the CLI that will read in all of
the types and then build out a very
basic kind of uh one for you okay thank
you yeah good
question Cool any other
questions no awesome cool thank you guys
so much for coming uh we're going to be
here uh we might take a small lunch
break I think soon and we will be back
here later so thank you so much guys
appreciate
you I think uh they do have a Q&A here
where you can scan this QR code and ask
questions so if anybody wants to you can
scan this QR code and it's going to show
up right here on the screen so feel free
to ask more questions here but we're
here all day and if you find any of
these black shirts you can ask ask any
questions I think now we're going to
take a break though right it's a lunch
break time is that
right if the QA shows up we'll answer it
yep yep yep yep yep if questions show up
here we will answer them uh but yeah
don't feel to what stress to do that the
the key is