Merge branch 'feature/vitejs' into develop; fix #323
This commit is contained in:
Willian Mitsuda
commit
f4c518f93c
|
|
@ -10,6 +10,7 @@
|
|||
|
||||
# production
|
||||
/build
|
||||
/dist
|
||||
|
||||
# misc
|
||||
.DS_Store
|
||||
|
|
|
|||
|
|
@ -2,7 +2,7 @@ FROM node:16.16.0-alpine3.15 AS builder
|
|||
WORKDIR /otterscan-build
|
||||
COPY ["package.json", "package-lock.json", "/otterscan-build/"]
|
||||
RUN npm install
|
||||
COPY ["run-nginx.sh", "tsconfig.json", "craco.config.js", "tailwind.config.js", "/otterscan-build/"]
|
||||
COPY ["run-nginx.sh", "tsconfig.json", "tsconfig.node.json", "postcss.config.js", "tailwind.config.js", "vite.config.ts", "index.html", "/otterscan-build/"]
|
||||
COPY ["public", "/otterscan-build/public/"]
|
||||
COPY ["src", "/otterscan-build/src/"]
|
||||
RUN npm run build
|
||||
|
|
@ -97,7 +97,7 @@ COPY --from=fourbytesbuilder /signatures /usr/share/nginx/html/signatures/
|
|||
COPY --from=logobuilder /assets /usr/share/nginx/html/assets/
|
||||
COPY nginx/conf.d/default.conf /etc/nginx/conf.d/default.conf
|
||||
COPY nginx/nginx.conf /etc/nginx/nginx.conf
|
||||
COPY --from=builder /otterscan-build/build /usr/share/nginx/html/
|
||||
COPY --from=builder /otterscan-build/dist /usr/share/nginx/html/
|
||||
COPY --from=builder /otterscan-build/run-nginx.sh /
|
||||
WORKDIR /
|
||||
|
||||
|
|
|
|||
|
|
@ -1,11 +0,0 @@
|
|||
// craco.config.js
|
||||
module.exports = {
|
||||
style: {
|
||||
postcss: {
|
||||
plugins: [
|
||||
require('tailwindcss'),
|
||||
require('autoprefixer'),
|
||||
],
|
||||
},
|
||||
},
|
||||
}
|
||||
|
|
@ -16,7 +16,7 @@ Clone Otterscan repo and its submodules. Checkout the tag corresponding to your
|
|||
git clone --recurse-submodules https://github.com/wmitsuda/otterscan.git
|
||||
cd otterscan
|
||||
git checkout <version-tag-otterscan>
|
||||
DOCKER_BUILDKIT=1 docker build -t otterscan -f Dockerfile .
|
||||
docker buildx build -t otterscan .
|
||||
```
|
||||
|
||||
This will run the entire build process inside a build container, merge the production build of the React app with the 4bytes and trustwallet assets into the same image format it is published in Docker Hub, but locally under the name `otterscan`.
|
||||
|
|
@ -40,7 +40,7 @@ First, a brief explanation about the app:
|
|||
|
||||
These instructions are subjected to changes in future for the sake of simplification.
|
||||
|
||||
Make sure you have a working node 14/npm 7 installation.
|
||||
Make sure you have a working node 16/npm 8 installation.
|
||||
|
||||
By default, it assumes your Erigon `rpcdaemon` processs is serving requests at `http://localhost:8545`. You can customize this URL by changing the `public/config.json` file.
|
||||
|
||||
|
|
|
|||
|
|
@ -0,0 +1,25 @@
|
|||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
|
||||
<head>
|
||||
<meta charset="utf-8" />
|
||||
<link rel="icon" href="/favicon.ico" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1" />
|
||||
<meta name="theme-color" content="#000000" />
|
||||
<meta name="description" content="Erigon based block explorer" />
|
||||
<link rel="apple-touch-icon" href="/logo192.png" />
|
||||
<!--
|
||||
manifest.json provides metadata used when your web app is installed on a
|
||||
user's mobile device or desktop. See https://developers.google.com/web/fundamentals/web-app-manifest/
|
||||
-->
|
||||
<link rel="manifest" href="/manifest.json" />
|
||||
<title>Otterscan</title>
|
||||
</head>
|
||||
|
||||
<body>
|
||||
<noscript>You need to enable JavaScript to run this app.</noscript>
|
||||
<div id="root"></div>
|
||||
<script type="module" src="/src/index.tsx"></script>
|
||||
</body>
|
||||
|
||||
</html>
|
||||
File diff suppressed because it is too large
Load Diff
18
package.json
18
package.json
|
|
@ -6,7 +6,6 @@
|
|||
"dependencies": {
|
||||
"@blackbox-vision/react-qr-reader": "^5.0.0",
|
||||
"@chainlink/contracts": "^0.4.2",
|
||||
"@craco/craco": "^6.4.5",
|
||||
"@fontsource/fira-code": "^4.5.10",
|
||||
"@fontsource/roboto": "^4.5.7",
|
||||
"@fontsource/roboto-mono": "^4.5.7",
|
||||
|
|
@ -38,24 +37,21 @@
|
|||
"react-helmet-async": "^1.3.0",
|
||||
"react-image": "^4.0.3",
|
||||
"react-router-dom": "^6.3.0",
|
||||
"react-scripts": "4.0.3",
|
||||
"react-syntax-highlighter": "^15.5.0",
|
||||
"serve": "^13.0.4",
|
||||
"swr": "^1.3.0",
|
||||
"typescript": "^4.7.4",
|
||||
"use-keyboard-shortcut": "^1.1.4",
|
||||
"web-vitals": "^1.0.1"
|
||||
},
|
||||
"scripts": {
|
||||
"start": "craco start",
|
||||
"build": "craco build && compress-cra",
|
||||
"test": "craco test",
|
||||
"eject": "react-scripts eject",
|
||||
"start": "vite",
|
||||
"build": "tsc && vite build",
|
||||
"preview": "vite preview",
|
||||
"source-map-explorer": "source-map-explorer build/static/js/*.js",
|
||||
"assets-start": "docker run --rm -p 3001:80 --name otterscan-assets -d -v$(pwd)/4bytes/signatures:/usr/share/nginx/html/signatures/ -v$(pwd)/trustwallet/blockchains/ethereum/assets:/usr/share/nginx/html/assets/1 -v$(pwd)/topic0/with_parameter_names:/usr/share/nginx/html/topic0/ -v$(pwd)/chains/_data/chains:/usr/share/nginx/html/chains/ -v$(pwd)/nginx/nginx.conf:/etc/nginx/nginx.conf -v$(pwd)/nginx/conf.d/default.conf:/etc/nginx/conf.d/default.conf nginx:1.21.1-alpine",
|
||||
"assets-start-with-param-names": "docker run --rm -p 3001:80 --name otterscan-assets -d -v$(pwd)/4bytes/with_parameter_names:/usr/share/nginx/html/signatures/ -v$(pwd)/trustwallet/blockchains/ethereum/assets:/usr/share/nginx/html/assets/1 -v$(pwd)/topic0/with_parameter_names:/usr/share/nginx/html/topic0/ -v$(pwd)/chains/_data/chains:/usr/share/nginx/html/chains/ -v$(pwd)/nginx/nginx.conf:/etc/nginx/nginx.conf -v$(pwd)/nginx/conf.d/default.conf:/etc/nginx/conf.d/default.conf nginx:1.21.1-alpine",
|
||||
"assets-stop": "docker stop otterscan-assets",
|
||||
"docker-build": "DOCKER_BUILDKIT=1 docker build -t otterscan -f Dockerfile .",
|
||||
"docker-build": "docker buildx build -t otterscan .",
|
||||
"docker-start": "docker run --rm -p 5000:80 --name otterscan -d otterscan",
|
||||
"docker-stop": "docker stop otterscan"
|
||||
},
|
||||
|
|
@ -78,10 +74,12 @@
|
|||
]
|
||||
},
|
||||
"devDependencies": {
|
||||
"@vitejs/plugin-react": "^2.0.0",
|
||||
"autoprefixer": "^9.8.8",
|
||||
"compress-create-react-app": "^1.2.1",
|
||||
"postcss": "^7.0.39",
|
||||
"source-map-explorer": "^2.5.2",
|
||||
"tailwindcss": "npm:@tailwindcss/postcss7-compat@^2.2.6"
|
||||
"tailwindcss": "npm:@tailwindcss/postcss7-compat@^2.2.6",
|
||||
"vite": "^3.0.4",
|
||||
"vite-plugin-compression": "^0.5.1"
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -0,0 +1,7 @@
|
|||
// postcss.config.js
|
||||
module.exports = {
|
||||
plugins: {
|
||||
tailwindcss: {},
|
||||
autoprefixer: {},
|
||||
},
|
||||
};
|
||||
|
|
@ -1,43 +0,0 @@
|
|||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
|
||||
<head>
|
||||
<meta charset="utf-8" />
|
||||
<link rel="icon" href="%PUBLIC_URL%/favicon.ico" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1" />
|
||||
<meta name="theme-color" content="#000000" />
|
||||
<meta name="description" content="Erigon based block explorer" />
|
||||
<link rel="apple-touch-icon" href="%PUBLIC_URL%/logo192.png" />
|
||||
<!--
|
||||
manifest.json provides metadata used when your web app is installed on a
|
||||
user's mobile device or desktop. See https://developers.google.com/web/fundamentals/web-app-manifest/
|
||||
-->
|
||||
<link rel="manifest" href="%PUBLIC_URL%/manifest.json" />
|
||||
<!--
|
||||
Notice the use of %PUBLIC_URL% in the tags above.
|
||||
It will be replaced with the URL of the `public` folder during the build.
|
||||
Only files inside the `public` folder can be referenced from the HTML.
|
||||
|
||||
Unlike "/favicon.ico" or "favicon.ico", "%PUBLIC_URL%/favicon.ico" will
|
||||
work correctly both with client-side routing and a non-root public URL.
|
||||
Learn how to configure a non-root public URL by running `npm run build`.
|
||||
-->
|
||||
<title>Otterscan</title>
|
||||
</head>
|
||||
|
||||
<body>
|
||||
<noscript>You need to enable JavaScript to run this app.</noscript>
|
||||
<div id="root"></div>
|
||||
<!--
|
||||
This HTML file is a template.
|
||||
If you open it directly in the browser, you will see an empty page.
|
||||
|
||||
You can add webfonts, meta tags, or analytics to this file.
|
||||
The build step will place the bundled scripts into the <body> tag.
|
||||
|
||||
To begin the development, run `npm start` or `yarn start`.
|
||||
To create a production bundle, use `npm run build` or `yarn build`.
|
||||
-->
|
||||
</body>
|
||||
|
||||
</html>
|
||||
|
|
@ -29,10 +29,7 @@ import { useAddressesWithCode } from "./useErigonHooks";
|
|||
import { useChainInfo } from "./useChainInfo";
|
||||
|
||||
const AddressTransactionByNonce = React.lazy(
|
||||
() =>
|
||||
import(
|
||||
/* webpackChunkName: "addresstxbynonce", webpackPrefetch: true */ "./AddressTransactionByNonce"
|
||||
)
|
||||
() => import("./AddressTransactionByNonce")
|
||||
);
|
||||
|
||||
const Address: React.FC = () => {
|
||||
|
|
|
|||
36
src/App.tsx
36
src/App.tsx
|
|
@ -9,35 +9,13 @@ import { ConnectionStatus } from "./types";
|
|||
import { RuntimeContext, useRuntime } from "./useRuntime";
|
||||
import { ChainInfoContext, useChainInfoFromMetadataFile } from "./useChainInfo";
|
||||
|
||||
const Block = React.lazy(
|
||||
() => import(/* webpackChunkName: "block", webpackPrefetch: true */ "./Block")
|
||||
);
|
||||
const BlockTransactions = React.lazy(
|
||||
() =>
|
||||
import(
|
||||
/* webpackChunkName: "blocktxs", webpackPrefetch: true */ "./BlockTransactions"
|
||||
)
|
||||
);
|
||||
const Address = React.lazy(
|
||||
() =>
|
||||
import(/* webpackChunkName: "address", webpackPrefetch: true */ "./Address")
|
||||
);
|
||||
const Transaction = React.lazy(
|
||||
() =>
|
||||
import(/* webpackChunkName: "tx", webpackPrefetch: true */ "./Transaction")
|
||||
);
|
||||
const London = React.lazy(
|
||||
() => import(/* webpackChunkName: "london" */ "./special/london/London")
|
||||
);
|
||||
const Faucets = React.lazy(
|
||||
() => import(/* webpackChunkName: "faucets" */ "./Faucets")
|
||||
);
|
||||
const PageNotFound = React.lazy(
|
||||
() =>
|
||||
import(
|
||||
/* webpackChunkName: "notfound", webpackPrefetch: true */ "./PageNotFound"
|
||||
)
|
||||
);
|
||||
const Block = React.lazy(() => import("./Block"));
|
||||
const BlockTransactions = React.lazy(() => import("./BlockTransactions"));
|
||||
const Address = React.lazy(() => import("./Address"));
|
||||
const Transaction = React.lazy(() => import("./Transaction"));
|
||||
const London = React.lazy(() => import("./special/london/London"));
|
||||
const Faucets = React.lazy(() => import("./Faucets"));
|
||||
const PageNotFound = React.lazy(() => import("./PageNotFound"));
|
||||
|
||||
const App = () => {
|
||||
const runtime = useRuntime();
|
||||
|
|
|
|||
|
|
@ -13,25 +13,9 @@ import { BlockNumberContext } from "./useBlockTagContext";
|
|||
import { useAppConfigContext } from "./useAppConfig";
|
||||
import { useSourcify, useTransactionDescription } from "./sourcify/useSourcify";
|
||||
|
||||
const Details = React.lazy(
|
||||
() =>
|
||||
import(
|
||||
/* webpackChunkName: "txdetails", webpackPrefetch: true */
|
||||
"./transaction/Details"
|
||||
)
|
||||
);
|
||||
const Logs = React.lazy(
|
||||
() =>
|
||||
import(
|
||||
/* webpackChunkName: "txlogs", webpackPrefetch: true */ "./transaction/Logs"
|
||||
)
|
||||
);
|
||||
const Trace = React.lazy(
|
||||
() =>
|
||||
import(
|
||||
/* webpackChunkName: "txtrace", webpackPrefetch: true */ "./transaction/Trace"
|
||||
)
|
||||
);
|
||||
const Details = React.lazy(() => import("./transaction/Details"));
|
||||
const Logs = React.lazy(() => import("./transaction/Logs"));
|
||||
const Trace = React.lazy(() => import("./transaction/Trace"));
|
||||
|
||||
type TransactionPageContentProps = {
|
||||
txHash: string;
|
||||
|
|
|
|||
|
|
@ -0,0 +1 @@
|
|||
/// <reference types="vite/client" />
|
||||
|
|
@ -10,7 +10,7 @@ function withOpacity(variableName) {
|
|||
}
|
||||
|
||||
module.exports = {
|
||||
purge: ["./src/**/*.{js,jsx,ts,tsx}", "./public/index.html"],
|
||||
purge: ["./src/**/*.{js,jsx,ts,tsx}", "./index.html"],
|
||||
darkMode: false, // or 'media' or 'class'
|
||||
theme: {
|
||||
extend: {
|
||||
|
|
|
|||
|
|
@ -1,21 +1,21 @@
|
|||
{
|
||||
"compilerOptions": {
|
||||
"target": "es5",
|
||||
"lib": ["dom", "dom.iterable", "esnext"],
|
||||
"allowJs": true,
|
||||
"target": "ESNext",
|
||||
"useDefineForClassFields": true,
|
||||
"lib": ["DOM", "DOM.Iterable", "ESNext"],
|
||||
"allowJs": false,
|
||||
"skipLibCheck": true,
|
||||
"esModuleInterop": true,
|
||||
"esModuleInterop": false,
|
||||
"allowSyntheticDefaultImports": true,
|
||||
"strict": true,
|
||||
"forceConsistentCasingInFileNames": true,
|
||||
"noFallthroughCasesInSwitch": true,
|
||||
"module": "esnext",
|
||||
"moduleResolution": "node",
|
||||
"module": "ESNext",
|
||||
"moduleResolution": "Node",
|
||||
"resolveJsonModule": true,
|
||||
"isolatedModules": true,
|
||||
"noEmit": true,
|
||||
"jsx": "react-jsx",
|
||||
"downlevelIteration": true
|
||||
"jsx": "react-jsx"
|
||||
},
|
||||
"include": ["src"]
|
||||
"include": ["src"],
|
||||
"references": [{ "path": "./tsconfig.node.json" }]
|
||||
}
|
||||
|
|
|
|||
|
|
@ -0,0 +1,9 @@
|
|||
{
|
||||
"compilerOptions": {
|
||||
"composite": true,
|
||||
"module": "ESNext",
|
||||
"moduleResolution": "Node",
|
||||
"allowSyntheticDefaultImports": true
|
||||
},
|
||||
"include": ["vite.config.ts"]
|
||||
}
|
||||
|
|
@ -0,0 +1,12 @@
|
|||
import { defineConfig } from "vite";
|
||||
import react from "@vitejs/plugin-react";
|
||||
import viteCompression from "vite-plugin-compression";
|
||||
|
||||
// https://vitejs.dev/config/
|
||||
export default defineConfig({
|
||||
plugins: [
|
||||
react(),
|
||||
viteCompression(),
|
||||
viteCompression({ algorithm: "brotliCompress" }),
|
||||
],
|
||||
});
|
||||
Loading…
Reference in New Issue