From fa9d8650fa78f8f4581c313c6a309af028d73f17 Mon Sep 17 00:00:00 2001 From: Corwin Smith Date: Sat, 17 Sep 2022 15:00:13 +0200 Subject: [PATCH 001/151] base start to quiz component --- src/assets/trophy.svg | 11 +++++ src/components/Quiz/Quiz.tsx | 52 ++++++++++++++++++++++ src/components/Quiz/QuizQuestion.tsx | 39 ++++++++++++++++ src/data/learnQuzzes/index.ts | 8 ++++ src/data/learnQuzzes/whatIsEthereumQuiz.ts | 35 +++++++++++++++ src/intl/en/quizzes.json | 3 ++ src/pages-conditional/what-is-ethereum.tsx | 16 +++++++ 7 files changed, 164 insertions(+) create mode 100644 src/assets/trophy.svg create mode 100644 src/components/Quiz/Quiz.tsx create mode 100644 src/components/Quiz/QuizQuestion.tsx create mode 100644 src/data/learnQuzzes/index.ts create mode 100644 src/data/learnQuzzes/whatIsEthereumQuiz.ts create mode 100644 src/intl/en/quizzes.json diff --git a/src/assets/trophy.svg b/src/assets/trophy.svg new file mode 100644 index 00000000000..a571d7f990a --- /dev/null +++ b/src/assets/trophy.svg @@ -0,0 +1,11 @@ + + + + + + + + + + + diff --git a/src/components/Quiz/Quiz.tsx b/src/components/Quiz/Quiz.tsx new file mode 100644 index 00000000000..62572e5db75 --- /dev/null +++ b/src/components/Quiz/Quiz.tsx @@ -0,0 +1,52 @@ +// Libraries +import React, { useState } from "react" +import { Box, Center, Text, useColorMode } from "@chakra-ui/react" + +// Components +import QuizQuestion from "./QuizQuestion" + +// Types +export interface IProps { + quiz: any +} + +const Quiz: React.FC = ({ quiz }) => { + const { colorMode } = useColorMode() + const [currentQuestionIndex, updateCurrentQuestionIndex] = useState(0) + const [quizData, setQuizdata] = useState( + quiz.questions.map((question) => { + return { + ...question, + userAnswer: undefined, + } + }) + ) + + return ( + +
+ + {quiz.title} + +
+
+ +
+ + ) +} + +export default Quiz diff --git a/src/components/Quiz/QuizQuestion.tsx b/src/components/Quiz/QuizQuestion.tsx new file mode 100644 index 00000000000..25f304d2173 --- /dev/null +++ b/src/components/Quiz/QuizQuestion.tsx @@ -0,0 +1,39 @@ +// Libraries +import React from "react" +import { Box, Text, useColorMode } from "@chakra-ui/react" + +// Types +export interface IProps { + questionData: any +} + +const QuizQuestion: React.FC = ({ questionData }) => { + const { colorMode } = useColorMode() + const { answers, question } = questionData + return ( + + + {question} + + {Object.keys(answers).map((key) => { + return ( + + + {key} + + + {answers[key].label} + + + ) + })} + + ) +} + +export default QuizQuestion diff --git a/src/data/learnQuzzes/index.ts b/src/data/learnQuzzes/index.ts new file mode 100644 index 00000000000..853ef5b152f --- /dev/null +++ b/src/data/learnQuzzes/index.ts @@ -0,0 +1,8 @@ +// Quizzes +import whatIsEthereumQuiz from "./whatIsEthereumQuiz" + +const quizzes = { + "what-is-ethereum": whatIsEthereumQuiz, +} + +export default quizzes diff --git a/src/data/learnQuzzes/whatIsEthereumQuiz.ts b/src/data/learnQuzzes/whatIsEthereumQuiz.ts new file mode 100644 index 00000000000..d5ccb87e745 --- /dev/null +++ b/src/data/learnQuzzes/whatIsEthereumQuiz.ts @@ -0,0 +1,35 @@ +const whatIsEthereumQuiz = { + title: "What is Ethereum Quiz", + questions: [ + { + correctAnswer: "b", + question: "What is the biggest difference between Bitcoin and Ethereum?", + answers: { + a: { + label: + "Bitcoin has middlemen that mediate transactions, Ethereum does not", + description: + "The whole point of cryptocurrency, any cryptocurrency, is that you can transact directly with whoever you wish, without the need for middlemen", + }, + b: { + label: "Ethereum is programmable, Bitcoin is not", + description: + "Unlike Bitcoin, Ethereum has smart contracts, expanding the utility of the network past payments.", + }, + c: { + label: + "Ethereum has middlemen that mediate transactions, Bitcoin does not", + description: + "The whole point of cryptocurrency, any cryptocurrency, is that you can transact directly with whoever you wish, without the need for middlemen", + }, + d: { + label: "Ethereum preserves privacy, Bitcoin does not", + description: + "Every node needs to be able to verify the blockchain's history from the beginning until the present. Therefore, there are no secrets on the blockchain. The only way to preserve privacy on the blockchain is to use private keys (and therefore identities) that cannot be traced back to you. This is possible on both Bitcoin and Ethereum.", + }, + }, + }, + ], +} + +export default whatIsEthereumQuiz diff --git a/src/intl/en/quizzes.json b/src/intl/en/quizzes.json new file mode 100644 index 00000000000..b282abfe306 --- /dev/null +++ b/src/intl/en/quizzes.json @@ -0,0 +1,3 @@ +{ + "quiz-test-your-knowledge": "Test your knowledge" +} diff --git a/src/pages-conditional/what-is-ethereum.tsx b/src/pages-conditional/what-is-ethereum.tsx index e3d088f9db7..55322f72a2f 100644 --- a/src/pages-conditional/what-is-ethereum.tsx +++ b/src/pages-conditional/what-is-ethereum.tsx @@ -35,6 +35,7 @@ import AdoptionChart from "../components/AdoptionChart" import EnergyConsumptionChart from "../components/EnergyConsumptionChart" import Slider, { EmblaSlide } from "../components/Slider" import FeedbackCard from "../components/FeedbackCard" +import Quiz from "../components/Quiz/Quiz" import { getLocaleForNumberFormat, @@ -52,6 +53,9 @@ import { GATSBY_FUNCTIONS_PATH } from "../constants" import { Context } from "../types" import StatErrorMessage from "../components/StatErrorMessage" import StatLoadingMessage from "../components/StatLoadingMessage" +import { Center } from "@chakra-ui/react" + +import quizzes from "../data/learnQuzzes/index" const Slogan = styled.p` font-style: normal; @@ -942,6 +946,18 @@ const WhatIsEthereumPage = ({ + + +
+

+ +

