Skip to content

Commit ace3fc5

Browse files
wslyvhwslyvh
committed
draft flows
1 parent 6b03d4f commit ace3fc5

36 files changed

+574
-103
lines changed

‎learn/fundamentals/01.md

+7
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,7 @@
1+
---
2+
name: Cryptography
3+
description: Learn about basic cryptography, hashing, encryption and public-key cryptography.
4+
type: learn
5+
---
6+
7+
Learn about basic cryptography, hashing, encryption and public-key cryptography.

‎learn/fundamentals/02.md

+7
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,7 @@
1+
---
2+
name: Blocks
3+
description: What are blocks and how are they linked together.
4+
type: learn
5+
---
6+
7+
What are blocks and how are they linked together.

‎learn/fundamentals/03.md

+7
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,7 @@
1+
---
2+
name: Transactions
3+
description: Learn all about transactions
4+
type: learn
5+
---
6+
7+
Learn all about transactions

‎learn/fundamentals/04.md

+7
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,7 @@
1+
---
2+
name: Keys
3+
description: Public-/private key pairs control ownership of your wallet and funds.
4+
type: learn
5+
---
6+
7+
Public-/private key pairs control ownership of your wallet and funds.

‎learn/fundamentals/metadata.json

+2
Original file line numberDiff line numberDiff line change
@@ -2,6 +2,8 @@
22
"version": 1,
33
"name": "Fundamentals",
44
"description": "This journey helps you guide through some of the fundamental aspects of blockchain and Web3 development. You'll learn about basic cryptography, blocks, transactions, keys and how that's all linked together.",
5+
"level": "Beginner",
6+
"tags": ["Web3", "Blockchain", "Cryptography"],
57
"image": "",
68
"website": "https://www.useweb3.xyz/",
79
"twitter": "useWeb3",

‎learn/introduction/03_quizzes.md

+1-1
Original file line numberDiff line numberDiff line change
@@ -4,4 +4,4 @@ description: Quizzes
44
type: quiz
55
---
66

7-
Quizzes
7+
Quizzes will allow you to test if the previous learning modules were correctly understood.

‎learn/introduction/metadata.json

+2
Original file line numberDiff line numberDiff line change
@@ -2,6 +2,8 @@
22
"version": 1,
33
"name": "Introduction",
44
"description": "This starter module gets you up and running with the learning modules of useWeb3.",
5+
"level": "All",
6+
"tags": ["Fundamentals"],
57
"image": "",
68
"website": "https://www.useweb3.xyz/",
79
"twitter": "useWeb3"

‎learn/wallets/01.md

+1-3
Original file line numberDiff line numberDiff line change
@@ -1,11 +1,9 @@
11
---
2-
name: The keys to your digital future
2+
name: What's an Ethereum wallet?
33
description: Wallets give access to your funds and Ethereum applications.
44
type: learn
55
---
66

7-
# What's an Ethereum wallet?
8-
97
Ethereum wallets are applications that let you interact with your Ethereum account. Think of it like an internet banking app – without the bank. Your wallet lets you read your balance, send transactions and connect to applications.
108

119
You need a wallet to send funds and manage your ETH.

‎learn/wallets/02.md

+1-3
Original file line numberDiff line numberDiff line change
@@ -4,6 +4,4 @@ description: Wallets make use of public-private key pairs to control ownership o
44
type: learn
55
---
66

7-
# Public-Key Cryptography
8-
9-
...
7+
Public-key cryptography, or asymmetric cryptography, is a cryptographic system that uses pairs of keys. Each pair consists of a public key (which may be known to others) and a private key (which may not be known by anyone except the owner).[1] The generation of such key pairs depends on cryptographic algorithms which are based on mathematical problems termed one-way functions. Effective security requires keeping the private key private; the public key can be openly distributed without compromising security.

‎learn/wallets/03.md

+6-7
Original file line numberDiff line numberDiff line change
@@ -1,13 +1,12 @@
11
---
2-
name: Question 1
3-
description: Answer this question
2+
name: Derive a wallet address
3+
description: How to derive a wallet address from a secret recovery phrase.
44
type: quiz
5+
note: NEVER SHARE YOUR SECRET RECOVERY PHRASE WITH ANYONE! Losing access to your secret recovery phrase, or private key means you'll lose access to your account, ETH, NFTs and other funds.
56
---
67

7-
# What is ...
8+
Consider you have the following secret ('mnemonic') phrase.
89

9-
The public key behind private key..
10+
`announce room limb pattern dry unit scale effort smooth jazz weasel alcohol`
1011

11-
..
12-
13-
*NOTE: NEVER SHARE YOUR PRIVATE KEY WITH ANYONE! Copy and pasting a private key is a bad practice and should only be done for this exercise. Losing access to your private key means you'll lose access to your account, ETH, NFTs and other funds.
12+
What would be the corresponding address on it's first, default derivation path?

‎learn/wallets/metadata.json

+2
Original file line numberDiff line numberDiff line change
@@ -2,6 +2,8 @@
22
"version": 1,
33
"name": "Wallets",
44
"description": "Learn more about wallets, what they are, what they allow you to do and how you can use them to explore Web3.",
5+
"level": "Beginner",
6+
"tags": ["Security", "Cryptography"],
57
"image": "",
68
"website": "https://www.useweb3.xyz/",
79
"twitter": "useWeb3",

‎next.config.js

+2-1
Original file line numberDiff line numberDiff line change
@@ -3,7 +3,8 @@ module.exports = {
33
images: {
44
domains: [
55
'dl.airtable.com',
6-
'www.datocms-assets.com'
6+
'www.datocms-assets.com',
7+
'acegif.com'
78
],
89
},
910
}

‎src/assets/styles/globals.scss

