otterscan/src/ConnectionErrorPanel.tsx

118 lines
4.0 KiB
TypeScript
Raw Normal View History

import React 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";
import { faTimesCircle } from "@fortawesome/free-solid-svg-icons/faTimesCircle";
import { ConnectionStatus } from "./types";
import { OtterscanConfig } from "./useConfig";
type ConnectionErrorPanelProps = {
connStatus: ConnectionStatus;
config?: OtterscanConfig;
};
const ConnectionErrorPanel: React.FC<ConnectionErrorPanelProps> = ({
connStatus,
config,
}) => {
return (
<div className="h-screen flex flex-col bg-gray-300 font-sans">
<div className="m-auto h-60 text-gray-700 text-lg min-w-lg max-w-lg">
<Step type="wait" msg="Trying to connect to Erigon node..." />
<div className="flex space-x-2">
<span className="ml-7 text-base">{config?.erigonURL}</span>
</div>
{connStatus === ConnectionStatus.NOT_ETH_NODE && (
<Step type="error" msg="It does not seem to be an ETH node">
<p>Make sure your browser can access the URL above.</p>
<p>
If you want to customize the Erigon rpcdaemon endpoint, please
follow these{" "}
<a
href="https://github.com/wmitsuda/otterscan#run-otterscan-docker-image-from-docker-hub"
target="_blank"
rel="noreferrer noopener"
className="font-bold text-blue-800 hover:underline"
>
instructions
</a>
.
</p>
</Step>
)}
{connStatus === ConnectionStatus.NOT_ERIGON && (
<>
<Step type="ok" msg="It is an ETH node" />
<Step type="error" msg="It does not seem to be an Erigon node">
Make sure you rpcdaemon with Otterscan patches is up and running
and the <strong>erigon_</strong> namespace is enabled according to
the{" "}
<a
href="https://github.com/wmitsuda/otterscan#install-otterscan-patches-on-top-of-erigon"
target="_blank"
rel="noreferrer noopener"
className="font-bold text-blue-800 hover:underline"
>
instructions
</a>
.
</Step>
</>
)}
{connStatus === ConnectionStatus.NOT_OTTERSCAN_PATCHED && (
<>
<Step type="ok" msg="It is an Erigon node" />
<Step
type="error"
2021-07-15 05:40:11 +00:00
msg="It does not seem to contain up-to-date Otterscan patches"
>
2021-07-15 05:40:11 +00:00
Make sure you compiled rpcdaemon with compatible Otterscan patches
and enabled <strong>ots_</strong> namespace according to the{" "}
<a
href="https://github.com/wmitsuda/otterscan#install-otterscan-patches-on-top-of-erigon"
target="_blank"
rel="noreferrer noopener"
className="font-bold text-blue-800 hover:underline"
>
instructions
</a>
.
</Step>
</>
)}
</div>
</div>
);
};
type StepProps = {
type: "wait" | "ok" | "error";
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>}
</>
));
export default React.memo(ConnectionErrorPanel);