complete header functionality

Author: willemolding

packages/demo-wallet/src/App/Actions.tsx

@@ -27,6 +27,7 @@ export async function syncStateWithWallet(
   if (chainHeight) {
     dispatch({ type: "set-chain-height", payload: chainHeight });
   }
+  dispatch({ type: "set-active-account", payload: summary?.account_balances[0][0] });
 }
 
 export async function triggerRescan(

packages/demo-wallet/src/App/components/Header.tsx

@@ -8,15 +8,28 @@ import { WalletContext } from "../App";
 import { syncStateWithWallet, triggerRescan } from "../Actions";
 import { Button } from "react-bootstrap";
 
-export function Header() {
+import { zatsToZec } from "../../utils";
 
+export function Header() {
   const { state, dispatch } = useContext(WalletContext);
 
+  let activeBalanceReport =
+    state.summary?.account_balances.find(
+      ([id]) => id === state.activeAccount
+    );
+    console.log(activeBalanceReport);
+    
+    let totalBalance = activeBalanceReport ? activeBalanceReport[1].sapling_balance + activeBalanceReport[1].orchard_balance : 0
   return (
     <Stack direction="horizontal" gap={3}>
       <Form.Select
         value={state.activeAccount}
-        onChange={(e) => dispatch({ type: "set-active-account", payload: parseInt(e.target.value)})}
+        onChange={(e) =>
+          dispatch({
+            type: "set-active-account",
+            payload: parseInt(e.target.value),
+          })
+        }
       >
         {state.summary?.account_balances.map(([id]) => (
           <option key={id} value={id}>
@@ -25,16 +38,31 @@ export function Header() {
         ))}
       </Form.Select>
       <Card style={{ width: "30rem" }}>
-        <Card.Title>Balance: {0} ZEC</Card.Title>
-        <Card.Text>Available Balance: {0} ZEC</Card.Text>
+        <Card.Title>Balance: {zatsToZec(totalBalance)} ZEC</Card.Title>
+        <Card.Text>Available Balance: {zatsToZec(0)} ZEC</Card.Text>
       </Card>
       <Card style={{ width: "30rem" }}>
-        <Card.Text>Chain Height: {state.chainHeight ? ""+state.chainHeight : '?'}</Card.Text>
-        <Card.Text>Synced Height: {state.summary?.fully_scanned_height ? state.summary?.fully_scanned_height : '?'}</Card.Text>
+        <Card.Text>
+          Chain Height: {state.chainHeight ? "" + state.chainHeight : "?"}
+        </Card.Text>
+        <Card.Text>
+          Synced Height:{" "}
+          {state.summary?.fully_scanned_height
+            ? state.summary?.fully_scanned_height
+            : "?"}
+        </Card.Text>
       </Card>
       <Stack>
-        <Button onClick={async () => await syncStateWithWallet(state.webWallet, dispatch)}>Refresh</Button>
-        <Button onClick={() => triggerRescan(state.webWallet, dispatch)}>Sync</Button>
+        <Button
+          onClick={async () =>
+            await syncStateWithWallet(state.webWallet, dispatch)
+          }
+        >
+          Refresh
+        </Button>
+        <Button onClick={() => triggerRescan(state.webWallet, dispatch)}>
+          Sync
+        </Button>
       </Stack>
     </Stack>
   );

packages/demo-wallet/src/utils.ts

@@ -0,0 +1,4 @@
+
+export function zatsToZec(zats: number): number {
+  return zats / 100_000_000;
+}