Merge remote-tracking branch 'upstream/dev' into refactor/what-is-ethereum-shadcn

Author: TylerAPfledderer

.eslintrc.json

@@ -42,7 +42,7 @@
           // Other relative imports. Put same-folder imports and `.` last.
           ["^\\./(?=.*/)(?!/?$)", "^\\.(?!/?$)", "^\\./?$"],
           // Style imports.
-          ["^.+s?css$"],
+          ["^.+\\.s?css$"],
           // Side effect imports.
           ["^\\u0000"]
         ]

public/content/contributing/translation-program/content-buckets/index.md

@@ -178,6 +178,7 @@ Below is a breakdown of the website pages each content bucket contains.
 - [Programming languages](/developers/docs/programming-languages/)
 - [Delphi](/developers/docs/programming-languages/delphi/)
 - [.NET](/developers/docs/programming-languages/dot-net/)
+- [Elixir](/developers/docs/programming-languages/elixir/)
 - [Golang](/developers/docs/programming-languages/golang/)
 - [Java](/developers/docs/programming-languages/java/)
 - [JavaScript](/developers/docs/programming-languages/javascript/)

public/content/contributing/translation-program/translatathon/details/index.md

@@ -123,6 +123,9 @@ EthStaker
 - https://crowdin.com/project/ethstaker-website
 - https://crowdin.com/project/ethstaker-knowledge-base
 
+Solidity Language Docs
+- https://crowdin.com/project/solidity-language-docs
+
 ### Evaluation process
 
 All translations will be subject to QA and feedback, where professional linguists will evaluate submissions based on quality and accuracy.

public/content/developers/docs/gas/index.md