+
+
+ +
+ + From f8bcc47db20dd7b0393652f7cbf06daba4bad234 Mon Sep 17 00:00:00 2001 From: Corwin Smith Date: Sat, 17 Sep 2022 16:50:31 +0200 Subject: [PATCH 002/151] resolve quiz based on url, or with quizKey --- src/components/Quiz/Quiz.tsx | 50 +++++++++++++++------- src/pages-conditional/what-is-ethereum.tsx | 4 +- 2 files changed, 36 insertions(+), 18 deletions(-) diff --git a/src/components/Quiz/Quiz.tsx b/src/components/Quiz/Quiz.tsx index 62572e5db75..f5bb31611a8 100644 --- a/src/components/Quiz/Quiz.tsx +++ b/src/components/Quiz/Quiz.tsx @@ -1,28 +1,45 @@ // Libraries -import React, { useState } from "react" +import React, { useEffect, useState } from "react" import { Box, Center, Text, useColorMode } from "@chakra-ui/react" // Components import QuizQuestion from "./QuizQuestion" +// Data +import quizzes from "../../data/learnQuzzes/index" + // Types export interface IProps { - quiz: any + quizKey?: string | undefined } -const Quiz: React.FC = ({ quiz }) => { +const Quiz: React.FC = ({ quizKey }) => { const { colorMode } = useColorMode() const [currentQuestionIndex, updateCurrentQuestionIndex] = useState(0) - const [quizData, setQuizdata] = useState( - quiz.questions.map((question) => { - return { - ...question, - userAnswer: undefined, - } - }) - ) + const [quizData, setQuizData] = useState(undefined) + + useEffect(() => { + if (typeof window !== "undefined") { + const baseQuizKey = + quizKey || + Object.keys(quizzes).filter((quizUri) => + window.location.href.includes(quizUri) + )[0] + setQuizData({ + ...quizzes[baseQuizKey], + questions: quizzes[baseQuizKey].questions.map((question) => { + return { + ...question, + userAnswer: undefined, + } + }), + }) + } + }, []) - return ( + console.log(quizData) + + return !quizData ? null : ( = ({ quiz }) => { bg={colorMode === "dark" ? "gray.900" : "white"} borderRadius={"4px"} boxShadow={"0px 9px 16px -6px rgba(0, 0, 0, 0.13)"} - padding={"49px 62px"} + padding={{ + md: "49px 62px", + base: "20px 30px", + }} >
= ({ quiz }) => { fontWeight={"700"} color={colorMode === "dark" ? "orange.300" : "blue.300"} > - {quiz.title} + {quizData.title}
- +
) diff --git a/src/pages-conditional/what-is-ethereum.tsx b/src/pages-conditional/what-is-ethereum.tsx index 55322f72a2f..dd0a92dcf11 100644 --- a/src/pages-conditional/what-is-ethereum.tsx +++ b/src/pages-conditional/what-is-ethereum.tsx @@ -55,8 +55,6 @@ import StatErrorMessage from "../components/StatErrorMessage" import StatLoadingMessage from "../components/StatLoadingMessage" import { Center } from "@chakra-ui/react" -import quizzes from "../data/learnQuzzes/index" - const Slogan = styled.p` font-style: normal; font-weight: normal; @@ -954,7 +952,7 @@ const WhatIsEthereumPage = ({
- +
From 7a711baba705aa8b2c32b2a88af9bd672c6dc164 Mon Sep 17 00:00:00 2001 From: Corwin Smith Date: Thu, 22 Sep 2022 14:57:03 -0600 Subject: [PATCH 003/151] temp --- .../gatsby-plugin/components/Button.ts | 25 +++++++++ .../gatsby-plugin/semanticTokens.ts | 1 + src/components/Quiz/Quiz.tsx | 46 +++++++++++++-- src/components/Quiz/QuizQuestion.tsx | 56 ++++++++++++++----- src/data/learnQuzzes/whatIsEthereumQuiz.ts | 22 ++++++++ 5 files changed, 131 insertions(+), 19 deletions(-) diff --git a/src/@chakra-ui/gatsby-plugin/components/Button.ts b/src/@chakra-ui/gatsby-plugin/components/Button.ts index 17f5c9ee98d..473bc938b6b 100644 --- a/src/@chakra-ui/gatsby-plugin/components/Button.ts +++ b/src/@chakra-ui/gatsby-plugin/components/Button.ts @@ -26,6 +26,28 @@ const commonOutline = { }, } +const quizButton = { + width: "100%", + whiteSpace: "inherit", + justifyContent: "start", + marginBottom: "16px", + bg: "quizButton", + border: "1px", + borderColor: "transparent", + _hover: { + borderColor: "primary", + boxSizing: "border-box", + }, + _focus: { + borderColor: "transparent", + boxShadow: "none", + }, + _active: { + bg: "primary", + color: "buttonColor", + }, +} + export const Button: ComponentStyleConfig = { baseStyle: { fontWeight: "normal", @@ -70,5 +92,8 @@ export const Button: ComponentStyleConfig = { color: "primary", borderColor: "primary", }, + quizButton: { + ...quizButton, + }, }, } diff --git a/src/@chakra-ui/gatsby-plugin/semanticTokens.ts b/src/@chakra-ui/gatsby-plugin/semanticTokens.ts index 7adbb3436e7..7be88b03847 100644 --- a/src/@chakra-ui/gatsby-plugin/semanticTokens.ts +++ b/src/@chakra-ui/gatsby-plugin/semanticTokens.ts @@ -38,6 +38,7 @@ const semanticTokens = { bodyLight: { _light: "gray.500", _dark: "gray.100" }, disabled: { _light: "gray.400", _dark: "gray.500" }, background: { _light: "white", _dark: "gray.700" }, + quizButton: { _light: "gray.100", _dark: "gray.700" }, success: "green.500", error: "red.500", attention: "yellow.200", diff --git a/src/components/Quiz/Quiz.tsx b/src/components/Quiz/Quiz.tsx index f5bb31611a8..e4c81ee23ec 100644 --- a/src/components/Quiz/Quiz.tsx +++ b/src/components/Quiz/Quiz.tsx @@ -1,8 +1,18 @@ // Libraries import React, { useEffect, useState } from "react" -import { Box, Center, Text, useColorMode } from "@chakra-ui/react" +import { + Box, + ButtonGroup, + Center, + Container, + Grid, + GridItem, + Text, + useColorMode, +} from "@chakra-ui/react" // Components +import Button from "../Button" import QuizQuestion from "./QuizQuestion" // Data @@ -15,7 +25,7 @@ export interface IProps { const Quiz: React.FC = ({ quizKey }) => { const { colorMode } = useColorMode() - const [currentQuestionIndex, updateCurrentQuestionIndex] = useState(0) + const [currentQuestionIndex, setCurrentQuestionIndex] = useState(1) const [quizData, setQuizData] = useState(undefined) useEffect(() => { @@ -37,8 +47,6 @@ const Quiz: React.FC = ({ quizKey }) => { } }, []) - console.log(quizData) - return !quizData ? null : ( = ({ quizKey }) => { {quizData.title} +
+ {quizData.questions.map((question) => { + console.log(question) + return ( + + ) + })} +
+
+ + {currentQuestionIndex > 0 ? ( + + ) : null} + + +
) } diff --git a/src/components/Quiz/QuizQuestion.tsx b/src/components/Quiz/QuizQuestion.tsx index 25f304d2173..f130b3d939d 100644 --- a/src/components/Quiz/QuizQuestion.tsx +++ b/src/components/Quiz/QuizQuestion.tsx @@ -1,6 +1,9 @@ // Libraries -import React from "react" -import { Box, Text, useColorMode } from "@chakra-ui/react" +import React, { useState } from "react" +import { Box, Circle, Text, useColorMode } from "@chakra-ui/react" + +// Components +import Button from "../Button" // Types export interface IProps { @@ -10,26 +13,49 @@ export interface IProps { const QuizQuestion: React.FC = ({ questionData }) => { const { colorMode } = useColorMode() const { answers, question } = questionData + const [selectedAnswer, setSelectedAnswer] = useState( + undefined + ) + return ( - + {question} {Object.keys(answers).map((key) => { + const active = selectedAnswer === key + const iconBackgroundDark = active ? "orange.800" : "gray.500" + const iconBackgroundLight = active ? "blue.300" : "gray.400" + return ( - { + setSelectedAnswer(key) + }} + leftIcon={ + + + {key.toUpperCase()} + + + } > - - {key} - - - {answers[key].label} - - + {answers[key].label} + ) })} diff --git a/src/data/learnQuzzes/whatIsEthereumQuiz.ts b/src/data/learnQuzzes/whatIsEthereumQuiz.ts index d5ccb87e745..8457dcd3b64 100644 --- a/src/data/learnQuzzes/whatIsEthereumQuiz.ts +++ b/src/data/learnQuzzes/whatIsEthereumQuiz.ts @@ -29,6 +29,28 @@ const whatIsEthereumQuiz = { }, }, }, + { + correctAnswer: "a", + question: "Blah Blah", + answers: { + a: { + label: "a", + description: "a", + }, + b: { + label: "b", + description: "b", + }, + c: { + label: "c", + description: "c", + }, + d: { + label: "d", + description: "d", + }, + }, + }, ], } From 096bd8f45ddcaa253bea66e7f63298fe7926a73d Mon Sep 17 00:00:00 2001 From: Paul Wackerow <54227730+wackerow@users.noreply.github.com> Date: Wed, 28 Sep 2022 20:50:25 -0700 Subject: [PATCH 004/151] replace code blocks with tables --- src/content/developers/docs/blocks/index.md | 132 ++++++++++---------- 1 file changed, 66 insertions(+), 66 deletions(-) diff --git a/src/content/developers/docs/blocks/index.md b/src/content/developers/docs/blocks/index.md index fc03d3d7399..8f0e94eda85 100644 --- a/src/content/developers/docs/blocks/index.md +++ b/src/content/developers/docs/blocks/index.md @@ -40,86 +40,86 @@ Proof-of-stake means the following: There is a lot of information contained within a block. At the highest level a block contains the following fields: -``` -slot: the slot the block belongs to -proposer_index: the ID of the validator proposing the block -parent_root: the hash of the preceding block -state_root: the root hash of the state object -body: an object containing several fields, as defined below -``` +| Field | Description | +| :--------------- | :---------------------------------------------------- | +| `slot` | the slot the block belongs to | +| `proposer_index` | the ID of the validator proposing the block | +| `parent_root` | the hash of the preceding block | +| `state_root` | the root hash of the state object | +| `body` | an object containing several fields, as defined below | The block `body` contains several fields of its own: -``` -randao_reveal: a value used to select the next block proposer -eth1_data: information about the deposit contract -graffiti: arbitrary data used to tag blocks -proposer_slashings: list of validators to be slashed -attester_slashings: list of validators to be slashed -attestations: list of attestations in favor of the current block -deposits: list of new deposits to the deposit contract -voluntary_exits: list of validators exiting the network -sync_aggregate: subset of validators used to serve light clients -execution_payload: transactions passed from the execution client -``` +| Field | Description | +| :------------------- | :------------------------------------------------- | +| `randao_reveal` | a value used to select the next block proposer | +| `eth1_data` | information about the deposit contract | +| `graffiti` | arbitrary data used to tag blocks | +| `proposer_slashings` | list of validators to be slashed | +| `attester_slashings` | list of validators to be slashed | +| `attestations` | list of attestations in favor of the current block | +| `deposits` | list of new deposits to the deposit contract | +| `voluntary_exits` | list of validators exiting the network | +| `sync_aggregate` | subset of validators used to serve light clients | +| `execution_payload` | transactions passed from the execution client | The `attestations` field contains a list of all the attestations in the block. Attestations have their own data type that contains several pieces of data. Each attestation contains: -``` -aggregation_bits: a list of which validators participated in this attestation -data: a container with multiple subfields -signature: aggregate signature of all attesting validators -``` +| Field | Description | +| :----------------- | :---------------------------------------------------------- | +| `aggregation_bits` | a list of which validators participated in this attestation | +| `data` | a container with multiple subfields | +| `signature` | aggregate signature of all attesting validators | The `data` field in the `attestation` contains the following: -``` -slot: the slot the attestation relates to -index: indices for attesting validators -beacon_block_root: the root hash of the Beacon block containing this object -source: the last justified checkpoint -target: the latest epoch boundary block -``` +| Field | Description | +| :------------------ | :------------------------------------------------------- | +| `slot` | the slot the attestation relates to | +| `index` | indices for attesting validators | +| `beacon_block_root` | the root hash of the Beacon block containing this object | +| `source` | the last justified checkpoint | +| `target` | the latest epoch boundary block | Executing the transactions in the `execution_payload` updates the global state. All clients re-execute the transactions in the `execution_payload` to ensure the new state matches that in the new block `state_root` field. This is how clients can tell that a new block is valid and safe to add to their blockchain. The `execution payload` itself is an object with several fields. There is also an `execution_payload_header` that contains important summary information about the execution data. These data structures are organized as follows: The `execution_payload_header` contains the following fields: -``` -parent_hash: hash of the parent block -fee_recipient: account address for paying transaction fees to -state_root: root hash for the global state after applying changes in this block -receipts_root: hash of the transaction receipts trie -logs_bloom: data structure containing event logs -prev_randao: value used in random validator selection -block_number: the number of the current block -gas_limit: maximum gas allowed in this block -gas_used: the actual amount of gas used in this block -timestamp: the block time -extra_data: arbitrary additional data as raw bytes -base_fee_per_gas: the base fee value -block_hash: Hash of execution block -transactions_root: root hash of the transactions in the payload -``` - -The `execution_payload` itself contains the following (notice this is idential to the header except that instead of the root hash of the transactions it includes the actual list of transactions) : - -``` -parent_hash: hash of the parent block -fee_recipient: account address for paying transaction fees to -state_root: root hash for the global state after applying changes in this block -receipts_root: hash of the transaction receipts trie -logs_bloom: data structure containing event logs -prev_randao: value used in random validator selection -block_number: the number of the current block -gas_limit: maximum gas allowed in this block -gas_used: the actual amount of gas used in this block -timestamp: the block time -extra_data: arbitrary additional data as raw bytes -base_fee_per_gas: the base fee value -block_hash: Hash of execution block -transactions: list of transactions to be executed -``` +| Field | Description | +| :------------------ | :------------------------------------------------------------------ | +| `parent_hash` | hash of the parent block | +| `fee_recipient` | account address for paying transaction fees to | +| `state_root` | root hash for the global state after applying changes in this block | +| `receipts_root` | hash of the transaction receipts trie | +| `logs_bloom` | data structure containing event logs | +| `prev_randao` | value used in random validator selection | +| `block_number` | the number of the current block | +| `gas_limit` | maximum gas allowed in this block | +| `gas_used` | the actual amount of gas used in this block | +| `timestamp` | the block time | +| `extra_data` | arbitrary additional data as raw bytes | +| `base_fee_per_gas` | the base fee value | +| `block_hash` | Hash of execution block | +| `transactions_root` | root hash of the transactions in the payload | + +The `execution_payload` itself contains the following (notice this is identical to the header except that instead of the root hash of the transactions it includes the actual list of transactions) : + +| Field | Description | +| :----------------- | :------------------------------------------------------------------ | +| `parent_hash` | hash of the parent block | +| `fee_recipient` | account address for paying transaction fees to | +| `state_root` | root hash for the global state after applying changes in this block | +| `receipts_root` | hash of the transaction receipts trie | +| `logs_bloom` | data structure containing event logs | +| `prev_randao` | value used in random validator selection | +| `block_number` | the number of the current block | +| `gas_limit` | maximum gas allowed in this block | +| `gas_used` | the actual amount of gas used in this block | +| `timestamp` | the block time | +| `extra_data` | arbitrary additional data as raw bytes | +| `base_fee_per_gas` | the base fee value | +| `block_hash` | Hash of execution block | +| `transactions` | list of transactions to be executed | ## Block time {#block-time} From 0e206ca75d232f4a2db87726b9ff4a88ca962223 Mon Sep 17 00:00:00 2001 From: Nicolas Moreau Date: Thu, 29 Sep 2022 14:52:36 -0700 Subject: [PATCH 005/151] Update backend doc Added Coinbase Cloud as a node provider. --- src/content/developers/docs/apis/backend/index.md | 5 +++++ 1 file changed, 5 insertions(+) diff --git a/src/content/developers/docs/apis/backend/index.md b/src/content/developers/docs/apis/backend/index.md index 8050c81bb35..0977963d5d6 100644 --- a/src/content/developers/docs/apis/backend/index.md +++ b/src/content/developers/docs/apis/backend/index.md @@ -42,6 +42,11 @@ These libraries abstract away much of the complexity of interacting directly wit - [cloudflare-eth.com](https://cloudflare-eth.com) +**Coinbase Cloud Node -** **_Blockchain Infrastructure API._** + +- [Node](https://www.coinbase.com/cloud/products/node) +- [Documentation](https://docs.cloud.coinbase.com/node/reference/welcome-to-node) + **DataHub by Figment -** **_Web3 API services with Ethereum Mainnet and testnets._** - [DataHub](https://www.figment.io/datahub) From 8bed8ccccf012cd346586645089e60382ee7a20c Mon Sep 17 00:00:00 2001 From: Seek4samurai Date: Sat, 1 Oct 2022 00:07:17 +0530 Subject: [PATCH 006/151] added docs links for IDEs & added furthur readings for frameworks & tools --- src/content/developers/docs/frameworks/index.md | 3 +++ src/content/developers/docs/ides/index.md | 10 +++++++++- 2 files changed, 12 insertions(+), 1 deletion(-) diff --git a/src/content/developers/docs/frameworks/index.md b/src/content/developers/docs/frameworks/index.md index 007f60ec3d0..ed1631aeb2b 100644 --- a/src/content/developers/docs/frameworks/index.md +++ b/src/content/developers/docs/frameworks/index.md @@ -95,6 +95,9 @@ Before diving into frameworks, we recommend you first read through our introduct ## Further reading {#further-reading} +- [Guide to the Ethereum stack](https://www.freecodecamp.org/news/full-stack-ethereum-development/) - Freecodecamp's guide to full Ethereum stack +- [More about dapps](https://www.investopedia.com/terms/d/decentralized-applications-dapps.asp) - Investopedia on the term dapps + _Know of a community resource that helped you? Edit this page and add it!_ ## Related topics {#related-topics} diff --git a/src/content/developers/docs/ides/index.md b/src/content/developers/docs/ides/index.md index 40025cdeb30..48a25006fe8 100644 --- a/src/content/developers/docs/ides/index.md +++ b/src/content/developers/docs/ides/index.md @@ -12,9 +12,15 @@ If you're looking to fiddle with code before you [set up a local development env **[Remix](https://remix.ethereum.org/)** - **_Web-based IDE with built in static analysis, and a test blockchain virtual machine_** +- [Docs](https://remix-ide.readthedocs.io/en/latest/#) +- [Gitter](https://gitter.im/ethereum/remix) + **[ChainIDE](https://chainide.com/)** - **_A cloud-based multi-chain IDE_** -**[Replit (Solidity Starter)](https://replit.com/@replit/Solidity-starter-beta)** - **_A customizable development environment for Ethereum with hot reloading, error checking, and first-class testnet support_** +- [Docs](https://chainide.gitbook.io/chainide-english-1/) +- [Help forum](https://forum.chainide.com/) + +**[Replit (Solidity Starter - Beta)](https://replit.com/@replit/Solidity-starter-beta)** - **_A customizable development environment for Ethereum with hot reloading, error checking, and first-class testnet support_** **[Tenderly Sandbox](https://sandbox.tenderly.co/)** - **_A fast prototyping environment where you can write, execute, and debug smart contracts in the browser using Solidity and JavaScript_** @@ -57,4 +63,6 @@ Most established IDEs have built plugins to enhance the Ethereum development exp ## Further reading {#further-reading} +- [Blockchain development tools](https://www.alchemy.com/overviews/20-blockchain-development-tools) - Alchemy's top 20 blockchain development tools + _Know of a community resource that helped you? Edit this page and add it!_ From 1a0889a50c715519b70b7d6e612a2cc9d936a7d7 Mon Sep 17 00:00:00 2001 From: sushthecoda Date: Wed, 5 Oct 2022 02:02:30 +0530 Subject: [PATCH 007/151] upgrades_merge_faqfix --- .env.example | 21 --------------------- src/intl/en/page-upgrades-index.json | 2 +- 2 files changed, 1 insertion(+), 22 deletions(-) delete mode 100644 .env.example diff --git a/.env.example b/.env.example deleted file mode 100644 index 098ea2b8316..00000000000 --- a/.env.example +++ /dev/null @@ -1,21 +0,0 @@ -# rename this file to .env and supply the values listed below -# also make sure they are available to the build tool (e.g. Netlify) -# warning: variables prefixed with GATSBY_ will be made available to client-side code -# be careful not to expose sensitive data (e.g. your Algolia admin key) -ALGOLIA_ADMIN_KEY=insertValue -ETHERSCAN_API_KEY=insertValue -GATSBY_ALGOLIA_APP_ID=insertValue -GATSBY_ALGOLIA_SEARCH_KEY=insertValue -GATSBY_GITHUB_TOKEN_READ_ONLY=insertValue -GATSBY_FUNCTIONS_PATH=insertValue - -# Build pages only for the specified langs. Leave it empty to build all the langs -# e.g. `en,fr` will only build english and french pages -# Note: always include `en` as it is the default lang of the site -GATSBY_BUILD_LANGS= - -# Folders or files to ignore from the `src/content` folder -IGNORE_CONTENT=**/docs,**/tutorials - -# Used to avoid loading Matomo in our preview deploys -IS_PREVIEW_DEPLOY=false \ No newline at end of file diff --git a/src/intl/en/page-upgrades-index.json b/src/intl/en/page-upgrades-index.json index 5823ca40b90..303d09e0ffc 100644 --- a/src/intl/en/page-upgrades-index.json +++ b/src/intl/en/page-upgrades-index.json @@ -43,7 +43,7 @@ "page-upgrades-dive": "Dive into the vision", "page-upgrades-dive-desc": "How are we going to make Ethereum more scalable, secure, and sustainable? All while keeping Ethereum's core ethos of decentralization.", "page-upgrades-docking": "The Merge", - "page-upgrades-merge-answer-1": "The Merge occurred via the Paris upgrade on September 15, 2022.", + "page-upgrades-merge-answer-1": "The Merge was executed on September 15, 2022 . This completed Ethereum's transition to proof-of-stake consensus as the Beacon Chain merged with the Mainnet , officially deprecating proof-of-work and reducing energy consumption by ~99.95%.", "page-upgrades-merge-btn": "More on The Merge", "page-upgrades-merge-desc": "Mainnet Ethereum merged with the Beacon Chain, marking the end of energy-intensive mining.", "page-upgrades-merge-estimate": "The Merge is live", From 4725ebde22c94731c6c9ac0edac26401bff6807e Mon Sep 17 00:00:00 2001 From: Lucas Martin Calderon Date: Wed, 5 Oct 2022 09:25:20 +0100 Subject: [PATCH 008/151] Update existing glossary term #8163 --- src/content/glossary/index.md | 3 ++- 1 file changed, 2 insertions(+), 1 deletion(-) diff --git a/src/content/glossary/index.md b/src/content/glossary/index.md index 7b159b99c57..4fa5bf6a921 100644 --- a/src/content/glossary/index.md +++ b/src/content/glossary/index.md @@ -219,7 +219,8 @@ The economics of cryptocurrencies. ### DAG {#dag} -DAG stands for Directed Acyclic Graph. It is a data structure composed of nodes and links between them. Ethereum uses a DAG in its [proof-of-work](#pow) algorithm, [Ethash](#ethash). +DAG stands for Directed Acyclic Graph. It is a data structure composed of nodes and links between them. Previous to The +Merge, Ethereum used a DAG in its [proof-of-work](#pow) algorithm, [Ethash](#ethash). ### Dapp {#dapp} From a5fc1c60aaacb93c377a6d3bfdde948f73df666c Mon Sep 17 00:00:00 2001 From: crypto8893 <115051650+crypto8893@users.noreply.github.com> Date: Wed, 5 Oct 2022 19:36:23 -0700 Subject: [PATCH 009/151] Update page-what-is-ethereum.json --- src/intl/en/page-what-is-ethereum.json | 3 +-- 1 file changed, 1 insertion(+), 2 deletions(-) diff --git a/src/intl/en/page-what-is-ethereum.json b/src/intl/en/page-what-is-ethereum.json index 7e0537e1f70..f3f1c876458 100644 --- a/src/intl/en/page-what-is-ethereum.json +++ b/src/intl/en/page-what-is-ethereum.json @@ -84,8 +84,7 @@ "page-what-is-ethereum-criminal-activity-desc-2": "Crypto is used much less than fiat currencies for criminal purposes according to the key findings of a recent report by Europol, the European Union Agency for Law Enforcement Cooperation:", "page-what-is-ethereum-criminal-activity-desc-3": "“The use of cryptocurrencies for illicit activities seems to comprise only a small part of the overall cryptocurrency economy, and it appears to be comparatively smaller than the amount of illicit funds involved in traditional finance.”", "page-what-is-ethereum-energy-title": "What about Ethereum's energy consumption?", - "page-what-is-ethereum-energy-desc-1": "Ethereum is currently using proof-of-work mechanism that consumes a large amount of energy. In the coming months (Q3/Q4 2022) Ethereum will undergo its biggest update yet and will switch to proof of stake mechanism which will greatly reduce the environmental impact it has.", - "page-what-is-ethereum-energy-desc-2": "This update will reduce the energy required to secure Ethereum by about 99.95%, creating a more secure network for a much smaller carbon cost. This will make Ethereum a truly low-carbon blockchain while boosting its security and scalability.", + "page-what-is-ethereum-energy-desc-1": "Since September of 2022, Ethereum has been using a proof-of-stake mechanism that consumes much less energy than its predecessor. The Merge update was one of Ethereum's biggest updates and reduced the energy required to secure Ethereum by about 99.95%, creating a more secure network for a much smaller carbon cost. This made Ethereum a truly low-carbon blockchain while boosting its security and scalability.", "page-what-is-ethereum-more-on-energy-consumption": "More on energy consumption", "page-what-is-ethereum-energy-consumption-chart-legend": "Annual Energy Consumption in TW/yr", "page-what-is-ethereum-the-merge-update": "The Merge update", From a7255f9022dcb32b277baff6abd3d52327524a70 Mon Sep 17 00:00:00 2001 From: crypto8893 <115051650+crypto8893@users.noreply.github.com> Date: Wed, 5 Oct 2022 21:49:56 -0700 Subject: [PATCH 010/151] Update page-what-is-ethereum.json fixed error --- src/intl/en/page-what-is-ethereum.json | 1 + 1 file changed, 1 insertion(+) diff --git a/src/intl/en/page-what-is-ethereum.json b/src/intl/en/page-what-is-ethereum.json index f3f1c876458..ee188b10b6f 100644 --- a/src/intl/en/page-what-is-ethereum.json +++ b/src/intl/en/page-what-is-ethereum.json @@ -85,6 +85,7 @@ "page-what-is-ethereum-criminal-activity-desc-3": "“The use of cryptocurrencies for illicit activities seems to comprise only a small part of the overall cryptocurrency economy, and it appears to be comparatively smaller than the amount of illicit funds involved in traditional finance.”", "page-what-is-ethereum-energy-title": "What about Ethereum's energy consumption?", "page-what-is-ethereum-energy-desc-1": "Since September of 2022, Ethereum has been using a proof-of-stake mechanism that consumes much less energy than its predecessor. The Merge update was one of Ethereum's biggest updates and reduced the energy required to secure Ethereum by about 99.95%, creating a more secure network for a much smaller carbon cost. This made Ethereum a truly low-carbon blockchain while boosting its security and scalability.", + "page-what-is-ethereum-energy-desc-2": "", "page-what-is-ethereum-more-on-energy-consumption": "More on energy consumption", "page-what-is-ethereum-energy-consumption-chart-legend": "Annual Energy Consumption in TW/yr", "page-what-is-ethereum-the-merge-update": "The Merge update", From d510e09e89ceff96091724804b22d5c471ed4468 Mon Sep 17 00:00:00 2001 From: Muhammad Ahmad <75790323+Mahmadabid@users.noreply.github.com> Date: Thu, 6 Oct 2022 11:46:53 +0500 Subject: [PATCH 011/151] migrate component to chakra --- src/components/UpgradeBannerNotification.tsx | 27 ++++++++++++-------- 1 file changed, 16 insertions(+), 11 deletions(-) diff --git a/src/components/UpgradeBannerNotification.tsx b/src/components/UpgradeBannerNotification.tsx index 8fd2724722a..5f44e8fcfc3 100644 --- a/src/components/UpgradeBannerNotification.tsx +++ b/src/components/UpgradeBannerNotification.tsx @@ -1,33 +1,38 @@ import React from "react" import BannerNotification from "./BannerNotification" -import Emoji from "./OldEmoji" +import Emoji from "src/components/Emoji" import Link from "./Link" -import styled from "@emotion/styled" +import { Flex, chakra, Center } from "@chakra-ui/react" -const StyledBannerNotification = styled(BannerNotification)` - display: flex; - justify-content: center; -` +const StyledBannerNotification = chakra(BannerNotification) + +const StyledEmoji = chakra(Emoji) +/* const StyledEmoji = styled(Emoji)` align-self: center; margin-right: 1rem; flex-shrink: 0; ` +const StyledBannerNotification = styled(BannerNotification)` + display: flex; + justify-content: center; +` + const StyledBannerContent = styled.div` align-self: center; ` - +*/ const UpgradeBannerNotification: React.FC = () => ( - - - + + +
We've deprecated our use of 'Eth1' and 'Eth2' terms.{" "} Read the full announcement - +
) From abedc557752a2841c8c8c210dcee48d85c44ce09 Mon Sep 17 00:00:00 2001 From: Muhammad Ahmad <75790323+Mahmadabid@users.noreply.github.com> Date: Thu, 6 Oct 2022 11:54:42 +0500 Subject: [PATCH 012/151] Migrate UpgradeBannerNotification.tsx to chakra --- src/components/UpgradeBannerNotification.tsx | 16 ---------------- 1 file changed, 16 deletions(-) diff --git a/src/components/UpgradeBannerNotification.tsx b/src/components/UpgradeBannerNotification.tsx index 5f44e8fcfc3..51f14c16418 100644 --- a/src/components/UpgradeBannerNotification.tsx +++ b/src/components/UpgradeBannerNotification.tsx @@ -8,22 +8,6 @@ const StyledBannerNotification = chakra(BannerNotification) const StyledEmoji = chakra(Emoji) -/* -const StyledEmoji = styled(Emoji)` - align-self: center; - margin-right: 1rem; - flex-shrink: 0; -` - -const StyledBannerNotification = styled(BannerNotification)` - display: flex; - justify-content: center; -` - -const StyledBannerContent = styled.div` - align-self: center; -` -*/ const UpgradeBannerNotification: React.FC = () => ( From ac7165f30b3c3a3453219d18573365b936db4626 Mon Sep 17 00:00:00 2001 From: Muhammad Ahmad <75790323+Mahmadabid@users.noreply.github.com> Date: Thu, 6 Oct 2022 12:31:09 +0500 Subject: [PATCH 013/151] Migrate upgradeBannerNotification.tsx to Chakra UI Removed unused components --- src/components/UpgradeBannerNotification.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/components/UpgradeBannerNotification.tsx b/src/components/UpgradeBannerNotification.tsx index 51f14c16418..241537fd008 100644 --- a/src/components/UpgradeBannerNotification.tsx +++ b/src/components/UpgradeBannerNotification.tsx @@ -2,7 +2,7 @@ import React from "react" import BannerNotification from "./BannerNotification" import Emoji from "src/components/Emoji" import Link from "./Link" -import { Flex, chakra, Center } from "@chakra-ui/react" +import { chakra, Center } from "@chakra-ui/react" const StyledBannerNotification = chakra(BannerNotification) From 4880b35a01d43be6183da24911d6557c6e0b55b8 Mon Sep 17 00:00:00 2001 From: Paul Wackerow <54227730+wackerow@users.noreply.github.com> Date: Sat, 8 Oct 2022 16:28:54 -0500 Subject: [PATCH 014/151] Add quiz data types --- src/types.ts | 46 ++++++++++++++++++++++++++++++++++++++++++++++ 1 file changed, 46 insertions(+) diff --git a/src/types.ts b/src/types.ts index 27c27b47978..a1e9680cebd 100644 --- a/src/types.ts +++ b/src/types.ts @@ -53,3 +53,49 @@ type OptionalImageProp = { type ForbidOptionalImageProp = ForbidOptional export type ImageProp = OptionalImageProp | ForbidOptionalImageProp + +/** + * Quiz data types + */ +export interface AnswerChoice { + answerId: string + isCorrect: boolean +} + +export interface Answer { + id: string + label: string + explanation: string + moreInfo?: string + moreInfoUrl?: string +} + +export interface RawQuestion { + prompt: string + answers: Array + correctAnswerId: string // Answer.id +} + +export interface Question extends RawQuestion { + id: string // 0a001 || Hash of prompt?? +} + +export interface QuestionBank { + [key: string]: RawQuestion +} + +export interface RawQuiz { + // id: string // Use "key" from Quizzes as ID instead + title: string + questions: Array // TODO: Force to be an array of questionID's +} + +export interface Quiz { + title: string + questions: Array +} + +export interface RawQuizzes { + [key: string]: RawQuiz +} + From 27924375bf90a81722d073ff8b8648bc42380878 Mon Sep 17 00:00:00 2001 From: Paul Wackerow <54227730+wackerow@users.noreply.github.com> Date: Sat, 8 Oct 2022 16:37:49 -0500 Subject: [PATCH 015/151] refactor quiz-data data structure --- src/data/learnQuizzes/index.ts | 16 +++++ src/data/learnQuizzes/questionBank.ts | 71 ++++++++++++++++++++++ src/data/learnQuzzes/index.ts | 8 --- src/data/learnQuzzes/whatIsEthereumQuiz.ts | 57 ----------------- 4 files changed, 87 insertions(+), 65 deletions(-) create mode 100644 src/data/learnQuizzes/index.ts create mode 100644 src/data/learnQuizzes/questionBank.ts delete mode 100644 src/data/learnQuzzes/index.ts delete mode 100644 src/data/learnQuzzes/whatIsEthereumQuiz.ts diff --git a/src/data/learnQuizzes/index.ts b/src/data/learnQuizzes/index.ts new file mode 100644 index 00000000000..8ac7a4a77b4 --- /dev/null +++ b/src/data/learnQuizzes/index.ts @@ -0,0 +1,16 @@ +// Import data types +import { RawQuizzes } from "../../types" + +// Declare hash-map of quizzes based on slug key +const quizzes: RawQuizzes = { + "what-is-ethereum": { + title: "What is Ethereum?", + questions: ["a001", "a002"], + }, + "what-is-ether": { + title: "What is ether?", + questions: [], + }, +} + +export default quizzes diff --git a/src/data/learnQuizzes/questionBank.ts b/src/data/learnQuizzes/questionBank.ts new file mode 100644 index 00000000000..94a30ca9e39 --- /dev/null +++ b/src/data/learnQuizzes/questionBank.ts @@ -0,0 +1,71 @@ +// Import data types +import { QuestionBank } from "../../types" + +// Declare hash map of question bank +const questionBank: QuestionBank = { + // TODO: Use hash of English prompt to generate this key + a001: { + prompt: "What is the biggest difference between Bitcoin and Ethereum?", + answers: [ + { + id: "a001-a", // TODO: Use hash of English question label to generate this id + label: + "Bitcoin has middlemen that mediate transactions, Ethereum does not", + explanation: + "The whole point of cryptocurrency, any cryptocurrency, is that you can transact directly with whoever you wish, without the need for middlemen", + }, + { + id: "a001-b", + label: "Ethereum is programmable, Bitcoin is not", + explanation: + "Unlike Bitcoin, Ethereum has smart contracts, expanding the utility of the network past payments.", + }, + { + id: "a001-c", + label: + "Ethereum has middlemen that mediate transactions, Bitcoin does not", + explanation: + "The whole point of cryptocurrency, any cryptocurrency, is that you can transact directly with whoever you wish, without the need for middlemen", + }, + { + id: "a001-d", + label: "Ethereum preserves privacy, Bitcoin does not", + explanation: + "Every node needs to be able to verify the blockchain's history from the beginning until the present. Therefore, there are no secrets on the blockchain. The only way to preserve privacy on the blockchain is to use private keys (and therefore identities) that cannot be traced back to you. This is possible on both Bitcoin and Ethereum.", + }, + ], + correctAnswerId: "a001-b", + }, + a002: { + prompt: "Ethereum consumes less electricity than:", + answers: [ + { + id: "a002-a", + label: "YouTube", + explanation: + "YouTube consumes approximately 244 TW/year, while Ethereum consumes approximately 0.01 TW/year.", + }, + { + id: "a002-b", + label: "Netflix", + explanation: + "Netflix consumes approximately 94 TW/year, while Ethereum consumes approximately 0.01 TW/year.", + }, + { + id: "a002-c", + label: "PayPal", + explanation: + "PayPal consumes approximately 0.26 TW/year, while Ethereum consumes approximately 0.01 TW/year.", + }, + { + id: "a002-d", + label: "Bitcoin", + explanation: + "Bitcoin consumes approximately 200 TW/year, while Ethereum consumes approximately 0.01 TW/year.", + }, + ], + correctAnswerId: "a002-c", + }, +} + +export default questionBank diff --git a/src/data/learnQuzzes/index.ts b/src/data/learnQuzzes/index.ts deleted file mode 100644 index 853ef5b152f..00000000000 --- a/src/data/learnQuzzes/index.ts +++ /dev/null @@ -1,8 +0,0 @@ -// Quizzes -import whatIsEthereumQuiz from "./whatIsEthereumQuiz" - -const quizzes = { - "what-is-ethereum": whatIsEthereumQuiz, -} - -export default quizzes diff --git a/src/data/learnQuzzes/whatIsEthereumQuiz.ts b/src/data/learnQuzzes/whatIsEthereumQuiz.ts deleted file mode 100644 index 8457dcd3b64..00000000000 --- a/src/data/learnQuzzes/whatIsEthereumQuiz.ts +++ /dev/null @@ -1,57 +0,0 @@ -const whatIsEthereumQuiz = { - title: "What is Ethereum Quiz", - questions: [ - { - correctAnswer: "b", - question: "What is the biggest difference between Bitcoin and Ethereum?", - answers: { - a: { - label: - "Bitcoin has middlemen that mediate transactions, Ethereum does not", - description: - "The whole point of cryptocurrency, any cryptocurrency, is that you can transact directly with whoever you wish, without the need for middlemen", - }, - b: { - label: "Ethereum is programmable, Bitcoin is not", - description: - "Unlike Bitcoin, Ethereum has smart contracts, expanding the utility of the network past payments.", - }, - c: { - label: - "Ethereum has middlemen that mediate transactions, Bitcoin does not", - description: - "The whole point of cryptocurrency, any cryptocurrency, is that you can transact directly with whoever you wish, without the need for middlemen", - }, - d: { - label: "Ethereum preserves privacy, Bitcoin does not", - description: - "Every node needs to be able to verify the blockchain's history from the beginning until the present. Therefore, there are no secrets on the blockchain. The only way to preserve privacy on the blockchain is to use private keys (and therefore identities) that cannot be traced back to you. This is possible on both Bitcoin and Ethereum.", - }, - }, - }, - { - correctAnswer: "a", - question: "Blah Blah", - answers: { - a: { - label: "a", - description: "a", - }, - b: { - label: "b", - description: "b", - }, - c: { - label: "c", - description: "c", - }, - d: { - label: "d", - description: "d", - }, - }, - }, - ], -} - -export default whatIsEthereumQuiz From 815ea35c1bc1a4990835fdc331b445b350232143 Mon Sep 17 00:00:00 2001 From: Paul Wackerow <54227730+wackerow@users.noreply.github.com> Date: Sat, 8 Oct 2022 16:50:57 -0500 Subject: [PATCH 016/151] update QuizQuestion to accept callback function --- src/components/Quiz/QuizQuestion.tsx | 12 ++++++++---- 1 file changed, 8 insertions(+), 4 deletions(-) diff --git a/src/components/Quiz/QuizQuestion.tsx b/src/components/Quiz/QuizQuestion.tsx index f130b3d939d..ea7b48d51fb 100644 --- a/src/components/Quiz/QuizQuestion.tsx +++ b/src/components/Quiz/QuizQuestion.tsx @@ -8,15 +8,20 @@ import Button from "../Button" // Types export interface IProps { questionData: any + onAnswerSelect: (answerId: string) => void } -const QuizQuestion: React.FC = ({ questionData }) => { +const QuizQuestion: React.FC = ({ questionData, onAnswerSelect }) => { const { colorMode } = useColorMode() const { answers, question } = questionData const [selectedAnswer, setSelectedAnswer] = useState( undefined ) + const handleSelection = (answerId: string) => { + setSelectedAnswer(answerId) + onAnswerSelect(answerId) + } return ( @@ -31,9 +36,8 @@ const QuizQuestion: React.FC = ({ questionData }) => { ) : null} - + From 386c6fd494e8f10ed9dadbc5ca2415b664d087fa Mon Sep 17 00:00:00 2001 From: Paul Wackerow <54227730+wackerow@users.noreply.github.com> Date: Mon, 10 Oct 2022 12:38:18 -0500 Subject: [PATCH 018/151] update types --- src/types.ts | 3 +-- 1 file changed, 1 insertion(+), 2 deletions(-) diff --git a/src/types.ts b/src/types.ts index a1e9680cebd..3c9d2d7db09 100644 --- a/src/types.ts +++ b/src/types.ts @@ -66,7 +66,7 @@ export interface Answer { id: string label: string explanation: string - moreInfo?: string + moreInfoLabel?: string moreInfoUrl?: string } @@ -98,4 +98,3 @@ export interface Quiz { export interface RawQuizzes { [key: string]: RawQuiz } - From 179d5408c6d286ec44a515dcaebc2df415888763 Mon Sep 17 00:00:00 2001 From: Paul Wackerow <54227730+wackerow@users.noreply.github.com> Date: Mon, 10 Oct 2022 12:38:53 -0500 Subject: [PATCH 019/151] update QuizWidget logic renamed from Quiz to limit name collision --- src/components/Quiz/Quiz.tsx | 161 --------------------- src/components/Quiz/QuizWidget.tsx | 224 +++++++++++++++++++++++++++++ 2 files changed, 224 insertions(+), 161 deletions(-) delete mode 100644 src/components/Quiz/Quiz.tsx create mode 100644 src/components/Quiz/QuizWidget.tsx diff --git a/src/components/Quiz/Quiz.tsx b/src/components/Quiz/Quiz.tsx deleted file mode 100644 index 0376cd6de31..00000000000 --- a/src/components/Quiz/Quiz.tsx +++ /dev/null @@ -1,161 +0,0 @@ -// Libraries -import React, { useEffect, useState, useMemo } from "react" -import { - Box, - ButtonGroup, - Center, - Container, - Text, - useColorMode, -} from "@chakra-ui/react" -import { shuffle } from "lodash" - -// Components -import Button from "../Button" -import QuizQuestion from "./QuizQuestion" - -// Data -import allQuizData from "../../data/learnQuizzes" -import questionBank from "../../data/learnQuizzes/questionBank" - -// Type -import { AnswerChoice, RawQuiz, Quiz, RawQuestion, Question } from "../../types" - -export interface IProps { - quizKey?: string - maxQuestions?: number -} - -const Quiz: React.FC = ({ quizKey, maxQuestions }) => { - const { colorMode } = useColorMode() - const isDarkMode = colorMode === "dark" - - const [quizData, setQuizData] = useState(null) - const [currentQuestionAnswerChoice, setCurrentQuestionAnswerChoice] = - useState(null) - const [userQuizProgress, setUserQuizProgress] = useState>( - [] - ) - - useEffect(() => { - // Reset state - setQuizData(null) - setCurrentQuestionAnswerChoice(null) - setUserQuizProgress([]) - - // Get quiz key - const currentQuizKey = - quizKey || - Object.keys(allQuizData).filter((quizUri) => - window?.location.href.includes(quizUri) - )[0] || - null - - // Get quiz data, shuffle, then truncate if necessary - if (currentQuizKey) { - const rawQuiz: RawQuiz = allQuizData[currentQuizKey] - const questions: Array = rawQuiz.questions.map((id) => { - const rawQuestion: RawQuestion = questionBank[id] - return { id, ...rawQuestion } - }) - const shuffledQuestions = shuffle(questions) - const trimmedQuestions = maxQuestions - ? shuffledQuestions.slice(0, maxQuestions) - : shuffledQuestions - const quiz: Quiz = { title: rawQuiz.title, questions: trimmedQuestions } - setQuizData(quiz) - } else { - setQuizData(null) - } - }, [quizKey, window.location.href]) - - // Memos - const currentQuestionIndex = useMemo( - () => userQuizProgress.length || 0, - [userQuizProgress] - ) - const showResults = useMemo( - () => userQuizProgress.length !== quizData?.questions.length, - [userQuizProgress, quizData] - ) - // TODO: if (showResults) { render summary view } - - // Handlers - const handleSelectAnswerChoice = (answerId: string) => { - const isCorrect = - answerId === quizData?.questions[currentQuestionIndex].correctAnswerId - setCurrentQuestionAnswerChoice({ answerId, isCorrect }) - } - const handleRetryQuestion = () => { - setCurrentQuestionAnswerChoice(null) - // Setting this to `null` should reset the question - } - const handleContinue = () => { - if (!currentQuestionAnswerChoice) return - setUserQuizProgress((prev) => [...prev, currentQuestionAnswerChoice]) - } - - const handleSubmit = () => { - // TODO: Allow user to submit quiz for storage - } - - return !quizData ? null : ( - -
- - {quizData.title} - -
-
- {quizData.questions.map(() => ( - - ))} -
-
- -
-
- - {currentQuestionIndex > 0 ? ( - - ) : null} - - -
- - ) -} - -export default Quiz diff --git a/src/components/Quiz/QuizWidget.tsx b/src/components/Quiz/QuizWidget.tsx new file mode 100644 index 00000000000..3a41d680c5b --- /dev/null +++ b/src/components/Quiz/QuizWidget.tsx @@ -0,0 +1,224 @@ +// Libraries +import React, { useEffect, useState, useMemo } from "react" +import { + Box, + ButtonGroup, + Center, + Container, + Flex, + Text, + useColorMode, +} from "@chakra-ui/react" +import { shuffle } from "lodash" + +// Components +import Button from "../Button" +import QuizQuestion from "./QuizQuestion" +import Translation from "../Translation" + +// Data +import allQuizData from "../../data/learnQuizzes" +import questionBank from "../../data/learnQuizzes/questionBank" + +// Type +import { AnswerChoice, RawQuiz, Quiz, RawQuestion, Question } from "../../types" + +export interface IProps { + quizKey?: string + maxQuestions?: number +} +const QuizWidget: React.FC = ({ quizKey, maxQuestions }) => { + // TODO: Add loading indictor + // TODO: Add error handling + // TODO: Add summary page once userQuizProgress.length === quizData.length + const { colorMode } = useColorMode() + const isDarkMode = colorMode === "dark" + + const [quizData, setQuizData] = useState(null) + const [currentQuestionAnswerChoice, setCurrentQuestionAnswerChoice] = + useState(null) + const [userQuizProgress, setUserQuizProgress] = useState>( + [] + ) + const [showAnswer, setShowAnswer] = useState(false) + const [selectedAnswer, setSelectedAnswer] = useState(null) + + useEffect(() => { + // Reset state + setQuizData(null) + setCurrentQuestionAnswerChoice(null) + setUserQuizProgress([]) + setShowAnswer(false) + + // Get quiz key + const currentQuizKey = + quizKey || + Object.keys(allQuizData).filter((quizUri) => + window?.location.href.includes(quizUri) + )[0] || + null + + // Get quiz data, shuffle, then truncate if necessary + if (currentQuizKey) { + const rawQuiz: RawQuiz = allQuizData[currentQuizKey] + const questions: Array = rawQuiz.questions.map((id) => { + const rawQuestion: RawQuestion = questionBank[id] + return { id, ...rawQuestion } + }) + const shuffledQuestions = shuffle(questions) + const trimmedQuestions = maxQuestions + ? shuffledQuestions.slice(0, maxQuestions) + : shuffledQuestions + const quiz: Quiz = { title: rawQuiz.title, questions: trimmedQuestions } + setQuizData(quiz) + } else { + setQuizData(null) + } + }, [quizKey]) + + // Memos + const currentQuestionIndex = useMemo( + () => userQuizProgress.length || 0, + [userQuizProgress] + ) + const showResults = useMemo( + () => userQuizProgress.length !== quizData?.questions.length, + [userQuizProgress, quizData] + ) + + const cardBackground = useMemo(() => { + if (showAnswer) { + if (currentQuestionAnswerChoice?.isCorrect) + return isDarkMode ? "#0A160E" : "#C8F7D8" + return isDarkMode ? "#1B0C0C" : "#F7C8C8" + } + return isDarkMode ? "gray.900" : "white" + }, [isDarkMode, showAnswer]) + + // Handlers + const handleSelectAnswerChoice = (answerId: string) => { + const isCorrect = + answerId === quizData?.questions[currentQuestionIndex].correctAnswerId + setCurrentQuestionAnswerChoice({ answerId, isCorrect }) + } + // TODO: Confirm both handleSelectAnswerChoice & handleSelection are necessary + const handleSelection = (answerId: string) => { + setSelectedAnswer(answerId) + handleSelectAnswerChoice(answerId) + } + + const handleShowAnswer = () => { + setShowAnswer(true) + } + const handleRetryQuestion = () => { + // TODO: Tell QuizQuestion component to reset + setCurrentQuestionAnswerChoice(null) // Setting to `null` should reset the question + setSelectedAnswer(null) // Being passed to child component + setShowAnswer(false) + } + const handleContinue = () => { + if (!currentQuestionAnswerChoice) return + setUserQuizProgress((prev) => [...prev, currentQuestionAnswerChoice]) + setShowAnswer(false) + } + + const handleSubmit = () => { + // TODO: Allow user to submit quiz for storage + } + + return !quizData ? null : ( + +

+ +

+ +
+ + {quizData.title} + +
+
+ {quizData.questions.map(({ id }, index) => { + let bg: string + if ( + (showAnswer && + index === currentQuestionIndex && + currentQuestionAnswerChoice?.isCorrect) || + userQuizProgress[index]?.isCorrect + ) { + bg = "#48BB78" + } else if ( + (showAnswer && + index === currentQuestionIndex && + !currentQuestionAnswerChoice?.isCorrect) || + (userQuizProgress[index] && !userQuizProgress[index].isCorrect) + ) { + bg = "#B80000" + } else if (index === currentQuestionIndex) { + bg = "#B0B0B0" + } else { + bg = "#646464" + } + return ( + + ) + })} +
+
+ +
+
+ + {showAnswer && + currentQuestionAnswerChoice && + !currentQuestionAnswerChoice.isCorrect && ( + + )} + {showAnswer ? ( + + ) : ( + + )} + +
+ + + ) +} + +export default QuizWidget From fe4ddc532e010b07986ddb1cf16895cdc17150a9 Mon Sep 17 00:00:00 2001 From: Paul Wackerow <54227730+wackerow@users.noreply.github.com> Date: Mon, 10 Oct 2022 12:39:21 -0500 Subject: [PATCH 020/151] update QuizQuestion --- src/components/Quiz/QuizQuestion.tsx | 54 ++++++++++++++-------- src/data/learnQuizzes/questionBank.ts | 4 +- src/pages-conditional/what-is-ethereum.tsx | 9 +--- 3 files changed, 39 insertions(+), 28 deletions(-) diff --git a/src/components/Quiz/QuizQuestion.tsx b/src/components/Quiz/QuizQuestion.tsx index ea7b48d51fb..d735ac6edb1 100644 --- a/src/components/Quiz/QuizQuestion.tsx +++ b/src/components/Quiz/QuizQuestion.tsx @@ -1,42 +1,50 @@ // Libraries -import React, { useState } from "react" +import React, { useState, useMemo } from "react" import { Box, Circle, Text, useColorMode } from "@chakra-ui/react" // Components import Button from "../Button" // Types +import { Question } from "../../types" + export interface IProps { - questionData: any - onAnswerSelect: (answerId: string) => void + questionData: Question + showAnswer: boolean + handleSelection: (answerId: string) => void + selectedAnswer: string | null } -const QuizQuestion: React.FC = ({ questionData, onAnswerSelect }) => { +const QuizQuestion: React.FC = ({ + questionData, + showAnswer, + handleSelection, + selectedAnswer, +}) => { const { colorMode } = useColorMode() - const { answers, question } = questionData - const [selectedAnswer, setSelectedAnswer] = useState( - undefined - ) + const { answers, prompt } = questionData + const explanation = useMemo(() => { + if (!selectedAnswer) return "" + return answers.filter(({ id }) => id === selectedAnswer)[0].explanation + }, [selectedAnswer]) - const handleSelection = (answerId: string) => { - setSelectedAnswer(answerId) - onAnswerSelect(answerId) - } return ( - {question} + {prompt} - {Object.keys(answers).map((key) => { - const active = selectedAnswer === key + {answers.map(({ id, label }, index) => { + const active = selectedAnswer === id const iconBackgroundDark = active ? "orange.800" : "gray.500" const iconBackgroundLight = active ? "blue.300" : "gray.400" - + const display = + !showAnswer || id === selectedAnswer ? "inline-flex" : "none" return ( ) })} + {showAnswer && ( + <> + Explanation + {explanation} + + )} ) } diff --git a/src/data/learnQuizzes/questionBank.ts b/src/data/learnQuizzes/questionBank.ts index 94a30ca9e39..a728c3722b5 100644 --- a/src/data/learnQuizzes/questionBank.ts +++ b/src/data/learnQuizzes/questionBank.ts @@ -59,9 +59,9 @@ const questionBank: QuestionBank = { }, { id: "a002-d", - label: "Bitcoin", + label: "All of the above", explanation: - "Bitcoin consumes approximately 200 TW/year, while Ethereum consumes approximately 0.01 TW/year.", + "Ethereum consumes approximately 0.01 TW/year, while YouTube consumes ~244 TW/year, Netflix ~94 TW/year, and PayPal ~0.26 TW/year.", }, ], correctAnswerId: "a002-c", diff --git a/src/pages-conditional/what-is-ethereum.tsx b/src/pages-conditional/what-is-ethereum.tsx index dd0a92dcf11..4286f3a4dc7 100644 --- a/src/pages-conditional/what-is-ethereum.tsx +++ b/src/pages-conditional/what-is-ethereum.tsx @@ -35,7 +35,7 @@ import AdoptionChart from "../components/AdoptionChart" import EnergyConsumptionChart from "../components/EnergyConsumptionChart" import Slider, { EmblaSlide } from "../components/Slider" import FeedbackCard from "../components/FeedbackCard" -import Quiz from "../components/Quiz/Quiz" +import QuizWidget from "../components/Quiz/QuizWidget" import { getLocaleForNumberFormat, @@ -947,12 +947,7 @@ const WhatIsEthereumPage = ({
-

- -

-
-
- +
From 4dbb1e671e9c6ea939e2ec479df9af4517689d7a Mon Sep 17 00:00:00 2001 From: Paul Wackerow <54227730+wackerow@users.noreply.github.com> Date: Mon, 10 Oct 2022 18:16:48 -0500 Subject: [PATCH 021/151] feat: QuizWidget mvp --- src/components/Quiz/QuizQuestion.tsx | 2 +- src/components/Quiz/QuizSummary.tsx | 50 ++++++ src/components/Quiz/QuizWidget.tsx | 237 +++++++++++++++----------- src/data/learnQuizzes/questionBank.ts | 2 +- 4 files changed, 186 insertions(+), 105 deletions(-) create mode 100644 src/components/Quiz/QuizSummary.tsx diff --git a/src/components/Quiz/QuizQuestion.tsx b/src/components/Quiz/QuizQuestion.tsx index d735ac6edb1..2d2d7bbcabc 100644 --- a/src/components/Quiz/QuizQuestion.tsx +++ b/src/components/Quiz/QuizQuestion.tsx @@ -1,5 +1,5 @@ // Libraries -import React, { useState, useMemo } from "react" +import React, { useMemo } from "react" import { Box, Circle, Text, useColorMode } from "@chakra-ui/react" // Components diff --git a/src/components/Quiz/QuizSummary.tsx b/src/components/Quiz/QuizSummary.tsx new file mode 100644 index 00000000000..e343f651e92 --- /dev/null +++ b/src/components/Quiz/QuizSummary.tsx @@ -0,0 +1,50 @@ +// Libraries +import React, { useMemo } from "react" +import { Box, Flex, Text } from "@chakra-ui/react" + +export interface IProps { + correctCount: number + questionCount: number +} + +const QuizSummary: React.FC = ({ correctCount, questionCount }) => { + const percentCorrect = useMemo( + () => Math.floor((correctCount / questionCount) * 100), + [correctCount, questionCount] + ) + + return ( + + + {percentCorrect >= 65 ? "You passed the quiz!" : "Your results"} + + + + + {percentCorrect}% + + + Score + + + + + +{correctCount} + + + Total points + + + + + ) +} + +export default QuizSummary diff --git a/src/components/Quiz/QuizWidget.tsx b/src/components/Quiz/QuizWidget.tsx index 3a41d680c5b..e326c71c103 100644 --- a/src/components/Quiz/QuizWidget.tsx +++ b/src/components/Quiz/QuizWidget.tsx @@ -6,14 +6,17 @@ import { Center, Container, Flex, + Icon, Text, useColorMode, } from "@chakra-ui/react" import { shuffle } from "lodash" +import { FaTwitter } from "react-icons/fa" // Components import Button from "../Button" import QuizQuestion from "./QuizQuestion" +import QuizSummary from "./QuizSummary" import Translation from "../Translation" // Data @@ -28,9 +31,7 @@ export interface IProps { maxQuestions?: number } const QuizWidget: React.FC = ({ quizKey, maxQuestions }) => { - // TODO: Add loading indictor - // TODO: Add error handling - // TODO: Add summary page once userQuizProgress.length === quizData.length + // TODO: Add loading state indicator and error handling const { colorMode } = useColorMode() const isDarkMode = colorMode === "dark" @@ -43,12 +44,13 @@ const QuizWidget: React.FC = ({ quizKey, maxQuestions }) => { const [showAnswer, setShowAnswer] = useState(false) const [selectedAnswer, setSelectedAnswer] = useState(null) - useEffect(() => { + const initialize = () => { // Reset state setQuizData(null) setCurrentQuestionAnswerChoice(null) setUserQuizProgress([]) setShowAnswer(false) + setSelectedAnswer(null) // Get quiz key const currentQuizKey = @@ -74,15 +76,18 @@ const QuizWidget: React.FC = ({ quizKey, maxQuestions }) => { } else { setQuizData(null) } - }, [quizKey]) + } + useEffect(initialize, [quizKey]) - // Memos + // Memoized values const currentQuestionIndex = useMemo( () => userQuizProgress.length || 0, [userQuizProgress] ) + + // TODO: Allow user to submit quiz for storage const showResults = useMemo( - () => userQuizProgress.length !== quizData?.questions.length, + () => userQuizProgress.length === quizData?.questions.length, [userQuizProgress, quizData] ) @@ -95,12 +100,18 @@ const QuizWidget: React.FC = ({ quizKey, maxQuestions }) => { return isDarkMode ? "gray.900" : "white" }, [isDarkMode, showAnswer]) + const correctCount = useMemo( + () => userQuizProgress.filter(({ isCorrect }) => isCorrect).length, + [userQuizProgress] + ) + // Handlers const handleSelectAnswerChoice = (answerId: string) => { const isCorrect = answerId === quizData?.questions[currentQuestionIndex].correctAnswerId setCurrentQuestionAnswerChoice({ answerId, isCorrect }) } + // TODO: Confirm both handleSelectAnswerChoice & handleSelection are necessary const handleSelection = (answerId: string) => { setSelectedAnswer(answerId) @@ -110,114 +121,134 @@ const QuizWidget: React.FC = ({ quizKey, maxQuestions }) => { const handleShowAnswer = () => { setShowAnswer(true) } + const handleRetryQuestion = () => { - // TODO: Tell QuizQuestion component to reset - setCurrentQuestionAnswerChoice(null) // Setting to `null` should reset the question - setSelectedAnswer(null) // Being passed to child component + setCurrentQuestionAnswerChoice(null) + setSelectedAnswer(null) setShowAnswer(false) } const handleContinue = () => { if (!currentQuestionAnswerChoice) return setUserQuizProgress((prev) => [...prev, currentQuestionAnswerChoice]) + setCurrentQuestionAnswerChoice(null) setShowAnswer(false) } - const handleSubmit = () => { - // TODO: Allow user to submit quiz for storage - } - - return !quizData ? null : ( - -

- -

- -
- - {quizData.title} - -
-
- {quizData.questions.map(({ id }, index) => { - let bg: string - if ( - (showAnswer && - index === currentQuestionIndex && - currentQuestionAnswerChoice?.isCorrect) || - userQuizProgress[index]?.isCorrect - ) { - bg = "#48BB78" - } else if ( - (showAnswer && - index === currentQuestionIndex && - !currentQuestionAnswerChoice?.isCorrect) || - (userQuizProgress[index] && !userQuizProgress[index].isCorrect) - ) { - bg = "#B80000" - } else if (index === currentQuestionIndex) { - bg = "#B0B0B0" - } else { - bg = "#646464" - } - return ( - +

+ +

+ +
+ + {quizData.title} + +
+
+ {quizData.questions.map(({ id }, index) => { + let bg: string + if ( + (showAnswer && + index === currentQuestionIndex && + currentQuestionAnswerChoice?.isCorrect) || + userQuizProgress[index]?.isCorrect + ) { + bg = "#48BB78" + } else if ( + (showAnswer && + index === currentQuestionIndex && + !currentQuestionAnswerChoice?.isCorrect) || + (userQuizProgress[index] && !userQuizProgress[index].isCorrect) + ) { + bg = "#B80000" + } else if (index === currentQuestionIndex) { + bg = "#B0B0B0" + } else { + bg = "#646464" + } + return ( + + ) + })} +
+
+ {showResults ? ( + - ) - })} -
-
- -
-
- - {showAnswer && - currentQuestionAnswerChoice && - !currentQuestionAnswerChoice.isCorrect && ( - - )} - {showAnswer ? ( - ) : ( - + )} - -
- - +
+
+ + {showAnswer && + currentQuestionAnswerChoice && + !currentQuestionAnswerChoice.isCorrect && ( + + )} + {showResults ? ( + + + + + ) : showAnswer ? ( + + ) : ( + + )} + +
+ + + ) ) } diff --git a/src/data/learnQuizzes/questionBank.ts b/src/data/learnQuizzes/questionBank.ts index a728c3722b5..8d4ec3591b9 100644 --- a/src/data/learnQuizzes/questionBank.ts +++ b/src/data/learnQuizzes/questionBank.ts @@ -64,7 +64,7 @@ const questionBank: QuestionBank = { "Ethereum consumes approximately 0.01 TW/year, while YouTube consumes ~244 TW/year, Netflix ~94 TW/year, and PayPal ~0.26 TW/year.", }, ], - correctAnswerId: "a002-c", + correctAnswerId: "a002-d", }, } From 23fe1365e97165e5b2dd9be1f16c9a0811fccccd Mon Sep 17 00:00:00 2001 From: tylerapfledderer Date: Mon, 10 Oct 2022 21:58:17 -0400 Subject: [PATCH 022/151] refactor(expandable-info): migrate to chakra --- src/components/ExpandableInfo.tsx | 333 ++++++++++++------------------ 1 file changed, 136 insertions(+), 197 deletions(-) diff --git a/src/components/ExpandableInfo.tsx b/src/components/ExpandableInfo.tsx index d4372f3081c..76d1e31f5f2 100644 --- a/src/components/ExpandableInfo.tsx +++ b/src/components/ExpandableInfo.tsx @@ -1,216 +1,155 @@ -import React, { ReactNode, useState } from "react" -import styled from "@emotion/styled" -import { motion } from "framer-motion" +import React, { ReactNode } from "react" import { GatsbyImage, IGatsbyImageData } from "gatsby-plugin-image" +import { + BackgroundProps, + Box, + Center, + ChakraProps, + Collapse, + forwardRef, + Heading, + HStack, + Icon, + Stack, + Text, + useDisclosure, + VStack, +} from "@chakra-ui/react" +import { motion } from "framer-motion" +import { MdExpandMore } from "react-icons/md" -import Icon from "./Icon" - -const Card = styled.div<{ - background: string -}>` - border: 1px solid ${({ theme }) => theme.colors.border}; - border-radius: 2px; - padding: 1.5rem; - display: flex; - flex-direction: column; - margin-bottom: 1rem; - background: ${({ background, theme }) => - background ? theme.colors[background] : theme.colors.background}; - &:hover { - img { - transform: scale(1.08); - transition: transform 0.1s; - } - } -` - -const Content = styled.div` - display: flex; - align-items: center; - justify-content: space-between; - gap: 3rem; - @media (max-width: ${({ theme }) => theme.breakpoints.m}) { - gap: 2rem; - flex-direction: column; - } -` - -const TitleContent = styled.div` - display: flex; - align-items: center; - gap: 3rem; - width: 100%; -` - -const Title = styled.h2` - margin-top: 0rem; - margin-bottom: 0.5rem; -` - -const TextPreview = styled.p` - font-weight: 400; - color: ${(props) => props.theme.colors.text200}; - margin-bottom: 0rem; -` - -const Text = styled(motion.div)` - font-size: 16px; - font-weight: 400; - color: ${(props) => props.theme.colors.text}; - margin-top: 2rem; - border-top: 1px solid ${(props) => props.theme.colors.border}; - padding-top: 1.5rem; -` - -const Question = styled.div` - margin-right: 1rem; -` - -const Header = styled.div` - display: flex; - width: 100%; - margin: 1rem 0; - align-items: center; - img { - margin-right: 1.5rem; - } -` - -const ButtonContainer = styled(motion.div)` - display: flex; - width: 5rem; - justify-content: center; - align-items: center; - min-height: 10rem; - cursor: pointer; - @media (max-width: ${({ theme }) => theme.breakpoints.m}) { - min-height: 100%; - height: 100%; - width: 100%; - margin: 0; - } - &:hover { - svg { - transform: scale(1.25); - transition: transform 0.1s; - } - } -` - -export interface IProps { +export interface IProps extends ChakraProps { children?: React.ReactNode image?: IGatsbyImageData title: ReactNode contentPreview: ReactNode - background: string - forceOpen: boolean + background: BackgroundProps["background"] + forceOpen?: boolean className?: string } -const ExpandableInfo: React.FC = ({ - image, - title, - contentPreview, - children, - background, - forceOpen, - className, -}) => { - const [isVisible, setIsVisible] = useState(forceOpen) - const expandCollapse = { - collapsed: { - height: 0, - transition: { - when: "afterChildren", - }, - }, - expanded: { - height: "100%", - transition: { - when: "beforeChildren", - }, +const ExpandableInfo = forwardRef( + ( + { + image, + title, + contentPreview, + children, + background, + forceOpen, + className, + ...rest }, - } - const chevronFlip = { - collapsed: { - rotate: 0, - transition: { - duration: 0.1, + ref + ) => { + const { isOpen, getButtonProps, getDisclosureProps } = useDisclosure({ + defaultIsOpen: forceOpen, + }) + + const chevronFlip = { + collapsed: { + rotate: 0, + transition: { + duration: 0.1, + }, }, - }, - expanded: { - rotate: 180, - transition: { - duration: 0.4, + expanded: { + rotate: 180, + transition: { + duration: 0.4, + }, }, - }, - } - const showHide = { - collapsed: { - display: "none", - }, - expanded: { - display: "inline-block", - }, - } - const fadeInOut = { - collapsed: { - opacity: 0, - transition: { - duration: 0.1, - }, - }, - expanded: { - opacity: 1, - transition: { - duration: 0.4, - }, - }, - } - return ( - - - {image && } - - -
- {title} -
- {contentPreview} - - - {!forceOpen && ( - setIsVisible(!isVisible)} - > - - - )} - - - + {image && } + + + + + {title} + + + + {contentPreview} + + + + {!forceOpen && ( +
+ +
+ )} + + - {children} - - - - - ) -} + + + + ) + } +) export default ExpandableInfo From a2251f9a435c235cae84e7055d35b089d6ab03c8 Mon Sep 17 00:00:00 2001 From: Paul Wackerow <54227730+wackerow@users.noreply.github.com> Date: Tue, 11 Oct 2022 00:02:10 -0500 Subject: [PATCH 023/151] add trophy/status svg indicators --- src/assets/quiz/correct.svg | 3 ++ src/assets/quiz/incorrect.svg | 3 ++ src/assets/quiz/star-confetti.svg | 25 ++++++++++++ src/assets/quiz/trophy.svg | 4 ++ src/assets/trophy.svg | 11 ----- src/components/Quiz/QuizQuestion.tsx | 4 +- src/components/Quiz/QuizWidget.tsx | 60 +++++++++++++++++++++++++++- 7 files changed, 95 insertions(+), 15 deletions(-) create mode 100644 src/assets/quiz/correct.svg create mode 100644 src/assets/quiz/incorrect.svg create mode 100644 src/assets/quiz/star-confetti.svg create mode 100644 src/assets/quiz/trophy.svg delete mode 100644 src/assets/trophy.svg diff --git a/src/assets/quiz/correct.svg b/src/assets/quiz/correct.svg new file mode 100644 index 00000000000..7df1f6a3844 --- /dev/null +++ b/src/assets/quiz/correct.svg @@ -0,0 +1,3 @@ + + + diff --git a/src/assets/quiz/incorrect.svg b/src/assets/quiz/incorrect.svg new file mode 100644 index 00000000000..f391b34f9a6 --- /dev/null +++ b/src/assets/quiz/incorrect.svg @@ -0,0 +1,3 @@ + + + diff --git a/src/assets/quiz/star-confetti.svg b/src/assets/quiz/star-confetti.svg new file mode 100644 index 00000000000..74b302533f8 --- /dev/null +++ b/src/assets/quiz/star-confetti.svg @@ -0,0 +1,25 @@ + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/src/assets/quiz/trophy.svg b/src/assets/quiz/trophy.svg new file mode 100644 index 00000000000..c3b4f445311 --- /dev/null +++ b/src/assets/quiz/trophy.svg @@ -0,0 +1,4 @@ + + + + diff --git a/src/assets/trophy.svg b/src/assets/trophy.svg deleted file mode 100644 index a571d7f990a..00000000000 --- a/src/assets/trophy.svg +++ /dev/null @@ -1,11 +0,0 @@ - - - - - - - - - - - diff --git a/src/components/Quiz/QuizQuestion.tsx b/src/components/Quiz/QuizQuestion.tsx index 2d2d7bbcabc..252bac9a962 100644 --- a/src/components/Quiz/QuizQuestion.tsx +++ b/src/components/Quiz/QuizQuestion.tsx @@ -46,6 +46,8 @@ const QuizQuestion: React.FC = ({ isActive={active} onClick={() => handleSelection(id)} textAlign="start" + h="fit-content" + p={2} leftIcon={ = ({ } - h="fit-content" - p={2} > {label} diff --git a/src/components/Quiz/QuizWidget.tsx b/src/components/Quiz/QuizWidget.tsx index e326c71c103..03389634bb0 100644 --- a/src/components/Quiz/QuizWidget.tsx +++ b/src/components/Quiz/QuizWidget.tsx @@ -4,8 +4,10 @@ import { Box, ButtonGroup, Center, + Circle, Container, Flex, + Heading, Icon, Text, useColorMode, @@ -19,6 +21,12 @@ import QuizQuestion from "./QuizQuestion" import QuizSummary from "./QuizSummary" import Translation from "../Translation" +// SVG import +import Trophy from "../../assets/quiz/trophy.svg" +import Correct from "../../assets/quiz/correct.svg" +import Incorrect from "../../assets/quiz/incorrect.svg" +import StarConfetti from "../../assets/quiz/star-confetti.svg" + // Data import allQuizData from "../../data/learnQuizzes" import questionBank from "../../data/learnQuizzes/questionBank" @@ -137,9 +145,9 @@ const QuizWidget: React.FC = ({ quizKey, maxQuestions }) => { return ( quizData && ( -

+ -

+ = ({ quizKey, maxQuestions }) => { md: "49px 62px", // TODO: Remove magic numbers base: "20px 30px", }} + position="relative" > + + + + {showResults && + Math.floor((correctCount / quizData.questions.length) * 100) > + 65 && ( + <> + + + + )}
Date: Tue, 11 Oct 2022 08:34:13 -0500 Subject: [PATCH 024/151] update question bank and quizzes --- src/data/learnQuizzes/index.ts | 20 +- src/data/learnQuizzes/questionBank.ts | 723 +++++++++++++++++++++++++- 2 files changed, 721 insertions(+), 22 deletions(-) diff --git a/src/data/learnQuizzes/index.ts b/src/data/learnQuizzes/index.ts index 8ac7a4a77b4..818ec7bdc70 100644 --- a/src/data/learnQuizzes/index.ts +++ b/src/data/learnQuizzes/index.ts @@ -5,11 +5,27 @@ import { RawQuizzes } from "../../types" const quizzes: RawQuizzes = { "what-is-ethereum": { title: "What is Ethereum?", - questions: ["a001", "a002"], + questions: ["a001", "a002", "a003", "a004", "a005"], }, "what-is-ether": { title: "What is ether?", - questions: [], + questions: ["b001", "b002", "b003", "b004"], + }, + web3: { + title: "Web3", + questions: ["c001", "c002", "c003", "c004", "c005"], + }, + wallets: { + title: "Wallets", + questions: ["d001", "d002", "d003", "d004"], + }, + security: { + title: "Security", + questions: ["e001", "e002", "e003", "e004", "d003"], + }, + nfts: { + title: "NFTs", + questions: ["f001", "f002", "f003", "f004", "f005"], }, } diff --git a/src/data/learnQuizzes/questionBank.ts b/src/data/learnQuizzes/questionBank.ts index 8d4ec3591b9..08f5c46aedb 100644 --- a/src/data/learnQuizzes/questionBank.ts +++ b/src/data/learnQuizzes/questionBank.ts @@ -4,67 +4,750 @@ import { QuestionBank } from "../../types" // Declare hash map of question bank const questionBank: QuestionBank = { // TODO: Use hash of English prompt to generate this key + // What is Ethereum? a001: { - prompt: "What is the biggest difference between Bitcoin and Ethereum?", + prompt: "The biggest difference between Ethereum and Bitcoin is:", answers: [ { id: "a001-a", // TODO: Use hash of English question label to generate this id - label: - "Bitcoin has middlemen that mediate transactions, Ethereum does not", + label: "Ethereum doesn’t let you make payments to other people", explanation: - "The whole point of cryptocurrency, any cryptocurrency, is that you can transact directly with whoever you wish, without the need for middlemen", + "Both Bitcoin and Ethereum let you make payments to other people.", }, { id: "a001-b", - label: "Ethereum is programmable, Bitcoin is not", + label: "You can run computer programs on Ethereum", explanation: - "Unlike Bitcoin, Ethereum has smart contracts, expanding the utility of the network past payments.", + "Ethereum is programmable. This means you can put any computer program on the Ethereum blockchain.", }, { id: "a001-c", - label: - "Ethereum has middlemen that mediate transactions, Bitcoin does not", + label: "You can run computer programs on Bitcoin", explanation: - "The whole point of cryptocurrency, any cryptocurrency, is that you can transact directly with whoever you wish, without the need for middlemen", + "Unlike Ethereum, Bitcoin isn’t programmable and cannot run arbitrary computer programs.", }, { id: "a001-d", - label: "Ethereum preserves privacy, Bitcoin does not", + label: "They have different logos", explanation: - "Every node needs to be able to verify the blockchain's history from the beginning until the present. Therefore, there are no secrets on the blockchain. The only way to preserve privacy on the blockchain is to use private keys (and therefore identities) that cannot be traced back to you. This is possible on both Bitcoin and Ethereum.", + "They do have different logos! But this isn’t the biggest difference between them.", }, ], correctAnswerId: "a001-b", }, a002: { - prompt: "Ethereum consumes less electricity than:", + prompt: "Ethereum’s native cryptocurrency is called:", answers: [ { id: "a002-a", - label: "YouTube", + label: "Ether", explanation: - "YouTube consumes approximately 244 TW/year, while Ethereum consumes approximately 0.01 TW/year.", + "Ether is the cryptocurrency native to the Ethereum network.", }, { id: "a002-b", - label: "Netflix", + label: "Ethereum", explanation: - "Netflix consumes approximately 94 TW/year, while Ethereum consumes approximately 0.01 TW/year.", + "Ethereum is the blockchain, but its native currency is not called Ethereum. This is a common misconception.", }, { id: "a002-c", - label: "PayPal", + label: "Ethercoin", explanation: - "PayPal consumes approximately 0.26 TW/year, while Ethereum consumes approximately 0.01 TW/year.", + "Unlike many other cryptocurrencies, Ethereum’s native cryptocurrency doesn’t contain the word ‘coin’.", }, { id: "a002-d", + label: "Bitcoin", + explanation: + "Bitcoin (uppercase B) was the first blockchain created, bitcoin (lowercase B) is it’s native cryptocurrency.", + }, + ], + correctAnswerId: "a002-a", + }, + a003: { + prompt: "Who runs Ethereum?", + answers: [ + { + id: "a003-a", + label: "Stakers", + explanation: + "Stakers are an important piece in the running of Ethereum, but stakers are duty-bound by the node operators to behave honestly.", + }, + { + id: "a003-b", + label: "Miners", + explanation: + "Mining hasn’t been possible since The Merge. There are no longer ‘miners’ on Ethereum.", + }, + { + id: "a003-c", + label: "The Ethereum Foundation", + explanation: + "The Ethereum Foundation does not play any significant role in the day-to-day running of Ethereum nodes. ", + }, + { + id: "a003-d", + label: "Anyone running a node", + explanation: + "Anyone running a node is a crucial part of Ethereum’s infrastructure. If you haven’t already, consider running an Ethereum node.", + }, + ], + correctAnswerId: "a003-d", + }, + a004: { + prompt: "What is Ethereum’s uptime?", + answers: [ + { + id: "a004-a", + label: "95%", + explanation: + "Ethereum runs on thousands of servers called nodes. Individual nodes go down, but as long as some nodes are up Ethereum will stay online.", + }, + { + id: "a004-b", + label: "99.99%", + explanation: + "Ethereum runs on thousands of servers called nodes. Individual nodes go down, but as long as some nodes are up Ethereum will stay online.", + }, + { + id: "a004-c", + label: "99.99999%", + explanation: + "Ethereum runs on thousands of servers called nodes. Individual nodes go down, but as long as some nodes are up Ethereum will stay online.", + }, + { + id: "a004-d", + label: "100%", + explanation: + "Ethereum runs on thousands of servers called nodes. Individual nodes go down, but as long as some nodes are up Ethereum will stay online.", + }, + ], + correctAnswerId: "a004-d", + }, + a005: { + prompt: "Ethereum consumes more electricity than:", + answers: [ + { + id: "a005-a", + label: "YouTube", + explanation: + "YouTube uses ~244 Terawatts per year. Ethereum uses 0.01 Terawatts per year.", + }, + { + id: "a005-b", + label: "Netflix", + explanation: + "Netflix uses ~94 Terawatts per year. Ethereum uses 0.01 Terawatts per year.", + }, + { + id: "a005-c", + label: "PayPal", + explanation: + "Paypal uses ~0.26 Terawatts per year. Ethereum uses 0.01 Terawatts per year.", + }, + { + id: "a005-d", + label: "None of the above", + explanation: + "Ethereum uses 0.01 Terawatts per year. Less than YouTube (~244 TW/yr), Netflix (~94 TW/yr), and Paypal (~0.26 TW/yr).", + }, + ], + correctAnswerId: "a005-d", + }, + // What is ether? + b001: { + prompt: "Ether is also known as:", + answers: [ + { + id: "b001-a", + label: "ETC", + explanation: "ETC is the ticker for ether on Ethereum Classic.", + }, + { + id: "b001-b", + label: "ETR", + explanation: + "ETR is not a ticker for ether or any significant cryptocurrency.", + }, + { + id: "b001-c", + label: "ETH", + explanation: "ETH is the ticker for ether on Ethereum.", + }, + { + id: "b001-d", + label: "BTC", + explanation: "BTC is the ticker for bitcoin on the Bitcoin network.", + }, + ], + correctAnswerId: "b001-c", + }, + b002: { + prompt: "On Ethereum, network fees are paid in:", + answers: [ + { + id: "b002-a", + label: "bitcoin", + explanation: + "Lowercase “bitcoin” is the native cryptocurrency of the Bitcoin network.", + }, + { + id: "b002-b", + label: "ETH", + explanation: + "Ether (ETH) is native cryptocurrency of Ethereum. All network fees on Ethereum are paid in ETH.", + }, + { + id: "b002-c", + label: "USD", + explanation: + "It is not possible to pay network fees on Ethereum in USD (US Dollars), or any other FIAT currency.", + }, + { + id: "b002-d", + label: "Ethereum", + explanation: + "Ethereum is the network, but Ethereum’s network fees are paid in the different.", + }, + ], + correctAnswerId: "b002-b", + }, + b003: { + prompt: "Staking on Ethereum helps secure the network because:", + answers: [ + { + id: "b003-a", + label: "Stakers can ban people if they don’t like what they are doing", + explanation: "Stakers are not able to arbitrarily censor users.", + }, + { + id: "b003-b", + label: + "If a staker tries to cheat the network, they risk losing their ETH", + explanation: + "Stakers risk losing a significant amount of their ETH if they are shown to be behaving maliciously against the network. This is known as slashing.", + }, + { + id: "b003-c", + label: "Stakers run powerful computers to demonstrate proof-of-work", + explanation: + "Stakers do not need powerful hardware to stake their ETH. Ethereum stopped using proof-of-work at The Merge.", + }, + { + id: "b003-d", + label: "Stakers undergo KYC before being accepted as a validator", + explanation: + "Staking on Ethereum is permissionless and does not require KYC.", + }, + ], + correctAnswerId: "b003-b", + }, + b004: { + prompt: "ETH is valuable because:", + answers: [ + { + id: "b004-a", + label: "ETH is needed to do anything on Ethereum", + explanation: + "This answer is correct, but there are also other correct answers.", + }, + { + id: "b004-b", + label: "ETH is an un-censorable peer-to-peer money", + explanation: + "This answer is correct, but there are also other correct answers.", + }, + { + id: "b004-c", + label: "ETH is used as collateral for crypto loans", + explanation: + "This answer is correct, but there are also other correct answers.", + }, + { + id: "b004-d", label: "All of the above", explanation: - "Ethereum consumes approximately 0.01 TW/year, while YouTube consumes ~244 TW/year, Netflix ~94 TW/year, and PayPal ~0.26 TW/year.", + "Ethereum transactions cannot be censored, ETH is required to make any transaction on Ethereum, and it is crucial to the stability of the DeFi ecosystem.", + }, + ], + correctAnswerId: "b004-d", + }, + // Web3 + c001: { + prompt: "Web3 allows users to own digital assets directly through:", + answers: [ + { + id: "c001-a", + label: "DAOs", + explanation: + "DAOs (Decentralized autonomous organizations) are member-owned communities without centralized leadership.", + }, + { + id: "c001-b", + label: "NFTs", + explanation: + "NFTs (Non-fungible tokens) provide a way to represent anything unique as an Ethereum-based asset.", + }, + { + id: "c001-c", + label: "ENS", + explanation: + "ENS (Ethereum Name Service) is a decentralized naming service for the Ethereum blockchain.", + }, + { + id: "c001-d", + label: "GitHub", + explanation: + "GitHub is a centralized platform, primarily for storing code using distributed version control. GitHub does not allow ownership of your data or digital assets.", + }, + ], + correctAnswerId: "c001-b", + }, + c002: { + prompt: + "Web1 was read-only, Web2 is read-write, Web3 has been described as:", + answers: [ + { + id: "c002-a", + label: "read-write-sell", + explanation: "Web3 has not been described in this way.", + }, + { + id: "c002-b", + label: "read-write-store", + explanation: "Web3 has not been described in this way.", + }, + { + id: "c002-c", + label: "read-write-own", + explanation: + "Web3 allows users to own their data and has therefore been described as ‘read-write-own’, any improvement on Web2’s, which is only ‘read-write’.", + }, + { + id: "c002-d", + label: "read-write-buy", + explanation: "Web3 has not been described in this way.", + }, + ], + correctAnswerId: "c002-c", + }, + c003: { + prompt: + "Which iteration of the web has native payments built into its infrastructure?", + answers: [ + { + id: "c003-a", + label: "Web1", + explanation: "Web1 didn’t native, built-in payments.", + }, + { + id: "c003-b", + label: "Web2", + explanation: "Web2 does not have native, built-in payments.", + }, + { + id: "c003-c", + label: "Web3", + explanation: + "Web3 has native, built-in payments with cryptocurrencies, such as ETH.", + }, + { + id: "c003-d", + label: "All of the above", + explanation: "Web1 and Web3 do not have native, built-in payments.", + }, + ], + correctAnswerId: "c003-c", + }, + c004: { + prompt: "The term ‘Web3’ was first coined by:", + answers: [ + { + id: "c004-a", + label: "Gavin Wood", + explanation: + "Gavin Wood, a co-founder of Ethereum, is credited with coining the term Web3 shortly after Ethereum launched in 2014.", + }, + { + id: "c004-b", + label: "Steve Jobs", + explanation: "Steve Jobs did not coin the phrase ‘Web3’.", + }, + { + id: "c004-c", + label: "Vitalik Buterin", + explanation: + "Vitalik Buterin, although the original founder of Ethereum, did not coin the phrase ‘Web3’.", + }, + { + id: "c004-d", + label: "Elon Musk", + explanation: "Elon Musk did not coin the phrase ‘Web3’.", + }, + ], + correctAnswerId: "c004-a", + }, + c005: { + prompt: + "You could use a single login across all of the web through the use of:", + answers: [ + { + id: "c005-a", + label: "digital identity", + explanation: + "Digital identity is a high-level concept, not a specific idea that would allow a single login to be used across the web.", + }, + { + id: "c005-b", + label: "centralized identity", + explanation: + "It would not be possible to use a centralized identity provider across all of the web.", + }, + { + id: "c005-c", + label: "proof-of-identity", + explanation: + "Proof-of-identity is a high-level concept, not a specific idea that would allow a single login to be used across the web.", + }, + { + id: "c005-d", + label: "decentralized identity", + explanation: + "Decentralized identity authentication services, such as Sign-in-with-Ethereum, would allow the use of a single login across all of the web.", + }, + ], + correctAnswerId: "c005-d", + }, + // Wallets + d001: { + prompt: "The most secure type of wallet is:", + answers: [ + { + id: "d001-a", + label: "A mobile wallet", + explanation: + "Mobile wallets hold private keys on a mobile device, which typically has connections to the internet, and potentially compromised by other software.", + }, + { + id: "d001-b", + label: "A hardware wallet", + explanation: + "A hardware wallet’s private keys are stored on a dedicated device that can be kept off of the internet and are isolated from other applications on your devices.", + }, + { + id: "d001-c", + label: "A web wallet", + explanation: + "Web wallets have less security than hardware wallets because the private keys are stored on an internet-connected device.", + }, + { + id: "d001-d", + label: "A desktop wallet", + explanation: + "Desktop wallets hold private keys on a computer hard drive, which typically has connections to the internet, and potentially compromised by other software.", + }, + ], + correctAnswerId: "d001-b", + }, + d002: { + prompt: "Which of the following is the best way to store your seed phrase?", + answers: [ + { + id: "d002-a", + label: "In a photo on your phone", + explanation: + "This is not secure. If this photo is uploaded to cloud storage then a hacker gets this image and gains access to your account.", + }, + { + id: "d002-b", + label: "In a file on your computer", + explanation: + "This is not secure. A hacker could get this file and gain access to your account.", + }, + { + id: "d002-c", + label: "Written down on paper", + explanation: + "Of the available options, writing down your seed phrase on paper is the most secure.", + }, + { + id: "d002-d", + label: "In a text message to a trusted family member", + explanation: + "You should never text your seed phrase to anyone. The message could be intercepted by a third party, and even if you trust this person absolutely, you do not know who may be able to access their phone.", + }, + ], + correctAnswerId: "d002-c", + }, + d003: { + prompt: "Who should you give your seed phrase / private keys to:", + answers: [ + { + id: "d003-a", + label: "Someone you’re paying", + explanation: + "You should never give your seed phrase or private keys to anyone. Instead, send tokens to their wallet address via a transaction.", + }, + { + id: "d003-b", + label: "To login to a dapp or wallet", + explanation: + "You should never give your seed phrase / private keys to login to your wallet or dapp.", + }, + { + id: "d003-c", + label: "Support staff", + explanation: + "You should never give your seed phrase / private keys to anyone claiming to be support staff. Anyone asking you for this is a scammer.", + }, + { + id: "d003-d", + label: "No one", + explanation: + "Ideally, you should never give your seed phrase or private keys to anyone. If you trust someone completely with absolute access to your funds (such as a spouse), then you may decide to share this information with them.", + }, + ], + correctAnswerId: "d003-d", + }, + d004: { + prompt: "A wallet and an account on Ethereum are the same thing.", + answers: [ + { + id: "d004-a", + label: "True", + explanation: + "A wallet is a visual interface used to interact with an Ethereum account.", + }, + { + id: "d004-b", + label: "False", + explanation: + "A wallet is a visual interface used to interact with an Ethereum account.", + }, + ], + correctAnswerId: "d004-b", + }, + // Security + e001: { + prompt: "Why should you use unique passwords for all of your accounts?", + answers: [ + { + id: "e001-a", + label: "Incase one of the platforms has a data breach", + explanation: + "This answer is correct, but there are also other correct answers.", + }, + { + id: "e001-b", + label: + "Incase someone looking over your shoulder works out your password", + explanation: + "This answer is correct, but there are also other correct answers.", + }, + { + id: "e001-c", + label: "Incase malware, such as a key-logger, steals your password", + explanation: + "This answer is correct, but there are also other correct answers.", + }, + { + id: "e001-d", + label: "All of the above", + explanation: + "All answers are correct. Using unique passwords is the best way to prevent anyone else from accessing your account.", + }, + ], + correctAnswerId: "e001-d", + }, + // Question ID d003 as well + e002: { + prompt: "Following The Merge, ETH must be upgraded to ETH2.", + answers: [ + { + id: "e002-a", + label: "True", + explanation: + "You do not need to upgrade your ETH to ETH2. There is no ETH2 and this is a common narrative used by scammers.", + }, + { + id: "e002-b", + label: "False", + explanation: + "You do not need to upgrade your ETH to ETH2. There is no ETH2 and this is a common narrative used by scammers.", + }, + ], + correctAnswerId: "e002-b", + }, + e003: { + prompt: "ETH giveaways are:", + answers: [ + { + id: "e003-a", + label: "a good way to get more ETH", + explanation: + "ETH giveaways are scams designed to steal your ETH and other tokens. They are never a good way to get more ETH.", + }, + { + id: "e003-b", + label: "always genuine", + explanation: "ETH giveaways are never genuine.", + }, + { + id: "e003-c", + label: "commonly performed by prominent members of the community", + explanation: + "Prominent community members do not do ETH giveaways. Scammers pretend well-know individuals, such as Elon Musk, are doing giveaways to give them the scam a sense of legitimacy.", + }, + { + id: "e003-d", + label: "always a scam", + explanation: + "ETH giveaways are always scams. Reporting and ignoring scammers is best.", + }, + ], + correctAnswerId: "e003-d", + }, + e004: { + prompt: "Ethereum transaction are reversible.", + answers: [ + { + id: "e004-a", + label: "True", + explanation: + "Ethereum transactions cannot be reversed. Anyone who tells you otherwise might be trying to scam you.", + }, + { + id: "e004-b", + label: "False", + explanation: + "Ethereum transactions cannot be reversed. Anyone who tells you otherwise might be trying to scam you.", + }, + ], + correctAnswerId: "e004-b", + }, + // NFTs + f001: { + prompt: "NFTs are most comprehensively defined as:", + answers: [ + { + id: "f001-a", + label: "unique digital assets", + explanation: "NFTs represent a unique digital asset.", // with an owner + }, + { + id: "f001-b", + label: "digital artwork", + explanation: + "NFTs represent a unique digital asset, this is commonly digital artwork, but it isn’t limited to art.", + }, + { + id: "f001-c", + label: "tickets to exclusive events", + explanation: + "NFTs represent a unique digital asset, this is commonly digital artwork, but it isn’t limited to tickets to exclusive events.", + }, + { + id: "f001-d", + label: "legally binding contracts", + explanation: + "Although a legal contract could be represented as an NFT, NFTs are not exclusive to legally binding contracts.", + }, + ], + correctAnswerId: "f001-a", + }, + f002: { + prompt: "Two NFTs representing the same artwork are the same thing.", + answers: [ + { + id: "f002-a", + label: "True", + explanation: + "NFTs are non-fungible, even if they represent the same thing, they are still unique digital assets.", + }, + { + id: "f002-b", + label: "False", + explanation: + "NFTs are non-fungible, even if they represent the same thing, they are still unique digital assets.", + }, + ], + correctAnswerId: "f002-b", + }, + f003: { + prompt: "NFTs most commonly represent:", + answers: [ + { + id: "f003-a", + label: "The password to your wallet", + explanation: "This is a security risk and generally a bad idea!", + }, + { + id: "f003-b", + label: "Ownership of a unique digital item", + explanation: + "NFTs commonly represent ownership of a unique digital item.", + }, + { + id: "f003-c", + label: "Your current ETH balance", + explanation: "NFTs cannot represent your ETH balance arbitrarily.", + }, + { + id: "f003-d", + label: "All of the above", + explanation: + "NFTs commonly represent ownership of a unique digital item, not ETH balances or wallet passwords.", + }, + ], + correctAnswerId: "f003-b", + }, + f004: { + prompt: "NFTs have helped create a new:", + answers: [ + { + id: "f004-a", + label: "curator economy", + explanation: + "NFTs helped create a new economy for creators, not curators.", + }, + { + id: "f004-b", + label: "carbon economy", + explanation: + "NFTs helped create a new economy for creators, not carbon.", + }, + { + id: "f004-c", + label: "creator economy", + explanation: "NFTs helped create the creator economy.", + }, + { + id: "f004-d", + label: "ownership economy", + explanation: + "NFTs helped create a new economy for creators, not ownership.", + }, + ], + correctAnswerId: "f004-c", + }, + f005: { + prompt: "NFTs on Ethereum are harmful to the environment", + answers: [ + { + id: "f005-a", + label: "True", + explanation: + "Since The Merge (transition to proof-of-stake), any transaction has been a negligible impact on the environment.", + }, + { + id: "f005-b", + label: "False", + explanation: + "Since The Merge (transition to proof-of-stake), any transaction has been a negligible impact on the environment.", }, ], - correctAnswerId: "a002-d", + correctAnswerId: "f005-b", }, } From 69b021960e4a83241ed722264bbc05e62037d0af Mon Sep 17 00:00:00 2001 From: Paul Wackerow <54227730+wackerow@users.noreply.github.com> Date: Tue, 11 Oct 2022 08:37:45 -0500 Subject: [PATCH 025/151] add QuizWidget to eth and wallets pages --- src/pages-conditional/eth.tsx | 7 +++++++ src/pages-conditional/wallets.tsx | 7 +++++++ 2 files changed, 14 insertions(+) diff --git a/src/pages-conditional/eth.tsx b/src/pages-conditional/eth.tsx index be4de0c0df7..1edb521b9f6 100644 --- a/src/pages-conditional/eth.tsx +++ b/src/pages-conditional/eth.tsx @@ -1,4 +1,5 @@ import React from "react" +import { Center } from "@chakra-ui/react" import styled from "@emotion/styled" import { GatsbyImage } from "gatsby-plugin-image" import { useIntl } from "react-intl" @@ -28,6 +29,7 @@ import { StyledCard, } from "../components/SharedStyledComponents" import FeedbackCard from "../components/FeedbackCard" +import QuizWidget from "../components/Quiz/QuizWidget" import { translateMessageId } from "../utils/translations" import { getImage, getSrc } from "../utils/image" @@ -511,6 +513,11 @@ const EthPage = (props: PageProps) => { ))} + +
+ +
+ diff --git a/src/pages-conditional/wallets.tsx b/src/pages-conditional/wallets.tsx index 266e8906972..fafee332546 100644 --- a/src/pages-conditional/wallets.tsx +++ b/src/pages-conditional/wallets.tsx @@ -1,4 +1,5 @@ import React from "react" +import { Center } from "@chakra-ui/react" import styled from "@emotion/styled" import { GatsbyImage } from "gatsby-plugin-image" import { useIntl } from "react-intl" @@ -22,6 +23,7 @@ import { TwoColumnContent, } from "../components/SharedStyledComponents" import FeedbackCard from "../components/FeedbackCard" +import QuizWidget from "../components/Quiz/QuizWidget" import { translateMessageId } from "../utils/translations" import { getImage, getSrc } from "../utils/image" @@ -451,6 +453,11 @@ const WalletsPage = ({ + +
+ +
+ From 5802edd5233cf99217bf3626679531daa55c95cc Mon Sep 17 00:00:00 2001 From: Paul Wackerow <54227730+wackerow@users.noreply.github.com> Date: Tue, 11 Oct 2022 09:56:48 -0500 Subject: [PATCH 026/151] fix quiz svg colors --- src/assets/quiz/correct.svg | 2 +- src/assets/quiz/incorrect.svg | 2 +- src/assets/quiz/trophy.svg | 4 ++-- 3 files changed, 4 insertions(+), 4 deletions(-) diff --git a/src/assets/quiz/correct.svg b/src/assets/quiz/correct.svg index 7df1f6a3844..abf60946aea 100644 --- a/src/assets/quiz/correct.svg +++ b/src/assets/quiz/correct.svg @@ -1,3 +1,3 @@ - + diff --git a/src/assets/quiz/incorrect.svg b/src/assets/quiz/incorrect.svg index f391b34f9a6..8dcec009d8c 100644 --- a/src/assets/quiz/incorrect.svg +++ b/src/assets/quiz/incorrect.svg @@ -1,3 +1,3 @@ - + diff --git a/src/assets/quiz/trophy.svg b/src/assets/quiz/trophy.svg index c3b4f445311..04bb4f16115 100644 --- a/src/assets/quiz/trophy.svg +++ b/src/assets/quiz/trophy.svg @@ -1,4 +1,4 @@ - - + + From 343c1df7d66c2fe7492fbce3ffc0d275af15e139 Mon Sep 17 00:00:00 2001 From: Paul Wackerow <54227730+wackerow@users.noreply.github.com> Date: Tue, 11 Oct 2022 22:44:22 -0500 Subject: [PATCH 027/151] quis adjustments --- src/components/Quiz/QuizWidget.tsx | 6 +++--- src/data/learnQuizzes/questionBank.ts | 8 ++++---- 2 files changed, 7 insertions(+), 7 deletions(-) diff --git a/src/components/Quiz/QuizWidget.tsx b/src/components/Quiz/QuizWidget.tsx index 03389634bb0..db80574b377 100644 --- a/src/components/Quiz/QuizWidget.tsx +++ b/src/components/Quiz/QuizWidget.tsx @@ -145,7 +145,7 @@ const QuizWidget: React.FC = ({ quizKey, maxQuestions }) => { return ( quizData && ( - + = ({ quizKey, maxQuestions }) => { )}
- + {showAnswer && currentQuestionAnswerChoice && !currentQuestionAnswerChoice.isCorrect && ( @@ -280,7 +280,7 @@ const QuizWidget: React.FC = ({ quizKey, maxQuestions }) => { )} {showResults ? ( - + diff --git a/src/data/learnQuizzes/questionBank.ts b/src/data/learnQuizzes/questionBank.ts index 08f5c46aedb..0b933ce6b8a 100644 --- a/src/data/learnQuizzes/questionBank.ts +++ b/src/data/learnQuizzes/questionBank.ts @@ -355,7 +355,7 @@ const questionBank: QuestionBank = { { id: "c003-d", label: "All of the above", - explanation: "Web1 and Web3 do not have native, built-in payments.", + explanation: "Web1 and Web2 do not have native, built-in payments.", }, ], correctAnswerId: "c003-c", @@ -534,20 +534,20 @@ const questionBank: QuestionBank = { answers: [ { id: "e001-a", - label: "Incase one of the platforms has a data breach", + label: "In case one of the platforms has a data breach", explanation: "This answer is correct, but there are also other correct answers.", }, { id: "e001-b", label: - "Incase someone looking over your shoulder works out your password", + "In case someone looking over your shoulder works out your password", explanation: "This answer is correct, but there are also other correct answers.", }, { id: "e001-c", - label: "Incase malware, such as a key-logger, steals your password", + label: "In case malware, such as a key-logger, steals your password", explanation: "This answer is correct, but there are also other correct answers.", }, From 219004ffb46ec6046d7b558811a5d05fbbb0903b Mon Sep 17 00:00:00 2001 From: Paul Wackerow <54227730+wackerow@users.noreply.github.com> Date: Tue, 11 Oct 2022 22:54:03 -0500 Subject: [PATCH 028/151] add QuizWidget to nft/web3/security pages --- src/content/nft/index.md | 2 ++ src/content/security/index.md | 2 ++ src/content/web3/index.md | 2 ++ src/templates/static.tsx | 2 ++ src/templates/use-cases.tsx | 2 ++ 5 files changed, 10 insertions(+) diff --git a/src/content/nft/index.md b/src/content/nft/index.md index 5d5fa10c906..37042a73df7 100644 --- a/src/content/nft/index.md +++ b/src/content/nft/index.md @@ -338,3 +338,5 @@ Most NFTs are built using a consistent standard known as [ERC-721](/developers/d - [No, CryptoArtists Aren’t Harming the Planet](https://medium.com/superrare/no-cryptoartists-arent-harming-the-planet-43182f72fc61) - [Ethereum's energy consumption](/energy-consumption/) - [A country's worth of power, no more](https://blog.ethereum.org/2021/05/18/country-power-no-more/) – _Carl Beekhuizen, May 18 2021_ + + diff --git a/src/content/security/index.md b/src/content/security/index.md index 4405dcc8b22..ee5698c839d 100644 --- a/src/content/security/index.md +++ b/src/content/security/index.md @@ -288,3 +288,5 @@ Airdrop scams involve a scam project airdropping an asset (NFT, token) into your - [Staying Safe: Common Scams](https://support.mycrypto.com/staying-safe/common-scams) - _MyCrypto_ - [Avoiding Scams](https://bitcoin.org/en/scams) - _Bitcoin.org_ - [Twitter thread on common crypto phishing emails and messages](https://twitter.com/tayvano_/status/1516225457640787969) - _Taylor Monahan_ + + diff --git a/src/content/web3/index.md b/src/content/web3/index.md index 37115a9a8f3..146dff77674 100644 --- a/src/content/web3/index.md +++ b/src/content/web3/index.md @@ -159,3 +159,5 @@ Web3 isn’t rigidly defined. Various community participants have different pers - [Why Decentralization Matters](https://onezero.medium.com/why-decentralization-matters-5e3f79f7638e) - _Chris Dixon_ - [The Web3 Landscape](https://a16z.com/wp-content/uploads/2021/10/The-web3-Readlng-List.pdf) – _a16z_ - [The Web3 Debate](https://www.notboring.co/p/the-web3-debate?s=r) – _Packy McCormick_ + + diff --git a/src/templates/static.tsx b/src/templates/static.tsx index 1a20a87315d..9f6d4b02974 100644 --- a/src/templates/static.tsx +++ b/src/templates/static.tsx @@ -47,6 +47,7 @@ import YouTube from "../components/YouTube" import TranslationChartImage from "../components/TranslationChartImage" import PostMergeBanner from "../components/Banners/PostMergeBanner" import EnergyConsumptionChart from "../components/EnergyConsumptionChart" +import QuizWidget from "../components/Quiz/QuizWidget" import { getLocaleTimestamp } from "../utils/time" import { isLangRightToLeft, TranslationKey } from "../utils/translations" @@ -154,6 +155,7 @@ const components = { YouTube, TranslationChartImage, EnergyConsumptionChart, + QuizWidget, } const StaticPage = ({ diff --git a/src/templates/use-cases.tsx b/src/templates/use-cases.tsx index 5b59d481435..cf45e4f8cb1 100644 --- a/src/templates/use-cases.tsx +++ b/src/templates/use-cases.tsx @@ -42,6 +42,7 @@ import { import Emoji from "../components/OldEmoji" import YouTube from "../components/YouTube" import FeedbackCard from "../components/FeedbackCard" +import QuizWidget from "../components/Quiz/QuizWidget" import { isLangRightToLeft } from "../utils/translations" import { getSummaryPoints } from "../utils/getSummaryPoints" @@ -171,6 +172,7 @@ const components = { DocLink, ExpandableCard, YouTube, + QuizWidget, } const Title = styled.h1` From 72a786ad8267989343c6ed709b8961181a02c1f8 Mon Sep 17 00:00:00 2001 From: Paul Wackerow <54227730+wackerow@users.noreply.github.com> Date: Wed, 12 Oct 2022 13:34:28 -0500 Subject: [PATCH 029/151] fix genesis year --- src/data/learnQuizzes/questionBank.ts | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/data/learnQuizzes/questionBank.ts b/src/data/learnQuizzes/questionBank.ts index 0b933ce6b8a..0a9c954e58d 100644 --- a/src/data/learnQuizzes/questionBank.ts +++ b/src/data/learnQuizzes/questionBank.ts @@ -367,7 +367,7 @@ const questionBank: QuestionBank = { id: "c004-a", label: "Gavin Wood", explanation: - "Gavin Wood, a co-founder of Ethereum, is credited with coining the term Web3 shortly after Ethereum launched in 2014.", + "Gavin Wood, a co-founder of Ethereum, is credited with coining the term Web3 shortly after Ethereum launched in 2015.", }, { id: "c004-b", From 4c096e3e7082dece2a54a854cb7a34fc3c742d18 Mon Sep 17 00:00:00 2001 From: Muhammad Ahmad <75790323+Mahmadabid@users.noreply.github.com> Date: Thu, 13 Oct 2022 16:07:37 +0500 Subject: [PATCH 030/151] fixed according to guidelines --- src/components/UpgradeBannerNotification.tsx | 14 +++++--------- 1 file changed, 5 insertions(+), 9 deletions(-) diff --git a/src/components/UpgradeBannerNotification.tsx b/src/components/UpgradeBannerNotification.tsx index 241537fd008..4fe13e017b1 100644 --- a/src/components/UpgradeBannerNotification.tsx +++ b/src/components/UpgradeBannerNotification.tsx @@ -1,23 +1,19 @@ import React from "react" +import { chakra, Center } from "@chakra-ui/react" import BannerNotification from "./BannerNotification" -import Emoji from "src/components/Emoji" +import Emoji from "./Emoji" import Link from "./Link" -import { chakra, Center } from "@chakra-ui/react" - -const StyledBannerNotification = chakra(BannerNotification) - -const StyledEmoji = chakra(Emoji) const UpgradeBannerNotification: React.FC = () => ( - - + +
We've deprecated our use of 'Eth1' and 'Eth2' terms.{" "} Read the full announcement
- + ) export default UpgradeBannerNotification From f5b4062a67f7a4ab6c005ef6ec2add83d31bc68a Mon Sep 17 00:00:00 2001 From: tylerapfledderer Date: Thu, 13 Oct 2022 19:17:21 -0400 Subject: [PATCH 031/151] style(expandable-info): fix fontSize/lineHeight for `Heading` --- src/components/ExpandableInfo.tsx | 8 +++++++- 1 file changed, 7 insertions(+), 1 deletion(-) diff --git a/src/components/ExpandableInfo.tsx b/src/components/ExpandableInfo.tsx index 76d1e31f5f2..8bb1f59a0b1 100644 --- a/src/components/ExpandableInfo.tsx +++ b/src/components/ExpandableInfo.tsx @@ -100,7 +100,13 @@ const ExpandableInfo = forwardRef( }, }} > - + {title} From 7cb5c4476f47917de2ba7ab7f78ec6b0a787c871 Mon Sep 17 00:00:00 2001 From: tylerapfledderer Date: Thu, 13 Oct 2022 19:18:06 -0400 Subject: [PATCH 032/151] style(expandable-info): fix alignment of heading content --- src/components/ExpandableInfo.tsx | 1 + 1 file changed, 1 insertion(+) diff --git a/src/components/ExpandableInfo.tsx b/src/components/ExpandableInfo.tsx index 8bb1f59a0b1..751d05cba8e 100644 --- a/src/components/ExpandableInfo.tsx +++ b/src/components/ExpandableInfo.tsx @@ -84,6 +84,7 @@ const ExpandableInfo = forwardRef( > Date: Thu, 13 Oct 2022 19:36:31 -0400 Subject: [PATCH 033/151] refactor(rollup-product-dev-doc): migrate component to chakra --- src/components/RollupProductDevDoc.tsx | 71 +++++++++++++------------- 1 file changed, 35 insertions(+), 36 deletions(-) diff --git a/src/components/RollupProductDevDoc.tsx b/src/components/RollupProductDevDoc.tsx index 15443a78db5..3f312ee4f36 100644 --- a/src/components/RollupProductDevDoc.tsx +++ b/src/components/RollupProductDevDoc.tsx @@ -1,6 +1,13 @@ // Libraries import React from "react" -import styled from "@emotion/styled" +import { + Box, + Flex, + Heading, + ListItem, + Text, + UnorderedList, +} from "@chakra-ui/react" // Components import Link from "./Link" @@ -34,65 +41,57 @@ type Rollups = { [type in RollupType]: Array } const rollups = _rollups as Rollups -// Styles -const H4 = styled.h4` - margin: 1rem 0; -` - -const ProductCard = styled.div` - margin: 1rem 0; - background: ${(props) => props.theme.colors.rollupDevDocList}; - display: flex; - flex-direction: row; -` - -const Content = styled.div` - padding: 1rem 1rem 0 1rem; -` - export interface IProps { rollupType: RollupType } const RollupProductDevDoc: React.FC = ({ rollupType }) => { return ( -
+ {rollups[rollupType].map( ({ name, noteKey, website, developerDocs, l2beat }) => { return ( - - -
-

{name}

+ + + + + {name} + {noteKey.length > 0 && ( -

+ * -

+ )} -
    -
  • + + -
    • -
  • + + -
    • -
  • + + -
    • -
-
- - + + + + + ) } )} -
+ ) } From 721a42e560f858ee467ae16abf658f4858c74a90 Mon Sep 17 00:00:00 2001 From: Aniruddha Sil Date: Fri, 7 Oct 2022 23:46:52 +0530 Subject: [PATCH 034/151] Converted Outer box to chakra --- src/components/Slider.tsx | 13 +++++++++++-- 1 file changed, 11 insertions(+), 2 deletions(-) diff --git a/src/components/Slider.tsx b/src/components/Slider.tsx index f97c547ef7c..926ec62c98b 100644 --- a/src/components/Slider.tsx +++ b/src/components/Slider.tsx @@ -4,6 +4,7 @@ import styled from "@emotion/styled" import useEmblaCarousel from "embla-carousel-react" import Icon from "./Icon" +import { Box, Container } from "@chakra-ui/react" const Embla = styled.div` position: relative; @@ -146,7 +147,15 @@ const Slider: React.FC = ({ children, onSlideChange }) => { }, [embla, setScrollSnaps, onSelect]) return ( - + {children} @@ -181,7 +190,7 @@ const Slider: React.FC = ({ children, onSlideChange }) => { /> ))} - + ) } From f53a5dd3f4d98f8230616943767a0037fbe8d9b6 Mon Sep 17 00:00:00 2001 From: Aniruddha Sil Date: Sat, 8 Oct 2022 00:05:28 +0530 Subject: [PATCH 035/151] Dots changed to Chakra --- src/components/Slider.tsx | 26 +++++++++++++------------- 1 file changed, 13 insertions(+), 13 deletions(-) diff --git a/src/components/Slider.tsx b/src/components/Slider.tsx index 926ec62c98b..84d466bc3fa 100644 --- a/src/components/Slider.tsx +++ b/src/components/Slider.tsx @@ -4,15 +4,15 @@ import styled from "@emotion/styled" import useEmblaCarousel from "embla-carousel-react" import Icon from "./Icon" -import { Box, Container } from "@chakra-ui/react" +import { Box, Center, Container } from "@chakra-ui/react" -const Embla = styled.div` - position: relative; - padding: 2rem; - background-color: ${({ theme }) => theme.colors.slider.bg}; - border: 1px solid ${({ theme }) => theme.colors.slider.border}; - border-radius: 0.3rem; -` +// const Embla = styled.div` +// position: relative; +// padding: 2rem; +// background-color: ${({ theme }) => theme.colors.slider.bg}; +// border: 1px solid ${({ theme }) => theme.colors.slider.border}; +// border-radius: 0.3rem; +// ` const EmblaViewport = styled.div` overflow: hidden; @@ -79,9 +79,9 @@ const Button = styled.button` } ` -const Dots = styled.div` - text-align: center; -` +// const Dots = styled.div` +// text-align: center; +// ` const DotButton = styled.button<{ selected: boolean }>` width: 5px; @@ -181,7 +181,7 @@ const Slider: React.FC = ({ children, onSlideChange }) => { /> - + {scrollSnaps.map((_, index) => ( = ({ children, onSlideChange }) => { onClick={() => scrollTo(index)} /> ))} - + ) } From 7d71012823c77e437f578cf55222b970501d1e5f Mon Sep 17 00:00:00 2001 From: Aniruddha Sil Date: Sat, 8 Oct 2022 00:31:09 +0530 Subject: [PATCH 036/151] Migrated few components to chakra --- src/components/Slider.tsx | 64 ++++++++++++++++++++++----------------- 1 file changed, 37 insertions(+), 27 deletions(-) diff --git a/src/components/Slider.tsx b/src/components/Slider.tsx index 84d466bc3fa..1999b76afb3 100644 --- a/src/components/Slider.tsx +++ b/src/components/Slider.tsx @@ -1,10 +1,10 @@ -import React, { useCallback, useEffect, useState } from "react" +import React, { ReactNode, useCallback, useEffect, useState } from "react" import { useTheme } from "@emotion/react" import styled from "@emotion/styled" import useEmblaCarousel from "embla-carousel-react" import Icon from "./Icon" -import { Box, Center, Container } from "@chakra-ui/react" +import { Box, Center, Container, Flex } from "@chakra-ui/react" // const Embla = styled.div` // position: relative; @@ -14,33 +14,33 @@ import { Box, Center, Container } from "@chakra-ui/react" // border-radius: 0.3rem; // ` -const EmblaViewport = styled.div` - overflow: hidden; - width: 100%; +// const EmblaViewport = styled.div` +// overflow: hidden; +// width: 100%; - .is-draggable { - cursor: move; - cursor: grab; - } +// .is-draggable { +// cursor: move; +// cursor: grab; +// } - .is-dragging { - cursor: grabbing; - } -` +// .is-dragging { +// cursor: grabbing; +// } +// ` -const EmblaContainer = styled.div` - display: flex; -` +// const EmblaContainer = styled.div` +// display: flex; +// ` -export const EmblaSlide = styled.div` - position: relative; - min-width: 100%; +// export const EmblaSlide = styled.div` +// position: relative; +// min-width: 100%; - h2, - h3 { - margin-top: 0; - } -` +// h2, +// h3 { +// margin-top: 0; +// } +// ` const Buttons = styled.div` display: flex; @@ -146,6 +146,7 @@ const Slider: React.FC = ({ children, onSlideChange }) => { }) }, [embla, setScrollSnaps, onSelect]) + // TODO: Background color return ( = ({ children, onSlideChange }) => { w="full" background="slider.bg" > - - {children} - + + {children} + - + {scrollSnaps.map((_, index) => ( Date: Sat, 8 Oct 2022 15:07:20 +0530 Subject: [PATCH 039/151] Added Chakra Icons for the Icon button --- package.json | 1 + src/components/Slider.tsx | 79 +++++++++++++++++++++------------------ yarn.lock | 19 ++++++++++ 3 files changed, 62 insertions(+), 37 deletions(-) diff --git a/package.json b/package.json index ffb67304ca2..85a82e13a80 100644 --- a/package.json +++ b/package.json @@ -10,6 +10,7 @@ "dependencies": { "@apollo/client": "^3.3.13", "@chakra-ui/gatsby-plugin": "^3.0.1", + "@chakra-ui/icons": "^2.0.11", "@chakra-ui/react": "^2.2.8", "@emotion/react": "^11.9.3", "@emotion/styled": "^11.9.3", diff --git a/src/components/Slider.tsx b/src/components/Slider.tsx index 1c97fe83d16..aa965bfe291 100644 --- a/src/components/Slider.tsx +++ b/src/components/Slider.tsx @@ -4,7 +4,8 @@ import styled from "@emotion/styled" import useEmblaCarousel from "embla-carousel-react" import Icon from "./Icon" -import { Box, Center, Container, Flex } from "@chakra-ui/react" +import { Box, Center, Container, Flex, IconButton } from "@chakra-ui/react" +import { ChevronLeftIcon, ChevronRightIcon } from "@chakra-ui/icons" // const Embla = styled.div` // position: relative; @@ -42,24 +43,24 @@ import { Box, Center, Container, Flex } from "@chakra-ui/react" // } // ` -const Buttons = styled.div` - display: flex; - flex-direction: row; - justify-content: center; - margin-bottom: 1rem; - margin-left: 0; +// const Buttons = styled.div` +// display: flex; +// flex-direction: row; +// justify-content: center; +// margin-bottom: 1rem; +// margin-left: 0; - @media (min-width: ${(props) => props.theme.breakpoints.s}) { - position: absolute; - bottom: 0; - left: 0; +// @media (min-width: ${(props) => props.theme.breakpoints.s}) { +// position: absolute; +// bottom: 0; +// left: 0; - justify-content: left; +// justify-content: left; - margin-bottom: 2rem; - margin-left: 2rem; - } -` +// margin-bottom: 2rem; +// margin-left: 2rem; +// } +// ` const Button = styled.button` background-color: ${({ theme, disabled }) => @@ -146,7 +147,7 @@ const Slider: React.FC = ({ children, onSlideChange }) => { }) }, [embla, setScrollSnaps, onSelect]) - // TODO: Background color + // TODO: fix colors return ( = ({ children, onSlideChange }) => { mb={{ sm: "2rem", base: "1rem" }} ml={{ sm: "2rem", base: 0 }} > - - + } + variant="unstyled" + isRound + mr="0.8rem" + _hover={{ boxShadow: "none" }} + _focus={{ boxShadow: "none" }} + bg="slider.btnBg" + /> + } + variant="unstyled" + isRound + mr="0.8rem" + _hover={{ boxShadow: "none" }} + _focus={{ boxShadow: "none" }} + bg="slider.btnBg" + /> {scrollSnaps.map((_, index) => ( diff --git a/yarn.lock b/yarn.lock index 0b901603978..0aa26837db7 100644 --- a/yarn.lock +++ b/yarn.lock @@ -2133,6 +2133,13 @@ compute-scroll-into-view "1.0.14" copy-to-clipboard "3.3.1" +"@chakra-ui/icon@3.0.11": + version "3.0.11" + resolved "https://registry.yarnpkg.com/@chakra-ui/icon/-/icon-3.0.11.tgz#a51dda24bed2f2ed77b4136ada8f22d3249c9870" + integrity sha512-RG4jf/XmBdaxOYI5J5QstEtTCPoVlmrQ/XiWhvN0LTgAnmZIqVwFl3Uw+satArdStHAs0GmJZg/E/soFTWuFmw== + dependencies: + "@chakra-ui/shared-utils" "2.0.2" + "@chakra-ui/icon@3.0.9": version "3.0.9" resolved "https://registry.yarnpkg.com/@chakra-ui/icon/-/icon-3.0.9.tgz#ba127d9eefd727f62e9bce07a23eca39ae506744" @@ -2140,6 +2147,13 @@ dependencies: "@chakra-ui/shared-utils" "2.0.1" +"@chakra-ui/icons@^2.0.11": + version "2.0.11" + resolved "https://registry.yarnpkg.com/@chakra-ui/icons/-/icons-2.0.11.tgz#3faf53c499c7c61c65b6e5ff4b0933f48b9ba416" + integrity sha512-WjxrFMt9hHpuZlnBh4fhtGOkIVlwYwHNmwq4sJGxYWlg8UnEhVJMoOojheJDy/d3Gp9+ApetlK3vt8fV/rZamg== + dependencies: + "@chakra-ui/icon" "3.0.11" + "@chakra-ui/image@2.0.10": version "2.0.10" resolved "https://registry.yarnpkg.com/@chakra-ui/image/-/image-2.0.10.tgz#712c0e1c579d959225bd8316d8d8f66cbeb95bb8" @@ -2519,6 +2533,11 @@ resolved "https://registry.yarnpkg.com/@chakra-ui/shared-utils/-/shared-utils-2.0.1.tgz#41e314e42c96039e8ffb265e73145cf755813ab4" integrity sha512-NXDBl/u4wrSNp0ON5R3r3evkRurrAz2yuO7neooaG+O5HEenVouGqm4CsXd6lUAPmjwiGzA0LQFNCt0Hj92dXg== +"@chakra-ui/shared-utils@2.0.2": + version "2.0.2" + resolved "https://registry.yarnpkg.com/@chakra-ui/shared-utils/-/shared-utils-2.0.2.tgz#1df08133194c12ac4df9302604ec37784c2bb026" + integrity sha512-wC58Fh6wCnFFQyiebVZ0NI7PFW9+Vch0QE6qN7iR+bLseOzQY9miYuzPJ1kMYiFd6QTOmPJkI39M3wHqrPYiOg== + "@chakra-ui/skeleton@2.0.14": version "2.0.14" resolved "https://registry.yarnpkg.com/@chakra-ui/skeleton/-/skeleton-2.0.14.tgz#5b5ae979236c0d3f014d0d588fb857fc7b681045" From 88022fa87677b15ccf8b4cfced28df1947c889e3 Mon Sep 17 00:00:00 2001 From: Aniruddha Sil Date: Sat, 8 Oct 2022 16:00:29 +0530 Subject: [PATCH 040/151] Minor Refactor --- src/components/Slider.tsx | 39 ++++++++++++++++++--------------------- 1 file changed, 18 insertions(+), 21 deletions(-) diff --git a/src/components/Slider.tsx b/src/components/Slider.tsx index aa965bfe291..1052a46c523 100644 --- a/src/components/Slider.tsx +++ b/src/components/Slider.tsx @@ -1,5 +1,4 @@ import React, { ReactNode, useCallback, useEffect, useState } from "react" -import { useTheme } from "@emotion/react" import styled from "@emotion/styled" import useEmblaCarousel from "embla-carousel-react" @@ -62,23 +61,23 @@ import { ChevronLeftIcon, ChevronRightIcon } from "@chakra-ui/icons" // } // ` -const Button = styled.button` - background-color: ${({ theme, disabled }) => - disabled ? theme.colors.slider.btnBgDisabled : theme.colors.slider.btnBg}; - border: 0; - border-radius: 50%; - width: 35px; - height: 35px; - display: flex; - justify-content: center; - align-items: center; - margin-right: 0.8rem; - cursor: pointer; +// const Button = styled.button` +// background-color: ${({ theme, disabled }) => +// disabled ? theme.colors.slider.btnBgDisabled : theme.colors.slider.btnBg}; +// border: 0; +// border-radius: 50%; +// width: 35px; +// height: 35px; +// display: flex; +// justify-content: center; +// align-items: center; +// margin-right: 0.8rem; +// cursor: pointer; - &:last-child { - margin-right: 0; - } -` +// &:last-child { +// margin-right: 0; +// } +// ` // const Dots = styled.div` // text-align: center; @@ -105,7 +104,6 @@ export interface IProps { } const Slider: React.FC = ({ children, onSlideChange }) => { - const theme = useTheme() const [emblaRef, embla] = useEmblaCarousel() const [prevBtnEnabled, setPrevBtnEnabled] = useState(false) const [nextBtnEnabled, setNextBtnEnabled] = useState(false) @@ -115,7 +113,7 @@ const Slider: React.FC = ({ children, onSlideChange }) => { const scrollPrev = useCallback(() => embla && embla.scrollPrev(), [embla]) const scrollNext = useCallback(() => embla && embla.scrollNext(), [embla]) const scrollTo = useCallback( - (index) => { + (index: number) => { if (embla) { embla.scrollTo(index) } @@ -156,7 +154,7 @@ const Slider: React.FC = ({ children, onSlideChange }) => { borderBottomStyle="solid" borderRadius="0.3rem" w="full" - background="slider.bg" + bg="slider.bg" > {children} @@ -188,7 +186,6 @@ const Slider: React.FC = ({ children, onSlideChange }) => { icon={} variant="unstyled" isRound - mr="0.8rem" _hover={{ boxShadow: "none" }} _focus={{ boxShadow: "none" }} bg="slider.btnBg" From 031325c7f9d46dceb994971d804908abfa9e513f Mon Sep 17 00:00:00 2001 From: Aniruddha Sil Date: Sat, 8 Oct 2022 16:13:01 +0530 Subject: [PATCH 041/151] Updated DotButton to chakra --- src/components/Slider.tsx | 59 ++++++++++++++++++++++++++------------- 1 file changed, 40 insertions(+), 19 deletions(-) diff --git a/src/components/Slider.tsx b/src/components/Slider.tsx index 1052a46c523..f2dd9e2945f 100644 --- a/src/components/Slider.tsx +++ b/src/components/Slider.tsx @@ -3,7 +3,14 @@ import styled from "@emotion/styled" import useEmblaCarousel from "embla-carousel-react" import Icon from "./Icon" -import { Box, Center, Container, Flex, IconButton } from "@chakra-ui/react" +import { + Box, + Button, + Center, + Container, + Flex, + IconButton, +} from "@chakra-ui/react" import { ChevronLeftIcon, ChevronRightIcon } from "@chakra-ui/icons" // const Embla = styled.div` @@ -83,20 +90,20 @@ import { ChevronLeftIcon, ChevronRightIcon } from "@chakra-ui/icons" // text-align: center; // ` -const DotButton = styled.button<{ selected: boolean }>` - width: 5px; - height: 5px; - padding: 0; - border: 0; - border-radius: 50%; - background-color: ${({ theme, selected }) => - selected ? theme.colors.slider.dotActive : theme.colors.slider.dot}; - margin-right: 1rem; - - &:last-child { - margin-right: 0; - } -` +// const DotButton = styled.button<{ selected: boolean }>` +// width: 5px; +// height: 5px; +// padding: 0; +// border: 0; +// border-radius: 50%; +// background-color: ${({ theme, selected }) => +// selected ? theme.colors.slider.dotActive : theme.colors.slider.dot}; +// margin-right: 1rem; + +// &:last-child { +// margin-right: 0; +// } +// ` export interface IProps { children?: React.ReactNode @@ -191,15 +198,29 @@ const Slider: React.FC = ({ children, onSlideChange }) => { bg="slider.btnBg" /> - +
{scrollSnaps.map((_, index) => ( - scrollTo(index)} + sx={{ + marginRight: "1rem", + "&:last-child": { + marginRight: 0, + }, + }} /> ))} - +
) } From e08372f11c9a502221a4af4e2aa7ac8a87332a21 Mon Sep 17 00:00:00 2001 From: Aniruddha Sil Date: Sat, 8 Oct 2022 16:31:39 +0530 Subject: [PATCH 042/151] Minor refactoring --- src/components/Slider.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/components/Slider.tsx b/src/components/Slider.tsx index f2dd9e2945f..6f480ccc6bf 100644 --- a/src/components/Slider.tsx +++ b/src/components/Slider.tsx @@ -158,7 +158,7 @@ const Slider: React.FC = ({ children, onSlideChange }) => { position="relative" p="2rem" borderWidth="1px" - borderBottomStyle="solid" + borderStyle="solid" borderRadius="0.3rem" w="full" bg="slider.bg" From c1d2591b366221cabe3db0d1b989398539670910 Mon Sep 17 00:00:00 2001 From: Aniruddha Sil Date: Sat, 15 Oct 2022 22:39:01 +0530 Subject: [PATCH 043/151] Removed chakra icons --- package.json | 1 - yarn.lock | 19 ------------------- 2 files changed, 20 deletions(-) diff --git a/package.json b/package.json index 85a82e13a80..ffb67304ca2 100644 --- a/package.json +++ b/package.json @@ -10,7 +10,6 @@ "dependencies": { "@apollo/client": "^3.3.13", "@chakra-ui/gatsby-plugin": "^3.0.1", - "@chakra-ui/icons": "^2.0.11", "@chakra-ui/react": "^2.2.8", "@emotion/react": "^11.9.3", "@emotion/styled": "^11.9.3", diff --git a/yarn.lock b/yarn.lock index 0aa26837db7..0b901603978 100644 --- a/yarn.lock +++ b/yarn.lock @@ -2133,13 +2133,6 @@ compute-scroll-into-view "1.0.14" copy-to-clipboard "3.3.1" -"@chakra-ui/icon@3.0.11": - version "3.0.11" - resolved "https://registry.yarnpkg.com/@chakra-ui/icon/-/icon-3.0.11.tgz#a51dda24bed2f2ed77b4136ada8f22d3249c9870" - integrity sha512-RG4jf/XmBdaxOYI5J5QstEtTCPoVlmrQ/XiWhvN0LTgAnmZIqVwFl3Uw+satArdStHAs0GmJZg/E/soFTWuFmw== - dependencies: - "@chakra-ui/shared-utils" "2.0.2" - "@chakra-ui/icon@3.0.9": version "3.0.9" resolved "https://registry.yarnpkg.com/@chakra-ui/icon/-/icon-3.0.9.tgz#ba127d9eefd727f62e9bce07a23eca39ae506744" @@ -2147,13 +2140,6 @@ dependencies: "@chakra-ui/shared-utils" "2.0.1" -"@chakra-ui/icons@^2.0.11": - version "2.0.11" - resolved "https://registry.yarnpkg.com/@chakra-ui/icons/-/icons-2.0.11.tgz#3faf53c499c7c61c65b6e5ff4b0933f48b9ba416" - integrity sha512-WjxrFMt9hHpuZlnBh4fhtGOkIVlwYwHNmwq4sJGxYWlg8UnEhVJMoOojheJDy/d3Gp9+ApetlK3vt8fV/rZamg== - dependencies: - "@chakra-ui/icon" "3.0.11" - "@chakra-ui/image@2.0.10": version "2.0.10" resolved "https://registry.yarnpkg.com/@chakra-ui/image/-/image-2.0.10.tgz#712c0e1c579d959225bd8316d8d8f66cbeb95bb8" @@ -2533,11 +2519,6 @@ resolved "https://registry.yarnpkg.com/@chakra-ui/shared-utils/-/shared-utils-2.0.1.tgz#41e314e42c96039e8ffb265e73145cf755813ab4" integrity sha512-NXDBl/u4wrSNp0ON5R3r3evkRurrAz2yuO7neooaG+O5HEenVouGqm4CsXd6lUAPmjwiGzA0LQFNCt0Hj92dXg== -"@chakra-ui/shared-utils@2.0.2": - version "2.0.2" - resolved "https://registry.yarnpkg.com/@chakra-ui/shared-utils/-/shared-utils-2.0.2.tgz#1df08133194c12ac4df9302604ec37784c2bb026" - integrity sha512-wC58Fh6wCnFFQyiebVZ0NI7PFW9+Vch0QE6qN7iR+bLseOzQY9miYuzPJ1kMYiFd6QTOmPJkI39M3wHqrPYiOg== - "@chakra-ui/skeleton@2.0.14": version "2.0.14" resolved "https://registry.yarnpkg.com/@chakra-ui/skeleton/-/skeleton-2.0.14.tgz#5b5ae979236c0d3f014d0d588fb857fc7b681045" From f3c075e922c085503a3c223e5153fd3e1002fc91 Mon Sep 17 00:00:00 2001 From: Aniruddha Sil Date: Sat, 15 Oct 2022 23:10:52 +0530 Subject: [PATCH 044/151] changed icon to md icons --- src/components/Slider.tsx | 29 ++++++++++------------------- 1 file changed, 10 insertions(+), 19 deletions(-) diff --git a/src/components/Slider.tsx b/src/components/Slider.tsx index 6f480ccc6bf..db51ffb33b6 100644 --- a/src/components/Slider.tsx +++ b/src/components/Slider.tsx @@ -1,17 +1,8 @@ import React, { ReactNode, useCallback, useEffect, useState } from "react" -import styled from "@emotion/styled" import useEmblaCarousel from "embla-carousel-react" -import Icon from "./Icon" -import { - Box, - Button, - Center, - Container, - Flex, - IconButton, -} from "@chakra-ui/react" -import { ChevronLeftIcon, ChevronRightIcon } from "@chakra-ui/icons" +import { Box, Center, Flex, IconButton } from "@chakra-ui/react" +import { MdChevronLeft, MdChevronRight } from "react-icons/md" // const Embla = styled.div` // position: relative; @@ -175,27 +166,27 @@ const Slider: React.FC = ({ children, onSlideChange }) => { ml={{ sm: "2rem", base: 0 }} > } - variant="unstyled" + icon={} isRound mr="0.8rem" _hover={{ boxShadow: "none" }} _focus={{ boxShadow: "none" }} - bg="slider.btnBg" + bg="stakingBlue" + height="40px" /> } - variant="unstyled" + icon={} isRound _hover={{ boxShadow: "none" }} _focus={{ boxShadow: "none" }} - bg="slider.btnBg" + bg="stakingBlue" + height="40px" />
From 74bb185aab8dbeac735a4316926485631408f652 Mon Sep 17 00:00:00 2001 From: Aniruddha Sil Date: Sat, 15 Oct 2022 23:28:37 +0530 Subject: [PATCH 045/151] Fixed Color --- src/components/Slider.tsx | 15 ++++++++------- src/theme.ts | 36 ++++++++++++++++-------------------- 2 files changed, 24 insertions(+), 27 deletions(-) diff --git a/src/components/Slider.tsx b/src/components/Slider.tsx index db51ffb33b6..91466471f2b 100644 --- a/src/components/Slider.tsx +++ b/src/components/Slider.tsx @@ -143,7 +143,6 @@ const Slider: React.FC = ({ children, onSlideChange }) => { }) }, [embla, setScrollSnaps, onSelect]) - // TODO: fix colors return ( = ({ children, onSlideChange }) => { borderStyle="solid" borderRadius="0.3rem" w="full" - bg="slider.bg" + bg="sliderBg" > {children} @@ -168,25 +167,27 @@ const Slider: React.FC = ({ children, onSlideChange }) => { } isRound mr="0.8rem" _hover={{ boxShadow: "none" }} _focus={{ boxShadow: "none" }} - bg="stakingBlue" + bg={prevBtnEnabled ? "sliderBtnBg" : "sliderBtnBgDisabled"} height="40px" + color={prevBtnEnabled ? "sliderBtnColor" : "sliderBtnColorDisabled"} /> } isRound _hover={{ boxShadow: "none" }} _focus={{ boxShadow: "none" }} - bg="stakingBlue" + bg={nextBtnEnabled ? "sliderBtnBg" : "sliderBtnBgDisabled"} height="40px" + color={nextBtnEnabled ? "sliderBtnColor" : "sliderBtnColorDisabled"} />
@@ -194,7 +195,7 @@ const Slider: React.FC = ({ children, onSlideChange }) => { Date: Sun, 16 Oct 2022 00:01:36 +0530 Subject: [PATCH 046/151] fix buttons spacing --- src/components/Slider.tsx | 8 +------- 1 file changed, 1 insertion(+), 7 deletions(-) diff --git a/src/components/Slider.tsx b/src/components/Slider.tsx index 91466471f2b..63c84ecc2e6 100644 --- a/src/components/Slider.tsx +++ b/src/components/Slider.tsx @@ -157,17 +157,12 @@ const Slider: React.FC = ({ children, onSlideChange }) => { {children} } isRound mr="0.8rem" @@ -180,7 +175,6 @@ const Slider: React.FC = ({ children, onSlideChange }) => { } isRound _hover={{ boxShadow: "none" }} From cd5d3758a0a35d2750bf3c5937f16ca1baf2bd17 Mon Sep 17 00:00:00 2001 From: Aniruddha Sil Date: Sun, 16 Oct 2022 00:04:38 +0530 Subject: [PATCH 047/151] clean up --- src/components/Slider.tsx | 92 --------------------------------------- 1 file changed, 92 deletions(-) diff --git a/src/components/Slider.tsx b/src/components/Slider.tsx index 63c84ecc2e6..12e1a1afd54 100644 --- a/src/components/Slider.tsx +++ b/src/components/Slider.tsx @@ -4,98 +4,6 @@ import useEmblaCarousel from "embla-carousel-react" import { Box, Center, Flex, IconButton } from "@chakra-ui/react" import { MdChevronLeft, MdChevronRight } from "react-icons/md" -// const Embla = styled.div` -// position: relative; -// padding: 2rem; -// background-color: ${({ theme }) => theme.colors.slider.bg}; -// border: 1px solid ${({ theme }) => theme.colors.slider.border}; -// border-radius: 0.3rem; -// ` - -// const EmblaViewport = styled.div` -// overflow: hidden; -// width: 100%; - -// .is-draggable { -// cursor: move; -// cursor: grab; -// } - -// .is-dragging { -// cursor: grabbing; -// } -// ` - -// const EmblaContainer = styled.div` -// display: flex; -// ` - -// export const EmblaSlide = styled.div` -// position: relative; -// min-width: 100%; - -// h2, -// h3 { -// margin-top: 0; -// } -// ` - -// const Buttons = styled.div` -// display: flex; -// flex-direction: row; -// justify-content: center; -// margin-bottom: 1rem; -// margin-left: 0; - -// @media (min-width: ${(props) => props.theme.breakpoints.s}) { -// position: absolute; -// bottom: 0; -// left: 0; - -// justify-content: left; - -// margin-bottom: 2rem; -// margin-left: 2rem; -// } -// ` - -// const Button = styled.button` -// background-color: ${({ theme, disabled }) => -// disabled ? theme.colors.slider.btnBgDisabled : theme.colors.slider.btnBg}; -// border: 0; -// border-radius: 50%; -// width: 35px; -// height: 35px; -// display: flex; -// justify-content: center; -// align-items: center; -// margin-right: 0.8rem; -// cursor: pointer; - -// &:last-child { -// margin-right: 0; -// } -// ` - -// const Dots = styled.div` -// text-align: center; -// ` - -// const DotButton = styled.button<{ selected: boolean }>` -// width: 5px; -// height: 5px; -// padding: 0; -// border: 0; -// border-radius: 50%; -// background-color: ${({ theme, selected }) => -// selected ? theme.colors.slider.dotActive : theme.colors.slider.dot}; -// margin-right: 1rem; - -// &:last-child { -// margin-right: 0; -// } -// ` - export interface IProps { children?: React.ReactNode onSlideChange?: (slideIndex: number) => void From 860d1f3e85adca8862b08bc80feaf7ab37b21b9a Mon Sep 17 00:00:00 2001 From: lawlesx Date: Thu, 29 Sep 2022 14:41:24 +0530 Subject: [PATCH 048/151] Migrated Release Banner to Chakra --- package.json | 1 + src/components/ReleaseBanner.tsx | 128 +++++++++++++++---------------- yarn.lock | 14 ++++ 3 files changed, 79 insertions(+), 64 deletions(-) diff --git a/package.json b/package.json index ffb67304ca2..582d379d7e8 100644 --- a/package.json +++ b/package.json @@ -10,6 +10,7 @@ "dependencies": { "@apollo/client": "^3.3.13", "@chakra-ui/gatsby-plugin": "^3.0.1", + "@chakra-ui/icons": "^2.0.10", "@chakra-ui/react": "^2.2.8", "@emotion/react": "^11.9.3", "@emotion/styled": "^11.9.3", diff --git a/src/components/ReleaseBanner.tsx b/src/components/ReleaseBanner.tsx index 9abbc7ece4d..eb39ce142c6 100644 --- a/src/components/ReleaseBanner.tsx +++ b/src/components/ReleaseBanner.tsx @@ -5,8 +5,7 @@ import styled from "@emotion/styled" // Components import BannerNotification from "./BannerNotification" -import Emoji from "./OldEmoji" -import Icon from "./Icon" +import Emoji from "./Emoji" import Link from "./Link" import Translation from "./Translation" @@ -16,38 +15,8 @@ import { TranslationKey } from "../utils/translations" // Constants import { GATSBY_FUNCTIONS_PATH } from "../constants" - -const CloseIconContainer = styled.span` - position: absolute; - cursor: pointer; - top: 1.5rem; - right: 1.5rem; - - & > svg { - fill: ${(props) => props.theme.colors.background}; - - &:hover path { - fill: ${(props) => props.theme.colors.background}; - } - } -` - -const StyledEmoji = styled(Emoji)` - margin-right: 1rem; - flex-shrink: 0; -` - -const StyledBannerNotification = styled(BannerNotification)` - justify-content: center; - align-items: center; - flex-wrap: wrap; - position: relative; - padding-right: 3rem; -` - -const Span = styled.span` - padding-left: 5px; -` +import { Box, Center, IconButton, Wrap } from "@chakra-ui/react" +import { CloseIcon } from "@chakra-ui/icons" interface CountdownRendererProps { days: number @@ -57,6 +26,41 @@ interface CountdownRendererProps { completed: boolean } +interface BannerWrapperProps { + isBannerVisible: boolean + onClose: () => void + children: JSX.Element +} + +const BannerWrapper: React.FC = ({ + onClose, + isBannerVisible, + children, +}) => { + return ( + +
+ + {children} +
+ } + onClick={onClose} + position="absolute" + top={0} + right={0} + /> + + ) +} + export interface IProps { storageKey: string } @@ -106,39 +110,35 @@ const ReleaseBanner: React.FC = ({ storageKey }) => { }: CountdownRendererProps): React.ReactNode => { if (completed) { return ( - - - - - - - - - - - - + + <> + + + + + + + + ) } else { return ( - - - - - - - - {zeroPad(days, 2)}:{zeroPad(hours, 2)}:{zeroPad(minutes, 2)}: - {zeroPad(seconds, 2)}! - - - - - - - + + <> + + + {zeroPad(days, 2)}:{zeroPad(hours, 2)}:{zeroPad(minutes, 2)}: + {zeroPad(seconds, 2)}! + + + + + + + + ) } } diff --git a/yarn.lock b/yarn.lock index 0b901603978..ee04085e3ff 100644 --- a/yarn.lock +++ b/yarn.lock @@ -2133,6 +2133,13 @@ compute-scroll-into-view "1.0.14" copy-to-clipboard "3.3.1" +"@chakra-ui/icon@3.0.10": + version "3.0.10" + resolved "https://registry.yarnpkg.com/@chakra-ui/icon/-/icon-3.0.10.tgz#1a11b5edb42a8af7aa5b6dec2bf2c6c4df1869fc" + integrity sha512-utO569d9bptEraJrEhuImfNzQ8v+a8PsQh8kTsodCzg8B16R3t5TTuoqeJqS6Nq16Vq6w87QbX3/4A73CNK5fw== + dependencies: + "@chakra-ui/shared-utils" "2.0.1" + "@chakra-ui/icon@3.0.9": version "3.0.9" resolved "https://registry.yarnpkg.com/@chakra-ui/icon/-/icon-3.0.9.tgz#ba127d9eefd727f62e9bce07a23eca39ae506744" @@ -2140,6 +2147,13 @@ dependencies: "@chakra-ui/shared-utils" "2.0.1" +"@chakra-ui/icons@^2.0.10": + version "2.0.10" + resolved "https://registry.yarnpkg.com/@chakra-ui/icons/-/icons-2.0.10.tgz#61aeb44c913c10e7ff77addc798494e50d66c760" + integrity sha512-hxMspvysOay2NsJyadM611F/Y4vVzJU/YkXTxsyBjm6v/DbENhpVmPnUf+kwwyl7dINNb9iOF+kuGxnuIEO1Tw== + dependencies: + "@chakra-ui/icon" "3.0.10" + "@chakra-ui/image@2.0.10": version "2.0.10" resolved "https://registry.yarnpkg.com/@chakra-ui/image/-/image-2.0.10.tgz#712c0e1c579d959225bd8316d8d8f66cbeb95bb8" From fb9742dd91889c8fc4687dcef2d4ea86f2be2c3e Mon Sep 17 00:00:00 2001 From: lawlesx Date: Thu, 29 Sep 2022 15:44:22 +0530 Subject: [PATCH 049/151] Updated Button Styles --- src/components/ReleaseBanner.tsx | 8 ++++---- 1 file changed, 4 insertions(+), 4 deletions(-) diff --git a/src/components/ReleaseBanner.tsx b/src/components/ReleaseBanner.tsx index eb39ce142c6..f0bb8be271b 100644 --- a/src/components/ReleaseBanner.tsx +++ b/src/components/ReleaseBanner.tsx @@ -1,7 +1,6 @@ // Libraries import React, { useEffect, useState } from "react" import Countdown, { zeroPad } from "react-countdown" -import styled from "@emotion/styled" // Components import BannerNotification from "./BannerNotification" @@ -39,7 +38,7 @@ const BannerWrapper: React.FC = ({ }) => { return ( -
+
= ({ icon={} onClick={onClose} position="absolute" - top={0} - right={0} + top="1.5" + right="1.5" + size="xs" /> ) From 33dde5c602bd5f5e99f983a43dfe14b5ad7483d9 Mon Sep 17 00:00:00 2001 From: lawlesx Date: Thu, 29 Sep 2022 15:46:47 +0530 Subject: [PATCH 050/151] Removed unused Import --- src/components/ReleaseBanner.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/components/ReleaseBanner.tsx b/src/components/ReleaseBanner.tsx index f0bb8be271b..b11c42974bb 100644 --- a/src/components/ReleaseBanner.tsx +++ b/src/components/ReleaseBanner.tsx @@ -14,7 +14,7 @@ import { TranslationKey } from "../utils/translations" // Constants import { GATSBY_FUNCTIONS_PATH } from "../constants" -import { Box, Center, IconButton, Wrap } from "@chakra-ui/react" +import { Box, Center, IconButton } from "@chakra-ui/react" import { CloseIcon } from "@chakra-ui/icons" interface CountdownRendererProps { From 7e8a6f554a319e14eef96bff3864a2b3a8bfd14e Mon Sep 17 00:00:00 2001 From: Aniruddha Sil Date: Thu, 13 Oct 2022 00:38:00 +0530 Subject: [PATCH 051/151] Review changes --- src/components/ReleaseBanner.tsx | 8 ++++---- 1 file changed, 4 insertions(+), 4 deletions(-) diff --git a/src/components/ReleaseBanner.tsx b/src/components/ReleaseBanner.tsx index b11c42974bb..ba596b61d62 100644 --- a/src/components/ReleaseBanner.tsx +++ b/src/components/ReleaseBanner.tsx @@ -7,6 +7,8 @@ import BannerNotification from "./BannerNotification" import Emoji from "./Emoji" import Link from "./Link" import Translation from "./Translation" +import { Box, Center, IconButton } from "@chakra-ui/react" +import { MdClose } from "react-icons/md" // Utils import { getFreshData } from "../utils/cache" @@ -14,8 +16,6 @@ import { TranslationKey } from "../utils/translations" // Constants import { GATSBY_FUNCTIONS_PATH } from "../constants" -import { Box, Center, IconButton } from "@chakra-ui/react" -import { CloseIcon } from "@chakra-ui/icons" interface CountdownRendererProps { days: number @@ -38,7 +38,7 @@ const BannerWrapper: React.FC = ({ }) => { return ( -
+
= ({
} + icon={} onClick={onClose} position="absolute" top="1.5" From 2699c59cd52acfd19e90971291417037b921d0f5 Mon Sep 17 00:00:00 2001 From: Aniruddha Sil Date: Thu, 13 Oct 2022 00:39:20 +0530 Subject: [PATCH 052/151] removed chakra icons --- package.json | 1 - 1 file changed, 1 deletion(-) diff --git a/package.json b/package.json index 582d379d7e8..ffb67304ca2 100644 --- a/package.json +++ b/package.json @@ -10,7 +10,6 @@ "dependencies": { "@apollo/client": "^3.3.13", "@chakra-ui/gatsby-plugin": "^3.0.1", - "@chakra-ui/icons": "^2.0.10", "@chakra-ui/react": "^2.2.8", "@emotion/react": "^11.9.3", "@emotion/styled": "^11.9.3", From bf3389453a72a1e1810640c87ffa90b7a27b5a24 Mon Sep 17 00:00:00 2001 From: Aniruddha Sil Date: Thu, 13 Oct 2022 00:41:07 +0530 Subject: [PATCH 053/151] Update yarn.lock --- yarn.lock | 14 -------------- 1 file changed, 14 deletions(-) diff --git a/yarn.lock b/yarn.lock index ee04085e3ff..0b901603978 100644 --- a/yarn.lock +++ b/yarn.lock @@ -2133,13 +2133,6 @@ compute-scroll-into-view "1.0.14" copy-to-clipboard "3.3.1" -"@chakra-ui/icon@3.0.10": - version "3.0.10" - resolved "https://registry.yarnpkg.com/@chakra-ui/icon/-/icon-3.0.10.tgz#1a11b5edb42a8af7aa5b6dec2bf2c6c4df1869fc" - integrity sha512-utO569d9bptEraJrEhuImfNzQ8v+a8PsQh8kTsodCzg8B16R3t5TTuoqeJqS6Nq16Vq6w87QbX3/4A73CNK5fw== - dependencies: - "@chakra-ui/shared-utils" "2.0.1" - "@chakra-ui/icon@3.0.9": version "3.0.9" resolved "https://registry.yarnpkg.com/@chakra-ui/icon/-/icon-3.0.9.tgz#ba127d9eefd727f62e9bce07a23eca39ae506744" @@ -2147,13 +2140,6 @@ dependencies: "@chakra-ui/shared-utils" "2.0.1" -"@chakra-ui/icons@^2.0.10": - version "2.0.10" - resolved "https://registry.yarnpkg.com/@chakra-ui/icons/-/icons-2.0.10.tgz#61aeb44c913c10e7ff77addc798494e50d66c760" - integrity sha512-hxMspvysOay2NsJyadM611F/Y4vVzJU/YkXTxsyBjm6v/DbENhpVmPnUf+kwwyl7dINNb9iOF+kuGxnuIEO1Tw== - dependencies: - "@chakra-ui/icon" "3.0.10" - "@chakra-ui/image@2.0.10": version "2.0.10" resolved "https://registry.yarnpkg.com/@chakra-ui/image/-/image-2.0.10.tgz#712c0e1c579d959225bd8316d8d8f66cbeb95bb8" From 8ecf468fd794ec745523442d79bd90154396c176 Mon Sep 17 00:00:00 2001 From: Aniruddha Sil Date: Sun, 16 Oct 2022 00:34:05 +0530 Subject: [PATCH 054/151] Fix Icon size and hover --- src/components/ReleaseBanner.tsx | 3 ++- 1 file changed, 2 insertions(+), 1 deletion(-) diff --git a/src/components/ReleaseBanner.tsx b/src/components/ReleaseBanner.tsx index ba596b61d62..961aa9f1388 100644 --- a/src/components/ReleaseBanner.tsx +++ b/src/components/ReleaseBanner.tsx @@ -50,12 +50,13 @@ const BannerWrapper: React.FC = ({
} + icon={} onClick={onClose} position="absolute" top="1.5" right="1.5" size="xs" + _hover={{ background: "background", color: "primary" }} /> ) From e07a03076cd33f915256ae04b4b8537257776761 Mon Sep 17 00:00:00 2001 From: Amit Kumar Sharma <91947037+amit-2k1@users.noreply.github.com> Date: Tue, 18 Oct 2022 13:43:11 +0530 Subject: [PATCH 055/151] refactor: transitionBanner to chakra --- src/components/Emoji.tsx | 2 + src/components/TranslationBanner.tsx | 212 +++++++++++---------------- 2 files changed, 86 insertions(+), 128 deletions(-) diff --git a/src/components/Emoji.tsx b/src/components/Emoji.tsx index 8a90897e88f..c794e21df83 100644 --- a/src/components/Emoji.tsx +++ b/src/components/Emoji.tsx @@ -10,6 +10,8 @@ export interface IProps extends HTMLChakraProps<"span">, Props {} const StyledEmoji = styled(Twemoji)` & > img { margin: 0 !important; + width: 1.5em !important; + height: 1.5em !important; } ` diff --git a/src/components/TranslationBanner.tsx b/src/components/TranslationBanner.tsx index 5789c41624b..8b10b83a4ed 100644 --- a/src/components/TranslationBanner.tsx +++ b/src/components/TranslationBanner.tsx @@ -1,109 +1,11 @@ import React, { useEffect, useState } from "react" -import styled from "@emotion/styled" +import { Box, Flex, Heading, Icon } from "@chakra-ui/react" import ButtonLink from "./ButtonLink" -import Icon from "./Icon" -import Emoji from "./OldEmoji" import Translation from "./Translation" - -const H3 = styled.h3` - font-weight: 700; - line-height: 100%; - margin-top: 0; - margin-bottom: 0; -` - -const BannerContainer = styled.div<{ - isOpen: boolean -}>` - display: ${(props) => (props.isOpen ? `block` : `none`)}; - bottom: 2rem; - right: 2rem; - position: fixed; - z-index: 99; - @media (max-width: ${(props) => props.theme.breakpoints.m}) { - bottom: 0rem; - right: 0rem; - } -` - -const StyledBanner = styled.div` - padding: 1rem; - max-height: 100%; - max-width: 600px; - background: ${(props) => props.theme.colors.infoBanner}; - color: ${(props) => props.theme.colors.black300}; - display: flex; - justify-content: space-between; - box-shadow: rgba(0, 0, 0, 0.16) 0px 2px 4px 0px; - border-radius: 2px; - @media (max-width: ${(props) => props.theme.breakpoints.m}) { - max-width: 100%; - box-shadow: 0px -4px 10px 0px ${(props) => props.theme.colors.text} 10%; - } -` - -const BannerContent = styled.div<{ - isPageRightToLeft: boolean -}>` - display: flex; - flex-direction: column; - align-items: ${(props) => - props.isPageRightToLeft ? `flex-end` : `flex-start`}; - margin: 1rem; - @media (max-width: ${(props) => props.theme.breakpoints.s}) { - margin-top: 2.5rem; - } -` - -const BannerClose = styled.div<{ - isPageRightToLeft: boolean -}>` - position: absolute; - top: 0; - right: ${(props) => (props.isPageRightToLeft ? `auto` : 0)}; - margin: 1rem; -` -const BannerCloseIcon = styled(Icon)` - cursor: pointer; -` - -const Row = styled.div` - display: flex; - align-items: center; - margin-bottom: 1rem; - @media (max-width: ${(props) => props.theme.breakpoints.s}) { - flex-direction: column-reverse; - align-items: flex-start; - } -` - -const ButtonRow = styled.div` - display: flex; - align-items: center; - @media (max-width: ${(props) => props.theme.breakpoints.s}) { - flex-direction: column; - align-items: flex-start; - } -` - -const StyledEmoji = styled(Emoji)` - padding-top: 0.5rem; - @media (max-width: ${(props) => props.theme.breakpoints.s}) { - margin-bottom: 1rem; - } -` - -const SecondaryButtonLink = styled(ButtonLink)` - margin-left: 0.5rem; - @media (max-width: ${(props) => props.theme.breakpoints.s}) { - margin-left: 0rem; - margin-top: 0.5rem; - } - color: #333333; - border: 1px solid #333333; - background-color: transparent; -` +import theme from "../@chakra-ui/gatsby-plugin/theme" +import { MdClose } from "react-icons/md" +import Emoji from "./Emoji" export interface IProps { shouldShow: boolean @@ -133,49 +35,103 @@ const TranslationBanner: React.FC = ({ : "translation-banner-body-update" return ( - - - - -

+ + + + + -

- + - +

- -
+ + -
+ {!isPageContentEnglish && ( -
- + - -
+ + )} - - - + + setIsOpen(false)} - isPageRightToLeft={isPageRightToLeft} > - - - - + + + + ) } From 3a4c368e6ba9bf7313b072535c16e00b3d9f1d22 Mon Sep 17 00:00:00 2001 From: Pablo Pettinari Date: Tue, 18 Oct 2022 19:58:54 -0300 Subject: [PATCH 056/151] Apply suggestions from code review --- src/components/RollupProductDevDoc.tsx | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) diff --git a/src/components/RollupProductDevDoc.tsx b/src/components/RollupProductDevDoc.tsx index 3f312ee4f36..47b053d87f6 100644 --- a/src/components/RollupProductDevDoc.tsx +++ b/src/components/RollupProductDevDoc.tsx @@ -51,15 +51,15 @@ const RollupProductDevDoc: React.FC = ({ rollupType }) => { {rollups[rollupType].map( ({ name, noteKey, website, developerDocs, l2beat }) => { return ( - - + + {name} From 1ca0ff5b58cfe893f6e1bbff8add17d759cbcf3d Mon Sep 17 00:00:00 2001 From: Paul Wackerow <54227730+wackerow@users.noreply.github.com> Date: Tue, 18 Oct 2022 18:20:01 -0500 Subject: [PATCH 057/151] Update QuizQuestion styling --- src/components/Quiz/QuizQuestion.tsx | 29 +++++++++++++++++++++++----- 1 file changed, 24 insertions(+), 5 deletions(-) diff --git a/src/components/Quiz/QuizQuestion.tsx b/src/components/Quiz/QuizQuestion.tsx index 252bac9a962..a69827a5ef0 100644 --- a/src/components/Quiz/QuizQuestion.tsx +++ b/src/components/Quiz/QuizQuestion.tsx @@ -22,12 +22,22 @@ const QuizQuestion: React.FC = ({ selectedAnswer, }) => { const { colorMode } = useColorMode() - const { answers, prompt } = questionData + const isDarkMode = colorMode === "dark" + const { answers, prompt, correctAnswerId } = questionData + + // Memoized values const explanation = useMemo(() => { if (!selectedAnswer) return "" return answers.filter(({ id }) => id === selectedAnswer)[0].explanation }, [selectedAnswer]) - + const buttonBg = useMemo(() => { + if (!showAnswer) return "primary" + return correctAnswerId === selectedAnswer ? "green.500" : "red.500" + }, [questionData, selectedAnswer, showAnswer]) + const letterColor = useMemo(() => { + if (!showAnswer) return "white" + return correctAnswerId === selectedAnswer ? "green.500" : "red.500" + }, [questionData, selectedAnswer, showAnswer]) return ( @@ -41,6 +51,7 @@ const QuizQuestion: React.FC = ({ !showAnswer || id === selectedAnswer ? "inline-flex" : "none" return ( + )} + {showResults ? ( + + + + + ) : showAnswer ? ( + + ) : ( )} - {showResults ? ( - - - - - ) : showAnswer ? ( - - ) : ( - - )} - -
- - - ) + +
+ + ) : ( + + + + )} + + ) } From d1c384dd766c55ec5e0239c93a561055574b4556 Mon Sep 17 00:00:00 2001 From: Paul Wackerow <54227730+wackerow@users.noreply.github.com> Date: Thu, 20 Oct 2022 18:35:07 -0500 Subject: [PATCH 061/151] Create QuizRadioGroup.tsx --- src/components/Quiz/QuizRadioGroup.tsx | 164 +++++++++++++++++++++++++ 1 file changed, 164 insertions(+) create mode 100644 src/components/Quiz/QuizRadioGroup.tsx diff --git a/src/components/Quiz/QuizRadioGroup.tsx b/src/components/Quiz/QuizRadioGroup.tsx new file mode 100644 index 00000000000..85a24dc07d2 --- /dev/null +++ b/src/components/Quiz/QuizRadioGroup.tsx @@ -0,0 +1,164 @@ +// Import libraries +import React, { useMemo } from "react" +import { + Box, + chakra, + Circle, + Flex, + RadioProps, + Text, + useColorMode, + useRadio, + useRadioGroup, +} from "@chakra-ui/react" + +// Import types +import { Question } from "../../types" + +export interface IProps { + questionData: Question + showAnswer: boolean + handleSelection: (answerId: string) => void + selectedAnswer: string | null +} +const QuizRadioGroup: React.FC = ({ + questionData, + showAnswer, + handleSelection, + selectedAnswer, +}) => { + const { prompt, answers, correctAnswerId } = questionData + const { colorMode } = useColorMode() + const isDarkMode = colorMode === "dark" + + // Custom radio button component + interface CustomRadioProps extends RadioProps { + index: number + label: string + } + const CustomRadio: React.FC = ({ + index, + label, + ...radioProps + }) => { + const { state, getInputProps, getCheckboxProps, htmlProps } = + useRadio(radioProps) + const iconBackgroundDark = state.isActive ? "orange.800" : "gray.500" + const iconBackgroundLight = state.isActive ? "blue.300" : "gray.400" + + // Memoized values + const buttonBg = useMemo(() => { + if (!showAnswer) return "primary" + return correctAnswerId === selectedAnswer ? "green.500" : "red.500" + }, [questionData, selectedAnswer, showAnswer]) + const circleBg = useMemo( + () => + showAnswer + ? "white" + : isDarkMode + ? iconBackgroundDark + : iconBackgroundLight, + [showAnswer, isDarkMode] + ) + + // Render CustomRadio + return ( + + + + + + {String.fromCharCode(97 + index).toUpperCase()} + + + {label} + + + ) + } + + const handleChange = (value: string): void => { + handleSelection(value) + } + + const { getRadioProps, getRootProps } = useRadioGroup({ + onChange: handleChange, + }) + + // Memoized values + const explanation = useMemo(() => { + if (!selectedAnswer) return "" + return answers.filter(({ id }) => id === selectedAnswer)[0].explanation + }, [selectedAnswer]) + const letterColor = useMemo(() => { + if (!showAnswer) return "white" + return correctAnswerId === selectedAnswer ? "green.500" : "red.500" + }, [questionData, selectedAnswer, showAnswer]) + + // Render QuizRadioGroup + return ( + + + {prompt} + + + {answers.map(({ id, label }, index) => { + const display = + !showAnswer || id === selectedAnswer ? "inline-flex" : "none" + return ( + + ) + })} + + {showAnswer && ( + + + Explanation + + {explanation} + + )} + + ) +} + +export default QuizRadioGroup From fb9c5bc956e73b879acc5fd5769fd3e1d421ebe1 Mon Sep 17 00:00:00 2001 From: Paul Wackerow <54227730+wackerow@users.noreply.github.com> Date: Thu, 20 Oct 2022 18:39:51 -0500 Subject: [PATCH 062/151] update QuizWidget with QuizRadioGroup --- src/components/Quiz/QuizWidget.tsx | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/src/components/Quiz/QuizWidget.tsx b/src/components/Quiz/QuizWidget.tsx index 95226ac6389..9085d7defd4 100644 --- a/src/components/Quiz/QuizWidget.tsx +++ b/src/components/Quiz/QuizWidget.tsx @@ -18,7 +18,7 @@ import { FaTwitter } from "react-icons/fa" // Components import Button from "../Button" -import QuizQuestion from "./QuizQuestion" +import QuizRadioGroup from "./QuizRadioGroup" import QuizSummary from "./QuizSummary" import Translation from "../Translation" @@ -263,7 +263,7 @@ const QuizWidget: React.FC = ({ quizKey, maxQuestions }) => { questionCount={quizData.questions.length} /> ) : ( - Date: Thu, 20 Oct 2022 18:40:46 -0500 Subject: [PATCH 063/151] update QuizWidget with share tweet functionality small styling adjustments, added void return types for handlers --- src/components/Quiz/QuizWidget.tsx | 29 +++++++++++++++++++++-------- 1 file changed, 21 insertions(+), 8 deletions(-) diff --git a/src/components/Quiz/QuizWidget.tsx b/src/components/Quiz/QuizWidget.tsx index 9085d7defd4..3242ad91a22 100644 --- a/src/components/Quiz/QuizWidget.tsx +++ b/src/components/Quiz/QuizWidget.tsx @@ -115,37 +115,47 @@ const QuizWidget: React.FC = ({ quizKey, maxQuestions }) => { ) // Handlers - const handleSelectAnswerChoice = (answerId: string) => { + const handleSelectAnswerChoice = (answerId: string): void => { const isCorrect = answerId === quizData?.questions[currentQuestionIndex].correctAnswerId setCurrentQuestionAnswerChoice({ answerId, isCorrect }) } // TODO: Confirm both handleSelectAnswerChoice & handleSelection are necessary - const handleSelection = (answerId: string) => { + const handleSelection = (answerId: string): void => { setSelectedAnswer(answerId) handleSelectAnswerChoice(answerId) } - const handleShowAnswer = () => { + const handleShowAnswer = (): void => { setShowAnswer(true) } - const handleRetryQuestion = () => { + const handleRetryQuestion = (): void => { setCurrentQuestionAnswerChoice(null) setSelectedAnswer(null) setShowAnswer(false) } - const handleContinue = () => { + const handleContinue = (): void => { if (!currentQuestionAnswerChoice) return setUserQuizProgress((prev) => [...prev, currentQuestionAnswerChoice]) setCurrentQuestionAnswerChoice(null) setShowAnswer(false) } + const shareTweetHandler = (): void => { + if (!quizData || !window) return + const url = `https://ethereum.org${window.location.pathname}` // TODO: Add hash link to quiz + const tweet = `I just took the "${quizData.title}" quiz on ethereum.org and scored ${correctCount} out of ${quizData.questions.length}! Try it yourself at ${url}` + window.open( + `https://twitter.com/intent/tweet?text=${encodeURI( + tweet + )}&hashtags=${"ethereumknowledge"}` + ) + } return ( - + = ({ quizKey, maxQuestions }) => { /> )}
-
+
{showAnswer && currentQuestionAnswerChoice && @@ -285,7 +295,10 @@ const QuizWidget: React.FC = ({ quizKey, maxQuestions }) => { )} {showResults ? ( - From 840d399b944a0ac5367597ec896638a9ce1d74ad Mon Sep 17 00:00:00 2001 From: Paul Wackerow <54227730+wackerow@users.noreply.github.com> Date: Thu, 20 Oct 2022 18:41:22 -0500 Subject: [PATCH 064/151] internationalize percentages --- src/components/Quiz/QuizSummary.tsx | 30 +++++++++++++++++++++++++---- 1 file changed, 26 insertions(+), 4 deletions(-) diff --git a/src/components/Quiz/QuizSummary.tsx b/src/components/Quiz/QuizSummary.tsx index d82b04ee8e6..f71c8b2b330 100644 --- a/src/components/Quiz/QuizSummary.tsx +++ b/src/components/Quiz/QuizSummary.tsx @@ -1,6 +1,7 @@ // Libraries import React, { useMemo } from "react" import { Box, Flex, Text } from "@chakra-ui/react" +import { useIntl } from "react-intl" export interface IProps { correctCount: number @@ -8,10 +9,17 @@ export interface IProps { } const QuizSummary: React.FC = ({ correctCount, questionCount }) => { + const { locale } = useIntl() const percentCorrect = useMemo( - () => Math.floor((correctCount / questionCount) * 100), + () => correctCount / questionCount, [correctCount, questionCount] ) + const options = { + style: "percent", + maximumFractionDigits: 0, + } + const numberToPercent = (num: number): string => + new Intl.NumberFormat(locale, options).format(num) return ( @@ -34,18 +42,32 @@ const QuizSummary: React.FC = ({ correctCount, questionCount }) => { borderColor="disabled" > - {percentCorrect}% + {numberToPercent(percentCorrect)} Score - + +{correctCount} - Total points + Correct + + + + + {questionCount} + + + Total From 0dd51c26007b121d9c3212b3d0e1f37bbf4a9ac8 Mon Sep 17 00:00:00 2001 From: Paul Wackerow <54227730+wackerow@users.noreply.github.com> Date: Thu, 20 Oct 2022 18:42:09 -0500 Subject: [PATCH 065/151] deprecate QuizQuestion component --- src/components/Quiz/QuizQuestion.tsx | 104 --------------------------- 1 file changed, 104 deletions(-) delete mode 100644 src/components/Quiz/QuizQuestion.tsx diff --git a/src/components/Quiz/QuizQuestion.tsx b/src/components/Quiz/QuizQuestion.tsx deleted file mode 100644 index a69827a5ef0..00000000000 --- a/src/components/Quiz/QuizQuestion.tsx +++ /dev/null @@ -1,104 +0,0 @@ -// Libraries -import React, { useMemo } from "react" -import { Box, Circle, Text, useColorMode } from "@chakra-ui/react" - -// Components -import Button from "../Button" - -// Types -import { Question } from "../../types" - -export interface IProps { - questionData: Question - showAnswer: boolean - handleSelection: (answerId: string) => void - selectedAnswer: string | null -} - -const QuizQuestion: React.FC = ({ - questionData, - showAnswer, - handleSelection, - selectedAnswer, -}) => { - const { colorMode } = useColorMode() - const isDarkMode = colorMode === "dark" - const { answers, prompt, correctAnswerId } = questionData - - // Memoized values - const explanation = useMemo(() => { - if (!selectedAnswer) return "" - return answers.filter(({ id }) => id === selectedAnswer)[0].explanation - }, [selectedAnswer]) - const buttonBg = useMemo(() => { - if (!showAnswer) return "primary" - return correctAnswerId === selectedAnswer ? "green.500" : "red.500" - }, [questionData, selectedAnswer, showAnswer]) - const letterColor = useMemo(() => { - if (!showAnswer) return "white" - return correctAnswerId === selectedAnswer ? "green.500" : "red.500" - }, [questionData, selectedAnswer, showAnswer]) - return ( - - - {prompt} - - {answers.map(({ id, label }, index) => { - const active = selectedAnswer === id - const iconBackgroundDark = active ? "orange.800" : "gray.500" - const iconBackgroundLight = active ? "blue.300" : "gray.400" - const display = - !showAnswer || id === selectedAnswer ? "inline-flex" : "none" - return ( - - ) - })} - {showAnswer && ( - <> - - Explanation - - {explanation} - - )} - - ) -} - -export default QuizQuestion From 4c944e7c243e105a63413a542f1b06a6d3d28a3b Mon Sep 17 00:00:00 2001 From: Amit Kumar Sharma <91947037+amit-2k1@users.noreply.github.com> Date: Fri, 21 Oct 2022 08:19:12 +0530 Subject: [PATCH 066/151] refractoring translation banner and emoji component --- src/components/Emoji.tsx | 18 +++++++-------- src/components/TranslationBanner.tsx | 33 ++++++++++------------------ 2 files changed, 20 insertions(+), 31 deletions(-) diff --git a/src/components/Emoji.tsx b/src/components/Emoji.tsx index c794e21df83..455434da697 100644 --- a/src/components/Emoji.tsx +++ b/src/components/Emoji.tsx @@ -1,5 +1,4 @@ import React from "react" -import styled from "@emotion/styled" import { Box, HTMLChakraProps } from "@chakra-ui/react" import { Twemoji, Props } from "react-emoji-render" @@ -7,18 +6,10 @@ import { IS_DEV } from "../utils/env" export interface IProps extends HTMLChakraProps<"span">, Props {} -const StyledEmoji = styled(Twemoji)` - & > img { - margin: 0 !important; - width: 1.5em !important; - height: 1.5em !important; - } -` - const Emoji = (props: IProps) => { return ( { options={{ protocol: IS_DEV ? "http" : "https" }} svg display="inline-block" + sx={{ + "& > img": { + margin: "0 !important", + width: "1.5em !important", + height: "1.5em !important", + }, + }} {...props} /> ) diff --git a/src/components/TranslationBanner.tsx b/src/components/TranslationBanner.tsx index 8b10b83a4ed..a037d744f2f 100644 --- a/src/components/TranslationBanner.tsx +++ b/src/components/TranslationBanner.tsx @@ -1,10 +1,8 @@ import React, { useEffect, useState } from "react" -import { Box, Flex, Heading, Icon } from "@chakra-ui/react" +import { Box, CloseButton, Flex, Heading, useToken } from "@chakra-ui/react" import ButtonLink from "./ButtonLink" import Translation from "./Translation" -import theme from "../@chakra-ui/gatsby-plugin/theme" -import { MdClose } from "react-icons/md" import Emoji from "./Emoji" export interface IProps { @@ -21,6 +19,7 @@ const TranslationBanner: React.FC = ({ isPageContentEnglish, }) => { const [isOpen, setIsOpen] = useState(shouldShow) + const [textColor] = useToken("colors", ["text"]) useEffect(() => { setIsOpen(shouldShow) @@ -50,7 +49,7 @@ const TranslationBanner: React.FC = ({ color="black300" justify="space-between" boxShadow={{ - base: `0px -4px 10px 0px #333333 10%`, + base: `0px -4px 10px 0px ${textColor} 10%`, md: "rgba(0, 0, 0, 0.16) 0px 2px 4px 0px", }} borderRadius="2px" @@ -59,7 +58,7 @@ const TranslationBanner: React.FC = ({ flexDirection="column" alignItems={isPageRightToLeft ? "flex-end" : "flex-start"} m="1rem" - mt={{ sm: "2.5rem" }} + mt={{ base: "2.5rem", sm: 0 }} > = ({ > = ({ text=":globe_showing_asia_australia:" pt="0.5rem" ml="0.5rem" - my="auto" mb={{ base: "1rem", sm: "auto" }} /> @@ -112,24 +110,17 @@ const TranslationBanner: React.FC = ({ )} - setIsOpen(false)} - > - - + /> ) From 67f0767145df1542a57ae1b90ce4673e1bb85e18 Mon Sep 17 00:00:00 2001 From: Pablo Pettinari Date: Fri, 21 Oct 2022 16:44:15 -0300 Subject: [PATCH 067/151] change iconbutton with CloseButton --- src/components/ReleaseBanner.tsx | 30 +++++++++--------------------- 1 file changed, 9 insertions(+), 21 deletions(-) diff --git a/src/components/ReleaseBanner.tsx b/src/components/ReleaseBanner.tsx index 961aa9f1388..dbd98d70856 100644 --- a/src/components/ReleaseBanner.tsx +++ b/src/components/ReleaseBanner.tsx @@ -1,14 +1,13 @@ // Libraries import React, { useEffect, useState } from "react" import Countdown, { zeroPad } from "react-countdown" +import { Box, Center, CloseButton } from "@chakra-ui/react" // Components import BannerNotification from "./BannerNotification" import Emoji from "./Emoji" import Link from "./Link" import Translation from "./Translation" -import { Box, Center, IconButton } from "@chakra-ui/react" -import { MdClose } from "react-icons/md" // Utils import { getFreshData } from "../utils/cache" @@ -37,27 +36,16 @@ const BannerWrapper: React.FC = ({ children, }) => { return ( - -
- + +
+ {children}
- } - onClick={onClose} - position="absolute" - top="1.5" - right="1.5" - size="xs" - _hover={{ background: "background", color: "primary" }} - /> + ) } From 3a52f3e2df7c3f0158eb95e5cca03a06c5dca8b9 Mon Sep 17 00:00:00 2001 From: Aniruddha Sil Date: Sat, 22 Oct 2022 17:00:52 +0530 Subject: [PATCH 068/151] update Slider.tsx used chakra numeric spacing --- src/components/Slider.tsx | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) diff --git a/src/components/Slider.tsx b/src/components/Slider.tsx index 12e1a1afd54..f392ae693df 100644 --- a/src/components/Slider.tsx +++ b/src/components/Slider.tsx @@ -54,10 +54,10 @@ const Slider: React.FC = ({ children, onSlideChange }) => { return ( @@ -66,7 +66,7 @@ const Slider: React.FC = ({ children, onSlideChange }) => { Date: Sat, 22 Oct 2022 18:29:48 +0530 Subject: [PATCH 069/151] Fix: (Slider.tsx) Dots alignment to center --- src/components/Slider.tsx | 6 +++++- 1 file changed, 5 insertions(+), 1 deletion(-) diff --git a/src/components/Slider.tsx b/src/components/Slider.tsx index f392ae693df..df4c2b01beb 100644 --- a/src/components/Slider.tsx +++ b/src/components/Slider.tsx @@ -92,7 +92,11 @@ const Slider: React.FC = ({ children, onSlideChange }) => { color={nextBtnEnabled ? "sliderBtnColor" : "sliderBtnColorDisabled"} /> -
+
{scrollSnaps.map((_, index) => ( Date: Sat, 22 Oct 2022 11:21:05 -0500 Subject: [PATCH 070/151] update merge/issuance page for post-merge --- src/content/upgrades/merge/issuance/index.md | 77 +++++++++++--------- 1 file changed, 41 insertions(+), 36 deletions(-) diff --git a/src/content/upgrades/merge/issuance/index.md b/src/content/upgrades/merge/issuance/index.md index 1ac97710ef8..aad9cc20afd 100644 --- a/src/content/upgrades/merge/issuance/index.md +++ b/src/content/upgrades/merge/issuance/index.md @@ -1,10 +1,14 @@ --- -title: How The Merge impacts ETH supply -description: Breakdown on how The Merge will impact ETH supply +title: How The Merge impacted ETH supply +description: Breakdown on how The Merge impacted ETH supply lang: en --- -# How The Merge impacts ETH supply {#how-the-merge-impacts-ETH-supply} +# How The Merge impacted ETH supply {#how-the-merge-impacts-ETH-supply} + +The Merge represented the Ethereum networks transition from proof-of-work to proof-of-stake which occurred in September 2022. The way ETH is issued underwent changes at time of that transition. Previously, new ETH was issued from two sources: the execution layer (i.e. Mainnet) and the consensus layer (i.e. Beacon Chain). Since The Merge, issuance on the execution layer is now zero. Let's break this down. + +## Components of ETH issuance {#components-of-eth-issuance} We can break the supply of ETH into two primary forces: issuance, and burn. @@ -14,88 +18,89 @@ The **issuance** of ETH is the process of creating ETH that did not previously e emoji=":chart_decreasing:" title="ETH issuance tldr"> -- Mining rewards ~13,000 ETH/day pre-merge -- Staking rewards ~1,600 ETH/day pre-merge -- **After The Merge, only the ~1,600 ETH per day will remain, dropping total new ETH issuance by ~90%** -- The burn: At an average gas price of at least 16 gwei, at least 1,600 ETH is burned every day, which effectively brings net ETH inflation to zero or less post-merge. +- Before transitioning to proof-of-stake, miners were issued approximately 13,000 ETH/day +- Stakers are issued approximately 1,700 ETH/day, based on about 14 million total ETH staked +- The exact staking issuance fluctuates based on the total amount of ETH staked +- **Since The Merge, only the ~1,700 ETH/day remains, dropping total new ETH issuance by ~88%** +- The burn: This fluctuate according to network demand. _If_ an average gas price of at least 17 gwei is observed for a given day, this effectively offsets the ~1,700 ETH that is issued to validators and brings net ETH inflation to zero or less for that day. -How ETH gets issued will change at the time of The Merge. Currently, new ETH is issued from two sources: the execution layer (i.e. Mainnet) and the consensus layer (i.e. Beacon Chain). After The Merge, issuance from the execution layer will go to zero. Let's break this down. + -[More on The Merge](/upgrades/merge/) - -## Pre-merge {#pre-merge} +## Pre-merge (historical) {#pre-merge} ### Execution layer issuance {#el-issuance-pre-merge} -Under proof-of-work, miners only interact with the execution layer and are rewarded with block rewards if they are the first miner to solve the next block. Since the [Constantinople upgrade](/history/#constantinople) in 2019 this reward has been 2 ETH per block. Miners are also rewarded for publishing [ommer](/glossary/#ommer) blocks, which are valid blocks that don't end up in the longest/canonical chain. These rewards max out at 1.75 ETH per ommer, and are _in addition to_ the reward issued from the canonical block. Mining is an economically intensive activity, requiring high levels of ETH issuance to sustain. +Under proof-of-work, miners only interacted with the execution layer and were rewarded with block rewards if they were the first miner to solve the next block. Since the [Constantinople upgrade](/history/#constantinople) in 2019 this reward had been 2 ETH per block. Miners were also rewarded for publishing [ommer](/glossary/#ommer) blocks, which were valid blocks that don't end up in the longest/canonical chain. These rewards maxed out at 1.75 ETH per ommer, and were _in addition to_ the reward issued from the canonical block. The process of mining is an economically intensive activity, which historically required high levels of ETH issuance to sustain. ### Consensus layer issuance {#cl-issuance-pre-merge} -The [Beacon Chain](/history/#beacon-chain-genesis) went live in 2020. Instead of miners, it is secured by validators using proof-of-stake. This chain was bootstrapped by Ethereum users depositing ETH one-way into a smart contract on Mainnet, which the Beacon Chain listens to, crediting the user with an equal amount on the new chain. Until The Merge happens, the Beacon Chain's validators are not processing transactions and are essentially coming to consensus on the state of the validator pool itself. +The [Beacon Chain](/history/#beacon-chain-genesis) went live in 2020. Instead of miners, it is secured by validators using proof-of-stake. This chain was bootstrapped by Ethereum users depositing ETH one-way into a smart contract on Mainnet (the execution layer), which the Beacon Chain listens to, crediting the user with an equal amount of ETH on the new chain. Until The Merge happened, the Beacon Chain's validators were not processing transactions and were essentially coming to consensus on the state of the validator pool itself. -Validators on the Beacon Chain are rewarded with ETH for attesting to the state of the chain and proposing blocks. Rewards (or penalties) are calculated and distributed at each epoch (every 6.4 minutes) based on validator performance. The validator rewards are **significantly** less than the miner rewards issued on proof-of-work (2 ETH every ~13.5 seconds), as operating a validating node is not an economically intense activity and thus does not require or warrant as high a reward. +Validators on the Beacon Chain are rewarded with ETH for attesting to the state of the chain and proposing blocks. Rewards (or penalties) are calculated and distributed at each epoch (every 6.4 minutes) based on validator performance. Validator rewards are **significantly** less than the mining rewards that were previously issued under proof-of-work (2 ETH every ~13.5 seconds), as operating a validating node is not an economically intense activity and thus does not require or warrant as high a reward. ### Pre-merge issuance breakdown {#pre-merge-issuance-breakdown} -Total ETH supply: **~119,300,000 ETH** (as of Q2 2022) + + +Total ETH supply: **~120,520,000 ETH** (at time of The Merge in September 2022) **Execution layer issuance:** -- Estimating at 2.08 ETH per 13.3 seconds\*: **~4,930,000** ETH issued in a year -- Currently inflating at **~4.13%** (4.93M per year / 119.3M total) +- Was estimated at 2.08 ETH per 13.3 seconds\*: **~4,930,000** ETH issued in a year +- Resulted in an inflation rate of **approximately 4.09%** (4.93M per year / 120.5M total) - \*This includes the 2 ETH per canonical block, plus an average of 0.08 ETH over time from ommer blocks. Also uses 13.3 seconds, the baseline block time target without any influence from a [difficulty bomb](/glossary/#difficulty-bomb). ([See source](https://bitinfocharts.com/ethereum/)) **Consensus layer issuance:** -- Using 13,000,000 total ETH staked, the rate of ETH issuance is ~1600 ETH/day ([See source](https://ultrasound.money/)) -- Results in **~584,000** ETH issued in a year -- Currently inflating at **~0.49%** (584K per year / 119.3M total) +- Using 14,000,000 total ETH staked, the rate of ETH issuance is approximately 1700 ETH/day ([See source](https://ultrasound.money/)) +- Results in **~620,500** ETH issued in a year +- Resulted in inflation rate of **approximately 0.52%** (620.5K per year / 119.3M total) -Total annual issuance rate: ~4.62% (4.13% + 0.49%)

-~89.4% of the issuance is going to miners on the execution layer (4.13 / 4.62 * 100)

-~10.6% is being issued to stakers on the consensus layer (0.49 / 4.62 * 100) +Total annualized issuance rate (pre-merge): ~4.61% (4.09% + 0.52%)

+~88.7% of the issuance was going to miners on the execution layer (4.09 / 4.61 * 100)

+~11.3% was being issued to stakers on the consensus layer (0.52 / 4.61 * 100) -## Post-merge {#post-merge} +## Post-merge (present day) {#post-merge} ### Execution layer issuance {#el-issuance-post-merge} -Execution layer issuance after The Merge will be zero. Proof-of-work will no longer be valid under the rules of consensus. All execution layer activity will be included in "beacon blocks", which are published and attested to by proof-of-stake validators. +Execution layer issuance since The Merge is zero. Proof-of-work is no longer a valid means of block production under the upgraded rules of consensus. All execution layer activity is packaged into "beacon blocks", which are published and attested to by proof-of-stake validators. Rewards for attesting-to and publishing beacon blocks are accounted for separately on the consensus layer. ### Consensus layer issuance {#cl-issuance-post-merge} -Consensus layer issuance will continue as before The Merge, with small rewards for validators who attest to and propose blocks. Validator rewards will continue to accrue to _validator balances_ that are managed within the consensus layer. These are separate Ethereum accounts to the accounts we're used to on Mainnet, and until the Shanghai upgrade funds from validator accounts will not be withdrawable/transferrable. This means that although new ETH is still being issued, 100% of it will be locked from the market until this upgrade occurs. When the Shanghai upgrade is rolled out, this ETH will become available. +Consensus layers issuance continues today as it did prior to The Merge, with small rewards for validators who attest to and propose blocks. Validator rewards continue to accrue to _validator balances_ that are managed within the consensus layer. These are separate Ethereum accounts to the accounts we're used to on Mainnet, and until the upcoming Shanghai upgrade funds from validator accounts will not be withdrawable/transferrable. This means that although new ETH is still being issued, 100% remains locked from the market until this upgrade occurs. When the Shanghai upgrade is rolled out, this ETH will become available. -When validator withdrawals are enabled, stakers will be incentivized to remove their _earnings/rewards (balance over 32 ETH)_ as these funds are otherwise not contributing to their stake weight (which maxes as 32). +When validator withdrawals are enabled, stakers will be incentivized to remove their _earnings/rewards (balance over 32 ETH)_ as these funds are otherwise not contributing to their stake weight (which maxes at 32). -Stakers may also choose to exit and withdraw their entire validator balance. To ensure Ethereum is stable, the number of validators leaving simultaneously is capped. Only six validators may exit in a given epoch (6.4 minute period) depending on the total ETH staked at the time. This decreases to as low as four as more validators withdraw to intentionally prevent large destabilizing amounts of staked ETH from leaving at once. +After withdraw functionality is enabled, stakers may also choose to exit and withdraw their entire validator balance. To ensure Ethereum is stable, the number of validators leaving simultaneously is capped. Only six validators may exit in a given epoch (6.4 minute period) depending on the total ETH staked at the time. This decreases to as low as four as more validators withdraw to intentionally prevent large destabilizing amounts of staked ETH from leaving at once. ### Post-merge inflation breakdown {#post-merge-inflation-breakdown} -- Total ETH supply: **~119,300,000 ETH** (as of Q2 2022) +- Total ETH supply: **~120,520,000 ETH** (at time of The Merge in September 2022) - Execution layer issuance: **0** -- Consensus layer issuance: Same as above, **~0.49%** annual issuance rate (with 13 million ETH staked) -- Total annual issuance rate: **~0.49%** +- Consensus layer issuance: Same as above, **~0.52%** annualized issuance rate (with 14 million total ETH staked) -Total annual issuance rate: ~0.49%

-Net reduction in annual ETH issuance: ~89.4% (0.49% / 4.62% * 100) +Total annualized issuance rate: ~0.52%

+Net reduction in annual ETH issuance: ~88.7% ((4.61% - 0.52%) / 4.61% * 100) ##  The burn {#the-burn} -The opposite force to ETH issuance is the rate at which ETH is burned. For a transaction to execute on Ethereum, a minimum fee (known as a `base fee`) must be paid, which fluctuates continuously depending on network activity. The fee is paid in ETH and is _required_ for the transaction to be considered valid. This fee gets _burned_ during the transaction process, removing it from circulation. +The opposite force to ETH issuance is the rate at which ETH is burned. For a transaction to execute on Ethereum, a minimum fee (known as a "base fee") must be paid, which fluctuates continuously (block-to-block) depending on network activity. The fee is paid in ETH and is _required_ for the transaction to be considered valid. This fee gets _burned_ during the transaction process, removing it from circulation. -Fee burning went live with the London upgrade in August 2021, and will continue after the Merge. +Fee burning went live with the London upgrade in August 2021, and remains unchanged since The Merge. -On top of the fee burn implemented by the London upgrade, validators can also incur penalties for being offline, or worse, they can be slashed for breaking specific rules that threaten network security. These penalties result in a reduction of ETH from that validator's balance, which is not directly rewarded to any other account, effectively burning it from circulation. +On top of the fee burn implemented by the London upgrade, validators can also incur penalties for being offline, or worse, they can be slashed for breaking specific rules that threaten network security. These penalties result in a reduction of ETH from that validator's balance, which is not directly rewarded to any other account, effectively burning/removing it from circulation. ## Further reading {#further-reading} +- [The Merge](/history/merge/) - [Ultrasound.money](https://ultrasound.money/) - _Dashboards available to visualize ETH issuance and burn in real-time_ - [Charting Ethereum Issuance](https://www.attestant.io/posts/charting-ethereum-issuance/) - _Jim McDonald 2020_ From a409624e8e1696e887e7bdb4986efea1addc6c5c Mon Sep 17 00:00:00 2001 From: Paul Wackerow <54227730+wackerow@users.noreply.github.com> Date: Sat, 22 Oct 2022 14:07:24 -0500 Subject: [PATCH 071/151] add issuance offset calculations --- src/content/upgrades/merge/issuance/index.md | 27 ++++++++++++++++++++ 1 file changed, 27 insertions(+) diff --git a/src/content/upgrades/merge/issuance/index.md b/src/content/upgrades/merge/issuance/index.md index aad9cc20afd..ee975ad5ae6 100644 --- a/src/content/upgrades/merge/issuance/index.md +++ b/src/content/upgrades/merge/issuance/index.md @@ -99,6 +99,33 @@ Fee burning went live with the London upgrade in On top of the fee burn implemented by the London upgrade, validators can also incur penalties for being offline, or worse, they can be slashed for breaking specific rules that threaten network security. These penalties result in a reduction of ETH from that validator's balance, which is not directly rewarded to any other account, effectively burning/removing it from circulation. +### Calculating average gas price for deflation {#calculating-average-gas-price-for-deflation} + +As discussed above, the amount of ETH issued in a given day is dependent upon the total ETH staked. At time of writing, this is approximately 1700 ETH/day. + +To determine the average gas price required to completely offset this issuance in a given 24-hour period, we'll start by calculating the total number of blocks in a day: + +- `1 block / 12 seconds = 5 blocks/minute` +- `(5 blocks/minute) * (60 minutes/hour) * (24 hours/day) = 7200 blocks/day` + +Each block targets `15x10^6 gas/block` ([more on gas](/developers/docs/gas/)). Using this, we can solve for the average gas price (in units of gwei/gas) required to offset issuance, given a total daily ETH issuance of 1700 ETH: + +- `7200 blocks/day * 15x10^6 gas/block * Y gwei/gas * 1 ETH/ 10^9 gwei = 1700 ETH/day` + +Solving for `Y`: + +- `Y = (1700(10^9))/(7200 * 15(10^6)) = (1700(10^3)/(7200 * 15)) = 16 gwei` (rounding to only two significant digits) + +Another way to rearrange this last step would be to replace `1700` with a variable `X` that represents the daily ETH issuance, and to simplify the rest to: + +- `Y = (X(10^3)/(7200 * 15)) = X/108` + +We can simplify and write this as a function of `X`: + +- `f(X) = X/108` where `X` is daily ETH issuance, and `f(X)` represents the gwei/gas price required to offset all of the newly issued ETH. + +So, for example, if `X` (daily ETH issuance) rises to 1800 based on total ETH staked, `f(X)` (gwei required to offset all of the issuance) would then be `17 gwei` (using 2 significant digits) + ## Further reading {#further-reading} - [The Merge](/history/merge/) From 1dfb5149b158b3d0e2b7d4c3232fb77963ba0819 Mon Sep 17 00:00:00 2001 From: Paul Wackerow <54227730+wackerow@users.noreply.github.com> Date: Sat, 22 Oct 2022 18:29:43 -0500 Subject: [PATCH 072/151] feat: custom matomo tracking for quiz widget --- src/components/Quiz/QuizWidget.tsx | 40 ++++++++++++++++++++++++++++-- 1 file changed, 38 insertions(+), 2 deletions(-) diff --git a/src/components/Quiz/QuizWidget.tsx b/src/components/Quiz/QuizWidget.tsx index 3242ad91a22..3f7d81ae015 100644 --- a/src/components/Quiz/QuizWidget.tsx +++ b/src/components/Quiz/QuizWidget.tsx @@ -32,6 +32,9 @@ import StarConfetti from "../../assets/quiz/star-confetti.svg" import allQuizData from "../../data/learnQuizzes" import questionBank from "../../data/learnQuizzes/questionBank" +// Utilities +import { trackCustomEvent } from "../../utils/matomo" + // Type import { AnswerChoice, RawQuiz, Quiz, RawQuestion, Question } from "../../types" @@ -127,11 +130,24 @@ const QuizWidget: React.FC = ({ quizKey, maxQuestions }) => { handleSelectAnswerChoice(answerId) } - const handleShowAnswer = (): void => { + const handleShowAnswer = (questionId: string, answer: AnswerChoice): void => { + trackCustomEvent({ + eventCategory: "Quiz widget", + eventAction: "Question answered", + eventName: `QID: ${questionId}`, + eventValue: answer.isCorrect + ? `Correct answer` + : `AID: ${answer.answerId}`, + }) setShowAnswer(true) } const handleRetryQuestion = (): void => { + trackCustomEvent({ + eventCategory: "Quiz widget", + eventAction: "Other", + eventName: "Retry question", + }) setCurrentQuestionAnswerChoice(null) setSelectedAnswer(null) setShowAnswer(false) @@ -141,9 +157,24 @@ const QuizWidget: React.FC = ({ quizKey, maxQuestions }) => { setUserQuizProgress((prev) => [...prev, currentQuestionAnswerChoice]) setCurrentQuestionAnswerChoice(null) setShowAnswer(false) + if (showResults) { + const ratioCorrect: number = + correctCount / quizData!.questions.length || 0 + trackCustomEvent({ + eventCategory: "Quiz widget", + eventAction: "Other", + eventName: "Submit results", + eventValue: `${Math.floor(ratioCorrect * 100)}%`, + }) + } } const shareTweetHandler = (): void => { if (!quizData || !window) return + trackCustomEvent({ + eventCategory: "Quiz widget", + eventAction: "Other", + eventName: "Share results", + }) const url = `https://ethereum.org${window.location.pathname}` // TODO: Add hash link to quiz const tweet = `I just took the "${quizData.title}" quiz on ethereum.org and scored ${correctCount} out of ${quizData.questions.length}! Try it yourself at ${url}` window.open( @@ -311,7 +342,12 @@ const QuizWidget: React.FC = ({ quizKey, maxQuestions }) => { ) : ( From fa61dbd66372f2076bf0e209874b63cf8282ba26 Mon Sep 17 00:00:00 2001 From: Paul Wackerow <54227730+wackerow@users.noreply.github.com> Date: Tue, 25 Oct 2022 13:56:40 -0700 Subject: [PATCH 097/151] add explicit quizKey prop --- src/pages-conditional/what-is-ethereum.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/pages-conditional/what-is-ethereum.tsx b/src/pages-conditional/what-is-ethereum.tsx index 4286f3a4dc7..d25fe576f8d 100644 --- a/src/pages-conditional/what-is-ethereum.tsx +++ b/src/pages-conditional/what-is-ethereum.tsx @@ -947,7 +947,7 @@ const WhatIsEthereumPage = ({
- +
From 2149630543bc1c87ba8d329b23abdab74964fe2a Mon Sep 17 00:00:00 2001 From: Oliver <32515201+this-oliver@users.noreply.github.com> Date: Tue, 25 Oct 2022 23:18:59 +0200 Subject: [PATCH 098/151] updates governance page Changes phrasing for improved clarity --- src/content/governance/index.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/content/governance/index.md b/src/content/governance/index.md index 0f25b3f517c..9cba6d1e5a6 100644 --- a/src/content/governance/index.md +++ b/src/content/governance/index.md @@ -99,7 +99,7 @@ The initial draft of an EIP is unlikely to be implemented on the Ethereum Mainne ### Community consensus {#community-consensus} -While some EIPs are straightforward technical improvements with minimal nuance, some are more complex and inherently tradeoffs which will affect different stakeholders in different ways. This means some EIPs end up being more contentious within the community than others. +While some EIPs are straightforward technical improvements with minimal nuance, some are more complex and come with tradeoffs which will affect different stakeholders in different ways. This means some EIPs end up being more contentious within the community than others. There is no clear playbook on how to handle contentious proposals. Since Protocol Developers have no way to force people to adopt network upgrades, they will generally avoid implementing EIPs where the contentiousness outweighs the benefits to the broader community. From 22f4b0a5096792690d6f79659008f096717993ea Mon Sep 17 00:00:00 2001 From: Paul Wackerow <54227730+wackerow@users.noreply.github.com> Date: Tue, 25 Oct 2022 14:30:48 -0700 Subject: [PATCH 099/151] clean up magic numbers and progress bar logic --- src/components/Quiz/QuizWidget.tsx | 85 +++++++++++++++--------------- 1 file changed, 43 insertions(+), 42 deletions(-) diff --git a/src/components/Quiz/QuizWidget.tsx b/src/components/Quiz/QuizWidget.tsx index 8ba2aac73c8..066bf3efd35 100644 --- a/src/components/Quiz/QuizWidget.tsx +++ b/src/components/Quiz/QuizWidget.tsx @@ -1,5 +1,5 @@ // Import libraries -import React, { useEffect, useState, useMemo } from "react" +import React, { useEffect, useState, useMemo, useCallback } from "react" import { Box, ButtonGroup, @@ -100,6 +100,33 @@ const QuizWidget: React.FC = ({ quizKey, maxQuestions }) => { [userQuizProgress, quizData] ) + const progressBarBackground = useCallback( + (index: number): string => { + if ( + (showAnswer && + index === currentQuestionIndex && + currentQuestionAnswerChoice?.isCorrect) || + userQuizProgress[index]?.isCorrect + ) + return "success" + if ( + (showAnswer && + index === currentQuestionIndex && + !currentQuestionAnswerChoice?.isCorrect) || + (userQuizProgress[index] && !userQuizProgress[index].isCorrect) + ) + return "error" + if (index === currentQuestionIndex) return "gray.400" + return "gray.500" + }, + [ + showAnswer, + currentQuestionIndex, + currentQuestionAnswerChoice, + userQuizProgress, + ] + ) + const correctCount = useMemo( () => userQuizProgress.filter(({ isCorrect }) => isCorrect).length, [userQuizProgress] @@ -207,10 +234,8 @@ const QuizWidget: React.FC = ({ quizKey, maxQuestions }) => { Test your knowledge = ({ quizKey, maxQuestions }) => { } borderRadius="base" boxShadow="drop" - padding={{ - md: "49px 62px", // TODO: Remove magic numbers - base: "20px 30px", - }} + py={{ base: 5, md: 12 }} + px={{ base: 7, md: 15 }} position="relative" > {/* Trophy icon */} @@ -279,40 +302,18 @@ const QuizWidget: React.FC = ({ quizKey, maxQuestions }) => { {quizData.title}
+ {/* Progress bar */}
- {quizData.questions.map(({ id }, index) => { - let bg: string - if ( - (showAnswer && - index === currentQuestionIndex && - currentQuestionAnswerChoice?.isCorrect) || - userQuizProgress[index]?.isCorrect - ) { - bg = "success" - } else if ( - (showAnswer && - index === currentQuestionIndex && - !currentQuestionAnswerChoice?.isCorrect) || - (userQuizProgress[index] && - !userQuizProgress[index].isCorrect) - ) { - bg = "error" - } else if (index === currentQuestionIndex) { - bg = "gray.400" - } else { - bg = "gray.500" - } - return ( - - ) - })} + {quizData.questions.map(({ id }, index) => ( + + ))}
{showResults ? ( From ce9805ef2d43f8936d99b370522a49cc49fc7493 Mon Sep 17 00:00:00 2001 From: Paul Wackerow <54227730+wackerow@users.noreply.github.com> Date: Tue, 25 Oct 2022 14:33:14 -0700 Subject: [PATCH 100/151] small layout adjustments --- src/components/Quiz/QuizWidget.tsx | 6 ++++-- 1 file changed, 4 insertions(+), 2 deletions(-) diff --git a/src/components/Quiz/QuizWidget.tsx b/src/components/Quiz/QuizWidget.tsx index 066bf3efd35..a4e9da6d766 100644 --- a/src/components/Quiz/QuizWidget.tsx +++ b/src/components/Quiz/QuizWidget.tsx @@ -227,9 +227,10 @@ const QuizWidget: React.FC = ({ quizKey, maxQuestions }) => { Test your knowledge @@ -245,7 +246,8 @@ const QuizWidget: React.FC = ({ quizKey, maxQuestions }) => { } borderRadius="base" boxShadow="drop" - py={{ base: 5, md: 12 }} + pt={12} + pb={{ base: 5, md: 12 }} px={{ base: 7, md: 15 }} position="relative" > From 356d3d7de62b3141559a7ebd5550558999586965 Mon Sep 17 00:00:00 2001 From: tylerapfledderer Date: Tue, 25 Oct 2022 18:13:48 -0400 Subject: [PATCH 101/151] refactor(run-a-node): migrate the part with `ExpandableInfo` to Chakra --- src/pages/run-a-node.tsx | 16 +++++----------- 1 file changed, 5 insertions(+), 11 deletions(-) diff --git a/src/pages/run-a-node.tsx b/src/pages/run-a-node.tsx index 2b27547a96a..232edd5dfd2 100644 --- a/src/pages/run-a-node.tsx +++ b/src/pages/run-a-node.tsx @@ -171,15 +171,6 @@ const Highlight = styled(Content)<{ backgroundColor: string }>` const SoftwareHighlight = styled(Highlight)`` -const StyledExpandableInfo = styled(ExpandableInfo)` - width: 90%; - align-self: center; - @media (max-width: ${({ theme }) => theme.breakpoints.m}) { - margin: 0; - width: 100%; - } -` - const ColumnFill = styled.div` line-height: 2; box-sizing: border-box; @@ -536,7 +527,10 @@ const RunANodePage = ({ data }: PageProps) => { - } contentPreview={} @@ -555,7 +549,7 @@ const RunANodePage = ({ data }: PageProps) => { - + From ed725875f3645f4be9477e18d8cb8fb299ea19b4 Mon Sep 17 00:00:00 2001 From: tylerapfledderer Date: Tue, 25 Oct 2022 19:54:04 -0400 Subject: [PATCH 102/151] revert(expandable-info): revert from `forwardRef` --- src/components/ExpandableInfo.tsx | 235 +++++++++++++++--------------- 1 file changed, 114 insertions(+), 121 deletions(-) diff --git a/src/components/ExpandableInfo.tsx b/src/components/ExpandableInfo.tsx index 0cb2ca97bbe..09b8bc4b181 100644 --- a/src/components/ExpandableInfo.tsx +++ b/src/components/ExpandableInfo.tsx @@ -6,7 +6,6 @@ import { Center, ChakraProps, Collapse, - forwardRef, Heading, HStack, Icon, @@ -28,135 +27,129 @@ export interface IProps extends ChakraProps { className?: string } -const ExpandableInfo = forwardRef( - ( - { - image, - title, - contentPreview, - children, - background, - forceOpen, - className, - ...rest - }, - ref - ) => { - const { isOpen, getButtonProps, getDisclosureProps } = useDisclosure({ - defaultIsOpen: forceOpen, - }) +const ExpandableInfo: React.FC = ({ + image, + title, + contentPreview, + children, + background, + forceOpen, + className, + ...rest +}) => { + const { isOpen, getButtonProps, getDisclosureProps } = useDisclosure({ + defaultIsOpen: forceOpen, + }) - const chevronFlip = { - collapsed: { - rotate: 0, - transition: { - duration: 0.1, - }, + const chevronFlip = { + collapsed: { + rotate: 0, + transition: { + duration: 0.1, }, - expanded: { - rotate: 180, - transition: { - duration: 0.4, - }, + }, + expanded: { + rotate: 180, + transition: { + duration: 0.4, }, - } + }, + } - const animateToggle = isOpen ? "expanded" : "collapsed" + const animateToggle = isOpen ? "expanded" : "collapsed" - return ( - + - - {image && } - - - - - {title} - - - - {contentPreview} - - - - {!forceOpen && ( -
} + + + - -
- )} - - - - {children} + + {title} + + + + {contentPreview} + - - - ) - } -) + + {!forceOpen && ( +
+ +
+ )} + + + + {children} + + + + ) +} export default ExpandableInfo From f4b0a0dea91ad671fce1c16c23c1359b75c94056 Mon Sep 17 00:00:00 2001 From: Paul Wackerow <54227730+wackerow@users.noreply.github.com> Date: Wed, 26 Oct 2022 16:51:06 +0200 Subject: [PATCH 103/151] Update src/content/upgrades/merge/issuance/index.md Co-authored-by: Joseph Cook <33655003+jmcook1186@users.noreply.github.com> --- src/content/upgrades/merge/issuance/index.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/content/upgrades/merge/issuance/index.md b/src/content/upgrades/merge/issuance/index.md index ee975ad5ae6..6591bea0302 100644 --- a/src/content/upgrades/merge/issuance/index.md +++ b/src/content/upgrades/merge/issuance/index.md @@ -32,7 +32,7 @@ title="ETH issuance tldr"> ### Execution layer issuance {#el-issuance-pre-merge} -Under proof-of-work, miners only interacted with the execution layer and were rewarded with block rewards if they were the first miner to solve the next block. Since the [Constantinople upgrade](/history/#constantinople) in 2019 this reward had been 2 ETH per block. Miners were also rewarded for publishing [ommer](/glossary/#ommer) blocks, which were valid blocks that don't end up in the longest/canonical chain. These rewards maxed out at 1.75 ETH per ommer, and were _in addition to_ the reward issued from the canonical block. The process of mining is an economically intensive activity, which historically required high levels of ETH issuance to sustain. +Under proof-of-work, miners only interacted with the execution layer and were rewarded with block rewards if they were the first miner to solve the next block. Since the [Constantinople upgrade](/history/#constantinople) in 2019 this reward had been 2 ETH per block. Miners were also rewarded for publishing [ommer](/glossary/#ommer) blocks, which were valid blocks that didn't end up in the longest/canonical chain. These rewards maxed out at 1.75 ETH per ommer, and were _in addition to_ the reward issued from the canonical block. The process of mining was an economically intensive activity, which historically required high levels of ETH issuance to sustain. ### Consensus layer issuance {#cl-issuance-pre-merge} From 94f5c2a8c3c9cb9dd027579a1ab4017430dad536 Mon Sep 17 00:00:00 2001 From: 0xdie <94481845+0xdie@users.noreply.github.com> Date: Wed, 26 Oct 2022 20:00:10 +0300 Subject: [PATCH 104/151] doc: fix missing variable identifier letter --- .../data-structures-and-encoding/web3-secret-storage/index.md | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/src/content/developers/docs/data-structures-and-encoding/web3-secret-storage/index.md b/src/content/developers/docs/data-structures-and-encoding/web3-secret-storage/index.md index 3021c65a361..fc7a89c946f 100644 --- a/src/content/developers/docs/data-structures-and-encoding/web3-secret-storage/index.md +++ b/src/content/developers/docs/data-structures-and-encoding/web3-secret-storage/index.md @@ -16,8 +16,8 @@ var recognizer = require('ethereum-keyfile-recognizer'); fs.readFile('keyfile.json', (err, data) => { var json = JSON.parse(data); - ar result = recognizer(json); - }); + var result = recognizer(json); +}); /** result * [ 'web3', 3 ] web3 (v3) keyfile From 382f693dae6ccf790b8fa65e63fe90f6bf624b37 Mon Sep 17 00:00:00 2001 From: Gourav Singh Rawat <69115613+Seek4samurai@users.noreply.github.com> Date: Wed, 26 Oct 2022 23:06:02 +0530 Subject: [PATCH 105/151] Update src/content/developers/docs/ides/index.md Co-authored-by: Joshua <62268199+minimalsm@users.noreply.github.com> --- src/content/developers/docs/ides/index.md | 1 - 1 file changed, 1 deletion(-) diff --git a/src/content/developers/docs/ides/index.md b/src/content/developers/docs/ides/index.md index 48a25006fe8..258061849c0 100644 --- a/src/content/developers/docs/ides/index.md +++ b/src/content/developers/docs/ides/index.md @@ -63,6 +63,5 @@ Most established IDEs have built plugins to enhance the Ethereum development exp ## Further reading {#further-reading} -- [Blockchain development tools](https://www.alchemy.com/overviews/20-blockchain-development-tools) - Alchemy's top 20 blockchain development tools _Know of a community resource that helped you? Edit this page and add it!_ From 13a08d30a36f00139f2237569dfd50167c9ecc1a Mon Sep 17 00:00:00 2001 From: Paul Wackerow <54227730+wackerow@users.noreply.github.com> Date: Wed, 26 Oct 2022 13:06:00 -0700 Subject: [PATCH 106/151] getLocaleForNumberFormat with numberToPercent --- src/utils/numberToPercent.ts | 7 +++++-- 1 file changed, 5 insertions(+), 2 deletions(-) diff --git a/src/utils/numberToPercent.ts b/src/utils/numberToPercent.ts index d9abac43983..756ded9ebc7 100644 --- a/src/utils/numberToPercent.ts +++ b/src/utils/numberToPercent.ts @@ -1,5 +1,8 @@ -export const numberToPercent = (num: number, locale: string = "en"): string => - new Intl.NumberFormat(locale, { +import { getLocaleForNumberFormat } from "./translations" +import type { Lang } from "./languages" + +export const numberToPercent = (num: number, locale: Lang = "en"): string => + new Intl.NumberFormat(getLocaleForNumberFormat(locale), { style: "percent", maximumFractionDigits: 0, }).format(num) From 7628ecbf2796fa6e9d5c53ed03edae8974d0d059 Mon Sep 17 00:00:00 2001 From: Paul Wackerow <54227730+wackerow@users.noreply.github.com> Date: Wed, 26 Oct 2022 13:09:44 -0700 Subject: [PATCH 107/151] chore: code clean up --- src/components/Quiz/QuizRadioGroup.tsx | 8 ++++---- src/components/Quiz/QuizSummary.tsx | 2 +- src/components/Quiz/QuizWidget.tsx | 2 ++ 3 files changed, 7 insertions(+), 5 deletions(-) diff --git a/src/components/Quiz/QuizRadioGroup.tsx b/src/components/Quiz/QuizRadioGroup.tsx index 836cb4f1761..658da47ab62 100644 --- a/src/components/Quiz/QuizRadioGroup.tsx +++ b/src/components/Quiz/QuizRadioGroup.tsx @@ -86,7 +86,7 @@ const QuizRadioGroup: React.FC = ({ }} > = ({ > = ({ // Render QuizRadioGroup return ( - + {prompt} diff --git a/src/components/Quiz/QuizSummary.tsx b/src/components/Quiz/QuizSummary.tsx index ee51c64fd7f..fa7c074b88d 100644 --- a/src/components/Quiz/QuizSummary.tsx +++ b/src/components/Quiz/QuizSummary.tsx @@ -38,7 +38,7 @@ const QuizSummary: React.FC = ({ correctCount, questionCount }) => { // Render QuizSummary component return ( - + {isPassingScore ? "You passed the quiz!" : "Your results"} = ({ quizKey, maxQuestions }) => { marginInline={0} /> ))} + /> + )
{showResults ? ( From 2cc1e8767a5aca120a27cb8cb462b665808389fb Mon Sep 17 00:00:00 2001 From: Paul Wackerow <54227730+wackerow@users.noreply.github.com> Date: Wed, 26 Oct 2022 13:20:23 -0700 Subject: [PATCH 108/151] feat: improve progress bar responsiveness Calculates an ideal width based on the width of the container and the number of questions available, maxing the width at the existing 2rem limit. --- src/components/Quiz/QuizWidget.tsx | 32 +++++++++++++++++++----------- 1 file changed, 20 insertions(+), 12 deletions(-) diff --git a/src/components/Quiz/QuizWidget.tsx b/src/components/Quiz/QuizWidget.tsx index 05b544bb537..7e0eb9e1f3e 100644 --- a/src/components/Quiz/QuizWidget.tsx +++ b/src/components/Quiz/QuizWidget.tsx @@ -39,6 +39,9 @@ import { AnswerChoice, RawQuiz, Quiz, RawQuestion, Question } from "../../types" // Import constants import { PASSING_QUIZ_SCORE } from "../../constants" +// Constants +const PROGRESS_BAR_GAP = "4px" + // Interfaces export interface IProps { quizKey?: string @@ -305,19 +308,24 @@ const QuizWidget: React.FC = ({ quizKey, maxQuestions }) => {
{/* Progress bar */} -
- {quizData.questions.map(({ id }, index) => ( - - ))} +
+ {quizData.questions.map(({ id }, index) => { + /* Calculate width percent based on number of questions */ + const width = `calc(${Math.floor( + 100 / quizData.questions.length + )}% - ${PROGRESS_BAR_GAP})` + return ( + ) + })}
{showResults ? ( @@ -341,7 +349,7 @@ const QuizWidget: React.FC = ({ quizKey, maxQuestions }) => { !currentQuestionAnswerChoice.isCorrect && ( From 532b041b525d00831e8460b2175f82c610818dfc Mon Sep 17 00:00:00 2001 From: Paul Wackerow <54227730+wackerow@users.noreply.github.com> Date: Wed, 26 Oct 2022 13:55:29 -0700 Subject: [PATCH 109/151] fix: hover outline coloring --- src/components/Quiz/QuizRadioGroup.tsx | 5 +++-- 1 file changed, 3 insertions(+), 2 deletions(-) diff --git a/src/components/Quiz/QuizRadioGroup.tsx b/src/components/Quiz/QuizRadioGroup.tsx index 658da47ab62..ccb84728971 100644 --- a/src/components/Quiz/QuizRadioGroup.tsx +++ b/src/components/Quiz/QuizRadioGroup.tsx @@ -80,8 +80,9 @@ const QuizRadioGroup: React.FC = ({ borderRadius="base" _hover={{ boxShadow: showAnswer ? "none" : "primary", - outlineColor: "primary", - outline: showAnswer ? "none" : "1px solid", + outline: showAnswer + ? "none" + : "1px solid var(--eth-colors-primary)", cursor: showAnswer ? "default" : "pointer", }} > From 7a8e2938b8b8f363aba80b30763af16272e1ed4f Mon Sep 17 00:00:00 2001 From: Paul Wackerow <54227730+wackerow@users.noreply.github.com> Date: Wed, 26 Oct 2022 14:30:25 -0700 Subject: [PATCH 110/151] update prop typing for numberToPercent util --- src/utils/numberToPercent.ts | 7 +++++-- 1 file changed, 5 insertions(+), 2 deletions(-) diff --git a/src/utils/numberToPercent.ts b/src/utils/numberToPercent.ts index 756ded9ebc7..c7ec01e8012 100644 --- a/src/utils/numberToPercent.ts +++ b/src/utils/numberToPercent.ts @@ -1,8 +1,11 @@ import { getLocaleForNumberFormat } from "./translations" import type { Lang } from "./languages" -export const numberToPercent = (num: number, locale: Lang = "en"): string => - new Intl.NumberFormat(getLocaleForNumberFormat(locale), { +export const numberToPercent = ( + num: number, + locale: string | Lang = "en" +): string => + new Intl.NumberFormat(getLocaleForNumberFormat(locale as Lang), { style: "percent", maximumFractionDigits: 0, }).format(num) From dc447fdfbbd8d3ae139a203025d7965414c1183d Mon Sep 17 00:00:00 2001 From: Paul Wackerow <54227730+wackerow@users.noreply.github.com> Date: Wed, 26 Oct 2022 15:04:37 -0700 Subject: [PATCH 111/151] fix: confetti z-index below copy and trophy --- src/components/Quiz/QuizWidget.tsx | 41 ++++++++++++++++-------------- 1 file changed, 22 insertions(+), 19 deletions(-) diff --git a/src/components/Quiz/QuizWidget.tsx b/src/components/Quiz/QuizWidget.tsx index 7e0eb9e1f3e..9dd3004cb51 100644 --- a/src/components/Quiz/QuizWidget.tsx +++ b/src/components/Quiz/QuizWidget.tsx @@ -253,7 +253,29 @@ const QuizWidget: React.FC = ({ quizKey, maxQuestions }) => { pb={{ base: 5, md: 12 }} px={{ base: 7, md: 15 }} position="relative" + isolation="isolate" > + {showConfetti && ( + <> + + + + )} {/* Trophy icon */} = ({ quizKey, maxQuestions }) => { color="neutral" /> - {showConfetti && ( - <> - - - - )} {quizData ? ( <>
From 4cb155cfd8fcc02089314c76d1c218d2188520e1 Mon Sep 17 00:00:00 2001 From: Paul Wackerow <54227730+wackerow@users.noreply.github.com> Date: Wed, 26 Oct 2022 15:15:01 -0700 Subject: [PATCH 112/151] fix: button layout stack and stretch buttons on mobile, update "Try again" copy --- src/components/Quiz/QuizWidget.tsx | 18 ++++++++++++------ 1 file changed, 12 insertions(+), 6 deletions(-) diff --git a/src/components/Quiz/QuizWidget.tsx b/src/components/Quiz/QuizWidget.tsx index 9dd3004cb51..285ae500fef 100644 --- a/src/components/Quiz/QuizWidget.tsx +++ b/src/components/Quiz/QuizWidget.tsx @@ -2,7 +2,6 @@ import React, { useEffect, useState, useMemo, useCallback } from "react" import { Box, - ButtonGroup, Center, Circle, Container, @@ -346,7 +345,14 @@ const QuizWidget: React.FC = ({ quizKey, maxQuestions }) => { )}
- + {showAnswer && currentQuestionAnswerChoice && !currentQuestionAnswerChoice.isCorrect && ( @@ -358,15 +364,15 @@ const QuizWidget: React.FC = ({ quizKey, maxQuestions }) => { )} {showResults ? ( - + <> - - + + ) : showAnswer ? ( )} - +
) : ( From d08bb9a0d760bc00d182beb0e54a717f17208343 Mon Sep 17 00:00:00 2001 From: Paul Wackerow <54227730+wackerow@users.noreply.github.com> Date: Wed, 26 Oct 2022 15:17:23 -0700 Subject: [PATCH 113/151] conditionally hide "Try again" on 100% --- src/components/Quiz/QuizWidget.tsx | 4 +++- 1 file changed, 3 insertions(+), 1 deletion(-) diff --git a/src/components/Quiz/QuizWidget.tsx b/src/components/Quiz/QuizWidget.tsx index 285ae500fef..62a142b849f 100644 --- a/src/components/Quiz/QuizWidget.tsx +++ b/src/components/Quiz/QuizWidget.tsx @@ -371,7 +371,9 @@ const QuizWidget: React.FC = ({ quizKey, maxQuestions }) => { > Share results - + {score < 100 && ( + + )} ) : showAnswer ? (
-
+
Date: Thu, 27 Oct 2022 18:00:39 +0200 Subject: [PATCH 127/151] Update src/content/upgrades/merge/issuance/index.md --- src/content/upgrades/merge/issuance/index.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/content/upgrades/merge/issuance/index.md b/src/content/upgrades/merge/issuance/index.md index 6591bea0302..077ab0272a9 100644 --- a/src/content/upgrades/merge/issuance/index.md +++ b/src/content/upgrades/merge/issuance/index.md @@ -128,6 +128,6 @@ So, for example, if `X` (daily ETH issuance) rises to 1800 based on total ETH st ## Further reading {#further-reading} -- [The Merge](/history/merge/) +- [The Merge](/upgrades/merge/) - [Ultrasound.money](https://ultrasound.money/) - _Dashboards available to visualize ETH issuance and burn in real-time_ - [Charting Ethereum Issuance](https://www.attestant.io/posts/charting-ethereum-issuance/) - _Jim McDonald 2020_ From 26dc298e98c234003bc0a587adf87d4034d39fb9 Mon Sep 17 00:00:00 2001 From: Paul Wackerow <54227730+wackerow@users.noreply.github.com> Date: Thu, 27 Oct 2022 11:40:11 -0700 Subject: [PATCH 128/151] remove comment --- src/content/upgrades/merge/issuance/index.md | 2 -- 1 file changed, 2 deletions(-) diff --git a/src/content/upgrades/merge/issuance/index.md b/src/content/upgrades/merge/issuance/index.md index 077ab0272a9..0865169e3e8 100644 --- a/src/content/upgrades/merge/issuance/index.md +++ b/src/content/upgrades/merge/issuance/index.md @@ -26,8 +26,6 @@ title="ETH issuance tldr"> - - ## Pre-merge (historical) {#pre-merge} ### Execution layer issuance {#el-issuance-pre-merge} From 5be424de3a6133c2155821742881b6b72329f3b6 Mon Sep 17 00:00:00 2001 From: Paul Wackerow <54227730+wackerow@users.noreply.github.com> Date: Thu, 27 Oct 2022 11:42:46 -0700 Subject: [PATCH 129/151] typo patch --- src/content/upgrades/merge/issuance/index.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/content/upgrades/merge/issuance/index.md b/src/content/upgrades/merge/issuance/index.md index 0865169e3e8..2fc868fa793 100644 --- a/src/content/upgrades/merge/issuance/index.md +++ b/src/content/upgrades/merge/issuance/index.md @@ -70,7 +70,7 @@ Execution layer issuance since The Merge is zero. Proof-of-work is no longer a v ### Consensus layer issuance {#cl-issuance-post-merge} -Consensus layers issuance continues today as it did prior to The Merge, with small rewards for validators who attest to and propose blocks. Validator rewards continue to accrue to _validator balances_ that are managed within the consensus layer. These are separate Ethereum accounts to the accounts we're used to on Mainnet, and until the upcoming Shanghai upgrade funds from validator accounts will not be withdrawable/transferrable. This means that although new ETH is still being issued, 100% remains locked from the market until this upgrade occurs. When the Shanghai upgrade is rolled out, this ETH will become available. +Consensus layer issuance continues today as it did prior to The Merge, with small rewards for validators who attest to and propose blocks. Validator rewards continue to accrue to _validator balances_ that are managed within the consensus layer. These are separate Ethereum accounts to the accounts we're used to on Mainnet, and until the upcoming Shanghai upgrade funds from validator accounts will not be withdrawable/transferrable. This means that although new ETH is still being issued, 100% remains locked from the market until this upgrade occurs. When the Shanghai upgrade is rolled out, this ETH will become available. When validator withdrawals are enabled, stakers will be incentivized to remove their _earnings/rewards (balance over 32 ETH)_ as these funds are otherwise not contributing to their stake weight (which maxes at 32). From 4da7d7d0ec7fff4ec6aec7192157d36a3ad89419 Mon Sep 17 00:00:00 2001 From: "allcontributors[bot]" <46447321+allcontributors[bot]@users.noreply.github.com> Date: Thu, 27 Oct 2022 18:47:37 +0000 Subject: [PATCH 130/151] docs: update README.md [skip ci] --- README.md | 1 + 1 file changed, 1 insertion(+) diff --git a/README.md b/README.md index 7d0003c00b5..521dc6f28fc 100644 --- a/README.md +++ b/README.md @@ -1474,6 +1474,7 @@ Thanks goes to these wonderful people ([emoji key](https://allcontributors.org/d Awosise Oluwaseun
Awosise Oluwaseun
📖 Muhammad Ahmad
Muhammad Ahmad
💻 + Oliver
Oliver
📖 From 102d06d0af180a9f1a0300546aa47cbf347dfdda Mon Sep 17 00:00:00 2001 From: "allcontributors[bot]" <46447321+allcontributors[bot]@users.noreply.github.com> Date: Thu, 27 Oct 2022 18:47:38 +0000 Subject: [PATCH 131/151] docs: update .all-contributorsrc [skip ci] --- .all-contributorsrc | 9 +++++++++ 1 file changed, 9 insertions(+) diff --git a/.all-contributorsrc b/.all-contributorsrc index 7a65be4a398..d4e87499935 100644 --- a/.all-contributorsrc +++ b/.all-contributorsrc @@ -9345,6 +9345,15 @@ "contributions": [ "code" ] + }, + { + "login": "this-oliver", + "name": "Oliver", + "avatar_url": "https://avatars.githubusercontent.com/u/32515201?v=4", + "profile": "http://oliverrr.net", + "contributions": [ + "doc" + ] } ], "contributorsPerLine": 7, From 99f85e01a014970128e75d09ee92086a610c8f14 Mon Sep 17 00:00:00 2001 From: "allcontributors[bot]" <46447321+allcontributors[bot]@users.noreply.github.com> Date: Thu, 27 Oct 2022 18:52:19 +0000 Subject: [PATCH 132/151] docs: update README.md [skip ci] --- README.md | 1 + 1 file changed, 1 insertion(+) diff --git a/README.md b/README.md index 521dc6f28fc..75a03f75437 100644 --- a/README.md +++ b/README.md @@ -1475,6 +1475,7 @@ Thanks goes to these wonderful people ([emoji key](https://allcontributors.org/d Awosise Oluwaseun
Awosise Oluwaseun
📖 Muhammad Ahmad
Muhammad Ahmad
💻 Oliver
Oliver
📖 + Jiwon Park
Jiwon Park
📖 From 1700139e249d34004c1cf548f72b177a4b0a3f0e Mon Sep 17 00:00:00 2001 From: "allcontributors[bot]" <46447321+allcontributors[bot]@users.noreply.github.com> Date: Thu, 27 Oct 2022 18:52:20 +0000 Subject: [PATCH 133/151] docs: update .all-contributorsrc [skip ci] --- .all-contributorsrc | 9 +++++++++ 1 file changed, 9 insertions(+) diff --git a/.all-contributorsrc b/.all-contributorsrc index d4e87499935..8bc44875f75 100644 --- a/.all-contributorsrc +++ b/.all-contributorsrc @@ -9354,6 +9354,15 @@ "contributions": [ "doc" ] + }, + { + "login": "jiOnederfull", + "name": "Jiwon Park", + "avatar_url": "https://avatars.githubusercontent.com/u/48719289?v=4", + "profile": "https://github.com/jiOnederfull", + "contributions": [ + "doc" + ] } ], "contributorsPerLine": 7, From 130f6028338eaacd922adf9a7d13cf813b2e1e44 Mon Sep 17 00:00:00 2001 From: Corwin Smith Date: Thu, 27 Oct 2022 12:58:28 -0600 Subject: [PATCH 134/151] remove changes to crowdin-import --- src/scripts/crowdin-import.ts | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/scripts/crowdin-import.ts b/src/scripts/crowdin-import.ts index 6dd96c09ba1..5b4e9cebd6b 100644 --- a/src/scripts/crowdin-import.ts +++ b/src/scripts/crowdin-import.ts @@ -56,7 +56,7 @@ const USER_SELECTION: UserSelectionObject = { ka: [], kk: [], km: [], - ko: [5, 6, 7], + ko: [], lt: [], ml: [], ms: [], From 03225f5e2c34f4f4b9d2d54bd8079188c7d4fd42 Mon Sep 17 00:00:00 2001 From: Paul Wackerow <54227730+wackerow@users.noreply.github.com> Date: Thu, 27 Oct 2022 12:14:36 -0700 Subject: [PATCH 135/151] patch correct answer --- src/data/quizzes/questionBank.ts | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/data/quizzes/questionBank.ts b/src/data/quizzes/questionBank.ts index 2174d16be8a..02c1ceae7a5 100644 --- a/src/data/quizzes/questionBank.ts +++ b/src/data/quizzes/questionBank.ts @@ -123,7 +123,7 @@ const questionBank: QuestionBank = { "Ethereum has never went completely offline since it launched.", }, ], - correctAnswerId: "a004-d", + correctAnswerId: "a004-a", }, a005: { prompt: "Ethereum consumes more electricity than:", From cd0f647f69eb442abfd9efa0696ccd36b687ff86 Mon Sep 17 00:00:00 2001 From: "allcontributors[bot]" <46447321+allcontributors[bot]@users.noreply.github.com> Date: Thu, 27 Oct 2022 19:50:48 +0000 Subject: [PATCH 136/151] docs: update README.md [skip ci] --- README.md | 1 + 1 file changed, 1 insertion(+) diff --git a/README.md b/README.md index 75a03f75437..76b096211de 100644 --- a/README.md +++ b/README.md @@ -1476,6 +1476,7 @@ Thanks goes to these wonderful people ([emoji key](https://allcontributors.org/d Muhammad Ahmad
Muhammad Ahmad
💻 Oliver
Oliver
📖 Jiwon Park
Jiwon Park
📖 + Zandt Lavish
Zandt Lavish
📖 From ed16f8edf10ffbe7fdf6bf9f7850caf00b56547a Mon Sep 17 00:00:00 2001 From: "allcontributors[bot]" <46447321+allcontributors[bot]@users.noreply.github.com> Date: Thu, 27 Oct 2022 19:50:49 +0000 Subject: [PATCH 137/151] docs: update .all-contributorsrc [skip ci] --- .all-contributorsrc | 9 +++++++++ 1 file changed, 9 insertions(+) diff --git a/.all-contributorsrc b/.all-contributorsrc index 8bc44875f75..6ecb1228ddd 100644 --- a/.all-contributorsrc +++ b/.all-contributorsrc @@ -9363,6 +9363,15 @@ "contributions": [ "doc" ] + }, + { + "login": "ZandtLavish", + "name": "Zandt Lavish", + "avatar_url": "https://avatars.githubusercontent.com/u/99204971?v=4", + "profile": "https://github.com/ZandtLavish", + "contributions": [ + "doc" + ] } ], "contributorsPerLine": 7, From f6009d135cbbf84f49d5372a19668bfecbb4bba9 Mon Sep 17 00:00:00 2001 From: Pablo Pettinari Date: Thu, 27 Oct 2022 17:11:54 -0300 Subject: [PATCH 138/151] revert fixed width & height on Emoji in favor of using fontSize --- src/components/Emoji.tsx | 2 -- src/components/TranslationBanner.tsx | 2 +- 2 files changed, 1 insertion(+), 3 deletions(-) diff --git a/src/components/Emoji.tsx b/src/components/Emoji.tsx index 455434da697..3d56683f3d9 100644 --- a/src/components/Emoji.tsx +++ b/src/components/Emoji.tsx @@ -21,8 +21,6 @@ const Emoji = (props: IProps) => { sx={{ "& > img": { margin: "0 !important", - width: "1.5em !important", - height: "1.5em !important", }, }} {...props} diff --git a/src/components/TranslationBanner.tsx b/src/components/TranslationBanner.tsx index 717d3b013fa..92e66de5a23 100644 --- a/src/components/TranslationBanner.tsx +++ b/src/components/TranslationBanner.tsx @@ -76,7 +76,7 @@ const TranslationBanner: React.FC = ({ From f00f36af20fb73d90ab45a00493c8c38f83c037c Mon Sep 17 00:00:00 2001 From: Corwin Smith Date: Thu, 27 Oct 2022 14:15:00 -0600 Subject: [PATCH 139/151] Update src/content/developers/docs/apis/backend/index.md --- src/content/developers/docs/apis/backend/index.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/content/developers/docs/apis/backend/index.md b/src/content/developers/docs/apis/backend/index.md index 0977963d5d6..dddb9517808 100644 --- a/src/content/developers/docs/apis/backend/index.md +++ b/src/content/developers/docs/apis/backend/index.md @@ -44,7 +44,7 @@ These libraries abstract away much of the complexity of interacting directly wit **Coinbase Cloud Node -** **_Blockchain Infrastructure API._** -- [Node](https://www.coinbase.com/cloud/products/node) +- [Coinbase Cloud Node](https://www.coinbase.com/cloud/products/node) - [Documentation](https://docs.cloud.coinbase.com/node/reference/welcome-to-node) **DataHub by Figment -** **_Web3 API services with Ethereum Mainnet and testnets._** From a2e45d43c2466c924c2b7c332e08ff4e02d0cc83 Mon Sep 17 00:00:00 2001 From: Corwin Smith Date: Thu, 27 Oct 2022 14:55:20 -0600 Subject: [PATCH 140/151] remove some content, add replit docs --- src/content/developers/docs/frameworks/index.md | 3 --- src/content/developers/docs/ides/index.md | 3 ++- 2 files changed, 2 insertions(+), 4 deletions(-) diff --git a/src/content/developers/docs/frameworks/index.md b/src/content/developers/docs/frameworks/index.md index ed1631aeb2b..007f60ec3d0 100644 --- a/src/content/developers/docs/frameworks/index.md +++ b/src/content/developers/docs/frameworks/index.md @@ -95,9 +95,6 @@ Before diving into frameworks, we recommend you first read through our introduct ## Further reading {#further-reading} -- [Guide to the Ethereum stack](https://www.freecodecamp.org/news/full-stack-ethereum-development/) - Freecodecamp's guide to full Ethereum stack -- [More about dapps](https://www.investopedia.com/terms/d/decentralized-applications-dapps.asp) - Investopedia on the term dapps - _Know of a community resource that helped you? Edit this page and add it!_ ## Related topics {#related-topics} diff --git a/src/content/developers/docs/ides/index.md b/src/content/developers/docs/ides/index.md index 258061849c0..63185e5c681 100644 --- a/src/content/developers/docs/ides/index.md +++ b/src/content/developers/docs/ides/index.md @@ -22,6 +22,8 @@ If you're looking to fiddle with code before you [set up a local development env **[Replit (Solidity Starter - Beta)](https://replit.com/@replit/Solidity-starter-beta)** - **_A customizable development environment for Ethereum with hot reloading, error checking, and first-class testnet support_** +- [Docs](https://docs.replit.com/) + **[Tenderly Sandbox](https://sandbox.tenderly.co/)** - **_A fast prototyping environment where you can write, execute, and debug smart contracts in the browser using Solidity and JavaScript_** **[EthFiddle](https://ethfiddle.com/)** - **_Web-based IDE that lets you write, compile, and debug your smart contract_** @@ -63,5 +65,4 @@ Most established IDEs have built plugins to enhance the Ethereum development exp ## Further reading {#further-reading} - _Know of a community resource that helped you? Edit this page and add it!_ From 7c8672c2e1c760c94bc11d9267161ac8e818eb91 Mon Sep 17 00:00:00 2001 From: Corwin Smith Date: Thu, 27 Oct 2022 15:23:25 -0600 Subject: [PATCH 141/151] add back .env.example --- .env.example | 21 +++++++++++++++++++++ 1 file changed, 21 insertions(+) create mode 100644 .env.example diff --git a/.env.example b/.env.example new file mode 100644 index 00000000000..098ea2b8316 --- /dev/null +++ b/.env.example @@ -0,0 +1,21 @@ +# rename this file to .env and supply the values listed below +# also make sure they are available to the build tool (e.g. Netlify) +# warning: variables prefixed with GATSBY_ will be made available to client-side code +# be careful not to expose sensitive data (e.g. your Algolia admin key) +ALGOLIA_ADMIN_KEY=insertValue +ETHERSCAN_API_KEY=insertValue +GATSBY_ALGOLIA_APP_ID=insertValue +GATSBY_ALGOLIA_SEARCH_KEY=insertValue +GATSBY_GITHUB_TOKEN_READ_ONLY=insertValue +GATSBY_FUNCTIONS_PATH=insertValue + +# Build pages only for the specified langs. Leave it empty to build all the langs +# e.g. `en,fr` will only build english and french pages +# Note: always include `en` as it is the default lang of the site +GATSBY_BUILD_LANGS= + +# Folders or files to ignore from the `src/content` folder +IGNORE_CONTENT=**/docs,**/tutorials + +# Used to avoid loading Matomo in our preview deploys +IS_PREVIEW_DEPLOY=false \ No newline at end of file From 9eae7bf84ee8c67ccde857eca997de242d278536 Mon Sep 17 00:00:00 2001 From: Corwin Smith Date: Thu, 27 Oct 2022 15:31:43 -0600 Subject: [PATCH 142/151] Update src/intl/en/page-upgrades-index.json --- src/intl/en/page-upgrades-index.json | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/intl/en/page-upgrades-index.json b/src/intl/en/page-upgrades-index.json index 419df8f86d8..e1c77a0f559 100644 --- a/src/intl/en/page-upgrades-index.json +++ b/src/intl/en/page-upgrades-index.json @@ -43,7 +43,7 @@ "page-upgrades-dive": "Dive into the vision", "page-upgrades-dive-desc": "How are we making Ethereum more scalable, secure, and sustainable? All while keeping Ethereum's core ethos of decentralization.", "page-upgrades-docking": "The Merge", - "page-upgrades-merge-answer-1": "The merge was when Ethereum transitioned to proof-of-stake consensus on September 15, 2022. The Beacon Chain merged with Mainnet, officially deprecating proof-of-work on Ethereum, and reduced Ethereum’s energy consumption by ~99.95%.", + "page-upgrades-merge-answer-1": "The Merge was when Ethereum transitioned to proof-of-stake consensus on September 15, 2022. The Beacon Chain merged with Mainnet, officially deprecating proof-of-work on Ethereum, and reduced Ethereum’s energy consumption by ~99.95%.", "page-upgrades-merge-btn": "More on The Merge", "page-upgrades-merge-desc": "Mainnet Ethereum merged with the proof-of-stake Beacon Chain, marking the end of energy-intensive mining.", "page-upgrades-merge-estimate": "The Merge is live", From a63e1a58b63e6c32572c9dd2193fe38cf3b7a3c6 Mon Sep 17 00:00:00 2001 From: "allcontributors[bot]" <46447321+allcontributors[bot]@users.noreply.github.com> Date: Thu, 27 Oct 2022 21:32:28 +0000 Subject: [PATCH 143/151] docs: update README.md [skip ci] --- README.md | 1 + 1 file changed, 1 insertion(+) diff --git a/README.md b/README.md index 76b096211de..e0401b449f0 100644 --- a/README.md +++ b/README.md @@ -1477,6 +1477,7 @@ Thanks goes to these wonderful people ([emoji key](https://allcontributors.org/d Oliver
Oliver
📖 Jiwon Park
Jiwon Park
📖 Zandt Lavish
Zandt Lavish
📖 + sushthecoda
sushthecoda
📖 From 77ca2ea90a8c5bcb74749eb228d5a32d6be00906 Mon Sep 17 00:00:00 2001 From: "allcontributors[bot]" <46447321+allcontributors[bot]@users.noreply.github.com> Date: Thu, 27 Oct 2022 21:32:29 +0000 Subject: [PATCH 144/151] docs: update .all-contributorsrc [skip ci] --- .all-contributorsrc | 9 +++++++++ 1 file changed, 9 insertions(+) diff --git a/.all-contributorsrc b/.all-contributorsrc index 6ecb1228ddd..636854d28c3 100644 --- a/.all-contributorsrc +++ b/.all-contributorsrc @@ -9372,6 +9372,15 @@ "contributions": [ "doc" ] + }, + { + "login": "issa-me-sush", + "name": "sushthecoda", + "avatar_url": "https://avatars.githubusercontent.com/u/29679285?v=4", + "profile": "https://github.com/issa-me-sush", + "contributions": [ + "doc" + ] } ], "contributorsPerLine": 7, From 7406bc2840d6473cb2426f4b32464c80f3e1aa7b Mon Sep 17 00:00:00 2001 From: Corwin Smith Date: Thu, 27 Oct 2022 15:37:23 -0600 Subject: [PATCH 145/151] copy tweaks --- src/content/glossary/index.md | 3 +-- 1 file changed, 1 insertion(+), 2 deletions(-) diff --git a/src/content/glossary/index.md b/src/content/glossary/index.md index 4fa5bf6a921..c8b6d6ad79d 100644 --- a/src/content/glossary/index.md +++ b/src/content/glossary/index.md @@ -219,8 +219,7 @@ The economics of cryptocurrencies. ### DAG {#dag} -DAG stands for Directed Acyclic Graph. It is a data structure composed of nodes and links between them. Previous to The -Merge, Ethereum used a DAG in its [proof-of-work](#pow) algorithm, [Ethash](#ethash). +DAG stands for Directed Acyclic Graph. It is a data structure composed of nodes and links between them. Before The Merge, Ethereum used a DAG in its [proof-of-work](#pow) algorithm, [Ethash](#ethash), but is no longer used in [proof-of-stake](#pos). ### Dapp {#dapp} From aff4d418b0f515fbbd9d0797b708300b67353d5e Mon Sep 17 00:00:00 2001 From: "allcontributors[bot]" <46447321+allcontributors[bot]@users.noreply.github.com> Date: Thu, 27 Oct 2022 21:38:18 +0000 Subject: [PATCH 146/151] docs: update README.md [skip ci] --- README.md | 1 + 1 file changed, 1 insertion(+) diff --git a/README.md b/README.md index e0401b449f0..a37019ede33 100644 --- a/README.md +++ b/README.md @@ -1478,6 +1478,7 @@ Thanks goes to these wonderful people ([emoji key](https://allcontributors.org/d Jiwon Park
Jiwon Park
📖 Zandt Lavish
Zandt Lavish
📖 sushthecoda
sushthecoda
📖 + Lucas Martin Calderon
Lucas Martin Calderon
📖 From 817ea646e06ab3dd8d7aaa1eb93a0c385f53e09b Mon Sep 17 00:00:00 2001 From: "allcontributors[bot]" <46447321+allcontributors[bot]@users.noreply.github.com> Date: Thu, 27 Oct 2022 21:38:19 +0000 Subject: [PATCH 147/151] docs: update .all-contributorsrc [skip ci] --- .all-contributorsrc | 9 +++++++++ 1 file changed, 9 insertions(+) diff --git a/.all-contributorsrc b/.all-contributorsrc index 636854d28c3..7adbbfe593c 100644 --- a/.all-contributorsrc +++ b/.all-contributorsrc @@ -9381,6 +9381,15 @@ "contributions": [ "doc" ] + }, + { + "login": "LucasMartinCalderon", + "name": "Lucas Martin Calderon", + "avatar_url": "https://avatars.githubusercontent.com/u/25382998?v=4", + "profile": "http://pentestify.io", + "contributions": [ + "doc" + ] } ], "contributorsPerLine": 7, From 17c915643c034c7bf61428fa3431b5a2bbc92391 Mon Sep 17 00:00:00 2001 From: Corwin Smith Date: Thu, 27 Oct 2022 16:15:08 -0600 Subject: [PATCH 148/151] Cleanup text --- src/intl/en/page-what-is-ethereum.json | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/src/intl/en/page-what-is-ethereum.json b/src/intl/en/page-what-is-ethereum.json index ee188b10b6f..6b1473dd0fd 100644 --- a/src/intl/en/page-what-is-ethereum.json +++ b/src/intl/en/page-what-is-ethereum.json @@ -84,8 +84,8 @@ "page-what-is-ethereum-criminal-activity-desc-2": "Crypto is used much less than fiat currencies for criminal purposes according to the key findings of a recent report by Europol, the European Union Agency for Law Enforcement Cooperation:", "page-what-is-ethereum-criminal-activity-desc-3": "“The use of cryptocurrencies for illicit activities seems to comprise only a small part of the overall cryptocurrency economy, and it appears to be comparatively smaller than the amount of illicit funds involved in traditional finance.”", "page-what-is-ethereum-energy-title": "What about Ethereum's energy consumption?", - "page-what-is-ethereum-energy-desc-1": "Since September of 2022, Ethereum has been using a proof-of-stake mechanism that consumes much less energy than its predecessor. The Merge update was one of Ethereum's biggest updates and reduced the energy required to secure Ethereum by about 99.95%, creating a more secure network for a much smaller carbon cost. This made Ethereum a truly low-carbon blockchain while boosting its security and scalability.", - "page-what-is-ethereum-energy-desc-2": "", + "page-what-is-ethereum-energy-desc-1": "On September 15, 2022, Ethereum went through The Merge upgrade which transitioned Ethereum from proof-of-work to proof-of-stake.", + "page-what-is-ethereum-energy-desc-2": "The Merge was Ethereum's biggest uprade and reduced the energy consumption required to secure Ethereum by 99.95%, creating a more secure network for a much smaller carbon cost. Ethereum is now a low-carbon blockchain while boosting its security and scalability.", "page-what-is-ethereum-more-on-energy-consumption": "More on energy consumption", "page-what-is-ethereum-energy-consumption-chart-legend": "Annual Energy Consumption in TW/yr", "page-what-is-ethereum-the-merge-update": "The Merge update", From 3892fdc7773e04cdbfa2b18a226fe60227439a10 Mon Sep 17 00:00:00 2001 From: "allcontributors[bot]" <46447321+allcontributors[bot]@users.noreply.github.com> Date: Thu, 27 Oct 2022 22:16:28 +0000 Subject: [PATCH 149/151] docs: update README.md [skip ci] --- README.md | 3 +++ 1 file changed, 3 insertions(+) diff --git a/README.md b/README.md index a37019ede33..1f28907c89c 100644 --- a/README.md +++ b/README.md @@ -1480,6 +1480,9 @@ Thanks goes to these wonderful people ([emoji key](https://allcontributors.org/d sushthecoda
sushthecoda
📖 Lucas Martin Calderon
Lucas Martin Calderon
📖 + + crypto8893
crypto8893
🖋 + From fc9acf64daadebdcb88495cac69aa90aa7c2fe50 Mon Sep 17 00:00:00 2001 From: "allcontributors[bot]" <46447321+allcontributors[bot]@users.noreply.github.com> Date: Thu, 27 Oct 2022 22:16:29 +0000 Subject: [PATCH 150/151] docs: update .all-contributorsrc [skip ci] --- .all-contributorsrc | 9 +++++++++ 1 file changed, 9 insertions(+) diff --git a/.all-contributorsrc b/.all-contributorsrc index 7adbbfe593c..c6e0844efa4 100644 --- a/.all-contributorsrc +++ b/.all-contributorsrc @@ -9390,6 +9390,15 @@ "contributions": [ "doc" ] + }, + { + "login": "crypto8893", + "name": "crypto8893", + "avatar_url": "https://avatars.githubusercontent.com/u/115051650?v=4", + "profile": "https://github.com/crypto8893", + "contributions": [ + "content" + ] } ], "contributorsPerLine": 7, From 0701536e66a00966832ad187118f25c9ecd65c0d Mon Sep 17 00:00:00 2001 From: Corwin Smith Date: Thu, 27 Oct 2022 16:20:17 -0600 Subject: [PATCH 151/151] v6.8.0 --- package.json | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/package.json b/package.json index c760c8fe2ee..4dbe1478226 100644 --- a/package.json +++ b/package.json @@ -1,6 +1,6 @@ { "name": "ethereum-org-website", - "version": "6.7.6", + "version": "6.8.0", "description": "Website of ethereum.org", "main": "index.js", "repository": "git@github.com:ethereum/ethereum-org-website.git",