Merge pull request #123 from eco-stake/release-v0.3.0

Release v0.3.0

package.json

@@ -32,8 +32,7 @@
     "start": "npx parcel src/index.html",
     "prebuild": "rm -rf dist/",
     "build": "npx parcel build src/index.html",
-    "autostake": "node scripts/autostake.mjs",
-    "registryConfig": "node scripts/registryConfig.mjs"
+    "autostake": "node scripts/autostake.mjs"
   },
   "eslintConfig": {
     "extends": [

scripts/autostake.mjs

@@ -86,15 +86,15 @@ class Autostake {
     const accounts = await wallet.getAccounts()
     const botAddress = accounts[0].address
 
-    console.log(data.prettyName, 'bot address is', botAddress)
+    console.log(network.prettyName, 'bot address is', botAddress)
 
     const client = await network.signingClient(wallet)
     if(client.connected){
       client.registry.register("/cosmos.authz.v1beta1.MsgExec", MsgExec)
     }
 
     let validators = {}
-    if(data.operators.find(el => el.botAddress === botAddress)){
+    if(network.operators.find(el => el.botAddress === botAddress)){
       validators = await network.getValidators()
     }
     const operators = network.getOperators(validators)

src/components/App.js

@@ -75,8 +75,6 @@ class App extends React.Component {
 
     return this.setState({
       error: false,
-      chainId: network.chainId,
-      denom: network.denom,
       restClient: network.restClient
     })
   }
@@ -91,10 +89,16 @@ class App extends React.Component {
         error: 'Could not connect to any available API servers'
       })
     }
-    await window.keplr.enable(this.state.chainId);
+    const chainId = this.props.network.chainId
+    try {
+      await window.keplr.enable(chainId);
+    } catch (e) {
+      console.log(e.message, e)
+      await this.suggestChain(this.props.network)
+    }
     if (window.getOfflineSigner){
-      const offlineSigner = await window.getOfflineSignerAuto(this.state.chainId)
-      const key = await window.keplr.getKey(this.state.chainId);
+      const offlineSigner = await window.getOfflineSignerAuto(chainId)
+      const key = await window.keplr.getKey(chainId);
       const stargateClient = await this.props.network.signingClient(offlineSigner, key)
       if(!stargateClient.connected){
         this.setState({
@@ -123,6 +127,34 @@ class App extends React.Component {
     })
   }
 
+  suggestChain(network){
+    const currency = {
+      coinDenom: network.symbol,
+      coinMinimalDenom: network.denom,
+      coinDecimals: network.decimals,
+      coinGeckoId: network.coinGeckoId
+    }
+    return window.keplr.experimentalSuggestChain({
+      rpc: network.rpcUrl[0],
+      rest: network.restUrl,
+      chainId: network.chainId,
+      chainName: network.prettyName,
+      stakeCurrency: currency,
+      bip44: { coinType: network.slip44 },
+      walletUrlForStaking: "https://restake.app/" + network.name,
+      bech32Config: {
+        bech32PrefixAccAddr: network.prefix,
+        bech32PrefixAccPub: network.prefix + "pub",
+        bech32PrefixValAddr: network.prefix + "valoper",
+        bech32PrefixValPub: network.prefix + "valoperpub",
+        bech32PrefixConsAddr: network.prefix + "valcons",
+        bech32PrefixConsPub: network.prefix + "valconspub"
+      },
+      currencies: [currency],
+      feeCurrencies:[currency]
+    })
+  }
+
   getValidatorImage(network, validatorAddress, expireCache){
     const images = this.state.validatorImages[network.name] || {}
     if(images[validatorAddress]){
@@ -222,7 +254,7 @@ class App extends React.Component {
                 <Badge>
                   <Coins
                     coins={this.state.balance}
-                    decimals={this.props.network.data.decimals}
+                    decimals={this.props.network.decimals}
                   />
                 </Badge>
               </span>
@@ -259,17 +291,17 @@ class App extends React.Component {
               )
           )}
           {this.state.address &&
-          <>
-            <Wallet
-              network={this.props.network}
-              address={this.state.address}
-              operators={this.props.operators}
-              validators={this.props.validators}
-              balance={this.state.balance}
-              getValidatorImage={this.getValidatorImage}
-              restClient={this.state.restClient}
-              stargateClient={this.state.stargateClient} />
-          </>
+            <>
+              <Wallet
+                network={this.props.network}
+                address={this.state.address}
+                operators={this.props.operators}
+                validators={this.props.validators}
+                balance={this.state.balance}
+                getValidatorImage={this.getValidatorImage}
+                restClient={this.state.restClient}
+                stargateClient={this.state.stargateClient} />
+            </>
           }
           <hr />
           <p className="mt-5 text-center">

src/components/Coins.js

@@ -13,7 +13,7 @@ function Coins(props) {
 
     if(coins.denom.startsWith('base')){
       return coins.denom.slice(4).toUpperCase()
-    }else if(['u', 'a'].includes(coins.denom[0])){
+    }else if(['u', 'a', 'n'].includes(coins.denom[0])){
       return coins.denom.slice(1).toUpperCase()
     }
     return coins.denom.toUpperCase()

src/components/DelegateForm.js

@@ -63,7 +63,7 @@ class DelegateForm extends React.Component {
     const address = this.props.address
     const validatorAddress = this.props.selectedValidator.operator_address
     let messages = []
-    const decimals = Math.pow(10, this.props.network.data.decimals || 6)
+    const decimals = Math.pow(10, this.props.network.decimals || 6)
     if(this.props.redelegate){
       messages.push({
         typeUrl: "/cosmos.staking.v1beta1.MsgBeginRedelegate",
@@ -90,7 +90,7 @@ class DelegateForm extends React.Component {
 
   async setAvailableAmount(){
     this.setState({error: undefined})
-    const decimals = Math.pow(10, this.props.network.data.decimals || 6)
+    const decimals = Math.pow(10, this.props.network.decimals || 6)
     const messages = this.buildMessages(parseInt(this.props.availableBalance.amount * 0.95) / decimals)
     this.props.stargateClient.simulate(this.props.address, messages).then(gas => {
       const saveTxFeeNum = (this.props.redelegate || this.props.undelegate) ? 0 : 10
@@ -110,7 +110,7 @@ class DelegateForm extends React.Component {
   }
 
   denom(){
-    return this.props.network.denom.slice(1).toUpperCase()
+    return this.props.network.symbol.toUpperCase()
   }
 
   render() {
@@ -131,7 +131,7 @@ class DelegateForm extends React.Component {
               </div>
               {this.props.availableBalance &&
               <div className="form-text text-end"><span role="button" onClick={() => this.setAvailableAmount()}>
-                Available: <Coins coins={this.props.availableBalance} decimals={this.props.network.data.decimals} />
+                Available: <Coins coins={this.props.availableBalance} decimals={this.props.network.decimals} />
               </span></div>
               }
             </div>

src/components/Delegations.js

@@ -121,7 +121,7 @@ class Delegations extends React.Component {
   }
 
   getTestGrant(){
-    this.props.restClient.getGrants(this.props.network.data.testAddress, this.props.address)
+    this.props.restClient.getGrants(this.props.network.testAddress, this.props.address)
       .then(
         (result) => { }, (error) => {
           if (error.response && error.response.status === 501) {
@@ -163,7 +163,7 @@ class Delegations extends React.Component {
     setTimeout(() => {
       this.props.getDelegations()
       this.getRewards()
-    }, 5_000)
+    }, 6_000)
   }
 
   setClaimLoading(value){
@@ -290,10 +290,10 @@ class Delegations extends React.Component {
           <td className="d-none d-lg-table-cell">{validator.commission.commission_rates.rate * 100}%</td>
           <td className="d-none d-lg-table-cell"></td>
           <td className="d-none d-sm-table-cell">
-            <Coins coins={delegationBalance} decimals={this.props.network.data.decimals} />
+            <Coins coins={delegationBalance} decimals={this.props.network.decimals} />
           </td>
           <td className="d-none d-sm-table-cell">
-            {denomRewards && <Coins key={denomRewards.denom} coins={denomRewards} decimals={this.props.network.data.decimals} />}
+            {denomRewards && <Coins key={denomRewards.denom} coins={denomRewards} decimals={this.props.network.decimals} />}
           </td>
           <td>
             <div className="d-grid gap-2 d-md-flex justify-content-end">

src/components/NetworkFinder.js

@@ -1,3 +1,5 @@
+import _ from 'lodash'
+import axios from 'axios'
 import React, { useEffect, useReducer } from 'react';
 import { useParams, useNavigate } from "react-router-dom";
 import Network from '../utils/Network.mjs'
@@ -19,9 +21,16 @@ function NetworkFinder() {
     {loading: true, networks: [], operators: [], validators: []}
   )
 
-  const getNetworks = () => {
-    let data = networksData
-    return data.filter(el => el.enabled !== false).reduce((a, v) => ({ ...a, [v.name]: v}), {})
+  const getNetworks = async () => {
+    const registryNetworks = await axios.get('https://registry.cosmos.directory')
+      .then(res => res.data)
+      .then(data => data.reduce((a, v) => ({ ...a, [v.chain_name]: v}), {}))
+
+    const networks = networksData.filter(el => el.enabled !== false).map(data => {
+      const registryData = registryNetworks[data.name] || {}
+      return {...data, ...registryData}
+    })
+    return _.compact(networks).reduce((a, v) => ({ ...a, [v.name]: v}), {})
   }
 
   const changeNetwork = (network, validators) => {
@@ -38,8 +47,9 @@ function NetworkFinder() {
   useEffect(() => {
     if(!Object.keys(state.networks).length){
       setState({loading: true})
-      const networks = getNetworks()
-      setState({networks: networks})
+      getNetworks().then(networks => {
+        setState({networks: networks})
+      })
     }
   }, [state.networks])
 

src/components/NetworkSelect.js

@@ -55,13 +55,13 @@ function NetworkSelect(props) {
     const networks = Object.values(props.networks).sort((a, b) => a.name > b.name ? 1 : -1)
     setOptions({
       networks: networks.map(el => {
-        return {value: el.name, label: el.prettyName, image: el.image, operators: el.operators, authz: el.authzSupport}
+        return {value: el.name, label: el.pretty_name, image: el.image, operators: el.operators, authz: el.authzSupport}
       }),
       network: selectedNetwork && {
         value: selectedNetwork.name,
         label: selectedNetwork.prettyName,
-        image: selectedNetwork.data.image,
-        operators: selectedNetwork.data.operators,
+        image: selectedNetwork.image,
+        operators: selectedNetwork.operators,
         authz: selectedNetwork.authzSupport
       }
     })
@@ -96,7 +96,7 @@ function NetworkSelect(props) {
     <>
       <Button onClick={handleOpen} variant="link" className="d-flex align-items-center text-dark text-decoration-none border-secondary btn-outline-light" role="button">
         <div className="avatar avatar-sm rounded-circle text-white">
-          <img alt={props.network.prettyName} src={props.network.data.image} height={30} width={30} />
+          <img alt={props.network.prettyName} src={props.network.image} height={30} width={30} />
         </div>
         <div className="d-none d-sm-block ms-2">
           <span className="h6">{props.network.prettyName}</span>

src/components/Wallet.js

@@ -155,7 +155,7 @@ class Wallet extends React.Component {
             date={this.nextRun(true)}
             renderer={this.countdownRenderer}
           />
-          <p><em>The minimum reward is <Coins coins={this.minimumReward()} decimals={this.props.network.data.decimals} /></em></p>
+          <p><em>The minimum reward is <Coins coins={this.minimumReward()} decimals={this.props.network.decimals} /></em></p>
         </div>
         }
       </div>