From 5a975075808635dfa703982725b7fecf45741f6f Mon Sep 17 00:00:00 2001
From: jonty007 <vivek.singh2994@gmail.com>
Date: Fri, 23 Aug 2024 16:42:51 +0530
Subject: [PATCH 1/2] Added BalanceContext

---
 packages/components/built/BalanceContext.d.ts | 15 ++++++
 packages/components/built/BalanceContext.js   | 30 ++++++++++++
 packages/components/built/Wallet.js           |  9 ++--
 packages/components/built/index.d.ts          |  1 +
 packages/components/built/index.js            |  1 +
 packages/components/src/BalanceContext.tsx    | 33 +++++++++++++
 packages/components/src/Wallet.tsx            | 48 ++++++++++++-------
 packages/components/src/index.tsx             |  1 +
 packages/explorer/src/App.tsx                 | 35 +++++++-------
 packages/nft/src/App.tsx                      | 33 +++++++------
 packages/wallet/src/App.tsx                   | 41 +++++++++-------
 packages/wallet/src/components/Send.tsx       |  4 +-
 packages/wallet/src/components/Sidebar.tsx    | 26 ++++++----
 13 files changed, 199 insertions(+), 78 deletions(-)
 create mode 100644 packages/components/built/BalanceContext.d.ts
 create mode 100644 packages/components/built/BalanceContext.js
 create mode 100644 packages/components/src/BalanceContext.tsx

diff --git a/packages/components/built/BalanceContext.d.ts b/packages/components/built/BalanceContext.d.ts
new file mode 100644
index 000000000..a6c9d81ef
--- /dev/null
+++ b/packages/components/built/BalanceContext.d.ts
@@ -0,0 +1,15 @@
+import React, { ReactNode } from "react";
+interface BalanceContextProps {
+    setBalance: (amount: number) => void;
+    balance: number;
+}
+interface BalanceProviderProps {
+    children: ReactNode;
+}
+export declare const BalanceProvider: React.FC<BalanceProviderProps>;
+export declare const useBalance: () => BalanceContextProps;
+export declare const BalanceContext: {
+    BalanceProvider: React.FC<BalanceProviderProps>;
+    useBalance: () => BalanceContextProps;
+};
+export {};
diff --git a/packages/components/built/BalanceContext.js b/packages/components/built/BalanceContext.js
new file mode 100644
index 000000000..f9b2194bb
--- /dev/null
+++ b/packages/components/built/BalanceContext.js
@@ -0,0 +1,30 @@
+var __assign = (this && this.__assign) || function () {
+    __assign = Object.assign || function(t) {
+        for (var s, i = 1, n = arguments.length; i < n; i++) {
+            s = arguments[i];
+            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
+                t[p] = s[p];
+        }
+        return t;
+    };
+    return __assign.apply(this, arguments);
+};
+import { jsx as _jsx } from "react/jsx-runtime";
+import { createContext, useState, useContext } from "react";
+var balanceContext = createContext(undefined);
+export var BalanceProvider = function (_a) {
+    var children = _a.children;
+    var _b = useState(0), balance = _b[0], setBalance = _b[1];
+    return (_jsx(balanceContext.Provider, __assign({ value: { balance: balance, setBalance: setBalance } }, { children: children })));
+};
+export var useBalance = function () {
+    var context = useContext(balanceContext);
+    if (!context) {
+        throw new Error("useBalance must be used within a BalanceProvider");
+    }
+    return context;
+};
+export var BalanceContext = {
+    BalanceProvider: BalanceProvider,
+    useBalance: useBalance
+};
diff --git a/packages/components/built/Wallet.js b/packages/components/built/Wallet.js
index 4da660a93..27c51bdf1 100644
--- a/packages/components/built/Wallet.js
+++ b/packages/components/built/Wallet.js
@@ -52,9 +52,10 @@ import { Auth } from "./Auth";
 import { Drawer } from "./Drawer";
 import { UtilsContext } from "./UtilsContext";
 import { ComputerContext } from "./ComputerContext";
