From 8ad1c7186b17e44fc15132ea3e381deff26888e4 Mon Sep 17 00:00:00 2001
From: Willian Mitsuda <wmitsuda@gmail.com>
Date: Sat, 6 Aug 2022 23:32:08 -0300
Subject: [PATCH] Fix types for react 18

---
 src/ConnectionErrorPanel.tsx            | 50 +++++++++++++------------
 src/ContentFrame.tsx                    |  7 +++-
 src/SourcifyMenu.tsx                    |  4 +-
 src/StandardFrame.tsx                   |  4 +-
 src/StandardSubtitle.tsx                |  4 +-
 src/block/NavButton.tsx                 |  3 +-
 src/components/DecoratedAddressLink.tsx |  7 +++-
 src/components/ExternalLink.tsx         |  7 +++-
 src/components/ModeTab.tsx              |  7 +++-
 src/components/NavTab.tsx               |  7 +++-
 src/components/SelectionHighlighter.tsx |  9 ++---
 src/search/PageButton.tsx               |  4 +-
 src/search/UndefinedPageButton.tsx      | 12 ++----
 src/transaction/NavButton.tsx           |  3 +-
 14 files changed, 71 insertions(+), 57 deletions(-)

diff --git a/src/ConnectionErrorPanel.tsx b/src/ConnectionErrorPanel.tsx
index 80a8205..fb65cf1 100644
--- a/src/ConnectionErrorPanel.tsx
+++ b/src/ConnectionErrorPanel.tsx
@@ -1,4 +1,4 @@
-import React from "react";
+import React, { PropsWithChildren } from "react";
 import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
 import { faClock } from "@fortawesome/free-solid-svg-icons/faClock";
 import { faCheckCircle } from "@fortawesome/free-solid-svg-icons/faCheckCircle";
@@ -90,28 +90,30 @@ type StepProps = {
   msg: string;
 };
 
-const Step: React.FC<StepProps> = React.memo(({ type, msg, children }) => (
-  <>
-    <div className="flex space-x-2">
-      {type === "wait" && (
-        <span className="text-gray-600">
-          <FontAwesomeIcon icon={faClock} size="1x" />
-        </span>
-      )}
-      {type === "ok" && (
-        <span className="text-green-600">
-          <FontAwesomeIcon icon={faCheckCircle} size="1x" />
-        </span>
-      )}
-      {type === "error" && (
-        <span className="text-red-600">
-          <FontAwesomeIcon icon={faTimesCircle} size="1x" />
-        </span>
-      )}
-      <span>{msg}</span>
-    </div>
-    {children && <div className="ml-7 mt-4 text-sm">{children}</div>}
-  </>
-));
+const Step: React.FC<PropsWithChildren<StepProps>> = React.memo(
+  ({ type, msg, children }) => (
+    <>
+      <div className="flex space-x-2">
+        {type === "wait" && (
+          <span className="text-gray-600">
+            <FontAwesomeIcon icon={faClock} size="1x" />
+          </span>
+        )}
+        {type === "ok" && (
+          <span className="text-green-600">
+            <FontAwesomeIcon icon={faCheckCircle} size="1x" />
+          </span>
+        )}
+        {type === "error" && (
+          <span className="text-red-600">
+            <FontAwesomeIcon icon={faTimesCircle} size="1x" />
+          </span>
+        )}
+        <span>{msg}</span>
+      </div>
+      {children && <div className="ml-7 mt-4 text-sm">{children}</div>}
+    </>
+  )
+);
 
 export default React.memo(ConnectionErrorPanel);
diff --git a/src/ContentFrame.tsx b/src/ContentFrame.tsx
index 04c9412..7e57c09 100644
--- a/src/ContentFrame.tsx
+++ b/src/ContentFrame.tsx
@@ -1,10 +1,13 @@
-import React from "react";
+import React, { PropsWithChildren } from "react";
 
 type ContentFrameProps = {
   tabs?: boolean;
 };
 
