2020-03-13 03:23:46 -07:00
|
|
|
import React from "react";
|
2020-08-01 08:32:25 -07:00
|
|
|
import { Switch, Route, Redirect } from "react-router-dom";
|
2020-03-19 05:43:53 -07:00
|
|
|
|
2020-08-07 23:45:57 -07:00
|
|
|
import { ClusterModal } from "components/ClusterModal";
|
|
|
|
import { MessageBanner } from "components/MessageBanner";
|
|
|
|
import { Navbar } from "components/Navbar";
|
2020-08-01 08:32:25 -07:00
|
|
|
import { ClusterStatusBanner } from "components/ClusterStatusButton";
|
2020-08-01 10:46:22 -07:00
|
|
|
import { SearchBar } from "components/SearchBar";
|
2020-03-13 02:07:58 -07:00
|
|
|
|
2020-08-07 23:45:57 -07:00
|
|
|
import { AccountDetailsPage } from "pages/AccountDetailsPage";
|
|
|
|
import { ClusterStatsPage } from "pages/ClusterStatsPage";
|
|
|
|
import { SupplyPage } from "pages/SupplyPage";
|
|
|
|
import { TransactionDetailsPage } from "pages/TransactionDetailsPage";
|
|
|
|
|
2020-08-14 07:58:38 -07:00
|
|
|
const ADDRESS_ALIASES = ["account", "accounts", "addresses"];
|
|
|
|
const TX_ALIASES = ["txs", "txn", "txns", "transaction", "transactions"];
|
2020-08-07 09:38:20 -07:00
|
|
|
|
2020-03-13 02:07:58 -07:00
|
|
|
function App() {
|
|
|
|
return (
|
2020-04-24 05:11:30 -07:00
|
|
|
<>
|
2020-04-29 05:48:38 -07:00
|
|
|
<ClusterModal />
|
2020-04-24 05:11:30 -07:00
|
|
|
<div className="main-content">
|
2020-08-01 08:32:25 -07:00
|
|
|
<Navbar />
|
|
|
|
<MessageBanner />
|
|
|
|
<ClusterStatusBanner />
|
2020-08-01 10:46:22 -07:00
|
|
|
<SearchBar />
|
2020-04-29 05:48:38 -07:00
|
|
|
<Switch>
|
2020-08-01 08:32:25 -07:00
|
|
|
<Route exact path={["/supply", "/accounts", "accounts/top"]}>
|
2020-08-07 23:45:57 -07:00
|
|
|
<SupplyPage />
|
2020-05-23 00:17:07 -07:00
|
|
|
</Route>
|
2020-04-29 05:48:38 -07:00
|
|
|
<Route
|
|
|
|
exact
|
2020-08-14 07:58:38 -07:00
|
|
|
path={TX_ALIASES.map((tx) => `/${tx}/:signature`)}
|
|
|
|
render={({ match, location }) => {
|
|
|
|
let pathname = `/tx/${match.params.signature}`;
|
|
|
|
return <Redirect to={{ ...location, pathname }} />;
|
|
|
|
}}
|
|
|
|
/>
|
|
|
|
<Route
|
|
|
|
exact
|
|
|
|
path={"/tx/:signature"}
|
2020-04-29 05:48:38 -07:00
|
|
|
render={({ match }) => (
|
2020-08-07 23:45:57 -07:00
|
|
|
<TransactionDetailsPage signature={match.params.signature} />
|
2020-04-29 05:48:38 -07:00
|
|
|
)}
|
|
|
|
/>
|
2020-05-12 03:32:14 -07:00
|
|
|
<Route
|
|
|
|
exact
|
2020-08-14 07:58:38 -07:00
|
|
|
path={[
|
|
|
|
...ADDRESS_ALIASES.map((path) => `/${path}/:address`),
|
|
|
|
...ADDRESS_ALIASES.map((path) => `/${path}/:address/:tab`),
|
|
|
|
]}
|
2020-08-07 09:38:20 -07:00
|
|
|
render={({ match, location }) => {
|
|
|
|
let pathname = `/address/${match.params.address}`;
|
|
|
|
if (match.params.tab) {
|
|
|
|
pathname += `/${match.params.tab}`;
|
|
|
|
}
|
|
|
|
return <Redirect to={{ ...location, pathname }} />;
|
|
|
|
}}
|
|
|
|
/>
|
|
|
|
<Route
|
|
|
|
exact
|
|
|
|
path={["/address/:address", "/address/:address/:tab"]}
|
2020-05-12 03:32:14 -07:00
|
|
|
render={({ match }) => (
|
2020-08-07 23:45:57 -07:00
|
|
|
<AccountDetailsPage
|
2020-08-07 09:38:20 -07:00
|
|
|
address={match.params.address}
|
|
|
|
tab={match.params.tab}
|
|
|
|
/>
|
2020-05-12 03:32:14 -07:00
|
|
|
)}
|
|
|
|
/>
|
2020-08-01 08:32:25 -07:00
|
|
|
<Route exact path="/">
|
2020-08-07 23:45:57 -07:00
|
|
|
<ClusterStatsPage />
|
2020-08-01 07:05:58 -07:00
|
|
|
</Route>
|
2020-08-01 08:32:25 -07:00
|
|
|
<Route
|
|
|
|
render={({ location }) => (
|
|
|
|
<Redirect to={{ ...location, pathname: "/" }} />
|
|
|
|
)}
|
|
|
|
/>
|
2020-04-29 05:48:38 -07:00
|
|
|
</Switch>
|
2020-04-24 05:11:30 -07:00
|
|
|
</div>
|
|
|
|
</>
|
2020-03-13 02:07:58 -07:00
|
|
|
);
|
|
|
|
}
|
|
|
|
|
|
|
|
export default App;
|