a
/
otterscan
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Merge branch 'feature/vitejs' into develop; fix #323

This commit is contained in:
Willian Mitsuda 2022-08-05 20:08:20 -03:00
parent d5879ef3c7 ae619a5d9e
commit f4c518f93c
17 changed files with 1651 additions and 25901 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1
.gitignore vendored
View File

@ -10,6 +10,7 @@
# production # production
/build /build
/dist
# misc # misc
.DS_Store .DS_Store

4
Dockerfile
View File

@ -2,7 +2,7 @@ FROM node:16.16.0-alpine3.15 AS builder
WORKDIR /otterscan-build WORKDIR /otterscan-build
COPY ["package.json", "package-lock.json", "/otterscan-build/"] COPY ["package.json", "package-lock.json", "/otterscan-build/"]
RUN npm install 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 ["public", "/otterscan-build/public/"]
COPY ["src", "/otterscan-build/src/"] COPY ["src", "/otterscan-build/src/"]
RUN npm run build 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 --from=logobuilder /assets /usr/share/nginx/html/assets/
COPY nginx/conf.d/default.conf /etc/nginx/conf.d/default.conf COPY nginx/conf.d/default.conf /etc/nginx/conf.d/default.conf
COPY nginx/nginx.conf /etc/nginx/nginx.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 / COPY --from=builder /otterscan-build/run-nginx.sh /
WORKDIR / WORKDIR /

11
craco.config.js
View File

@ -1,11 +0,0 @@
// craco.config.js
module.exports = {
style: {
postcss: {
plugins: [
require('tailwindcss'),
require('autoprefixer'),
],
},
},
}

4
docs/other-ways-to-run-otterscan.md
View File

