Skip to content

Commit f91eb19

Browse files
committed
Merge branch 'main' of github.com:Developer-DAO/academy
2 parents db3bdc2 + 31ea7f1 commit f91eb19

File tree

12 files changed

+137
-54
lines changed

12 files changed

+137
-54
lines changed

components/CopyToClipboard.tsx

Lines changed: 20 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,20 @@
1+
import { CopyIcon } from '@chakra-ui/icons'
2+
import { Box, Button } from '@chakra-ui/react'
3+
4+
export const CopyToClipboard = (props: any) => {
5+
return (
6+
<Box
7+
position="absolute"
8+
right="5px"
9+
top="5px"
10+
zIndex={1}
11+
bg="gray.700"
12+
border="1px solid silver"
13+
borderRadius="5px"
14+
>
15+
<Button onClick={() => navigator.clipboard.writeText(props.children)}>
16+
<CopyIcon />
17+
</Button>
18+
</Box>
19+
)
20+
}

lessons/fundamentals/wallets.mdx

Lines changed: 84 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,84 @@
1+
---
2+
i18n: 'wallets'
3+
title: Introduction to web3 wallets
4+
description: Overview of wallet use cases and setting up environment.
5+
icons: []
6+
author: ['piablo', 'Meowy']
7+
---
8+
9+
# Web3 wallets, and public and private keys....
10+
11+
### What do we have in store?
12+
13+
If you are reading this, you may be new to blockchain development and want to know a bit about crypto wallets and how you can use them effectively along your way. We’ll look at wallet variants, typical use cases, a wee bit at public and private keys, and we’ll discover why without a wallet we just can’t get near a blockchain! We’ll also give you a run down of best practices on setting up your wallet for development, so you can get to work!
14+
15+
### **First a bit on wallet variants, use cases and users**
16+
17+
A blockchain enthusiast can choose from a few different types of wallets.
18+
19+
Custody.... who holds those elusive keys?
20+
21+
- **Custodial**: *You don't* have the keys, but a *custodian* does e.g. a CEX - centralised exchange
22+
- **Non custodial**: *You do* have the keys. You’re a web3 boss!
23+
- **Shared custody**: Multiple people have different individual keys i.e. a multi-sig
24+
25+
Wallets vary on their connectivity...
26+
- **Hot**: Always connected to the internet e.g. a browser extension, a mobile app, a CEX wallet
27+
- **Warm**: Connected, but requires human interaction to sign.... a more recent development
28+
- **Cold**: Never connected to the internet e.g. a USB hardware wallet, a paper wallet
29+
30+
The crypto original is the paper wallet. Make sure you have **at least** one paper, or alternative offline variant for all your private and public keys, ***mnemonic*** details and passwords, and keep them somewhere ***really.....really.....really*** safe.
31+
32+
![wallet_choices.png](/assets/lessons/wallets/wallet_choices.png)
33+
34+
<center>A few hot wallets</center>
35+
36+
A typical user would have a wallet for making transactions such as buying, selling, swapping, or *staking* of all sorts of crypto tokens. Also for *signing* other messages, e.g. casting a vote, claiming attendance at an event, proving identity, or getting access to an organisation’s Discord server. Multi-sig wallets, or safes are often used by organisations for added security. ***Multi***ple ***sig***natures are required to sign off on decisions or to authorise transactions. The list of types and use cases is growing fast. You may even use your own shiny, new wallet to sign and prove that you have completed a lesson you are doing right now!
37+
38+
### So you what actually goes on in this wallet?
39+
40+
First things first. A wallet doesn’t hold any tokens. It’s a miracle of software, which acts like a window, letting you look from a centralised Web2 internet into a decentralised Web3 network where for example those tokens ***do*** live on a blockchain ledger. Remember these two webs are not naturally connected. The wallet is actually how an everyday user or developer can connect with a blockchain, and also signal their digital identity and ownership of their assets.
41+
42+
![window.ethereum.code.png](/assets/lessons/wallets/window.ethereum.code.png)
43+
44+
What the wallet ***does*** hold, are called a public and private key pair, and let’s not forget the mnemonic seed recovery phrase that generates this key pair, all of which you should have noted safely on your cold paper wallet. Right?
45+
46+
47+
### Public and private keys. A simple analogy
48+
49+
Let’s remember that we are talking about a world of digital infrastructure where everything we send, receive and store as messages is represented……yes, digitally. Messages can be digital files of music, text, PDFs, video, you name it, and let’s not forget, digital money i.e. ***crypto***graphic ***tokens***. So we can think of a public key as an email address to which anyone can send an email message. And we can similarly consider a private key, as the password of that email account. We need the password to see, send and sign any messages and prove they are destined **for** us, or come **from** us.
50+
51+
![qafkeys.png](/assets/lessons/wallets/qafkeys.png)
52+
53+
So, the public key is our digital identity on a decentralised network e.g. a blockchain. Therefore if the last project you worked on has forgotten to pay you, make sure they have your public key, so they can send you a digital message ..... containing some digital money! And that private key of yours is what you use to sign any action, whether it is seeing or transacting with your assets, or simply proving who you are. Sharing your public keys is pretty much what you *do* want to do, but sharing your private keys is certainly not.
54+
55+
56+
### Generation of your wallet keys and blockchain address - the basics
57+
58+
On downloading a wallet, the application generates a private key and an accompanying mnemonic phrase (12 or 24 random words from a finite list), which in turn generates a public key, and that gets *encoded* with the Keccak-256 *hashing function* to create an cryptographic blockchain address just for you. Lots of maths and cryptography!
59+
60+
![EthAddressGenerated.png](/assets/lessons/wallets/EthAddressGenerated.png)
61+
62+
Public Key Cryptography, even at a simplistic level, warrants some time, and we look forward to giving it proper attention in a dedicated blockchain fundamentals section. It is a cornerstone to the integrity of decentralised networks, letting us interact with each other on them safely. Together, they are a powerful pair for proving your identity and what you own. **Guard your seed/recovery phrases and private keys with your life!**
63+
64+
### Enough chit-chat. Let’s get you set up…… **with safety in mind!**
65+
66+
**Step 1**. We recommend that you **do not** use your personal wallet for web development. And you can actually make your life a lot less complicated by creating a new browser profile for each new wallet. You can see below, I have different use cases for wallets, and have a separate browser profile for each with its own wallet:
67+
68+
![profiles_on_browser.png](/assets/lessons/wallets/profiles_on_browser.png)
69+
70+
You will have a separate mnemonic seed phrase, plus public and private keys for each one, *and* you will need to create a password, all of which you need to store safely somewhere. You can generate any number of key pairs from the seed phrase, which means that you can create as many accounts as you want inside a particular wallet. As a developer, that’s handy when you need to send test transactions to mock actors when you are testing your apps. I also have a few accounts in my dev_workshops wallet.
71+
72+
**Step 2**. Download a wallet. We are going to be using Metamask. It’s a well audited wallet with lots of features to get our job done.<a style={{textDecoration: 'underline'}} href="https://metamask.io/" target="\_blank">Download MetaMask</a> and follow the steps carefully:
73+
74+
![MM_for_Brave.png](/assets/lessons/wallets/MM_for_Brave.png)
75+
76+
When you have completed your download, **make sure that you have your new address, your keys, recovery phrase and password written down on paper and/or stored safely offline. If you have them saved on your machine and your operating system dies for whatever reason, you have no way of recovering these private details. There’s no customer service. Gone is gone.**
77+
78+
### Ready to Roll!
79+
80+
We will have a separate article on using Git and Github, as you will likely be using shared public repositories quite often. We will show you how to safely store private keys in private **.env** files. Stay tuned for that.
81+
82+
Now you should be ready to get up and running with your projects. If you need test ETH, see the end of our article on *Testnets*, where you can find steps to the *faucet* for Goerli Testnet. And check out *Connect with RPC* for when you need to start deploying your work to the distributed networks that make up Web3.
83+
84+
Don't lose those keys and happy coding!!!

