fix(server): Web Wallet needs to handle down servers

src/components/app-body/bch-send/balance-card.js

@@ -3,20 +3,36 @@
 */
 
 // Global npm libraries
-import React from 'react'
+import React, { useEffect, useState } from 'react'
 import { Container, Row, Col, Card, Spinner } from 'react-bootstrap'
 import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'
 import { faCoins } from '@fortawesome/free-solid-svg-icons'
 
 const BalanceCard = (props) => {
   const { appData } = props
+  const [sats, setSats] = useState('')
+  const [bchBalance, setbchBalance] = useState('')
+  const [usdBalance, setusdBalance] = useState('')
 
+  const { bchInitLoaded, asyncBackgroundFinished } = appData.asyncBackGroundInitState
+
+  // Calculate balances if wallet is successfully loaded!
+  useEffect(() => {
+    try {
       const bchjs = appData.wallet.bchjs
+      if (bchjs && appData.asyncInitSucceeded) {
         const sats = appData.bchWalletState.bchBalance
         const bchBalance = bchjs.BitcoinCash.toBitcoinCash(sats)
         const usdBalance = bchjs.Util.floor2(bchBalance * appData.bchWalletState.bchUsdPrice)
-  const { bchInitLoaded, asyncBackgroundFinished } = appData.asyncBackGroundInitState
 
+        setSats(sats)
+        setbchBalance(bchBalance)
+        setusdBalance(usdBalance)
+      }
+    } catch (error) {
+      // console.warn(error)
+    }
+  }, [appData])
   // Background bch data loaded finished
   const backgroundDataLoaded = bchInitLoaded || asyncBackgroundFinished
   const backgroundDataError = !bchInitLoaded && asyncBackgroundFinished
@@ -56,7 +72,7 @@ const BalanceCard = (props) => {
             </Container>
           )}
 
-          {!backgroundDataLoaded && (
+          {!backgroundDataLoaded && appData.asyncInitSucceeded && (
             <div className='balance-spinner-container'>
               <Spinner animation='border' />
             </div>

src/components/app-body/sign/index.js

@@ -14,8 +14,8 @@ function SignMessage (props) {
 
   const [sign, setSign] = useState('')
   const [msg, setMsg] = useState('')
-  const [bchAddr] = useState(wallet.walletInfo.cashAddress)
-  const [slpAddr] = useState(wallet.walletInfo.slpAddress)
+  const [bchAddr] = useState(wallet?.walletInfo?.cashAddress)
+  const [slpAddr] = useState(wallet?.walletInfo?.slpAddress)
   const [err, setErr] = useState('')
   const [copied, setCopied] = useState(false)
 

src/components/app-body/slp-tokens/index.js

@@ -183,6 +183,7 @@ const SlpTokens = (props) => {
           </Col>
         </Row>
         <Row>
+          {appData.asyncInitSucceeded && (
             <Col xs={12} style={{ display: 'flex', justifyContent: 'center', alignItems: 'center' }}>
               {/** Show spinner info if tokens are loaded but data is not loaded */
              !backgroundDataLoaded && !backgroundDataError && (
@@ -210,6 +211,7 @@ const SlpTokens = (props) => {
            }
 
             </Col>
+          )}
         </Row>
         <br />