diff --git a/src/components/admin-lte/configure/index.js b/src/components/admin-lte/configure/index.js
index d1b5878..94fd6c9 100644
--- a/src/components/admin-lte/configure/index.js
+++ b/src/components/admin-lte/configure/index.js
@@ -3,7 +3,7 @@ import PropTypes from 'prop-types'
import { Content, Row, Col, Box, Inputs, Button } from 'adminlte-2-react'
import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'
import BchWallet from 'minimal-slp-wallet'
-
+import Servers from './servers'
const { Text } = Inputs
let _this
@@ -104,6 +104,11 @@ class Configure extends React.Component {
+
)
}
diff --git a/src/components/admin-lte/configure/servers.js b/src/components/admin-lte/configure/servers.js
new file mode 100644
index 0000000..963b591
--- /dev/null
+++ b/src/components/admin-lte/configure/servers.js
@@ -0,0 +1,251 @@
+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"
+
+const { Text, Select } = Inputs
+
+let _this
+class Servers extends React.Component {
+ constructor(props) {
+ super(props)
+
+ _this = this
+
+ this.state = {
+ selectOptions: [],
+ errMsg: "",
+ selectedServer: "",
+ 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/",
+ },
+ ]
+ }
+
+ render() {
+ return (
+
+
+
+
+
+
+
+ Back End Server
+
+
+
+
+ {_this.state.showAddField ? (
+
+ }
+ />
+ ) : (
+
+ }
+ />
+ )}
+
+
+
+
+
+
+
+
+ {_this.state.errMsg && (
+ {_this.state.errMsg}
+ )}
+
+
+
+
+
+ )
+ }
+ // turn on / off text field
+ handleTextField() {
+ _this.setState({
+ showAddField: !_this.state.showAddField,
+ })
+ }
+ // 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 ? newServer : _this.state.selectedServer,
+ })
+ _this.resetForm()
+ }
+
+ // 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
+
+ for (let i = 0; i < selectOptions.length; i++) {
+ walletInfo.servers.push(selectOptions[i].value)
+ }
+ _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,
+ })
+ }
+ } catch (error) {
+ console.warn(error)
+ }
+ }
+
+ componentDidMount() {
+ _this.populateSelect()
+ }
+
+ handleUpdate(event) {
+ const value = event.target.value
+ _this.setState({
+ [event.target.name]: value,
+ })
+ }
+
+ handleUpdateServer() {
+ _this.handleNewServerUrl()
+ // await for state update delay
+ setTimeout(() => {
+ _this.saveServer()
+ }, 500)
+ }
+
+ // 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
+
+ const selectedValue = _this.state.selectedServer
+ if (!selectedValue) {
+ return
+ }
+
+ const alreadyExist = servers.find(val => {
+ return val === selectedValue
+ })
+ if (!alreadyExist) {
+ servers.push(selectedValue)
+ }
+
+ walletInfo.servers = servers
+ walletInfo.selectedServer = selectedValue
+ _this.props.setWalletInfo(walletInfo)
+ } catch (error) {
+ console.warn(error)
+ }
+ }
+ // clean the text form field
+ resetForm() {
+ _this.setState({
+ newServer: "",
+ })
+ }
+}
+Servers.propTypes = {
+ setWalletInfo: PropTypes.func.isRequired,
+ walletInfo: PropTypes.object.isRequired,
+ setBchWallet: PropTypes.func.isRequired,
+}
+
+export default Servers