Add Computer Context

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)
       })
 

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>
   )

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('')
 

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
 

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;
 }

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>;

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());

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];

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,

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;

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) {

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];

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" });
 }

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";

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";

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": "",

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
 }
 

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())

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)

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}