2020-03-13 03:23:46 -07:00
|
|
|
import React from "react";
|
2020-03-19 05:43:53 -07:00
|
|
|
|
2020-03-13 09:02:20 -07:00
|
|
|
import { NetworkProvider } from "./providers/network";
|
2020-03-16 21:04:04 -07:00
|
|
|
import { TransactionsProvider } from "./providers/transactions";
|
|
|
|
import NetworkStatusButton from "./components/NetworkStatusButton";
|
|
|
|
import TransactionsCard from "./components/TransactionsCard";
|
2020-03-19 03:18:58 -07:00
|
|
|
import NetworkModal from "./components/NetworkModal";
|
2020-03-29 11:54:51 -07:00
|
|
|
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-16 21:04:04 -07:00
|
|
|
<NetworkProvider>
|
2020-03-19 03:18:58 -07:00
|
|
|
<NetworkModal show={showModal} onClose={() => setShowModal(false)} />
|
2020-03-16 21:04:04 -07:00
|
|
|
<div className="main-content">
|
|
|
|
<div className="header">
|
|
|
|
<div className="container">
|
|
|
|
<div className="header-body">
|
|
|
|
<div className="row align-items-end">
|
|
|
|
<div className="col">
|
2020-03-29 11:54:51 -07:00
|
|
|
<img src={Logo} width="250" alt="Solana Explorer" />
|
2020-03-16 21:04:04 -07:00
|
|
|
</div>
|
|
|
|
<div className="col-auto">
|
2020-03-19 03:18:58 -07:00
|
|
|
<NetworkStatusButton onClick={() => setShowModal(true)} />
|
2020-03-16 21:04:04 -07:00
|
|
|
</div>
|
2020-03-13 09:02:20 -07:00
|
|
|
</div>
|
2020-03-13 02:45:34 -07:00
|
|
|
</div>
|
|
|
|
</div>
|
|
|
|
</div>
|
2020-03-16 21:04:04 -07:00
|
|
|
|
|
|
|
<div className="container">
|
|
|
|
<div className="row">
|
|
|
|
<div className="col-12">
|
|
|
|
<TransactionsProvider>
|
|
|
|
<TransactionsCard />
|
|
|
|
</TransactionsProvider>
|
|
|
|
</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-16 21:04:04 -07:00
|
|
|
</NetworkProvider>
|
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;
|