@ -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 git clone --recurse-submodules https://github.com/wmitsuda/otterscan.git
cd otterscan cd otterscan
git checkout <version-tag-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`. 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. 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. 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.

25
index.html Normal file
View 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>

27310
package-lock.json generated
View File

File diff suppressed because it is too large Load Diff

18
package.json
View File

@ -6,7 +6,6 @@
"dependencies": { "dependencies": {
"@blackbox-vision/react-qr-reader": "^5.0.0", "@blackbox-vision/react-qr-reader": "^5.0.0",
"@chainlink/contracts": "^0.4.2", "@chainlink/contracts": "^0.4.2",
"@craco/craco": "^6.4.5",
"@fontsource/fira-code": "^4.5.10", "@fontsource/fira-code": "^4.5.10",
"@fontsource/roboto": "^4.5.7", "@fontsource/roboto": "^4.5.7",
"@fontsource/roboto-mono": "^4.5.7", "@fontsource/roboto-mono": "^4.5.7",
@ -38,24 +37,21 @@
"react-helmet-async": "^1.3.0", "react-helmet-async": "^1.3.0",
"react-image": "^4.0.3", "react-image": "^4.0.3",
"react-router-dom": "^6.3.0", "react-router-dom": "^6.3.0",
"react-scripts": "4.0.3",
"react-syntax-highlighter": "^15.5.0", "react-syntax-highlighter": "^15.5.0",
"serve": "^13.0.4",
"swr": "^1.3.0", "swr": "^1.3.0",
"typescript": "^4.7.4", "typescript": "^4.7.4",
"use-keyboard-shortcut": "^1.1.4", "use-keyboard-shortcut": "^1.1.4",
"web-vitals": "^1.0.1" "web-vitals": "^1.0.1"
}, },
"scripts": { "scripts": {
"start": "craco start", "start": "vite",
"build": "craco build && compress-cra", "build": "tsc && vite build",
"test": "craco test", "preview": "vite preview",
"eject": "react-scripts eject",
"source-map-explorer": "source-map-explorer build/static/js/*.js", "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": "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-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", "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-start": "docker run --rm -p 5000:80 --name otterscan -d otterscan",
"docker-stop": "docker stop otterscan" "docker-stop": "docker stop otterscan"
}, },
@ -78,10 +74,12 @@
] ]
}, },
"devDependencies": { "devDependencies": {
"@vitejs/plugin-react": "^2.0.0",
"autoprefixer": "^9.8.8", "autoprefixer": "^9.8.8",
"compress-create-react-app": "^1.2.1",
"postcss": "^7.0.39", "postcss": "^7.0.39",
"source-map-explorer": "^2.5.2", "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"
} }
} }

7
postcss.config.js Normal file
View File

@ -0,0 +1,7 @@
// postcss.config.js
module.exports = {
plugins: {
tailwindcss: {},
autoprefixer: {},
},
};

43
public/index.html
View File

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

5
src/Address.tsx
View File

@ -29,10 +29,7 @@ import { useAddressesWithCode } from "./useErigonHooks";
import { useChainInfo } from "./useChainInfo"; import { useChainInfo } from "./useChainInfo";
const AddressTransactionByNonce = React.lazy( const AddressTransactionByNonce = React.lazy(
() => () => import("./AddressTransactionByNonce")
import(
/* webpackChunkName: "addresstxbynonce", webpackPrefetch: true */ "./AddressTransactionByNonce"
)
); );
const Address: React.FC = () => { const Address: React.FC = () => {

36
src/App.tsx
View File

@ -9,35 +9,13 @@ import { ConnectionStatus } from "./types";
import { RuntimeContext, useRuntime } from "./useRuntime"; import { RuntimeContext, useRuntime } from "./useRuntime";
import { ChainInfoContext, useChainInfoFromMetadataFile } from "./useChainInfo"; import { ChainInfoContext, useChainInfoFromMetadataFile } from "./useChainInfo";
const Block = React.lazy( const Block = React.lazy(() => import("./Block"));
() => import(/* webpackChunkName: "block", webpackPrefetch: true */ "./Block") const BlockTransactions = React.lazy(() => import("./BlockTransactions"));
); const Address = React.lazy(() => import("./Address"));
const BlockTransactions = React.lazy( const Transaction = React.lazy(() => import("./Transaction"));
() => const London = React.lazy(() => import("./special/london/London"));
import( const Faucets = React.lazy(() => import("./Faucets"));
/* webpackChunkName: "blocktxs", webpackPrefetch: true */ "./BlockTransactions" const PageNotFound = React.lazy(() => import("./PageNotFound"));
)
);
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 App = () => { const App = () => {
const runtime = useRuntime(); const runtime = useRuntime();

22
src/TransactionPageContent.tsx
View File

@ -13,25 +13,9 @@ import { BlockNumberContext } from "./useBlockTagContext";
import { useAppConfigContext } from "./useAppConfig"; import { useAppConfigContext } from "./useAppConfig";
import { useSourcify, useTransactionDescription } from "./sourcify/useSourcify"; import { useSourcify, useTransactionDescription } from "./sourcify/useSourcify";
const Details = React.lazy( const Details = React.lazy(() => import("./transaction/Details"));
() => const Logs = React.lazy(() => import("./transaction/Logs"));
import( const Trace = React.lazy(() => import("./transaction/Trace"));
/* 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"
)
);
type TransactionPageContentProps = { type TransactionPageContentProps = {
txHash: string; txHash: string;

1
src/vite-env.d.ts vendored Normal file
View File

@ -0,0 +1 @@
/// <reference types="vite/client" />

2
tailwind.config.js
View File

@ -10,7 +10,7 @@ function withOpacity(variableName) {
} }
module.exports = { 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' darkMode: false, // or 'media' or 'class'
theme: { theme: {
extend: { extend: {

20
tsconfig.json
View File

@ -1,21 +1,21 @@
{ {
"compilerOptions": { "compilerOptions": {
"target": "es5", "target": "ESNext",
"lib": ["dom", "dom.iterable", "esnext"], "useDefineForClassFields": true,
"allowJs": true, "lib": ["DOM", "DOM.Iterable", "ESNext"],
"allowJs": false,
"skipLibCheck": true, "skipLibCheck": true,
"esModuleInterop": true, "esModuleInterop": false,
"allowSyntheticDefaultImports": true, "allowSyntheticDefaultImports": true,
"strict": true, "strict": true,
"forceConsistentCasingInFileNames": true, "forceConsistentCasingInFileNames": true,
"noFallthroughCasesInSwitch": true, "module": "ESNext",
"module": "esnext", "moduleResolution": "Node",
"moduleResolution": "node",
"resolveJsonModule": true, "resolveJsonModule": true,
"isolatedModules": true, "isolatedModules": true,
"noEmit": true, "noEmit": true,
"jsx": "react-jsx", "jsx": "react-jsx"
"downlevelIteration": true
}, },
"include": ["src"] "include": ["src"],
"references": [{ "path": "./tsconfig.node.json" }]
} }

9
tsconfig.node.json Normal file
View File

@ -0,0 +1,9 @@
{
"compilerOptions": {
"composite": true,
"module": "ESNext",
"moduleResolution": "Node",
"allowSyntheticDefaultImports": true
},
"include": ["vite.config.ts"]
}

12
vite.config.ts Normal file
View File

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