lessons/projects/1.mdx

Lines changed: 11 additions & 21 deletions
Original file line numberDiff line numberDiff line change
@@ -347,8 +347,6 @@ some more about them in **Variables** and **Functions**.
347347

348348
<ContentSideDrawer title="More on Functions">
349349

350-
[edits: More on Functions ](https://www.notion.so/edits-More-on-Functions-f2e049d12a264040b23c8f562d63f6c6)
351-
352350
Functions are the way we have to store logic inside a Smart Contract.
353351

354352
They can receive typed parameters and also return them. Solidity is a typed language, so every parameter type must be specified.
@@ -689,35 +687,27 @@ you see the magical spell that is being cast here?
689687
![Wizard Wooshing on Successful Lesson](/assets/lessons/1/img_10.png)
690688

691689
Before you go ahead and tell us: **what your future in web3 is,** have a check
692-
on what you didn’t know a little while ago, and what you know now! **Fellow
693-
devs: the answers to these questions are in each comment. Could we use a simple
694-
form for this for now with just a hover over the question to display the answer
695-
(or something more creative). The user wouldn’t have to actually answer the
696-
questions for MVP, but we want to let them self test, using their own trust to
697-
see what they do and don’t know at this stage. On top of that, we want to get
698-
some feedback as to the nature of the questions and maybe get some feedback on
699-
the actual presentation style/method which is pretty unadventurous here, so we
700-
can get creative and also more meaningful later.**
690+
on what you didn’t know a little while ago, and what you know now! *
701691

702-
Addresses: Apart from a user wallet, what else uses a blockchain (Ethereum)
692+
Apart from a user wallet, what else uses a blockchain (Ethereum)
703693
address?
704694

705-
Events: How many parameters can we have in an event?
695+
How many parameters can we have in an event?
706696

707-
Searching the chain: What can we use to find a past event?
697+
What can we use to find a past event?
708698

709-
Transactions: Ethereum uses something for transaction fees. What’s it called?
699+
Ethereum uses something for transaction fees. What’s it called?
710700

711-
Logs: Where do the values for event parameters get stored?
701+
Where do the values for event parameters get stored?
712702

713-
Versions: What is the use of the **pragma solidity** statement in our smart
703+
What is the use of the **pragma solidity** statement in our smart
714704
contract?
715705

716-
State variables: Do state variables stay permanently on the blockchain?
706+
Do state variables stay permanently on the blockchain?
717707

718-
Visibility: Can a view function modify the state of the blockchain?
708+
Can a view function modify the state of the blockchain?
719709

720-
Use cases of smart contract: What can we use a smart contract for?
710+
What can we use a smart contract for?
721711

722712
**Now, go to the community in Discord to share your new Open Sourcerer
723-
powers**!!!
713+
powers**......and find the answers too!!!

package.json

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -14,7 +14,7 @@
1414
"confirm": "yarn style && yarn lint && yarn build"
1515
},
1616
"dependencies": {
17-
"@chakra-ui/icons": "^2.0.1",
17+
"@chakra-ui/icons": "^2.0.10",
1818
"@chakra-ui/react": "^2.0.2",
1919
"@emotion/react": "^11",
2020
"@emotion/styled": "^11",

pages/lessons/[lesson]/[slug].tsx

Lines changed: 6 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,4 @@
1-
import { Code, Flex, Heading, Image, Text } from '@chakra-ui/react'
1+
import { Code, Box, Heading, Image, Text } from '@chakra-ui/react'
22
import { serialize } from 'next-mdx-remote/serialize'
33
import { MDXRemote, MDXRemoteSerializeResult } from 'next-mdx-remote'
44
import fs from 'fs'
@@ -9,6 +9,7 @@ import dracula from 'react-syntax-highlighter/dist/cjs/styles/prism/dracula'
99
import ContentSideDrawer from '../../../components/ContentSideDrawer'
1010
import ContentCallout from '../../../components/ContentCallout'
1111
import { ActionButton } from '../../../components/ActionButton'
12+
import { CopyToClipboard } from '../../../components/CopyToClipboard'
1213

1314
interface LessonProps {
1415
frontMatter: object
@@ -33,7 +34,10 @@ const components = {
3334

3435
if (language) {
3536
return (
36-
<SyntaxHighlighter language={language} {...props} style={dracula} />
37+
<Box position="relative">
38+
<SyntaxHighlighter language={language} {...props} style={dracula} />
39+
<CopyToClipboard {...props} />
40+
</Box>
3741
)
3842
}
3943

103 KB
Loading
20.4 KB
Loading
51.6 KB
Loading
49.8 KB
Loading
51.1 KB
Loading

0 commit comments

Comments
 (0)