solana/explorer/src/App.tsx

68 lines
2.1 KiB
TypeScript
Raw Normal View History

2020-03-13 03:23:46 -07:00
import React from "react";
2020-03-19 05:43:53 -07:00
2020-03-30 23:36:40 -07:00
import { ClusterProvider } from "./providers/cluster";
import { TransactionsProvider } from "./providers/transactions";
2020-03-31 06:58:48 -07:00
import { AccountsProvider } from "./providers/accounts";
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";
import TransactionsCard from "./components/TransactionsCard";
2020-03-30 23:36:40 -07:00
import ClusterModal from "./components/ClusterModal";
import Logo from "./img/logos-solana/light-explorer-logo.svg";
2020-03-13 02:07:58 -07:00
function App() {
2020-03-19 03:18:58 -07:00
const [showModal, setShowModal] = React.useState(false);
2020-03-13 02:07:58 -07:00
return (
2020-03-30 23:36:40 -07:00
<ClusterProvider>
<ClusterModal show={showModal} onClose={() => setShowModal(false)} />
<div className="main-content">
<div className="header">
<div className="container">
<div className="header-body">
<div className="row align-items-end">
<div className="col">
<img src={Logo} width="250" alt="Solana Explorer" />
</div>
<div className="col-auto">
2020-03-30 23:36:40 -07:00
<ClusterStatusButton onClick={() => setShowModal(true)} />
</div>
</div>
2020-03-13 02:45:34 -07:00
</div>
</div>
</div>
<div className="container">
<div className="row">
<div className="col-12">
<TransactionsProvider>
<TransactionsCard />
</TransactionsProvider>
</div>
</div>
2020-03-31 06:58:48 -07:00
<div className="row">
<div className="col-12">
<AccountsProvider>
<AccountsCard />
</AccountsProvider>
</div>
</div>
</div>
2020-03-13 02:45:34 -07:00
</div>
2020-03-19 03:18:58 -07:00
<Overlay show={showModal} onClick={() => setShowModal(false)} />
2020-03-30 23:36:40 -07:00
</ClusterProvider>
2020-03-13 02:07:58 -07:00
);
}
2020-03-19 03:18:58 -07:00
type OverlayProps = {
show: boolean;
onClick: () => void;
};
function Overlay({ show, onClick }: OverlayProps) {
2020-03-19 05:43:53 -07:00
if (show)
return <div className="modal-backdrop fade show" onClick={onClick}></div>;
return <div className="fade"></div>;
2020-03-19 03:18:58 -07:00
}
2020-03-13 02:07:58 -07:00
export default App;