feat(backends): Finished multiple backend options feature

src/components/admin-lte/configure/index.js

@@ -135,13 +135,19 @@ class Configure extends React.Component {
 
   async handleUpdateJWT () {
     try {
-      const { mnemonic } = _this.props.walletInfo
+      const { mnemonic, selectedServer } = _this.props.walletInfo
       const apiToken = _this.state.JWT
 
       // Update instance with JWT
       if (mnemonic && apiToken) {
+        const bchjsOptions = { apiToken: apiToken }
+        if (selectedServer) {
+          bchjsOptions.restURL = selectedServer
+        }
+
+        console.log('bchjs options : ', bchjsOptions)
         const bchWalletLib = new _this.BchWallet(mnemonic)
-        bchWalletLib.bchjs = new bchWalletLib.BCHJS({ apiToken: apiToken })
+        bchWalletLib.bchjs = new bchWalletLib.BCHJS(bchjsOptions)
         _this.props.setBchWallet(bchWalletLib)
       }
 

src/components/admin-lte/configure/servers.js

@@ -2,6 +2,7 @@ import React from 'react'
 import PropTypes from 'prop-types'
 import { Row, Col, Box, Inputs, Button } from 'adminlte-2-react'
 import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'
+import BchWallet from 'minimal-slp-wallet'
 
 const { Text, Select } = Inputs
 
@@ -19,18 +20,7 @@ class Servers extends React.Component {
       showAddField: false,
       newServer: ''
     }
-
-    // Default field options
-    this.defaultOptions = [
-      {
-        value: 'https://api.fullstaack.cash/v3/',
-        text: 'https://api.fullstaack.cash/v3/'
-      },
-      {
-        value: 'https://free-api.fullstack.cash/v3/',
-        text: 'https://free-api.fullstack.cash/v3/'
-      }
-    ]
+    _this.BchWallet = BchWallet
   }
 
   render () {
@@ -44,7 +34,7 @@ class Servers extends React.Component {
                   <FontAwesomeIcon
                     className='title-icon'
                     size='xs'
-                    icon='coins'
+                    icon='server'
                   />
                   <span>Back End Server</span>
                 </h1>
@@ -117,76 +107,71 @@ class Servers extends React.Component {
 
   // Add the new server value to the select field
   handleNewServerUrl () {
-    const { newServer, selectOptions } = _this.state
-
-    if (newServer) {
-      const alreadyExist = selectOptions.find(val => {
-        return val.value === newServer
-      })
-      // Prevent duplicate options
-      if (alreadyExist) {
-        _this.setState({
-          showAddField: false,
-          selectedServer: newServer
-        })
-        _this.resetForm()
-
-        return
-      }
-      const option = {
-        value: newServer,
-        text: newServer
-      }
-
-      // add the new select option
-      selectOptions.push(option)
-    }
-
     _this.setState({
-      selectOptions,
-      showAddField: false,
-      selectedServer: newServer || _this.state.selectedServer
+      errMsg: ''
     })
-    _this.resetForm()
+    const { newServer, selectOptions } = _this.state
+    try {
+      if (newServer) {
+        if (newServer.match(' ')) {
+          throw new Error('backend url must have no spaces')
+        }
+
+        const alreadyExist = selectOptions.find(val => {
+          return val.value === newServer
+        })
+
+        // Prevent duplicate options
+        if (alreadyExist) {
+          _this.setState({
+            showAddField: false,
+            selectedServer: newServer
+          })
+          _this.resetForm()
+
+          return
+        }
+        const option = {
+          value: newServer,
+          text: newServer
+        }
+
+        // add the new select option
+        selectOptions.push(option)
+      }
+
+      _this.setState({
+        selectOptions,
+        showAddField: false,
+        selectedServer: newServer || _this.state.selectedServer
+      })
+      _this.resetForm()
+    } catch (error) {
+      _this.setState({
+        errMsg: error.message
+      })
+    }
   }
 
   // populate select field with select options from localstorage
   populateSelect () {
     try {
       const walletInfo = _this.props.walletInfo
-      let selectOptions = _this.defaultOptions
 
-      // verify server list from localstorage
-      if (!walletInfo.servers) {
-        // add default server list to localStorage
-        walletInfo.servers = []
-        walletInfo.selectedServer = selectOptions[0].value
+      const selectOptions = []
 
-        for (let i = 0; i < selectOptions.length; i++) {
-          walletInfo.servers.push(selectOptions[i].value)
+      // populate select field with data from localstorage
+      for (let i = 0; i < walletInfo.servers.length; i++) {
+        const option = {
+          value: walletInfo.servers[i],
+          text: walletInfo.servers[i]
         }
-        _this.props.setWalletInfo(walletInfo)
-
-        _this.setState({
-          selectOptions,
-          selectedServer: selectOptions[0].value
-        })
-      } else {
-        selectOptions = []
-
-        // populate select field with data from localstorage
-        for (let i = 0; i < walletInfo.servers.length; i++) {
-          const option = {
-            value: walletInfo.servers[i],
-            text: walletInfo.servers[i]
-          }
-          selectOptions.push(option)
-        }
-        _this.setState({
-          selectOptions,
-          selectedServer: walletInfo.selectedServer
-        })
+        selectOptions.push(option)
       }
+      _this.setState({
+        selectOptions,
+        selectedServer: walletInfo.selectedServer
+      })
     } catch (error) {
       console.warn(error)
     }
@@ -207,14 +192,45 @@ class Servers extends React.Component {
     _this.handleNewServerUrl()
     // await for state update delay
     setTimeout(() => {
-      _this.saveServer()
+      _this.updateWalletInstance()
     }, 500)
   }
 
+  // Update the wallet instance state
+  updateWalletInstance () {
+    try {
+      const { mnemonic, JWT } = _this.props.walletInfo
+      const apiToken = JWT
+      const restURL = _this.state.selectedServer
+
+      // Update instance with the selected url
+      if (mnemonic) {
+        const bchjsOptions = {}
+        if (apiToken) {
+          bchjsOptions.apiToken = apiToken
+        }
+
+        bchjsOptions.restURL = restURL
+
+        console.log('bchjs options : ', bchjsOptions)
+        const bchWalletLib = new _this.BchWallet(mnemonic)
+        bchWalletLib.bchjs = new bchWalletLib.BCHJS(bchjsOptions)
+        _this.props.setBchWallet(bchWalletLib)
+      }
+      _this.saveServer()
+    } catch (error) {
+      console.warn(error)
+      _this.setState({
+        errMsg: error.message
+      })
+    }
+  }
+
   // store servers in the localstorage
   saveServer () {
     try {
       // store the new server in the localstorage if it does not exist
+
       const walletInfo = _this.props.walletInfo
       const { servers } = walletInfo
 
@@ -226,6 +242,7 @@ class Servers extends React.Component {
       const alreadyExist = servers.find(val => {
         return val === selectedValue
       })
+      // Prevent duplicate values
       if (!alreadyExist) {
         servers.push(selectedValue)
       }

src/components/admin-lte/index.js

@@ -4,7 +4,6 @@ import Configure from './configure'
 import Tokens from './tokens'
 import Wallet from './wallet'
 import siteConfig from '../site-config'
-
 // import Audit from "./audit"
 
 import AdminLTE, { Sidebar, Navbar } from 'adminlte-2-react'
@@ -52,7 +51,11 @@ class AdminLTEPage extends React.Component {
   render () {
     return (
       <>
-        <AdminLTE title={[siteConfig.title]} titleShort={[siteConfig.titleShort]} theme='blue'>
+        <AdminLTE
+          title={[siteConfig.title]}
+          titleShort={[siteConfig.titleShort]}
+          theme='blue'
+        >
           <Sidebar.Core>
             <Item key='Balance' text='Balance' icon={siteConfig.balanceIcon}>
               <div className='sidebar-balance'>
@@ -146,6 +149,8 @@ class AdminLTEPage extends React.Component {
 
     _this.activeItemById('Wallet')
 
+    _this.setDefaultServers()
+
     await _this.updateState()
     setTimeout(() => {
       _this.dropDownBalance()
@@ -306,6 +311,37 @@ class AdminLTEPage extends React.Component {
       </li>
     )
   }
+
+  // Define backends servers configuration by default
+  setDefaultServers () {
+    try {
+      const walletInfo = _this.props.walletInfo
+      const accessLocation = window.location.hostname
+      console.log('accessLocation', accessLocation)
+
+      // return if servers configurations exist
+      if (walletInfo.selectedServer) return null
+
+      const server1 = 'https://api.fullstack.cash/v3/'
+      const server2 = 'https://free-api.fullstack.cash/v3/'
+
+      const servers = [server1, server2]
+
+      let selectedServer = server1
+      // Assign the second server if the url path
+      // is different of 'wallet.fullstack.cash'
+      if (accessLocation !== 'wallet.fullstack.cash') {
+        selectedServer = server2
+      }
+
+      walletInfo.selectedServer = selectedServer
+      walletInfo.servers = servers
+
+      _this.props.setWalletInfo(walletInfo)
+    } catch (error) {
+      console.warn(error)
+    }
+  }
 }
 // Props prvided by redux
 AdminLTEPage.propTypes = {

src/components/admin-lte/wallet/create.js

@@ -9,7 +9,9 @@ class NewWallet extends React.Component {
   constructor (props) {
     super(props)
     _this = this
-    this.state = {}
+    this.state = {
+      inFetch: false
+    }
 
     _this.BchWallet = BchWallet
   }
@@ -20,7 +22,10 @@ class NewWallet extends React.Component {
         <Row>
           <Col sm={2} />
           <Col sm={8}>
-            <Box className='hover-shadow border-none mt-2'>
+            <Box
+              className='hover-shadow border-none mt-2'
+              loaded={!_this.state.inFetch}
+            >
               <Row>
                 <Col sm={12} className='text-center'>
                   <h1>
@@ -60,12 +65,23 @@ class NewWallet extends React.Component {
          * it will get overwritten
          */
       }
-
+      _this.setState({
+        inFetch: true
+      })
       const bchWalletLib = new _this.BchWallet()
       const apiToken = currentWallet.JWT
+      const restURL = currentWallet.selectedServer
 
-      if (apiToken) {
-        bchWalletLib.bchjs = new bchWalletLib.BCHJS({ apiToken: apiToken })
+      if (apiToken || restURL) {
+        const bchjsOptions = {}
+        if (apiToken) {
+          bchjsOptions.apiToken = apiToken
+        }
+        if (restURL) {
+          bchjsOptions.restURL = restURL
+        }
+        console.log('bchjs options : ', bchjsOptions)
+        bchWalletLib.bchjs = new bchWalletLib.BCHJS(bchjsOptions)
       }
 
       await bchWalletLib.walletInfoPromise // Wait for wallet to be created.
@@ -73,14 +89,23 @@ class NewWallet extends React.Component {
       const walletInfo = bchWalletLib.walletInfo
       walletInfo.from = 'created'
 
+      Object.assign(currentWallet, walletInfo)
+
       const myBalance = await bchWalletLib.getBalance()
 
       // Update redux state
-      _this.props.setWalletInfo(walletInfo)
+      _this.props.setWalletInfo(currentWallet)
       _this.props.updateBalance(myBalance)
       _this.props.setBchWallet(bchWalletLib)
+
+      _this.setState({
+        inFetch: false
+      })
     } catch (error) {
       console.error(error)
+      _this.setState({
+        inFetch: false
+      })
     }
   }
 }

src/components/admin-lte/wallet/import.js

@@ -16,7 +16,9 @@ class ImportWallet extends React.Component {
     this.state = {
       mnemonic: '',
       privateKey: '',
-      errMsg: ''
+      errMsg: '',
+      inFetch: false
+
     }
     _this.BchWallet = BchWallet
   }
@@ -26,7 +28,10 @@ class ImportWallet extends React.Component {
       <Row className=''>
         <Col sm={2} />
         <Col sm={8}>
-          <Box className='hover-shadow border-none mt-2'>
+          <Box
+            className='hover-shadow border-none mt-2'
+            loaded={!_this.state.inFetch}
+          >
             <Row>
               <Col sm={12} className='text-center'>
                 <h1>
@@ -112,32 +117,49 @@ class ImportWallet extends React.Component {
          * and it will get overwritten
          */
       }
+      _this.setState({
+        inFetch: true
+      })
 
       const bchWalletLib = new _this.BchWallet(_this.state.mnemonic)
       const apiToken = currentWallet.JWT
+      const restURL = currentWallet.selectedServer
 
-      if (apiToken) {
-        bchWalletLib.bchjs = new bchWalletLib.BCHJS({ apiToken: apiToken })
+      if (apiToken || restURL) {
+        const bchjsOptions = {}
+        if (apiToken) {
+          bchjsOptions.apiToken = apiToken
+        }
+        if (restURL) {
+          bchjsOptions.restURL = restURL
+        }
+        console.log('bchjs options : ', bchjsOptions)
+        bchWalletLib.bchjs = new bchWalletLib.BCHJS(bchjsOptions)
       }
-
       await bchWalletLib.walletInfoPromise // Wait for wallet to be created.
 
       const walletInfo = bchWalletLib.walletInfo
       walletInfo.from = 'imported'
 
+      Object.assign(currentWallet, walletInfo)
+
       const myBalance = await bchWalletLib.getBalance()
 
       // Update redux state
-      _this.props.setWalletInfo(walletInfo)
+      _this.props.setWalletInfo(currentWallet)
       _this.props.updateBalance(myBalance)
       _this.props.setBchWallet(bchWalletLib)
 
       // Reset form and component state
       _this.resetValues()
+      _this.setState({
+        inFetch: false
+      })
     } catch (error) {
       console.warn(error)
       _this.setState({
-        errMsg: error.message
+        errMsg: error.message,
+        inFetch: false
       })
     }
   }

src/redux/createStore.js

@@ -41,28 +41,37 @@ const reducer = (state, action) => {
 }
 
 // Wallet info from local storage
-const localWallet = getWalletInfo()
+const localStorageInfo = getWalletInfo()
 
 // Creates an instance  of minimal-slp-wallet, with
 // the local storage information if it exists
 const instanceWallet = () => {
   try {
-    if (!localWallet.mnemonic) return null
+    if (!localStorageInfo.mnemonic) return null
 
-    const bchWalletLib = new BchWallet(localWallet.mnemonic)
+    const bchWalletLib = new BchWallet(localStorageInfo.mnemonic)
+
+    const jwtToken = localStorageInfo.JWT
+    const restURL = localStorageInfo.selectedServer
+    const bchjsOptions = {}
 
-    const jwtToken = localWallet.JWT
     if (jwtToken) {
-      bchWalletLib.bchjs = new bchWalletLib.BCHJS({ apiToken: jwtToken })
+      bchjsOptions.apiToken = jwtToken
     }
+    if (restURL) {
+      bchjsOptions.restURL = restURL
+    }
+    bchWalletLib.bchjs = new bchWalletLib.BCHJS(bchjsOptions)
+
     return bchWalletLib
   } catch (error) {
     console.warn(error)
   }
 }
+
 // initial state
 const initialState = {
-  walletInfo: localWallet.mnemonic ? localWallet : {}, // Object wallet info
+  walletInfo: localStorageInfo, // Object wallet info
   bchBalance: 0, // Wallet Balance
   bchWallet: instanceWallet() // minimal-slp-wallet instance
 }