Merge pull request #3 from Permissionless-Software-Foundation/ct-unstable

Server drop-down displays selected server

dev-docs/README.md

@@ -9,3 +9,20 @@ This file contains notes taken during software development. These notes may even
 - [minimal-slp-wallet](https://www.npmjs.com/package/minimal-slp-wallet) is used to access tokens and BCH on the Bitcoin Cash blockchain.
 - A 'server selection' dropdown allows the user to select from an array of redundent back end servers.
 - This site is statically compiled, uploaded to Filecoin, and served over IPFS for censorship resistance and version control.
+
+## File Layout
+
+The top-level file layout of this app looks like this:
+
+- App.js - the main application orchestates these child components:
+  - GetRestUrl - retrieves the REST URL for the selected back-end web3 server from query paramenters in the URL.
+  - LoadScripts - Loads the modal with a waiting spinner animation until the external script files are loaded.
+  - NavMenu - the collapsible navigation menu
+  - InitializedView & UnitializedView - the default Views that are displayed depending on the state of the app.
+  - ServerSelect - allows the user to select a different web3 back end server.
+  - 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 />