Kelp UI: link to market from popover for easy access (#209)

addresses part of issue #67

* 1 - add link to show market

* 2 - correct market links for pubnet and testnet bots

* 3 - faster fetch bots with protection for duplicate requests

* 4 - badge should reflect testnet/pubnet bots

gui/backend/get_bot_info.go

@@ -175,6 +175,7 @@ func (s *APIServer) runGetBotInfoDirect(w http.ResponseWriter, botName string) {
 	bi := query.BotInfo{
 		LastUpdated:   time.Now().Format("1/_2/2006 15:04:05"),
 		Strategy:      buysell,
+		IsTestnet:     strings.Contains(botConfig.HorizonURL, "test"),
 		TradingPair:   tradingPair,
 		AssetBase:     assetBase,
 		AssetQuote:    assetQuote,

gui/web/src/components/atoms/Badge/Badge.js

@@ -1,15 +1,11 @@
 import React, { Component } from 'react';
 import styles from './Badge.module.scss';
 
-
-
-
 class Badge extends Component {
   render() {
-
     return (
-        <span className={this.props.test ? styles.test : styles.main}>
-          {this.props.test ? 'Test' : 'Main'}
+        <span className={this.props.testnet ? styles.test : styles.main}>
+          {this.props.testnet ? 'Testnet' : 'Pubnet'}
         </span>
     );
   }

gui/web/src/components/atoms/BotExchangeInfo/BotExchangeInfo.js

@@ -6,7 +6,7 @@ class BotExchangeInfo extends Component {
   render() {
     return (
       <div className={styles.wrapper}>
-        <Badge test={true}/>
+        <Badge testnet={this.props.isTestnet}/>
         <span className={styles.exchange}>SDEX</span>
         <span className={styles.exchange}>  </span>
         <span className={styles.strategy}>{this.props.strategy}</span>

gui/web/src/components/molecules/BotCard/BotCard.js

@@ -22,6 +22,7 @@ import getBotInfo from '../../../kelp-ops-api/getBotInfo';
 let defaultBotInfo = {
   "last_updated": "Never",
   "strategy": "buysell",
+  "is_testnet": true,
   "trading_pair": {
     "Base": "?",
     "Quote": "?"
@@ -67,6 +68,7 @@ class BotCard extends Component {
     this.tick = this.tick.bind(this);
     this.toggleOptions = this.toggleOptions.bind(this);
     this.editBot = this.editBot.bind(this);
+    this.showMarket = this.showMarket.bind(this);
     this.callDeleteBot = this.callDeleteBot.bind(this);
 
     this._asyncRequests = {};
@@ -272,6 +274,16 @@ class BotCard extends Component {
     this.props.history.push('/edit?bot_name=' + encodeURIComponent(this.props.name))
   }
 
+  showMarket() {
+    let baseCode = this.state.botInfo.asset_base.asset_type === "native" ? "XLM/native" : this.state.botInfo.asset_base.asset_code + "/" + this.state.botInfo.asset_base.asset_issuer;
+    let quoteCode = this.state.botInfo.asset_quote.asset_type === "native" ? "XLM/native" : this.state.botInfo.asset_quote.asset_code + "/" + this.state.botInfo.asset_quote.asset_issuer;
+    let link = "https://testnet.interstellar.exchange/app/#/trade/guest/" + baseCode + "/" + quoteCode;
+    if (!this.state.botInfo.is_testnet) {
+      link = "https://interstellar.exchange/app/#/trade/guest/" + baseCode + "/" + quoteCode;
+    }
+    window.open(link);
+  }
+
   render() {
     let popover = "";
     if (this.state.popoverVisible) {
@@ -281,6 +293,8 @@ class BotCard extends Component {
           <div className={styles.optionsSpacer}/>
           <PopoverMenu
             className={styles.optionsMenu}
+            enableMarket={true}
+            onMarket={this.showMarket}
             enableEdit={enableEdit}
             onEdit={this.editBot}
             enableCopy={false}
@@ -324,7 +338,10 @@ class BotCard extends Component {
         <div className={styles.firstColumn}>
           <h2 className={styles.title}>{this.props.name}</h2>
           <div className={styles.botDetailsLine}>
-            <BotExchangeInfo strategy={this.state.botInfo.strategy}/>
+            <BotExchangeInfo
+              isTestnet={this.state.botInfo.is_testnet}
+              strategy={this.state.botInfo.strategy}
+              />
           </div>
           <div>
             <BotAssetsInfo

gui/web/src/components/molecules/Header/Header.js

@@ -2,8 +2,6 @@ import React, { Component } from 'react';
 import logo from '../../../assets/images/kelp-logo.svg';
 import grid from '../../_styles/grid.module.scss';
 import styles from './Header.module.scss';
-import Button from '../../atoms/Button/Button';
-
 
 class Header extends Component {
   render() {

gui/web/src/components/molecules/PopoverMenu/PopoverMenu.js

@@ -6,6 +6,7 @@ class PopoverMenu extends Component {
     return (
       <div className={styles.wrapper}>
         <div className={styles.list}>
+          {this.props.enableMarket ? <div className={styles.item} onClick={this.props.onMarket}>Show Market</div> : <div className={[styles.item, styles.disabled].join(' ')}>Show Market</div>}
           {this.props.enableEdit ? <div className={styles.item} onClick={this.props.onEdit}>Edit</div> : <div className={[styles.item, styles.disabled].join(' ')}>Edit</div>}
           {this.props.enableCopy ? <div className={styles.item} onClick={this.props.onCopy}>Copy</div> : <div className={[styles.item, styles.disabled].join(' ')}>Copy</div>}
           {this.props.enableDelete ? <div className={styles.itemDanger} onClick={this.props.onDelete}>Delete</div> : <div className={[styles.item, styles.disabled].join(' ')}>Delete</div>}

gui/web/src/components/screens/Bots/Bots.js

@@ -41,6 +41,10 @@ class Bots extends Component {
   }
 
   fetchBots() {
+    if (this._asyncRequests["listBots"]) {
+      return
+    }
+
     var _this = this
     this._asyncRequests["listBots"] = listBots(this.props.baseUrl).then(bots => {
       if (!_this._asyncRequests["listBots"]) {
@@ -51,8 +55,7 @@ class Bots extends Component {
       delete _this._asyncRequests["listBots"];
       if (bots.hasOwnProperty('error')) {
         console.log("error in listBots: " + bots.error);
-        // retry
-        setTimeout(_this.fetchBots, 5000);
+        _this.fetchBots();
       } else {
         _this.setState(prevState => ({
           bots: bots
@@ -118,7 +121,7 @@ class Bots extends Component {
         </div>
       );
     } else {
-      setTimeout(this.fetchBots, 5000);
+      setTimeout(this.fetchBots, 500);
     }
 
     return (

gui/web/src/components/screens/NewBot/NewBot.js

@@ -38,6 +38,10 @@ class NewBot extends Component {
   }
 
   loadOptionsMetadata() {
+    if (this._asyncRequests["optionsMetadata"]) {
+      return
+    }
+
     var _this = this;
     this._asyncRequests["optionsMetadata"] = fetchOptionsMetadata(this.props.baseUrl).then(optionsMetadata => {
       if (!_this._asyncRequests["optionsMetadata"]) {
@@ -48,8 +52,7 @@ class NewBot extends Component {
       delete _this._asyncRequests["optionsMetadata"];
       if (optionsMetadata.hasOwnProperty('error')) {
         console.log("error when loading optionsMetadata: " + optionsMetadata.error);
-        // retry
-        setTimeout(_this.loadOptionsMetadata, 5000);
+        setTimeout(_this.loadOptionsMetadata, 1000);
       } else {
         _this.setState(prevState => ({
           optionsMetadata: optionsMetadata,

query/botInfo.go

@@ -2,6 +2,7 @@ package query
 
 import (
 	"fmt"
+	"strings"
 	"time"
 
 	hProtocol "github.com/stellar/go/protocols/horizon"
@@ -13,6 +14,7 @@ import (
 type BotInfo struct {
 	LastUpdated   string             `json:"last_updated"`
 	Strategy      string             `json:"strategy"`
+	IsTestnet     bool               `json:"is_testnet"`
 	TradingPair   *model.TradingPair `json:"trading_pair"`
 	AssetBase     hProtocol.Asset    `json:"asset_base"`
 	AssetQuote    hProtocol.Asset    `json:"asset_quote"`
@@ -66,6 +68,7 @@ func (s *Server) getBotInfo() (*BotInfo, error) {
 	return &BotInfo{
 		LastUpdated:   time.Now().Format("1/_2/2006 15:04:05"),
 		Strategy:      s.strategyName,
+		IsTestnet:     strings.Contains(s.sdex.API.HorizonURL, "test"),
 		TradingPair:   s.tradingPair,
 		AssetBase:     assetBase,
 		AssetQuote:    assetQuote,