From f25ac56cdb3be0737877de63ec21aad51e7122b1 Mon Sep 17 00:00:00 2001
From: Daniel Gonzalez <danielhumgon@gmail.com>
Date: Sat, 18 Oct 2025 15:46:29 -0400
Subject: [PATCH] fix(server): Web Wallet needs to handle down servers

---
 .../app-body/bch-send/balance-card.js         | 28 +++++++---
 src/components/app-body/sign/index.js         |  4 +-
 src/components/app-body/slp-tokens/index.js   | 54 ++++++++++---------
 3 files changed, 52 insertions(+), 34 deletions(-)

diff --git a/src/components/app-body/bch-send/balance-card.js b/src/components/app-body/bch-send/balance-card.js
index 62b5a46..288bf04 100644
--- a/src/components/app-body/bch-send/balance-card.js
+++ b/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>
diff --git a/src/components/app-body/sign/index.js b/src/components/app-body/sign/index.js
index 2da9e2e..1621c67 100644
--- a/src/components/app-body/sign/index.js
+++ b/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)
 
diff --git a/src/components/app-body/slp-tokens/index.js b/src/components/app-body/slp-tokens/index.js
index 67bae78..cee3e83 100644
--- a/src/components/app-body/slp-tokens/index.js
+++ b/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' }}>
-            {/** Show spinner info if tokens are loaded but data is not loaded */
-              !backgroundDataLoaded && !backgroundDataError && (
-                <div style={{ borderRadius: '10px', backgroundColor: '#f0f0f0', padding: '10px', display: 'flex', justifyContent: 'center', alignItems: 'center', width: 'fit-content' }}>
-                  <span style={{ marginRight: '10px' }}>Loading Tokens </span>
-                  <Spinner animation='border' />
-                </div>
-              )
-            }
-            {/** Show spinner info if tokens are loaded but data is not loaded */
-              !backgroundDataError && !dataAreLoaded && tokens.length > 0 && (
-                <div style={{ borderRadius: '10px', backgroundColor: '#f0f0f0', padding: '10px', display: 'flex', justifyContent: 'center', alignItems: 'center', width: 'fit-content' }}>
-                  <span style={{ marginRight: '10px' }}>Loading Token Data </span>
-                  <Spinner animation='border' />
-                </div>
-              )
-            }
-            {/** Show spinner info if tokens are loaded but icons are not loaded */
-              backgroundDataLoaded && dataAreLoaded && !iconsAreLoaded && (
-                <div style={{ borderRadius: '10px', backgroundColor: '#f0f0f0', padding: '10px', display: 'flex', justifyContent: 'center', alignItems: 'center', width: 'fit-content' }}>
-                  <span style={{ marginRight: '10px' }}>Loading Token Icons </span>
-                  <Spinner animation='border' />
-                </div>
-              )
-            }
+          {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 && (
+               <div style={{ borderRadius: '10px', backgroundColor: '#f0f0f0', padding: '10px', display: 'flex', justifyContent: 'center', alignItems: 'center', width: 'fit-content' }}>
+                 <span style={{ marginRight: '10px' }}>Loading Tokens </span>
+                 <Spinner animation='border' />
+               </div>
+             )
+           }
+              {/** Show spinner info if tokens are loaded but data is not loaded */
+             !backgroundDataError && !dataAreLoaded && tokens.length > 0 && (
+               <div style={{ borderRadius: '10px', backgroundColor: '#f0f0f0', padding: '10px', display: 'flex', justifyContent: 'center', alignItems: 'center', width: 'fit-content' }}>
+                 <span style={{ marginRight: '10px' }}>Loading Token Data </span>
+                 <Spinner animation='border' />
+               </div>
+             )
+           }
+              {/** Show spinner info if tokens are loaded but icons are not loaded */
+             backgroundDataLoaded && dataAreLoaded && !iconsAreLoaded && (
+               <div style={{ borderRadius: '10px', backgroundColor: '#f0f0f0', padding: '10px', display: 'flex', justifyContent: 'center', alignItems: 'center', width: 'fit-content' }}>
+                 <span style={{ marginRight: '10px' }}>Loading Token Icons </span>
+                 <Spinner animation='border' />
+               </div>
+             )
+           }
 
-          </Col>
+            </Col>
+          )}
         </Row>
         <br />