a
/
otterscan
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Merge branch 'feature/erigon-health-check' into develop

This commit is contained in:
Willian Mitsuda 2021-07-12 17:12:30 -03:00
parent 2b0505584e 337eecee68
commit 931629d16e
8 changed files with 297 additions and 88 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

15
src/App.tsx
View File

@ -3,6 +3,9 @@ import { BrowserRouter as Router, Switch, Route } from "react-router-dom";
import Home from "./Home";
import Search from "./Search";
import Title from "./Title";
import ConnectionErrorPanel from "./ConnectionErrorPanel";
import Footer from "./Footer";
import { ConnectionStatus } from "./types";
import { RuntimeContext, useRuntime } from "./useRuntime";
const Block = React.lazy(() => import("./Block"));
@ -15,7 +18,14 @@ const App = () => {
return (
<Suspense fallback={<>LOADING</>}>
{runtime.connStatus !== ConnectionStatus.CONNECTED ? (
<ConnectionErrorPanel
connStatus={runtime.connStatus}
config={runtime.config}
/>
) : (
<RuntimeContext.Provider value={runtime}>
<div className="h-screen flex flex-col">
<Router>
<Switch>
<Route path="/" exact>
@ -25,6 +35,7 @@ const App = () => {
<Search />
</Route>
<Route>
<div className="mb-auto">
<Title />
<Route path="/block/:blockNumberOrHash" exact>
<Block />
@ -38,10 +49,14 @@ const App = () => {
<Route path="/address/:addressOrName/:direction?">
<AddressTransactions />
</Route>
</div>
</Route>
</Switch>
</Router>
<Footer />
</div>
</RuntimeContext.Provider>
)}
</Suspense>
);
};

120
src/ConnectionErrorPanel.tsx Normal file
View File

@ -0,0 +1,120 @@
import React from "react";
import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
import {
faClock,
faCheckCircle,
faTimesCircle,
} from "@fortawesome/free-solid-svg-icons";
import { ConnectionStatus } from "./types";
import { OtterscanConfig } from "./useConfig";
type ConnectionErrorPanelProps = {
connStatus: ConnectionStatus;
config?: OtterscanConfig;
};
const ConnectionErrorPanel: React.FC<ConnectionErrorPanelProps> = ({
connStatus,
config,
}) => {
console.log("PRINT");
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"
msg="It does not seem to contain Otterscan patches"
>
Make sure you compiled rpcdaemon with 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);

18
src/Footer.tsx Normal file
View File

@ -0,0 +1,18 @@
import React, { useContext } from "react";
import { RuntimeContext } from "./useRuntime";
const Footer: React.FC = () => {
const { provider } = useContext(RuntimeContext);
return (
<div className="w-full px-2 py-1 border-t border-t-gray-100 text-xs bg-link-blue text-gray-200 text-center">
{provider ? (
<>Using Erigon node at {provider.connection.url}</>
) : (
<>Waiting for the provider...</>
)}
</div>
);
};
export default React.memo(Footer);

17
src/Home.tsx
View File

@ -31,11 +31,10 @@ const Home: React.FC = () => {
document.title = "Home | Otterscan";
return (
<div className="h-screen flex m-auto">
<div className="flex flex-col m-auto">
<div className="m-auto">
<Logo />
<form
className="flex flex-col m-auto"
className="flex flex-col"
onSubmit={handleSubmit}
autoComplete="off"
spellCheck={false}
@ -59,22 +58,12 @@ const Home: React.FC = () => {
className="mx-auto flex flex-col items-center space-y-1 mt-5 text-sm text-gray-500 hover:text-link-blue"
to={`/block/${latestBlock.number}`}
>
<div>
Latest block: {ethers.utils.commify(latestBlock.number)}
</div>
<div>Latest block: {ethers.utils.commify(latestBlock.number)}</div>
<Timestamp value={latestBlock.timestamp} />
</NavLink>
)}
<span className="mx-auto mt-5 text-xs text-gray-500">
{provider ? (
<>Using Erigon node at {provider.connection.url}</>
) : (
<>Waiting for the provider...</>
)}
</span>
</form>
</div>
</div>
);
};

2
src/Logo.tsx
View File

@ -1,7 +1,7 @@
import React from "react";
const Logo: React.FC = () => (
<div className="mx-auto -mt-32 mb-16 text-6xl text-link-blue font-title font-bold cursor-default flex items-center space-x-4">
<div className="mx-auto mb-16 text-6xl text-link-blue font-title font-bold cursor-default flex items-center space-x-4">
<img
className="rounded-full"
src="/otter.jpg"

8
src/types.ts
View File

@ -1,5 +1,13 @@
import { ethers, BigNumber } from "ethers";
export enum ConnectionStatus {
CONNECTING,
NOT_ETH_NODE,
NOT_ERIGON,
NOT_OTTERSCAN_PATCHED,
CONNECTED,
}
export type ProcessedTransaction = {
blockNumber: number;
timestamp: number;

75
src/useProvider.ts
View File

@ -1,24 +1,79 @@
import { useMemo } from "react";
import { useEffect, useState } from "react";
import { ethers } from "ethers";
import { ConnectionStatus } from "./types";
export const DEFAULT_ERIGON_URL = "http://127.0.0.1:8545";
export const useProvider = (
erigonURL?: string
): ethers.providers.JsonRpcProvider | undefined => {
): [ConnectionStatus, ethers.providers.JsonRpcProvider | undefined] => {
const [connStatus, setConnStatus] = useState<ConnectionStatus>(
ConnectionStatus.CONNECTING
);
if (erigonURL !== undefined) {
if (erigonURL === "") {
console.info(`Using default erigon URL: ${DEFAULT_ERIGON_URL}`);
erigonURL = DEFAULT_ERIGON_URL;
} else {
console.log(`Using configured erigon URL: ${erigonURL}`);
}
const provider = useMemo(
() => new ethers.providers.JsonRpcProvider(erigonURL, "mainnet"),
[erigonURL]
);
if (!erigonURL) {
return undefined;
}
return provider;
const [provider, setProvider] = useState<
ethers.providers.JsonRpcProvider | undefined
>();
useEffect(() => {
if (erigonURL === undefined) {
setConnStatus(ConnectionStatus.NOT_ETH_NODE);
setProvider(undefined);
return;
}
setConnStatus(ConnectionStatus.CONNECTING);
const tryToConnect = async () => {
const provider = new ethers.providers.JsonRpcProvider(
erigonURL,
"mainnet"
);
// Check if it is at least a regular ETH node
let blockNumber: number = 0;
try {
blockNumber = await provider.getBlockNumber();
} catch (err) {
console.log(err);
setConnStatus(ConnectionStatus.NOT_ETH_NODE);
setProvider(undefined);
return;
}
// Check if it is an Erigon node by probing a lightweight method
try {
await provider.send("erigon_getHeaderByNumber", [blockNumber]);
} catch (err) {
console.log(err);
setConnStatus(ConnectionStatus.NOT_ERIGON);
setProvider(undefined);
return;
}
// Check if it has Otterscan patches by probing a lightweight method
try {
// TODO: replace by a custom made method that works in all networks
await provider.send("ots_getTransactionTransfers", [
"0x793e079fbc427cba0857b4e878194ab508f33983f45415e50af3c3c0e662fdf3",
]);
setConnStatus(ConnectionStatus.CONNECTED);
setProvider(provider);
} catch (err) {
console.log(err);
setConnStatus(ConnectionStatus.NOT_OTTERSCAN_PATCHED);
setProvider(undefined);
}
};
tryToConnect();
}, [erigonURL]);
return [connStatus, provider];
};

12
src/useRuntime.ts
View File

@ -2,23 +2,27 @@ import React, { useMemo } from "react";
import { ethers } from "ethers";
import { OtterscanConfig, useConfig } from "./useConfig";
import { useProvider } from "./useProvider";
import { ConnectionStatus } from "./types";
export type OtterscanRuntime = {
config?: OtterscanConfig;
connStatus: ConnectionStatus;
provider?: ethers.providers.JsonRpcProvider;
};
export const useRuntime = (): OtterscanRuntime => {
const [configOK, config] = useConfig();
const provider = useProvider(configOK ? config?.erigonURL : undefined);
const [connStatus, provider] = useProvider(
configOK ? config?.erigonURL : undefined
);
const runtime = useMemo(
(): OtterscanRuntime => ({ config, provider }),
[config, provider]
(): OtterscanRuntime => ({ config, connStatus, provider }),
[config, connStatus, provider]
);
if (!configOK) {
return {};
return { connStatus: ConnectionStatus.CONNECTING };
}
return runtime;
};