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 bchjs = appData.wallet.bchjs
-  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
 
+  // 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)
+
+        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 [bchAddr] = useState(wallet?.walletInfo?.cashAddress)
-  const [slpAddr] = useState(wallet.walletInfo.slpAddress)
+  const [slpAddr] = useState(wallet?.walletInfo?.slpAddress)
   const [err, setErr] = useState('')
   const [copied, setCopied] = useState(false)
 

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

@@ -183,33 +183,35 @@ const SlpTokens = (props) => {
           </Col>
         </Row>
         <Row>
-          <Col xs={12} style={{ display: 'flex', justifyContent: 'center', alignItems: 'center' }}>
+          {appData.asyncInitSucceeded && (
-            {/** Show spinner info if tokens are loaded but data is not loaded */
+            <Col xs={12} style={{ display: 'flex', justifyContent: 'center', alignItems: 'center' }}>
-              !backgroundDataLoaded && !backgroundDataError && (
+              {/** Show spinner info if tokens are loaded but data is not loaded */
-                <div style={{ borderRadius: '10px', backgroundColor: '#f0f0f0', padding: '10px', display: 'flex', justifyContent: 'center', alignItems: 'center', width: 'fit-content' }}>
+             !backgroundDataLoaded && !backgroundDataError && (
-                  <span style={{ marginRight: '10px' }}>Loading Tokens </span>
+               <div style={{ borderRadius: '10px', backgroundColor: '#f0f0f0', padding: '10px', display: 'flex', justifyContent: 'center', alignItems: 'center', width: 'fit-content' }}>
-                  <Spinner animation='border' />
+                 <span style={{ marginRight: '10px' }}>Loading Tokens </span>
-                </div>
+                 <Spinner animation='border' />
-              )
+               </div>
-            }
+             )
-            {/** Show spinner info if tokens are loaded but data is not loaded */
+           }
-              !backgroundDataError && !dataAreLoaded && tokens.length > 0 && (
+              {/** Show spinner info if tokens are loaded but data is not loaded */
-                <div style={{ borderRadius: '10px', backgroundColor: '#f0f0f0', padding: '10px', display: 'flex', justifyContent: 'center', alignItems: 'center', width: 'fit-content' }}>
+             !backgroundDataError && !dataAreLoaded && tokens.length > 0 && (
-                  <span style={{ marginRight: '10px' }}>Loading Token Data </span>
+               <div style={{ borderRadius: '10px', backgroundColor: '#f0f0f0', padding: '10px', display: 'flex', justifyContent: 'center', alignItems: 'center', width: 'fit-content' }}>
-                  <Spinner animation='border' />
+                 <span style={{ marginRight: '10px' }}>Loading Token Data </span>
-                </div>
+                 <Spinner animation='border' />
-              )
+               </div>
-            }
+             )
-            {/** Show spinner info if tokens are loaded but icons are not loaded */
+           }
-              backgroundDataLoaded && dataAreLoaded && !iconsAreLoaded && (
+              {/** Show spinner info if tokens are loaded but icons are not loaded */
-                <div style={{ borderRadius: '10px', backgroundColor: '#f0f0f0', padding: '10px', display: 'flex', justifyContent: 'center', alignItems: 'center', width: 'fit-content' }}>
+             backgroundDataLoaded && dataAreLoaded && !iconsAreLoaded && (
-                  <span style={{ marginRight: '10px' }}>Loading Token Icons </span>
+               <div style={{ borderRadius: '10px', backgroundColor: '#f0f0f0', padding: '10px', display: 'flex', justifyContent: 'center', alignItems: 'center', width: 'fit-content' }}>
-                  <Spinner animation='border' />
+                 <span style={{ marginRight: '10px' }}>Loading Token Icons </span>
-                </div>
+                 <Spinner animation='border' />
-              )
+               </div>
-            }
+             )
+           }
 
-          </Col>
+            </Col>
+          )}
         </Row>
         <br />