@@ -124,6 +124,7 @@ Layer 2 scaling is a primary initiative to greatly improve gas costs, user exper
 If you want to monitor gas prices, so you can send your ETH for less, you can use many different tools such as:
 
 - [Etherscan](https://etherscan.io/gastracker) _Transaction gas price estimator_
+- [ETH Gas Tracker](https://www.ethgastracker.com/) _Monitor and track the Ethereum, and L2 gas prices to reduce transaction fees and save money_
 - [Blocknative ETH Gas Estimator](https://chrome.google.com/webstore/detail/blocknative-eth-gas-estim/ablbagjepecncofimgjmdpnhnfjiecfm) _Gas estimating Chrome extension supporting both Type 0 legacy transactions and Type 2 EIP-1559 transactions._
 - [Cryptoneur Gas Fees Calculator](https://www.cryptoneur.xyz/gas-fees-calculator) _Calculate gas fees in your local currency for different transaction types on Mainnet, Arbitrum, and Polygon._
 

public/content/developers/docs/programming-languages/elixir/index.md

@@ -0,0 +1,55 @@
+---
+title: Ethereum for Elixir Developers
+description: Learn how to develop for Ethereum using Elixir-based projects and tooling.
+lang: en
+incomplete: false
+---
+
+<FeaturedText>Learn how to develop for Ethereum using Elixir-based projects and tooling.</FeaturedText>
+
+Use Ethereum to create decentralized applications (or "dapps") that utilize the benefits of cryptocurrency and blockchain technology. These dapps can be trustless, meaning that once they are deployed to Ethereum, they will always run as programmed. They can control digital assets to create new kinds of financial applications. They can be decentralized, meaning that no single entity or person controls them and are nearly impossible to censor.
+
+## Getting started with smart contracts and the Solidity language {#getting-started-with-smart-contracts-and-solidity}
+
+**Take your first steps to integrating Elixir with Ethereum**
+
+Need a more basic primer first? Check out [ethereum.org/learn](/learn/) or [ethereum.org/developers](/developers/).
+
+- [Blockchain Explained](https://kauri.io/article/d55684513211466da7f8cc03987607d5/blockchain-explained)
+- [Understanding Smart Contracts](https://kauri.io/article/e4f66c6079e74a4a9b532148d3158188/ethereum-101-part-5-the-smart-contract)
+- [Write your First Smart Contract](https://kauri.io/article/124b7db1d0cf4f47b414f8b13c9d66e2/remix-ide-your-first-smart-contract)
+- [Learn How to Compile and Deploy Solidity](https://kauri.io/article/973c5f54c4434bb1b0160cff8c695369/understanding-smart-contract-compilation-and-deployment)
+
+## Beginner articles {#beginner-articles}
+
+- [Finally understanding Ethereum accounts](https://dev.to/q9/finally-understanding-ethereum-accounts-1kpe)
+- [Ethers — A first-class Ethereum Web3 library for Elixir](https://medium.com/@alisinabh/announcing-ethers-a-first-class-ethereum-web3-library-for-elixir-1d64e9409122)
+
+## Intermediate articles {#intermediate-articles}
+
+- [How to sign raw Ethereum contract transactions with Elixir](https://kohlerjp.medium.com/how-to-sign-raw-ethereum-contract-transactions-with-elixir-f8822bcc813b)
+- [Ethereum Smart Contracts and Elixir](https://medium.com/agile-alpha/ethereum-smart-contracts-and-elixir-c7c4b239ddb4)
+
+## Elixir projects and tools {#elixir-projects-and-tools}
+
+### Active {#active}
+
+- [block_keys](https://github.com/ExWeb3/block_keys) - _BIP32 & BIP44 Implementation in Elixir (Multi-Account Hierarchy for Deterministic Wallets)_
+- [ethereumex](https://github.com/mana-ethereum/ethereumex) - _Elixir JSON-RPC client for the Ethereum blockchain_
+- [ethers](https://github.com/ExWeb3/elixir_ethers) - _A comprehensive Web3 library for interacting with smart contracts on Ethereum using Elixir_
+- [ethers_kms](https://github.com/ExWeb3/elixir_ethers_kms) - _A KMS signer library for Ethers (sign transactions with AWS KMS)_
+- [ex_abi](https://github.com/poanetwork/ex_abi) - _Ethereum ABI parser/decoder/encoder implementation in Elixir_
+- [ex_keccak](https://github.com/ExWeb3/ex_keccak) - _Elixir library for computing Keccak SHA3-256 hashes using a NIF built tiny-keccak Rust crate_
+- [ex_rlp](https://github.com/mana-ethereum/ex_rlp) - _Elixir implementation of Ethereum's RLP (Recursive Length Prefix) encoding_
+
+### Archived / No longer maintained {#archived--no-longer-maintained}
+
+- [eth](https://hex.pm/packages/eth) - _Ethereum utilities for Elixir_
+- [exw3](https://github.com/hswick/exw3) - _High level Ethereum RPC Client for Elixir_
+- [mana](https://github.com/mana-ethereum/mana) - _Ethereum full node implementation written in Elixir_
+
+Looking for more resources? Check out [our Developer's home](/developers/).
+
+## Elixir community contributors {#elixir-community-contributors}
+
+The [Elixir's Slack #ethereum channel](https://elixir-lang.slack.com/archives/C5RPZ3RJL) is a host to a rapidly growing community and is the dedicated resource for discussions on any of the above projects and related topics.

public/content/developers/docs/programming-languages/index.md

@@ -16,6 +16,7 @@ Select your programming language of choice to find projects, resources, and virt
 - [Ethereum for Dart developers](/developers/docs/programming-languages/dart/)
 - [Ethereum for Delphi developers](/developers/docs/programming-languages/delphi/)
 - [Ethereum for .NET developers](/developers/docs/programming-languages/dot-net/)
+- [Ethereum for Elixir developers](/developers/docs/programming-languages/elixir/)
 - [Ethereum for Go developers](/developers/docs/programming-languages/golang/)
 - [Ethereum for Java developers](/developers/docs/programming-languages/java/)
 - [Ethereum for JavaScript developers](/developers/docs/programming-languages/javascript/)

src/components/AdoptionChart.tsx

@@ -1,56 +1,45 @@
 import { useTranslation } from "next-i18next"
 import { useTheme } from "next-themes"
-import { Box, type BoxProps, Flex } from "@chakra-ui/react"
 
 import type { ChildOnlyProp } from "@/lib/types"
 
+import { cn } from "@/lib/utils/cn"
+
+import { Flex } from "./ui/flex"
+
+type CellProps = ChildOnlyProp & {
+  color?: string
+  className?: string
+}
+
 const Column = ({ children }: ChildOnlyProp) => (
-  <Flex
-    flexDirection="column-reverse"
-    ms={{ base: 2, md: 4 }}
-    _first={{ ms: 0 }}
-  >
-    {children}
-  </Flex>
+  <Flex className="ms-2 flex-col-reverse first:ms-0 md:ms-4">{children}</Flex>
 )
 
-const Cell = ({ children, color, ...props }: BoxProps) => (
-  <Box
-    border="1px solid"
-    borderColor={color || "text"}
-    color={color || "text"}
-    py="0.8rem"
-    px={{ base: 2, md: "1.2rem" }}
-    fontSize="0.9rem"
-    fontWeight="bold"
-    lineHeight="none"
-    textAlign="center"
-    _last={{
-      borderTopStartRadius: "2xl",
-      borderTopEndRadius: "2xl",
-    }}
-    sx={{
-      "&:nth-child(-n + 2)": {
-        borderBottomStartRadius: "2xl",
-        borderBottomEndRadius: "2xl",
-      },
+const Cell = ({ children, color, className, ...props }: CellProps) => (
+  <div
+    className={cn(
+      "border border-solid px-2 py-[0.8rem] text-center text-[0.9rem] font-bold leading-none last:rounded-t-2xl md:px-[1.2rem] [&:nth-child(-n+2)]:rounded-bl-2xl [&:nth-child(-n+2)]:rounded-br-2xl",
+      className
+    )}
+    style={{
+      borderColor: color || "currentcolor",
+      color: color || "currentcolor",
     }}
     {...props}
   >
     {children}
-  </Box>
+  </div>
 )
 
 const ColumnName = ({ children }: ChildOnlyProp) => (
-  <Cell border="none" pt={6}>
-    {children}
-  </Cell>
+  <Cell className="border-none pt-6">{children}</Cell>
 )
 
 const AdoptionChart = () => {
   const { t } = useTranslation("page-what-is-ethereum")
-  const { theme } = useTheme()
-  const isDark = theme === "dark"
+  const { resolvedTheme } = useTheme()
+  const isDark = resolvedTheme === "dark"
 
   return (
     <Flex>

src/components/BannerGrid/index.tsx

@@ -1,117 +1,51 @@
 import React from "react"
-import { Box, Flex, Grid, useToken } from "@chakra-ui/react"
 
 import { ChildOnlyProp } from "@/lib/types"
 
+import { Flex } from "@/components/ui/flex"
+
+import { cn } from "@/lib/utils/cn"
+
 export const Banner = ({ children }: ChildOnlyProp) => {
   return (
-    <Flex
-      w="full"
-      background="bannerGridGradient"
-      direction={{ base: "column", lg: "row" }}
-      wrap="nowrap"
-      sx={{
-        h2: {
-          mt: 0,
-        },
-        ul: {
-          mb: 0,
-        },
-      }}
-    >
+    <Flex className="w-full flex-col flex-nowrap bg-banner-grid-gradient lg:flex-row [&_h2]:mt-0 [&_ul]:mb-0">
       {children}
     </Flex>
   )
 }
 
 export const BannerBody = ({ children }: ChildOnlyProp) => {
-  return (
-    <Box flex={4} p={10}>
-      {children}
-    </Box>
-  )
+  return <div className="w-full flex-[4] p-10">{children}</div>
 }
 
 export const BannerImage = ({ children }: ChildOnlyProp) => {
-  return (
-    <Flex justifyContent="end" flex={2} alignSelf="end">
-      {children}
-    </Flex>
-  )
+  return <Flex className="flex-[2] justify-end self-end">{children}</Flex>
 }
 
 export const BannerGrid = ({ children }: ChildOnlyProp) => {
   return (
-    <Grid
-      templateColumns={{
-        base: "repeat(1,1fr)",
-        md: "repeat(2,1fr)",
-        lg: "repeat(3,1fr)",
-      }}
-      templateRows={{
-        md: "repeat(3, 1fr)",
-        lg: "repeat(2, 1fr)",
-      }}
-      columnGap={0}
-      rowGap={0}
-    >
+    <div className="md:grid-rows-[repeat(3, 1fr)] lg:grid-rows-[repeat(2, 1fr)] grid w-full grid-cols-[repeat(1,1fr)] gap-0 md:grid-cols-[repeat(2,1fr)] lg:grid-cols-[repeat(3,1fr)]">
       {children}
-    </Grid>
+    </div>
   )
 }
 
 export const BannerGridCell = ({ children }: ChildOnlyProp) => {
-  const [medBp, lgBp] = useToken("breakpoints", ["md", "lg"])
-
   return (
     <Flex
-      px={{ base: 0, md: 12 }}
-      py={8}
-      direction="column"
-      borderTop="1px solid"
-      borderTopColor="searchBackground"
-      borderInlineStart={{ base: 0, md: "1px solid" }}
-      borderInlineStartColor={{ md: "searchBackground" }}
-      sx={{
-        "&:first-child": {
-          borderTop: 0,
-        },
-        [`@media (min-width: ${medBp})`]: {
-          "&:nth-child(-n + 2)": {
-            borderTop: 0,
-          },
-          "&:nth-child(2n + 1)": {
-            borderInlineStart: 0,
-          },
-        },
-        [`@media (min-width: ${lgBp})`]: {
-          "&:first-child": {
-            ps: 0,
-            borderInlineStart: 0,
-          },
-          "&:nth-child(-n + 2)": {
-            borderTop: "1px solid",
-            borderTopColor: "searchBackground",
-          },
-          "&:nth-child(2n + 1)": {
-            borderInlineStart: "1px solid",
-            borderInlineStartColor: "searchBackground",
-          },
-          "&:nth-child(-n + 3)": {
-            borderTop: 0,
-            justifyContent: "start",
-            paddingTop: 0,
-          },
-          "&:nth-child(3n + 1)": {
-            ps: 0,
-            borderInlineStart: 0,
-          },
-          "&:nth-child(n + 4)": {
-            justifyContent: "start",
-            paddingBottom: 0,
-          },
-        },
-      }}
+      className={cn(
+        "px-0 py-8 md:px-12",
+        "flex-col",
+        "border-t border-t-search-background",
+        "md:border-s md:border-s-search-background",
+        "first:border-t-0",
+        "lg:[&:first-child]:border-s-0",
+        "md:[&:nth-child(-n+2)]:border-t-0 lg:[&:nth-child(-n+2)]:border-t lg:[&:nth-child(-n+2)]:border-t-search-background",
+        "md:[&:nth-child(2n+1)]:border-s-0 lg:[&:nth-child(2n+1)]:border-s lg:[&:nth-child(2n+1)]:border-s-search-background",
+        "lg:[&:nth-child(-n+3)]:justify-start lg:[&:nth-child(-n+3)]:border-t-0 lg:[&:nth-child(-n+3)]:pt-0",
+        "lg:[&:nth-child(3n+1)]:border-s-0 lg:[&:nth-child(3n+1)]:ps-0",
+        "lg:[&:nth-child(n+4)]:justify-start lg:[&:nth-child(n+4)]:pb-0"
+      )}
     >
       {children}
     </Flex>

src/components/EnergyConsumptionChart/index.tsx

@@ -12,19 +12,16 @@ import ChartDataLabels from "chartjs-plugin-datalabels"
 import { useRouter } from "next/router"
 import { useTranslation } from "next-i18next"
 import { Bar } from "react-chartjs-2"
-import {
-  Box,
-  Center,
-  Text,
-  useBreakpointValue,
-  useColorModeValue,
-} from "@chakra-ui/react"
+import { useBreakpointValue } from "@chakra-ui/react"
 
 import type { Lang } from "@/lib/types"
 
+import { Center } from "@/components/ui/flex"
+
 import { wrapLabel } from "@/lib/utils/charts"
 import { isLangRightToLeft } from "@/lib/utils/translations"
 
+import useColorModeValue from "@/hooks/useColorModeValue"
 import { useIsClient } from "@/hooks/useIsClient"
 
 // ChartDataLabels required to display y-labels on top of bars
@@ -237,26 +234,19 @@ const EnergyConsumptionChart = () => {
   } satisfies ChartData
 
   return (
-    <Box my={16}>
-      <Center w="full" mb={{ base: 4, md: 6 }}>
-        <Box
-          position="relative"
-          maxW="500px"
-          m="auto"
-          w="80vw"
-          h={{ base: "300px", md: "400px" }}
-          mb={{ base: 4, md: 0 }}
-        >
+    <div className="my-16">
+      <Center className="mb-4 w-full md:mb-6">
+        <div className="relative m-auto mb-4 h-[300px] w-[80vw] max-w-[500px] md:mb-0 md:h-[400px]">
           {isClient && (
             <Bar options={chartOptions} data={chartData} updateMode="none" />
           )}
-        </Box>
+        </div>
       </Center>
 
-      <Text fontWeight="semibold" textAlign="center">
+      <p className="text-center font-semibold">
         {t("page-what-is-ethereum-energy-consumption-chart-legend")}
-      </Text>
-    </Box>
+      </p>
+    </div>
   )
 }
 

src/components/LanguagePicker/index.tsx

@@ -44,7 +44,7 @@ const LanguagePicker = ({
    * @param {string} event - The keydown event.
    */
   useEventListener("keydown", (e) => {
-    if (e.key !== "\\") return
+    if (e.key !== "\\" || e.metaKey || e.ctrlKey) return
     e.preventDefault()
     onOpen()
   })