Merge pull request #7 from akegaviar/feat/validators-page

Validators page

README.md

@@ -28,6 +28,10 @@ Subnet attributes details:
 }
 ```
 
+## Adding a validator
+
+If you're currently running your own validator and you're open to whitelist someone's subnet, you can add your details here.
+
 ## Getting Started
 
 This is a [Next.js](https://nextjs.org/) project bootstrapped with [`create-next-app`](https://github.com/vercel/next.js/tree/canary/packages/create-next-app).

components/header/header.js

@@ -19,6 +19,7 @@ import {
 import stores from '../../stores'
 import { formatAddress, getProvider } from '../../utils'
 
+import Navigation from '../navigation/navigation'
 import classes from './header.module.css'
 
 const StyledSwitch = withStyles((theme) => ({
@@ -140,8 +141,7 @@ function Header(props) {
           </Button>
         </div>
       )}
-      {/* TODO: toggle to filter live subnets */}
-      {/* <Switch label="Include testnets" defaultChecked color="primary"></Switch> */}
+
       <div className={classes.themeSelectContainer}>
         <StyledSwitch
           icon={<Brightness2Icon className={classes.switchIcon} />}

components/header/header.module.css

@@ -9,7 +9,7 @@
   align-items: center;
   margin-left: 12px !important;
   min-height: 40px;
-  width: 250px;
+  width: 200px;
 }
 
 .accountIcon {

components/navigation/navigation.js

@@ -0,0 +1,72 @@
+import { Link, Tabs, Tab, Button, ButtonGroup } from '@material-ui/core'
+
+import classes from './navigation.module.css'
+import AddIcon from '@material-ui/icons/AddCircle'
+import ValidatorIcon from '@material-ui/icons/AccountBalance'
+import InfoOutlinedIcon from '@material-ui/icons/InfoOutlined'
+import RouterOutlinedIcon from '@material-ui/icons/RouterOutlined'
+export default function Navigation() {
+  return (
+    <nav className={classes.navContainer}>
+      {/* <Link href="/">Subnets</Link>
+      <Link href="/validators">Validators</Link>
+      <Link href="/subnets-information">Info</Link> */}
+
+      {/* <Tabs indicatorColor="primary" textColor="primary" color="primary">
+        <Tab label="Subnets" icon={<RouterOutlinedIcon />} href="/" />
+        <Tab label="Validators" icon={<ValidatorIcon />} href="/validators" />
+        <Tab
+          label="Info"
+          icon={<InfoOutlinedIcon />}
+          href="/subnets-information"
+        />
+      </Tabs> */}
+
+      {/* <ButtonGroup
+        className={classes.navContainer}
+        color="primary"
+        variant="text"
+        size="medium"
+        aria-label="large outlined primary button group"
+      >
+        <Button icon={<RouterOutlinedIcon />} href="/">
+          Subnets
+        </Button>
+        <Button icon={<ValidatorIcon />} href="/validators">
+          Validators
+        </Button>
+        <Button icon={<InfoOutlinedIcon />} href="/subnets-information">
+          Info
+        </Button>
+      </ButtonGroup> */}
+
+      <Button
+        variant="text"
+        color="primary"
+        startIcon={<RouterOutlinedIcon />}
+        href="/"
+        className={classes.navItem}
+      >
+        Subnets
+      </Button>
+      <Button
+        variant="text"
+        color="primary"
+        startIcon={<ValidatorIcon />}
+        href="/validators"
+        className={classes.navItem}
+      >
+        Validators
+      </Button>
+      <Button
+        variant="text"
+        color="primary"
+        startIcon={<InfoOutlinedIcon />}
+        href="/subnets-information"
+        className={classes.navItem}
+      >
+        Info
+      </Button>
+    </nav>
+  )
+}

components/navigation/navigation.module.css

@@ -0,0 +1,17 @@
+.navContainer {
+  display: flex;
+  margin: 10px 15px;
+  gap: 15px;
+}
+
+.navItem {
+  padding: 5px 10px;
+  font-size: 1.2rem !important;
+}
+
+/* @media screen and(max-width: 600px) {
+  .navContainer {
+    width: 100%;
+    flex-wrap: wrap;
+  }
+} */

components/navigation/package.json

@@ -0,0 +1,3 @@
+{
+  "main": "navigation.js"
+}

components/sidebar/package.json

@@ -0,0 +1,3 @@
+{
+  "main": "sidebar.js"
+}

components/sidebar/sidebar.js

@@ -0,0 +1,93 @@
+import {
+  Grid,
+  Typography,
+  Button,
+  TextField,
+  InputAdornment,
+  Paper,
+  Link,
+} from '@material-ui/core'
+
+import classes from '../../pages/index.module.css'
+import AddIcon from '@material-ui/icons/AddCircle'
+import ValidatorIcon from '@material-ui/icons/AccountBalance'
+
+export default function Sidebar({}) {
+  const addNetwork = () => {
+    window.open(
+      'https://github.com/akegaviar/subnet-tech#adding-a-subnet',
+      '_blank'
+    )
+  }
+  const addValidator = () => {
+    window.open(
+      'https://github.com/akegaviar/subnet-tech#adding-a-validator',
+      '_blank'
+    )
+  }
+  return (
+    <div className={classes.copyContainer}>
+      <div className={classes.copyCentered}>
+        <Typography variant="h1" className={classes.chainListSpacing}>
+          <span className={classes.helpingUnderline}>subnet.tech</span>
+        </Typography>
+        <Typography variant="h2" className={classes.helpingParagraph}>
+          Connect to all Avalanche subnets
+        </Typography>
+        <Typography className={classes.subTitle}>
+          <strong className={classes.redText}>subnet.tech</strong> is an{' '}
+          <strong>
+            aggregator of Avalanche subnets, projects, validators, and
+            educational resources
+          </strong>{' '}
+          around Avalanche subnets.
+        </Typography>
+
+        <div className={classes.navContainer}>
+          <Button
+            size="large"
+            color="primary"
+            variant="contained"
+            className={classes.addNetworkButton}
+            onClick={addNetwork}
+            startIcon={<AddIcon />}
+          >
+            <Typography className={classes.buttonLabel}>
+              Add your subnet
+            </Typography>
+          </Button>
+          <Button
+            size="large"
+            color="primary"
+            variant="contained"
+            className={classes.addNetworkButton}
+            onClick={addValidator}
+            startIcon={<ValidatorIcon />}
+          >
+            <Typography className={classes.buttonLabel}>
+              Add your validator
+            </Typography>
+          </Button>
+        </div>
+        <div className={classes.socials}>
+          <a
+            className={`${classes.socialButton}`}
+            href="https://github.com/akegaviar/subnet-tech"
+            target="_blank"
+            rel="noopener noreferrer"
+          >
+            <svg version="1.1" width="24" height="24" viewBox="0 0 24 24">
+              <path
+                fill={'#E35335'}
+                d="M12,2A10,10 0 0,0 2,12C2,16.42 4.87,20.17 8.84,21.5C9.34,21.58 9.5,21.27 9.5,21C9.5,20.77 9.5,20.14 9.5,19.31C6.73,19.91 6.14,17.97 6.14,17.97C5.68,16.81 5.03,16.5 5.03,16.5C4.12,15.88 5.1,15.9 5.1,15.9C6.1,15.97 6.63,16.93 6.63,16.93C7.5,18.45 8.97,18 9.54,17.76C9.63,17.11 9.89,16.67 10.17,16.42C7.95,16.17 5.62,15.31 5.62,11.5C5.62,10.39 6,9.5 6.65,8.79C6.55,8.54 6.2,7.5 6.75,6.15C6.75,6.15 7.59,5.88 9.5,7.17C10.29,6.95 11.15,6.84 12,6.84C12.85,6.84 13.71,6.95 14.5,7.17C16.41,5.88 17.25,6.15 17.25,6.15C17.8,7.5 17.45,8.54 17.35,8.79C18,9.5 18.38,10.39 18.38,11.5C18.38,15.32 16.04,16.16 13.81,16.41C14.17,16.72 14.5,17.33 14.5,18.26C14.5,19.6 14.5,20.68 14.5,21C14.5,21.27 14.66,21.59 15.17,21.5C19.14,20.16 22,16.42 22,12A10,10 0 0,0 12,2Z"
+              />
+            </svg>
+            <Typography variant="body1" className={classes.sourceCode}>
+              View source
+            </Typography>
+          </a>
+        </div>
+      </div>
+    </div>
+  )
+}

components/validator/package.json

@@ -0,0 +1,3 @@
+{
+  "main": "validator.js"
+}

components/validator/validator.js

@@ -0,0 +1,37 @@
+import React, { useState, useEffect, useMemo } from 'react'
+
+import classes from './validator.module.css'
+import { Typography, Paper, Link } from '@material-ui/core'
+
+import MonetizationOnIcon from '@material-ui/icons/MonetizationOn'
+import ReceiptIcon from '@material-ui/icons/Receipt'
+
+export default function Validator({ validator }) {
+  return (
+    <Paper elevation={1} key={validator.nodeID}>
+      <div className={classes.validatorCard}>
+        <Typography variant="h3" className={classes.name} noWrap>
+          {validator.nodeID}
+        </Typography>
+        <div className={classes.validatorInfoContainer}>
+          <div className={classes.rowInfo}>
+            <MonetizationOnIcon color="primary" />
+            <Typography>
+              {validator.totalStake} {'AVAX total stake'}
+            </Typography>
+          </div>
+          <div className={classes.rowInfo}>
+            <ReceiptIcon color="primary" />
+            <Typography align-content="center">
+              {validator.feePercentage}
+              {'% validator fee'}
+            </Typography>
+          </div>
+          {validator.openToValidate && (
+            <Link href={validator.contactDetails.email}>Contact</Link>
+          )}
+        </div>
+      </div>
+    </Paper>
+  )
+}

components/validator/validator.module.css

@@ -0,0 +1,20 @@
+.validatorCard {
+  width: 100%;
+  padding: 20px;
+}
+
+.validatorInfoContainer {
+  display: flex;
+  margin-top: 20px;
+  flex-direction: column;
+  align-items: center;
+  justify-content: space-around;
+  /* margin-left: 22px; */
+  margin-bottom: 20px;
+  gap: 20px;
+}
+.rowInfo {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+}

components/validator/validators.json

@@ -0,0 +1,51 @@
+[
+  {
+    "nodeID": "NodeID-FKGhEFYnHUdFadoR2ePvdTTM5Sz8tgjHp",
+    "description": "Some node ",
+    "totalStake": 7391,
+    "feePercentage": 2,
+    "openToValidate": false
+  },
+  {
+    "nodeID": "NodeID-5Uf5RUZ89pWtYj4Sgc7pxf1mkq2f4EEMW",
+    "description": "Some node ",
+    "totalStake": 23496,
+    "feePercentage": 2,
+    "openToValidate": false
+  },
+  {
+    "nodeID": "NodeID-KQocfzJn3D4V4gBGPYsUB9Es7nT28Atvq",
+    "description": "Some node ",
+    "totalStake": 13683,
+    "feePercentage": 2,
+    "openToValidate": false
+  },
+  {
+    "nodeID": "NodeID-41mvUJUdqhRjP7pX9BB7R89PXkDhC7f7i",
+    "description": "Some node ",
+    "totalStake": 3197,
+    "feePercentage": 2,
+    "openToValidate": false
+  },
+  {
+    "nodeID": "NodeID-3kE1YV67tGPurH88UQc1itBixeEh28gUu",
+    "description": "Some node ",
+    "totalStake": 18259,
+    "feePercentage": 2,
+    "openToValidate": false
+  },
+  {
+    "nodeID": "NodeID-NvcQwEs2mXSvWyZxRssZMVsaqDxQxuBFQ",
+    "description": "Some node ",
+    "totalStake": 10177,
+    "feePercentage": 2,
+    "openToValidate": false
+  },
+  {
+    "nodeID": "NodeID-KLiUDfG672VocEHwbAwGxxFdCHovg1Zp5",
+    "description": "Some node ",
+    "totalStake": 9785,
+    "feePercentage": 2,
+    "openToValidate": false
+  }
+]

components/validatorsad/package.json

@@ -0,0 +1,3 @@
+{
+  "main": "validatorsad.js"
+}

components/validatorsad/validatorsad.js

@@ -0,0 +1,43 @@
+import React, { useState, useEffect, useMemo } from 'react'
+
+import classes from './validatorsad.module.css'
+import { Typography, Paper, Button } from '@material-ui/core'
+import ArrowForwardIcon from '@material-ui/icons/ArrowForward'
+
+export default function Validator({}) {
+  const navigateToAvaxsubnet = () => {
+    window.open(
+      'https://chainstack.com/permissioned-chains-avalanche-subnets/',
+      '_blank'
+    )
+  }
+  return (
+    <Paper elevation={1} className={classes.validatorAdCard}>
+      <div className={classes.topInfo}>
+        <img
+          src="/chainstack-subnet.png"
+          width={64}
+          height={64}
+          className={classes.avatar}
+        />
+        <div className={classes.textContainer}>
+          <Typography variant="h3">
+            Run your validators with Chainstack.
+          </Typography>
+          <Button
+            className={classes.tryButton}
+            variant="contained"
+            disableElevation
+            onClick={navigateToAvaxsubnet}
+            color="secondary"
+            endIcon={<ArrowForwardIcon />}
+          >
+            <Typography className={classes.buttonLabel}>
+              Try out <b>chainstack.com</b>
+            </Typography>
+          </Button>
+        </div>
+      </div>
+    </Paper>
+  )
+}