2020-03-13 03:23:46 -07:00
|
|
|
import React from "react";
|
2020-04-24 08:12:37 -07:00
|
|
|
import { Link, Switch, Route, Redirect } from "react-router-dom";
|
2020-03-19 05:43:53 -07:00
|
|
|
|
2020-03-30 23:36:40 -07:00
|
|
|
import ClusterStatusButton from "./components/ClusterStatusButton";
|
2020-03-31 06:58:48 -07:00
|
|
|
import AccountsCard from "./components/AccountsCard";
|
2020-03-16 21:04:04 -07:00
|
|
|
import TransactionsCard from "./components/TransactionsCard";
|
2020-03-30 23:36:40 -07:00
|
|
|
import ClusterModal from "./components/ClusterModal";
|
2020-04-01 04:40:27 -07:00
|
|
|
import TransactionModal from "./components/TransactionModal";
|
2020-04-21 08:30:52 -07:00
|
|
|
import AccountModal from "./components/AccountModal";
|
2020-03-29 11:54:51 -07:00
|
|
|
import Logo from "./img/logos-solana/light-explorer-logo.svg";
|
2020-04-05 10:34:04 -07:00
|
|
|
import { useCurrentTab, Tab } from "./providers/tab";
|
2020-04-24 08:12:37 -07:00
|
|
|
import { TX_PATHS } from "./providers/transactions";
|
|
|
|
import { ACCOUNT_PATHS } from "./providers/accounts";
|
2020-03-13 02:07:58 -07:00
|
|
|
|
|
|
|
function App() {
|
2020-04-01 04:40:27 -07:00
|
|
|
const [showClusterModal, setShowClusterModal] = React.useState(false);
|
2020-03-13 02:07:58 -07:00
|
|
|
return (
|
2020-04-24 05:11:30 -07:00
|
|
|
<>
|
|
|
|
<ClusterModal
|
|
|
|
show={showClusterModal}
|
|
|
|
onClose={() => setShowClusterModal(false)}
|
|
|
|
/>
|
|
|
|
<TransactionModal />
|
|
|
|
<AccountModal />
|
|
|
|
<div className="main-content">
|
|
|
|
<nav className="navbar navbar-expand-xl navbar-light">
|
|
|
|
<div className="container">
|
|
|
|
<div className="row align-items-end">
|
|
|
|
<div className="col">
|
|
|
|
<img src={Logo} width="250" alt="Solana Explorer" />
|
|
|
|
</div>
|
|
|
|
</div>
|
|
|
|
</div>
|
|
|
|
</nav>
|
2020-04-05 10:34:04 -07:00
|
|
|
|
2020-04-24 05:11:30 -07:00
|
|
|
<div className="header">
|
|
|
|
<div className="container">
|
|
|
|
<div className="header-body">
|
|
|
|
<div className="row align-items-center d-md-none">
|
|
|
|
<div className="col-12">
|
|
|
|
<ClusterStatusButton
|
|
|
|
expand
|
|
|
|
onClick={() => setShowClusterModal(true)}
|
|
|
|
/>
|
2020-03-16 21:04:04 -07:00
|
|
|
</div>
|
2020-03-13 09:02:20 -07:00
|
|
|
</div>
|
2020-04-24 05:11:30 -07:00
|
|
|
<div className="row align-items-center">
|
|
|
|
<div className="col">
|
|
|
|
<ul className="nav nav-tabs nav-overflow header-tabs">
|
|
|
|
<li className="nav-item">
|
|
|
|
<NavLink href="/transactions" tab="Transactions" />
|
|
|
|
</li>
|
|
|
|
<li className="nav-item">
|
|
|
|
<NavLink href="/accounts" tab="Accounts" />
|
|
|
|
</li>
|
|
|
|
</ul>
|
2020-04-01 04:40:27 -07:00
|
|
|
</div>
|
2020-04-24 05:11:30 -07:00
|
|
|
<div className="col-auto d-none d-md-block">
|
|
|
|
<ClusterStatusButton
|
|
|
|
onClick={() => setShowClusterModal(true)}
|
|
|
|
/>
|
2020-04-01 04:40:27 -07:00
|
|
|
</div>
|
|
|
|
</div>
|
2020-03-31 06:58:48 -07:00
|
|
|
</div>
|
2020-04-24 05:11:30 -07:00
|
|
|
</div>
|
|
|
|
</div>
|
|
|
|
|
|
|
|
<div className="container">
|
2020-04-24 08:12:37 -07:00
|
|
|
<Switch>
|
|
|
|
<Route exact path="/">
|
|
|
|
<Redirect to="/transactions" />
|
|
|
|
</Route>
|
|
|
|
<Route path={TX_PATHS}>
|
|
|
|
<TransactionsCard />
|
|
|
|
</Route>
|
|
|
|
<Route path={ACCOUNT_PATHS}>
|
|
|
|
<AccountsCard />
|
|
|
|
</Route>
|
|
|
|
</Switch>
|
2020-04-24 05:11:30 -07:00
|
|
|
</div>
|
|
|
|
</div>
|
|
|
|
</>
|
2020-03-13 02:07:58 -07:00
|
|
|
);
|
|
|
|
}
|
|
|
|
|
2020-04-05 10:34:04 -07:00
|
|
|
function NavLink({ href, tab }: { href: string; tab: Tab }) {
|
|
|
|
let classes = "nav-link";
|
|
|
|
if (tab === useCurrentTab()) {
|
|
|
|
classes += " active";
|
|
|
|
}
|
|
|
|
|
|
|
|
return (
|
|
|
|
<Link to={href} className={classes}>
|
|
|
|
{tab}
|
|
|
|
</Link>
|
|
|
|
);
|
|
|
|
}
|
|
|
|
|
2020-03-13 02:07:58 -07:00
|
|
|
export default App;
|