Merge branch 'feature/lazy-load-everything' into develop
This commit is contained in:
commit
e9712b18a5
|
@ -30,6 +30,7 @@
|
||||||
"@types/react": "^17.0.31",
|
"@types/react": "^17.0.31",
|
||||||
"@types/react-blockies": "^1.4.1",
|
"@types/react-blockies": "^1.4.1",
|
||||||
"@types/react-dom": "^17.0.10",
|
"@types/react-dom": "^17.0.10",
|
||||||
|
"@types/react-helmet": "^6.1.4",
|
||||||
"@types/react-highlight": "^0.12.5",
|
"@types/react-highlight": "^0.12.5",
|
||||||
"@types/react-router-dom": "^5.3.1",
|
"@types/react-router-dom": "^5.3.1",
|
||||||
"@types/react-syntax-highlighter": "^13.5.2",
|
"@types/react-syntax-highlighter": "^13.5.2",
|
||||||
|
@ -42,6 +43,7 @@
|
||||||
"react-chartjs-2": "^3.2.0",
|
"react-chartjs-2": "^3.2.0",
|
||||||
"react-dom": "^17.0.2",
|
"react-dom": "^17.0.2",
|
||||||
"react-error-boundary": "^3.1.3",
|
"react-error-boundary": "^3.1.3",
|
||||||
|
"react-helmet": "^6.1.0",
|
||||||
"react-image": "^4.0.3",
|
"react-image": "^4.0.3",
|
||||||
"react-router-dom": "^5.3.0",
|
"react-router-dom": "^5.3.0",
|
||||||
"react-scripts": "4.0.3",
|
"react-scripts": "4.0.3",
|
||||||
|
@ -3117,6 +3119,14 @@
|
||||||
"@types/react": "*"
|
"@types/react": "*"
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
|
"node_modules/@types/react-helmet": {
|
||||||
|
"version": "6.1.4",
|
||||||
|
"resolved": "https://registry.npmjs.org/@types/react-helmet/-/react-helmet-6.1.4.tgz",
|
||||||
|
"integrity": "sha512-jyx50RNZXVaTGHY3MsoRPNpeiVk8b0XTPgD/O6KHF6COTDnG/+lRjPYvTK5nfWtR3xDOux0w6bHLAsaHo2ZLTA==",
|
||||||
|
"dependencies": {
|
||||||
|
"@types/react": "*"
|
||||||
|
}
|
||||||
|
},
|
||||||
"node_modules/@types/react-highlight": {
|
"node_modules/@types/react-highlight": {
|
||||||
"version": "0.12.5",
|
"version": "0.12.5",
|
||||||
"resolved": "https://registry.npmjs.org/@types/react-highlight/-/react-highlight-0.12.5.tgz",
|
"resolved": "https://registry.npmjs.org/@types/react-highlight/-/react-highlight-0.12.5.tgz",
|
||||||
|
@ -14573,6 +14583,25 @@
|
||||||
"version": "6.0.9",
|
"version": "6.0.9",
|
||||||
"license": "MIT"
|
"license": "MIT"
|
||||||
},
|
},
|
||||||
|
"node_modules/react-fast-compare": {
|
||||||
|
"version": "3.2.0",
|
||||||
|
"resolved": "https://registry.npmjs.org/react-fast-compare/-/react-fast-compare-3.2.0.tgz",
|
||||||
|
"integrity": "sha512-rtGImPZ0YyLrscKI9xTpV8psd6I8VAtjKCzQDlzyDvqJA8XOW78TXYQwNRNd8g8JZnDu8q9Fu/1v4HPAVwVdHA=="
|
||||||
|
},
|
||||||
|
"node_modules/react-helmet": {
|
||||||
|
"version": "6.1.0",
|
||||||
|
"resolved": "https://registry.npmjs.org/react-helmet/-/react-helmet-6.1.0.tgz",
|
||||||
|
"integrity": "sha512-4uMzEY9nlDlgxr61NL3XbKRy1hEkXmKNXhjbAIOVw5vcFrsdYbH2FEwcNyWvWinl103nXgzYNlns9ca+8kFiWw==",
|
||||||
|
"dependencies": {
|
||||||
|
"object-assign": "^4.1.1",
|
||||||
|
"prop-types": "^15.7.2",
|
||||||
|
"react-fast-compare": "^3.1.1",
|
||||||
|
"react-side-effect": "^2.1.0"
|
||||||
|
},
|
||||||
|
"peerDependencies": {
|
||||||
|
"react": ">=16.3.0"
|
||||||
|
}
|
||||||
|
},
|
||||||
"node_modules/react-image": {
|
"node_modules/react-image": {
|
||||||
"version": "4.0.3",
|
"version": "4.0.3",
|
||||||
"resolved": "https://registry.npmjs.org/react-image/-/react-image-4.0.3.tgz",
|
"resolved": "https://registry.npmjs.org/react-image/-/react-image-4.0.3.tgz",
|
||||||
|
@ -14920,6 +14949,14 @@
|
||||||
"node": ">=0.10.0"
|
"node": ">=0.10.0"
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
|
"node_modules/react-side-effect": {
|
||||||
|
"version": "2.1.1",
|
||||||
|
"resolved": "https://registry.npmjs.org/react-side-effect/-/react-side-effect-2.1.1.tgz",
|
||||||
|
"integrity": "sha512-2FoTQzRNTncBVtnzxFOk2mCpcfxQpenBMbk5kSVBg5UcPqV9fRbgY2zhb7GTWWOlpFmAxhClBDlIq8Rsubz1yQ==",
|
||||||
|
"peerDependencies": {
|
||||||
|
"react": "^16.3.0 || ^17.0.0"
|
||||||
|
}
|
||||||
|
},
|
||||||
"node_modules/react-syntax-highlighter": {
|
"node_modules/react-syntax-highlighter": {
|
||||||
"version": "15.4.4",
|
"version": "15.4.4",
|
||||||
"resolved": "https://registry.npmjs.org/react-syntax-highlighter/-/react-syntax-highlighter-15.4.4.tgz",
|
"resolved": "https://registry.npmjs.org/react-syntax-highlighter/-/react-syntax-highlighter-15.4.4.tgz",
|
||||||
|
@ -21666,6 +21703,14 @@
|
||||||
"@types/react": "*"
|
"@types/react": "*"
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
|
"@types/react-helmet": {
|
||||||
|
"version": "6.1.4",
|
||||||
|
"resolved": "https://registry.npmjs.org/@types/react-helmet/-/react-helmet-6.1.4.tgz",
|
||||||
|
"integrity": "sha512-jyx50RNZXVaTGHY3MsoRPNpeiVk8b0XTPgD/O6KHF6COTDnG/+lRjPYvTK5nfWtR3xDOux0w6bHLAsaHo2ZLTA==",
|
||||||
|
"requires": {
|
||||||
|
"@types/react": "*"
|
||||||
|
}
|
||||||
|
},
|
||||||
"@types/react-highlight": {
|
"@types/react-highlight": {
|
||||||
"version": "0.12.5",
|
"version": "0.12.5",
|
||||||
"resolved": "https://registry.npmjs.org/@types/react-highlight/-/react-highlight-0.12.5.tgz",
|
"resolved": "https://registry.npmjs.org/@types/react-highlight/-/react-highlight-0.12.5.tgz",
|
||||||
|
@ -29370,6 +29415,22 @@
|
||||||
"react-error-overlay": {
|
"react-error-overlay": {
|
||||||
"version": "6.0.9"
|
"version": "6.0.9"
|
||||||
},
|
},
|
||||||
|
"react-fast-compare": {
|
||||||
|
"version": "3.2.0",
|
||||||
|
"resolved": "https://registry.npmjs.org/react-fast-compare/-/react-fast-compare-3.2.0.tgz",
|
||||||
|
"integrity": "sha512-rtGImPZ0YyLrscKI9xTpV8psd6I8VAtjKCzQDlzyDvqJA8XOW78TXYQwNRNd8g8JZnDu8q9Fu/1v4HPAVwVdHA=="
|
||||||
|
},
|
||||||
|
"react-helmet": {
|
||||||
|
"version": "6.1.0",
|
||||||
|
"resolved": "https://registry.npmjs.org/react-helmet/-/react-helmet-6.1.0.tgz",
|
||||||
|
"integrity": "sha512-4uMzEY9nlDlgxr61NL3XbKRy1hEkXmKNXhjbAIOVw5vcFrsdYbH2FEwcNyWvWinl103nXgzYNlns9ca+8kFiWw==",
|
||||||
|
"requires": {
|
||||||
|
"object-assign": "^4.1.1",
|
||||||
|
"prop-types": "^15.7.2",
|
||||||
|
"react-fast-compare": "^3.1.1",
|
||||||
|
"react-side-effect": "^2.1.0"
|
||||||
|
}
|
||||||
|
},
|
||||||
"react-image": {
|
"react-image": {
|
||||||
"version": "4.0.3",
|
"version": "4.0.3",
|
||||||
"resolved": "https://registry.npmjs.org/react-image/-/react-image-4.0.3.tgz",
|
"resolved": "https://registry.npmjs.org/react-image/-/react-image-4.0.3.tgz",
|
||||||
|
@ -29614,6 +29675,12 @@
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
|
"react-side-effect": {
|
||||||
|
"version": "2.1.1",
|
||||||
|
"resolved": "https://registry.npmjs.org/react-side-effect/-/react-side-effect-2.1.1.tgz",
|
||||||
|
"integrity": "sha512-2FoTQzRNTncBVtnzxFOk2mCpcfxQpenBMbk5kSVBg5UcPqV9fRbgY2zhb7GTWWOlpFmAxhClBDlIq8Rsubz1yQ==",
|
||||||
|
"requires": {}
|
||||||
|
},
|
||||||
"react-syntax-highlighter": {
|
"react-syntax-highlighter": {
|
||||||
"version": "15.4.4",
|
"version": "15.4.4",
|
||||||
"resolved": "https://registry.npmjs.org/react-syntax-highlighter/-/react-syntax-highlighter-15.4.4.tgz",
|
"resolved": "https://registry.npmjs.org/react-syntax-highlighter/-/react-syntax-highlighter-15.4.4.tgz",
|
||||||
|
|
|
@ -25,6 +25,7 @@
|
||||||
"@types/react": "^17.0.31",
|
"@types/react": "^17.0.31",
|
||||||
"@types/react-blockies": "^1.4.1",
|
"@types/react-blockies": "^1.4.1",
|
||||||
"@types/react-dom": "^17.0.10",
|
"@types/react-dom": "^17.0.10",
|
||||||
|
"@types/react-helmet": "^6.1.4",
|
||||||
"@types/react-highlight": "^0.12.5",
|
"@types/react-highlight": "^0.12.5",
|
||||||
"@types/react-router-dom": "^5.3.1",
|
"@types/react-router-dom": "^5.3.1",
|
||||||
"@types/react-syntax-highlighter": "^13.5.2",
|
"@types/react-syntax-highlighter": "^13.5.2",
|
||||||
|
@ -37,6 +38,7 @@
|
||||||
"react-chartjs-2": "^3.2.0",
|
"react-chartjs-2": "^3.2.0",
|
||||||
"react-dom": "^17.0.2",
|
"react-dom": "^17.0.2",
|
||||||
"react-error-boundary": "^3.1.3",
|
"react-error-boundary": "^3.1.3",
|
||||||
|
"react-helmet": "^6.1.0",
|
||||||
"react-image": "^4.0.3",
|
"react-image": "^4.0.3",
|
||||||
"react-router-dom": "^5.3.0",
|
"react-router-dom": "^5.3.0",
|
||||||
"react-scripts": "4.0.3",
|
"react-scripts": "4.0.3",
|
||||||
|
|
32
src/App.tsx
32
src/App.tsx
|
@ -11,11 +11,31 @@ import { RuntimeContext, useRuntime } from "./useRuntime";
|
||||||
import { AppConfig, AppConfigContext } from "./useAppConfig";
|
import { AppConfig, AppConfigContext } from "./useAppConfig";
|
||||||
import { SourcifySource } from "./url";
|
import { SourcifySource } from "./url";
|
||||||
|
|
||||||
const Block = React.lazy(() => import("./Block"));
|
const Block = React.lazy(
|
||||||
const BlockTransactions = React.lazy(() => import("./BlockTransactions"));
|
() => import(/* webpackChunkName: "block", webpackPrefetch: true */ "./Block")
|
||||||
const AddressTransactions = React.lazy(() => import("./AddressTransactions"));
|
);
|
||||||
const Transaction = React.lazy(() => import("./Transaction"));
|
const BlockTransactions = React.lazy(
|
||||||
const London = React.lazy(() => import("./special/london/London"));
|
() =>
|
||||||
|
import(
|
||||||
|
/* webpackChunkName: "blocktxs", webpackPrefetch: true */ "./BlockTransactions"
|
||||||
|
)
|
||||||
|
);
|
||||||
|
const AddressTransactions = React.lazy(
|
||||||
|
() =>
|
||||||
|
import(
|
||||||
|
/* webpackChunkName: "address", webpackPrefetch: true */ "./AddressTransactions"
|
||||||
|
)
|
||||||
|
);
|
||||||
|
const Transaction = React.lazy(
|
||||||
|
() =>
|
||||||
|
import(/* webpackChunkName: "tx", webpackPrefetch: true */ "./Transaction")
|
||||||
|
);
|
||||||
|
const London = React.lazy(
|
||||||
|
() =>
|
||||||
|
import(
|
||||||
|
/* webpackChunkName: "london", webpackPrefetch: true */ "./special/london/London"
|
||||||
|
)
|
||||||
|
);
|
||||||
|
|
||||||
const App = () => {
|
const App = () => {
|
||||||
const runtime = useRuntime();
|
const runtime = useRuntime();
|
||||||
|
@ -30,7 +50,7 @@ const App = () => {
|
||||||
}, [sourcifySource, setSourcifySource]);
|
}, [sourcifySource, setSourcifySource]);
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<Suspense fallback={<>LOADING</>}>
|
<Suspense fallback={null}>
|
||||||
{runtime.connStatus !== ConnectionStatus.CONNECTED ? (
|
{runtime.connStatus !== ConnectionStatus.CONNECTED ? (
|
||||||
<ConnectionErrorPanel
|
<ConnectionErrorPanel
|
||||||
connStatus={runtime.connStatus}
|
connStatus={runtime.connStatus}
|
||||||
|
|
|
@ -38,9 +38,9 @@ const Home: React.FC = () => {
|
||||||
document.title = "Home | Otterscan";
|
document.title = "Home | Otterscan";
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<div className="mx-auto flex flex-col h-full">
|
<div className="mx-auto flex flex-col flex-grow pb-5">
|
||||||
{isScanning && <CameraScanner turnOffScan={() => setScanning(false)} />}
|
{isScanning && <CameraScanner turnOffScan={() => setScanning(false)} />}
|
||||||
<div className="m-5 mb-10 flex items-end flex-grow max-h-72">
|
<div className="m-5 mb-10 flex items-end flex-grow max-h-64">
|
||||||
<Logo />
|
<Logo />
|
||||||
</div>
|
</div>
|
||||||
<form
|
<form
|
||||||
|
@ -98,7 +98,6 @@ const Home: React.FC = () => {
|
||||||
</NavLink>
|
</NavLink>
|
||||||
)}
|
)}
|
||||||
</div>
|
</div>
|
||||||
<div className="flex-grow pb-5"></div>
|
|
||||||
</div>
|
</div>
|
||||||
);
|
);
|
||||||
};
|
};
|
||||||
|
|
|
@ -5,8 +5,6 @@ import StandardFrame from "./StandardFrame";
|
||||||
import StandardSubtitle from "./StandardSubtitle";
|
import StandardSubtitle from "./StandardSubtitle";
|
||||||
import ContentFrame from "./ContentFrame";
|
import ContentFrame from "./ContentFrame";
|
||||||
import NavTab from "./components/NavTab";
|
import NavTab from "./components/NavTab";
|
||||||
import Details from "./transaction/Details";
|
|
||||||
import Logs from "./transaction/Logs";
|
|
||||||
import { RuntimeContext } from "./useRuntime";
|
import { RuntimeContext } from "./useRuntime";
|
||||||
import { SelectionContext, useSelection } from "./useSelection";
|
import { SelectionContext, useSelection } from "./useSelection";
|
||||||
import { useInternalOperations, useTxData } from "./useErigonHooks";
|
import { useInternalOperations, useTxData } from "./useErigonHooks";
|
||||||
|
@ -14,6 +12,20 @@ import { useETHUSDOracle } from "./usePriceOracle";
|
||||||
import { useAppConfigContext } from "./useAppConfig";
|
import { useAppConfigContext } from "./useAppConfig";
|
||||||
import { useSourcify, useTransactionDescription } from "./useSourcify";
|
import { useSourcify, useTransactionDescription } from "./useSourcify";
|
||||||
|
|
||||||
|
const Details = React.lazy(
|
||||||
|
() =>
|
||||||
|
import(
|
||||||
|
/* webpackChunkName: "txdetails", webpackPrefetch: true */
|
||||||
|
"./transaction/Details"
|
||||||
|
)
|
||||||
|
);
|
||||||
|
const Logs = React.lazy(
|
||||||
|
() =>
|
||||||
|
import(
|
||||||
|
/* webpackChunkName: "txlogs", webpackPrefetch: true */ "./transaction/Logs"
|
||||||
|
)
|
||||||
|
);
|
||||||
|
|
||||||
type TransactionParams = {
|
type TransactionParams = {
|
||||||
txhash: string;
|
txhash: string;
|
||||||
};
|
};
|
||||||
|
@ -77,22 +89,24 @@ const Transaction: React.FC = () => {
|
||||||
)}
|
)}
|
||||||
</Tab.List>
|
</Tab.List>
|
||||||
</Tab.Group>
|
</Tab.Group>
|
||||||
<Switch>
|
<React.Suspense fallback={null}>
|
||||||
<Route path="/tx/:txhash/" exact>
|
<Switch>
|
||||||
<Details
|
<Route path="/tx/:txhash/" exact>
|
||||||
txData={txData}
|
<Details
|
||||||
txDesc={txDesc}
|
txData={txData}
|
||||||
userDoc={metadata?.output.userdoc}
|
txDesc={txDesc}
|
||||||
devDoc={metadata?.output.devdoc}
|
userDoc={metadata?.output.userdoc}
|
||||||
internalOps={internalOps}
|
devDoc={metadata?.output.devdoc}
|
||||||
sendsEthToMiner={sendsEthToMiner}
|
internalOps={internalOps}
|
||||||
ethUSDPrice={blockETHUSDPrice}
|
sendsEthToMiner={sendsEthToMiner}
|
||||||
/>
|
ethUSDPrice={blockETHUSDPrice}
|
||||||
</Route>
|
/>
|
||||||
<Route path="/tx/:txhash/logs/" exact>
|
</Route>
|
||||||
<Logs txData={txData} metadata={metadata} />
|
<Route path="/tx/:txhash/logs/" exact>
|
||||||
</Route>
|
<Logs txData={txData} metadata={metadata} />
|
||||||
</Switch>
|
</Route>
|
||||||
|
</Switch>
|
||||||
|
</React.Suspense>
|
||||||
</SelectionContext.Provider>
|
</SelectionContext.Provider>
|
||||||
)}
|
)}
|
||||||
</StandardFrame>
|
</StandardFrame>
|
||||||
|
|
|
@ -1,14 +1,25 @@
|
||||||
import React from "react";
|
import React from "react";
|
||||||
import ReactDOM from "react-dom";
|
import ReactDOM from "react-dom";
|
||||||
|
import { Helmet } from "react-helmet";
|
||||||
import "@fontsource/space-grotesk/index.css";
|
import "@fontsource/space-grotesk/index.css";
|
||||||
import "@fontsource/roboto/index.css";
|
import "@fontsource/roboto/index.css";
|
||||||
import "@fontsource/roboto-mono/index.css";
|
import "@fontsource/roboto-mono/index.css";
|
||||||
|
import spaceGrotesk from "@fontsource/space-grotesk/files/space-grotesk-latin-400-normal.woff2";
|
||||||
import "./index.css";
|
import "./index.css";
|
||||||
import App from "./App";
|
import App from "./App";
|
||||||
import reportWebVitals from "./reportWebVitals";
|
import reportWebVitals from "./reportWebVitals";
|
||||||
|
|
||||||
ReactDOM.render(
|
ReactDOM.render(
|
||||||
<React.StrictMode>
|
<React.StrictMode>
|
||||||
|
<Helmet>
|
||||||
|
<link
|
||||||
|
rel="preload"
|
||||||
|
href={spaceGrotesk}
|
||||||
|
as="font"
|
||||||
|
type="font/woff2"
|
||||||
|
crossOrigin="true"
|
||||||
|
/>
|
||||||
|
</Helmet>
|
||||||
<App />
|
<App />
|
||||||
</React.StrictMode>,
|
</React.StrictMode>,
|
||||||
document.getElementById("root")
|
document.getElementById("root")
|
||||||
|
|
|
@ -1,3 +1,5 @@
|
||||||
/// <reference types="react-scripts" />
|
/// <reference types="react-scripts" />
|
||||||
declare module "use-keyboard-shortcut";
|
declare module "use-keyboard-shortcut";
|
||||||
declare module "highlightjs-solidity";
|
declare module "highlightjs-solidity";
|
||||||
|
declare module "*.woff";
|
||||||
|
declare module "*.woff2";
|
||||||
|
|
|
@ -103,7 +103,7 @@ const Blocks: React.FC<BlocksProps> = ({ latestBlock, targetBlockNumber }) => {
|
||||||
);
|
);
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<div className="w-full mb-auto">
|
<div className="w-full flex-grow">
|
||||||
<div className="px-9 pt-3 pb-12 divide-y-2">
|
<div className="px-9 pt-3 pb-12 divide-y-2">
|
||||||
<div className="relative">
|
<div className="relative">
|
||||||
<div className="flex justify-center items-baseline space-x-2 px-3 pb-2 text-lg text-orange-500 ">
|
<div className="flex justify-center items-baseline space-x-2 px-3 pb-2 text-lg text-orange-500 ">
|
||||||
|
|
|
@ -9,7 +9,7 @@ const London: React.FC = () => {
|
||||||
const { provider } = useContext(RuntimeContext);
|
const { provider } = useContext(RuntimeContext);
|
||||||
const block = useLatestBlock(provider);
|
const block = useLatestBlock(provider);
|
||||||
if (!provider || !block) {
|
if (!provider || !block) {
|
||||||
return <></>;
|
return <div className="flex-grow"></div>;
|
||||||
}
|
}
|
||||||
|
|
||||||
// Display countdown
|
// Display countdown
|
||||||
|
|
Loading…
Reference in New Issue