Added BalanceContext

packages/wallet/src/App.tsx

@@ -14,6 +14,7 @@ import { Details } from "./components/Details"
 import Transactions from "./components/Transactions"
 import { Assets } from "./components/Assets"
 import { SideBar } from "./components/Sidebar"
+import { BalanceContext } from "./components/Utils/BalanceContext"
 
 export default function App() {
   try {
@@ -23,32 +24,36 @@ export default function App() {
       return (
         <UtilsContext.UtilsProvider>
           <div className="p-8 mt-16 max-w-screen-md mx-auto">
-            <h2 className="text-4xl mb-24 text-center font-bold dark:text-white">Bitcoin Computer Wallet</h2>
+            <h2 className="text-4xl mb-24 text-center font-bold dark:text-white">
+              Bitcoin Computer Wallet
+            </h2>
             <Auth.LoginForm />
           </div>
         </UtilsContext.UtilsProvider>
       )
-  
+
     return (
       <BrowserRouter>
         <UtilsContext.UtilsProvider>
           <ComputerContext.Provider value={computer}>
-            <SideBar />
-            <div className="p-4 sm:ml-64">
-              <div className="p-8 max-w-screen-xl">
-                <Routes>
-                  <Route path="/" element={<Send />} />
-                  <Route path="/send" element={<Send />} />
-                  <Route path="/transactions" element={<Transactions />} />
-                  <Route path="/assets" element={<Assets />} />
-                  <Route path="/objects/:rev" element={<SmartObject.Component />} />
-                  <Route path="/transactions/:txn" element={<Transaction.Component />} />
-                  <Route path="/details" element={<Details />} />
-                  <Route path="*" element={<Error404 />} />
-                </Routes>
-                <Auth.LoginModal />
+            <BalanceContext.BalanceProvider>
+              <SideBar />
+              <div className="p-4 sm:ml-64">
+                <div className="p-8 max-w-screen-xl">
+                  <Routes>
+                    <Route path="/" element={<Send />} />
+                    <Route path="/send" element={<Send />} />
+                    <Route path="/transactions" element={<Transactions />} />
+                    <Route path="/assets" element={<Assets />} />
+                    <Route path="/objects/:rev" element={<SmartObject.Component />} />
+                    <Route path="/transactions/:txn" element={<Transaction.Component />} />
+                    <Route path="/details" element={<Details />} />
+                    <Route path="*" element={<Error404 />} />
+                  </Routes>
+                  <Auth.LoginModal />
+                </div>
               </div>
-            </div>
+            </BalanceContext.BalanceProvider>
           </ComputerContext.Provider>
         </UtilsContext.UtilsProvider>
       </BrowserRouter>

packages/wallet/src/components/Send.tsx

@@ -5,6 +5,7 @@ import { Computer } from "@bitcoin-computer/lib"
 import { HiRefresh } from "react-icons/hi"
 import TransactionTable from "./TransactionTable"
 import { TableTxs } from "../types/common"
+import { BalanceContext } from "./Utils/BalanceContext"
 
 export function SentTransactions({ computer }: { computer: Computer }) {
   const [txs, setTxs] = useState<TableTxs>({ sentTxs: [], receivedTxs: [] })
@@ -36,6 +37,7 @@ export function SendForm({ computer }: { computer: Computer }) {
   const [amount, setAmount] = useState<string>("")
   const [fee, setFee] = useState<string>("2")
   const { showSnackBar } = UtilsContext.useUtilsComponents()
+  const { setBalance } = BalanceContext.useBalance()
 
   useEffect(() => {
     initFlowbite()
@@ -46,6 +48,7 @@ export function SendForm({ computer }: { computer: Computer }) {
     computer.setFee(Number(fee))
     try {
       const txId = await computer.send(Number(amount) * 1e8, to)
+      setBalance((await computer.getBalance()).balance)
       showSnackBar(`Sent ${amount} ${computer.getChain()} to ${to} via transaction ${txId}`, true)
     } catch (err) {
       showSnackBar(`Something went wrong ${err instanceof Error ? err.message : ""}`, false)

packages/wallet/src/components/Sidebar.tsx

@@ -2,11 +2,12 @@ import { Link } from "react-router-dom"
 import { Computer } from "@bitcoin-computer/lib"
 import { HiRefresh } from "react-icons/hi"
 import { initFlowbite } from "flowbite"
-import { useCallback, useContext, useEffect, useState } from "react"
+import { useCallback, useContext, useEffect } from "react"
 import { Auth, ComputerContext } from "@bitcoin-computer/components"
+import { BalanceContext } from "./Utils/BalanceContext"
 
 function Balance({ computer }: { computer: Computer }) {
-  const [balance, setBalance] = useState(0)
+  const { balance, setBalance } = BalanceContext.useBalance()
 
   const updateBalance = useCallback(async () => {
     if (Auth.isLoggedIn()) setBalance((await computer.getBalance()).balance)
@@ -23,20 +24,30 @@ function Balance({ computer }: { computer: Computer }) {
   }, [computer, updateBalance])
 
   return (
-    <div id="dropdown-cta" className="relative flex flex-col p-6 my-4 rounded-lg bg-blue-50 dark:bg-blue-900" role="alert">
+    <div
+      id="dropdown-cta"
+      className="relative flex flex-col p-6 my-4 rounded-lg bg-blue-50 dark:bg-blue-900"
+      role="alert"
+    >
       <div className="text-center mb-1 text-2xl font-bold text-blue-800 dark:text-blue-400">
         {balance / 1e8} {computer.getChain()}{" "}
         <HiRefresh
           onClick={updateBalance}
           className="w-4 h-4 ml-1 mb-1 inline cursor-pointer hover:text-slate-700 dark:hover:text-slate-100"
-          />
+        />
       </div>
       <div className="text-center uppercase text-xs text-blue-800 dark:text-blue-400">
         {computer.getNetwork()}
       </div>
-      {computer.getNetwork() === 'regtest' &&  <button type="button" onClick={fund} className="absolute bottom-2 right-2 px-1 py-1 text-center text-xs font-medium text-center text-blue-700 hover:text-white border border-blue-700 hover:bg-blue-800 focus:ring-4 focus:outline-none focus:ring-blue-300 font-medium rounded-lg dark:border-blue-500 dark:text-blue-500 dark:hover:text-white dark:hover:bg-blue-500 dark:focus:ring-blue-800">
-        Fund
-      </button>}    
+      {computer.getNetwork() === "regtest" && (
+        <button
+          type="button"
+          onClick={fund}
+          className="absolute bottom-2 right-2 px-1 py-1 text-center text-xs font-medium text-center text-blue-700 hover:text-white border border-blue-700 hover:bg-blue-800 focus:ring-4 focus:outline-none focus:ring-blue-300 font-medium rounded-lg dark:border-blue-500 dark:text-blue-500 dark:hover:text-white dark:hover:bg-blue-500 dark:focus:ring-blue-800"
+        >
+          Fund
+        </button>
+      )}
     </div>
   )
 }

packages/wallet/src/components/Utils/BalanceContext.tsx

@@ -0,0 +1,33 @@
+import React, { createContext, useState, useContext, ReactNode } from "react"
+
+interface BalanceContextProps {
+  setBalance: (amount: number) => void
+  balance: number
+}
+
+const balanceContext = createContext<BalanceContextProps | undefined>(undefined)
+
+interface BalanceProviderProps {
+  children: ReactNode
+}
+
+export const BalanceProvider: React.FC<BalanceProviderProps> = ({ children }) => {
+  const [balance, setBalance] = useState(0)
+
+  return (
+    <balanceContext.Provider value={{ balance, setBalance }}>{children}</balanceContext.Provider>
+  )
+}
+
+export const useBalance = (): BalanceContextProps => {
+  const context = useContext(balanceContext)
+  if (!context) {
+    throw new Error("useBalance must be used within a BalanceProvider")
+  }
+  return context
+}
+
+export const BalanceContext = {
+  BalanceProvider,
+  useBalance
+}