+48
Original file line numberDiff line numberDiff line change
@@ -69,3 +69,51 @@ article {
6969
color: var(--color-neutral-500);
7070
font-size: smaller;
7171
}
72+
73+
.markdown {
74+
p,
75+
ul,
76+
ol,
77+
h1,
78+
h2,
79+
h3,
80+
h4,
81+
h5,
82+
h6,
83+
blockquote,
84+
image,
85+
code {
86+
margin-bottom: $gap-16;
87+
}
88+
89+
code {
90+
padding: $gap-8;
91+
font-family: $font-secondary;
92+
background: #eee;
93+
}
94+
95+
ul,
96+
ol,
97+
ul ul,
98+
ol ul,
99+
ol ol,
100+
ul ol {
101+
list-style-position: inside;
102+
margin-left: $gap-16;
103+
margin-top: 0;
104+
}
105+
106+
ul ul,
107+
ol ul {
108+
list-style-type: circle;
109+
margin-top: $gap-8;
110+
margin-bottom: $gap-8;
111+
}
112+
113+
ol ol,
114+
ul ol {
115+
list-style-type: lower-latin;
116+
margin-top: $gap-8;
117+
margin-bottom: $gap-8;
118+
}
119+
}

‎src/assets/styles/variables.scss

+1
Original file line numberDiff line numberDiff line change
@@ -5,6 +5,7 @@
55

66
// Fonts
77
$font-primary: 'JetBrains Mono', 'Courier New', monospace;
8+
$font-secondary: 'Times New Roman', 'Georgia', serif;
89

910
// Weight
1011
$font-normal: 400;

‎src/components/alert.module.scss

+59
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,59 @@
1+
@use 'assets/styles/variables.scss' as *;
2+
3+
.container {
4+
display: flex;
5+
border-radius: $gap-8;
6+
margin-bottom: $gap-16;
7+
padding: $gap-16;
8+
align-items: center;
9+
10+
.icon {
11+
margin-left: $gap-16;
12+
margin-right: $gap-32;
13+
display: flex;
14+
align-items: center;
15+
justify-content: center;
16+
font-size: $size-20;
17+
flex-shrink: 0;
18+
}
19+
20+
p {
21+
margin-bottom: 0;
22+
}
23+
}
24+
25+
.info {
26+
@extend .container;
27+
background: var(--color-info);
28+
29+
.icon {
30+
color: var(--color-info-dark);
31+
}
32+
}
33+
34+
.success {
35+
@extend .container;
36+
background: var(--color-success);
37+
38+
.icon {
39+
color: var(--color-success-dark);
40+
}
41+
}
42+
43+
.warning {
44+
@extend .container;
45+
background: var(--color-warning);
46+
47+
.icon {
48+
color: var(--color-warning-dark);
49+
}
50+
}
51+
52+
.error {
53+
@extend .container;
54+
background: var(--color-error);
55+
56+
.icon {
57+
color: var(--color-error-dark);
58+
}
59+
}

‎src/components/alert.tsx

+25
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,25 @@
1+
import React from 'react'
2+
import styles from './alert.module.scss'
3+
4+
interface Props {
5+
text: string
6+
type: 'info' | 'success' | 'warning' | 'error'
7+
className?: string
8+
}
9+
10+
export function Alert(props: Props) {
11+
let className = styles[props.type]
12+
if (props.className) className += ` ${props.className}`
13+
14+
return (
15+
<section className={className}>
16+
<div className={styles.icon}>
17+
{props.type === 'info' && <i className="bi bi-info-circle" />}
18+
{props.type === 'success' && <i className="bi bi-check-circle" />}
19+
{props.type === 'warning' && <i className="bi bi-exclamation-triangle" />}
20+
{props.type === 'error' && <i className="bi bi-exclamation-octagon" />}
21+
</div>
22+
<p className={styles.description}>{props.text}</p>
23+
</section>
24+
)
25+
}

‎src/components/divider.module.scss

+6
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,6 @@
1+
@use 'assets/styles/variables.scss' as *;
2+
3+
.container {
4+
margin: $gap-16 0;
5+
border-bottom: 3px dotted var(--color-primary-100);
6+
}

‎src/components/divider.tsx

+12
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,12 @@
1+
import styles from './divider.module.scss'
2+
3+
interface Props {
4+
className?: string
5+
}
6+
7+
export function Divider(props: Props) {
8+
let className = `${styles.container}`
9+
if (props.className) className += ` ${props.className}`
10+
11+
return <hr className={className} />
12+
}

‎src/components/learn/celebrate.module.scss

+7
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,7 @@
1+
@use 'assets/styles/variables.scss' as *;
2+
3+
.container {
4+
margin: $gap-32 0;
5+
position: relative;
6+
height: 200px;
7+
}

‎src/components/learn/celebrate.tsx

+22
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,22 @@
1+
import styles from './celebrate.module.scss'
2+
import Image from 'next/image'
3+
4+
interface Props {
5+
className?: string
6+
}
7+
8+
export function Celebrate(props: Props) {
9+
let className = `${styles.container}`
10+
if (props.className) className += ` ${props.className}`
11+
12+
return (
13+
<div className={className}>
14+
<Image
15+
src="https://acegif.com/wp-content/uploads/funny-celebrate-8.gif"
16+
alt="Celebrate!"
17+
layout="fill"
18+
objectFit="contain"
19+
/>
20+
</div>
21+
)
22+
}

‎src/components/learn/container.module.scss

+6-1
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,10 @@
11
@use 'assets/styles/variables.scss' as *;
22

33
.container {
4-
//
4+
.navigator {
5+
display: flex;
6+
align-items: center;
7+
justify-content: space-between;
8+
margin-bottom: $gap-8;
9+
}
510
}

0 commit comments

Comments
 (0)