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

fix(refactor): Cleaning up code

README.md

@@ -4,7 +4,7 @@ This is a single page app (SPA) based on [react-bootstrap](https://www.npmjs.com
 
 This app can be compiled and uploaded to Filecoin via [web3.storage](https://web3.storage). This means a censorship-resistant front-end app (SPA) can be built, which communicates with a censorship-resistant back-end.
 
-- [Live Demo on Filecoin](https://bafybeieawisnppueyqxeqjnu6d67jogu7xt7cypshx3q3k55yizphg3tia.ipfs.dweb.link/)
+- [Live Demo on Filecoin](https://bafybeibp6zaa7rjwamxagleukndta4il7w6hntztkq3oot222kzipw4bda.ipfs.dweb.link/)
 
 ## Major Features
 - [react-bootstrap](https://react-bootstrap.github.io/) is used for general style and layout control.

src/App.js

@@ -39,15 +39,15 @@ class App extends React.Component {
     this.state = {
       wallet: false, // BCH wallet instance
       menuState: 0, // The current View being displayed in the app
-      serverUrl,
-      servers: defaultServerOptions,
+      serverUrl, // Stores the URL for the currently selected server.
+      servers: defaultServerOptions, // A list of back end servers.
 
       // Startup Modal
       showStartModal: true, // Should the startup modal be visible?
       asyncInitFinished: false, // Did startup finish?
       asyncInitSucceeded: null, // Did startup finish successfully?
-      modalBody: [],
-      hideSpinner: false
+      modalBody: [], // Strings displayed in the modal
+      hideSpinner: false // Spinner gif in modal
     }
 
     this.cnt = 0

src/components/app-body/index.js

@@ -15,7 +15,7 @@ import Placeholder2 from '../placeholder2'
 import Placeholder3 from '../placeholder3'
 import ServerSelectView from '../servers/select-server-view'
 
-let _this
+// let _this
 
 class AppBody extends React.Component {
   constructor (props) {
@@ -28,7 +28,7 @@ class AppBody extends React.Component {
       appData: props.appData
     }
 
-    _this = this
+    // _this = this
   }
 
   render () {
@@ -46,7 +46,7 @@ class AppBody extends React.Component {
 
     switch (menuState) {
       case 0:
-        return (<GetBalance wallet={_this.state.wallet} />)
+        return (<GetBalance wallet={this.state.wallet} />)
       case 1:
         return (<Placeholder2 />)
       case 2:
@@ -56,7 +56,7 @@ class AppBody extends React.Component {
       case 100:
         return (<ServerSelectView appData={this.state.appData} />)
       default:
-        return (<GetBalance wallet={_this.state.wallet} />)
+        return (<GetBalance wallet={this.state.wallet} />)
     }
   }
 }

src/components/balance.js

@@ -6,7 +6,7 @@
 import React from 'react'
 import { Container, Row, Col, Form, Button, Spinner } from 'react-bootstrap'
 
-let _this
+// let _this
 
 class GetBalance extends React.Component {
   constructor (props) {
@@ -18,7 +18,10 @@ class GetBalance extends React.Component {
       wallet: props.wallet
     }
 
-    _this = this
+    // Bind 'this' to event handlers
+    this.handleGetBalance = this.handleGetBalance.bind(this)
+
+    // _this = this
   }
 
   render () {
@@ -53,27 +56,27 @@ class GetBalance extends React.Component {
 
   async handleGetBalance (event) {
     try {
-      const textInput = _this.state.textInput
+      const textInput = this.state.textInput
 
       // Exit on invalid input
       if (!textInput) return
       if (!textInput.includes('bitcoincash:')) return
 
-      _this.setState({
+      this.setState({
         balance: (<span>Retrieving balance... <Spinner animation='border' /></span>)
       })
 
-      const balance = await _this.state.wallet.getBalance(textInput)
+      const balance = await this.state.wallet.getBalance(textInput)
       console.log('balance: ', balance)
 
-      const bchBalance = _this.state.wallet.bchjs.BitcoinCash.toBitcoinCash(balance)
+      const bchBalance = this.state.wallet.bchjs.BitcoinCash.toBitcoinCash(balance)
 
-      _this.setState({
+      this.setState({
         balance: `Balance: ${balance} sats, ${bchBalance} BCH`
       })
     } catch (err) {
-      _this.setState({
-        balance: `Error: ${err.message}`
+      this.setState({
+        balance: (<p><b>Error</b>: {`${err.message}`}</p>)
       })
     }
   }