Merge branch 'feature/react18' into develop; fix #326
This commit is contained in:
commit
51f035b07c
File diff suppressed because it is too large
Load Diff
14
package.json
14
package.json
|
@ -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",
|
||||||
|
|
|
@ -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);
|
||||||
|
|
|
@ -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>
|
||||||
) : (
|
) : (
|
||||||
|
|
|
@ -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,
|
||||||
|
|
|
@ -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>
|
||||||
);
|
);
|
||||||
|
|
||||||
|
|
|
@ -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>
|
||||||
);
|
);
|
||||||
|
|
||||||
|
|
|
@ -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,
|
||||||
|
|
|
@ -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}
|
||||||
|
|
|
@ -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}
|
||||||
|
|
|
@ -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 ${
|
||||||
|
|
|
@ -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 }) =>
|
||||||
|
|
|
@ -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;
|
||||||
|
|
|
@ -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
|
||||||
|
|
|
@ -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";
|
||||||
|
|
||||||
|
|
|
@ -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,
|
||||||
|
|
|
@ -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">
|
||||||
|
|
|
@ -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,
|
||||||
|
|
Loading…
Reference in New Issue