From 187da1d6a7ffbf9c049d584d0bfe8e8a96516b8f Mon Sep 17 00:00:00 2001
From: Clemens Ley <ley.clemens@gmail.com>
Date: Mon, 22 Apr 2024 16:47:03 +0200
Subject: [PATCH 01/10] Explorer: make switching networks more robust when not
 logged in

---
 packages/explorer/src/components/Navbar.tsx | 104 ++++++++++++--------
 1 file changed, 61 insertions(+), 43 deletions(-)

diff --git a/packages/explorer/src/components/Navbar.tsx b/packages/explorer/src/components/Navbar.tsx
index 0fa6e66b6..adb9d2045 100644
--- a/packages/explorer/src/components/Navbar.tsx
+++ b/packages/explorer/src/components/Navbar.tsx
@@ -41,10 +41,26 @@ function formatChainAndNetwork(chain: string, network: string) {
 }
 
 function ModalContent() {
+  const [chain, setChain] = useState<string>('')
+  const [network, setNetwork] = useState<string>('')
   const [url, setUrl] = useState<string>('')
-  function setNetwork(e: React.SyntheticEvent) {
+  const { showSnackBar } = UtilsContext.useUtilsComponents()
+
+  function submit(e: React.SyntheticEvent) {    
     e.preventDefault()
-    localStorage.setItem('URL', url)
+
+    const isValidChain = ['LTC', 'BTC', 'DOGE'].includes(chain)
+    const isValidNetwork = ['mainnet', 'testnet', 'regtest'].includes(network)
+
+    if (!isValidChain || !isValidNetwork) {
+      showSnackBar('Error setting chain, network, or url', false)
+    } else {
+      localStorage.setItem('URL', url)
+      localStorage.setItem('CHAIN', chain)
+      localStorage.setItem('NETWORK', network)
+      window.location.href = "/"
+    }
+
   }
 
   function closeModal() {
@@ -52,14 +68,14 @@ function ModalContent() {
   }
 
   return (
-    <form onSubmit={setNetwork}>
+    <form onSubmit={submit}>
       <div className="p-4 md:p-5">
         <div>
           <label
             htmlFor="url"
             className="block mb-2 text-sm font-medium text-gray-900 dark:text-white"
           >
-            Please insert the URL of a node for your desired configuration
+            Url
           </label>
 
           <input
@@ -68,21 +84,46 @@ function ModalContent() {
             type="text"
             name="url"
             id="url"
-            className="bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg focus:ring-blue-500 focus:border-blue-500 block w-full p-2.5 dark:bg-gray-600 dark:border-gray-500 dark:placeholder-gray-400 dark:text-white"
+            className="mb-2 bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg focus:ring-blue-500 focus:border-blue-500 block w-full p-2.5 dark:bg-gray-600 dark:border-gray-500 dark:placeholder-gray-400 dark:text-white"
             placeholder="http://127.0.0.1:1031"
             required
           />
 
-          <label className="block mt-4 text-sm font-medium text-gray-900 dark:text-white">
-            Want to run your own node? Click&nbsp;
-            <Link
-              to="https://github.com/bitcoin-computer/monorepo/tree/main/packages/node#readme"
-              target="_blank"
-              className="font-medium text-blue-600 dark:text-blue-500 hover:underline"
-            >
-              here
-            </Link>
+          <label
+            htmlFor="chain"
+            className="block mb-2 text-sm font-medium text-gray-900 dark:text-white"
+          >
+            Chain
           </label>
+
+          <input
+            onChange={(e) => setChain(e.target.value)}
+            value={chain}
+            type="text"
+            name="chain"
+            id="chain"
+            className="mb-2 bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg focus:ring-blue-500 focus:border-blue-500 block w-full p-2.5 dark:bg-gray-600 dark:border-gray-500 dark:placeholder-gray-400 dark:text-white"
+            placeholder="LTC"
+            required
+          />
+
+          <label
+            htmlFor="network"
+            className="block mb-2 text-sm font-medium text-gray-900 dark:text-white"
+          >
+            Network
+          </label>
+
+          <input
+            onChange={(e) => setNetwork(e.target.value)}
+            value={network}
+            type="text"
+            name="network"
+            id="network"
+            className="mb-2 bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg focus:ring-blue-500 focus:border-blue-500 block w-full p-2.5 dark:bg-gray-600 dark:border-gray-500 dark:placeholder-gray-400 dark:text-white"
+            placeholder="regtest"
+            required
+          />
         </div>
       </div>
 
@@ -123,7 +164,8 @@ function NotLoggedMenu() {
       setDropDownLabel(formatChainAndNetwork(chain, network))
       window.location.href = '/'
     } catch (err) {
-      showSnackBar('Error setting chain and network', false)
+      if (err instanceof Error && !err.message.startsWith('Cannot find environment variable '))
+        throw err
       Modal.get(modalId).show()
     }
   }
@@ -139,20 +181,8 @@ function NotLoggedMenu() {
             className="flex items-center justify-between w-full py-2 px-3 text-gray-900 rounded hover:bg-gray-100 md:hover:bg-transparent md:border-0 md:hover:text-blue-700 md:p-0 md:w-auto dark:text-white md:dark:hover:text-blue-500 dark:focus:text-white dark:border-gray-700 dark:hover:bg-gray-700 md:dark:hover:bg-transparent"
           >
             {dropDownLabel}
-            <svg
-              className="w-2.5 h-2.5 ms-2.5"
-              aria-hidden="true"
-              xmlns="http://www.w3.org/2000/svg"
-              fill="none"
-              viewBox="0 0 10 6"
-            >
-              <path
-                stroke="currentColor"
-                strokeLinecap="round"
-                strokeLinejoin="round"
-                strokeWidth="2"
-                d="m1 1 4 4 4-4"
-              />
+            <svg className="w-2.5 h-2.5 ms-2.5" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 10 6">
+              <path stroke="currentColor" strokeLinecap="round" strokeLinejoin="round" strokeWidth="2" d="m1 1 4 4 4-4"/>
             </svg>
           </button>
           <div
@@ -258,20 +288,8 @@ export default function Navbar() {
             aria-expanded="false"
           >
             <span className="sr-only">Open main menu</span>
-            <svg
-              className="w-5 h-5"
-              aria-hidden="true"
-              xmlns="http://www.w3.org/2000/svg"
-              fill="none"
-              viewBox="0 0 17 14"
-            >
-              <path
-                stroke="currentColor"
-                strokeLinecap="round"
-                strokeLinejoin="round"
-                strokeWidth="2"
-                d="M1 1h15M1 7h15M1 13h15"
-              />
+            <svg className="w-5 h-5" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 17 14">
+              <path stroke="currentColor" strokeLinecap="round" strokeLinejoin="round" strokeWidth="2" d="M1 1h15M1 7h15M1 13h15" />
             </svg>
           </button>
 

From e14251e3e3575810d5007235151feb3b824b08fb Mon Sep 17 00:00:00 2001
From: Clemens Ley <ley.clemens@gmail.com>
Date: Mon, 22 Apr 2024 17:32:42 +0200
Subject: [PATCH 02/10] Swap: remove reference to non-existing file

---
 packages/swap/src/index.ts | 1 -
 1 file changed, 1 deletion(-)

diff --git a/packages/swap/src/index.ts b/packages/swap/src/index.ts
index 93636bd14..de74162fc 100644
--- a/packages/swap/src/index.ts
+++ b/packages/swap/src/index.ts
@@ -5,4 +5,3 @@ export * from './sale.js'
 export * from './static-swap.js'
 export * from './swap.js'
 export * from './swappable.js'
-export * from './valuable.js'

From a5140ac1082a8cc5361366ce8678001d15e39e12 Mon Sep 17 00:00:00 2001
From: Clemens Ley <ley.clemens@gmail.com>
Date: Mon, 22 Apr 2024 17:36:37 +0200
Subject: [PATCH 03/10] Run lint-fix in all packages

---
 package-lock.json                          | 218 +++++++++++++++------
 packages/TBC20/test/token.test.ts          |   4 +-
 packages/TBC404/test/main.test.ts          |   6 +-
 packages/components/built/Auth.js          |   5 +-
 packages/components/package.json           |   2 +-
 packages/components/src/Auth.tsx           |   7 +-
 packages/nodejs-template/test/main.test.ts |   6 +-
 packages/swap/src/ord-sale.ts              |   7 +-
 packages/swap/test/static-swap.test.ts     |   6 +-
 9 files changed, 182 insertions(+), 79 deletions(-)

diff --git a/package-lock.json b/package-lock.json
index 965438bc4..b5ae07823 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -2039,6 +2039,10 @@
         "safe-buffer": "^5.1.2"
       }
     },
+    "node_modules/@bitcoin-computer/nft": {
+      "resolved": "packages/nft",
+      "link": true
+    },
     "node_modules/@bitcoin-computer/node": {
       "resolved": "packages/node",
       "link": true
@@ -5709,9 +5713,9 @@
       "integrity": "sha512-dJvrYWxP/UcXm36Qn36fxhUKu8A/xMRXVT2cliFF1Z7UA9liG5Psj3ezNSZw+5puH2czDXRLcXQxf8JbJt0ejg=="
     },
     "node_modules/@types/node": {
-      "version": "20.11.25",
-      "resolved": "https://registry.npmjs.org/@types/node/-/node-20.11.25.tgz",
-      "integrity": "sha512-TBHyJxk2b7HceLVGFcpAUjsa5zIdsPWlR6XHfyGzd0SFu+/NFgQgMAl96MSDZgQDvJAvV6BKsFOrt6zIL09JDw==",
+      "version": "20.11.30",
+      "resolved": "https://registry.npmjs.org/@types/node/-/node-20.11.30.tgz",
+      "integrity": "sha512-dHM6ZxwlmuZaRmUPfv1p+KrdD1Dci04FbdEm/9wEMouFqxYoFl5aMkt0VMAUtYRQDyYvD41WJLukhq/ha3YuTw==",
       "dependencies": {
         "undici-types": "~5.26.4"
       }
@@ -28657,9 +28661,9 @@
     },
     "packages/chat": {
       "name": "@bitcoin-computer/chat",
-      "version": "0.17.2-beta.0",
+      "version": "0.18.0-beta.0",
       "dependencies": {
-        "@bitcoin-computer/lib": "^0.17.2-beta.0",
+        "@bitcoin-computer/lib": "^0.18.0-beta.0",
         "@testing-library/jest-dom": "^4.2.4",
         "@testing-library/react": "^9.3.2",
         "@testing-library/user-event": "^7.1.2",
@@ -28962,10 +28966,10 @@
     },
     "packages/components": {
       "name": "@bitcoin-computer/components",
-      "version": "0.17.2-beta.0",
+      "version": "0.18.0-beta.0",
       "license": "ISC",
       "dependencies": {
-        "@bitcoin-computer/lib": "^0.17.2-beta.0",
+        "@bitcoin-computer/lib": "^0.18.0-beta.0",
         "flowbite": "^2.3.0",
         "react": "^18.2.0",
         "react-dom": "^18.2.0"
@@ -28976,10 +28980,10 @@
     },
     "packages/cra-template": {
       "name": "@bitcoin-computer/cra-template",
-      "version": "0.17.2-beta.0",
+      "version": "0.18.0-beta.0",
       "dependencies": {
-        "@bitcoin-computer/components": "^0.17.2-beta.0",
-        "@bitcoin-computer/lib": "^0.17.2-beta.0",
+        "@bitcoin-computer/components": "^0.18.0-beta.0",
+        "@bitcoin-computer/lib": "^0.18.0-beta.0",
         "@testing-library/jest-dom": "^6.4.2",
         "@testing-library/react": "^14.2.1",
         "@testing-library/user-event": "^14.5.2",
@@ -29034,10 +29038,10 @@
     },
     "packages/explorer": {
       "name": "@bitcoin-computer/explorer",
-      "version": "0.17.2-beta.0",
+      "version": "0.18.0-beta.0",
       "dependencies": {
-        "@bitcoin-computer/components": "^0.17.2-beta.0",
-        "@bitcoin-computer/lib": "^0.17.2-beta.0",
+        "@bitcoin-computer/components": "^0.18.0-beta.0",
+        "@bitcoin-computer/lib": "^0.18.0-beta.0",
         "@testing-library/jest-dom": "^6.4.2",
         "@testing-library/react": "^14.2.1",
         "@testing-library/user-event": "^14.5.2",
@@ -29074,11 +29078,11 @@
     },
     "packages/lib": {
       "name": "@bitcoin-computer/lib",
-      "version": "0.17.2-beta.0",
+      "version": "0.18.0-beta.0",
       "license": "CC-BY-ND-4.0",
       "dependencies": {
         "@babel/parser": "^7.23.9",
-        "@bitcoin-computer/nakamotojs": "^0.17.2-beta.0",
+        "@bitcoin-computer/nakamotojs": "^0.18.0-beta.0",
         "@bitcoin-computer/tiny-secp256k1": "^2.2.1",
         "@endo/static-module-record": "^1.0.4",
         "axios": "1.6.7",
@@ -29122,6 +29126,23 @@
         "node": ">=16"
       }
     },
+    "packages/lib/node_modules/@bitcoin-computer/nakamotojs": {
+      "version": "0.18.0-beta.0",
+      "resolved": "https://registry.npmjs.org/@bitcoin-computer/nakamotojs/-/nakamotojs-0.18.0-beta.0.tgz",
+      "integrity": "sha512-IlugYM4QP5QQ4QzPNZaOUXH76hoQkRGzqKO4YRWVGLb8mIbfmf86qvQ+fgo/TN6bZzxoXfGmza6efNPEBmaT4w==",
+      "dependencies": {
+        "@noble/hashes": "^1.2.0",
+        "bech32": "^2.0.0",
+        "bip174": "^2.1.0",
+        "bs58check": "^3.0.1",
+        "buffer": "^6.0.3",
+        "typeforce": "^1.11.3",
+        "varuint-bitcoin": "^1.1.2"
+      },
+      "engines": {
+        "node": ">=8.0.0"
+      }
+    },
     "packages/lib/node_modules/assertion-error": {
       "version": "1.1.0",
       "resolved": "https://registry.npmjs.org/assertion-error/-/assertion-error-1.1.0.tgz",
@@ -29193,7 +29214,7 @@
     },
     "packages/nakamotojs": {
       "name": "@bitcoin-computer/nakamotojs",
-      "version": "0.17.2-beta.0",
+      "version": "0.18.1-beta.0",
       "license": "MIT",
       "dependencies": {
         "@noble/hashes": "^1.2.0",
@@ -29542,14 +29563,74 @@
         "typescript": ">=2.7"
       }
     },
+    "packages/nft": {
+      "name": "@bitcoin-computer/nft",
+      "version": "0.18.0-beta.0",
+      "dependencies": {
+        "@bitcoin-computer/components": "^0.18.0-beta.0",
+        "@bitcoin-computer/lib": "^0.18.0-beta.0",
+        "@bitcoin-computer/swap": "^0.18.0-beta.0",
+        "@bitcoin-computer/TBC721": "^0.18.0-beta.0",
+        "@testing-library/jest-dom": "^6.4.2",
+        "@testing-library/react": "^14.2.1",
+        "@testing-library/user-event": "^14.5.2",
+        "@types/jest": "^29.5.12",
+        "@types/node": "^20.11.21",
+        "@types/react": "^18.2.60",
+        "@types/react-dom": "^18.2.19",
+        "flowbite": "^2.3.0",
+        "react": "^18.2.0",
+        "react-dom": "^18.2.0",
+        "react-icons": "^5.0.1",
+        "react-router-dom": "^6.22.1",
+        "react-scripts": "5.0.1",
+        "tailwindcss": "^3.4.1",
+        "typescript": "^4.9.5",
+        "web-vitals": "^3.5.2"
+      },
+      "devDependencies": {
+        "@types/chai": "^4.3.12",
+        "@types/expect": "^24.3.0",
+        "@types/mocha": "^10.0.6",
+        "@types/node": "~18.0.0",
+        "chai": "^5.1.0",
+        "dotenv": "^16.4.5",
+        "eslint": "^8.57.0",
+        "eslint-config-airbnb-typescript": "^17.1.0",
+        "eslint-config-prettier": "~9.1.0",
+        "eslint-plugin-import": "^2.29.1",
+        "mocha": "^10.3.0",
+        "prettier": "~3.2.5",
+        "typescript": "~5.3.3"
+      }
+    },
+    "packages/nft/node_modules/@types/node": {
+      "version": "18.0.6",
+      "resolved": "https://registry.npmjs.org/@types/node/-/node-18.0.6.tgz",
+      "integrity": "sha512-/xUq6H2aQm261exT6iZTMifUySEt4GR5KX8eYyY+C4MSNPqSh9oNIP7tz2GLKTlFaiBbgZNxffoR3CVRG+cljw==",
+      "dev": true
+    },
+    "packages/nft/node_modules/typescript": {
+      "version": "5.3.3",
+      "resolved": "https://registry.npmjs.org/typescript/-/typescript-5.3.3.tgz",
+      "integrity": "sha512-pXWcraxM0uxAS+tN0AG/BF2TyqmHO014Z070UsJ+pFvYuRSq8KH8DmWpnbXe0pEPDHXZV3FcAbJkijJ5oNEnWw==",
+      "dev": true,
+      "bin": {
+        "tsc": "bin/tsc",
+        "tsserver": "bin/tsserver"
+      },
+      "engines": {
+        "node": ">=14.17"
+      }
+    },
     "packages/node": {
       "name": "@bitcoin-computer/node",
-      "version": "0.17.2-beta.0",
+      "version": "0.18.0-beta.0",
       "license": "CC-BY-ND-4.0",
       "dependencies": {
         "@babel/core": "^7.23.9",
-        "@bitcoin-computer/lib": "^0.17.2-beta.0",
-        "@bitcoin-computer/nakamotojs": "^0.17.2-beta.0",
+        "@bitcoin-computer/lib": "^0.18.0-beta.0",
+        "@bitcoin-computer/nakamotojs": "^0.18.0-beta.0",
         "@bitcoin-computer/tiny-secp256k1": "^2.2.1",
         "@types/chai": "^4.3.1",
         "@types/mocha": "^10.0.6",
@@ -29583,11 +29664,27 @@
         "winston-daily-rotate-file": "^5.0.0",
         "zeromq": "6.0.0-beta.6"
       },
-      "devDependencies": {},
       "engines": {
         "node": ">=16"
       }
     },
+    "packages/node/node_modules/@bitcoin-computer/nakamotojs": {
+      "version": "0.18.0-beta.0",
+      "resolved": "https://registry.npmjs.org/@bitcoin-computer/nakamotojs/-/nakamotojs-0.18.0-beta.0.tgz",
+      "integrity": "sha512-IlugYM4QP5QQ4QzPNZaOUXH76hoQkRGzqKO4YRWVGLb8mIbfmf86qvQ+fgo/TN6bZzxoXfGmza6efNPEBmaT4w==",
+      "dependencies": {
+        "@noble/hashes": "^1.2.0",
+        "bech32": "^2.0.0",
+        "bip174": "^2.1.0",
+        "bs58check": "^3.0.1",
+        "buffer": "^6.0.3",
+        "typeforce": "^1.11.3",
+        "varuint-bitcoin": "^1.1.2"
+      },
+      "engines": {
+        "node": ">=8.0.0"
+      }
+    },
     "packages/node/node_modules/assertion-error": {
       "version": "1.1.0",
       "resolved": "https://registry.npmjs.org/assertion-error/-/assertion-error-1.1.0.tgz",
@@ -29674,10 +29771,10 @@
     },
     "packages/nodejs-template": {
       "name": "@bitcoin-computer/nodejs-template",
-      "version": "0.17.2-beta.0",
+      "version": "0.18.0-beta.0",
       "license": "MIT",
       "dependencies": {
-        "@bitcoin-computer/lib": "^0.17.2-beta.0"
+        "@bitcoin-computer/lib": "^0.18.0-beta.0"
       },
       "devDependencies": {
         "@types/mocha": "^10.0.6",
@@ -29742,7 +29839,7 @@
     },
     "packages/secp256k1": {
       "name": "@bitcoin-computer/secp256k1",
-      "version": "0.17.2-beta.0",
+      "version": "0.18.0-beta.0",
       "license": "MIT",
       "dependencies": {
         "uint8array-tools": "0.0.7"
@@ -30380,16 +30477,16 @@
     },
     "packages/swap": {
       "name": "@bitcoin-computer/swap",
-      "version": "0.17.2-beta.0",
+      "version": "0.18.0-beta.0",
       "license": "MIT",
       "dependencies": {
-        "@bitcoin-computer/lib": "^0.17.2-beta.0",
-        "@bitcoin-computer/nakamotojs": "^0.17.2-beta.0",
-        "@bitcoin-computer/TBC721": "^0.17.2-beta.0"
+        "@bitcoin-computer/lib": "^0.18.0-beta.0",
+        "@bitcoin-computer/nakamotojs": "^0.18.0-beta.0",
+        "@bitcoin-computer/TBC721": "^0.18.0-beta.0"
       },
       "devDependencies": {
         "@types/mocha": "^9.1.1",
-        "@types/node": "~18.0.0",
+        "@types/node": "~20.11.21",
         "@typescript-eslint/eslint-plugin": "^5.10.0",
         "@typescript-eslint/parser": "^5.10.0",
         "chai": "^4.3.6",
@@ -30405,7 +30502,24 @@
         "ts-node": "^10.8.1",
         "tslib": "~2.4.0",
         "tsutils": "~3.21.0",
-        "typescript": "~4.7.2"
+        "typescript": "~5.3.3"
+      }
+    },
+    "packages/swap/node_modules/@bitcoin-computer/nakamotojs": {
+      "version": "0.18.0-beta.0",
+      "resolved": "https://registry.npmjs.org/@bitcoin-computer/nakamotojs/-/nakamotojs-0.18.0-beta.0.tgz",
+      "integrity": "sha512-IlugYM4QP5QQ4QzPNZaOUXH76hoQkRGzqKO4YRWVGLb8mIbfmf86qvQ+fgo/TN6bZzxoXfGmza6efNPEBmaT4w==",
+      "dependencies": {
+        "@noble/hashes": "^1.2.0",
+        "bech32": "^2.0.0",
+        "bip174": "^2.1.0",
+        "bs58check": "^3.0.1",
+        "buffer": "^6.0.3",
+        "typeforce": "^1.11.3",
+        "varuint-bitcoin": "^1.1.2"
+      },
+      "engines": {
+        "node": ">=8.0.0"
       }
     },
     "packages/swap/node_modules/@types/mocha": {
@@ -30414,12 +30528,6 @@
       "integrity": "sha512-Z61JK7DKDtdKTWwLeElSEBcWGRLY8g95ic5FoQqI9CMx0ns/Ghep3B4DfcEimiKMvtamNVULVNKEsiwV3aQmXw==",
       "dev": true
     },
-    "packages/swap/node_modules/@types/node": {
-      "version": "18.0.6",
-      "resolved": "https://registry.npmjs.org/@types/node/-/node-18.0.6.tgz",
-      "integrity": "sha512-/xUq6H2aQm261exT6iZTMifUySEt4GR5KX8eYyY+C4MSNPqSh9oNIP7tz2GLKTlFaiBbgZNxffoR3CVRG+cljw==",
-      "dev": true
-    },
     "packages/swap/node_modules/@typescript-eslint/eslint-plugin": {
       "version": "5.62.0",
       "resolved": "https://registry.npmjs.org/@typescript-eslint/eslint-plugin/-/eslint-plugin-5.62.0.tgz",
@@ -30775,16 +30883,16 @@
       "dev": true
     },
     "packages/swap/node_modules/typescript": {
-      "version": "4.7.4",
-      "resolved": "https://registry.npmjs.org/typescript/-/typescript-4.7.4.tgz",
-      "integrity": "sha512-C0WQT0gezHuw6AdY1M2jxUO83Rjf0HP7Sk1DtXj6j1EwkQNZrHAg2XPWlq62oqEhYvONq5pkC2Y9oPljWToLmQ==",
+      "version": "5.3.3",
+      "resolved": "https://registry.npmjs.org/typescript/-/typescript-5.3.3.tgz",
+      "integrity": "sha512-pXWcraxM0uxAS+tN0AG/BF2TyqmHO014Z070UsJ+pFvYuRSq8KH8DmWpnbXe0pEPDHXZV3FcAbJkijJ5oNEnWw==",
       "dev": true,
       "bin": {
         "tsc": "bin/tsc",
         "tsserver": "bin/tsserver"
       },
       "engines": {
-        "node": ">=4.2.0"
+        "node": ">=14.17"
       }
     },
     "packages/swap/node_modules/yallist": {
@@ -30795,10 +30903,10 @@
     },
     "packages/TBC20": {
       "name": "@bitcoin-computer/TBC20",
-      "version": "0.17.2-beta.0",
+      "version": "0.18.0-beta.0",
       "license": "Apache-2.0",
       "dependencies": {
-        "@bitcoin-computer/lib": "^0.17.2-beta.0",
+        "@bitcoin-computer/lib": "^0.18.0-beta.0",
         "eslint-plugin-prettier": "^5.1.3",
         "ts-node": "^10.9.2",
         "tslib": "~2.6.2"
@@ -30821,9 +30929,9 @@
     },
     "packages/TBC20-app": {
       "name": "@bitcoin-computer/TBC20-app",
-      "version": "0.17.2-beta.0",
+      "version": "0.18.0-beta.0",
       "dependencies": {
-        "@bitcoin-computer/lib": "^0.17.2-beta.0",
+        "@bitcoin-computer/lib": "^0.18.0-beta.0",
         "@testing-library/jest-dom": "^6.4.2",
         "@testing-library/react": "^14.2.1",
         "@testing-library/user-event": "^14.5.2",
@@ -30913,10 +31021,10 @@
     },
     "packages/TBC404": {
       "name": "@bitcoin-computer/TBC404",
-      "version": "0.17.2-beta.0",
+      "version": "0.18.0-beta.0",
       "license": "MIT",
       "dependencies": {
-        "@bitcoin-computer/lib": "^0.17.2-beta.0"
+        "@bitcoin-computer/lib": "^0.18.0-beta.0"
       },
       "devDependencies": {
         "@types/mocha": "^9.1.1",
@@ -30941,10 +31049,10 @@
     },
     "packages/TBC404-app": {
       "name": "@bitcoin-computer/TBC404-app",
-      "version": "0.17.2-beta.0",
+      "version": "0.18.0-beta.0",
       "dependencies": {
-        "@bitcoin-computer/components": "^0.17.2-beta.0",
-        "@bitcoin-computer/lib": "^0.17.2-beta.0",
+        "@bitcoin-computer/components": "^0.18.0-beta.0",
+        "@bitcoin-computer/lib": "^0.18.0-beta.0",
         "@testing-library/jest-dom": "^6.4.2",
         "@testing-library/react": "^14.2.1",
         "@testing-library/user-event": "^14.5.2",
@@ -31369,10 +31477,10 @@
     },
     "packages/TBC721": {
       "name": "@bitcoin-computer/TBC721",
-      "version": "0.17.2-beta.0",
+      "version": "0.18.0-beta.0",
       "license": "MIT",
       "dependencies": {
-        "@bitcoin-computer/lib": "^0.17.2-beta.0",
+        "@bitcoin-computer/lib": "^0.18.0-beta.0",
         "chai-match-pattern": "^1.3.0",
         "eslint-plugin-prettier": "^5.1.3",
         "ts-node": "^10.9.2",
@@ -31396,9 +31504,9 @@
     },
     "packages/TBC721-app": {
       "name": "@bitcoin-computer/TBC721-app",
-      "version": "0.17.2-beta.0",
+      "version": "0.18.0-beta.0",
       "dependencies": {
-        "@bitcoin-computer/lib": "^0.17.2-beta.0",
+        "@bitcoin-computer/lib": "^0.18.0-beta.0",
         "react": "^18.2.0",
         "react-dom": "^18.2.0",
         "react-icons": "^5.0.1",
@@ -31451,9 +31559,9 @@
     },
     "packages/wallet": {
       "name": "@bitcoin-computer/wallet",
-      "version": "0.17.2-beta.0",
+      "version": "0.18.0-beta.0",
       "dependencies": {
-        "@bitcoin-computer/lib": "^0.17.2-beta.0",
+        "@bitcoin-computer/lib": "^0.18.0-beta.0",
         "@testing-library/jest-dom": "^6.4.2",
         "@testing-library/react": "^14.2.1",
         "@testing-library/user-event": "^14.5.2",
@@ -31487,7 +31595,7 @@
     },
     "packages/website": {
       "name": "@bitcoin-computer/website",
-      "version": "0.17.2-beta.0",
+      "version": "0.18.0-beta.0",
       "dependencies": {
         "@emotion/react": "^11.11.4",
         "@emotion/styled": "^11.11.0",
diff --git a/packages/TBC20/test/token.test.ts b/packages/TBC20/test/token.test.ts
index 95789199b..6939a2482 100644
--- a/packages/TBC20/test/token.test.ts
+++ b/packages/TBC20/test/token.test.ts
@@ -5,7 +5,7 @@ import { Computer } from '@bitcoin-computer/lib'
 import dotenv from 'dotenv'
 import { TBC20, Token } from '../src/token'
 
-// If you want to connect to your local Bitcoin Computer Node, create a .env file 
+// If you want to connect to your local Bitcoin Computer Node, create a .env file
 // in the monorepo root level and add the following line:
 // BCN_URL=http://localhost:1031
 
@@ -49,7 +49,7 @@ describe('Token', () => {
     describe('Transferring the NFT', () => {
       let newToken: Token
 
-      it('Sender transfers the NFT to receiver', async () => {      
+      it('Sender transfers the NFT to receiver', async () => {
         newToken = await token.transfer(receiver.getPublicKey(), 1)
       })
 
diff --git a/packages/TBC404/test/main.test.ts b/packages/TBC404/test/main.test.ts
index 7db0c17c5..125f081d4 100644
--- a/packages/TBC404/test/main.test.ts
+++ b/packages/TBC404/test/main.test.ts
@@ -4,14 +4,14 @@ import { expect } from 'chai'
 import * as chai from 'chai'
 import chaiMatchPattern from 'chai-match-pattern'
 import { Computer } from '@bitcoin-computer/lib'
-import { Counter } from '../src/main'
 import dotenv from 'dotenv'
+import { Counter } from '../src/main'
 
-// If you want to connect to your local Bitcoin Computer Node, create a .env file 
+// If you want to connect to your local Bitcoin Computer Node, create a .env file
 // in the monorepo root level and add the following line:
 // BCN_URL=http://localhost:1031
 
-dotenv.config({ path: '../../.env'})
+dotenv.config({ path: '../../.env' })
 
 const url = process.env.BCN_URL
 
diff --git a/packages/components/built/Auth.js b/packages/components/built/Auth.js
index cc1423c86..5049ca4ca 100644
--- a/packages/components/built/Auth.js
+++ b/packages/components/built/Auth.js
@@ -48,8 +48,9 @@ function getPath(chain, network) {
 }
 function getEnvVariable(name) {
     var res = process.env[name];
-    if (typeof res === "undefined")
-        throw new Error("Cannot find environment variable \"".concat(name, "\".\nDid you forget to copy the .env.example file into a .env file?"));
+    if (typeof res === "undefined") {
+        throw new Error("Cannot find environment variable \"".concat(name, "\" in the .env file."));
+    }
     else
         return res;
 }
diff --git a/packages/components/package.json b/packages/components/package.json
index 2a4c8391c..4aff0b82b 100644
--- a/packages/components/package.json
+++ b/packages/components/package.json
@@ -6,7 +6,7 @@
   "types": "built/index.d.ts",
   "scripts": {
     "tsc-compile": "rm -rf built/* && tsc",
-    "install-monorepo": "cd ../../ && npm install && cd packages/components",
+    "install-monorepo": "cd ../../../ && npm run delete-node-modules && npm install && cd monorepo/packages/components",
     "compile": "npm run tsc-compile && npm run install-monorepo"
   },
   "author": "",
diff --git a/packages/components/src/Auth.tsx b/packages/components/src/Auth.tsx
index af3b55a2d..b49772c7e 100644
--- a/packages/components/src/Auth.tsx
+++ b/packages/components/src/Auth.tsx
@@ -39,10 +39,9 @@ function getPath(chain: string, network: string): string {
 
 function getEnvVariable(name: string) {
   const res = process.env[name]
-  if (typeof res === "undefined")
-    throw new Error(
-      `Cannot find environment variable "${name}".\nDid you forget to copy the .env.example file into a .env file?`
-    )
+    if (typeof res === "undefined") {
+      throw new Error(`Cannot find environment variable "${name}" in the .env file.`)
+  }
   else return res
 }
 
diff --git a/packages/nodejs-template/test/main.test.ts b/packages/nodejs-template/test/main.test.ts
index 8ebafaab7..6a27c1ed6 100644
--- a/packages/nodejs-template/test/main.test.ts
+++ b/packages/nodejs-template/test/main.test.ts
@@ -3,14 +3,14 @@
 import * as chai from 'chai'
 import chaiMatchPattern from 'chai-match-pattern'
 import { Computer } from '@bitcoin-computer/lib'
-import { Counter } from '../src/main'
 import dotenv from 'dotenv'
+import { Counter } from '../src/main'
 
-// If you want to connect to your local Bitcoin Computer Node, create a .env file 
+// If you want to connect to your local Bitcoin Computer Node, create a .env file
 // in the monorepo root level and add the following line:
 // BCN_URL=http://localhost:1031
 
-dotenv.config({ path: '../../.env'})
+dotenv.config({ path: '../../.env' })
 
 const url = process.env.BCN_URL
 
diff --git a/packages/swap/src/ord-sale.ts b/packages/swap/src/ord-sale.ts
index 646e8a390..bf275eec8 100644
--- a/packages/swap/src/ord-sale.ts
+++ b/packages/swap/src/ord-sale.ts
@@ -30,12 +30,7 @@ export class OrdSaleHelper {
     return this.mod
   }
 
-  async createSaleTx(
-    b1Mock: PaymentMock,
-    b2Mock: PaymentMock,
-    nft: NFT,
-    paymentMock: PaymentMock,
-  ) {
+  async createSaleTx(b1Mock: PaymentMock, b2Mock: PaymentMock, nft: NFT, paymentMock: PaymentMock) {
     const { SIGHASH_SINGLE, SIGHASH_ANYONECANPAY } = Transaction
 
     return this.computer.encode({
diff --git a/packages/swap/test/static-swap.test.ts b/packages/swap/test/static-swap.test.ts
index c1f1bc25f..ed7a47a45 100644
--- a/packages/swap/test/static-swap.test.ts
+++ b/packages/swap/test/static-swap.test.ts
@@ -5,12 +5,12 @@ import { Computer } from '@bitcoin-computer/lib'
 import { NFT, TBC721 } from '@bitcoin-computer/TBC721/src/nft'
 
 import dotenv from 'dotenv'
+import { StaticSwapHelper } from '../src/static-swap'
+import { meta } from '../src/utils'
 
-dotenv.config({ path: '../../.env'})
+dotenv.config({ path: '../../.env' })
 
 const url = process.env.BCN_URL
-import { StaticSwapHelper } from '../src/static-swap'
-import { meta } from '../src/utils'
 
 describe('Static Swap', () => {
   let nftA: NFT

From 500858c9dd07b9e62bb0611c8c4562bd074d01f6 Mon Sep 17 00:00:00 2001
From: Clemens Ley <ley.clemens@gmail.com>
Date: Wed, 15 May 2024 16:50:42 -0300
Subject: [PATCH 04/10] Components: add computer context

---
 packages/components/src/ComputerContext.tsx | 4 ++++
 1 file changed, 4 insertions(+)
 create mode 100644 packages/components/src/ComputerContext.tsx

diff --git a/packages/components/src/ComputerContext.tsx b/packages/components/src/ComputerContext.tsx
new file mode 100644
index 000000000..94b2c6d7d
--- /dev/null
+++ b/packages/components/src/ComputerContext.tsx
@@ -0,0 +1,4 @@
+import { Computer } from '@bitcoin-computer/lib'
+import { createContext } from 'react'
+
+export const ComputerContext = createContext(new Computer())
\ No newline at end of file

From bb4dac1d99010f74cf8b0319fa3d69816896d29e Mon Sep 17 00:00:00 2001
From: Clemens Ley <ley.clemens@gmail.com>
Date: Wed, 15 May 2024 16:51:38 -0300
Subject: [PATCH 05/10] Components: use computer context

---
 packages/components/built/ComputerContext.d.ts     | 3 +++
 packages/components/built/ComputerContext.js       | 3 +++
 packages/components/built/Gallery.js               | 6 +++---
 packages/components/built/SmartObject.js           | 8 ++++----
 packages/components/built/SmartObjectFunction.d.ts | 2 +-
 packages/components/built/SmartObjectFunction.js   | 6 ++++--
 packages/components/built/Transaction.js           | 6 +++---
 packages/components/built/Wallet.js                | 5 +++--
 packages/components/built/index.d.ts               | 1 +
 packages/components/built/index.js                 | 1 +
 packages/components/src/Gallery.tsx                | 6 +++---
 packages/components/src/SmartObject.tsx            | 7 +++----
 packages/components/src/SmartObjectFunction.tsx    | 8 +++++---
 packages/components/src/Transaction.tsx            | 6 +++---
 packages/components/src/Wallet.tsx                 | 6 ++++--
 packages/components/src/index.tsx                  | 1 +
 16 files changed, 45 insertions(+), 30 deletions(-)
 create mode 100644 packages/components/built/ComputerContext.d.ts
 create mode 100644 packages/components/built/ComputerContext.js

diff --git a/packages/components/built/ComputerContext.d.ts b/packages/components/built/ComputerContext.d.ts
new file mode 100644
index 000000000..0d2bf2e52
--- /dev/null
+++ b/packages/components/built/ComputerContext.d.ts
@@ -0,0 +1,3 @@
+/// <reference types="react" />
+import { Computer } from '@bitcoin-computer/lib';
+export declare const ComputerContext: import("react").Context<Computer>;
diff --git a/packages/components/built/ComputerContext.js b/packages/components/built/ComputerContext.js
new file mode 100644
index 000000000..4dc658ef0
--- /dev/null
+++ b/packages/components/built/ComputerContext.js
@@ -0,0 +1,3 @@
+import { Computer } from '@bitcoin-computer/lib';
+import { createContext } from 'react';
+export var ComputerContext = createContext(new Computer());
diff --git a/packages/components/built/Gallery.js b/packages/components/built/Gallery.js
index 130acb6f3..bb0ffe321 100644
--- a/packages/components/built/Gallery.js
+++ b/packages/components/built/Gallery.js
@@ -46,12 +46,12 @@ var __generator = (this && this.__generator) || function (thisArg, body) {
     }
 };
 import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
-import { useEffect, useState } from "react";
+import { useContext, useEffect, useState } from "react";
 import { Link, useLocation } from "react-router-dom";
 import { jsonMap, strip, toObject } from "./common/utils";
-import { Auth } from "./Auth";
 import { initFlowbite } from "flowbite";
 import { useUtilsComponents } from "./UtilsContext";
+import { ComputerContext } from "./ComputerContext";
 function HomePageCard(_a) {
     var content = _a.content;
     return (_jsx("div", __assign({ className: "block w-80 p-6 bg-white border border-gray-200 rounded-lg shadow hover:bg-gray-100 dark:bg-gray-800 dark:border-gray-700 dark:hover:bg-gray-700" }, { children: _jsx("pre", __assign({ className: "font-normal overflow-auto text-gray-700 dark:text-gray-400 text-xs" }, { children: content() })) })));
@@ -101,7 +101,7 @@ function Pagination(_a) {
 export default function WithPagination(q) {
     var _this = this;
     var contractsPerPage = 12;
-    var computer = useState(Auth.getComputer())[0];
+    var computer = useContext(ComputerContext);
     var showLoader = useUtilsComponents().showLoader;
     var _a = useState(0), pageNum = _a[0], setPageNum = _a[1];
     var _b = useState(true), isNextAvailable = _b[0], setIsNextAvailable = _b[1];
diff --git a/packages/components/built/SmartObject.js b/packages/components/built/SmartObject.js
index 0166d84fd..0eed6c450 100644
--- a/packages/components/built/SmartObject.js
+++ b/packages/components/built/SmartObject.js
@@ -46,15 +46,15 @@ var __generator = (this && this.__generator) || function (thisArg, body) {
     }
 };
 import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
-import { useEffect, useState } from "react";
+import { useContext, useEffect, useState } from "react";
 import { Link, useLocation, useNavigate, useParams } from "react-router-dom";
 import { capitalizeFirstLetter, toObject } from "./common/utils";
 import reactStringReplace from "react-string-replace";
-import { Auth } from "./Auth";
 import { Card } from "./Card";
 import { Modal } from "./Modal";
 import { FunctionResultModalContent } from "./common/SmartCallExecutionResult";
 import { SmartObjectFunction } from "./SmartObjectFunction";
+import { ComputerContext } from "./ComputerContext";
 var keywords = ["_id", "_rev", "_owners", "_root", "_amount"];
 var modalId = "smart-object-info-modal";
 export var getFnParamNames = function (fn) {
@@ -93,7 +93,7 @@ function Component() {
     var params = useParams();
     var navigate = useNavigate();
     var rev = useState(params.rev || "")[0];
-    var computer = useState(Auth.getComputer())[0];
+    var computer = useContext(ComputerContext);
     var _a = useState(null), smartObject = _a[0], setSmartObject = _a[1];
     var _b = useState(false), functionsExist = _b[0], setFunctionsExist = _b[1];
     var _c = useState({}), functionResult = _c[0], setFunctionResult = _c[1];
@@ -140,7 +140,7 @@ function Component() {
         setFunctionsExist(funcExist);
     }, [smartObject]);
     var _e = rev.split(":"), txId = _e[0], outNum = _e[1];
-    return (_jsxs(_Fragment, { children: [_jsxs("div", { children: [_jsx("h1", __assign({ className: "mb-2 text-5xl font-extrabold dark:text-white" }, { children: "Object" })), _jsxs("p", __assign({ className: "mb-6 text-lg font-normal text-gray-500 lg:text-xl dark:text-gray-400" }, { children: [_jsx(Link, __assign({ to: "/transactions/".concat(txId), className: "font-medium text-blue-600 dark:text-blue-500 hover:underline" }, { children: txId })), ":", outNum] })), _jsx(SmartObjectValues, { smartObject: smartObject }), _jsx(SmartObjectFunction, { computer: computer, smartObject: smartObject, functionsExist: functionsExist, options: options, setFunctionResult: setFunctionResult, setShow: setShow, setModalTitle: setModalTitle })] }), _jsx(Modal.Component, { title: modalTitle, content: FunctionResultModalContent, contentData: { functionResult: functionResult }, id: modalId })] }));
+    return (_jsxs(_Fragment, { children: [_jsxs("div", { children: [_jsx("h1", __assign({ className: "mb-2 text-5xl font-extrabold dark:text-white" }, { children: "Object" })), _jsxs("p", __assign({ className: "mb-6 text-lg font-normal text-gray-500 lg:text-xl dark:text-gray-400" }, { children: [_jsx(Link, __assign({ to: "/transactions/".concat(txId), className: "font-medium text-blue-600 dark:text-blue-500 hover:underline" }, { children: txId })), ":", outNum] })), _jsx(SmartObjectValues, { smartObject: smartObject }), _jsx(SmartObjectFunction, { smartObject: smartObject, functionsExist: functionsExist, options: options, setFunctionResult: setFunctionResult, setShow: setShow, setModalTitle: setModalTitle })] }), _jsx(Modal.Component, { title: modalTitle, content: FunctionResultModalContent, contentData: { functionResult: functionResult }, id: modalId })] }));
 }
 export var SmartObject = {
     Component: Component,
diff --git a/packages/components/built/SmartObjectFunction.d.ts b/packages/components/built/SmartObjectFunction.d.ts
index 0361ca1f2..84be033db 100644
--- a/packages/components/built/SmartObjectFunction.d.ts
+++ b/packages/components/built/SmartObjectFunction.d.ts
@@ -1,4 +1,4 @@
 export declare const getErrorMessage: (error: any) => string;
 export declare const getFnParamNames: (fn: string) => string[];
 export declare const getValueForType: (type: string, stringValue: string) => string | number | true | null | undefined;
-export declare const SmartObjectFunction: ({ computer, smartObject, functionsExist, options, setFunctionResult, setShow, setModalTitle, }: any) => import("react/jsx-runtime").JSX.Element;
+export declare const SmartObjectFunction: ({ smartObject, functionsExist, options, setFunctionResult, setShow, setModalTitle, }: any) => import("react/jsx-runtime").JSX.Element;
diff --git a/packages/components/built/SmartObjectFunction.js b/packages/components/built/SmartObjectFunction.js
index b85a0bf14..24b0a0da2 100644
--- a/packages/components/built/SmartObjectFunction.js
+++ b/packages/components/built/SmartObjectFunction.js
@@ -46,10 +46,11 @@ var __generator = (this && this.__generator) || function (thisArg, body) {
     }
 };
 import { Fragment as _Fragment, jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { useState } from "react";
+import { useContext, useState } from "react";
 import { TypeSelectionDropdown } from "./common/TypeSelectionDropdown";
 import { isValidRev, sleep } from "./common/utils";
 import { UtilsContext } from "./UtilsContext";
+import { ComputerContext } from "./ComputerContext";
 export var getErrorMessage = function (error) {
     var _a, _b, _c, _d, _e, _f;
     if (((_b = (_a = error === null || error === void 0 ? void 0 : error.response) === null || _a === void 0 ? void 0 : _a.data) === null || _b === void 0 ? void 0 : _b.error) ===
@@ -86,9 +87,10 @@ export var getValueForType = function (type, stringValue) {
     }
 };
 export var SmartObjectFunction = function (_a) {
-    var computer = _a.computer, smartObject = _a.smartObject, functionsExist = _a.functionsExist, options = _a.options, setFunctionResult = _a.setFunctionResult, setShow = _a.setShow, setModalTitle = _a.setModalTitle;
+    var smartObject = _a.smartObject, functionsExist = _a.functionsExist, options = _a.options, setFunctionResult = _a.setFunctionResult, setShow = _a.setShow, setModalTitle = _a.setModalTitle;
     var _b = useState({}), formState = _b[0], setFormState = _b[1];
     var showLoader = UtilsContext.useUtilsComponents().showLoader;
+    var computer = useContext(ComputerContext);
     var handleSmartObjectMethod = function (event, smartObject, fnName, params) { return __awaiter(void 0, void 0, void 0, function () {
         var revMap_1, tx, res, error_1;
         return __generator(this, function (_a) {
diff --git a/packages/components/built/Transaction.js b/packages/components/built/Transaction.js
index 330bc5e70..e61f6ef52 100644
--- a/packages/components/built/Transaction.js
+++ b/packages/components/built/Transaction.js
@@ -46,11 +46,11 @@ var __generator = (this && this.__generator) || function (thisArg, body) {
     }
 };
 import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
-import { useEffect, useState } from "react";
+import { useContext, useEffect, useState } from "react";
 import { Link, useLocation, useParams } from "react-router-dom";
 import reactStringReplace from "react-string-replace";
 import { Card } from "./Card";
-import { Auth } from "./Auth";
+import { ComputerContext } from "./ComputerContext";
 function ExpressionCard(_a) {
     var content = _a.content, env = _a.env;
     var entries = Object.entries(env);
@@ -71,7 +71,7 @@ function Component() {
     var _this = this;
     var location = useLocation();
     var params = useParams();
-    var computer = useState(Auth.getComputer())[0];
+    var computer = useContext(ComputerContext);
     var _a = useState(params.txn), txn = _a[0], setTxn = _a[1];
     var _b = useState(null), txnData = _b[0], setTxnData = _b[1];
     var _c = useState(null), rpcTxnData = _c[0], setRPCTxnData = _c[1];
diff --git a/packages/components/built/Wallet.js b/packages/components/built/Wallet.js
index 3585ad9ff..d551bb4e7 100644
--- a/packages/components/built/Wallet.js
+++ b/packages/components/built/Wallet.js
@@ -46,11 +46,12 @@ var __generator = (this && this.__generator) || function (thisArg, body) {
     }
 };
 import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
-import { useCallback, useEffect, useState } from "react";
+import { useCallback, useContext, useEffect, useState } from "react";
 import { HiRefresh } from "react-icons/hi";
 import { Auth } from "./Auth";
 import { Drawer } from "./Drawer";
 import { UtilsContext } from "./UtilsContext";
+import { ComputerContext } from "./ComputerContext";
 var Balance = function (_a) {
     var computer = _a.computer;
     var _b = useState(0), balance = _b[0], setBalance = _b[1];
@@ -121,7 +122,7 @@ var LogOut = function () {
     return (_jsxs(_Fragment, { children: [_jsxs("div", __assign({ className: "mb-6" }, { children: [_jsx("h6", __assign({ className: "text-lg font-bold dark:text-white" }, { children: "Log out" })), _jsx("p", __assign({ className: "mb-1 text-sm text-gray-500 dark:text-gray-400" }, { children: "Logging out will delete your mnemonic. Make sure to write it down." }))] })), _jsx("div", __assign({ className: "grid grid-cols-2 gap-4" }, { children: _jsx("button", __assign({ onClick: Auth.logout, className: "rounded-lg border border-gray-200 bg-white px-4 py-2 text-center text-sm font-medium text-gray-900 hover:bg-gray-100 hover:text-blue-700 focus:z-10 focus:outline-none focus:ring-4 focus:ring-gray-200 dark:border-gray-600 dark:bg-gray-800 dark:text-gray-400 dark:hover:bg-gray-700 dark:hover:text-white dark:focus:ring-gray-700" }, { children: "Log out" })) }))] }));
 };
 export function Wallet() {
-    var computer = useState(Auth.getComputer())[0];
+    var computer = useContext(ComputerContext);
     var Content = function () { return (_jsxs(_Fragment, { children: [_jsx("h4", __assign({ className: "mb-8 text-2xl font-bold dark:text-white" }, { children: "Wallet" })), _jsx(Balance, { computer: computer }), _jsx(Address, { computer: computer }), _jsx(PublicKey, { computer: computer }), _jsx(Path, { computer: computer }), _jsx(Mnemonic, { computer: computer }), _jsx("hr", { className: "h-px my-6 bg-gray-200 border-0 dark:bg-gray-700" }), _jsx(Chain, { computer: computer }), _jsx(Network, { computer: computer }), _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" });
 }
diff --git a/packages/components/built/index.d.ts b/packages/components/built/index.d.ts
index 60c417c81..e9ac5b0d8 100644
--- a/packages/components/built/index.d.ts
+++ b/packages/components/built/index.d.ts
@@ -6,6 +6,7 @@ export { SmartObject } from "./SmartObject";
 export { Transaction } from "./Transaction";
 export { Error404 } from "./Error404";
 export { UtilsContext } from "./UtilsContext";
+export { ComputerContext } from "./ComputerContext";
 export { FunctionResultModalContent } from "./common/SmartCallExecutionResult";
 export { Drawer } from "./Drawer";
 export { Wallet } from "./Wallet";
diff --git a/packages/components/built/index.js b/packages/components/built/index.js
index 60c417c81..e9ac5b0d8 100644
--- a/packages/components/built/index.js
+++ b/packages/components/built/index.js
@@ -6,6 +6,7 @@ export { SmartObject } from "./SmartObject";
 export { Transaction } from "./Transaction";
 export { Error404 } from "./Error404";
 export { UtilsContext } from "./UtilsContext";
+export { ComputerContext } from "./ComputerContext";
 export { FunctionResultModalContent } from "./common/SmartCallExecutionResult";
 export { Drawer } from "./Drawer";
 export { Wallet } from "./Wallet";
diff --git a/packages/components/src/Gallery.tsx b/packages/components/src/Gallery.tsx
index 0a767e42e..8dbf5d7cc 100644
--- a/packages/components/src/Gallery.tsx
+++ b/packages/components/src/Gallery.tsx
@@ -1,10 +1,10 @@
 import { Computer } from "@bitcoin-computer/lib"
-import { useEffect, useState } from "react"
+import { useContext, useEffect, useState } from "react"
 import { Link, useLocation } from "react-router-dom"
 import { jsonMap, strip, toObject } from "./common/utils"
-import { Auth } from "./Auth"
 import { initFlowbite } from "flowbite"
 import { useUtilsComponents } from "./UtilsContext"
+import { ComputerContext } from "./ComputerContext"
 
 export type Class = new (...args: any) => any
 
@@ -155,7 +155,7 @@ function Pagination({ isPrevAvailable, handlePrev, isNextAvailable, handleNext }
 
 export default function WithPagination<T extends Class>(q: UserQuery<T>) {
   const contractsPerPage = 12
-  const [computer] = useState(Auth.getComputer())
+  const computer = useContext(ComputerContext)
   const { showLoader } = useUtilsComponents()
   const [pageNum, setPageNum] = useState(0)
   const [isNextAvailable, setIsNextAvailable] = useState(true)
diff --git a/packages/components/src/SmartObject.tsx b/packages/components/src/SmartObject.tsx
index 6352e5d11..df8de48c4 100644
--- a/packages/components/src/SmartObject.tsx
+++ b/packages/components/src/SmartObject.tsx
@@ -1,12 +1,12 @@
-import { useEffect, useState } from "react"
+import { useContext, useEffect, useState } from "react"
 import { Link, useLocation, useNavigate, useParams } from "react-router-dom"
 import { capitalizeFirstLetter, toObject } from "./common/utils"
 import reactStringReplace from "react-string-replace"
-import { Auth } from "./Auth"
 import { Card } from "./Card"
 import { Modal } from "./Modal"
 import { FunctionResultModalContent } from "./common/SmartCallExecutionResult"
 import { SmartObjectFunction } from "./SmartObjectFunction"
+import { ComputerContext } from "./ComputerContext"
 
 const keywords = ["_id", "_rev", "_owners", "_root", "_amount"]
 const modalId = "smart-object-info-modal"
@@ -161,7 +161,7 @@ function Component() {
   const params = useParams()
   const navigate = useNavigate()
   const [rev] = useState(params.rev || "")
-  const [computer] = useState(Auth.getComputer())
+  const computer = useContext(ComputerContext)
   const [smartObject, setSmartObject] = useState<any | null>(null)
   const [functionsExist, setFunctionsExist] = useState(false)
   const [functionResult, setFunctionResult] = useState<any>({})
@@ -224,7 +224,6 @@ function Component() {
         <SmartObjectValues smartObject={smartObject} />
 
         <SmartObjectFunction
-          computer={computer}
           smartObject={smartObject}
           functionsExist={functionsExist}
           options={options}
diff --git a/packages/components/src/SmartObjectFunction.tsx b/packages/components/src/SmartObjectFunction.tsx
index 9c4f438f7..a3b94e9fc 100644
--- a/packages/components/src/SmartObjectFunction.tsx
+++ b/packages/components/src/SmartObjectFunction.tsx
@@ -1,7 +1,8 @@
-import { useState } from "react"
+import { useContext, useState } from "react"
 import { TypeSelectionDropdown } from "./common/TypeSelectionDropdown"
 import { isValidRev, sleep } from "./common/utils"
 import { UtilsContext } from "./UtilsContext"
+import { ComputerContext } from "./ComputerContext"
 
 export const getErrorMessage = (error: any): string => {
   if (
@@ -41,7 +42,6 @@ export const getValueForType = (type: string, stringValue: string) => {
 }
 
 export const SmartObjectFunction = ({
-  computer,
   smartObject,
   functionsExist,
   options,
@@ -51,6 +51,8 @@ export const SmartObjectFunction = ({
 }: any) => {
   const [formState, setFormState] = useState<any>({})
   const { showLoader } = UtilsContext.useUtilsComponents()
+  const computer = useContext(ComputerContext)
+
 
   const handleSmartObjectMethod = async (
     event: any,
@@ -86,7 +88,7 @@ export const SmartObjectFunction = ({
         sign: true,
       })
 
-      await computer.broadcast(tx)
+      await computer.broadcast(tx!)
       await sleep(1000)
       const res = await computer.query({ ids: [smartObject._id] })
       setFunctionResult({ _rev: res[0] })
diff --git a/packages/components/src/Transaction.tsx b/packages/components/src/Transaction.tsx
index 138876d8f..3417bf578 100644
--- a/packages/components/src/Transaction.tsx
+++ b/packages/components/src/Transaction.tsx
@@ -1,8 +1,8 @@
-import { useEffect, useState } from "react"
+import { useContext, useEffect, useState } from "react"
 import { Link, useLocation, useParams } from "react-router-dom"
 import reactStringReplace from "react-string-replace"
 import { Card } from "./Card"
-import { Auth } from "./Auth"
+import { ComputerContext } from "./ComputerContext"
 
 function ExpressionCard({ content, env }: { content: string; env: { [s: string]: string } }) {
   const entries = Object.entries(env)
@@ -27,7 +27,7 @@ function ExpressionCard({ content, env }: { content: string; env: { [s: string]:
 function Component() {
   const location = useLocation()
   const params = useParams()
-  const [computer] = useState(Auth.getComputer())
+  const computer = useContext(ComputerContext)
   const [txn, setTxn] = useState(params.txn)
   const [txnData, setTxnData] = useState<any | null>(null)
   const [rpcTxnData, setRPCTxnData] = useState<any | null>(null)
diff --git a/packages/components/src/Wallet.tsx b/packages/components/src/Wallet.tsx
index 736fed706..8111ad35a 100644
--- a/packages/components/src/Wallet.tsx
+++ b/packages/components/src/Wallet.tsx
@@ -1,8 +1,9 @@
-import { useCallback, useEffect, useState } from "react"
+import { useCallback, useContext, useEffect, useState } from "react"
 import { HiRefresh } from "react-icons/hi"
 import { Auth } from "./Auth"
 import { Drawer } from "./Drawer"
 import { UtilsContext } from "./UtilsContext"
+import { ComputerContext } from "./ComputerContext"
 
 const Balance = ({ computer }: any) => {
   const [balance, setBalance] = useState<number>(0)
@@ -154,7 +155,8 @@ const LogOut = () => {
 }
 
 export function Wallet() {
-  const [computer] = useState(Auth.getComputer())
+  const computer = useContext(ComputerContext)
+
 
   const Content = () => (
     <>
diff --git a/packages/components/src/index.tsx b/packages/components/src/index.tsx
index 75ac24116..f9ab23b2f 100644
--- a/packages/components/src/index.tsx
+++ b/packages/components/src/index.tsx
@@ -6,6 +6,7 @@ export { SmartObject } from "./SmartObject"
 export { Transaction } from "./Transaction"
 export { Error404 } from "./Error404"
 export { UtilsContext } from "./UtilsContext"
+export { ComputerContext } from "./ComputerContext"
 export { FunctionResultModalContent } from "./common/SmartCallExecutionResult"
 export { Drawer } from "./Drawer"
 export { Wallet } from "./Wallet"

From 49ca17f92517391898c735ed900cb5a83a3bc9c8 Mon Sep 17 00:00:00 2001
From: Clemens Ley <ley.clemens@gmail.com>
Date: Wed, 15 May 2024 16:52:08 -0300
Subject: [PATCH 06/10] CRA-template: use computer context

---
 packages/cra-template/src/App.tsx             | 36 ++++++++++---------
 packages/cra-template/src/components/Mint.tsx |  6 ++--
 2 files changed, 23 insertions(+), 19 deletions(-)

diff --git a/packages/cra-template/src/App.tsx b/packages/cra-template/src/App.tsx
index a844e275c..a52841d29 100644
--- a/packages/cra-template/src/App.tsx
+++ b/packages/cra-template/src/App.tsx
@@ -1,13 +1,15 @@
 import "./App.css"
-import { useEffect } from "react"
+import { useContext, useEffect, useState } from "react"
 import { BrowserRouter, Route, Routes, Navigate } from "react-router-dom"
 import { Navbar } from "./components/Navbar"
 import { initFlowbite } from "flowbite"
-import { Auth, Error404, UtilsContext, Wallet, SmartObject, Transaction } from "@bitcoin-computer/components"
+import { Auth, Error404, UtilsContext, Wallet, SmartObject, Transaction, ComputerContext } from "@bitcoin-computer/components"
 import Mint from "./components/Mint"
 import { AllAssets, MyAssets } from "./components/Assets"
 
 export default function App() {
+  const [computer] = useState(Auth.getComputer())
+
   useEffect(() => {
     initFlowbite()
   }, [])
@@ -16,20 +18,22 @@ export default function App() {
     <BrowserRouter>
       <span className="bg-gray-900/50 dark:bg-gray-900/80 z-30 inset-0 sr-only"></span>
       <UtilsContext.UtilsProvider>
-        <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={<AllAssets />} />
-            <Route path="/mine" element={<MyAssets />} />
-            <Route path="/mint" element={<Mint />} />
-            <Route path="/objects/:rev" element={<SmartObject.Component />} />
-            <Route path="/transactions/:txn" element={<Transaction.Component />} />
-            <Route path="*" element={<Navigate to="/" replace={true} />} />
-            <Route path="*" element={<Error404 />} />
-          </Routes>
-        </div>
+        <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={<AllAssets />} />
+              <Route path="/mine" element={<MyAssets />} />
+              <Route path="/mint" element={<Mint />} />
+              <Route path="/objects/:rev" element={<SmartObject.Component />} />
+              <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/cra-template/src/components/Mint.tsx b/packages/cra-template/src/components/Mint.tsx
index c8db397f7..68173dcfc 100644
--- a/packages/cra-template/src/components/Mint.tsx
+++ b/packages/cra-template/src/components/Mint.tsx
@@ -1,5 +1,5 @@
-import { useState } from "react"
-import { Auth, Modal } from "@bitcoin-computer/components"
+import { useContext, useState } from "react"
+import { ComputerContext, Modal } from "@bitcoin-computer/components"
 import { Counter } from "../contracts/counter"
 import { Link } from "react-router-dom"
 
@@ -49,7 +49,7 @@ function ErrorContent(msg: string) {
 }
 
 export default function Mint() {
-  const [computer] = useState(Auth.getComputer())
+  const computer = useContext(ComputerContext)
   const [successRev, setSuccessRev] = useState('')
   const [errorMsg, setErrorMsg] = useState('')
 

From a69cc117cfb9e45939d7ac08676e8d396b4ee7ee Mon Sep 17 00:00:00 2001
From: Clemens Ley <ley.clemens@gmail.com>
Date: Wed, 15 May 2024 16:52:48 -0300
Subject: [PATCH 07/10] Explorer: use computer context

---
 packages/explorer/src/App.tsx                 | 38 +++++++++++--------
 packages/explorer/src/components/Block.tsx    |  6 +--
 packages/explorer/src/components/Blocks.tsx   |  6 +--
 packages/explorer/src/components/Module.tsx   |  6 +--
 .../explorer/src/components/SearchBar.tsx     |  6 +--
 5 files changed, 34 insertions(+), 28 deletions(-)

diff --git a/packages/explorer/src/App.tsx b/packages/explorer/src/App.tsx
index 942e437c0..8b18bfef7 100644
--- a/packages/explorer/src/App.tsx
+++ b/packages/explorer/src/App.tsx
@@ -1,5 +1,5 @@
 import './App.css'
-import { useEffect } from 'react'
+import { useContext, useEffect, useState } from 'react'
 import { BrowserRouter, Route, Routes, Navigate } from 'react-router-dom'
 import NavBar from './components/Navbar'
 import Block from './components/Block'
@@ -15,8 +15,12 @@ import {
   Error404,
   UtilsContext,
   Wallet,
+  ComputerContext
 } from '@bitcoin-computer/components'
+
 export default function App() {
+  const [computer] = useState(Auth.getComputer())
+
   useEffect(() => {
     initFlowbite()
   }, [])
@@ -25,21 +29,23 @@ export default function App() {
     <BrowserRouter>
       <span className="bg-gray-900/50 dark:bg-gray-900/80 z-30 inset-0 sr-only"></span>
       <UtilsContext.UtilsProvider>
-        <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 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>
+        </ComputerContext.Provider>
       </UtilsContext.UtilsProvider>
     </BrowserRouter>
   )
diff --git a/packages/explorer/src/components/Block.tsx b/packages/explorer/src/components/Block.tsx
index 9144e8a53..4c2e495ac 100644
--- a/packages/explorer/src/components/Block.tsx
+++ b/packages/explorer/src/components/Block.tsx
@@ -1,12 +1,12 @@
-import { useEffect, useState } from 'react'
+import { useContext, useEffect, useState } from 'react'
 import { Link, useLocation, useNavigate, useParams } from 'react-router-dom'
-import { Auth, UtilsContext } from '@bitcoin-computer/components'
+import { ComputerContext, UtilsContext } from '@bitcoin-computer/components'
 
 function Block() {
   const navigate = useNavigate()
   const location = useLocation()
   const params = useParams()
-  const [computer] = useState(Auth.getComputer())
+  const computer = useContext(ComputerContext)
   const [block] = useState(params.block)
   const [isLoading, setIsLoading] = useState(false)
   const [blockData, setBlockData] = useState<any | null>(null)
diff --git a/packages/explorer/src/components/Blocks.tsx b/packages/explorer/src/components/Blocks.tsx
index 150788f35..8bf884464 100644
--- a/packages/explorer/src/components/Blocks.tsx
+++ b/packages/explorer/src/components/Blocks.tsx
@@ -1,10 +1,10 @@
-import { useEffect, useState } from 'react'
+import { useContext, useEffect, useState } from 'react'
 import { useNavigate } from 'react-router-dom'
-import { Auth, UtilsContext } from '@bitcoin-computer/components'
+import { ComputerContext, UtilsContext } from '@bitcoin-computer/components'
 
 export default function Blocks() {
   const navigate = useNavigate()
-  const [computer] = useState(Auth.getComputer())
+  const computer = useContext(ComputerContext)
   const blocksPerPage = 100
 
   const { showSnackBar, showLoader } = UtilsContext.useUtilsComponents()
diff --git a/packages/explorer/src/components/Module.tsx b/packages/explorer/src/components/Module.tsx
index 57cb00344..5225f3da5 100644
--- a/packages/explorer/src/components/Module.tsx
+++ b/packages/explorer/src/components/Module.tsx
@@ -1,11 +1,11 @@
-import { useEffect, useState } from 'react'
+import { useContext, useEffect, useState } from 'react'
 import { useParams } from 'react-router-dom'
 import { capitalizeFirstLetter } from '../utils'
 import { Card } from './Card'
-import { Auth, UtilsContext } from '@bitcoin-computer/components'
+import { ComputerContext, UtilsContext } from '@bitcoin-computer/components'
 
 function Module() {
-  const [computer] = useState(Auth.getComputer())
+  const computer = useContext(ComputerContext)
   const params = useParams()
   const [modSpec] = useState(params.rev)
   const [module, setModule] = useState<any>({})
diff --git a/packages/explorer/src/components/SearchBar.tsx b/packages/explorer/src/components/SearchBar.tsx
index 435c0b6ff..548af4dad 100644
--- a/packages/explorer/src/components/SearchBar.tsx
+++ b/packages/explorer/src/components/SearchBar.tsx
@@ -1,12 +1,12 @@
-import { useRef, useState } from 'react'
+import { useContext, useRef, useState } from 'react'
 import { useNavigate } from 'react-router-dom'
-import { Auth } from '@bitcoin-computer/components'
+import { ComputerContext } from '@bitcoin-computer/components'
 import { isValidHexadecimalPublicKey } from '../utils'
 
 export function SearchBar() {
   const inputRef = useRef<HTMLInputElement>(null)
 
-  const [computer] = useState(Auth.getComputer())
+  const computer = useContext(ComputerContext)
   const navigate = useNavigate()
 
   const handleSearch = (event: React.KeyboardEvent<HTMLInputElement>) => {

From b8d66379af682548f8a1d03a8ae72b5a64121293 Mon Sep 17 00:00:00 2001
From: Clemens Ley <ley.clemens@gmail.com>
Date: Wed, 15 May 2024 16:53:36 -0300
Subject: [PATCH 08/10] NFT: use computer context

---
 packages/nft/src/App.tsx             | 36 +++++++++++++++-------------
 packages/nft/src/components/Mint.tsx |  6 ++---
 packages/nft/src/components/Nft.tsx  |  6 ++---
 3 files changed, 26 insertions(+), 22 deletions(-)

diff --git a/packages/nft/src/App.tsx b/packages/nft/src/App.tsx
index 521829537..3c9e3a8dc 100644
--- a/packages/nft/src/App.tsx
+++ b/packages/nft/src/App.tsx
@@ -1,5 +1,5 @@
 import "./App.css"
-import { useEffect } from "react"
+import { useEffect, useState } from "react"
 import { BrowserRouter, Route, Routes, Navigate } from "react-router-dom"
 import { Navbar } from "./components/Navbar"
 import { initFlowbite } from "flowbite"
@@ -8,14 +8,16 @@ import {
   Error404,
   UtilsContext,
   Wallet,
-  SmartObject,
   Transaction,
+  ComputerContext
 } from "@bitcoin-computer/components"
 import Mint from "./components/Mint"
 import { AllAssets, MyAssets } from "./components/Assets"
 import { NftView } from "./components/Nft"
 
 export default function App() {
+  const [computer] = useState(Auth.getComputer())
+
   useEffect(() => {
     initFlowbite()
   }, [])
@@ -24,20 +26,22 @@ export default function App() {
     <BrowserRouter>
       <span className="bg-gray-900/50 dark:bg-gray-900/80 z-30 inset-0 sr-only"></span>
       <UtilsContext.UtilsProvider>
-        <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={<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 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={<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/nft/src/components/Mint.tsx b/packages/nft/src/components/Mint.tsx
index 008a202e1..9afc504ff 100644
--- a/packages/nft/src/components/Mint.tsx
+++ b/packages/nft/src/components/Mint.tsx
@@ -1,5 +1,5 @@
-import { useState } from "react"
-import { Auth, Modal } from "@bitcoin-computer/components"
+import { useContext, useState } from "react"
+import { ComputerContext, Modal } from "@bitcoin-computer/components"
 import { TBC721 } from "@bitcoin-computer/TBC721"
 import { Link } from "react-router-dom"
 import { nftModSpec } from "../constants/modSpecs"
@@ -127,7 +127,7 @@ function MintForm(props: {
 }
 
 export default function Mint() {
-  const [computer] = useState(Auth.getComputer())
+  const computer = useContext(ComputerContext)
   const [successRev, setSuccessRev] = useState("")
   const [errorMsg, setErrorMsg] = useState("")
 
diff --git a/packages/nft/src/components/Nft.tsx b/packages/nft/src/components/Nft.tsx
index 0827cea7d..0cb930d49 100644
--- a/packages/nft/src/components/Nft.tsx
+++ b/packages/nft/src/components/Nft.tsx
@@ -1,13 +1,13 @@
-import { useEffect, useState } from "react"
+import { useContext, useEffect, useState } from "react"
 import { Link, useLocation, useNavigate, useParams } from "react-router-dom"
 import reactStringReplace from "react-string-replace"
 import {
-  Auth,
   Card,
   toObject,
   capitalizeFirstLetter,
   Modal,
   UtilsContext,
+  ComputerContext,
 } from "@bitcoin-computer/components"
 import { Computer } from "@bitcoin-computer/lib"
 import { PaymentMock } from "@bitcoin-computer/swap"
@@ -122,7 +122,7 @@ function NftView() {
   const params = useParams()
   const navigate = useNavigate()
   const [rev] = useState(params.rev || "")
-  const [computer] = useState(Auth.getComputer())
+  const computer = useContext(ComputerContext)
   const [smartObject, setSmartObject] = useState<any | null>(null)
   const [functionResult, setFunctionResult] = useState<any>({})
 

From 862729c0b8c6b7f8949457eca78f5ad0c13d891b Mon Sep 17 00:00:00 2001
From: Clemens Ley <ley.clemens@gmail.com>
Date: Wed, 15 May 2024 16:54:08 -0300
Subject: [PATCH 09/10] TBC404-app: use computer context

---
 packages/TBC404-app/src/App.tsx             | 36 ++++++++++++---------
 packages/TBC404-app/src/components/Mint.tsx |  6 ++--
 2 files changed, 23 insertions(+), 19 deletions(-)

diff --git a/packages/TBC404-app/src/App.tsx b/packages/TBC404-app/src/App.tsx
index a844e275c..db968a582 100644
--- a/packages/TBC404-app/src/App.tsx
+++ b/packages/TBC404-app/src/App.tsx
@@ -1,13 +1,15 @@
 import "./App.css"
-import { useEffect } from "react"
+import { useEffect, useState } from "react"
 import { BrowserRouter, Route, Routes, Navigate } from "react-router-dom"
 import { Navbar } from "./components/Navbar"
 import { initFlowbite } from "flowbite"
-import { Auth, Error404, UtilsContext, Wallet, SmartObject, Transaction } from "@bitcoin-computer/components"
+import { Auth, Error404, UtilsContext, Wallet, SmartObject, Transaction, ComputerContext } from "@bitcoin-computer/components"
 import Mint from "./components/Mint"
 import { AllAssets, MyAssets } from "./components/Assets"
 
 export default function App() {
+  const [computer] = useState(Auth.getComputer())
+
   useEffect(() => {
     initFlowbite()
   }, [])
@@ -16,20 +18,22 @@ export default function App() {
     <BrowserRouter>
       <span className="bg-gray-900/50 dark:bg-gray-900/80 z-30 inset-0 sr-only"></span>
       <UtilsContext.UtilsProvider>
-        <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={<AllAssets />} />
-            <Route path="/mine" element={<MyAssets />} />
-            <Route path="/mint" element={<Mint />} />
-            <Route path="/objects/:rev" element={<SmartObject.Component />} />
-            <Route path="/transactions/:txn" element={<Transaction.Component />} />
-            <Route path="*" element={<Navigate to="/" replace={true} />} />
-            <Route path="*" element={<Error404 />} />
-          </Routes>
-        </div>
+        <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={<AllAssets />} />
+              <Route path="/mine" element={<MyAssets />} />
+              <Route path="/mint" element={<Mint />} />
+              <Route path="/objects/:rev" element={<SmartObject.Component />} />
+              <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/TBC404-app/src/components/Mint.tsx b/packages/TBC404-app/src/components/Mint.tsx
index 12b60f26b..f8fca7969 100644
--- a/packages/TBC404-app/src/components/Mint.tsx
+++ b/packages/TBC404-app/src/components/Mint.tsx
@@ -1,5 +1,5 @@
-import { useState } from "react"
-import { Auth, Modal } from "@bitcoin-computer/components"
+import { useContext, useState } from "react"
+import { ComputerContext, Modal } from "@bitcoin-computer/components"
 import { Token } from "../contracts/token"
 import { Link } from "react-router-dom"
 
@@ -49,7 +49,7 @@ function ErrorContent(msg: string) {
 }
 
 export default function Mint() {
-  const [computer] = useState(Auth.getComputer())
+  const computer = useContext(ComputerContext)
   const [successRev, setSuccessRev] = useState('')
   const [errorMsg, setErrorMsg] = useState('')
 

From 776185c6c4e4762c0d346140171df858a73ff778 Mon Sep 17 00:00:00 2001
From: Clemens Ley <ley.clemens@gmail.com>
Date: Wed, 15 May 2024 16:54:41 -0300
Subject: [PATCH 10/10] Wallet: use computer context

---
 packages/wallet/src/App.tsx                   | 36 +++++++++++--------
 packages/wallet/src/components/Sidebar.tsx    |  6 ++--
 .../wallet/src/components/Transactions.tsx    |  6 ++--
 3 files changed, 27 insertions(+), 21 deletions(-)

diff --git a/packages/wallet/src/App.tsx b/packages/wallet/src/App.tsx
index d55befc14..0dafa2f3f 100644
--- a/packages/wallet/src/App.tsx
+++ b/packages/wallet/src/App.tsx
@@ -6,14 +6,18 @@ import {
   Transaction,
   Error404,
   UtilsContext,
+  ComputerContext
 } from "@bitcoin-computer/components"
 import { Send } from "./components/Send"
 import { Details } from "./components/Details"
 import Transactions from "./components/Transactions"
 import { Assets } from "./components/Assets"
 import { SideBar } from "./components/Sidebar"
+import { useState } from "react"
 
 export default function App() {
+  const [computer] = useState(Auth.getComputer())
+
   if (!Auth.isLoggedIn())
     return (
       <UtilsContext.UtilsProvider>
@@ -27,22 +31,24 @@ export default function App() {
   return (
     <BrowserRouter>
       <UtilsContext.UtilsProvider>
-        <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 />
+        <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 />
+            </div>
           </div>
-        </div>
+        </ComputerContext.Provider>
       </UtilsContext.UtilsProvider>
     </BrowserRouter>
   )
diff --git a/packages/wallet/src/components/Sidebar.tsx b/packages/wallet/src/components/Sidebar.tsx
index e98d346cf..96e4c864a 100644
--- a/packages/wallet/src/components/Sidebar.tsx
+++ b/packages/wallet/src/components/Sidebar.tsx
@@ -2,8 +2,8 @@ import { Link } from "react-router-dom"
 import { Computer } from "@bitcoin-computer/lib"
 import { HiRefresh } from "react-icons/hi"
 import { initFlowbite } from "flowbite"
-import { useCallback, useEffect, useState } from "react"
-import { Auth } from "@bitcoin-computer/components"
+import { useCallback, useContext, useEffect, useState } from "react"
+import { Auth, ComputerContext } from "@bitcoin-computer/components"
 
 function Balance({ computer }: { computer: Computer }) {
   const [balance, setBalance] = useState(0)
@@ -34,7 +34,7 @@ function Balance({ computer }: { computer: Computer }) {
 }
 
 export function SideBar() {
-  const [computer] = useState(Auth.getComputer())
+  const computer = useContext(ComputerContext)
 
   return (
     <>
diff --git a/packages/wallet/src/components/Transactions.tsx b/packages/wallet/src/components/Transactions.tsx
index 8f2bc4a9a..5e12c2c43 100644
--- a/packages/wallet/src/components/Transactions.tsx
+++ b/packages/wallet/src/components/Transactions.tsx
@@ -1,13 +1,13 @@
 import { initFlowbite } from "flowbite"
-import { useCallback, useEffect, useState } from "react"
+import { useCallback, useContext, useEffect, useState } from "react"
 import { HiRefresh } from "react-icons/hi"
 import TransactionTable from "./TransactionTable"
 import { TableTxs } from "../types/common"
-import { Auth } from "@bitcoin-computer/components"
+import { ComputerContext } from "@bitcoin-computer/components"
 
 
 export default function Transactions() {
-  const [computer] = useState(Auth.getComputer())
+  const computer = useContext(ComputerContext)
   const [txs, setTxs] = useState<TableTxs>({ sentTxs: [], receivedTxs: [] })
 
   const updateTxs = useCallback(async () => {