ethereum · corwintines · Mar 25, 2025 · Mar 24, 2025 · Mar 25, 2025 · Mar 25, 2025
@@ -81,6 +81,14 @@ module.exports = (phase, { defaultConfig }) => {
           protocol: "https",
           hostname: "crowdin-static.downloads.crowdin.com",
         },
+        {
+          protocol: "https",
+          hostname: "avatars.githubusercontent.com",
+        },
+        {
+          protocol: "https",
+          hostname: "coin-images.coingecko.com",
+        },
       ],
     },
     async headers() {

@@ -177,15 +177,15 @@ The law of proximity states that items that are close together are perceived as
 
 Ultimately, there are pluses and minuses for both options, but it is interesting how the trend appears to be towards token on the right.
 
-# Button behavior {#button-behavior}
+## Button behavior {#button-behavior}
 
 Don’t have a separate button for Approve. Also don’t have a separate click for Approve. The user wants to Swap, so just say “swap” on the button and initiate the approval as the first step. A modal can show progress with a stepper, or a simple “tx 1 of 2 - approving” notification.
 
 ![A UI with separate buttons for approve and swap](./14.png)
 
 ![A UI with one button that says approve](./15.png)
 
-## Button as contextual help {#button-as-contextual-help}
+### Button as contextual help {#button-as-contextual-help}
 
 The button can do double duty as an alert!
 

@@ -278,8 +278,7 @@ def supportsInterface(_interfaceID: bytes32) -> bool:
 ```
 
 In contrast to Python, Vyper is a [static typed language](https://wikipedia.org/wiki/Type_system#Static_type_checking).
-You can't declare a variable, or a function parameter, without identifying the [data
-type](https://vyper.readthedocs.io/en/latest/types.html). In this case the input parameter is `bytes32`, a 256-bit value
+You can't declare a variable, or a function parameter, without identifying the [data type](https://vyper.readthedocs.io/en/latest/types.html). In this case the input parameter is `bytes32`, a 256-bit value
 (256 bits is the native word size of the [Ethereum Virtual Machine](/developers/docs/evm/)). The output is a boolean
 value. By convention, the names of function parameters start with an underscore (`_`).
 
@@ -689,7 +688,7 @@ Anybody who is allowed to transfer a token is allowed to burn it. While a burn a
 transfer to the zero address, the zero address does not actually receives the token. This allows us to
 free up all the storage that was used for the token, which can reduce the gas cost of the transaction.
 
-# Using this Contract {#using-contract}
+## Using this Contract {#using-contract}
 
 In contrast to Solidity, Vyper does not have inheritance. This is a deliberate design choice to make the
 code clearer and therefore easier to secure. So to create your own Vyper ERC-721 contract you take [this

@@ -21,7 +21,7 @@ published: 2021-02-26
 - You have used some package managers like yarn or npm
 - You possess very basic knowledge of smart contracts and Solidity
 
-# Getting started {#getting-started}
+## Getting started {#getting-started}
 
 The tutorial demonstrates test setup and run using yarn, but there is no problem if you prefer npm - I will provide proper references to the official Waffle [documentation](https://ethereum-waffle.readthedocs.io/en/latest/index.html).
 
@@ -100,7 +100,7 @@ Testing with Waffle requires using Chai matchers and Mocha, so you need to [add]
 
 If you want to [execute](https://ethereum-waffle.readthedocs.io/en/latest/getting-started.html#running-tests) your tests, just run `yarn test` .
 
-# Testing {#testing}
+## Testing {#testing}
 
 Now create the `test` directory and create the new file `test\EtherSplitter.test.ts`.
 Copy the snippet below and paste it to our test file.
@@ -194,7 +194,7 @@ it("Reverts when Vei amount uneven", async () => {
 
 The test, if passed, will assure us that the transaction was reverted indeed. However, there must be also an exact match between the messages that we passed in `require` statement and the message we expect in `revertedWith`. If we go back to the code of EtherSplitter contract, in the `require` statement for the wei amount, we provide the message: 'Uneven wei amount not allowed'. This matches the message we expect in our test. If they were not equal, the test would fail.
 
-# Congratulations! {#congratulations}
+## Congratulations! {#congratulations}
 
 You've made your first big step towards testing smart contracts with Waffle! You might be interested in other Waffle tutorials:
 

@@ -3,6 +3,7 @@
 import { useEffect, useState } from "react"
 import shuffle from "lodash/shuffle"
 
+import { Image } from "@/components/Image"
 import { Flex } from "@/components/ui/flex"
 import InlineLink from "@/components/ui/Link"
 import { LinkBox, LinkOverlay } from "@/components/ui/link-box"
@@ -39,7 +40,7 @@ const Contributors = () => {
             className="m-2 max-w-[132px] transform shadow transition-transform duration-100 hover:scale-[1.02] hover:rounded hover:bg-background-highlight focus:scale-[1.02] focus:rounded"
             key={contributor.login}
           >
-            <img
+            <Image
               className="h-[132px] w-[132px]"
               src={contributor.avatar_url}
               alt={contributor.name}

@@ -97,7 +97,7 @@ const DataTable = <TData, TValue>({
     }
 
     previousExpandedRef.current = expanded
-  }, [expanded])
+  }, [expanded, matomoEventCategory, table])
 
   useEffect(() => {
     if (JSON.stringify(data) !== JSON.stringify(previousDataRef.current)) {
@@ -111,7 +111,7 @@ const DataTable = <TData, TValue>({
 
       return () => clearTimeout(timer)
     }
-  }, [data])
+  }, [data, table])
 
   return (
     <div className="relative">

@@ -45,6 +45,7 @@ const EventCard: React.FC<EventCardProps> = ({
       </CardHeader>
       <div className="flex items-center justify-center">
         {imageUrl ? (
+          // eslint-disable-next-line @next/next/no-img-element
           <img
             src={imageUrl}
             alt={title}

@@ -1,4 +1,4 @@
-import { useEffect, useRef, useState } from "react"
+import { useCallback, useEffect, useRef, useState } from "react"
 import { IoClose } from "react-icons/io5"
 
 import {
@@ -75,27 +75,33 @@ const PlayerWidget = ({
   const [showSpeedMenu, setShowSpeedMenu] = useState(false)
   const speedMenuRef = useRef<HTMLDivElement>(null)
 
-  const calculateNewTime = (clientX: number) => {
-    if (!scrubBarRef.current) return 0
-    const rect = scrubBarRef.current.getBoundingClientRect()
-    const position = Math.max(
-      0,
-      Math.min(1, (clientX - rect.left) / rect.width)
-    )
-    return duration * position
-  }
+  const calculateNewTime = useCallback(
+    (clientX: number) => {
+      if (!scrubBarRef.current) return 0
+      const rect = scrubBarRef.current.getBoundingClientRect()
+      const position = Math.max(
+        0,
+        Math.min(1, (clientX - rect.left) / rect.width)
+      )
+      return duration * position
+    },
+    [duration]
+  )
 
   const handleMouseDown = (e: React.MouseEvent<HTMLDivElement>) => {
     setIsDragging(true)
     const newTime = calculateNewTime(e.clientX)
     onSeek(newTime)
   }
 
-  const handleMouseMove = (e: MouseEvent) => {
-    if (!isDragging) return
-    const newTime = calculateNewTime(e.clientX)
-    onSeek(newTime)
-  }
+  const handleMouseMove = useCallback(
+    (e: MouseEvent) => {
+      if (!isDragging) return
+      const newTime = calculateNewTime(e.clientX)
+      onSeek(newTime)
+    },
+    [isDragging, calculateNewTime, onSeek]
+  )
 
   const handleMouseUp = () => {
     setIsDragging(false)
@@ -110,7 +116,7 @@ const PlayerWidget = ({
       document.removeEventListener("mousemove", handleMouseMove)
       document.removeEventListener("mouseup", handleMouseUp)
     }
-  }, [isDragging])
+  }, [handleMouseMove, isDragging])
 
   useEffect(() => {
     const handleClickOutside = (event: MouseEvent) => {

@@ -86,12 +86,14 @@ const ListenToPlayer = ({ slug }: { slug: string }) => {
       }
       audioPlayer.unload()
     }
+    // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [currentTrackIndex])
 
   useEffect(() => {
     if (sound && autoplay && isPlaying) {
       sound.play()
     }
+    // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [sound])
 
   useEffect(() => {

@@ -94,6 +94,7 @@ const ProductTable = <T,>({
       // TODO: Fix this, removed to avoid infinite re-renders
       // router.replace(pathname, undefined, { shallow: true })
     }
+    // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [router.query])
 
   // Update or remove preset filters

@@ -64,6 +64,7 @@ export const useQuizWidget = ({
     setQuizData(quiz)
   }
 
+  // eslint-disable-next-line react-hooks/exhaustive-deps
   useEffect(initialize, [quizKey])
 
   const currentQuestionIndex = userQuizProgress.length

@@ -1,3 +1,5 @@
+import { cn } from "@/lib/utils/cn"
+
 import { ButtonLink } from "./ui/buttons/Button"
 import { Flex } from "./ui/flex"
 import {
@@ -8,6 +10,7 @@ import {
   TableHeader,
   TableRow,
 } from "./ui/table"
+import { Image } from "./Image"
 
 import { useRtlFlip } from "@/hooks/useRtlFlip"
 import { useTranslation } from "@/hooks/useTranslation"
@@ -31,7 +34,7 @@ const StablecoinsTable = ({
   content,
   hasError,
 }: StablecoinsTableProps) => {
-  const { flipForRtl } = useRtlFlip()
+  const { twFlipForRtl } = useRtlFlip()
   const { t } = useTranslation("page-stablecoins")
 
   const stablecoinsType = {
@@ -51,9 +54,7 @@ const StablecoinsTable = ({
 
           {content && content[0]?.url && (
             <TableHead className="text-right font-normal">
-              <span className="inline-block" style={{ transform: flipForRtl }}>
-                ↗
-              </span>
+              <span className={cn("inline-block", twFlipForRtl)}>↗</span>
             </TableHead>
           )}
         </TableRow>
@@ -71,7 +72,7 @@ const StablecoinsTable = ({
           <TableRow key={idx}>
             <TableCell>
               <Flex>
-                {image && <img src={image} alt="" className="me-4 h-6 w-6" />}
+                {image && <Image src={image} alt="" className="me-4 h-6 w-6" />}
                 <>{name}</>
               </Flex>
             </TableCell>

@@ -1,12 +1,18 @@
-import { useEffect, useState } from "react"
+import { useEffect, useMemo, useState } from "react"
 
 import BannerNotification from "@/components/Banners/BannerNotification"
 
 export const CountdownBanner = () => {
   const [countdown, setCountdown] = useState("")
 
-  const translatathonStartDate = new Date("August 9, 2024 12:00:00 UTC")
-  const translatathonEndDate = new Date("August 18, 2024 12:00:00 UTC")
+  const translatathonStartDate = useMemo(
+    () => new Date("August 9, 2024 12:00:00 UTC"),
+    []
+  )
+  const translatathonEndDate = useMemo(
+    () => new Date("August 18, 2024 12:00:00 UTC"),
+    []
+  )
 
   const calculateCountdown = (targetDate: Date) => {
     const currentTime = new Date()
@@ -36,7 +42,7 @@ export const CountdownBanner = () => {
     return () => {
       clearInterval(interval)
     }
-  }, [])
+  }, [translatathonEndDate, translatathonStartDate])
 
   return new Date() < translatathonStartDate ? (
     <>

@@ -6,14 +6,14 @@ export const ExpandIcon = createIconBase({
   children: (
     <g>
       <path
-        fill-rule="evenodd"
-        clip-rule="evenodd"
+        fillRule="evenodd"
+        clipRule="evenodd"
         d="M5.82869 10.1713C5.63343 9.97609 5.31685 9.97609 5.12159 10.1713L1.02539 14.2675L1.02539 11.4998C1.02539 11.2236 0.801534 10.9998 0.525392 10.9998C0.249249 10.9998 0.0253906 11.2236 0.025391 11.4998L0.0253906 15.4746C0.0253906 15.7508 0.249249 15.9747 0.525391 15.9747L4.50023 15.9746C4.77637 15.9746 5.00023 15.7508 5.00023 15.4746C5.00023 15.1985 4.77637 14.9746 4.50023 14.9746L1.7325 14.9746L5.82869 10.8785C6.02395 10.6832 6.02395 10.3666 5.82869 10.1713Z"
         fill="currentColor"
       />
       <path
-        fill-rule="evenodd"
-        clip-rule="evenodd"
+        fillRule="evenodd"
+        clipRule="evenodd"
         d="M10.1718 5.82865C10.3671 6.02391 10.6836 6.02391 10.8789 5.82865L14.9751 1.73246L14.9751 4.50023C14.9751 4.77637 15.199 5.00023 15.4751 5.00023C15.7512 5.00023 15.9751 4.77637 15.9751 4.50023L15.9751 0.52535C15.9751 0.249208 15.7512 0.0253496 15.4751 0.0253496L11.5003 0.0253525C11.2241 0.0253523 11.0003 0.249211 11.0003 0.525353C11.0003 0.801496 11.2241 1.02535 11.5003 1.02535L14.268 1.02535L10.1718 5.12154C9.97653 5.31681 9.97653 5.63339 10.1718 5.82865Z"
         fill="currentColor"
       />

@@ -9,8 +9,8 @@ export const BedrockGlyphIcon = createIconBase({
   ...commonIconDefaultAttrs,
   children: (
     <path
-      fill-rule="evenodd"
-      clip-rule="evenodd"
+      fillRule="evenodd"
+      clipRule="evenodd"
       d="M6.48604 8.40251L12.6413 0L18.6196 4.9005L16.7115 4.56347C15.3401 4.92407 14.9398 5.01208 14.5641 5.16179C14.2052 5.30479 13.8687 5.5041 12.7298 6.05105C12.0417 6.38033 10.851 7.47226 9.84519 8.3946C9.14705 9.03481 8.53801 9.59331 8.24799 9.75838C7.61707 10.1187 6.48604 8.40251 6.48604 8.40251ZM6.07831 11.5752L3.3546 15.6777L5.99752 18.8195L10.0562 20.094L16.7077 14.3877L20.6202 12.106L23.3593 10.8663L19.1852 7.41079C19.1852 7.41079 13.9686 7.74007 12.0759 10.1225C12.0759 10.1225 8.42501 13.6943 7.83641 13.2333L6.07831 11.5752ZM2.88529 19.478L0 23.8323L0.188505 25.44L3.94323 28.4268C3.94323 28.4268 8.00956 31.6808 10.2024 31.9985C10.5492 32.0484 12.297 30.8408 14.526 29.3007L14.526 29.3007C16.9705 27.6118 19.9936 25.523 22.3821 24.2546C26.0907 22.2866 28.2527 21.5389 28.2527 21.5389L33 22.4803L23.9517 13.7485C23.9517 13.7485 17.4271 17.82 15.8652 19.4741C14.2995 21.1283 10.1908 24.1073 10.1908 24.1073L5.75519 22.7437L2.88529 19.478Z"
     />
   ),

@@ -6,8 +6,8 @@ export const EthpoolGlyphIcon = createIconBase({
   className: "size-[1em]",
   children: (
     <path
-      fill-rule="evenodd"
-      clip-rule="evenodd"
+      fillRule="evenodd"
+      clipRule="evenodd"
       d="M16.5137 0.934937C7.67712 0.934937 0.513672 8.09838 0.513672 16.9349C0.513672 25.7715 7.67712 32.9349 16.5137 32.9349C25.3502 32.9349 32.5137 25.7715 32.5137 16.9349C32.5137 8.09838 25.3502 0.934937 16.5137 0.934937ZM8.45654 18.2932L16.5142 23.0567L24.5716 18.2932L16.5139 2.59056L8.45654 18.2932ZM15.3076 10.2465L11.7394 17.4087L15.3076 19.5181V10.2465ZM17.7516 19.4998V10.3088L21.2887 17.4087L17.7516 19.4998ZM28.5078 23.9222L16.5141 31.2786L4.52031 23.9222V18.9501L5.71285 18.1354L16.5141 24.7125L27.3153 18.1354L28.5078 18.9501V23.9222ZM15.2911 26.6749L5.98952 21.0989V22.8593L15.2911 28.4506V26.6749ZM17.7051 26.6749L27.0067 21.0989V22.8593L17.7051 28.4506V26.6749Z"
       fill="currentColor"
     />

@@ -56,7 +56,7 @@ export const BaseLink = forwardRef<HTMLAnchorElement, LinkProps>(function Link(
   const { twFlipForRtl } = useRtlFlip()
 
   if (!href) {
-    console.warn("Link component is missing href prop")
+    console.warn(`Link component missing href prop, pathname: ${pathname}`)
     return <a {...props} />
   }
 

@@ -2,6 +2,7 @@ import { cacheAsyncFn } from "./cacheAsyncFn"
 import { loadMockData } from "./loadMockData"
 
 const USE_MOCK_DATA = process.env.USE_MOCK_DATA === "true"
+if (USE_MOCK_DATA) console.warn("Using mock data")
 
 type DataLoaderFunction<T> = () => Promise<T>
 
@@ -28,7 +29,6 @@ export function dataLoader<T extends unknown[]>(
   },
   cacheTimeout?: number
 ): () => Promise<T> {
-  if (USE_MOCK_DATA) console.warn("Using mock data")
   const cachedLoaders = loaders.map(([key, loader]) => {
     const cachedLoader = cacheAsyncFn(key, loader, {
       cacheTimeout,