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,10 +14,7 @@ function App() {
   const [showClusterModal, setShowClusterModal] = React.useState(false);
   const currentTab = useCurrentTab();
   return (
-    <ClusterProvider>
-      <AccountsProvider>
-        <TransactionsProvider>
-          <BlocksProvider>
+    <>
       <ClusterModal
         show={showClusterModal}
         onClose={() => setShowClusterModal(false)}
@@ -84,9 +67,7 @@ function App() {
         <div className="container">
           <div className="row">
             <div className="col-12">
-                    {currentTab === "Transactions" ? (
-                      <TransactionsCard />
-                    ) : null}
+              {currentTab === "Transactions" ? <TransactionsCard /> : null}
             </div>
           </div>
           <div className="row">
@@ -96,14 +77,7 @@ function App() {
           </div>
         </div>
       </div>
-            <Overlay
-              show={showClusterModal}
-              onClick={() => setShowClusterModal(false)}
-            />
-          </BlocksProvider>
-        </TransactionsProvider>
-      </AccountsProvider>
-    </ClusterProvider>
+    </>
   );
 }
 
@@ -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>
+      <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,6 +19,7 @@ type Props = {
 
 function ClusterModal({ show, onClose }: Props) {
   return (
+    <>
       <div
         className={`modal fade fixed-right${show ? " show" : ""}`}
         onClick={onClose}
@@ -36,6 +38,9 @@ function ClusterModal({ show, onClose }: Props) {
           </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>
+      <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>
+      <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;
 }