chore: change total balance card

src/hooks/UseNodeBalances.tsx

@@ -1,12 +1,12 @@
 import { useGetNodeBalancesQuery } from 'src/graphql/queries/__generated__/getNodeBalances.generated';
 
 const initialState = {
-  onchain: { confirmed: '-', pending: '-', closing: '' },
+  onchain: { confirmed: '0', pending: '0', closing: '0' },
   lightning: {
-    confirmed: '-',
-    active: '-',
-    commit: '-',
-    pending: '-',
+    confirmed: '0',
+    active: '0',
+    commit: '0',
+    pending: '0',
   },
 };
 

src/views/dashboard/widgets/lightning/balances.tsx

@@ -29,8 +29,8 @@ const S = {
 export const TotalBalance = () => {
   const { onchain, lightning } = useNodeBalances();
 
-  const total = new Big(onchain.confirmed).add(lightning.confirmed).toNumber();
-  const pending = new Big(onchain.pending).add(lightning.pending).toNumber();
+  const total = new Big(onchain.confirmed).add(lightning.confirmed).toString();
+  const pending = new Big(onchain.pending).add(lightning.pending).toString();
 
   return (
     <S.wrapper>
@@ -38,7 +38,7 @@ export const TotalBalance = () => {
       <S.total>
         <Price amount={total} />
       </S.total>
-      {pending > 0 ? (
+      {Number(pending) > 0 ? (
         <S.pending>
           <Price amount={pending} />
         </S.pending>

src/views/home/account/AccountInfo.tsx

@@ -5,6 +5,7 @@ import { ColorButton } from 'src/components/buttons/colorButton/ColorButton';
 import ReactTooltip from 'react-tooltip';
 import { renderLine } from 'src/components/generic/helpers';
 import { useNodeBalances } from 'src/hooks/UseNodeBalances';
+import Big from 'big.js';
 import {
   Card,
   CardWithTitle,
@@ -52,6 +53,17 @@ export const AccountInfo = () => {
 
   const { onchain, lightning } = useNodeBalances();
 
+  const totalAmount = new Big(onchain.confirmed)
+    .add(onchain.pending)
+    .add(lightning.confirmed)
+    .add(lightning.pending)
+    .toString();
+
+  const totalChain = new Big(onchain.confirmed).add(onchain.pending).toString();
+  const totalLightning = new Big(lightning.confirmed)
+    .add(lightning.pending)
+    .toString();
+
   const chainBalance = Number(onchain.confirmed);
   const chainPending = Number(onchain.pending);
   const channelBalance = Number(lightning.confirmed);
@@ -186,15 +198,24 @@ export const AccountInfo = () => {
                   : '#652EC7'
               }
             />
-            <Tile startTile={true}>
-              <DarkSubTitle>Account</DarkSubTitle>
-              <div>Total</div>
+            <Tile>
+              <DarkSubTitle>Total</DarkSubTitle>
+              <div>
+                <Price amount={totalAmount} />
+              </div>
+            </Tile>
+            <Tile>
+              <DarkSubTitle>Bitcoin</DarkSubTitle>
+              <div>
+                <Price amount={totalChain} />
+              </div>
+            </Tile>
+            <Tile>
+              <DarkSubTitle>Lightning</DarkSubTitle>
+              <div>
+                <Price amount={totalLightning} />
+              </div>
             </Tile>
-            {renderBalances(
-              chainBalance + channelBalance,
-              chainPending + channelPending,
-              'balance'
-            )}
           </ResponsiveLine>
         </Card>
       </CardWithTitle>