Skip to content

Commit 129022e

Browse files
committed
Add tooling list;external download links; adapt content for Sepolia
1 parent 9941583 commit 129022e

File tree

1 file changed

+92
-76
lines changed
  • pages/lessons/projects

1 file changed

+92
-76
lines changed

pages/lessons/projects/2.mdx

Lines changed: 92 additions & 76 deletions
Original file line numberDiff line numberDiff line change
@@ -36,7 +36,7 @@ We have some checkpoint questions for you throughout the lesson for testing eith
3636
In this project we will build a basic NFT smart contract, that will serve us as
3737
the backbone or foundation for almost any future NFT project.
3838

39-
But let's pause quickly for a few questions to see what you already know, and give you a flavour of what's to come.
39+
But let's pause quickly for a few questions to see what you already know, and give you a flavour of what's to come. First set your pomodoro ⌛😊
4040

4141
<SideDrawer buttonText="Warm-up Questions" title="Some previous knowledge, some prediction">
4242
<Question question="lesson-2/1-intro/Q1" />
@@ -46,7 +46,7 @@ But let's pause quickly for a few questions to see what you already know, and gi
4646
<Question question="lesson-2/1-intro/Q5" />
4747
</SideDrawer>
4848
How did you find that? No worries if the answers didn't come easily. We're here to fill
49-
in the gaps! Set your pomodoro ⌛😊
49+
in the gaps!
5050

5151

5252
![thatd.be.great.jpeg](/assets/lessons/2/img_1.jpeg)
@@ -72,29 +72,42 @@ This has created huge opportunities for individuals, marketplaces and platforms
7272

7373
Now that we know they can be much more than just an image, what are we waiting for!
7474

75-
By the end of this lesson we'll have learnd a lot. A simple breakdown of the steps to get there is:
75+
**By the end of this lesson we'll have learnd a lot. A simple breakdown of the steps to get there is:**
7676

77-
- Set up our environment to work
78-
- Install dependencies
79-
- Create a project
80-
- Create a Smart Contract using a code editor
81-
- Use images and files for our NFTs
82-
- (Optional) Create your own images and files and store them in a decentralized way
83-
- Deploy our Smart Contract to a Testnet Blockchain
84-
- *Mint*, i.e. create our very own NFT
85-
- See our NFT in a public marketplace
77+
- set up our environment to work
78+
- install dependencies
79+
- create a project template
80+
- create a smart contract using a code editor
81+
- use images and files for our NFTs
82+
- optional - create your own images and files, and store them in a decentralized way
83+
- deploy our smart contract to a testnet blockchain
84+
- *mint*, i.e. create our very own NFT
85+
- see our NFT in a public marketplace
86+
87+
**To achieve this, we'll need diverse developer tools. We'll also need to open a couple of
88+
accounts as we progress from one development environment to the next. We'll be using:**
89+
90+
- a console
91+
- an IDE
92+
- optional - a Pinata account for web3 storage of content
93+
- a web3 wallet for testing
94+
- some test ETH
95+
- an API key from an RPC provider
96+
- optional - an account for that provider
97+
98+
Lots of fun! And no worries, we'll give you all those steps in due course.
8699

87100

88101
## Set up your environment
89102

90-
Like the pros. For that we are going to set up our working environment in our
103+
Just like the pros! For that we are going to set up our working environment on our
91104
computer, making sure we have all the necessary tools to create, debug and
92105
deploy smart contracts.
93106

94107
![expectations.reality.jpeg](/assets/lessons/2/img_2.jpeg)
95108

96-
To begin our project, we should open a command line interface, a.k.a. console. Check your Operating System
97-
options on how to use one below. We will be using `npm`, the package manager from Node, and its command `npx`that allows us to run or execute a package or one of its scripts. If you are
109+
To begin our project, we should open a command line interface, a.k.a. a console. Check your operating system
110+
options below on how to use one. We will also be using `npm`, the package manager from Node, and its command `npx`that allows us to run or execute a package or one of its scripts. If you are
98111
comfortable with another package manager, feel free to use it.
99112

