diff --git a/package-lock.json b/package-lock.json index 44aa612..465caa4 100644 --- a/package-lock.json +++ b/package-lock.json @@ -30,6 +30,7 @@ "@types/react": "^17.0.31", "@types/react-blockies": "^1.4.1", "@types/react-dom": "^17.0.10", + "@types/react-helmet": "^6.1.4", "@types/react-highlight": "^0.12.5", "@types/react-router-dom": "^5.3.1", "@types/react-syntax-highlighter": "^13.5.2", @@ -42,6 +43,7 @@ "react-chartjs-2": "^3.2.0", "react-dom": "^17.0.2", "react-error-boundary": "^3.1.3", + "react-helmet": "^6.1.0", "react-image": "^4.0.3", "react-router-dom": "^5.3.0", "react-scripts": "4.0.3", @@ -3117,6 +3119,14 @@ "@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": { "version": "0.12.5", "resolved": "https://registry.npmjs.org/@types/react-highlight/-/react-highlight-0.12.5.tgz", @@ -14573,6 +14583,25 @@ "version": "6.0.9", "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": { "version": "4.0.3", "resolved": "https://registry.npmjs.org/react-image/-/react-image-4.0.3.tgz", @@ -14920,6 +14949,14 @@ "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": { "version": "15.4.4", "resolved": "https://registry.npmjs.org/react-syntax-highlighter/-/react-syntax-highlighter-15.4.4.tgz", @@ -21666,6 +21703,14 @@ "@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": { "version": "0.12.5", "resolved": "https://registry.npmjs.org/@types/react-highlight/-/react-highlight-0.12.5.tgz", @@ -29370,6 +29415,22 @@ "react-error-overlay": { "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": { "version": "4.0.3", "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": { "version": "15.4.4", "resolved": "https://registry.npmjs.org/react-syntax-highlighter/-/react-syntax-highlighter-15.4.4.tgz", diff --git a/package.json b/package.json index f961a6c..0369b84 100644 --- a/package.json +++ b/package.json @@ -25,6 +25,7 @@ "@types/react": "^17.0.31", "@types/react-blockies": "^1.4.1", "@types/react-dom": "^17.0.10", + "@types/react-helmet": "^6.1.4", "@types/react-highlight": "^0.12.5", "@types/react-router-dom": "^5.3.1", "@types/react-syntax-highlighter": "^13.5.2", @@ -37,6 +38,7 @@ "react-chartjs-2": "^3.2.0", "react-dom": "^17.0.2", "react-error-boundary": "^3.1.3", + "react-helmet": "^6.1.0", "react-image": "^4.0.3", "react-router-dom": "^5.3.0", "react-scripts": "4.0.3", diff --git a/src/App.tsx b/src/App.tsx index 9c7c1fe..110d626 100644 --- a/src/App.tsx +++ b/src/App.tsx @@ -11,11 +11,31 @@ import { RuntimeContext, useRuntime } from "./useRuntime"; import { AppConfig, AppConfigContext } from "./useAppConfig"; import { SourcifySource } from "./url"; -const Block = React.lazy(() => import("./Block")); -const BlockTransactions = React.lazy(() => import("./BlockTransactions")); -const AddressTransactions = React.lazy(() => import("./AddressTransactions")); -const Transaction = React.lazy(() => import("./Transaction")); -const London = React.lazy(() => import("./special/london/London")); +const Block = React.lazy( + () => import(/* webpackChunkName: "block", webpackPrefetch: true */ "./Block") +); +const BlockTransactions = React.lazy( + () => + 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 runtime = useRuntime(); @@ -30,7 +50,7 @@ const App = () => { }, [sourcifySource, setSourcifySource]); return ( - LOADING}> + {runtime.connStatus !== ConnectionStatus.CONNECTED ? ( { document.title = "Home | Otterscan"; return ( -
+
{isScanning && setScanning(false)} />} -
+
{ )}
-
); }; diff --git a/src/Transaction.tsx b/src/Transaction.tsx index 0edd994..a240c7e 100644 --- a/src/Transaction.tsx +++ b/src/Transaction.tsx @@ -5,8 +5,6 @@ import StandardFrame from "./StandardFrame"; import StandardSubtitle from "./StandardSubtitle"; import ContentFrame from "./ContentFrame"; import NavTab from "./components/NavTab"; -import Details from "./transaction/Details"; -import Logs from "./transaction/Logs"; import { RuntimeContext } from "./useRuntime"; import { SelectionContext, useSelection } from "./useSelection"; import { useInternalOperations, useTxData } from "./useErigonHooks"; @@ -14,6 +12,20 @@ import { useETHUSDOracle } from "./usePriceOracle"; import { useAppConfigContext } from "./useAppConfig"; 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 = { txhash: string; }; @@ -77,22 +89,24 @@ const Transaction: React.FC = () => { )} - - -
- - - - - + + + +
+ + + + + + )} diff --git a/src/index.tsx b/src/index.tsx index a1b9d79..29ad212 100644 --- a/src/index.tsx +++ b/src/index.tsx @@ -1,14 +1,25 @@ import React from "react"; import ReactDOM from "react-dom"; +import { Helmet } from "react-helmet"; import "@fontsource/space-grotesk/index.css"; import "@fontsource/roboto/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 App from "./App"; import reportWebVitals from "./reportWebVitals"; ReactDOM.render( + + + , document.getElementById("root") diff --git a/src/react-app-env.d.ts b/src/react-app-env.d.ts index 625fe40..dc08ce3 100644 --- a/src/react-app-env.d.ts +++ b/src/react-app-env.d.ts @@ -1,3 +1,5 @@ /// declare module "use-keyboard-shortcut"; declare module "highlightjs-solidity"; +declare module "*.woff"; +declare module "*.woff2"; diff --git a/src/special/london/Blocks.tsx b/src/special/london/Blocks.tsx index 64fcba8..d100717 100644 --- a/src/special/london/Blocks.tsx +++ b/src/special/london/Blocks.tsx @@ -103,7 +103,7 @@ const Blocks: React.FC = ({ latestBlock, targetBlockNumber }) => { ); return ( -
+
diff --git a/src/special/london/London.tsx b/src/special/london/London.tsx index 0663796..aba0684 100644 --- a/src/special/london/London.tsx +++ b/src/special/london/London.tsx @@ -9,7 +9,7 @@ const London: React.FC = () => { const { provider } = useContext(RuntimeContext); const block = useLatestBlock(provider); if (!provider || !block) { - return <>; + return
; } // Display countdown