Merge pull request #16389 from ethereum/what-is-ether

/what-is-ether page

Author: corwintines

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

@@ -0,0 +1,79 @@
+import { getLocale, getTranslations } from "next-intl/server"
+
+import {
+  Table,
+  TableBody,
+  TableCell,
+  TableHead,
+  TableHeader,
+  TableRow,
+} from "@/components/ui/table"
+
+import { formatSmallUSD } from "@/lib/utils/numbers"
+
+const GasTable = async () => {
+  const t = await getTranslations({
+    namespace: "page-what-is-ether",
+  })
+  const locale = await getLocale()
+
+  const etherscanApiKey = process.env.ETHERSCAN_API_KEY
+
+  const gwei = await fetch(
+    `https://api.etherscan.io/v2/api?chainid=1&module=gastracker&action=gasoracle&apikey=${etherscanApiKey}`
+  ).then((res) => res.json())
+  const ethPrice = await fetch(
+    `https://api.etherscan.io/v2/api?chainid=1&module=stats&action=ethprice&apikey=${etherscanApiKey}`
+  ).then((res) => res.json())
+
+  // Calculate transaction costs in USD
+  const gasPrice = parseFloat(gwei.result.ProposeGasPrice) // Gas price in gwei
+  const ethPriceUSD = parseFloat(ethPrice.result.ethusd) // ETH price in USD
+
+  const calculateCost = (gasUnits: number) => {
+    const costInETH = gasUnits * gasPrice * 1e-9 // Convert gwei to ETH
+    const costInUSD = costInETH * ethPriceUSD
+    return formatSmallUSD(costInUSD, locale)
+  }
+
+  return (
+    <Table variant="highlight-first-column">
+      <TableHeader>
+        <TableRow>
+          <TableHead>
+            {t("page-what-is-ether-gas-table-transaction-type")}
+          </TableHead>
+          <TableHead>
+            {t("page-what-is-ether-gas-table-typical-cost-range")}
+          </TableHead>
+          <TableHead>
+            {t("page-what-is-ether-gas-table-estimated-gas-units")}
+          </TableHead>
+        </TableRow>
+      </TableHeader>
+      <TableBody>
+        <TableRow>
+          <TableCell>{t("page-what-is-ether-gas-table-row-1-1")}</TableCell>
+          <TableCell>{calculateCost(21000)}</TableCell>
+          <TableCell>21,000 gas</TableCell>
+        </TableRow>
+        <TableRow>
+          <TableCell>{t("page-what-is-ether-gas-table-row-2-1")}</TableCell>
+          <TableCell>
+            {calculateCost(125000)} - {calculateCost(150000)}
+          </TableCell>
+          <TableCell>100,000 - 150,000 gas</TableCell>
+        </TableRow>
+        <TableRow>
+          <TableCell>{t("page-what-is-ether-gas-table-row-3-1")}</TableCell>
+          <TableCell>
+            {calculateCost(200000)} - {calculateCost(500000)}
+          </TableCell>
+          <TableCell>200,000 - 500,000 gas</TableCell>
+        </TableRow>
+      </TableBody>
+    </Table>
+  )
+}
+
+export default GasTable

app/[locale]/eth/page.tsx

@@ -6,7 +6,7 @@ import PageJsonLD from "@/components/PageJsonLD"
 
 import { normalizeUrlForJsonLd } from "@/lib/utils/url"
 
-export default async function EthPageJsonLD({
+export default async function WhatIsEtherPageJsonLD({
   locale,
   lastEditLocaleTimestamp,
   contributors,
@@ -16,24 +16,24 @@ export default async function EthPageJsonLD({
   contributors: FileContributor[]
 }) {
   const t = await getTranslations({
-    namespace: "page-eth",
+    namespace: "page-what-is-ether",
   })
 
-  const url = normalizeUrlForJsonLd(locale, `/eth/`)
+  const url = normalizeUrlForJsonLd(locale, `/what-is-ether/`)
 
   const contributorList = contributors.map((contributor) => ({
     "@type": "Person",
     name: contributor.login,
     url: contributor.html_url,
   }))
 
-  // JSON-LD structured data for the Ether/ETH page
+  // JSON-LD structured data for the What is Ether page
   const webPageJsonLd = {
     "@context": "https://schema.org",
     "@type": "WebPage",
     "@id": url,
-    name: t("page-eth-whats-eth"),
-    description: t("page-eth-is-money"),
+    name: t("page-what-is-ether-meta-title"),
+    description: t("page-what-is-ether-meta-description"),
     url: url,
     inLanguage: locale,
     contributor: contributorList,
@@ -56,19 +56,15 @@ export default async function EthPageJsonLD({
         {
           "@type": "ListItem",
           position: 2,
-          name: t("page-eth-whats-eth"),
-          item: normalizeUrlForJsonLd(locale, "/eth/"),
+          name: t("page-what-is-ether-title"),
+          item: url,
         },
       ],
     },
     publisher: {
       "@type": "Organization",
       name: "ethereum.org",
       url: "https://ethereum.org",
-      logo: {
-        "@type": "ImageObject",
-        url: "https://ethereum.org/images/eth-home-icon.png",
-      },
     },
     reviewedBy: {
       "@type": "Organization",
@@ -81,14 +77,13 @@ export default async function EthPageJsonLD({
     },
   }
 
-  // JSON-LD for the article content about Ether
+  // JSON-LD for the article content
   const articleJsonLd = {
     "@context": "https://schema.org",
     "@type": "Article",
-    headline: t("page-eth-whats-eth"),
-    description: t("page-eth-is-money"),
+    headline: t("page-what-is-ether-title"),
+    description: t("page-what-is-ether-meta-description"),
     image: "https://ethereum.org/images/eth.png",
-    contributor: contributorList,
     author: [
       {
         "@type": "Organization",
@@ -100,16 +95,8 @@ export default async function EthPageJsonLD({
       "@type": "Organization",
       name: "ethereum.org",
       url: "https://ethereum.org",
-      logo: {
-        "@type": "ImageObject",
-        url: "https://ethereum.org/images/eth-home-icon.png",
-      },
-    },
-    dateModified: lastEditLocaleTimestamp,
-    mainEntityOfPage: {
-      "@type": "WebPage",
-      "@id": url,
     },
+    contributor: contributorList,
     reviewedBy: {
       "@type": "Organization",
       name: "ethereum.org",
@@ -119,13 +106,21 @@ export default async function EthPageJsonLD({
         url: "https://ethereum.org/images/eth-home-icon.png",
       },
     },
-    about: {
-      "@type": "DigitalCurrency",
-      name: "Ether",
-      alternateName: ["ETH", "Ethereum"],
-      symbol: "ETH",
-      blockchain: "Ethereum",
-    },
+    about: [
+      {
+        "@type": "Thing",
+        name: "Ether (ETH)",
+        description:
+          "The native cryptocurrency of the Ethereum network used for transactions, staking, and powering applications",
+      },
+      {
+        "@type": "Thing",
+        name: "Ethereum",
+        description:
+          "A decentralized platform for applications and digital economies powered by smart contracts",
+      },
+    ],
+    dateModified: lastEditLocaleTimestamp,
   }
 
   return <PageJsonLD structuredData={[webPageJsonLd, articleJsonLd]} />