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

This commit is contained in:
Willian Mitsuda 2021-10-24 05:53:03 -03:00
commit e9712b18a5
9 changed files with 144 additions and 29 deletions

67
package-lock.json generated
View File

@ -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",

View File

@ -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",

View File

@ -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}

View File

@ -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>
); );
}; };

View File

@ -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>

View File

@ -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")

View File

@ -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";

View File

@ -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 ">

View File

@ -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