diff --git a/build/webpack.base.js b/build/webpack.base.js index 3ac5cbed7..dd70f943e 100755 --- a/build/webpack.base.js +++ b/build/webpack.base.js @@ -24,7 +24,15 @@ const { } = require("./util"); const copies = []; - +const ViewerPages = ["address", "contract", "proposal"]; +const htmlPluginConfig = { + template: path.resolve(ROOT, "./template.ejs"), + chunks: isProdMode ? ["runtime.app", "vendors", "app"] : ["app"], + name: "app", + title: "AELF Block Explorer", + favicon: isTestNet ? "public/favicon.test.ico" : "public/favicon.main.ico", + hash: true, +}; const baseConfig = { // entry: ENTRIES, entry: { @@ -136,29 +144,17 @@ const baseConfig = { ], }, plugins: [ - // ...PAGES.map(({ name, config }) => { - // let chunks = [name]; - // const filename = path.resolve(OUTPUT_PATH, config.name || `${name}.html`); - // if (isProdMode) { - // const runtime = `runtime.${name}`; - // chunks = [runtime, "vendors", name]; - // } - // return new HtmlWebpackPlugin({ - // template: path.resolve(ROOT, "./template.ejs"), - // filename, - // chunks, - // name, - // title: config.title, - // }); - // }), + // Compatible with old url + ...ViewerPages.map((ele) => { + const filename = `viewer/${ele}.html`; + return new HtmlWebpackPlugin({ + filename, + ...htmlPluginConfig, + }); + }), new HtmlWebpackPlugin({ - template: path.resolve(ROOT, "./template.ejs"), filename: "index.html", - chunks: isProdMode ? ["runtime.app", "vendors", "app"] : ["app"], - name: "app", - title: "AELF Block Explorer", - favicon: isTestNet ? 'public/favicon.test.ico' : 'public/favicon.main.ico', - hash: true + ...htmlPluginConfig, }), new webpack.ProvidePlugin({ React: "react", diff --git a/build/webpack.dev.js b/build/webpack.dev.js index ceec5d1d2..bbf5cef59 100755 --- a/build/webpack.dev.js +++ b/build/webpack.dev.js @@ -71,29 +71,6 @@ const devConfig = { // inline: false, historyApiFallback: true, proxy: proxyServer, - // before(app) { - // app.all("*", (req, res, next) => { - // let mockFile = mockMapper[req.path]; - // if (isObject(mockFile)) { - // mockFile = mockFile[req.query.path]; - // } - // if (mockFile && devMode === "local") { - // res.sendFile( - // path.resolve(__dirname, mockFile), - // { - // headers: { - // "Content-Type": "application/json; charset=utf-8", - // }, - // }, - // (err) => { - // err && console.error(err); - // } - // ); - // } else { - // next(); - // } - // }); - // }, }, }; diff --git a/src/App.js b/src/App.js index 1bf2b0ba7..0ccff2d3d 100644 --- a/src/App.js +++ b/src/App.js @@ -9,24 +9,23 @@ import HeaderBlank from "./components/Header/HeaderBlank"; import BrowserFooter from "./components/Footer/Footer"; import BrowserBreadcrumb from "./components/Breadcrumb/Breadcrumb"; import Container from "./components/Container/Container"; -import { PageRouter } from "./routes/routes"; +import { PageRouter, RouterGurad } from "./routes/routes"; import { useLocation } from "react-use"; import "./App.less"; function App() { - const { pathname } = useLocation() - + const { pathname } = useLocation(); const back2Top = useCallback(() => { - const app = document.querySelector('#app') + const app = document.querySelector("#app"); if (app) { - app.scrollIntoView({ block: 'start', behavior: 'auto' }) + app.scrollIntoView({ block: "start", behavior: "auto" }); } - }, []) + }, []); useEffect(() => { - back2Top() - }, [pathname]) + back2Top(); + }, [pathname]); return ( @@ -36,7 +35,7 @@ function App() { - + @@ -44,8 +43,5 @@ function App() { ); } -// if (module.hot) { -// module.hot.accept(); -// } -// export default hot(App); + export default App; diff --git a/src/routes/routes.js b/src/routes/routes.js index 7d6266dc3..0bab6c795 100644 --- a/src/routes/routes.js +++ b/src/routes/routes.js @@ -3,10 +3,10 @@ * @author huangzongzhe * TODO: details modified to Resource */ -import React, { lazy } from "react"; -import { Navigate, useRoutes } from "react-router"; - +import React, { lazy, useEffect, useState } from "react"; +import { Navigate, useLocation, useNavigate, useRoutes } from "react-router"; import { ProposalRouter } from "../pages/Proposal/routes"; +import { guard } from "utils/guard"; // Notice: we need register the route in Breadcurmb.js. // If not, we will always turn to '/' @@ -14,7 +14,9 @@ const HomePage = lazy(() => import("../pages/Home/Home")); const BlocksPage = lazy(() => import("../pages/Blocks/BlockList")); const BlockDetailPage = lazy(() => import("../pages/BlockDetail/BlockDetail")); const TxsPage = lazy(() => import("../pages/Txs/TransactionList")); -const TxsDetailPage = lazy(() => import("../pages/TxsDetail/TransactionDetail")); +const TxsDetailPage = lazy(() => + import("../pages/TxsDetail/TransactionDetail") +); const VotePage = lazy(() => import("../pages/Vote/Vote")); const Resource = lazy(() => import("../pages/Resource/Resource")); const ResourceDetail = lazy(() => @@ -22,39 +24,51 @@ const ResourceDetail = lazy(() => ); const Accounts = lazy(() => import("../pages/Accounts/Accounts")); const Contracts = lazy(() => import("../pages/Contracts/Contracts")); -const AddressDetail = lazy(() => import("../pages/AddressDetail/AddressDetail")); +const AddressDetail = lazy(() => + import("../pages/AddressDetail/AddressDetail") +); const Tokens = lazy(() => import("../pages/Tokens/Tokens")); const TokenInfo = lazy(() => import("../pages/Token/Token")); const SearchFailed = lazy(() => import("../pages/SearchFailed/SearchFailed")); -const SearchInvalid = lazy(() => import("../pages/SearchInvalid/SearchInvalid")); +const SearchInvalid = lazy(() => + import("../pages/SearchInvalid/SearchInvalid") +); // eslint-disable-next-line import/prefer-default-export -export const PageRouter = () => - useRoutes( - ProposalRouter.concat([ - { path: "/", element: }, - { path: "/blocks", element: }, - { path: "/unconfirmedBlocks", element: }, - { path: "/block/:id", element: }, - { path: "/txs", element: }, - { path: "/unconfirmedTxs", element: }, - { path: "/txs/block", element: }, - { path: "/tx/:id", element: }, - { path: "/vote", element: }, - { path: "/vote/*", element: }, - { path: "/resource", element: }, - { path: "/resourceDetail/:id", element: }, - { path: "/token", element: }, - { path: "/token/:symbol", element: }, - { path: "/search-invalid/:string", element: }, - { path: "/search-invalid/*", element: }, - { path: "/search-failed", element: }, - { path: "/accounts", element: }, - // { path: "/contract", element: }, - { path: "/address/:address", element: }, - { path: "/contract/:address", element: }, - { path: "/address/:address/:codeHash", element: }, - { path: "/contracts", element: }, - { path: "*", element: }, - ]) - ); +export const PageRouter = ProposalRouter.concat([ + { path: "/", element: }, + { path: "/blocks", element: }, + { path: "/unconfirmedBlocks", element: }, + { path: "/block/:id", element: }, + { path: "/txs", element: }, + { path: "/unconfirmedTxs", element: }, + { path: "/txs/block", element: }, + { path: "/tx/:id", element: }, + { path: "/vote", element: }, + { path: "/vote/*", element: }, + { path: "/resource", element: }, + { path: "/resourceDetail/:id", element: }, + { path: "/token", element: }, + { path: "/token/:symbol", element: }, + { path: "/search-invalid/:string", element: }, + { path: "/search-invalid/*", element: }, + { path: "/search-failed", element: }, + { path: "/accounts", element: }, + // { path: "/contract", element: }, + { path: "/address/:address", element: }, + { path: "/contract/:address", element: }, + { path: "/address/:address/:codeHash", element: }, + { path: "/contracts", element: }, + { path: "*", element: }, +]); + +export const RouterGurad = ({ routes }) => { + const location = useLocation(); + const navigate = useNavigate(); + let [bo, setBo] = useState(false); + useEffect(() => { + setBo(guard(location, navigate, routes)); + }, [location, navigate, routes]); + const Route = useRoutes(routes); + return bo ? Route : null; +}; diff --git a/src/utils/guard.js b/src/utils/guard.js new file mode 100644 index 000000000..734358a2a --- /dev/null +++ b/src/utils/guard.js @@ -0,0 +1,45 @@ +// v1.2.2 change some url so have to map it +const RANDOM_URL_MAP = { + address: "accounts", + contract: "contracts", + token: "token", +}; +//global routes guard +export function guard(location, navigate) { + const { pathname } = location; + const hash = location.hash; + let url = ""; + let _, + route = "", + rest = []; + let item = ""; + //compatible with old url + if (hash) { + const decodeHash = decodeURIComponent(hash).substring(1); + if (decodeHash.indexOf("viewer") > -1) { + // handle url such as `/address?#http%3A%2F%2F10.147.20.67%3A8888%2Fviewer%2Faddress.html%23%2Faddress%2FYUW9zH5GhRboT5JK4vXp5BLAfCDv28rRmTQwo418FuaJmkSg8` + // and then jump to `/viewer/address.html#/address/YUW9zH5GhRboT5JK4vXp5BLAfCDv28rRmTQwo418FuaJmkSg8` + url = decodeHash; + } else if (pathname.indexOf("viewer") > -1) { + // handle url such as `/viewer/address.html#/address/YUW9zH5GhRboT5JK4vXp5BLAfCDv28rRmTQwo418FuaJmkSg8` + if (hash.indexOf("random") > -1) { + // handle url sunch as `/address?#http%3A%2F%2F10.147.20.67%3A8888%2Fviewer%2Faddress.html%23%2Faddress%3Frandom%3D9337b6a0` + // remove #/ + route = hash.split("?")[0].substr(2); + url = RANDOM_URL_MAP[route]; + } else if (pathname.indexOf("proposal") > -1) { + // handle proposal, becasue we add '/proposal' as parent url after repo merge + [_, route, ...rest] = hash.split("/"); + item = rest.join("/"); + url = `/proposal/${route}/${item}`; + } else { + [_, route, ...rest] = hash.split("/"); + item = rest.join("/"); + url = item ? `/${route}/${item}` : `/${route}`; + } + } + navigate(url); + return false; + } + return true; +}