Merge pull request #65 from eco-stake/featured-networks

Featured networks

src/components/DelegateForm.js

@@ -4,11 +4,11 @@ import { MsgDelegate, MsgUndelegate, MsgBeginRedelegate } from "cosmjs-types/cos
 import {
   Button,
   Form,
-  Alert
 } from 'react-bootstrap'
 
 import { pow, multiply, divide, subtract, bignumber } from 'mathjs'
 
+import AlertMessage from './AlertMessage'
 import Coins from './Coins'
 import { buildExecMessage, coin } from '../utils/Helpers.mjs'
 
@@ -144,10 +144,15 @@ function DelegateForm(props) {
 
   return (
     <>
+      {!state.error && (selectedValidator?.active ?? validator?.active) === false &&
+        <AlertMessage variant="info" dismissible={false}>
+          {(selectedValidator || validator).moniker} is inactive - you will not receive any staking rewards until they are in the active set.
+        </AlertMessage>
+      }
       {state.error &&
-        <Alert variant="danger">
+        <AlertMessage variant="danger">
           {state.error}
-        </Alert>
+        </AlertMessage>
       }
         <Form onSubmit={handleSubmit}>
           <fieldset disabled={!address || !wallet}>

src/components/Networks.js

@@ -22,7 +22,7 @@ function Networks(props) {
     let filtered = filteredNetworks(networks, filter)
     let group = filter.group
     while(filtered.length < 1 && group !== 'all'){
-      group = 'all'
+      group = group == 'featured' ? 'all' : 'featured'
       filtered = filteredNetworks(networks, {...filter, group})
       if(filtered.length > 0 || group === 'all'){
         return setFilter({ ...filter, group })
@@ -43,6 +43,9 @@ function Networks(props) {
       case 'favourites':
         searchResults = searchResults.filter((network) => favourites.includes(network.path))
         break;
+      case 'featured':
+        searchResults = searchResults.filter((network) => network.ownerAddress)
+        break;
     }
 
     if (!keywords || keywords === '') return searchResults
@@ -56,7 +59,7 @@ function Networks(props) {
   }
 
   async function changeNetwork(network){
-    if(!network.online) return 
+    if(!network.online) return
 
     await network.load()
     await network.connect()
@@ -125,6 +128,9 @@ function Networks(props) {
             <Nav.Item>
               <Nav.Link eventKey="favourites" disabled={filteredNetworks(networks, {...filter, group: 'favourites'}).length < 1}>Favourites</Nav.Link>
             </Nav.Item>
+            <Nav.Item>
+              <Nav.Link eventKey="featured" disabled={filteredNetworks(networks, {...filter, group: 'featured'}).length < 1}>Featured</Nav.Link>
+            </Nav.Item>
             <Nav.Item>
               <Nav.Link eventKey="all">All Networks</Nav.Link>
             </Nav.Item>
@@ -133,6 +139,7 @@ function Networks(props) {
         <div className="d-flex d-lg-none justify-content-end">
           <select className="form-select w-auto h-auto d-lg-none" aria-label="Network group" value={filter.group} onChange={(e) => setFilter({...filter, group: e.target.value})}>
             <option value="favourites" disabled={filteredNetworks(networks, {...filter, group: 'favourites'}).length < 1}>Favourites</option>
+            <option value="featured" disabled={filteredNetworks(networks, {...filter, group: 'featured'}).length < 1}>Featured</option>
             <option value="all">All</option>
           </select>
         </div>
@@ -144,4 +151,4 @@ function Networks(props) {
   );
 }
 
-export default Networks;
+export default Networks;

src/components/SendModal.js

@@ -48,7 +48,7 @@ function SendModal(props) {
     if(!valid()) return
 
     showLoading(true)
-
+    setError(null)
 
     const coinValue = coinAmount()
 

src/components/Validators.js

@@ -21,6 +21,7 @@ import { XCircle } from "react-bootstrap-icons";
 import ValidatorName from "./ValidatorName";
 import ValidatorServices from './ValidatorServices';
 import REStakeStatus from './REStakeStatus';
+import AlertMessage from './AlertMessage';
 
 function Validators(props) {
   const { address, wallet, network, validators, operators, delegations, operatorGrants } = props
@@ -58,7 +59,7 @@ function Validators(props) {
       return 0 - (delegation?.balance?.amount || 0)
     });
     return _.sortBy(validators, ({ operator_address: address, public_nodes, path }) => {
-      if(network.data.ownerAddress === address) return -6
+      if(network.ownerAddress === address) return -6
       if(path === 'ecostake') return -5
 
       const delegation = delegations && delegations[address]
@@ -128,6 +129,10 @@ function Validators(props) {
     return operators.find((el) => el.address === validatorAddress);
   }
 
+  function ownerValidator(){
+    return Object.values(validators).find(validator => validator.address === network.ownerAddress)
+  }
+
   function renderValidator(validator) {
     const validatorAddress = validator.operator_address
     const delegation = delegations && delegations[validatorAddress];
@@ -289,6 +294,13 @@ function Validators(props) {
 
   return (
     <>
+      {ownerValidator() && !ownerValidator().active && (
+        <AlertMessage variant="info" dismissible={false}>
+          <div role="button" onClick={() => props.showValidator(ownerValidator(), { activeTab: 'profile' })}>
+            {ownerValidator().moniker} is currently inactive on {network.prettyName}. Help support our projects by <u>staking with us</u>.
+          </div>
+        </AlertMessage>
+      )}
       <div className="d-flex flex-wrap justify-content-between align-items-start mb-3 position-relative">
         <div className="d-none d-sm-flex">
           <div className="input-group">

src/utils/Network.mjs

@@ -14,6 +14,7 @@ class Network {
     this.data = data
     this.enabled = data.enabled
     this.experimental = data.experimental
+    this.ownerAddress = data.ownerAddress
     this.operatorAddresses = operatorAddresses || {}
     this.operatorCount = data.operators?.length || this.estimateOperatorCount()
     this.name = data.path || data.name
@@ -157,8 +158,8 @@ class Network {
 
   sortOperators() {
     const random = _.shuffle(this.operators)
-    if (this.data.ownerAddress) {
-      return _.sortBy(random, ({ address }) => address === this.data.ownerAddress ? 0 : 1)
+    if (this.ownerAddress) {
+      return _.sortBy(random, ({ address }) => address === this.ownerAddress ? 0 : 1)
     }
     return random
   }