Merge branch 'feature/lazy-load-everything' into develop

2021-10-24 05:53:03 -03:00 · 2021-10-24 05:53:03 -03:00 · e9712b18a5
parent 5e4be33121 5c8003a64c
commit e9712b18a5
9 changed files with 144 additions and 29 deletions
--- 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",
--- 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",
--- 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 (
-    <Suspense fallback={<>LOADING</>}>
+    <Suspense fallback={null}>
      {runtime.connStatus !== ConnectionStatus.CONNECTED ? (
        <ConnectionErrorPanel
          connStatus={runtime.connStatus}
--- a/src/Home.tsx
+++ b/src/Home.tsx
@ -38,9 +38,9 @@ const Home: React.FC = () => {
  document.title = "Home | Otterscan";

  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)} />}
-      <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 />
      </div>
      <form
@ -98,7 +98,6 @@ const Home: React.FC = () => {
          </NavLink>
        )}
      </div>
-      <div className="flex-grow pb-5"></div>
    </div>
  );
 };
--- 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 = () => {
              )}
            </Tab.List>
          </Tab.Group>
-          <Switch>
-            <Route path="/tx/:txhash/" exact>
-              <Details
-                txData={txData}
-                txDesc={txDesc}
-                userDoc={metadata?.output.userdoc}
-                devDoc={metadata?.output.devdoc}
-                internalOps={internalOps}
-                sendsEthToMiner={sendsEthToMiner}
-                ethUSDPrice={blockETHUSDPrice}
-              />
-            </Route>
-            <Route path="/tx/:txhash/logs/" exact>
-              <Logs txData={txData} metadata={metadata} />
-            </Route>
-          </Switch>
+          <React.Suspense fallback={null}>
+            <Switch>
+              <Route path="/tx/:txhash/" exact>
+                <Details
+                  txData={txData}
+                  txDesc={txDesc}
+                  userDoc={metadata?.output.userdoc}
+                  devDoc={metadata?.output.devdoc}
+                  internalOps={internalOps}
+                  sendsEthToMiner={sendsEthToMiner}
+                  ethUSDPrice={blockETHUSDPrice}
+                />
+              </Route>
+              <Route path="/tx/:txhash/logs/" exact>
+                <Logs txData={txData} metadata={metadata} />
+              </Route>
+            </Switch>
+          </React.Suspense>
        </SelectionContext.Provider>
      )}
    </StandardFrame>
--- 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(
  <React.StrictMode>
+    <Helmet>
+      <link
+        rel="preload"
+        href={spaceGrotesk}
+        as="font"
+        type="font/woff2"
+        crossOrigin="true"
+      />
+    </Helmet>
    <App />
  </React.StrictMode>,
  document.getElementById("root")
--- a/src/react-app-env.d.ts
+++ b/src/react-app-env.d.ts
@ -1,3 +1,5 @@
 /// <reference types="react-scripts" />
 declare module "use-keyboard-shortcut";
 declare module "highlightjs-solidity";
+declare module "*.woff";
+declare module "*.woff2";
--- a/src/special/london/Blocks.tsx
+++ b/src/special/london/Blocks.tsx
@ -103,7 +103,7 @@ const Blocks: React.FC<BlocksProps> = ({ latestBlock, targetBlockNumber }) => {
  );

  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="relative">
          <div className="flex justify-center items-baseline space-x-2 px-3 pb-2 text-lg text-orange-500 ">
--- 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 <div className="flex-grow"></div>;
  }

  // Display countdown