+import { BalanceContext } from "./BalanceContext";
 var Balance = function (_a) {
     var computer = _a.computer, paymentModSpec = _a.paymentModSpec;
-    var _b = useState(0), balance = _b[0], setBalance = _b[1];
+    var _b = BalanceContext.useBalance(), balance = _b.balance, setBalance = _b.setBalance;
     var _c = useState(localStorage.getItem("CHAIN") || "LTC"), setChain = _c[1];
     var _d = UtilsContext.useUtilsComponents(), showSnackBar = _d.showSnackBar, showLoader = _d.showLoader;
     var refreshBalance = useCallback(function () { return __awaiter(void 0, void 0, void 0, function () {
@@ -119,7 +120,7 @@ var Balance = function (_a) {
     useEffect(function () {
         refreshBalance();
     }, []);
-    return (_jsxs("div", __assign({ id: "dropdown-cta", className: "relative flex flex-col p-6 my-4 rounded-lg bg-blue-50 dark:bg-blue-900", role: "alert" }, { children: [_jsxs("div", __assign({ className: "text-center mb-1 text-2xl font-bold text-blue-800 dark:text-blue-400" }, { children: [balance / 1e8, " ", computer.getChain(), " ", _jsx(HiRefresh, { onClick: refreshBalance, className: "w-4 h-4 ml-1 mb-1 inline cursor-pointer hover:text-slate-700 dark:hover:text-slate-100" })] })), _jsx("div", __assign({ className: "text-center uppercase text-xs text-blue-800 dark:text-blue-400" }, { children: computer.getNetwork() })), computer.getNetwork() === 'regtest' && _jsx("button", __assign({ 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" }, { children: "Fund" }))] })));
+    return (_jsxs("div", __assign({ id: "dropdown-cta", className: "relative flex flex-col p-6 my-4 rounded-lg bg-blue-50 dark:bg-blue-900", role: "alert" }, { children: [_jsxs("div", __assign({ className: "text-center mb-1 text-2xl font-bold text-blue-800 dark:text-blue-400" }, { children: [balance / 1e8, " ", computer.getChain(), " ", _jsx(HiRefresh, { onClick: refreshBalance, className: "w-4 h-4 ml-1 mb-1 inline cursor-pointer hover:text-slate-700 dark:hover:text-slate-100" })] })), _jsx("div", __assign({ className: "text-center uppercase text-xs text-blue-800 dark:text-blue-400" }, { children: computer.getNetwork() })), computer.getNetwork() === "regtest" && (_jsx("button", __assign({ 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" }, { children: "Fund" })))] })));
 };
 var Address = function (_a) {
     var computer = _a.computer;
@@ -132,7 +133,7 @@ var PublicKey = function (_a) {
 var Mnemonic = function (_a) {
     var computer = _a.computer;
     var _b = useState(false), mnemonicShown = _b[0], setMnemonicShown = _b[1];
-    return _jsxs("div", __assign({ className: "mb-4" }, { children: [_jsxs("h6", __assign({ className: "text-lg font-bold dark:text-white" }, { children: ["Mnemonic\u00A0", _jsx("button", __assign({ onClick: function () { return setMnemonicShown(!mnemonicShown); }, className: "text-xs font-mono font-normal text-gray-500 dark:text-gray-400 hover:text-blue-600 dark:hover:text-blue-500 underline" }, { children: mnemonicShown ? 'hide' : 'show' }))] })), _jsx("p", __assign({ className: "text-xs font-mono text-gray-500 dark:text-gray-400 break-words" }, { children: mnemonicShown ? computer.getMnemonic() : '' }))] }));
+    return (_jsxs("div", __assign({ className: "mb-4" }, { children: [_jsxs("h6", __assign({ className: "text-lg font-bold dark:text-white" }, { children: ["Mnemonic\u00A0", _jsx("button", __assign({ onClick: function () { return setMnemonicShown(!mnemonicShown); }, className: "text-xs font-mono font-normal text-gray-500 dark:text-gray-400 hover:text-blue-600 dark:hover:text-blue-500 underline" }, { children: mnemonicShown ? "hide" : "show" }))] })), _jsx("p", __assign({ className: "text-xs font-mono text-gray-500 dark:text-gray-400 break-words" }, { children: mnemonicShown ? computer.getMnemonic() : "" }))] })));
 };
 var Url = function (_a) {
     var computer = _a.computer;
@@ -150,7 +151,7 @@ var LogOut = function () { return (_jsxs(_Fragment, { children: [_jsxs("div", __
 export function Wallet(_a) {
     var paymentModSpec = _a.paymentModSpec;
     var computer = useContext(ComputerContext);
-    var Content = function () { return (_jsxs(_Fragment, { children: [_jsx("h4", __assign({ className: "text-2xl font-bold dark:text-white" }, { children: "Wallet" })), _jsx(Balance, { computer: computer, paymentModSpec: paymentModSpec }), _jsx(Address, { computer: computer }), _jsx(PublicKey, { computer: computer }), _jsx(Mnemonic, { computer: computer }), !process.env['REACT_APP_CHAIN'] && _jsx(Chain, { computer: computer }), !process.env['REACT_APP_NETWORK'] && _jsx(Network, { computer: computer }), !process.env['REACT_APP_URL'] && _jsx(Url, { computer: computer }), _jsx("hr", { className: "h-px my-6 bg-gray-200 border-0 dark:bg-gray-700" }), _jsx(LogOut, {})] })); };
+    var Content = function () { return (_jsxs(_Fragment, { children: [_jsx("h4", __assign({ className: "text-2xl font-bold dark:text-white" }, { children: "Wallet" })), _jsx(Balance, { computer: computer, paymentModSpec: paymentModSpec }), _jsx(Address, { computer: computer }), _jsx(PublicKey, { computer: computer }), _jsx(Mnemonic, { computer: computer }), !process.env["REACT_APP_CHAIN"] && _jsx(Chain, { computer: computer }), !process.env["REACT_APP_NETWORK"] && _jsx(Network, { computer: computer }), !process.env["REACT_APP_URL"] && _jsx(Url, { computer: computer }), _jsx("hr", { className: "h-px my-6 bg-gray-200 border-0 dark:bg-gray-700" }), _jsx(LogOut, {})] })); };
     return _jsx(Drawer.Component, { Content: Content, id: "wallet-drawer" });
 }
 export var WalletComponents = {
diff --git a/packages/components/built/index.d.ts b/packages/components/built/index.d.ts
index 71413b91f..f21bd884a 100644
--- a/packages/components/built/index.d.ts
+++ b/packages/components/built/index.d.ts
@@ -12,3 +12,4 @@ export { Drawer } from "./Drawer";
 export { Wallet, WalletComponents } from "./Wallet";
 export { Card } from "./Card";
 export * from "./common/utils";
+export { BalanceContext } from "./BalanceContext";
diff --git a/packages/components/built/index.js b/packages/components/built/index.js
index 71413b91f..f21bd884a 100644
--- a/packages/components/built/index.js
+++ b/packages/components/built/index.js
@@ -12,3 +12,4 @@ export { Drawer } from "./Drawer";
 export { Wallet, WalletComponents } from "./Wallet";
 export { Card } from "./Card";
 export * from "./common/utils";
+export { BalanceContext } from "./BalanceContext";
diff --git a/packages/components/src/BalanceContext.tsx b/packages/components/src/BalanceContext.tsx
new file mode 100644
index 000000000..b2ebdc811
--- /dev/null
+++ b/packages/components/src/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
+}
diff --git a/packages/components/src/Wallet.tsx b/packages/components/src/Wallet.tsx
index d448dab25..c0a466a18 100644
--- a/packages/components/src/Wallet.tsx
+++ b/packages/components/src/Wallet.tsx
@@ -5,6 +5,7 @@ import { Auth } from "./Auth"
 import { Drawer } from "./Drawer"
 import { UtilsContext } from "./UtilsContext"
 import { ComputerContext } from "./ComputerContext"
+import { BalanceContext } from "./BalanceContext"
 
 const Balance = ({
   computer,
@@ -13,7 +14,7 @@ const Balance = ({
   computer: Computer
   paymentModSpec: string | undefined
 }) => {
-  const [balance, setBalance] = useState<number>(0)
+  const { balance, setBalance } = BalanceContext.useBalance()
   const [, setChain] = useState<string>(localStorage.getItem("CHAIN") || "LTC")
   const { showSnackBar, showLoader } = UtilsContext.useUtilsComponents()
 
@@ -24,10 +25,13 @@ const Balance = ({
         const publicKey = computer.getPublicKey()
         const mod = paymentModSpec
         const paymentRevs = paymentModSpec ? await computer.query({ publicKey, mod }) : []
-        const payments = (await Promise.all(paymentRevs.map((rev: string) => computer.sync(rev)))) as any[]
-        const amountsInPaymentToken = payments && payments.length
-          ? payments.reduce((total, pay) => total + (pay._amount - computer.getMinimumFees()), 0)
-          : 0
+        const payments = (await Promise.all(
+          paymentRevs.map((rev: string) => computer.sync(rev))
+        )) as any[]
+        const amountsInPaymentToken =
+          payments && payments.length
+            ? payments.reduce((total, pay) => total + (pay._amount - computer.getMinimumFees()), 0)
+            : 0
 
         const availableWalletBalance = await computer.getBalance()
         setBalance(availableWalletBalance.balance + amountsInPaymentToken)
@@ -50,20 +54,30 @@ const Balance = ({
   }, [])
 
   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={refreshBalance}
           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>
   )
 }
@@ -88,20 +102,22 @@ const PublicKey = ({ computer }: any) => (
 
 const Mnemonic = ({ computer }: any) => {
   const [mnemonicShown, setMnemonicShown] = useState(false)
-  return <div className="mb-4">
+  return (
+    <div className="mb-4">
       <h6 className="text-lg font-bold dark:text-white">
         Mnemonic&nbsp;
         <button
           onClick={() => setMnemonicShown(!mnemonicShown)}
           className="text-xs font-mono font-normal text-gray-500 dark:text-gray-400 hover:text-blue-600 dark:hover:text-blue-500 underline"
         >
-          {mnemonicShown ? 'hide' : 'show'}
+          {mnemonicShown ? "hide" : "show"}
         </button>
       </h6>
       <p className="text-xs font-mono text-gray-500 dark:text-gray-400 break-words">
-        { mnemonicShown ? computer.getMnemonic() : '' }
+        {mnemonicShown ? computer.getMnemonic() : ""}
       </p>
     </div>
+  )
 }
 
 const Url = ({ computer }: any) => (
@@ -160,9 +176,9 @@ export function Wallet({ paymentModSpec }: { paymentModSpec?: string }) {
       <Address computer={computer} />
       <PublicKey computer={computer} />
       <Mnemonic computer={computer} />
-      {!process.env['REACT_APP_CHAIN'] && <Chain computer={computer} />}
-      {!process.env['REACT_APP_NETWORK'] && <Network computer={computer} />}
-      {!process.env['REACT_APP_URL'] && <Url computer={computer} />}
+      {!process.env["REACT_APP_CHAIN"] && <Chain computer={computer} />}
+      {!process.env["REACT_APP_NETWORK"] && <Network computer={computer} />}
+      {!process.env["REACT_APP_URL"] && <Url computer={computer} />}
       <hr className="h-px my-6 bg-gray-200 border-0 dark:bg-gray-700" />
       <LogOut />
     </>
diff --git a/packages/components/src/index.tsx b/packages/components/src/index.tsx
index 19367fb7c..46b156897 100644
--- a/packages/components/src/index.tsx
+++ b/packages/components/src/index.tsx
@@ -12,3 +12,4 @@ export { Drawer } from "./Drawer"
 export { Wallet, WalletComponents } from "./Wallet"
 export { Card } from "./Card"
 export * from "./common/utils"
+export { BalanceContext } from "./BalanceContext"
diff --git a/packages/explorer/src/App.tsx b/packages/explorer/src/App.tsx
index 0a921ded2..d8709619b 100644
--- a/packages/explorer/src/App.tsx
+++ b/packages/explorer/src/App.tsx
@@ -10,7 +10,8 @@ import {
   Error404,
   UtilsContext,
   Wallet,
-  ComputerContext
+  ComputerContext,
+  BalanceContext
 } from '@bitcoin-computer/components'
 import NavBar from './components/Navbar'
 import Block from './components/Block'
@@ -30,21 +31,23 @@ export default function App() {
       <span className="bg-gray-900/50 dark:bg-gray-900/80 z-30 inset-0 sr-only"></span>
       <UtilsContext.UtilsProvider>
         <ComputerContext.Provider value={computer}>
-          <Auth.LoginModal />
-          <Wallet />
-          <NavBar />
-          <div className="p-8 max-w-screen-xl flex flex-wrap items-center justify-between mx-auto">
-            <Routes>
-              <Route path="/" element={<Gallery.WithPagination />} />
-              <Route path="/blocks" element={<Blocks />} />
-              <Route path="/playground" element={<Playground />} />
-              <Route path="/transactions/:txn" element={<Transaction.Component />} />
-              <Route path="/blocks/:block" element={<Block />} />
-              <Route path="/objects/:rev" element={<SmartObject.Component />} />
-              <Route path="/modules/:rev" element={<Module />} />
-              <Route path="*" element={<Error404 />} />
-            </Routes>
-          </div>
+          <BalanceContext.BalanceProvider>
+            <Auth.LoginModal />
+            <Wallet />
+            <NavBar />
+            <div className="p-8 max-w-screen-xl flex flex-wrap items-center justify-between mx-auto">
+              <Routes>
+                <Route path="/" element={<Gallery.WithPagination />} />
+                <Route path="/blocks" element={<Blocks />} />
+                <Route path="/playground" element={<Playground />} />
+                <Route path="/transactions/:txn" element={<Transaction.Component />} />
+                <Route path="/blocks/:block" element={<Block />} />
+                <Route path="/objects/:rev" element={<SmartObject.Component />} />
+                <Route path="/modules/:rev" element={<Module />} />
+                <Route path="*" element={<Error404 />} />
+              </Routes>
+            </div>
+          </BalanceContext.BalanceProvider>
         </ComputerContext.Provider>
       </UtilsContext.UtilsProvider>
     </BrowserRouter>
diff --git a/packages/nft/src/App.tsx b/packages/nft/src/App.tsx
index ff5dfa1fa..eb94869f7 100644
--- a/packages/nft/src/App.tsx
+++ b/packages/nft/src/App.tsx
@@ -8,7 +8,8 @@ import {
   UtilsContext,
   Wallet,
   Transaction,
-  ComputerContext
+  ComputerContext,
+  BalanceContext
 } from "@bitcoin-computer/components"
 import { Navbar } from "./components/Navbar"
 import Mint from "./components/Mint"
@@ -28,20 +29,22 @@ export default function App() {
       <span className="bg-gray-900/50 dark:bg-gray-900/80 z-30 inset-0 sr-only"></span>
       <UtilsContext.UtilsProvider>
         <ComputerContext.Provider value={computer}>
-          <Auth.LoginModal />
-          <Wallet paymentModSpec={REACT_APP_PAYMENT_MOD_SPEC} />
-          <Navbar />
-          <div className="p-8 max-w-screen-xl flex flex-wrap items-center justify-between mx-auto">
-            <Routes>
-              <Route path="/" element={<AllAssets />} />
-              <Route path="/mine" element={<MyAssets />} />
-              <Route path="/mint" element={<Mint />} />
-              <Route path="/objects/:rev" element={<NftView />} />
-              <Route path="/transactions/:txn" element={<Transaction.Component />} />
-              <Route path="*" element={<Navigate to="/" replace={true} />} />
-              <Route path="*" element={<Error404 />} />
-            </Routes>
-          </div>
+          <BalanceContext.BalanceProvider>
+            <Auth.LoginModal />
+            <Wallet paymentModSpec={REACT_APP_PAYMENT_MOD_SPEC} />
+            <Navbar />
+            <div className="p-8 max-w-screen-xl flex flex-wrap items-center justify-between mx-auto">
+              <Routes>
+                <Route path="/" element={<AllAssets />} />
+                <Route path="/mine" element={<MyAssets />} />
+                <Route path="/mint" element={<Mint />} />
+                <Route path="/objects/:rev" element={<NftView />} />
+                <Route path="/transactions/:txn" element={<Transaction.Component />} />
+                <Route path="*" element={<Navigate to="/" replace={true} />} />
+                <Route path="*" element={<Error404 />} />
+              </Routes>
+            </div>
+          </BalanceContext.BalanceProvider>
         </ComputerContext.Provider>
       </UtilsContext.UtilsProvider>
     </BrowserRouter>
diff --git a/packages/wallet/src/App.tsx b/packages/wallet/src/App.tsx
index 321b032b3..439cf0af1 100644
--- a/packages/wallet/src/App.tsx
+++ b/packages/wallet/src/App.tsx
@@ -6,7 +6,8 @@ import {
   Transaction,
   Error404,
   UtilsContext,
-  ComputerContext
+  ComputerContext,
+  BalanceContext
 } from "@bitcoin-computer/components"
 import { useState } from "react"
 import { Send } from "./components/Send"
@@ -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>
diff --git a/packages/wallet/src/components/Send.tsx b/packages/wallet/src/components/Send.tsx
index a8242f93b..87ead23ce 100644
--- a/packages/wallet/src/components/Send.tsx
+++ b/packages/wallet/src/components/Send.tsx
@@ -1,6 +1,6 @@
 import { initFlowbite } from "flowbite"
 import { useCallback, useEffect, useState } from "react"
-import { Auth, UtilsContext } from "@bitcoin-computer/components"
+import { Auth, BalanceContext, UtilsContext } from "@bitcoin-computer/components"
 import { Computer } from "@bitcoin-computer/lib"
 import { HiRefresh } from "react-icons/hi"
 import TransactionTable from "./TransactionTable"
@@ -36,6 +36,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 +47,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)
diff --git a/packages/wallet/src/components/Sidebar.tsx b/packages/wallet/src/components/Sidebar.tsx
index 7c484ef4a..4ba64c0ef 100644
--- a/packages/wallet/src/components/Sidebar.tsx
+++ b/packages/wallet/src/components/Sidebar.tsx
@@ -2,11 +2,11 @@ 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 { Auth, ComputerContext } from "@bitcoin-computer/components"
+import { useCallback, useContext, useEffect } from "react"
+import { Auth, BalanceContext, ComputerContext } from "@bitcoin-computer/components"
 
 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 +23,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>
   )
 }

From 041219d4c1b2a03332516ea8d52203ca6f84cbca Mon Sep 17 00:00:00 2001
From: jonty007 <vivek.singh2994@gmail.com>
Date: Mon, 26 Aug 2024 16:40:21 +0530
Subject: [PATCH 2/2] Move BalanceContext to wallet app

---
 packages/components/built/BalanceContext.d.ts | 15 --------
 packages/components/built/BalanceContext.js   | 30 ----------------
 packages/components/built/Wallet.js           |  3 +-
 packages/components/built/index.d.ts          |  1 -
 packages/components/built/index.js            |  1 -
 packages/components/src/Wallet.tsx            |  3 +-
 packages/components/src/index.tsx             |  1 -
 packages/explorer/src/App.tsx                 | 35 +++++++++----------
 packages/nft/src/App.tsx                      | 33 ++++++++---------
 packages/wallet/src/App.tsx                   |  4 +--
 packages/wallet/src/components/Send.tsx       |  3 +-
 packages/wallet/src/components/Sidebar.tsx    |  3 +-
 .../src/components/Utils}/BalanceContext.tsx  |  0
 13 files changed, 39 insertions(+), 93 deletions(-)
 delete mode 100644 packages/components/built/BalanceContext.d.ts
 delete mode 100644 packages/components/built/BalanceContext.js
 rename packages/{components/src => wallet/src/components/Utils}/BalanceContext.tsx (100%)

diff --git a/packages/components/built/BalanceContext.d.ts b/packages/components/built/BalanceContext.d.ts
deleted file mode 100644
index a6c9d81ef..000000000
--- a/packages/components/built/BalanceContext.d.ts
+++ /dev/null
@@ -1,15 +0,0 @@
-import React, { ReactNode } from "react";
-interface BalanceContextProps {
-    setBalance: (amount: number) => void;
-    balance: number;
-}
-interface BalanceProviderProps {
-    children: ReactNode;
-}
-export declare const BalanceProvider: React.FC<BalanceProviderProps>;
-export declare const useBalance: () => BalanceContextProps;
-export declare const BalanceContext: {
-    BalanceProvider: React.FC<BalanceProviderProps>;
-    useBalance: () => BalanceContextProps;
-};
-export {};
diff --git a/packages/components/built/BalanceContext.js b/packages/components/built/BalanceContext.js
deleted file mode 100644
index f9b2194bb..000000000
--- a/packages/components/built/BalanceContext.js
+++ /dev/null
@@ -1,30 +0,0 @@
-var __assign = (this && this.__assign) || function () {
-    __assign = Object.assign || function(t) {
-        for (var s, i = 1, n = arguments.length; i < n; i++) {
-            s = arguments[i];
-            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
-                t[p] = s[p];
-        }
-        return t;
-    };
-    return __assign.apply(this, arguments);
-};
-import { jsx as _jsx } from "react/jsx-runtime";
-import { createContext, useState, useContext } from "react";
-var balanceContext = createContext(undefined);
-export var BalanceProvider = function (_a) {
-    var children = _a.children;
-    var _b = useState(0), balance = _b[0], setBalance = _b[1];
-    return (_jsx(balanceContext.Provider, __assign({ value: { balance: balance, setBalance: setBalance } }, { children: children })));
-};
-export var useBalance = function () {
-    var context = useContext(balanceContext);
-    if (!context) {
-        throw new Error("useBalance must be used within a BalanceProvider");
-    }
-    return context;
-};
-export var BalanceContext = {
-    BalanceProvider: BalanceProvider,
-    useBalance: useBalance
-};
diff --git a/packages/components/built/Wallet.js b/packages/components/built/Wallet.js
index 27c51bdf1..6af397a47 100644
--- a/packages/components/built/Wallet.js
+++ b/packages/components/built/Wallet.js
@@ -52,10 +52,9 @@ import { Auth } from "./Auth";
 import { Drawer } from "./Drawer";
 import { UtilsContext } from "./UtilsContext";
 import { ComputerContext } from "./ComputerContext";
-import { BalanceContext } from "./BalanceContext";
 var Balance = function (_a) {
     var computer = _a.computer, paymentModSpec = _a.paymentModSpec;
-    var _b = BalanceContext.useBalance(), balance = _b.balance, setBalance = _b.setBalance;
+    var _b = useState(0), balance = _b[0], setBalance = _b[1];
     var _c = useState(localStorage.getItem("CHAIN") || "LTC"), setChain = _c[1];
     var _d = UtilsContext.useUtilsComponents(), showSnackBar = _d.showSnackBar, showLoader = _d.showLoader;
     var refreshBalance = useCallback(function () { return __awaiter(void 0, void 0, void 0, function () {
diff --git a/packages/components/built/index.d.ts b/packages/components/built/index.d.ts
index f21bd884a..71413b91f 100644
--- a/packages/components/built/index.d.ts
+++ b/packages/components/built/index.d.ts
@@ -12,4 +12,3 @@ export { Drawer } from "./Drawer";
 export { Wallet, WalletComponents } from "./Wallet";
 export { Card } from "./Card";
 export * from "./common/utils";
-export { BalanceContext } from "./BalanceContext";
diff --git a/packages/components/built/index.js b/packages/components/built/index.js
index f21bd884a..71413b91f 100644
--- a/packages/components/built/index.js
+++ b/packages/components/built/index.js
@@ -12,4 +12,3 @@ export { Drawer } from "./Drawer";
 export { Wallet, WalletComponents } from "./Wallet";
 export { Card } from "./Card";
 export * from "./common/utils";
-export { BalanceContext } from "./BalanceContext";
diff --git a/packages/components/src/Wallet.tsx b/packages/components/src/Wallet.tsx
index c0a466a18..e72c3d8d0 100644
--- a/packages/components/src/Wallet.tsx
+++ b/packages/components/src/Wallet.tsx
@@ -5,7 +5,6 @@ import { Auth } from "./Auth"
 import { Drawer } from "./Drawer"
 import { UtilsContext } from "./UtilsContext"
 import { ComputerContext } from "./ComputerContext"
-import { BalanceContext } from "./BalanceContext"
 
 const Balance = ({
   computer,
@@ -14,7 +13,7 @@ const Balance = ({
   computer: Computer
   paymentModSpec: string | undefined
 }) => {
-  const { balance, setBalance } = BalanceContext.useBalance()
+  const [balance, setBalance] = useState<number>(0)
   const [, setChain] = useState<string>(localStorage.getItem("CHAIN") || "LTC")
   const { showSnackBar, showLoader } = UtilsContext.useUtilsComponents()
 
diff --git a/packages/components/src/index.tsx b/packages/components/src/index.tsx
index 46b156897..19367fb7c 100644
--- a/packages/components/src/index.tsx
+++ b/packages/components/src/index.tsx
@@ -12,4 +12,3 @@ export { Drawer } from "./Drawer"
 export { Wallet, WalletComponents } from "./Wallet"
 export { Card } from "./Card"
 export * from "./common/utils"
-export { BalanceContext } from "./BalanceContext"
diff --git a/packages/explorer/src/App.tsx b/packages/explorer/src/App.tsx
index d8709619b..0a921ded2 100644
--- a/packages/explorer/src/App.tsx
+++ b/packages/explorer/src/App.tsx
@@ -10,8 +10,7 @@ import {
   Error404,
   UtilsContext,
   Wallet,
-  ComputerContext,
-  BalanceContext
+  ComputerContext
 } from '@bitcoin-computer/components'
 import NavBar from './components/Navbar'
 import Block from './components/Block'
@@ -31,23 +30,21 @@ export default function App() {
       <span className="bg-gray-900/50 dark:bg-gray-900/80 z-30 inset-0 sr-only"></span>
       <UtilsContext.UtilsProvider>
         <ComputerContext.Provider value={computer}>
-          <BalanceContext.BalanceProvider>
-            <Auth.LoginModal />
-            <Wallet />
-            <NavBar />
-            <div className="p-8 max-w-screen-xl flex flex-wrap items-center justify-between mx-auto">
-              <Routes>
-                <Route path="/" element={<Gallery.WithPagination />} />
-                <Route path="/blocks" element={<Blocks />} />
-                <Route path="/playground" element={<Playground />} />
-                <Route path="/transactions/:txn" element={<Transaction.Component />} />
-                <Route path="/blocks/:block" element={<Block />} />
-                <Route path="/objects/:rev" element={<SmartObject.Component />} />
-                <Route path="/modules/:rev" element={<Module />} />
-                <Route path="*" element={<Error404 />} />
-              </Routes>
-            </div>
-          </BalanceContext.BalanceProvider>
+          <Auth.LoginModal />
+          <Wallet />
+          <NavBar />
+          <div className="p-8 max-w-screen-xl flex flex-wrap items-center justify-between mx-auto">
+            <Routes>
+              <Route path="/" element={<Gallery.WithPagination />} />
+              <Route path="/blocks" element={<Blocks />} />
+              <Route path="/playground" element={<Playground />} />
+              <Route path="/transactions/:txn" element={<Transaction.Component />} />
+              <Route path="/blocks/:block" element={<Block />} />
+              <Route path="/objects/:rev" element={<SmartObject.Component />} />
+              <Route path="/modules/:rev" element={<Module />} />
+              <Route path="*" element={<Error404 />} />
+            </Routes>
+          </div>
         </ComputerContext.Provider>
       </UtilsContext.UtilsProvider>
     </BrowserRouter>
diff --git a/packages/nft/src/App.tsx b/packages/nft/src/App.tsx
index eb94869f7..ff5dfa1fa 100644
--- a/packages/nft/src/App.tsx
+++ b/packages/nft/src/App.tsx
@@ -8,8 +8,7 @@ import {
   UtilsContext,
   Wallet,
   Transaction,
-  ComputerContext,
-  BalanceContext
+  ComputerContext
 } from "@bitcoin-computer/components"
 import { Navbar } from "./components/Navbar"
 import Mint from "./components/Mint"
@@ -29,22 +28,20 @@ export default function App() {
       <span className="bg-gray-900/50 dark:bg-gray-900/80 z-30 inset-0 sr-only"></span>
       <UtilsContext.UtilsProvider>
         <ComputerContext.Provider value={computer}>
-          <BalanceContext.BalanceProvider>
-            <Auth.LoginModal />
-            <Wallet paymentModSpec={REACT_APP_PAYMENT_MOD_SPEC} />
-            <Navbar />
-            <div className="p-8 max-w-screen-xl flex flex-wrap items-center justify-between mx-auto">
-              <Routes>
-                <Route path="/" element={<AllAssets />} />
-                <Route path="/mine" element={<MyAssets />} />
-                <Route path="/mint" element={<Mint />} />
-                <Route path="/objects/:rev" element={<NftView />} />
-                <Route path="/transactions/:txn" element={<Transaction.Component />} />
-                <Route path="*" element={<Navigate to="/" replace={true} />} />
-                <Route path="*" element={<Error404 />} />
-              </Routes>
-            </div>
-          </BalanceContext.BalanceProvider>
+          <Auth.LoginModal />
+          <Wallet paymentModSpec={REACT_APP_PAYMENT_MOD_SPEC} />
+          <Navbar />
+          <div className="p-8 max-w-screen-xl flex flex-wrap items-center justify-between mx-auto">
+            <Routes>
+              <Route path="/" element={<AllAssets />} />
+              <Route path="/mine" element={<MyAssets />} />
+              <Route path="/mint" element={<Mint />} />
+              <Route path="/objects/:rev" element={<NftView />} />
+              <Route path="/transactions/:txn" element={<Transaction.Component />} />
+              <Route path="*" element={<Navigate to="/" replace={true} />} />
+              <Route path="*" element={<Error404 />} />
+            </Routes>
+          </div>
         </ComputerContext.Provider>
       </UtilsContext.UtilsProvider>
     </BrowserRouter>
diff --git a/packages/wallet/src/App.tsx b/packages/wallet/src/App.tsx
index 439cf0af1..6836d5d4e 100644
--- a/packages/wallet/src/App.tsx
+++ b/packages/wallet/src/App.tsx
@@ -6,8 +6,7 @@ import {
   Transaction,
   Error404,
   UtilsContext,
-  ComputerContext,
-  BalanceContext
+  ComputerContext
 } from "@bitcoin-computer/components"
 import { useState } from "react"
 import { Send } from "./components/Send"
@@ -15,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 {
diff --git a/packages/wallet/src/components/Send.tsx b/packages/wallet/src/components/Send.tsx
index 87ead23ce..509d6764c 100644
--- a/packages/wallet/src/components/Send.tsx
+++ b/packages/wallet/src/components/Send.tsx
@@ -1,10 +1,11 @@
 import { initFlowbite } from "flowbite"
 import { useCallback, useEffect, useState } from "react"
-import { Auth, BalanceContext, UtilsContext } from "@bitcoin-computer/components"
+import { Auth, UtilsContext } from "@bitcoin-computer/components"
 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: [] })
diff --git a/packages/wallet/src/components/Sidebar.tsx b/packages/wallet/src/components/Sidebar.tsx
index 4ba64c0ef..66c3e955a 100644
--- a/packages/wallet/src/components/Sidebar.tsx
+++ b/packages/wallet/src/components/Sidebar.tsx
@@ -3,7 +3,8 @@ import { Computer } from "@bitcoin-computer/lib"
 import { HiRefresh } from "react-icons/hi"
 import { initFlowbite } from "flowbite"
 import { useCallback, useContext, useEffect } from "react"
-import { Auth, BalanceContext, ComputerContext } from "@bitcoin-computer/components"
+import { Auth, ComputerContext } from "@bitcoin-computer/components"
+import { BalanceContext } from "./Utils/BalanceContext"
 
 function Balance({ computer }: { computer: Computer }) {
   const { balance, setBalance } = BalanceContext.useBalance()
diff --git a/packages/components/src/BalanceContext.tsx b/packages/wallet/src/components/Utils/BalanceContext.tsx
similarity index 100%
rename from packages/components/src/BalanceContext.tsx
rename to packages/wallet/src/components/Utils/BalanceContext.tsx