Skip to content

Commit

Permalink
src: improved navigation, updated dependencies, added darknode map to…
Browse files Browse the repository at this point in the history
…oltip
  • Loading branch information
0x31 committed May 7, 2020
1 parent 58932d9 commit a1ac34d
Show file tree
Hide file tree
Showing 28 changed files with 948 additions and 683 deletions.
34 changes: 18 additions & 16 deletions package.json
Original file line number Diff line number Diff line change
Expand Up @@ -23,24 +23,24 @@
"@fortawesome/react-fontawesome": "^0.1.9",
"@renproject/contracts": "^0.5.1",
"@renproject/fonts": "^1.0.1",
"@renproject/interfaces": "^1.0.0-alpha.3",
"@renproject/react-components": "^1.0.0-alpha.3",
"@renproject/ren": "^1.0.0-alpha.3",
"@renproject/rpc": "^1.0.0-alpha.3",
"@sentry/browser": "^5.15.4",
"@sentry/integrations": "^5.15.4",
"@renproject/interfaces": "^1.0.0-alpha.6",
"@renproject/react-components": "^1.0.0-alpha.6",
"@renproject/ren": "^1.0.0-alpha.6",
"@renproject/rpc": "^1.0.0-alpha.6",
"@sentry/browser": "^5.15.5",
"@sentry/integrations": "^5.15.5",
"@types/bchaddrjs": "^0.4.0",
"@types/bs58": "^4.0.1",
"@types/filesize": "^5.0.0",
"@types/jest": "^25.2.1",
"@types/node": "^13.11.1",
"@types/node": "^13.13.5",
"@types/node-fetch": "^2.5.7",
"@types/query-string": "^6.3.0",
"@types/react": "^16.9.34",
"@types/react-circular-progressbar": "^1.1.0",
"@types/react-dom": "^16.9.6",
"@types/react-router-dom": "^5.1.4",
"@types/react-simple-maps": "^0.12.0",
"@types/react-dom": "^16.9.7",
"@types/react-router-dom": "^5.1.5",
"@types/react-simple-maps": "1.0.2",
"@types/react-transition-group": "4.2",
"@types/semver": "^7.1.0",
"apollo-boost": "^0.4.7",
Expand All @@ -51,23 +51,25 @@
"bs58": "^4.0.1",
"chart.js": "^2.9.3",
"chartjs-plugin-style": "^0.5.0",
"d3-geo-projection": "^2.9.0",
"filesize": "^6.1.0",
"graphql": "^15.0.0",
"history": "^4.10.1",
"immutable": "^4.0.0-rc.12",
"localforage": "^1.7.3",
"mocha": "^7.1.2",
"moment": "^2.24.0",
"node-sass": "^4.13.1",
"moment": "^2.25.3",
"node-sass": "^4.14.1",
"query-string": "^6.12.1",
"react": "^16.13.1",
"react-chartjs-2": "^2.9.0",
"react-circular-progressbar": "^2.0.3",
"react-dom": "^16.13.1",
"react-router-dom": "^5.1.2",
"react-scripts": "^3.4.1",
"react-simple-maps": "^0.12.1",
"react-transition-group": "4.3",
"react-simple-maps": "^2.0.0",
"react-tooltip": "^4.2.6",
"react-transition-group": "4.4",
"semver": "^7.3.2",
"typescript": "^3.8.3",
"unstated-next": "^1.1.0",
Expand All @@ -89,9 +91,9 @@
"npm-check-updates": "^4.1.2",
"ts-mocha": "^7.0.0",
"ts-unused-exports": "^6.1.2",
"tslint": "^6.1.1",
"tslint": "^6.1.2",
"tslint-microsoft-contrib": "^6.2.0",
"tslint-react": "^4.2.0"
"tslint-react": "^5.0.0"
},
"resolutions": {
"scrypt": "https://github.com/ren-forks/node-scrypt"
Expand Down
6 changes: 5 additions & 1 deletion src/components/App.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -10,11 +10,13 @@ import { AllDarknodes } from "./allDarknodesPage/AllDarknodes";
import { NotFound } from "./common/404";
import { BackgroundTasks } from "./common/BackgroundTasks";
import { _catch_ } from "./common/ErrorBoundary";
import { URLs } from "./common/ExternalLink";
import { Header } from "./common/Header";
import { LoggingIn } from "./common/LoggingIn";
import { PopupController } from "./common/popups/PopupController";
import { Sidebar } from "./common/sidebar/Sidebar";
import { Darknode, getDarknodeParam } from "./darknodePage/Darknode";
import { IntegratorsPage } from "./integratorsPage/IntegratorsPage";
import { Overview } from "./networkDarknodesPage/Overview";
import { NetworkStats } from "./networkStatsPage/NetworkStats";
import { RenVM } from "./renvmPage/RenVM";
Expand Down Expand Up @@ -71,6 +73,8 @@ export const App = withRouter(({ match: { params } }: Props) => {
{_catch_(<Switch>
{/* tslint:disable-next-line: react-this-binding-issue jsx-no-lambda */}
<Route path="/" exact component={NetworkStats} />
<Route path="/integrators" exact component={IntegratorsPage} />
<Route path="/integrators/:page" exact component={IntegratorsPage} />
<Route path="/darknode-stats" exact component={Overview} />
<Route path="/all" exact component={withAccount(AllDarknodes)} />
<Route path="/darknode/:darknodeID" exact component={Darknode} />
Expand All @@ -93,7 +97,7 @@ export const App = withRouter(({ match: { params } }: Props) => {
{/* 404 */}
<Route component={NotFound} />
</Switch>, { popup: true })}
<FeedbackButton url={"https://renprotocol.typeform.com/to/YdmFyB"} />
<FeedbackButton url={URLs.feedbackButton} />
</div>
{/* {_catch_(<Footer />)} */}
</PopupController>
Expand Down
13 changes: 13 additions & 0 deletions src/components/common/ExternalLink.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -3,6 +3,19 @@ import React from "react";
interface Props extends React.AnchorHTMLAttributes<HTMLAnchorElement> {
}

export const URLs = {
renProject: "https://renproject.io",
renProjectDevelopers: "https://renproject.io/developers",
feedbackButton: "https://renprotocol.typeform.com/to/YdmFyB",
ccGithub: "https://github.com/renproject/command-center",
gitbook: "https://docs.renproject.io/ren",
gitbookDevelopers: "https://docs.renproject.io/developers",
gitbookDarknodes: "https://docs.renproject.io/darknodes/",

welcomeToCommandCenter: "https://medium.com/renproject",
};


export const ExternalLink = ({ children, ...props }: Props) => {
// tslint:disable-next-line: react-a11y-anchors
return <a
Expand Down
6 changes: 3 additions & 3 deletions src/components/common/Footer.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -4,16 +4,16 @@ import { faGithub } from "@fortawesome/free-brands-svg-icons";
import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";

import { ReactComponent as Help } from "../../styles/images/help.svg";
import { ExternalLink } from "./ExternalLink";
import { ExternalLink, URLs } from "./ExternalLink";

export const Footer = () => {
return <div className="footer">
<div className="footer--left">
<div>Ren Command Center v2.01</div>
</div>
<div className="footer--right">
<div><ExternalLink href="https://github.com/renproject/command-center"><FontAwesomeIcon icon={faGithub} /><span>Github</span></ExternalLink></div>
<div><ExternalLink href="https://docs.renproject.io/ren/"><Help /><span>Help</span></ExternalLink></div>
<div><ExternalLink href={URLs.ccGithub}><FontAwesomeIcon icon={faGithub} /><span>Github</span></ExternalLink></div>
<div><ExternalLink href={URLs.gitbook}><Help /><span>Help</span></ExternalLink></div>
</div>
</div>;
};
56 changes: 27 additions & 29 deletions src/components/common/Header.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -10,9 +10,13 @@ import { NetworkStateContainer } from "../../store/networkStateContainer";
import { UIContainer } from "../../store/uiStore";
import { Web3Container } from "../../store/web3Store";
import { ReactComponent as RenVMIcon } from "../../styles/images/Icon-HyperDrive.svg";
import { ReactComponent as IntegratorsIcon } from "../../styles/images/icon-integrators.svg";
import { ReactComponent as NetworkIcon } from "../../styles/images/icon-network.svg";
import { ReactComponent as OverviewIcon } from "../../styles/images/Icon-Overview.svg";
// import { ReactComponent as English } from "../../styles/images/rp-flag-uk.svg";
import { AccountDropdown } from "./AccountDropdown";
import { ExternalLink, URLs } from "./ExternalLink";
import { MoreDropdown } from "./MoreDropdown";

// import { Search } from "./Search";

Expand Down Expand Up @@ -44,6 +48,15 @@ const getCurrencyOptions = () => {

const currencyOptions = getCurrencyOptions();

const MenuItem: React.FC<{ path: string, title: string, icon: JSX.Element, activePath: string }> = ({ path, title, icon, activePath }) =>
<Link className="no-underline" to={path}>
<li className={["header--group", activePath === path ? "header--group--active" : ""].join(" ")}>
<div className="header--selected">
{icon} <div>{title}</div>
</div>
</li>
</Link>;

interface Props extends RouteComponentProps {
}

Expand Down Expand Up @@ -106,45 +119,30 @@ export const Header = withRouter(({ location }: Props) => {

return (
<div className={["header"].join(" ")}>
{address ? <div role="button" className="header--mobile-menu--button">
<button onClick={showMobileMenu}>
<FontAwesomeIcon icon={faBars} />
</button>
</div> : <></>}
<Link className="no-underline" to="/">
<div className="header--logo" />
</Link>
<div className="new">
<ExternalLink href={URLs.welcomeToCommandCenter} className="new">
<span className="new-new">New</span>
<span className="new-blue">Welcome to the RenVM Command Center →</span>
</div>
</ExternalLink>
<div className="header--menu">
<Link className="no-underline" to="/">
<li className={["header--group", location.pathname === "/" ? "header--group--active" : ""].join(" ")}>
<div className="header--selected">
<OverviewIcon className="header--selected--icon" /> <div>Network</div>
</div>
</li>
</Link>
<Link className="no-underline" to="/darknode-stats">
<li className={["header--group", location.pathname === "/darknode-stats" ? "header--group--active" : ""].join(" ")}>
<div className="header--selected">
<OverviewIcon className="header--selected--icon" /> <div>Darknodes</div>
</div>
</li>
</Link>
<Link className="no-underline" to="/renvm">
<li className={["header--group", location.pathname.match("/(renvm|hyperdrive)") ? "header--group--active" : ""].join(" ")}>
<div className="header--selected">
<RenVMIcon className="header--selected--icon" /> <div>RenVM</div>
</div>
</li>
</Link>
<MenuItem path="/" title="Network" icon={<NetworkIcon />} activePath={location.pathname} />
<MenuItem path="/integrators" title="Integrators" icon={<IntegratorsIcon />} activePath={location.pathname} />
<MenuItem path="/darknode-stats" title="Darknodes" icon={<OverviewIcon />} activePath={location.pathname} />
<MenuItem path="/renvm" title="RenVM" icon={<RenVMIcon />} activePath={location.pathname} />

{/* {languageDropdownNode} */}
{currencyDropdownNode}
{networkDropdownNode}
{/* {networkDropdownNode} */}
<MoreDropdown />
<AccountDropdown />
</div>
<div role="button" className="header--mobile-menu--button">
<button onClick={showMobileMenu}>
<FontAwesomeIcon icon={faBars} />
</button>
</div>
</div>
);
});
61 changes: 61 additions & 0 deletions src/components/common/MoreDropdown.tsx
Original file line number Diff line number Diff line change
@@ -0,0 +1,61 @@
import * as React from "react";

import { classNames } from "../../lib/react/className";
import { ReactComponent as IconDropdown } from "../../styles/images/icon-dropdown.svg";
import { ExternalLink, URLs } from "./ExternalLink";

const Option: React.FC<{ href: string }> = ({ href, children }) =>
<ExternalLink href={href}><li role="button" className="header--dropdown--option">
{children}
</li></ExternalLink>;

// tslint:disable: react-unused-props-and-state
export const MoreDropdown: React.StatelessComponent<Props> = ({ }) => {
const [shown, setShown] = React.useState(false);

const ref = React.useRef(null as HTMLDivElement | null);

// tslint:disable-next-line: no-any
const clickAway = (event: any) => {
// tslint:disable-next-line: no-any
if (ref) {
const current = ref.current;
if ((current && !current.contains(event.target))) {
setShown(false);
}
}
document.removeEventListener("mousedown", clickAway);
// @ts-ignore
};

const toggle = () => {
const newShown = !shown;
setShown(newShown);

if (newShown) {
document.addEventListener("mousedown", clickAway);
} else {
document.removeEventListener("mousedown", clickAway);
}
};

return <div
className="header--group"
ref={ref}
>
<div className={classNames("header--selected")} role="menuitem" onClick={toggle}><span>More</span> <IconDropdown /></div>
{shown ?
<div className="header--dropdown--spacing header--dropdown--options">
<ul className="header--dropdown">
<Option href={URLs.renProjectDevelopers}>RenVM Developer Center</Option>
<Option href={URLs.renProject}>RenProject.io</Option>
<Option href={URLs.gitbook}>Documentation</Option>
<Option href={URLs.gitbookDevelopers}>Developer Docs</Option>
</ul>
</div> : <></>
}
</div>;
};

interface Props {
}
13 changes: 13 additions & 0 deletions src/components/common/StatusDot.tsx
Original file line number Diff line number Diff line change
@@ -0,0 +1,13 @@
import React, { FC } from "react";

import { classNames } from "../../lib/react/className";

export enum StatusDotColor {
Red = "red",
Yellow = "yellow",
Green = "green",
}

export const StatusDot: FC<{ color: StatusDotColor, size: number }> = ({ color, size }) => {
return <span style={{ width: size, height: size, minWidth: size, minHeight: size }} className={classNames("status-dot", `status-dot--${color}`)}><span /></span>;
};
Loading

0 comments on commit a1ac34d

Please sign in to comment.