100113
<SideDrawer title=" " buttonText="Getting Started with the Command Line Interface">
@@ -126,7 +139,7 @@ npm install --save-dev hardhat
126139

127140
<Callout emoji='💡' size='md' variant='info'>
128141
The `--save-dev` flag used in the last command, lets the project know it's a
129-
development dependency (not needed in production). You can view what
142+
development dependency, i.e. not needed in production. You can view what
130143
dependencies are needed in the `package.json` file in the root of the project.
131144
</Callout>
132145

@@ -164,7 +177,7 @@ are those ten lines and what is?
164177
// 888 888 888 888 888 Y88b 888 888 888 888 888 Y88b.
165178
// 888 888 "Y888888 888 "Y88888 888 888 "Y888888 "Y888
166179

167-
👷 Welcome to Hardhat v2.11.1 👷
180+
👷 Welcome to Hardhat v2.14.0 👷
168181

169182
? What do you want to do? …
170183
❯ Create a JavaScript project
@@ -173,7 +186,7 @@ are those ten lines and what is?
173186
Quit
174187
```
175188

176-
We choose `Create a Javascript project` and hardhat will create an example
189+
We choose `Create a Javascript project` and Hardhat will create an example
177190
project for us. It will give us 3 prompts for options. Choosing the defaults is
178191
ok for us. Here's what mine asked me:
179192

@@ -184,12 +197,12 @@ ok for us. Here's what mine asked me:
184197
✔ Do you want to install this sample project's dependencies with npm (@nomicfoundation/hardhat-toolbox)? (Y/n) · y
185198
```
186199
187-
- **Hardhat project root** → Hit enter (this is the folder where we want to create the project)
200+
- **Hardhat project root** → Hit Enter - this is the folder where we want to create the project.
188201
- **Do you want to add a .gitignore?** → Select 'y'. If you are patient to
189-
finish the lesson, you'll learn what it's for
202+
finish the lesson, you'll learn what it's for.
190203
- **Do you want to install this sample project's dependencies with npm (…)?**
191204
Select 'y'. These are packages (programs) that our project needs to be able to
192-
run.
205+
run.
193206

