From f43de77294e86df4bb023cd19afe6327ace5e83c Mon Sep 17 00:00:00 2001
From: Cafe137 <77121044+Cafe137@users.noreply.github.com>
Date: Tue, 21 Jun 2022 10:51:51 +0200
Subject: [PATCH] fix: display account wallet partially while loading (#420)

---
 .../account/chequebook/AccountChequebook.tsx  | 45 +++++++++++--------
 src/pages/account/wallet/AccountWallet.tsx    | 32 +++++++------
 2 files changed, 44 insertions(+), 33 deletions(-)

diff --git a/src/pages/account/chequebook/AccountChequebook.tsx b/src/pages/account/chequebook/AccountChequebook.tsx
index 28f4ae0..275a381 100644
--- a/src/pages/account/chequebook/AccountChequebook.tsx
+++ b/src/pages/account/chequebook/AccountChequebook.tsx
@@ -22,30 +22,37 @@ export function AccountChequebook(): ReactElement {
 
   if (status.all === CheckState.ERROR) return <TroubleshootConnectionCard />
 
+  const showChequebook = chequebookBalance?.totalBalance !== undefined
+
   return (
     <>
       <Header />
       <AccountNavigation active="CHEQUEBOOK" />
       <div>
-        <ExpandableList label="Chequebook" defaultOpen>
-          <ExpandableListItem label="Total Balance" value={`${chequebookBalance?.totalBalance.toFixedDecimal()} BZZ`} />
-          <ExpandableListItem
-            label="Available Uncommitted Balance"
-            value={`${chequebookBalance?.availableBalance.toFixedDecimal()} BZZ`}
-          />
-          <ExpandableListItem
-            label="Total Cheques Amount Sent"
-            value={`${settlements?.totalSent.toFixedDecimal()} BZZ`}
-          />
-          <ExpandableListItem
-            label="Total Cheques Amount Received"
-            value={`${settlements?.totalReceived.toFixedDecimal()} BZZ`}
-          />
-          <ExpandableListItemActions>
-            <WithdrawModal />
-            <DepositModal />
-          </ExpandableListItemActions>
-        </ExpandableList>
+        {showChequebook && (
+          <ExpandableList label="Chequebook" defaultOpen>
+            <ExpandableListItem
+              label="Total Balance"
+              value={`${chequebookBalance?.totalBalance.toFixedDecimal()} BZZ`}
+            />
+            <ExpandableListItem
+              label="Available Uncommitted Balance"
+              value={`${chequebookBalance?.availableBalance.toFixedDecimal()} BZZ`}
+            />
+            <ExpandableListItem
+              label="Total Cheques Amount Sent"
+              value={`${settlements?.totalSent.toFixedDecimal()} BZZ`}
+            />
+            <ExpandableListItem
+              label="Total Cheques Amount Received"
+              value={`${settlements?.totalReceived.toFixedDecimal()} BZZ`}
+            />
+            <ExpandableListItemActions>
+              <WithdrawModal />
+              <DepositModal />
+            </ExpandableListItemActions>
+          </ExpandableList>
+        )}
         <ExpandableList label="Blockchain" defaultOpen>
           <ExpandableListItemKey label="Ethereum address" value={nodeAddresses?.ethereum || ''} />
           <ExpandableListItemKey
diff --git a/src/pages/account/wallet/AccountWallet.tsx b/src/pages/account/wallet/AccountWallet.tsx
index 0372813..b8cd3dd 100644
--- a/src/pages/account/wallet/AccountWallet.tsx
+++ b/src/pages/account/wallet/AccountWallet.tsx
@@ -1,9 +1,9 @@
 import { Box, Grid, Typography } from '@material-ui/core'
 import { ReactElement, useContext } from 'react'
+import { useNavigate } from 'react-router'
 import Download from 'remixicon-react/DownloadLineIcon'
 import Gift from 'remixicon-react/GiftLineIcon'
 import Link from 'remixicon-react/LinkIcon'
-import { useNavigate } from 'react-router'
 import ExpandableListItem from '../../../components/ExpandableListItem'
 import ExpandableListItemActions from '../../../components/ExpandableListItemActions'
 import ExpandableListItemKey from '../../../components/ExpandableListItemKey'
@@ -19,10 +19,6 @@ export function AccountWallet(): ReactElement {
 
   const navigate = useNavigate()
 
-  if (!balance || !nodeAddresses) {
-    return <Loading />
-  }
-
   function onCheckTransactions() {
     window.open(`https://blockscout.com/xdai/mainnet/address/${nodeAddresses?.ethereum}/transactions`, '_blank')
   }
@@ -47,15 +43,23 @@ export function AccountWallet(): ReactElement {
           </SwarmButton>
         </Grid>
       </Box>
-      <Box mb={0.25}>
-        <ExpandableListItemKey label="Node wallet address" value={nodeAddresses.ethereum} expanded />
-      </Box>
-      <Box mb={0.25}>
-        <ExpandableListItem label="XDAI balance" value={`${balance.dai.toSignificantDigits(4)} XDAI`} />
-      </Box>
-      <Box mb={2}>
-        <ExpandableListItem label="BZZ balance" value={`${balance.bzz.toSignificantDigits(4)} BZZ`} />
-      </Box>
+      {balance && nodeAddresses ? (
+        <>
+          <Box mb={0.25}>
+            <ExpandableListItemKey label="Node wallet address" value={nodeAddresses.ethereum} expanded />
+          </Box>
+          <Box mb={0.25}>
+            <ExpandableListItem label="XDAI balance" value={`${balance.dai.toSignificantDigits(4)} XDAI`} />
+          </Box>
+          <Box mb={2}>
+            <ExpandableListItem label="BZZ balance" value={`${balance.bzz.toSignificantDigits(4)} BZZ`} />
+          </Box>
+        </>
+      ) : (
+        <Box mb={8}>
+          <Loading />
+        </Box>
+      )}
       <ExpandableListItemActions>
         <SwarmButton onClick={onCheckTransactions} iconType={Link}>
           Check transactions on Blockscout