Merge branch 'feature/react18' into develop; fix #326

This commit is contained in:
Willian Mitsuda 2022-08-06 23:50:11 -03:00
commit 51f035b07c
18 changed files with 166 additions and 736 deletions

747
package-lock.json generated

File diff suppressed because it is too large Load Diff

View File

@ -4,7 +4,6 @@
"private": true, "private": true,
"license": "MIT", "license": "MIT",
"dependencies": { "dependencies": {
"@blackbox-vision/react-qr-reader": "^5.0.0",
"@chainlink/contracts": "^0.4.2", "@chainlink/contracts": "^0.4.2",
"@fontsource/fira-code": "^4.5.10", "@fontsource/fira-code": "^4.5.10",
"@fontsource/roboto": "^4.5.7", "@fontsource/roboto": "^4.5.7",
@ -16,23 +15,24 @@
"@fortawesome/free-solid-svg-icons": "^6.1.2", "@fortawesome/free-solid-svg-icons": "^6.1.2",
"@fortawesome/react-fontawesome": "^0.2.0", "@fortawesome/react-fontawesome": "^0.2.0",
"@headlessui/react": "^1.6.6", "@headlessui/react": "^1.6.6",
"@otterscan/react-qr-reader": "^5.2.0",
"@testing-library/jest-dom": "^5.16.4", "@testing-library/jest-dom": "^5.16.4",
"@testing-library/react": "^11.1.0", "@testing-library/react": "^11.1.0",
"@testing-library/user-event": "^12.1.10", "@testing-library/user-event": "^12.1.10",
"@types/jest": "^26.0.24", "@types/jest": "^26.0.24",
"@types/node": "^16.11.47", "@types/node": "^16.11.47",
"@types/react": "^17.0.45", "@types/react": "^18.0.15",
"@types/react-blockies": "^1.4.1", "@types/react-blockies": "^1.4.1",
"@types/react-dom": "^17.0.16", "@types/react-dom": "^18.0.6",
"@types/react-highlight": "^0.12.5", "@types/react-highlight": "^0.12.5",
"@types/react-syntax-highlighter": "^15.5.4", "@types/react-syntax-highlighter": "^15.5.4",
"chart.js": "^3.7.1", "chart.js": "^3.9.1",
"ethers": "^5.6.9", "ethers": "^5.6.9",
"highlightjs-solidity": "^2.0.5", "highlightjs-solidity": "^2.0.5",
"react": "^17.0.2", "react": "^18.2.0",
"react-blockies": "^1.4.1", "react-blockies": "^1.4.1",
"react-chartjs-2": "^4.0.0", "react-chartjs-2": "^4.3.1",
"react-dom": "^17.0.2", "react-dom": "^18.2.0",
"react-error-boundary": "^3.1.4", "react-error-boundary": "^3.1.4",
"react-helmet-async": "^1.3.0", "react-helmet-async": "^1.3.0",
"react-image": "^4.0.3", "react-image": "^4.0.3",

View File

@ -1,4 +1,4 @@
import React from "react"; import React, { PropsWithChildren } from "react";
import { FontAwesomeIcon } from "@fortawesome/react-fontawesome"; import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
import { faClock } from "@fortawesome/free-solid-svg-icons/faClock"; import { faClock } from "@fortawesome/free-solid-svg-icons/faClock";
import { faCheckCircle } from "@fortawesome/free-solid-svg-icons/faCheckCircle"; import { faCheckCircle } from "@fortawesome/free-solid-svg-icons/faCheckCircle";
@ -90,28 +90,30 @@ type StepProps = {
msg: string; msg: string;
}; };
const Step: React.FC<StepProps> = React.memo(({ type, msg, children }) => ( const Step: React.FC<PropsWithChildren<StepProps>> = React.memo(
<> ({ type, msg, children }) => (
<div className="flex space-x-2"> <>
{type === "wait" && ( <div className="flex space-x-2">
<span className="text-gray-600"> {type === "wait" && (
<FontAwesomeIcon icon={faClock} size="1x" /> <span className="text-gray-600">
</span> <FontAwesomeIcon icon={faClock} size="1x" />
)} </span>
{type === "ok" && ( )}
<span className="text-green-600"> {type === "ok" && (
<FontAwesomeIcon icon={faCheckCircle} size="1x" /> <span className="text-green-600">
</span> <FontAwesomeIcon icon={faCheckCircle} size="1x" />
)} </span>
{type === "error" && ( )}
<span className="text-red-600"> {type === "error" && (
<FontAwesomeIcon icon={faTimesCircle} size="1x" /> <span className="text-red-600">
</span> <FontAwesomeIcon icon={faTimesCircle} size="1x" />
)} </span>
<span>{msg}</span> )}
</div> <span>{msg}</span>
{children && <div className="ml-7 mt-4 text-sm">{children}</div>} </div>
</> {children && <div className="ml-7 mt-4 text-sm">{children}</div>}
)); </>
)
);
export default React.memo(ConnectionErrorPanel); export default React.memo(ConnectionErrorPanel);

View File

@ -1,10 +1,13 @@
import React from "react"; import React, { PropsWithChildren } from "react";
type ContentFrameProps = { type ContentFrameProps = {
tabs?: boolean; tabs?: boolean;
}; };
const ContentFrame: React.FC<ContentFrameProps> = ({ tabs, children }) => { const ContentFrame: React.FC<PropsWithChildren<ContentFrameProps>> = ({
tabs,
children,
}) => {
return tabs ? ( return tabs ? (
<div className="divide-y border rounded-b-lg px-3 bg-white">{children}</div> <div className="divide-y border rounded-b-lg px-3 bg-white">{children}</div>
) : ( ) : (

View File

@ -1,4 +1,4 @@
import React from "react"; import React, { PropsWithChildren } from "react";
import { Menu } from "@headlessui/react"; import { Menu } from "@headlessui/react";
import { FontAwesomeIcon } from "@fortawesome/react-fontawesome"; import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
import { faBars } from "@fortawesome/free-solid-svg-icons/faBars"; import { faBars } from "@fortawesome/free-solid-svg-icons/faBars";
@ -41,7 +41,7 @@ type SourcifyMenuItemProps = {
onClick: () => void; onClick: () => void;
}; };
const SourcifyMenuItem: React.FC<SourcifyMenuItemProps> = ({ const SourcifyMenuItem: React.FC<PropsWithChildren<SourcifyMenuItemProps>> = ({
checked = false, checked = false,
onClick, onClick,
children, children,

View File

@ -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> <div className="flex-grow bg-gray-100 px-9 pt-3 pb-12">{children}</div>
); );

View File

@ -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> <div className="pb-2 text-xl text-gray-700">{children}</div>
); );

View File

@ -1,3 +1,4 @@
import { PropsWithChildren } from "react";
import { NavLink } from "react-router-dom"; import { NavLink } from "react-router-dom";
import { BlockTag } from "@ethersproject/abstract-provider"; import { BlockTag } from "@ethersproject/abstract-provider";
import { blockURL } from "../url"; import { blockURL } from "../url";
@ -8,7 +9,7 @@ type NavButtonProps = {
urlBuilder?: (blockNumber: BlockTag) => string; urlBuilder?: (blockNumber: BlockTag) => string;
}; };
const NavButton: React.FC<NavButtonProps> = ({ const NavButton: React.FC<PropsWithChildren<NavButtonProps>> = ({
blockNum, blockNum,
disabled, disabled,
urlBuilder, urlBuilder,

View File

@ -1,4 +1,4 @@
import React, { useContext } from "react"; import React, { PropsWithChildren, useContext } from "react";
import { NavLink } from "react-router-dom"; import { NavLink } from "react-router-dom";
import { FontAwesomeIcon } from "@fortawesome/react-fontawesome"; import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
import { faStar } from "@fortawesome/free-solid-svg-icons/faStar"; import { faStar } from "@fortawesome/free-solid-svg-icons/faStar";
@ -156,7 +156,10 @@ type AddressLegendProps = {
title: string; title: string;
}; };
const AddressLegend: React.FC<AddressLegendProps> = ({ title, children }) => ( const AddressLegend: React.FC<PropsWithChildren<AddressLegendProps>> = ({
title,
children,
}) => (
<span <span
className="text-xs text-gray-400 text-opacity-70 not-italic" className="text-xs text-gray-400 text-opacity-70 not-italic"
title={title} title={title}

View File

@ -1,4 +1,4 @@
import React from "react"; import React, { PropsWithChildren } from "react";
import { FontAwesomeIcon } from "@fortawesome/react-fontawesome"; import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
import { faExternalLinkAlt } from "@fortawesome/free-solid-svg-icons/faExternalLinkAlt"; import { faExternalLinkAlt } from "@fortawesome/free-solid-svg-icons/faExternalLinkAlt";
@ -6,7 +6,10 @@ type ExternalLinkProps = {
href: string; href: string;
}; };
const ExternalLink: React.FC<ExternalLinkProps> = ({ href, children }) => ( const ExternalLink: React.FC<PropsWithChildren<ExternalLinkProps>> = ({
href,
children,
}) => (
<a <a
className="text-link-blue hover:text-link-blue-hover" className="text-link-blue hover:text-link-blue-hover"
href={href} href={href}

View File

@ -1,11 +1,14 @@
import React from "react"; import React, { PropsWithChildren } from "react";
import { Tab } from "@headlessui/react"; import { Tab } from "@headlessui/react";
type ModeTabProps = { type ModeTabProps = {
disabled?: boolean | undefined; disabled?: boolean | undefined;
}; };
const ModeTab: React.FC<ModeTabProps> = ({ disabled, children }) => ( const ModeTab: React.FC<PropsWithChildren<ModeTabProps>> = ({
disabled,
children,
}) => (
<Tab <Tab
className={({ selected }) => className={({ selected }) =>
`border rounded-lg px-2 py-1 bg-gray-100 ${ `border rounded-lg px-2 py-1 bg-gray-100 ${

View File

@ -1,4 +1,4 @@
import React, { Fragment } from "react"; import React, { Fragment, PropsWithChildren } from "react";
import { NavLink } from "react-router-dom"; import { NavLink } from "react-router-dom";
import { Tab } from "@headlessui/react"; import { Tab } from "@headlessui/react";
@ -6,7 +6,10 @@ type NavTabProps = {
href: string; href: string;
}; };
const NavTab: React.FC<NavTabProps> = ({ href, children }) => ( const NavTab: React.FC<PropsWithChildren<NavTabProps>> = ({
href,
children,
}) => (
<Tab as={Fragment}> <Tab as={Fragment}>
<NavLink <NavLink
className={({ isActive }) => className={({ isActive }) =>

View File

@ -1,4 +1,4 @@
import React, { useMemo } from "react"; import React, { PropsWithChildren, useMemo } from "react";
import { import {
useSelectionContext, useSelectionContext,
OptionalSelection, OptionalSelection,
@ -62,8 +62,8 @@ type HighlighterBoxProps = {
deselect: () => void; deselect: () => void;
}; };
const HighlighterBox: React.FC<HighlighterBoxProps> = React.memo( const HighlighterBox: React.FC<PropsWithChildren<HighlighterBoxProps>> =
({ selected, select, deselect, children }) => ( React.memo(({ selected, select, deselect, children }) => (
<div <div
className={`border border-dashed rounded hover:bg-transparent hover:border-transparent px-1 truncate ${ className={`border border-dashed rounded hover:bg-transparent hover:border-transparent px-1 truncate ${
selected ? "border-orange-400 bg-yellow-100" : "border-transparent" selected ? "border-orange-400 bg-yellow-100" : "border-transparent"
@ -73,7 +73,6 @@ const HighlighterBox: React.FC<HighlighterBoxProps> = React.memo(
> >
{children} {children}
</div> </div>
) ));
);
export default SelectionHighlighter; export default SelectionHighlighter;

View File

@ -1,5 +1,5 @@
import React from "react"; import React from "react";
import ReactDOM from "react-dom"; import { createRoot } from "react-dom/client";
import { HelmetProvider, Helmet } from "react-helmet-async"; import { HelmetProvider, Helmet } from "react-helmet-async";
import "@fontsource/space-grotesk/index.css"; import "@fontsource/space-grotesk/index.css";
import "@fontsource/roboto/index.css"; import "@fontsource/roboto/index.css";
@ -9,7 +9,9 @@ import "./index.css";
import App from "./App"; import App from "./App";
import reportWebVitals from "./reportWebVitals"; import reportWebVitals from "./reportWebVitals";
ReactDOM.render( const container = document.getElementById("root");
const root = createRoot(container!);
root.render(
<React.StrictMode> <React.StrictMode>
<HelmetProvider> <HelmetProvider>
<Helmet> <Helmet>
@ -23,8 +25,7 @@ ReactDOM.render(
</Helmet> </Helmet>
<App /> <App />
</HelmetProvider> </HelmetProvider>
</React.StrictMode>, </React.StrictMode>
document.getElementById("root")
); );
// If you want to start measuring performance in your app, pass a function // If you want to start measuring performance in your app, pass a function

View File

@ -1,8 +1,8 @@
import React from "react"; import React from "react";
import { useNavigate } from "react-router-dom"; import { useNavigate } from "react-router-dom";
import { isAddress } from "@ethersproject/address"; import { isAddress } from "@ethersproject/address";
import { QrReader } from "@blackbox-vision/react-qr-reader"; import { QrReader } from "@otterscan/react-qr-reader";
import { OnResultFunction } from "@blackbox-vision/react-qr-reader/dist-types/types"; import { OnResultFunction } from "@otterscan/react-qr-reader/dist-types/types";
import { BarcodeFormat } from "@zxing/library"; import { BarcodeFormat } from "@zxing/library";
import { Dialog } from "@headlessui/react"; import { Dialog } from "@headlessui/react";

View File

@ -1,4 +1,4 @@
import React from "react"; import React, { PropsWithChildren } from "react";
import { NavLink } from "react-router-dom"; import { NavLink } from "react-router-dom";
type PageButtonProps = { type PageButtonProps = {
@ -6,7 +6,7 @@ type PageButtonProps = {
disabled?: boolean; disabled?: boolean;
}; };
const PageButton: React.FC<PageButtonProps> = ({ const PageButton: React.FC<PropsWithChildren<PageButtonProps>> = ({
goToPage, goToPage,
disabled, disabled,
children, children,

View File

@ -1,4 +1,4 @@
import React from "react"; import React, { PropsWithChildren } from "react";
import { NavLink } from "react-router-dom"; import { NavLink } from "react-router-dom";
type UndefinedPageButtonProps = { type UndefinedPageButtonProps = {
@ -8,13 +8,9 @@ type UndefinedPageButtonProps = {
disabled?: boolean; disabled?: boolean;
}; };
const UndefinedPageButton: React.FC<UndefinedPageButtonProps> = ({ const UndefinedPageButton: React.FC<
address, PropsWithChildren<UndefinedPageButtonProps>
direction, > = ({ address, direction, hash, disabled, children }) => {
hash,
disabled,
children,
}) => {
if (disabled) { if (disabled) {
return ( return (
<span className="bg-link-blue bg-opacity-10 text-gray-400 rounded-lg px-3 py-2 text-xs"> <span className="bg-link-blue bg-opacity-10 text-gray-400 rounded-lg px-3 py-2 text-xs">

View File

@ -1,3 +1,4 @@
import { PropsWithChildren } from "react";
import { NavLink } from "react-router-dom"; import { NavLink } from "react-router-dom";
import { ChecksummedAddress } from "../types"; import { ChecksummedAddress } from "../types";
import { addressByNonceURL } from "../url"; import { addressByNonceURL } from "../url";
@ -9,7 +10,7 @@ type NavButtonProps = {
disabled?: boolean; disabled?: boolean;
}; };
const NavButton: React.FC<NavButtonProps> = ({ const NavButton: React.FC<PropsWithChildren<NavButtonProps>> = ({
sender, sender,
nonce, nonce,
disabled, disabled,