Merge pull request #8203 from emmanuel-awosika/patch-34

Add Learn page on Wrapped Ether (WETH)

public/content/defi/index.md

@@ -324,6 +324,8 @@ You can think of DeFi in layers:
 3. The protocols – [smart contracts](/glossary/#smart-contract) that provide the functionality, for example, a service that allows for decentralized lending of assets.
 4. [The applications](/dapps/) – the products we use to manage and access the protocols.
 
+Note: much of DeFi uses the [ERC-20 standard](/glossary/#erc-20). Applications in DeFi use a wrapper for ETH called Wrapped Ether (WETH). [Learn more about wrapped ether](/wrapped-eth).
+
 ## Build DeFi {#build-defi}
 
 DeFi is an open-source movement. The DeFi protocols and applications are all open for you to inspect, fork, and innovate on. Because of this layered stack (they all share the same base blockchain and assets), protocols can be mixed and matched to unlock unique combo opportunities.

public/content/developers/docs/standards/tokens/erc-20/index.md

@@ -12,14 +12,13 @@ Tokens can represent virtually anything in Ethereum:
 
 - reputation points in an online platform
 - skills of a character in a game
-- lottery tickets
 - financial assets like a share in a company
 - a fiat currency like USD
 - an ounce of gold
 - and more...
 
 Such a powerful feature of Ethereum must be handled by a robust standard, right? That's exactly
-where the ERC-20 plays its role! This standard allows developers to build token applications that are interoperable with other products and services.
+where the ERC-20 plays its role! This standard allows developers to build token applications that are interoperable with other products and services. The ERC-20 standard is also used to provide additional functionality to [ether](/glossary/#ether).
 
 **What is ERC-20?**
 

public/content/wrapped-eth/index.md

@@ -0,0 +1,66 @@
+---
+title: What is Wrapped Ether (WETH)
+description: An introduction to Wrapped ether (WETH)—an ERC20-compatible wrapper for ether (ETH). 
+lang: en
+---
+
+# Wrapped ether (WETH) {#intro-to-weth}
+
+Ether (ETH) is the main currency of Ethereum. It's used for several purposes like staking, as a currency, and paying for gas fees for computation. **WETH is effectively an upgraded form of ETH with some additional functionality required by many applications and [ERC-20 tokens](/glossary/#erc-20)**, which are other types of digital assets on Ethereum. To work with these tokens, ETH must follow the same rules they do, known as the ERC-20 standard.
+
+To bridge this gap, wrapped ETH (WETH) was created. **Wrapped ETH is a smart contract that lets you deposit any amount of ETH into the contract and receive the same amount in minted WETH** that conforms to the ERC-20 token standard. WETH is a representation of ETH that allows you to interact with it as an ERC-20 token, not as the native asset ETH. You will still need native ETH to pay for gas fees, so make sure you save some when depositing. 
+
+You are able to unwrap WETH for ETH by using the WETH smart contract. You can redeem any amount of WETH with the WETH smart contract, and you will receive the same amount in ETH. The WETH deposited is then burned and taken out of the circulating supply of WETH.
+
+**Roughly ~3% of the circulating ETH supply is locked in the WETH token contract** making it one of the most used [smart contracts](/glossary/#smart-contract). WETH is especially important with users interacting with applications in decentralized finance (DeFi).
+
+## Why do we need to wrap ETH as an ERC-20? {#why-do-we-need-to-wrap-eth} 
+
+[ERC-20](/developers/docs/standards/tokens/erc-20/) defines a standard interface for transferable tokens, so anyone can create tokens that interact seamlessly with applications and tokens that use this standard in Ethereum's ecosystem. Since **ETH predates the ERC-20 standard**, ETH doesn't conform to this specification. This means **you can't easily** exchange ETH for other ERC-20 tokens or **use ETH in apps using the ERC-20 standard**. Wrapping ETH gives you the opportunity to do the following:
+
+- **Exchange ETH for ERC-20 tokens**: You cannot exchange ETH directly for other ERC-20 tokens. WETH is a representation of ether that complies with the ERC-20 fungible token standard and can be exchanged with other ERC-20 tokens. 
+
+- **Use ETH in dapps**: Because ETH isn’t ERC20-compatible, developers would need to create separate interfaces (one for ETH and another for ERC-20 tokens) in dapps. Wrapping ETH removes this obstacle and enables developers to handle ETH and other tokens within the same dapp. Many decentralized finance applications use this standard, and create markets for exchanging these tokens.
+
+## Wrapped ether (WETH) vs ether (ETH): What is the difference? {#weth-vs-eth-differences}
+
+
+|            | **Ether (ETH)**                                                                                                                                                                                                                 | **Wrapped Ether (WETH)**                                                                                                                                                                                                                                                                                    |
+|------------|-----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------|---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------|
+| Supply     | The supply of ETH is managed by the Ethereum protocol. The [issuance](/roadmap/merge/issuance) of ETH is handled by Ethereum validators when processing transactions and creating blocks.                           | WETH is an ERC-20 token whose supply is managed by a smart contract. New units of WETH are issued by the contract after it receives ETH deposits from users, or units of WETH are burned when a user wishes to redeem WETH for ETH.                                                                                                                                        |
+| Ownership  | Ownership is managed by the Ethereum protocol through your account balance.  | Ownership of WETH is managed by the WETH token smart contract, secured by the Ethereum protocol.                                                                                                                                         |
+| Gas        | Ether (ETH) is the accepted unit of payment for computation on the Ethereum network. Gas fees are denominated in gwei (a unit of ether).                                                                                    | Paying gas with WETH tokens is not natively supported.                                                                                                                                                                                              |
+
+## Frequently asked questions {#faq}
+
+<ExpandableCard title="Do you pay to wrap/unwrap ETH?" eventCategory="/wrapped-eth" eventName="clicked Do you pay to wrap/unwrap ETH?">
+
+You pay gas fees to wrap or unwrap ETH using the WETH contract.
+
+</ExpandableCard>
+
+<ExpandableCard title="Is WETH safe?" eventCategory="/wrapped-eth" eventName="clicked Is WETH safe?">
+
+WETH is generally considered secure because it is based on a simple, battle-tested smart contract. The WETH contract has also beeen formally verified, which is the highest security standard for smart contracts on Ethereum.
+
+</ExpandableCard>
+
+<ExpandableCard title="Why am I seeing different WETH tokens?" eventCategory="/wrapped-eth" eventName="clicked Why am I seeing different WETH tokens?">
+
+Besides the [canonical implementation of WETH](https://etherscan.io/token/0xc02aaa39b223fe8d0a0e5c4f27ead9083c756cc2) described on this page, there are other variants in the wild. These may be custom tokens created by app developers or versions issued on other blockchains, and may behave differently or have different security properties. **Always double-check the token information to know which WETH implementation you're interacting with.**
+
+</ExpandableCard>
+
+<ExpandableCard title="What are the WETH contracts on other networks?" eventCategory="/wrapped-eth" eventName="clicked What are the WETH contracts on other networks?">
+
+- [Ethereum Mainnet](https://etherscan.io/token/0xC02aaA39b223FE8D0A0e5C4F27eAD9083C756Cc2)
+- [Arbitrum](https://arbiscan.io/token/0x82af49447d8a07e3bd95bd0d56f35241523fbab1)
+- [Optimism](https://optimistic.etherscan.io/token/0x4200000000000000000000000000000000000006)
+
+</ExpandableCard>
+
+## Further reading {#further-reading}
+
+- [WTF is WETH?](https://weth.io/)
+- [WETH token information on Etherscan](https://etherscan.io/token/0xc02aaa39b223fe8d0a0e5c4f27ead9083c756cc2)
+- [Formal Verification of WETH](https://zellic.io/blog/formal-verification-weth)

src/intl/en/common.json

@@ -417,6 +417,7 @@
   "what-is-ether": "What is ether (ETH)?",
   "what-is-ethereum": "What is Ethereum?",
   "withdrawals": "Staking withdrawals",
+  "wrapped-ether": "Wrapped Ether",
   "yes": "Yes",
   "zero-knowledge-proofs": "Zero-knowledge proofs"
 }

src/intl/en/page-eth.json

@@ -55,6 +55,7 @@
   "page-eth-underpins": "ETH underpins the Ethereum financial system",
   "page-eth-underpins-desc": "Not satisfied with payments, the Ethereum community is building a whole financial system that's <a href=\"/glossary/#peer-to-peer-network\">peer-to-peer</a> and accessible to everyone.",
   "page-eth-underpins-desc-2": "You can use ETH as collateral to generate entirely different cryptocurrency tokens on Ethereum. Plus you can borrow, lend and earn interest on ETH and other ETH-backed tokens.",
+  "page-eth-weth": "Wrapped ether (WETH) is used to extend the functionality of ETH to work with other tokens and applications. <a href=\"/wrapped-eth\">Learn more about WETH</a>.",
   "page-eth-uses": "Uses for ETH grow every day",
   "page-eth-uses-desc": "Because Ethereum is programmable, developers can shape ETH in countless ways.",
   "page-eth-uses-desc-2": "Back in 2015, all you could do was send ETH from one Ethereum account to another. Here are just some of things you can do today.",

src/intl/en/page-get-eth.json

@@ -25,6 +25,7 @@
   "page-get-eth-dexs-desc": "Decentralized exchanges are open marketplaces for ETH and other tokens. They connect buyers and sellers directly.",
   "page-get-eth-dexs-desc-2": "Instead of using a trusted third party to safeguard funds in the transaction, they use code. The seller's ETH will only be transferred when payment is guaranteed. This type of code is known as a smart contract.",
   "page-get-eth-dexs-desc-3": "This means there are fewer geographical restrictions than with centralized alternatives. If someone is selling what you want and accepting a payment method you can provide, you’re good to go.",
+  "page-get-eth-dexs-desc-4": "Note: many dexes use wrapped ether (WETH) to function. <a href=\"/wrapped-eth\">Learn more about wrapped ether</a>.",
   "page-get-eth-do-not-copy": "Example: Do not copy",
   "page-get-eth-exchanges-disclaimer": "We collected this information manually. If you spot something wrong, let us know at",
   "page-get-eth-exchanges-empty-state-text": "Enter your country of residence to see a list of exchanges you may be able to use",

src/layouts/Static.tsx

@@ -11,6 +11,7 @@ import DevconGrantsBanner from "@/components/DevconGrantsBanner"
 import EnergyConsumptionChart from "@/components/EnergyConsumptionChart"
 import FeedbackCard from "@/components/FeedbackCard"
 import GlossaryDefinition from "@/components/Glossary/GlossaryDefinition"
+import GlossaryTooltip from "@/components/Glossary/GlossaryTooltip"
 import { HubHero } from "@/components/Hero"
 import NetworkUpgradeSummary from "@/components/History/NetworkUpgradeSummary"
 import Link from "@/components/Link"
@@ -65,6 +66,7 @@ export const staticComponents = {
   Contributors,
   EnergyConsumptionChart,
   GlossaryDefinition,
+  GlossaryTooltip,
   Icon,
   Link,
   Logo,

src/lib/utils/gh.ts

@@ -13,12 +13,16 @@ const getGitLogFromPath = (path: string): string => {
 
 const extractDateFromGitLogInfo = (logInfo: string): string => {
   // Filter commit date in log and return date using ISOString format (same that GH API uses)
-  const lastCommitDate = logInfo
+  try {
+    const lastCommitDate = logInfo
     .split("\n")
     .filter((x) => x.startsWith("Date: "))[0]
     .slice("Date:".length)
     .trim()
   return new Date(lastCommitDate).toISOString()
+  } catch {
+    return new Date().toISOString()
+  }
 }
 
 // This util filters the git log to get the file last commit info, and then the commit date (last update)

src/lib/utils/md.ts

@@ -266,6 +266,7 @@ const getPostSlugs = (dir: string, files: string[] = []) => {
     "/terms-of-use",
     "/web3",
     "/whitepaper",
+    "/wrapped-eth",
     "/zero-knowledge-proofs",
   ]
 

src/pages/eth.tsx

@@ -468,6 +468,9 @@ const EthPage = () => {
               description={t("page-eth-whats-defi-description")}
               image={defi}
             />
+            <InfoBanner isWarning>
+              <Translation id="page-eth:page-eth-weth" />
+            </InfoBanner>
           </Box>
           <TextDivider />
           <Box>

src/pages/get-eth.tsx

@@ -41,7 +41,6 @@ import dapps from "@/public/doge-computer.png"
 import oneinch from "@/public/exchanges/1inch.png"
 import bancor from "@/public/exchanges/bancor.png"
 import kyber from "@/public/exchanges/kyber.png"
-import loopring from "@/public/exchanges/loopring.png"
 import hero from "@/public/get-eth.png"
 import wallet from "@/public/wallet.png"
 
@@ -367,6 +366,9 @@ const GetEthPage = ({
           <ButtonLink href="/wallets/find-wallet/">
             {t("page-get-eth-get-wallet-btn")}
           </ButtonLink>
+          <InfoBanner isWarning>
+            <Translation id="page-get-eth:page-get-eth-dexs-desc-4" />
+          </InfoBanner>
         </LeftColumn>
         <RightColumn>
           <OldHeading