194207
<Callout emoji='💡' size='md' variant='info'>
195208
The project asked us to install `@nomicfoundation/hardhat-toolbox` in the
@@ -201,21 +214,23 @@ npm install --save-dev hardhat @nomicfoundation/hardhat-toolbox @nomicfoundation
201214
```
202215
</Callout>
203216

204-
We delete some files so we start fresh:
217+
- After these selections, you can expect to see some messages regarding vulnerabilities, npm warnings for deprecated files and prompts to audit. No need to worry, this is to be expected in development, and we all got a shock the first time too! However, if you get messages that say 'ERROR', then jump into the forum and ask for guidance.
218+
219+
In a Hardhat project, the default folders are:
220+
221+
222+
- `contracts/` where the source files for your contracts should be.
223+
- `scripts/` where simple automation scripts go.
224+
- `test/` where your tests should go.
225+
226+
We need to delete some files inside those folders so we can start our own project afresh:
205227

206228
```bash
207229
rm contracts/*.sol
208230
rm scripts/*.js
209231
rm test/*.js
210232
```
211233

212-
In a Hardhat project, the default folders are supposed to be for:
213-
214-
default paths
215-
216-
- `contracts/` is where the source files for your contracts should be.
217-
- `scripts/` is where simple automation scripts go.
218-
- `test/` is where your tests should go.
219234

220235
We now need to add our last dependency (OpenZeppelin contracts):
221236

@@ -230,7 +245,7 @@ widely used and fully tested and audited.
230245
<SideDrawer buttonText="More on Open Zeppelin">
231246
<OpenZeppelin/>
232247
</SideDrawer>
233-
<br/>
248+
234249

235250
<SideDrawer buttonText="Checkpoint Questions" title="Creating a Robust Development Environment">
236251
<Question question="lesson-2/2-tools-environment/Q1" />
@@ -247,9 +262,9 @@ widely used and fully tested and audited.
247262
With our project folder ready, we can now fire up our Code Editor.
248263

249264
<Callout emoji='💡' size='md' variant='info'>
250-
We are using VSCode for this one (we think it has a good balance of costs vs.
251-
benefits) but you can use whatever you feel comfortable with. A few of the more
252-
popular code editors are VSCode, Atom, Sublime, Vim, emacs, and many more.
265+
We are using [VS Code](https://code.visualstudio.com/download) for this project, we think it has a good balance of costs vs.
266+
benefits. But you can use whatever you feel comfortable with. A few of the more
267+
popular code editors are Atom, Sublime, Vim, Emacs, and many more.
253268

254269
</Callout>
255270

@@ -277,11 +292,10 @@ copyright license, the second one defines the solidity version we are going to
277292
be using for this contract and the last two lines are how we declare a smart
278293
contract in solidity.
279294

280-
With an empty project, now we can start adding what we need to create our
281-
awesome NFT collection. In particular, ERC721 (the
282-
formal specification to follow for NFTs) have a lot of requirements to meet
283-
(they should have a numbered ID, functions to transfer them, approve others as
284-
delegates to transfer them, etc).
295+
With an empty project, we can now start adding what we need to create our
296+
awesome NFT collection. ERC721, the
297+
formal specification to follow for NFTs, has a lot of requirements to meet. For example NFTs should have a numbered ID, functions to transfer them, and the ability to approve others as
298+
delegates to transfer them, etc.
285299

286300
<SideDrawer title=" " buttonText="More about Token Standards">
287301
<TokenStandards/>
@@ -296,8 +310,8 @@ going to use them inside our contract.
296310
## Standing on the shoulder of giants
297311

298312
For this we are going to ‘inherit’ (think of _using the properties of_ or
299-
_extending_ for now) the ERC721 contract from OpenZeppelin. In the same way you
300-
_inherit_ the DNA and characteristics from your family/relatives.
313+
_extending_ for now) the ERC721 contract from OpenZeppelin. Or the same way you
314+
_inherit_ the DNA and characteristics from your relatives.
301315

302316
![standing.in.the.shoulder.of.giants.nft.jpeg](/assets/lessons/2/img_5.jpeg)
303317

@@ -609,7 +623,7 @@ Once you got your account, try to upload a few images for our first NFTs.
609623
Ok, now that you have uploaded the images, videos, audio or whatever you want
610624
your NFTs to point at, you need to create the `.json` files in your preferred
611625
text editor. We must name them as numbers (1,2,3,…) without extension, so our
612-
solidity function `tokenURI` works. It will work somewhat like this:
626+
Solidity function `tokenURI` works. It will work somewhat like this:
613627

614628
![ipfs explained.2x.png](/assets/lessons/2/img_13.png)
615629

@@ -622,29 +636,30 @@ and
622636
[here](https://gateway.pinata.cloud/ipfs/Qma2rLNBm4cQ2RXxYt75cRJ42NJHPXXyCZPi9p3Wi4n9et).
623637

624638
Pay special attention to the json files folder, when you add `/1` to the end of
625-
the link, it opens the 1st json file, and does the same for the rest of the ids.
639+
the link, it opens the 1st json file, and does the same for the rest of the IDs.
626640
To achieve this, you need to add the json files all at the same time, as a
627641
**folder** into pinata, and then you get a CID for the folder, which you can
628642
reference with the filenames at the end for each file.
629643

630644
Remember `_baseURI` function in our solidity contract? The one that was used to
631-
create the NFT tokenURI? There's where we are going to get the pinata link with
645+
create the NFT tokenURI? There's where we are going to get the Pinata link with
632646
the CID to our folder.
633647

634648
And, if we filled our JSON files correctly, each with the corresponding CID of
635649
our media, we should be good to go.
636650

637-
Here is a screenshot of how we have set up our files in pinata for this project:
651+
Here is a screenshot of how we have set up our files in Pinata for this project:
638652

639653
![Pinata Setup.png](/assets/lessons/2/img_14.png)
640654

641-
You could use our CID for your project (remember the files are there, just like
642-
when you publish an image in imgur or any other web2, only ours is
643-
decentralized). However, we feel that getting your feet wet and interacting with
655+
You could use our CID for your project, since the files are there already, just like
656+
when you've published an image on Imgur or any other web2 service, only ours is
657+
decentralized. However, we feel that getting your feet wet and interacting with
644658
an IPFS service will surely help you get ahead in your learning.
645659

646660
Have your json files folder IPFS link saved (the full link, that links to all
647661
the files), for we will use it in our next step.
662+
648663
<SideDrawer buttonText="Checkpoint Questions" title="Web3 File Storage and Good Practices">
649664
<Question question="lesson-2/5-sidedrawer-json-ipfs/Q1" />
650665
<Question question="lesson-2/5-sidedrawer-json-ipfs/Q2" />
@@ -653,7 +668,7 @@ the files), for we will use it in our next step.
653668
<Question question="lesson-2/5-sidedrawer-json-ipfs/Q5" />
654669
</SideDrawer>
655670
<br/>
656-
Good for you for taking on this extra adventure 🧙🏾
671+
p.s. Good for you for taking on this extra adventure! 🧙🏾
657672
<br/><br/>
658673
</SideDrawer>
659674

@@ -810,59 +825,60 @@ For us to get our contract out of our computers and into the real world, we are
810825
going to run the deploy again, but this time to a testnet.
811826

812827
What is a testnet? It is a basically a whole running blockchain, but it runs
813-
only so people can try stuff out. On it, you have eth, tokens, NFTs, but they have no monetary value. This way, you can develop and test your contracts without fear of losing real money. For the moment, we are choosing to do this on the Goerli (it's one of the many Ethereum testnets)
828+
only so people can try stuff out. On it, you have ETH, NFTs, other tokens, etc but they have no monetary value. This way, you can develop and test your contracts without fear of losing anything valuable. For the moment, we are choosing to do this on *Sepolia*. It's one of the many of Ethereum testnets.
814829

815-
Before we go any further, let's take an extra step for precaution, until the
816-
next project where we are going to learn how to use collaborative tools to store
817-
our projects. But until then, let's open our main folder's `.gitignore` file an
830+
Before we go any further, let's take an extra step for precaution. In the
831+
next project we'll learn how to use collaborative tools to store
832+
our projects, but for now, let's open our root directory's `.gitignore` file an
818833
add this line anywhere:
819834

820835
```bash
821836
hardhat.config.js
822837
```
823838

824-
In order to do this we need:
839+
In order to deploy to a real testnet we'll need:
825840

826-
- An ethereum wallet that can connect to Goerli.
827-
[Metamask](https://metamask.io/) is the most used.
828-
- Some Goerli-Eth. You can ask for some in a faucet, it's free, although
829-
some are faster than others! Options: [#1](https://goerlifaucet.com/),
830-
[#2](https://faucets.chain.link/goerli), [#3](https://faucet.paradigm.xyz/)
831-
- An API Key from an Ethereum RPC Node Provider
832-
([Alchemy](https://www.alchemy.com/), [Infura](https://infura.io/),
833-
[Ankr](https://rpc.ankr.com/eth_goerli))
834-
- A minor change in the Hardhat Configuration file
841+
- An Ethereum wallet that can connect to Sepolia
842+
[Metamask](https://metamask.io/) is often used
843+
- Some Sepolia-ETH. You can ask for some in a faucet, it's free, although
844+
some are faster than others! Options: [#1](https://faucet.sepolia.dev/),
845+
[#2](https://www.infura.io/faucet/sepolia), [#3](https://faucet.quicknode.com/ethereum/sepolia)
846+
- An API Key from an Ethereum RPC Node Provider e.g. [Infura](https://app.infura.io/), or
847+
[Ankr](https://www.ankr.com/rpc/eth/eth_sepolia/).
848+
- A minor change in the Hardhat configuration file
835849

836-
First and foremost, **security**. We are exploring new grounds, experimenting
837-
and by doing so, we could make mistakes that we don't want to happen where we
838-
have our money.
850+
First and foremost, **security**. We are exploring new grounds, experimenting,
851+
and by doing so, we could make mistakes that we wouldn't want to happen where we
852+
have any assets of value.
839853

840854
We **strongly** recommend you use a separate wallet for developing, completely
841-
independent from the one that holds your personal assets on the blockchain, if you have any.
855+
independent from the one that holds any personal assets you might have on the blockchain.
856+
For example, you could create a new profile for yourself in your favourite browser, and create
857+
your developer wallet in there.
842858

843859
Wallets have a special number, called a private key. You should **never**,
844860
**ever** share your private keys with **anyone**. If anyone has that number,
845861
they can take full control of the wallet, and empty it of all that is in it!
846862

847863
![keys.jpeg](/assets/lessons/2/img_18.jpeg)
848864

849-
To be able to deploy our contract, we are going to use that number, that's why
850-
we recommend, yet again, to use a separate wallet for developing.
865+
To be able to deploy our contract, we are going to use that private key, that's why
866+
we recommend, yet again, to use a separate wallet containing only test tokens for developing.
851867

852868
We need to inform Hardhat which node we are using to connect to the
853869
blockchain/network.
854870

855-
Once you have your wallet funded with test eth, you need sign up for one of the
856-
Ethereum RPC Node Providers. Alchemy and Infura are the most used, Ankr has a "community endpoint" without signing up that is not dedicated, to list a few options.
871+
Once you have your wallet funded with test ETH, you'll need sign up for one of the
872+
Ethereum RPC Node Providers. Alchemy and Infura are the most used. And Ankr has a 'community endpoint' which doesn't require a dedicated sign up, to list a few options.
857873

858874
Once you sign up, you'll be asked to create an App, be sure to select the
859-
Goerli network there.
875+
Sepolia network there.
860876

861877
When the app is created, you'll see a "View Key" button, or similar. Press it
862878
and copy the HTTP link, we'll use it in our next step.
863879

864-
Once you have funded your wallet with fake eth, we can go ahead and change our
865-
Hardhat configuration file. Go into your main project's folder and open
880+
Once you have funded your wallet with fake ETH, we can go ahead and change our
881+
Hardhat configuration file. Go into your project's main directory and open
866882
`hardhat.config.js`.
867883

868884
We are going to replace our file with this:
@@ -881,7 +897,7 @@ const RPC_API_KEY = 'YOUR-API-KEY-FROM-INFURA-OR-ALCHEMY'
881897
module.exports = {
882898
solidity: '0.8.12',
883899
networks: {
884-
goerli: {
900+
sepolia: {
885901
url: RPC_API_KEY,
886902
accounts: [WALLET_PRIVATE_KEY],
887903
},
@@ -926,7 +942,7 @@ deploy, delete all the lines we added to test the minting.
926942
Run:
927943

928944
```bash
929-
npx hardhat run scripts/deploy.js --network goerli
945+
npx hardhat run scripts/deploy.js --network sepolia
930946
```
931947

932948
This is the output i got in my console:
@@ -938,7 +954,7 @@ nonetheless.
938954

939955
Now that we have run the deploy script, delete the private key and the RPC API
940956
key from `hardhat.config.js` to minimize the handling of the wallet. In the next
941-
project we will learn about tools to collaborate and store your projects online
957+
project we will learn about tools to collaborate and store your projects online.
942958

943959
So now we can go and explore the chain to find your contract (and mine too!).
944960
Just go to [Goerli Etherscan](https://goerli.etherscan.io/) (or

0 commit comments

Comments
 (0)