gaspersic/solana
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

Clean up app component

Browse Source
This commit is contained in:
Justin Starry
2020-04-24 20:11:30 +08:00
committed by Michael Vines
parent 8e081c70f2
commit d629e67b32
7 changed files with 115 additions and 129 deletions
Download Patch File Download Diff File Expand all files Collapse all files

166
explorer/src/App.tsx
View File

@ -1,20 +1,6 @@
import React from "react"; import React from "react";
import { Link } from "react-router-dom"; 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 ClusterStatusButton from "./components/ClusterStatusButton";
import AccountsCard from "./components/AccountsCard"; import AccountsCard from "./components/AccountsCard";
import TransactionsCard from "./components/TransactionsCard"; import TransactionsCard from "./components/TransactionsCard";
@ -28,82 +14,70 @@ function App() {
const [showClusterModal, setShowClusterModal] = React.useState(false); const [showClusterModal, setShowClusterModal] = React.useState(false);
const currentTab = useCurrentTab(); const currentTab = useCurrentTab();
return ( return (
<ClusterProvider> <>
<AccountsProvider> <ClusterModal
<TransactionsProvider> show={showClusterModal}
<BlocksProvider> onClose={() => setShowClusterModal(false)}
<ClusterModal />
show={showClusterModal} <TransactionModal />
onClose={() => setShowClusterModal(false)} <AccountModal />
/> <div className="main-content">
<TransactionModal /> <nav className="navbar navbar-expand-xl navbar-light">
<AccountModal /> <div className="container">
<div className="main-content"> <div className="row align-items-end">
<nav className="navbar navbar-expand-xl navbar-light"> <div className="col">
<div className="container"> <img src={Logo} width="250" alt="Solana Explorer" />
<div className="row align-items-end"> </div>
<div className="col"> </div>
<img src={Logo} width="250" alt="Solana Explorer" /> </div>
</div> </nav>
</div>
</div>
</nav>
<div className="header"> <div className="header">
<div className="container"> <div className="container">
<div className="header-body"> <div className="header-body">
<div className="row align-items-center d-md-none"> <div className="row align-items-center d-md-none">
<div className="col-12"> <div className="col-12">
<ClusterStatusButton <ClusterStatusButton
expand expand
onClick={() => setShowClusterModal(true)} 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> </div>
</div> </div>
<div className="row align-items-center">
<div className="container"> <div className="col">
<div className="row"> <ul className="nav nav-tabs nav-overflow header-tabs">
<div className="col-12"> <li className="nav-item">
{currentTab === "Transactions" ? ( <NavLink href="/transactions" tab="Transactions" />
<TransactionsCard /> </li>
) : null} <li className="nav-item">
</div> <NavLink href="/accounts" tab="Accounts" />
</li>
</ul>
</div> </div>
<div className="row"> <div className="col-auto d-none d-md-block">
<div className="col-12"> <ClusterStatusButton
{currentTab === "Accounts" ? <AccountsCard /> : null} onClick={() => setShowClusterModal(true)}
</div> />
</div> </div>
</div> </div>
</div> </div>
<Overlay </div>
show={showClusterModal} </div>
onClick={() => setShowClusterModal(false)}
/> <div className="container">
</BlocksProvider> <div className="row">
</TransactionsProvider> <div className="col-12">
</AccountsProvider> {currentTab === "Transactions" ? <TransactionsCard /> : null}
</ClusterProvider> </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; export default App;

10
explorer/src/components/AccountModal.tsx
View File

@ -8,6 +8,7 @@ import {
} from "../providers/accounts"; } from "../providers/accounts";
import { TransactionError } from "@solana/web3.js"; import { TransactionError } from "@solana/web3.js";
import Copyable from "./Copyable"; import Copyable from "./Copyable";
import Overlay from "./Overlay";
function AccountModal() { function AccountModal() {
const selected = useSelectedAccount(); const selected = useSelectedAccount();
@ -37,9 +38,12 @@ function AccountModal() {
}; };
return ( return (
<div className={`modal fade${show ? " show" : ""}`} onClick={onClose}> <>
{renderContent()} <div className={`modal fade${show ? " show" : ""}`} onClick={onClose}>
</div> {renderContent()}
</div>
<Overlay show={show} />
</>
); );
} }

31
explorer/src/components/ClusterModal.tsx
View File

@ -10,6 +10,7 @@ import {
Cluster Cluster
} from "../providers/cluster"; } from "../providers/cluster";
import { assertUnreachable } from "../utils"; import { assertUnreachable } from "../utils";
import Overlay from "./Overlay";
type Props = { type Props = {
show: boolean; show: boolean;
@ -18,24 +19,28 @@ type Props = {
function ClusterModal({ show, onClose }: Props) { function ClusterModal({ show, onClose }: Props) {
return ( return (
<div <>
className={`modal fade fixed-right${show ? " show" : ""}`} <div
onClick={onClose} className={`modal fade fixed-right${show ? " show" : ""}`}
> onClick={onClose}
<div className="modal-dialog modal-dialog-vertical"> >
<div className="modal-content"> <div className="modal-dialog modal-dialog-vertical">
<div className="modal-body" onClick={e => e.stopPropagation()}> <div className="modal-content">
<span className="close" onClick={onClose}> <div className="modal-body" onClick={e => e.stopPropagation()}>
&times; <span className="close" onClick={onClose}>
</span> &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>
</div> </div>
</div>
<Overlay show={show} />
</>
); );
} }

9
explorer/src/components/Overlay.tsx Normal file
View File

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

10
explorer/src/components/TransactionModal.tsx
View File

@ -14,6 +14,7 @@ import {
TransactionInstruction TransactionInstruction
} from "@solana/web3.js"; } from "@solana/web3.js";
import Copyable from "./Copyable"; import Copyable from "./Copyable";
import Overlay from "./Overlay";
function TransactionModal() { function TransactionModal() {
const { selected } = useTransactions(); const { selected } = useTransactions();
@ -43,9 +44,12 @@ function TransactionModal() {
}; };
return ( return (
<div className={`modal fade${show ? " show" : ""}`} onClick={onClose}> <>
{renderContent()} <div className={`modal fade${show ? " show" : ""}`} onClick={onClose}>
</div> {renderContent()}
</div>
<Overlay show={show} />
</>
); );
} }

14
explorer/src/index.tsx
View File

@ -4,12 +4,24 @@ import { BrowserRouter as Router } from "react-router-dom";
import "./scss/theme.scss"; import "./scss/theme.scss";
import App from "./App"; import App from "./App";
import * as serviceWorker from "./serviceWorker"; 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"; import { TabProvider } from "./providers/tab";
ReactDOM.render( ReactDOM.render(
<Router> <Router>
<TabProvider> <TabProvider>
<App /> <ClusterProvider>
<AccountsProvider>
<TransactionsProvider>
<BlocksProvider>
<App />
</BlocksProvider>
</TransactionsProvider>
</AccountsProvider>
</ClusterProvider>
</TabProvider> </TabProvider>
</Router>, </Router>,
document.getElementById("root") document.getElementById("root")

4
explorer/src/scss/_solana.scss
View File

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