Merge pull request #15254 from SupaMega24/Add_Learn_Quiz_Gas_Fees

Add learning quiz for gas fees [Fixes #14752]

Author: wackerow

.gitignore

@@ -60,3 +60,4 @@ src/data/crowdin/bucketsAwaitingReviewReport.csv
 # Storybook
 build-storybook.log
 storybook-static
+

app/[locale]/gas/_components/gas.tsx

@@ -13,6 +13,7 @@ import { Image } from "@/components/Image"
 import InfoBanner from "@/components/InfoBanner"
 import MainArticle from "@/components/MainArticle"
 import PageHero from "@/components/PageHero"
+import { StandaloneQuizWidget } from "@/components/Quiz/QuizWidget"
 import Translation from "@/components/Translation"
 import { ButtonLink } from "@/components/ui/buttons/Button"
 import { Divider } from "@/components/ui/divider"
@@ -384,6 +385,9 @@ const GasPage = () => {
           </Callout>
         </Flex>
       </Content>
+      <Content>
+        <StandaloneQuizWidget quizKey="gas" />
+      </Content>
       <Content>
         <FeedbackCard />
       </Content>

src/components/Quiz/stories/QuizzesStats.stories.tsx

@@ -22,6 +22,7 @@ const meta = {
       daos: [false, 0],
       stablecoins: [false, 0],
       defi: [false, 0],
+      gas: [false, 0],
     },
     totalCorrectAnswers: 0,
   },

src/data/quizzes/index.ts

@@ -53,6 +53,10 @@ const quizzes = {
     title: "learn-quizzes:page-assets-merge",
     questions: ["merge-1", "merge-2", "merge-3", "merge-4", "merge-5"],
   },
+  gas: {
+    title: "gas",
+    questions: ["gas-1", "gas-2", "gas-3", "gas-4", "gas-5"],
+  },
   daos: {
     title: "DAOs",
     questions: ["daos-1", "daos-2", "daos-3", "daos-4", "daos-5"],
@@ -163,6 +167,10 @@ const usingEthereumQuizzesRaw: QuizzesSection[] = [
     id: "staking-solo",
     level: "advanced",
   },
+  {
+    id: "gas",
+    level: "advanced",
+  },
 ]
 
 export const usingEthereumQuizzes: QuizzesSection[] = addNextQuiz(

src/data/quizzes/questionBank.ts

@@ -107,6 +107,13 @@ const questionBankConfig: QuestionBankConfig = {
     { totalAnswers: 2, correctAnswer: 2 },
     { totalAnswers: 4, correctAnswer: 2 },
   ],
+  gas: [
+    { totalAnswers: 4, correctAnswer: 4 },
+    { totalAnswers: 4, correctAnswer: 4 },
+    { totalAnswers: 4, correctAnswer: 1 },
+    { totalAnswers: 4, correctAnswer: 2 },
+    { totalAnswers: 4, correctAnswer: 2 },
+  ],
   daos: [
     { totalAnswers: 4, correctAnswer: 4 },
     { totalAnswers: 4, correctAnswer: 4 },

src/intl/en/learn-quizzes.json

@@ -326,6 +326,51 @@
   "merge-5-c-explanation": "Eth1 was the original name given to the execution layer, not the consensus layer.",
   "merge-5-d-label": "Staking",
   "merge-5-d-explanation": "Staking is depositing ETH into a smart contract to help secure the chain.",
+  "gas-1-prompt": "What are gas fees?",
+  "gas-1-a-label": "A fee associated with transactions and smart contract operations",
+  "gas-1-a-explanation": "Partially correct, gas fees represent the cost of transactions and smart contract operations.",
+  "gas-1-b-label": "The amount of gas used to perform an operation, multiplied by the cost per unit of gas",
+  "gas-1-b-explanation": "Partially correct. While true, it is not the best answer given the choices.",
+  "gas-1-c-label": "A payment that includes a priority fee to potentially expedite transaction processing",
+  "gas-1-c-explanation": "Partially correct, the total gas fee includes a base fee and a priority fee that can influence transaction processing speed",
+  "gas-1-d-label": "All of the above",
+  "gas-1-d-explanation": "Gas fees encompass all these aspects: they compensate for computation, apply to both transactions and smart contracts, and can include priority fees for faster inclusion.",
+  "gas-2-prompt": "Which of the following is the LEAST effective strategy for reducing the cost of gas?",
+  "gas-2-a-label": "Executing transactions during low-congestion periods",
+  "gas-2-a-explanation": "Timing transactions during off-peak hours can lower gas costs.",
+  "gas-2-b-label": "Waiting for gas prices to decrease",
+  "gas-2-b-explanation": "Waiting for gas prices to decrease is a valid strategy since gas fluctuates based on congestion.",
+  "gas-2-c-label": "Using layer 2 chains for lower fees",
+  "gas-2-c-explanation": "Layer 2 solutions reduce fees and are an effective way to save on gas.",
+  "gas-2-d-label": "Using complex smart contract logic that increases computational requirements",
+  "gas-2-d-explanation": "Complex smart contract logic increases gas costs by requiring more computation. Efficient design minimizes steps, storage, and redundant operations to reduce fees.",
+  "gas-3-prompt": "What causes gas fees to be high?",
+  "gas-3-a-label": "Network computation exceeding a specific threshold",
+  "gas-3-a-explanation": "When computation on Ethereum exceeds a threshold, gas fees increase, especially during high activity periods like dapps or NFT drops.",
+  "gas-3-b-label": "Validators increasing the base fee manually",
+  "gas-3-b-explanation": "Validators do not manually set base fees; they are adjusted by the protocol based on demand in previous block.",
+  "gas-3-c-label": "Well-written, optimized smart contracts",
+  "gas-3-c-explanation": "Well-written smart contract logic such as efficient use of storage and loops can lead to lower gas consumption.",
+  "gas-3-d-label": "A lack of available ETH on the network",
+  "gas-3-d-explanation": "Gas fees are not affected by the amount of ETH available on the network.",
+  "gas-4-prompt": "How do gas fees help keep Ethereum secure?",
+  "gas-4-a-label": "By incentivizing validators to act honestly",
+  "gas-4-a-explanation": "Validators are compensated in a few ways, but gas fees primarily discourage spam and excessive resource use.",
+  "gas-4-b-label": "By disincentivizing spam and malicious activity with financial costs",
+  "gas-4-b-explanation": "Gas fees make spam or malicious activity expensive, preventing abuse and helping maintain network stability.",
+  "gas-4-c-label": "By ensuring transactions are processed in order of priority",
+  "gas-4-c-explanation": "Priority can be determined by the tip, not the gas fees themselves.",
+  "gas-4-d-label": "By increasing the total amount of ETH in circulation",
+  "gas-4-d-explanation": "The base fee (part of the total gas fee) is burned, reducing ETH in circulation, not increasing it",
+  "gas-5-prompt": "How are gas fees calculated?",
+  "gas-5-a-label": "Gas price × transaction size",
+  "gas-5-a-explanation": "Gas fees are based on computation, not transaction size.",
+  "gas-5-b-label": "Units of gas used × (base fee + priority fee)",
+  "gas-5-b-explanation": "Gas fees are determined using the formula: units of gas used × (base fee + priority fee).",
+  "gas-5-c-label": "Block size × validator tip cap",
+  "gas-5-c-explanation": "Block size does not directly factor into this formula.",
+  "gas-5-d-label": "Base fee + priority fee + tip",
+  "gas-5-d-explanation": "The base fee and priority fee are part of the formula; the tip is the priority fee.",
   "daos-1-prompt": "What is true about DAOs?",
   "daos-1-a-label": "DAOs are collectively owned via governance tokens",
   "daos-1-a-explanation": "DAOs are collectively owned, but that’s not the only correct statement.",
@@ -614,4 +659,4 @@
   "defi-5-c-explanation": "This is incorrect. Bitcoin is a simple network for storing value, not for running advanced programs. DeFi requires a more flexible system, like Ethereum, that can run complex programs to handle loans and trades automatically.",
   "defi-5-d-label": "Traditional financial institutions",
   "defi-5-d-explanation": "This is incorrect. DeFi apps don’t need traditional financial institutions. They use blockchain programs called smart contracts to handle transactions automatically."
-}
+}

src/intl/en/page-learn.json

@@ -121,4 +121,4 @@
   "unchained-description": "Dives deep into the people building the decentralized internet, the details of this technology that could underpin our future, and some of the thorniest topics in crypto, such as regulation, security and privacy",
   "the-daily-gwei-title": "The Daily Gwei",
   "the-daily-gwei-description": "Ethereum news recaps, updates and analysis"
-}
+}

src/lib/utils/translations.ts

@@ -229,7 +229,8 @@ const getRequiredNamespacesForPath = (relativePath: string) => {
     path.startsWith("/what-is-ethereum/") ||
     path.startsWith("/quizzes/") ||
     path.startsWith("/stablecoins/") ||
-    path.startsWith("/defi/")
+    path.startsWith("/defi/") ||
+    path.startsWith("/gas/")
   ) {
     requiredNamespaces = [...requiredNamespaces, "learn-quizzes"]
   }