Transcript
This transcript was autogenerated. To make changes, submit a PR.
Everyone, thank you for coming to this Conf 42 talk on how to build
on Ethereum quickly, easily with Scaffoldeth E. My name is Kevin Jones
and I'm really excited to teach you guys today how you can build your own
decentralized web application. So without further ado,
let's get started. So if you're new to this concept of
web three and building on Ethereum and decentralized applications,
there's a lot to learn. Again, my name is Kevin Jones. My background
is full time. I work for a company called Nginx. I'm also a developers advocate
for a popular toolkit called Scaffold ETH, and I am the
founder of a nonprofit called the Blockchain Education Fund, based out of
here in California. And I'm also a lead mentor for
a solidity track@growic.com. I'm also
a photographer and filmmaker. If you guys scan this code, you'll get all my contact
information. You can follow me on Twitter. I'm on Telegram. Would love
to chat with you guys if you have any questions or if you're interested in
any collaboration. So I want to preface
that building on Ethereum can be a little complicated at first and can
be a little overwhelming, but I'm going to try to demystify that today by actually
walking through some of the basics and then do an actual demo for you.
It's first good idea to get an idea of how everything started and where we
came from. As far as the web goes. You can think of the traditional web
in the early 90s when things first got started, everything was very static. It was
the static web applications,
static content, really, it was just a means for serving information to users.
Right. There wasn't a lot of dynamic content that's changed over the
years. Right. Where we're at now, which is kind of this kind of web two
is really a more complex infrastructure where we have APIs that
are talking to each other, we have databases, we have network storage,
we have applications that are sitting in cloud providers
and on premise. And then we have Jones of different protocols that have been
built on top of the Internet. Right? And this is cool because
it gave birth to a lot of interesting applications, social media applications,
Facebook, Instagram, TikTok, you name it. There's all
sorts of cool stuff that you can do in a more dynamic way and interact
on the web. But web three is this new concept of building
applications that are decentralized. So in other words, they are blockchain based
using a ledger. The security of the network is secured by
a consensus algorithm. In the case today we're
going to be talking about Ethereum. Everything is transaction based
and message based. And so you send transactions and broadcast these transactions to
a decentralized network, and all these nodes
kind of come in sync and receive these transactions.
And this is all done using public cryptography and
cryptographic hash algorithms. And because it is decentralized,
it's open. So any user can connect to a decentralized application and then
interact with a node on that blockchain.
Providers can also provide access to the blockchain, things like
infura or alchemy or morales that provide
an SDK or an API endpoint into the application.
And then in the terms of the actual smart contract, which is the
program that lives on the blockchain, it's immutable in the sense
that it's sensor super resistant and it can be deployed and
live forever if properly designed. And again,
everything on the blockchain is transparent because everyone can
see a copy of that ledger. And so you do have to be careful
with sensitive information on the blockchain. If you're going to store anything on the
blockchain that's large, it can be kind of expensive, and you
should probably encrypt that data before you're putting it on the blockchain if
there is anything sensitive in there. And so what
does it mean if you're a developer? Well, you write your smart contract, your front
end in something like a react framework react
js or sorry, JavaScript framework react JS nextjs.
And you usually deploy that application in a decentralized way.
You might still deploy it to a web server or something like Nginx
or something like a static file service like surge.
But your smart contract, which is the backbone to your application, where all the business
logic sits, is deployed across the clusters of
the nodes. So you deploy it to one node as a transaction and then it
gets replicated through consensus to all of the other nodes on the network.
This is how you get the censorship resistant aspect inside
of that smart contract. Everything is handled inside
of there as far as like application logic. And this removes the need for any
kind of intermediary, because people that are interacting
with the blockchain application or with the contract
can use public key cryptography. And that smart contract can
essentially act as the intermediary between two different users on the
network. It also has the ability to store value because
there is an inherent nature to the network being powered by
Ethereum or ether. And most
of these smart contracts are written in specialized languages. And then they're compiled
down into bytecode mainly. We're going to be talking about solidity
today, and if you want to interact with your application, you do
so by use of an API SDK or an
API library. Web three js, ethers js,
and a lot of times providers also provide APIs to interact with
the blockchain as well, or some kind of SDK for react
or something like that. And they also usually offer nodes as a
service. So as you interact with your application, these blocks get
formed, and that's the term blockchain is the blocks are all connected to each other
and store the history of the transactions on that
public ledger solidity high level this is what it
looks like. It's very simple, but it's a high level
language, compiles down into bytecode, but it's got curly brace style.
Its optimization is key. In other
words that you really need to think about how you're writing your smart contract to
be as efficient as possible. Because when you deploy on the Ethereum
blockchain, you have to pay upfront for the storage. So anything
time you want to store a value, or anytime you want to store bytes of
code onto the blockchain, you have to pay upfront for that. So it's very important
that you optimize your smart contract.
Again, this code is compiled down into what's called bytecode,
and in order to read that bytecode you need what's called an ABI.
We're not going to get too much into that, but I'll explain it briefly.
An ABI is kind of like a map or a way to read
that bytecode because when you compile it down into bytecode, it's obviously non readable
by human eyes and same with your front end application. It needs
a way to understand how to interact with the bytecode properly.
So if you want to follow along, you'll need a copy of git on
your computer. You'll need a copy of Node Js. Probably the newest version
is best, but you can use 16 or above and you'll
need a copy of yarn package Manager. Yarn package Manager is the most recent
package manager. Make sure you're not using an old out of date version one from
the Linux as you install the dependencies using the yarn
commands, it will install all of the dependencies you need, including hard hat,
which is a virtualized ethereum virtual machine that runs locally
on your laptop so that you can have a local EVM blockchain that you
can interact with and test. That's fast and local and has
some play ether for you to experiment with react, which is a
front end framework. And then solidity is the
contract language that we're going to be talking about. And it has the compiler
in there already, so it's going to be able to compile it for you and
it's going to be able to automatically create an ABI and inject that ABI
into your front end for you. So you don't have to worry about all that
stuff. So if you're a developer, if you want to
get started, you clone the repository. So you do a git clone on the
Scaffoldeth repository, you do a yarn install that's going to install all of
your dependencies. You do a yarn chain that's going to spin up
your blockchain, you do a yarn start that's going to spin up react,
you do a yarn deploy and that's going to take your smart contract that's inside
of your project. It's going to ship it to the local hard hat Ethereum virtual
machine, and then as you again deploy and make changes to
your smart contract, blocks will be formed and you can kind of start verifying
how your application is running. Okay, so if you at
any point or get lost, speedrunethereum.com is
kind of like your go to. So if you get anything out of this talk,
go to speedrunethere.com. It's going to guide you through some challenges where
you can actually test your abilities and get help into the documentation
as well, in case you have any problems. It'll also put you through to
a telegram group which you can get help as you
go along and do these challenges as well. And if you
need all of the links for Scaffoldeth, this is everything.
This is the repo, this is the telegram chat, this is the docs
page as well as some funding pages because
everything is a public good for Scaffoldeth in the build build,
which is the group of developers that support Scaffoldeth. And so this is a good
contact card to have. You can scan this and it'll save it for you.
So let's get started. I'm more of a person that's interested in
showing instead of slides, so I want to actually kind of walk
you guys through again. If we do a search for Scaffoldeth,
the first link that's going to come up is going to be the GitHub
repository. Okay. This is going to have everything you need to get started.
You can see here that it's pretty actively developed. There's lots of people working
on it and it's going to give you all these steps that I'm going to
go through. Clone the repository, do a yarn
install, do a yarn chain, open up a new window,
do a yarn start, open up another new window
and do a yarn deploy. So as you go through, you're going
to do these commands and I'm going to show these as well. And if you
get lost along the way, there's lots of other information in here
in the readme that you can follow along. So again, if you get lost,
Speedrun Ethereum is a good resource because it has an introduction,
it has a link to Scaffoldeth, it has a
getting started playlist that will teach you about how to build. And then you can
start doing these cool quests where you can test your ability to build on Ethereum.
Okay, so let's take a look at what we got here. So I've already gone
ahead and checked out the repository here. So we can just
assume that I've gotten the moonish version. I also went ahead and did a
yarn install or yarn, yarn install, yarn install and
yarn will do the same thing. So I've already kind of got up my
repository up and running. Now I'm using Tmux, which is a terminal multiplexer
which allows me to have three terminals open in one big terminal window.
You could just have separate windows open, that's fine. You're always going to need three
windows open. So the first window we're going to do a yarn chain.
Yarn chain is going to spin up a copy of hard hat. That's simple.
Do a yarn chain. Then we know hard hat's up and running. It says that
it started. Now we can do a yarn start.
Now yarn start is going to spin up a copy of react.
React is going to take a little while to run. So we'll go ahead and
let that sit. But we can see here that it's trying to start up.
So we'll give it a second. And then on the very bottom, the last one
that you'll always have open is the yarn deploy. So we have yarn
chain to spin up the hard hat chain. Yarn start to spin up,
react, and then yarn deploy is where you're going to deploy your smart contract and
be able to test. So there's already a smart contract that comes with Scaffoldeth.
That's why it was deployed successfully. And we can see now that
we got some read output from the console, from hard hack console.
So we can see that there was some successful transactions. We can
also see where the contract address is located and how
much gas was used. Okay, so react
is still starting up. So while that's doing that, let me just go ahead and
bring up the entire code structure for you so that we can take a quicker
look at what is included in the code.
And I use atom, you can use any editor you'd really like to,
but I'm going to go ahead and show you here what's inside here.
So the directory structure for Scaffoldeth, there's a packages folder,
and inside this packages folder there's really two places you're going to be
the most hard hat and react. Hard hat obviously is
where you're going to do everything with your smart contract. So we can see there's
a contract folder and then there's your contract. And so
this is kind of like a hello world.
It's called the purpose or the set purpose smart contract.
And it's called your contract actually here. And it
allows us to take a variable which is defined here as a string,
and it allows us to update that variable to a new function
using a new function. So we can set a new purpose that gets passed
in that transaction. And we can also log
out console output to the hard hat console and emit an event.
But then here's where we update the state. So we actually update that new
variable. So let's see, looks like react started
up successfully. So let's just take a quick look at Scaffoldeth.
You'll see here in the corner we have this little night and dark mode where
we could switch between. Whatever your preference is. We'll go ahead and just
stick to light mode and you'll see when you first get into Scaffoldeth again,
everything is in react. And there's all these cool tabs here that allows us to
go through and kind of browse what's going on. This first
tab here is really where you're going to build out an app. If you are
a react front end developer and you want to build your app, you'll start
building it into this home JSX file which is inside packages react
source of use home JSX, but where the magic sauce is,
is actually here in this debug contracts folder. Now we can see that we have
the purpose, which I showed you inside the smart contract, and we also have
the function that's already been displayed here that shows us
the ability to change that function. So if I wanted to,
I could say conf 42, exclamation mark, exclamation mark and
hit send. And it says, oh, there's a transaction error. I don't
have enough funds to fund the transaction. Now normally
you might connect your application to metamask or
wallet connect or something like that. But you'll see here that one
concept of building on Ethereum is you have a wallet and the wallet holds your
public and your private key. So you sign transactions with
your private key so that they can be verified using your public key. So we
already see that we have a wallet that's built into the application, which is really
cool. And there's also a button right here where I can just grab some funds,
so I can grab some funds from hard hat and they get thrown into my
wallet. So now I've got $11.60, $0.09 or
zero one ether if I click it, but it shows me how much
ether I have. Now I can hit send and I can update that state
because now I was able to pay a little bit of gas to change the
state. Remember I said anytime you change state on an ethereum application,
you need to pay that gas. So I could grab some more funds,
I can click the address right here and copy it, and I can come down
to this wallet and I could paste in my address and I could get like,
I don't know, let's get ten eth from the hard
hat and it's going to send it from the hard hat node
directly to my wallet. Here we go. So now
I've got ten point 99 eth
and I've got $11,699 of Ethereum
that I can start playing around with. So let's just show you what it looks
to make a change. So we have an example, we have
this payable function here. Let's get rid of payable just for a second,
save it, and let's go back to our terminal and let's do
a deploy again. But this time let's reset it. So we'll do
a yarn deploy reset. Now what that's going to do is it's going
to force a new contract to be deployed. And we
can see that it was successful, we can see some calls and we can see
that it was successful and how long it took and how much gas it took
to deploy our smart contract. So now if we come back here, we get a
new Copy, everything is reset again. But now you'll notice that
the UI changed. Now there's not another field here. So if we were to
change that back, let's go ahead and do that, put that back to payable
and hit save, sorry, save, and then redeploy.
And look at the UI. And after we do that deploy, we'll get a new
copy of the contract here. You'll see. This is the contract address. Now we get
that field back. So what's happening is the UI is adapting based on
our smart contract so that we can test it. So let's start testing.
Let's start building something interesting. Okay, so the first thing you
learn in building a decentralized application is you might want to do
access control of the contract. So let's define
a new variable that's publicly available called boss.
Let's call it boss. And let's grab this address here and
let's paste it in here so that we have this new address variable.
This is our public key of our wallet that we have. And let's set a
require statement. So let's go require that the message
sender is equal, equal to the boss.
Otherwise you not the boss like
that. Right. And it saved that. And now let's redeploy our change.
Let's make sure it goes through successfully, which it looks like it did.
And now let's go back to our app. So now we have this new variable.
We have the boss variable. And if I come over here and I go say,
let's go, new incognito window, and let's go to the app on
an incognito window. Now what happens? What do we get here?
We get a copy of the application on localhost 3000.
But what do we got? We have a new user, we have a new wallet,
a new burner wallet, and every time that you open up
a new incognito window, you're going to get a new burner wallet. So now
we have this identity and this identity. So now we can test
that. So let's come over here and say, comp 42 is
cool, and go like this and hit send. Well, I'm not
the boss, so I can't change that because I'm not the owner of the
smart contract. But if I come over here and say,
comp 42, I am the boss,
like that and hit send, it's going to let me, because I have
access control of this smart contract I've created. Kind of like a
janky access control, essentially. So that's actually not the
right way to do access control because we're doing a lot of hard coding and
we're doing a decent amount of work to do that. The best way
to do it with Scaffoldeth is to instead let's
not create our hard coded address. Let's do what's called
importing and inheritance so we can import another
contract. So you can see here we have an open zeppelin smart
contract called ownable, which is kind of like the de facto company
that creates industry standard smart
contracts and so we can inherit what they've already done and use their work.
So instead we can say is ownable. So we can say our contract,
we've imported it, it's available, and now it's called ownable.
So it's an inherited smart contract within there. And so if
we save that now and then redeploy,
let's see what happens to the UI. Let's make sure it was successful first,
which it was, and let's take a look and see what changes. Well,
first of all, now we get an owner variable which not boss anymore,
it's called owner. But we also get some inherited functions
that came because we imported and inherited that other
smart contract. We can start utilizing those inherited solidity
files. And so we have a transfer ownership Jones and we have a renounced ownership
one. But there's one issue here. I have this address here
as my burner wallet, as we would say,
but it does not match our owner here. So where is that coming from?
This address is kind of just this random address. Well, hard hat
has a list of 20 accounts and it uses the very,
very first address to deploy your smart contract. So right now this
contract is technically being owned by a hard hat
key. And so what we need to do next is go into the
deploy folder right below and we'll see here that we have a
deployment script. Let me just get rid of this so we can
see it a little bit better. And we can see what we do is we
get a copy of the named accounts using JavaScript
and we grab the very first one and that is going to be the deployer.
And then here we set the rules on how we're going to deploy our smart
contract. So it's called deployer. And then we can
get a copy of our smart contract right here. So this is where we actually
do the deploy. This is where we get a copy of our contract.
So what we can do is now that we have a copy of our contract,
we can call that function that we talked about before.
So we can call this transfer ownership function, which is what we see down here,
and we can add an address. So what we can do is grab our address,
right? And we can pass that address in the contract
call. So you can use JavaScript to make contract calls as
well, using like, as you can see here, you can also, if you need to
pass any arguments to your constructor, you can do that here as well.
So let's say you wanted to name your token, I don't know,
dogecoin and you wanted it to have a supply of seven.
Seven, Kevin or something like that. You would pass those into the
arguments. I just wanted to mention that because that's good to know, but I'm not
going to do that right now. So let's save this and now let's redeploy
one more time and see what we get. It was successful
and now we see boom. Now we've got access back to the smart contract.
Okay, so we've deployed this smart contract and we've started
kind of, you see what we're doing, we're testing and we're deploying and making
changes and we're kind of using these three windows as
kind of like our ide environment. Right? We have a UI that
can test, we have our editor and we're using just these deploy commands.
And I could just keep resetting if I needed to get a new copy of
the contract. And there we go, we got a new contract.
So this isn't a very interesting contract though because basically
we're not really doing anything super crazy here. All we're doing is just
have a function that allows us to change a state and we
were going to make it only owner, which let's instead not
do that. Let's instead make people pay a certain value
to update the smart contract. So let's go require
that the message value that's passed across in
the request or in the transaction is equal to a
price that we set. Okay? And if not we'll say send
mo money boma mom, like this. And we'll
set that price up here. So we'll go un, which is unsigned
integer, we'll make it public, we'll call it price and we will
make it zero point Jones.
Ether. Ether is the native currency.
When we're dealing in the blockchain, we're actually dealing. As far
as interacting with adapt, we're dealing in way. So you
can see here there's a math that's being done that shows us how much way
that is. We're going to use ether because it's easier to read here, but on
your front end you'll need to make some calculations and I'll get to that
in a second. But let's set that. And now let's say save and
then let's redeploy again. So now that the smart contract is payable,
well, the function is payable.
We already had this transaction value. So if we were to change it
here to comp 42 for the purpose and hit send, it's going to say,
no, you need to send some money. Okay, so let's send some money. So what
do we got here? We have a new variable that keeps track of our price.
Let's grab it and let's paste it here. Now you'd think you
could just hit send and it would work. Well, remember I told you before,
we need to transact in way which is the lowest denomination
value of ether. So there's this cool green button here that does the math for
us. So one eth is times ten to
the 18th power in way. So we can click that right here and it's
going to do that math for us and it's going to tell us how much
way we need to send. So boom, we can send that. And then it worked.
So now we were able to update the smart contract. And what's interesting
now is now we have some value in the smart contract. So it's $11.67.
So now let's figure out a way to get that money out because
right now it's a black hole. We have no way to get the smart contract's
value out. So how do we do that? Well, let's go back to
our smart contract and let's make a new function and let's
call it withdrawal.
And let's make it public and
let's set a boolean called success.
Otherwise we won't. And then if that's successful and
someone's able to call this, we will do a message sender.
So we'll reference the person calling the transaction
and we will do a call. So a call is kind of like a
transfer function in Ethereum. It allows you to take funds from a smart
contract to an address. Anytime you're sending value from a smart
contract to the address, you should do a call. And so we're going to
do value and then what we're going to do is we're just going to grab
the balance of this smart contract so this
address, which is this smart contract's balance, and then we're
going to close that off. And what do we want
to make sure we do here? Well, we talked about access control. Let's make sure
that this is only the owner. Now, you'll notice I'm typing only owner
up here on this function, and that's because we have access
to the modifier that comes with ownable, ownable has this
thing called a modifier only owner modifier,
which modifiers allow you to change restrictions on what can be happening
inside of a particular function. So you can create a modifier and then reference
the modifier so that you can save on your
coding. So we're just going to reference this only owner modifier and then we're going
to save. And then we're going to go ahead and deploy one more time.
And so now let's make sure it worked, which it was.
Now we can take a look and see. So now let's put some value in
here. Let's change it to comp 42 is
awesome. Like this hit send.
And now we've got some value in the smart contract. So now let
me come over here to this little purple dude, sorry, this little
kind of blacky green guy, and let's try to get this funds out. Let's go
down here to the bottom and we'll see. We have this withdrawal function. Let's hit
it. It's going to tell me, no, I'm not the owner. I don't have access
to call that function. Okay, so now we've got those funds
in there that are locked up, which is good. And because I'm the owner here
now, I should be able to come over here. So we have 1167 let me
hit withdrawal. It's successful. And I was able to pull that
into my wallet. So I was able to take it out of the smart contract.
And so now we have this vending machine that's kind of in the cloud
that we can start doing interesting things with. Now the next step is that
we would probably do something like figure out
a way how we can deploy this smart contract. So everything we've been doing is
kind of locally. The first thing you'll understand when you're
deploying to a blockchain,
you need to have an account that's trusted and
you have control of the keys because the accounts that come with hard hat
are just, everyone has access to them. So you want to use your own deployer
account. So all you have to do is do a yarn run generate.
And what it's going to do is it's going to spin up a deployer account
based off of a random mnemonic. Now, a mnemonic is just a random
number of letters, or I should say words that
compromise or not compromise, but comprise of your password. So if
you put them together and hash them, you get your password, your private
key, essentially. So here we have a new deployer,
and it's available to use. And so we could do a yarn
account like this,
and now we have access to the QR code for that account. Sorry, let me
hit it again. And so this is really cool because if you
have a wallet on your phone, so like, I have a wallet
on here, and I could send some ether from my
wallet on my phone. So I have a punk wallet,
which is also a cool wallet that's available.
You guys can kind of see it right here. It's the punk wallet.
And I have some money in there. I have some guerli eth. Now, Guerli is
the testnet for, you know, of course you
don't want to deploy to mainnet right away. You'd want to deploy to a testnet
where other people can interact with your smart contract. Again, we've been doing everything locally,
so it's got this cool scanning option. So I can just go ahead and hit
scan. And then I scanned it, and I got access
to this address on here. It did the translation for me, which is really
cool. And then I can come over here and I can send myself some eth.
So let me do ether, and let me
send, I don't know, let me just send like $10,
see if it works. So I just sent some eth.
Might take a sec for it to go through. While it's
doing that, we'll go ahead and do that.
Okay, so while we're waiting for that transaction to go through, let's go ahead and
take a look real quickly at the react code, because the
next thing you're going to want to do is after you deploy your smart contract
to a testnet, you'll probably need to update your front end so that you can
interact with that testnet. So here we can go to react app,
we can go to source, and we can go to app JSX.
And then what we can do is come here to the very top,
and we can see that we have this network localhost. Okay, so we could change
this to Guerreli by just doing network gawarely.
So then what we're able to do is. Sorry, let me send this again.
We'll do. Sorry.
0.0.1 e.
That works. Okay, sorry, I had to resend the transaction. So if we save
that now, we can update our front end. So if we come over here and
refresh our application, then it's going to attempt to reach that contract
on Guerrero. So you can see here it updated to Guerrero. But there's a
problem here. It's not loading the smart contract. That's because I haven't deployed the smart
contract to the testnet. So the next thing we want to do,
let's check our balance again so we can just do yarn account and it's going
to tell us if we have some Guerreli eth, which we should hopefully have it
by now. There we go. Now we have some guerrelith because I just finally succeeded
from my phone. So now what we can do is do we've been doing yarn
deploy reset, we're going to do network
and then type goerily like this.
Now we're going to take our smart contract, we're going to use the funds that
I sent from my burner wallet into this mnemonic deployer
and we're going to publish that out. So you can see it's taking a little
longer because the Goreli testnet is a little bit slower.
So we'll go ahead and let that sit for just a second.
Let me just go back real quick. While we're waiting for that, we can also
look at the home or the views folder and we can
see some of those other folders. So the home JSX I
mentioned is where you're going to build out your application hints
gives you some hints on where to go to reach different parts of the contract.
But example UI is really useful. Example UI is exactly what
we're looking at here. Okay, so it looks like it was successful. So my
deploy was successful. You can see here how much gas it took and it
worked. So I was able to deploy this. So now it's on Guerreroli and it's
live. So if we were to click this, it would take us to
Ethereum, scan and show us the contract. And we can see here that the deployment
was successful. But if you look at the contract here, it's unverified.
So next thing you want to do is anytime you deploy a smart contract,
you probably want to verify your smart contract. So how do we do that?
Well, let's grab the address for the smart contract, go back to our console
and let's do a yarn verify paste the
address network guerreli.
So it's going to take our contract, compile it down,
it's going to send over the smart contract to Etherscan, it's going to verify
it, then send back the results to make sure it works, which it did.
And so now if we come back here and refresh our contract tab, we can
see that it's verified, it's got a little green checkmark and all the source code
for my smart contract is now available here inside of Etherscan.
So that's kind of a common thing when you build a decentralized application. You want
to instill trust in it so people can see the code. So you always want
to verify your smart contract, unless you're doing something like really secretive,
that you don't want people to know how the contract is written, you're probably going
to want to verify it. There's ways
to verify it anyways, so it's better just to do the verification so
that you know it's verified. But we can see now our app is working.
There's one last thing that we need to do is
we want to take our application and ship it out somewhere
so we could do a yarn build, which is going to take
a copy of our react app as it is right now, and it's
going to kind of like make it so it's easily deployable
and being able to transport it easily. So that might
take a second to run. So let me get back to what I was saying
before about these tabs. There's an example UI tab,
which is really useful. So if you're going to build out your app and you
want to know how to read in the purpose variable, or you want to
set the purpose, or you want to read an address in or do
what's called Ens resolution, or get a balance, there's all these cool examples
here, buttons, and then there's an events tab, so we can
see events, and then we can see a lot of examples
of how you do like a toggle using ant design. So that
example UI is a really good resource as you start to build out your application
and you're looking for examples on what that would look like. So let's see if
our build finished. So not done yet, but that's okay.
Let me go back here real quick. Let's make a
change with our smart contract while we're waiting. So here we have our smart contract.
It requires zero point Jones eth. So let's go ahead and send some value
in there. Let's do it over here from the incognito
one. Oh, we can't do that one because we have an eth there. But this
one, we have some eth in here. So let's do conf 42,
exclamation mark, send some value,
translate it, and hit send. And now you'll notice that I
don't have enough funds to pay, so I need to connect my metamask.
So at this point you might start using metamask metamask is just
a browser based wallet. So let's go ahead and switch our network.
So we connected with Metamask. I'm going to switch the network to
the proper network. And if you want to learn how to get started with metamask,
they have a really good getting started guide on how to install it. But metamask,
it's a browser based wallet, right? It gives us this little browser wallet. So now
I have a bunch of eth here. I've got 89 eth. So I can send
a transaction. Now I can sign this transaction.
Here we go. Confirm.
So now I can update the smart contract. We can see that our transaction has
started, and as soon as it's done, it'll get a little green checkmark.
There we go. So I've made a test transaction. We can just hit refresh real
quick, make sure it's working, which we should have the new 42.
There we go. And we have some value in the smart contract,
so I should be able to also get the value out. So let's try that.
Let's withdraw. Unpredictable gas
limit. Oh, no, that's not good. Okay, so maybe my funds
are trapped in there. I'm not sure why I did this,
because I'm not the owner anymore. So what I could do is I could do
this. I could say, log out,
right? And then I can grab my address for
crypto mastery, which is my cryptomastery etH, which is my
account here, and I can transfer the ownership to
me so I can hit send. It's going to let me do that. There it
goes. So let's transfer the ownership.
So I have the burner wallet. I logged out of my metamask. I'm in the
burner wallet. I'm transferring the ownership to my metamask account,
which it should work any second now.
There we go. It succeeded. So now I'm the owner. So now I can reconnect
my metamask. See what we're doing? We're transferring the ownership of the contract, and now
I can withdraw this fund. So there's 1168 in there. Let's do a withdraw,
and we just got to sign the transaction. We got to pay a little gas,
right? Let's do that. It's starting to transfer,
so any day now, we're going to see this succeeds.
We're still working on our local host Ui, though.
Okay, so let's refresh. Let's see if it's all gone. Cool. We drained the
contract, so we're using our local host Ui. The last thing you're going
to want to do is either do Yarnipfs, which will ship our
application to ipfs, or you can do yarn
surge. Yarn surge is like a static file hosting
service. So now that we've done a build of our build, we can just surge
it and then we can name it whatever we want. We'll just keep it.
This actually absolutegrain surge sh we're going
to ship that. It's going to take all of our source code for our
UI and upload it, or I should say our static assets.
It's going to upload it for us. And so now we can just go to
this website and if you guys are at home today and you have some testnet
ether, you guys can interact with the application. Let's go there.
There we go. So now we've got the debug contracts.
We can see here that it's conf fourty two and we've deployed it. So in
all that time that it took right now, we wrote a smart contract, we tested
it a little bit, we set up access control, we transferred ownership of the
contract, we updated state, we even withdrew
some funds from the smart contract and we generated a build
and we pushed that build out. And so we did the whole bam, the whole
shabam. We deployed the application. And so the next steps from here would be
if you get to this point where you get comfortable enough, if you're not comfortable
with solidity, there's a great website called solidity by example which will
also show you how to do things like how
to do constants, how to do if else
statements, right? All these cool examples are in
here. So solidity by example is a great one. And there's also a bunch
of YouTube videos as well. So if you want to understand the
smart contract programmer, YouTube is really good as well for learning.
Once you get to comfortable with building, then you'll want to go to speedrunnerium.com.
And this is your kind of next step, right as you get kind of a
little bit better and you'll start doing these quests. Like the first one is you
build an NFT, second one is you do a decentralized staking app,
then you do a token vendor, then you do a dice game and then you
get invited to the build guild, which is what I'm in. And this is like
a group of developers that are kind of excited to teach and
build up the ethereum ecosystem. It's a public goods and you
can actually get paid to
be part of the build guild and do things for the build guild, like create
special builds or create videos or whatever it
is that you're passionate about and you're excited about on web three, you can do
so speedruneterium.com, that's the best route after you
get going. So I thank you guys so much for your time, and I
hope this was a valuable talk for you guys.
And yeah, enjoy the rest of the conference, and I'll catch you guys next time.