Server drop-down displays selected server

dev-docs/README.md

@@ -23,3 +23,6 @@ The top-level file layout of this app looks like this:
   - Footer - Footer links
 
 After initialization, the InitailizedView is displayed. This loads the AppBody, which is a wrapper for each View. Views are selected using the navigation menu. When one View is selected, the others are hidden.
+
+## Loading of Wallet
+The wallet library [minimal-slp-wallet](https://www.npmjs.com/package/minimal-slp-wallet) is loaded at startup, and initialized with a web3 back end server. By default, the back-end server is free-bch.fullstack.cash. However, a list of back end servers provided by the [PSF](https://psfoundation.cash) are loaded into a drop-down from a GitHub

src/App.js

@@ -18,7 +18,8 @@ import NavMenu from './components/nav-menu'
 import AppBody from './components/app-body'
 
 // Default restURL for a back-end server.
-let serverURL = 'https://free-bch.fullstack.cash'
+let serverUrl = 'https://free-bch.fullstack.cash'
+let queryParamExists = false
 
 let _this
 
@@ -37,7 +38,9 @@ class App extends React.Component {
       wallet: false,
       modalBody: this.modalBody,
       hideSpinner: false,
-      menuState: 0
+      menuState: 0,
+      queryParamExists: false,
+      serverUrl
     }
 
     this.cnt = 0
@@ -52,12 +55,16 @@ class App extends React.Component {
       await this.asyncLoad.loadWalletLib()
 
       this.addToModal('Initializing wallet')
+      // console.log(`Initializing wallet with back end server ${serverUrl}`)
+      // console.log(`queryParamExists: ${queryParamExists}`)
 
-      const wallet = await this.asyncLoad.initWallet(serverURL)
+      const wallet = await this.asyncLoad.initWallet(serverUrl)
 
       this.setState({
         wallet,
-        walletInitialized: true
+        walletInitialized: true,
+        serverUrl,
+        queryParamExists
       })
     } catch (err) {
       this.modalBody = [
@@ -75,6 +82,7 @@ class App extends React.Component {
   render () {
     // console.log('App component rendered. this.state.wallet: ', this.state.wallet)
     // console.log(`App component menuState: ${this.state.menuState}`)
+    // console.log(`render() this.state.serverUrl: ${this.state.serverUrl}`)
 
     return (
       <>
@@ -82,7 +90,7 @@ class App extends React.Component {
         <LoadScripts />
         <NavMenu menuHandler={this.onMenuClick} />
         {this.state.walletInitialized ? <InitializedView wallet={this.state.wallet} menuState={this.state.menuState} /> : <UninitializedView modalBody={this.state.modalBody} hideSpinner={this.state.hideSpinner} />}
-        <ServerSelect />
+        <ServerSelect displayUrl={this.state.serverUrl} queryParamExists={queryParamExists} />
         <Footer />
       </>
     )
@@ -138,7 +146,10 @@ function GetRestUrl (props) {
   const [restURL] = useQueryParam('restURL', StringParam)
   // console.log('restURL: ', restURL)
 
-  serverURL = restURL
+  if(restURL) {
+    serverUrl = restURL
+    queryParamExists = true
+  }
 
   return (<></>)
 }

src/components/servers/index.js

@@ -22,6 +22,7 @@ class ServerSelect extends React.Component {
   constructor (props) {
     super(props)
 
+    this.props = props
     // this.wallet = props.wallet
 
     this.state = {
@@ -55,10 +56,10 @@ class ServerSelect extends React.Component {
           <Col>
             <br />
             <h5 style={{ textAlign: 'center' }}>
-              Having trouble loading the Balance? Try selecting a different back-end server.
+              Having trouble loading? Try selecting a different back-end server.
             </h5>
             <Form.Select onChange={(values) => this.selectServer(values)}>
-              <option>Choose a back-end server</option>
+              <option>{this.props.queryParamExists ? (`${this.props.displayUrl}`) : (`Choose a back-end server`)}</option>
               {items}
             </Form.Select>
             <br />