-const ContentFrame: React.FC<ContentFrameProps> = ({ tabs, children }) => {
+const ContentFrame: React.FC<PropsWithChildren<ContentFrameProps>> = ({
+  tabs,
+  children,
+}) => {
   return tabs ? (
     <div className="divide-y border rounded-b-lg px-3 bg-white">{children}</div>
   ) : (
diff --git a/src/SourcifyMenu.tsx b/src/SourcifyMenu.tsx
index 7c614f0..ce23472 100644
--- a/src/SourcifyMenu.tsx
+++ b/src/SourcifyMenu.tsx
@@ -1,4 +1,4 @@
-import React from "react";
+import React, { PropsWithChildren } from "react";
 import { Menu } from "@headlessui/react";
 import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
 import { faBars } from "@fortawesome/free-solid-svg-icons/faBars";
@@ -41,7 +41,7 @@ type SourcifyMenuItemProps = {
   onClick: () => void;
 };
 
-const SourcifyMenuItem: React.FC<SourcifyMenuItemProps> = ({
+const SourcifyMenuItem: React.FC<PropsWithChildren<SourcifyMenuItemProps>> = ({
   checked = false,
   onClick,
   children,
diff --git a/src/StandardFrame.tsx b/src/StandardFrame.tsx
index 10b5fe8..4370cbc 100644
--- a/src/StandardFrame.tsx
+++ b/src/StandardFrame.tsx
@@ -1,6 +1,6 @@
-import React from "react";
+import React, { PropsWithChildren } from "react";
 
-const StandardFrame: React.FC = ({ children }) => (
+const StandardFrame: React.FC<PropsWithChildren> = ({ children }) => (
   <div className="flex-grow bg-gray-100 px-9 pt-3 pb-12">{children}</div>
 );
 
diff --git a/src/StandardSubtitle.tsx b/src/StandardSubtitle.tsx
index 21eda81..439eb4f 100644
--- a/src/StandardSubtitle.tsx
+++ b/src/StandardSubtitle.tsx
@@ -1,6 +1,6 @@
-import React from "react";
+import React, { PropsWithChildren } from "react";
 
-const StandardSubtitle: React.FC = ({ children }) => (
+const StandardSubtitle: React.FC<PropsWithChildren> = ({ children }) => (
   <div className="pb-2 text-xl text-gray-700">{children}</div>
 );
 
diff --git a/src/block/NavButton.tsx b/src/block/NavButton.tsx
index dcdc9a4..96e65e4 100644
--- a/src/block/NavButton.tsx
+++ b/src/block/NavButton.tsx
@@ -1,3 +1,4 @@
+import { PropsWithChildren } from "react";
 import { NavLink } from "react-router-dom";
 import { BlockTag } from "@ethersproject/abstract-provider";
 import { blockURL } from "../url";
@@ -8,7 +9,7 @@ type NavButtonProps = {
   urlBuilder?: (blockNumber: BlockTag) => string;
 };
 
-const NavButton: React.FC<NavButtonProps> = ({
+const NavButton: React.FC<PropsWithChildren<NavButtonProps>> = ({
   blockNum,
   disabled,
   urlBuilder,
diff --git a/src/components/DecoratedAddressLink.tsx b/src/components/DecoratedAddressLink.tsx
index d59ba9d..806d238 100644
--- a/src/components/DecoratedAddressLink.tsx
+++ b/src/components/DecoratedAddressLink.tsx
@@ -1,4 +1,4 @@
-import React, { useContext } from "react";
+import React, { PropsWithChildren, useContext } from "react";
 import { NavLink } from "react-router-dom";
 import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
 import { faStar } from "@fortawesome/free-solid-svg-icons/faStar";
@@ -156,7 +156,10 @@ type AddressLegendProps = {
   title: string;
 };
 
-const AddressLegend: React.FC<AddressLegendProps> = ({ title, children }) => (
+const AddressLegend: React.FC<PropsWithChildren<AddressLegendProps>> = ({
+  title,
+  children,
+}) => (
   <span
     className="text-xs text-gray-400 text-opacity-70 not-italic"
     title={title}
diff --git a/src/components/ExternalLink.tsx b/src/components/ExternalLink.tsx
index 8d38069..1d44eb0 100644
--- a/src/components/ExternalLink.tsx
+++ b/src/components/ExternalLink.tsx
@@ -1,4 +1,4 @@
-import React from "react";
+import React, { PropsWithChildren } from "react";
 import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
 import { faExternalLinkAlt } from "@fortawesome/free-solid-svg-icons/faExternalLinkAlt";
 
@@ -6,7 +6,10 @@ type ExternalLinkProps = {
   href: string;
 };
 
-const ExternalLink: React.FC<ExternalLinkProps> = ({ href, children }) => (
+const ExternalLink: React.FC<PropsWithChildren<ExternalLinkProps>> = ({
+  href,
+  children,
+}) => (
   <a
     className="text-link-blue hover:text-link-blue-hover"
     href={href}
diff --git a/src/components/ModeTab.tsx b/src/components/ModeTab.tsx
index 52ec3f9..e456652 100644
--- a/src/components/ModeTab.tsx
+++ b/src/components/ModeTab.tsx
@@ -1,11 +1,14 @@
-import React from "react";
+import React, { PropsWithChildren } from "react";
 import { Tab } from "@headlessui/react";
 
 type ModeTabProps = {
   disabled?: boolean | undefined;
 };
 
-const ModeTab: React.FC<ModeTabProps> = ({ disabled, children }) => (
+const ModeTab: React.FC<PropsWithChildren<ModeTabProps>> = ({
+  disabled,
+  children,
+}) => (
   <Tab
     className={({ selected }) =>
       `border rounded-lg px-2 py-1 bg-gray-100 ${
diff --git a/src/components/NavTab.tsx b/src/components/NavTab.tsx
index 6b3c66c..768e773 100644
--- a/src/components/NavTab.tsx
+++ b/src/components/NavTab.tsx
@@ -1,4 +1,4 @@
-import React, { Fragment } from "react";
+import React, { Fragment, PropsWithChildren } from "react";
 import { NavLink } from "react-router-dom";
 import { Tab } from "@headlessui/react";
 
@@ -6,7 +6,10 @@ type NavTabProps = {
   href: string;
 };
 
-const NavTab: React.FC<NavTabProps> = ({ href, children }) => (
+const NavTab: React.FC<PropsWithChildren<NavTabProps>> = ({
+  href,
+  children,
+}) => (
   <Tab as={Fragment}>
     <NavLink
       className={({ isActive }) =>
diff --git a/src/components/SelectionHighlighter.tsx b/src/components/SelectionHighlighter.tsx
index bebd606..a5a4149 100644
--- a/src/components/SelectionHighlighter.tsx
+++ b/src/components/SelectionHighlighter.tsx
@@ -1,4 +1,4 @@
-import React, { useMemo } from "react";
+import React, { PropsWithChildren, useMemo } from "react";
 import {
   useSelectionContext,
   OptionalSelection,
@@ -62,8 +62,8 @@ type HighlighterBoxProps = {
   deselect: () => void;
 };
 
-const HighlighterBox: React.FC<HighlighterBoxProps> = React.memo(
-  ({ selected, select, deselect, children }) => (
+const HighlighterBox: React.FC<PropsWithChildren<HighlighterBoxProps>> =
+  React.memo(({ selected, select, deselect, children }) => (
     <div
       className={`border border-dashed rounded hover:bg-transparent hover:border-transparent px-1 truncate ${
         selected ? "border-orange-400 bg-yellow-100" : "border-transparent"
@@ -73,7 +73,6 @@ const HighlighterBox: React.FC<HighlighterBoxProps> = React.memo(
     >
       {children}
     </div>
-  )
-);
+  ));
 
 export default SelectionHighlighter;
diff --git a/src/search/PageButton.tsx b/src/search/PageButton.tsx
index 375dc4c..fb6e1f1 100644
--- a/src/search/PageButton.tsx
+++ b/src/search/PageButton.tsx
@@ -1,4 +1,4 @@
-import React from "react";
+import React, { PropsWithChildren } from "react";
 import { NavLink } from "react-router-dom";
 
 type PageButtonProps = {
@@ -6,7 +6,7 @@ type PageButtonProps = {
   disabled?: boolean;
 };
 
-const PageButton: React.FC<PageButtonProps> = ({
+const PageButton: React.FC<PropsWithChildren<PageButtonProps>> = ({
   goToPage,
   disabled,
   children,
diff --git a/src/search/UndefinedPageButton.tsx b/src/search/UndefinedPageButton.tsx
index 102fc6d..13cc42f 100644
--- a/src/search/UndefinedPageButton.tsx
+++ b/src/search/UndefinedPageButton.tsx
@@ -1,4 +1,4 @@
-import React from "react";
+import React, { PropsWithChildren } from "react";
 import { NavLink } from "react-router-dom";
 
 type UndefinedPageButtonProps = {
@@ -8,13 +8,9 @@ type UndefinedPageButtonProps = {
   disabled?: boolean;
 };
 
-const UndefinedPageButton: React.FC<UndefinedPageButtonProps> = ({
-  address,
-  direction,
-  hash,
-  disabled,
-  children,
-}) => {
+const UndefinedPageButton: React.FC<
+  PropsWithChildren<UndefinedPageButtonProps>
+> = ({ address, direction, hash, disabled, children }) => {
   if (disabled) {
     return (
       <span className="bg-link-blue bg-opacity-10 text-gray-400 rounded-lg px-3 py-2 text-xs">
diff --git a/src/transaction/NavButton.tsx b/src/transaction/NavButton.tsx
index cad49d2..a274422 100644
--- a/src/transaction/NavButton.tsx
+++ b/src/transaction/NavButton.tsx
@@ -1,3 +1,4 @@
+import { PropsWithChildren } from "react";
 import { NavLink } from "react-router-dom";
 import { ChecksummedAddress } from "../types";
 import { addressByNonceURL } from "../url";
@@ -9,7 +10,7 @@ type NavButtonProps = {
   disabled?: boolean;
 };
 
-const NavButton: React.FC<NavButtonProps> = ({
+const NavButton: React.FC<PropsWithChildren<NavButtonProps>> = ({
   sender,
   nonce,
   disabled,