From 55973b547d53c84884f7f2635a24d385cfe98bcb Mon Sep 17 00:00:00 2001 From: Chris Troutner Date: Sun, 3 Jul 2022 11:52:01 -0700 Subject: [PATCH 1/2] Updating dev docs --- dev-docs/README.md | 14 ++++++++++++++ 1 file changed, 14 insertions(+) diff --git a/dev-docs/README.md b/dev-docs/README.md index 8ff17ee..7f15c95 100644 --- a/dev-docs/README.md +++ b/dev-docs/README.md @@ -9,3 +9,17 @@ 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. From 9cbe5d1e2f369c3e41852585f35e520f9bfcbd57 Mon Sep 17 00:00:00 2001 From: Chris Troutner Date: Sun, 3 Jul 2022 15:04:29 -0700 Subject: [PATCH 2/2] Server drop-down displays selected server --- dev-docs/README.md | 3 +++ src/App.js | 23 +++++++++++++++++------ src/components/servers/index.js | 5 +++-- 3 files changed, 23 insertions(+), 8 deletions(-) diff --git a/dev-docs/README.md b/dev-docs/README.md index 7f15c95..020baf7 100644 --- a/dev-docs/README.md +++ b/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 diff --git a/src/App.js b/src/App.js index 3ae60b7..026e828 100644 --- a/src/App.js +++ b/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 { {this.state.walletInitialized ? : } - +