Clean up app component
This commit is contained in:
parent
8e081c70f2
commit
d629e67b32
|
@ -1,20 +1,6 @@
|
|||
import React from "react";
|
||||
import { Link } from "react-router-dom";
|
||||
|
||||
import { ClusterProvider } from "./providers/cluster";
|
||||
import {
|
||||
TransactionsProvider,
|
||||
useTransactionsDispatch,
|
||||
useTransactions,
|
||||
ActionType
|
||||
} from "./providers/transactions";
|
||||
import {
|
||||
AccountsProvider,
|
||||
useSelectedAccount,
|
||||
useAccountsDispatch,
|
||||
ActionType as AccountActionType
|
||||
} from "./providers/accounts";
|
||||
import { BlocksProvider } from "./providers/blocks";
|
||||
import ClusterStatusButton from "./components/ClusterStatusButton";
|
||||
import AccountsCard from "./components/AccountsCard";
|
||||
import TransactionsCard from "./components/TransactionsCard";
|
||||
|
@ -28,82 +14,70 @@ function App() {
|
|||
const [showClusterModal, setShowClusterModal] = React.useState(false);
|
||||
const currentTab = useCurrentTab();
|
||||
return (
|
||||
<ClusterProvider>
|
||||
<AccountsProvider>
|
||||
<TransactionsProvider>
|
||||
<BlocksProvider>
|
||||
<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>
|
||||
<>
|
||||
<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>
|
||||
|
||||
<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)}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
<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>
|
||||
</div>
|
||||
<div className="col-auto d-none d-md-block">
|
||||
<ClusterStatusButton
|
||||
onClick={() => setShowClusterModal(true)}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<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)}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="container">
|
||||
<div className="row">
|
||||
<div className="col-12">
|
||||
{currentTab === "Transactions" ? (
|
||||
<TransactionsCard />
|
||||
) : null}
|
||||
</div>
|
||||
<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>
|
||||
</div>
|
||||
<div className="row">
|
||||
<div className="col-12">
|
||||
{currentTab === "Accounts" ? <AccountsCard /> : null}
|
||||
</div>
|
||||
<div className="col-auto d-none d-md-block">
|
||||
<ClusterStatusButton
|
||||
onClick={() => setShowClusterModal(true)}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<Overlay
|
||||
show={showClusterModal}
|
||||
onClick={() => setShowClusterModal(false)}
|
||||
/>
|
||||
</BlocksProvider>
|
||||
</TransactionsProvider>
|
||||
</AccountsProvider>
|
||||
</ClusterProvider>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="container">
|
||||
<div className="row">
|
||||
<div className="col-12">
|
||||
{currentTab === "Transactions" ? <TransactionsCard /> : null}
|
||||
</div>
|
||||
</div>
|
||||
<div className="row">
|
||||
<div className="col-12">
|
||||
{currentTab === "Accounts" ? <AccountsCard /> : null}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</>
|
||||
);
|
||||
}
|
||||
|
||||
|
@ -120,30 +94,4 @@ function NavLink({ href, tab }: { href: string; tab: Tab }) {
|
|||
);
|
||||
}
|
||||
|
||||
type OverlayProps = {
|
||||
show: boolean;
|
||||
onClick: () => void;
|
||||
};
|
||||
|
||||
function Overlay({ show, onClick }: OverlayProps) {
|
||||
const { selected } = useTransactions();
|
||||
const selectedAccount = useSelectedAccount();
|
||||
const txDispatch = useTransactionsDispatch();
|
||||
const accountDispatch = useAccountsDispatch();
|
||||
|
||||
if (show || !!selected || !!selectedAccount)
|
||||
return (
|
||||
<div
|
||||
className="modal-backdrop fade show"
|
||||
onClick={() => {
|
||||
onClick();
|
||||
txDispatch({ type: ActionType.Deselect });
|
||||
accountDispatch({ type: AccountActionType.Select });
|
||||
}}
|
||||
></div>
|
||||
);
|
||||
|
||||
return <div className="fade"></div>;
|
||||
}
|
||||
|
||||
export default App;
|
||||
|
|
|
@ -8,6 +8,7 @@ import {
|
|||
} from "../providers/accounts";
|
||||
import { TransactionError } from "@solana/web3.js";
|
||||
import Copyable from "./Copyable";
|
||||
import Overlay from "./Overlay";
|
||||
|
||||
function AccountModal() {
|
||||
const selected = useSelectedAccount();
|
||||
|
@ -37,9 +38,12 @@ function AccountModal() {
|
|||
};
|
||||
|
||||
return (
|
||||
<div className={`modal fade${show ? " show" : ""}`} onClick={onClose}>
|
||||
{renderContent()}
|
||||
</div>
|
||||
<>
|
||||
<div className={`modal fade${show ? " show" : ""}`} onClick={onClose}>
|
||||
{renderContent()}
|
||||
</div>
|
||||
<Overlay show={show} />
|
||||
</>
|
||||
);
|
||||
}
|
||||
|
||||
|
|
|
@ -10,6 +10,7 @@ import {
|
|||
Cluster
|
||||
} from "../providers/cluster";
|
||||
import { assertUnreachable } from "../utils";
|
||||
import Overlay from "./Overlay";
|
||||
|
||||
type Props = {
|
||||
show: boolean;
|
||||
|
@ -18,24 +19,28 @@ type Props = {
|
|||
|
||||
function ClusterModal({ show, onClose }: Props) {
|
||||
return (
|
||||
<div
|
||||
className={`modal fade fixed-right${show ? " show" : ""}`}
|
||||
onClick={onClose}
|
||||
>
|
||||
<div className="modal-dialog modal-dialog-vertical">
|
||||
<div className="modal-content">
|
||||
<div className="modal-body" onClick={e => e.stopPropagation()}>
|
||||
<span className="close" onClick={onClose}>
|
||||
×
|
||||
</span>
|
||||
<>
|
||||
<div
|
||||
className={`modal fade fixed-right${show ? " show" : ""}`}
|
||||
onClick={onClose}
|
||||
>
|
||||
<div className="modal-dialog modal-dialog-vertical">
|
||||
<div className="modal-content">
|
||||
<div className="modal-body" onClick={e => e.stopPropagation()}>
|
||||
<span className="close" onClick={onClose}>
|
||||
×
|
||||
</span>
|
||||
|
||||
<h2 className="text-center mb-4 mt-4">Choose a Cluster</h2>
|
||||
<h2 className="text-center mb-4 mt-4">Choose a Cluster</h2>
|
||||
|
||||
<ClusterToggle />
|
||||
<ClusterToggle />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<Overlay show={show} />
|
||||
</>
|
||||
);
|
||||
}
|
||||
|
||||
|
|
|
@ -0,0 +1,9 @@
|
|||
import React from "react";
|
||||
|
||||
type OverlayProps = {
|
||||
show: boolean;
|
||||
};
|
||||
|
||||
export default function Overlay({ show }: OverlayProps) {
|
||||
return <div className={`modal-backdrop fade${show ? " show" : ""}`}></div>;
|
||||
}
|
|
@ -14,6 +14,7 @@ import {
|
|||
TransactionInstruction
|
||||
} from "@solana/web3.js";
|
||||
import Copyable from "./Copyable";
|
||||
import Overlay from "./Overlay";
|
||||
|
||||
function TransactionModal() {
|
||||
const { selected } = useTransactions();
|
||||
|
@ -43,9 +44,12 @@ function TransactionModal() {
|
|||
};
|
||||
|
||||
return (
|
||||
<div className={`modal fade${show ? " show" : ""}`} onClick={onClose}>
|
||||
{renderContent()}
|
||||
</div>
|
||||
<>
|
||||
<div className={`modal fade${show ? " show" : ""}`} onClick={onClose}>
|
||||
{renderContent()}
|
||||
</div>
|
||||
<Overlay show={show} />
|
||||
</>
|
||||
);
|
||||
}
|
||||
|
||||
|
|
|
@ -4,12 +4,24 @@ import { BrowserRouter as Router } from "react-router-dom";
|
|||
import "./scss/theme.scss";
|
||||
import App from "./App";
|
||||
import * as serviceWorker from "./serviceWorker";
|
||||
import { ClusterProvider } from "./providers/cluster";
|
||||
import { BlocksProvider } from "./providers/blocks";
|
||||
import { TransactionsProvider } from "./providers/transactions";
|
||||
import { AccountsProvider } from "./providers/accounts";
|
||||
import { TabProvider } from "./providers/tab";
|
||||
|
||||
ReactDOM.render(
|
||||
<Router>
|
||||
<TabProvider>
|
||||
<App />
|
||||
<ClusterProvider>
|
||||
<AccountsProvider>
|
||||
<TransactionsProvider>
|
||||
<BlocksProvider>
|
||||
<App />
|
||||
</BlocksProvider>
|
||||
</TransactionsProvider>
|
||||
</AccountsProvider>
|
||||
</ClusterProvider>
|
||||
</TabProvider>
|
||||
</Router>,
|
||||
document.getElementById("root")
|
||||
|
|
|
@ -32,6 +32,10 @@ code {
|
|||
}
|
||||
}
|
||||
|
||||
.modal-backdrop {
|
||||
pointer-events: none;
|
||||
}
|
||||
|
||||
.modal.show {
|
||||
display: block;
|
||||
}
|
||||
|
|
Loading…
Reference in New Issue