From 10345ee1e637dc6bfd491099859f3bb1980f283f Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Daniel=20Sim=C3=A3o?= <rui.daniel.simao@gmail.com>
Date: Tue, 23 Jul 2024 17:39:31 +0100
Subject: [PATCH] fix: total balance display (#76)

---
 apps/hybrid-pay/src/hooks/useTotalBalance.ts        |  2 +-
 .../src/pages/Wallet/components/Hero/Hero.tsx       | 13 +++----------
 2 files changed, 4 insertions(+), 11 deletions(-)

diff --git a/apps/hybrid-pay/src/hooks/useTotalBalance.ts b/apps/hybrid-pay/src/hooks/useTotalBalance.ts
index 79bf687e2..124467358 100644
--- a/apps/hybrid-pay/src/hooks/useTotalBalance.ts
+++ b/apps/hybrid-pay/src/hooks/useTotalBalance.ts
@@ -15,7 +15,7 @@ const useTotalBalance = (chainId: ChainId) => {
     ? Object.values(erc20Balances).reduce((acc, amount) => {
         return acc.add(calculateAmountUSD(amount, getPrice(amount.currency.symbol)));
       }, new Big(0))
-    : new Big(0);
+    : undefined;
 };
 
 export { useTotalBalance };
diff --git a/apps/hybrid-pay/src/pages/Wallet/components/Hero/Hero.tsx b/apps/hybrid-pay/src/pages/Wallet/components/Hero/Hero.tsx
index 9ca8433ef..53d3dec98 100644
--- a/apps/hybrid-pay/src/pages/Wallet/components/Hero/Hero.tsx
+++ b/apps/hybrid-pay/src/pages/Wallet/components/Hero/Hero.tsx
@@ -25,18 +25,11 @@ const Hero = ({}: HeroProps): JSX.Element => {
   return (
     <Flex direction='column' flex={1} gap='6xl' justifyContent='center' marginY='xl' paddingX='xl'>
       <Flex alignItems='center' direction='column' flex={1} justifyContent='center'>
-        {/* {isPending ? (
-          <Skeleton
-            baseColor='rgba(255, 255, 255, 0.13)'
-            height='3.75rem'
-            highlightColor='rgba(255, 255, 255, 0.13)'
-            width={150}
-          />
-        ) : ( */}
         <H1 size='5xl' weight='bold'>
-          {Intl.NumberFormat(locale, { style: 'currency', currency: 'USD' }).format(totalBalance?.toNumber() || 0)}
+          {totalBalance
+            ? Intl.NumberFormat(locale, { style: 'currency', currency: 'USD' }).format(totalBalance?.toNumber())
+            : '-'}
         </H1>
-        {/* )} */}
       </Flex>
       <Flex flex={1} gap='xl' justifyContent='center'>
         <Button fullWidth aria-label='navigate to send page' size='xl' onPress={handleSend}>