Clean up app component

explorer/src/App.tsx

@@ -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;

explorer/src/components/AccountModal.tsx

@@ -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} />
+    </>
   );
 }
 

explorer/src/components/ClusterModal.tsx

@@ -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}>
-              &times;
-            </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}>
+                &times;
+              </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} />
+    </>
   );
 }
 

explorer/src/components/Overlay.tsx

@@ -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>;
+}

explorer/src/components/TransactionModal.tsx

@@ -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} />
+    </>
   );
 }
 

explorer/src/index.tsx

@@ -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")

explorer/src/scss/_solana.scss

@@ -32,6 +32,10 @@ code {
   }
 }
 
+.modal-backdrop {
+  pointer-events: none;
+}
+
 .modal.show {
   display: block;
 }