Merge pull request #15160 from ethereum/tech-debt

Tech debt

Author: corwintines

next.config.js

@@ -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() {

public/content/developers/docs/design-and-ux/dex-design-best-practice/index.md

@@ -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!
 

public/content/developers/tutorials/erc-721-vyper-annotated-code/index.md

@@ -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

public/content/developers/tutorials/waffle-test-simple-smart-contract/index.md

@@ -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:
 

src/components/Contributors.tsx

@@ -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}

src/components/DataTable/index.tsx

@@ -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">

src/components/EventCard.tsx

@@ -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}

src/components/ListenToPlayer/PlayerWidget/index.tsx

@@ -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) => {

src/components/ListenToPlayer/index.tsx

@@ -88,12 +88,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(() => {

src/components/ProductTable/index.tsx

@@ -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