From 6116ccbc1bcdbb92ff7ebe92a241d0e329a1bc57 Mon Sep 17 00:00:00 2001
From: jonty007
Date: Thu, 25 Jan 2024 22:06:20 +0530
Subject: [PATCH 1/9] loader for transactions and coin issue
---
packages/components/built/Auth.js | 6 +++---
packages/components/built/SmartObjectFunction.js | 7 ++++++-
packages/components/src/Auth.tsx | 6 +++---
packages/components/src/SmartObjectFunction.tsx | 7 ++++++-
packages/explorer/src/components/Navbar.tsx | 11 +++++++++--
.../explorer/src/components/playground/CreateNew.tsx | 5 +++++
.../src/components/playground/DeployModule.tsx | 5 +++++
.../src/components/playground/ExecuteExpression.tsx | 5 +++++
8 files changed, 42 insertions(+), 10 deletions(-)
diff --git a/packages/components/built/Auth.js b/packages/components/built/Auth.js
index 689043e56..f7221a67f 100644
--- a/packages/components/built/Auth.js
+++ b/packages/components/built/Auth.js
@@ -54,9 +54,9 @@ function getUrl(chain, network) {
return url;
}
function defaultConfiguration() {
- var chain = (process.env["REACT_APP_CHAIN"] || localStorage.getItem("CHAIN") || "LTC");
- var network = (process.env["REACT_APP_NETWORK"] ||
- localStorage.getItem("NETWORK") ||
+ var chain = (localStorage.getItem("CHAIN") || process.env["REACT_APP_CHAIN"] || "LTC");
+ var network = (localStorage.getItem("NETWORK") ||
+ process.env["REACT_APP_NETWORK"] ||
"regtest");
var url = getUrl(chain, network);
return { chain: chain, network: network, url: url };
diff --git a/packages/components/built/SmartObjectFunction.js b/packages/components/built/SmartObjectFunction.js
index deee49cce..5b97569ab 100644
--- a/packages/components/built/SmartObjectFunction.js
+++ b/packages/components/built/SmartObjectFunction.js
@@ -49,6 +49,7 @@ import { Fragment as _Fragment, jsx as _jsx, jsxs as _jsxs } from "react/jsx-run
import { useState } from "react";
import { TypeSelectionDropdown } from "./common/TypeSelectionDropdown";
import { isValidRev, sleep } from "./common/utils";
+import { UtilsContext } from "./UtilsContext";
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) ===
@@ -87,12 +88,14 @@ 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 _b = useState({}), formState = _b[0], setFormState = _b[1];
+ var showLoader = UtilsContext.useUtilsComponents().showLoader;
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) {
switch (_a.label) {
case 0:
event.preventDefault();
+ showLoader(true);
_a.label = 1;
case 1:
_a.trys.push([1, 6, , 7]);
@@ -132,12 +135,14 @@ export var SmartObjectFunction = function (_a) {
res = _a.sent();
setFunctionResult({ _rev: res[0] });
setModalTitle("Success!");
+ showLoader(false);
setShow(true);
return [3 /*break*/, 7];
case 6:
error_1 = _a.sent();
setFunctionResult(getErrorMessage(error_1));
setModalTitle("Error!");
+ showLoader(false);
setShow(true);
return [3 /*break*/, 7];
case 7: return [2 /*return*/];
@@ -163,7 +168,7 @@ export var SmartObjectFunction = function (_a) {
})
.map(function (key, fnIndex) {
var paramList = getFnParamNames(Object.getPrototypeOf(smartObject)[key]);
- return (_jsxs("div", __assign({ className: "mt-6 mb-6" }, { children: [_jsx("h3", __assign({ className: "mt-2 text-xl font-bold dark:text-white" }, { children: key })), _jsxs("form", __assign({ id: "fn-index-".concat(fnIndex) }, { children: [paramList.map(function (paramName, paramIndex) { return (_jsxs("div", __assign({ className: "mb-4" }, { children: [_jsx("div", __assign({ className: "mb-2" }, { children: _jsx("label", __assign({ htmlFor: "".concat(key, "-").concat(paramName), className: "block mb-2 text-sm font-medium text-gray-900 dark:text-white" }, { children: paramName })) })), _jsxs("div", __assign({ className: "flex items-center space-x-4" }, { children: [_jsx("input", { type: "text", id: "".concat(key, "-").concat(paramName), value: formState["".concat(key, "-").concat(paramName)], onChange: function (e) { return updateFormValue(e, "".concat(key, "-").concat(paramName)); }, 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-700 dark:border-gray-600 dark:placeholder-gray-400 dark:text-white dark:focus:ring-blue-500 dark:focus:border-blue-500", placeholder: "Value", required: true }), _jsx(TypeSelectionDropdown, { id: "".concat(key).concat(paramName), dropdownList: options, onSelectMethod: function (option) {
+ return (_jsxs("div", __assign({ className: "mt-6 mb-6" }, { children: [_jsx("h3", __assign({ className: "mt-2 text-xl font-bold dark:text-white" }, { children: key })), _jsxs("form", __assign({ id: "fn-index-".concat(fnIndex) }, { children: [paramList.map(function (paramName, paramIndex) { return (_jsxs("div", __assign({ className: "mb-4" }, { children: [_jsx("div", __assign({ className: "mb-2" }, { children: _jsx("label", __assign({ htmlFor: "".concat(key, "-").concat(paramName), className: "block mb-2 text-sm font-medium text-gray-900 dark:text-white" }, { children: paramName })) })), _jsxs("div", __assign({ className: "flex items-center space-x-4" }, { children: [_jsx("input", { type: "text", id: "".concat(key, "-").concat(paramName), value: formState["".concat(key, "-").concat(paramName)] || "", onChange: function (e) { return updateFormValue(e, "".concat(key, "-").concat(paramName)); }, 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-700 dark:border-gray-600 dark:placeholder-gray-400 dark:text-white dark:focus:ring-blue-500 dark:focus:border-blue-500", placeholder: "Value", required: true }), _jsx(TypeSelectionDropdown, { id: "".concat(key).concat(paramName), dropdownList: options, onSelectMethod: function (option) {
return updateTypes(option, "".concat(key, "-").concat(paramName));
} })] }))] }), paramIndex)); }), _jsx("button", __assign({ className: "mr-8 text-white bg-blue-700 hover:bg-blue-800 focus:outline-none focus:ring-4 focus:ring-blue-300 font-medium rounded-md text-sm px-5 py-2.5 text-center dark:bg-blue-600 dark:hover:bg-blue-700 dark:focus:ring-blue-800", onClick: function (evt) { return handleSmartObjectMethod(evt, smartObject, key, paramList); } }, { children: "Call Function" }))] }))] }), fnIndex));
})] }));
diff --git a/packages/components/src/Auth.tsx b/packages/components/src/Auth.tsx
index c6200e88d..7374d8e92 100644
--- a/packages/components/src/Auth.tsx
+++ b/packages/components/src/Auth.tsx
@@ -48,9 +48,9 @@ function getUrl(chain: Chain, network: Network) {
}
function defaultConfiguration() {
- const chain = (process.env[`REACT_APP_CHAIN`] || localStorage.getItem("CHAIN") || "LTC") as Chain
- const network = (process.env[`REACT_APP_NETWORK`] ||
- localStorage.getItem("NETWORK") ||
+ const chain = (localStorage.getItem("CHAIN") || process.env[`REACT_APP_CHAIN`] || "LTC") as Chain
+ const network = (localStorage.getItem("NETWORK") ||
+ process.env[`REACT_APP_NETWORK`] ||
"regtest") as Network
const url = getUrl(chain, network)
return { chain, network, url }
diff --git a/packages/components/src/SmartObjectFunction.tsx b/packages/components/src/SmartObjectFunction.tsx
index ba9a547c7..84b583285 100644
--- a/packages/components/src/SmartObjectFunction.tsx
+++ b/packages/components/src/SmartObjectFunction.tsx
@@ -1,6 +1,7 @@
import { useState } from "react"
import { TypeSelectionDropdown } from "./common/TypeSelectionDropdown"
import { isValidRev, sleep } from "./common/utils"
+import { UtilsContext } from "./UtilsContext"
export const getErrorMessage = (error: any): string => {
if (
@@ -49,6 +50,7 @@ export const SmartObjectFunction = ({
setModalTitle,
}: any) => {
const [formState, setFormState] = useState({})
+ const { showLoader } = UtilsContext.useUtilsComponents()
const handleSmartObjectMethod = async (
event: any,
@@ -57,6 +59,7 @@ export const SmartObjectFunction = ({
params: string[]
) => {
event.preventDefault()
+ showLoader(true)
try {
const revMap: any = {}
@@ -90,10 +93,12 @@ export const SmartObjectFunction = ({
const res = await computer.query({ ids: [smartObject._id] })
setFunctionResult({ _rev: res[0] })
setModalTitle("Success!")
+ showLoader(false)
setShow(true)
} catch (error: any) {
setFunctionResult(getErrorMessage(error))
setModalTitle("Error!")
+ showLoader(false)
setShow(true)
}
}
@@ -140,7 +145,7 @@ export const SmartObjectFunction = ({
updateFormValue(e, `${key}-${paramName}`)}
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-700 dark:border-gray-600 dark:placeholder-gray-400 dark:text-white dark:focus:ring-blue-500 dark:focus:border-blue-500"
placeholder="Value"
diff --git a/packages/explorer/src/components/Navbar.tsx b/packages/explorer/src/components/Navbar.tsx
index 301d93c27..dba9c0451 100644
--- a/packages/explorer/src/components/Navbar.tsx
+++ b/packages/explorer/src/components/Navbar.tsx
@@ -122,6 +122,13 @@ function NotLoggedMenu() {
localStorage.setItem("CHAIN", chain)
localStorage.setItem("NETWORK", network)
setDropDownLabel(formatChainAndNetwork(chain, network))
+ console.log(
+ chain,
+ network,
+ formatChainAndNetwork(chain, network),
+ localStorage.getItem("CHAIN"),
+ localStorage.getItem("NETWORK")
+ )
window.location.href = "/"
} catch (err) {
showSnackBar("Error setting chain and network", false)
@@ -161,7 +168,7 @@ function NotLoggedMenu() {
className="z-10 hidden font-normal bg-white divide-y divide-gray-100 rounded-lg shadow w-44 dark:bg-gray-700 dark:divide-gray-600"
>
-
@@ -190,7 +197,7 @@ function NotLoggedMenu() {
-
diff --git a/packages/explorer/src/components/playground/CreateNew.tsx b/packages/explorer/src/components/playground/CreateNew.tsx
index 9c2d57e1f..0035c2b4d 100644
--- a/packages/explorer/src/components/playground/CreateNew.tsx
+++ b/packages/explorer/src/components/playground/CreateNew.tsx
@@ -4,6 +4,7 @@ import { IoMdRemoveCircleOutline } from "react-icons/io"
import { Computer } from "@bitcoin-computer/lib"
import { getErrorMessage, getValueForType, isValidRev, sleep } from "../../utils"
import { ModSpec } from "./Modspec"
+import { UtilsContext } from "@bitcoin-computer/components"
interface Argument {
type: string
@@ -24,6 +25,7 @@ const CreateNew = (props: {
const [modSpec, setModSpec] = useState()
const [argumentsList, setArgumentsList] = useState([])
const options = ["object", "string", "number", "bigint", "boolean", "undefined", "symbol"]
+ const { showLoader } = UtilsContext.useUtilsComponents()
useEffect(() => {
const newArgumentsList = [...argumentsList]
@@ -61,6 +63,7 @@ const CreateNew = (props: {
const handleDeploy = async () => {
try {
+ showLoader(true)
const createClassFunction = new Function(`return ${code?.trim()}`)
const dynamicClass = createClassFunction()
if (
@@ -108,10 +111,12 @@ const CreateNew = (props: {
const { res } = await computer.sync(txId)
setFunctionResult({ _rev: res._rev, type: "objects" })
setModalTitle("Success!")
+ showLoader(false)
setShow(true)
} else {
setFunctionResult("Please check the code you provided!")
setModalTitle("Error!")
+ showLoader(false)
setShow(true)
}
} catch (error: any) {
diff --git a/packages/explorer/src/components/playground/DeployModule.tsx b/packages/explorer/src/components/playground/DeployModule.tsx
index 592642550..cd7e84fc2 100644
--- a/packages/explorer/src/components/playground/DeployModule.tsx
+++ b/packages/explorer/src/components/playground/DeployModule.tsx
@@ -1,6 +1,7 @@
import { Dispatch, SetStateAction, useEffect, useState } from "react"
import { Computer } from "@bitcoin-computer/lib"
import { getErrorMessage } from "../../utils"
+import { UtilsContext } from "@bitcoin-computer/components"
const DeployModule = (props: {
computer: Computer
@@ -11,6 +12,7 @@ const DeployModule = (props: {
}) => {
const { computer, exampleModule, setShow, setModalTitle, setFunctionResult } = props
const [module, setModule] = useState()
+ const { showLoader } = UtilsContext.useUtilsComponents()
useEffect(() => {
setModule(exampleModule)
@@ -18,14 +20,17 @@ const DeployModule = (props: {
const handleModuleDeploy = async () => {
try {
+ showLoader(true)
// @ts-ignore
const modSpec = await computer.deploy(module?.trim())
setFunctionResult({ _rev: modSpec, type: "modules" })
setModalTitle("Success!")
+ showLoader(false)
setShow(true)
} catch (error: any) {
setFunctionResult(getErrorMessage(error))
setModalTitle("Error!")
+ showLoader(false)
setShow(true)
}
}
diff --git a/packages/explorer/src/components/playground/ExecuteExpression.tsx b/packages/explorer/src/components/playground/ExecuteExpression.tsx
index d0a65ddfc..9663295ab 100644
--- a/packages/explorer/src/components/playground/ExecuteExpression.tsx
+++ b/packages/explorer/src/components/playground/ExecuteExpression.tsx
@@ -3,6 +3,7 @@ import { IoMdRemoveCircleOutline } from "react-icons/io"
import { Computer } from "@bitcoin-computer/lib"
import { getErrorMessage, isValidRev } from "../../utils"
import { ModSpec } from "./Modspec"
+import { UtilsContext } from "@bitcoin-computer/components"
interface ExpressionArgument {
name: string
@@ -23,6 +24,7 @@ const ExecuteExpression = (props: {
const [expression, setExpression] = useState()
const [modSpec, setModSpec] = useState()
const [expressionArgumentsList, setExpressoinArgumentsList] = useState([])
+ const { showLoader } = UtilsContext.useUtilsComponents()
useEffect(() => {
setExpression(exampleExpression)
@@ -49,6 +51,7 @@ const ExecuteExpression = (props: {
}
const handleExpressionCall = async () => {
try {
+ showLoader(true)
const expressionCode = expression?.trim()
const revMap: any = {}
@@ -81,10 +84,12 @@ const ExecuteExpression = (props: {
const txId = await computer.broadcast(tx)
setFunctionResult({ _rev: `${txId}:0`, type: "objects", res: effect.res })
setModalTitle("Success!")
+ showLoader(false)
setShow(true)
} catch (error: any) {
setFunctionResult(getErrorMessage(error))
setModalTitle("Error!")
+ showLoader(false)
setShow(true)
}
}
From 811a3c2374d172d3cb4a4d202e6994ec647e07e0 Mon Sep 17 00:00:00 2001
From: jonty007
Date: Thu, 8 Feb 2024 18:39:38 +0530
Subject: [PATCH 2/9] Moved hiding loader to the final block
---
packages/components/src/SmartObjectFunction.tsx | 4 ++--
packages/explorer/src/components/Navbar.tsx | 7 -------
packages/explorer/src/components/playground/CreateNew.tsx | 4 ++--
.../explorer/src/components/playground/DeployModule.tsx | 4 ++--
.../src/components/playground/ExecuteExpression.tsx | 4 ++--
5 files changed, 8 insertions(+), 15 deletions(-)
diff --git a/packages/components/src/SmartObjectFunction.tsx b/packages/components/src/SmartObjectFunction.tsx
index 84b583285..873151e32 100644
--- a/packages/components/src/SmartObjectFunction.tsx
+++ b/packages/components/src/SmartObjectFunction.tsx
@@ -93,13 +93,13 @@ export const SmartObjectFunction = ({
const res = await computer.query({ ids: [smartObject._id] })
setFunctionResult({ _rev: res[0] })
setModalTitle("Success!")
- showLoader(false)
setShow(true)
} catch (error: any) {
setFunctionResult(getErrorMessage(error))
setModalTitle("Error!")
- showLoader(false)
setShow(true)
+ } finally {
+ showLoader(false)
}
}
diff --git a/packages/explorer/src/components/Navbar.tsx b/packages/explorer/src/components/Navbar.tsx
index dba9c0451..b6780e2aa 100644
--- a/packages/explorer/src/components/Navbar.tsx
+++ b/packages/explorer/src/components/Navbar.tsx
@@ -122,13 +122,6 @@ function NotLoggedMenu() {
localStorage.setItem("CHAIN", chain)
localStorage.setItem("NETWORK", network)
setDropDownLabel(formatChainAndNetwork(chain, network))
- console.log(
- chain,
- network,
- formatChainAndNetwork(chain, network),
- localStorage.getItem("CHAIN"),
- localStorage.getItem("NETWORK")
- )
window.location.href = "/"
} catch (err) {
showSnackBar("Error setting chain and network", false)
diff --git a/packages/explorer/src/components/playground/CreateNew.tsx b/packages/explorer/src/components/playground/CreateNew.tsx
index 0035c2b4d..63d52fa34 100644
--- a/packages/explorer/src/components/playground/CreateNew.tsx
+++ b/packages/explorer/src/components/playground/CreateNew.tsx
@@ -111,18 +111,18 @@ const CreateNew = (props: {
const { res } = await computer.sync(txId)
setFunctionResult({ _rev: res._rev, type: "objects" })
setModalTitle("Success!")
- showLoader(false)
setShow(true)
} else {
setFunctionResult("Please check the code you provided!")
setModalTitle("Error!")
- showLoader(false)
setShow(true)
}
} catch (error: any) {
setFunctionResult(getErrorMessage(error))
setModalTitle("Error!")
setShow(true)
+ } finally {
+ showLoader(false)
}
}
diff --git a/packages/explorer/src/components/playground/DeployModule.tsx b/packages/explorer/src/components/playground/DeployModule.tsx
index cd7e84fc2..ed50c0808 100644
--- a/packages/explorer/src/components/playground/DeployModule.tsx
+++ b/packages/explorer/src/components/playground/DeployModule.tsx
@@ -25,13 +25,13 @@ const DeployModule = (props: {
const modSpec = await computer.deploy(module?.trim())
setFunctionResult({ _rev: modSpec, type: "modules" })
setModalTitle("Success!")
- showLoader(false)
setShow(true)
} catch (error: any) {
setFunctionResult(getErrorMessage(error))
setModalTitle("Error!")
- showLoader(false)
setShow(true)
+ } finally {
+ showLoader(false)
}
}
diff --git a/packages/explorer/src/components/playground/ExecuteExpression.tsx b/packages/explorer/src/components/playground/ExecuteExpression.tsx
index 9663295ab..944e4e210 100644
--- a/packages/explorer/src/components/playground/ExecuteExpression.tsx
+++ b/packages/explorer/src/components/playground/ExecuteExpression.tsx
@@ -84,13 +84,13 @@ const ExecuteExpression = (props: {
const txId = await computer.broadcast(tx)
setFunctionResult({ _rev: `${txId}:0`, type: "objects", res: effect.res })
setModalTitle("Success!")
- showLoader(false)
setShow(true)
} catch (error: any) {
setFunctionResult(getErrorMessage(error))
setModalTitle("Error!")
- showLoader(false)
setShow(true)
+ } finally {
+ showLoader(false)
}
}
From b17586fe8f8794c2161b68ad796d84e4d0bd29e4 Mon Sep 17 00:00:00 2001
From: jonty007
Date: Thu, 8 Feb 2024 19:06:23 +0530
Subject: [PATCH 3/9] Added drawer and wallet to components package
---
packages/components/built/Drawer.d.ts | 10 ++
packages/components/built/Drawer.js | 24 ++++
packages/components/built/Gallery.js | 2 +-
packages/components/built/SmartObject.js | 2 +-
.../components/built/SmartObjectFunction.js | 15 ++-
packages/components/built/Transaction.js | 2 +-
packages/components/built/Wallet.d.ts | 1 +
packages/components/built/Wallet.js | 127 ++++++++++++++++++
packages/components/built/common/types.d.ts | 4 +-
packages/components/built/common/utils.d.ts | 8 +-
packages/components/built/index.d.ts | 2 +
packages/components/built/index.js | 2 +
packages/components/src/Drawer.tsx | 53 ++++++++
.../components => components/src}/Wallet.tsx | 11 +-
packages/components/src/index.tsx | 2 +
packages/explorer/src/App.tsx | 2 +-
packages/explorer/src/components/Drawer.tsx | 30 -----
packages/explorer/src/components/Navbar.tsx | 5 +-
18 files changed, 248 insertions(+), 54 deletions(-)
create mode 100644 packages/components/built/Drawer.d.ts
create mode 100644 packages/components/built/Drawer.js
create mode 100644 packages/components/built/Wallet.d.ts
create mode 100644 packages/components/built/Wallet.js
create mode 100644 packages/components/src/Drawer.tsx
rename packages/{explorer/src/components => components/src}/Wallet.tsx (95%)
delete mode 100644 packages/explorer/src/components/Drawer.tsx
diff --git a/packages/components/built/Drawer.d.ts b/packages/components/built/Drawer.d.ts
new file mode 100644
index 000000000..fa07485a1
--- /dev/null
+++ b/packages/components/built/Drawer.d.ts
@@ -0,0 +1,10 @@
+declare function ShowDrawer({ text, id }: {
+ text: string;
+ id: string;
+}): import("react/jsx-runtime").JSX.Element;
+declare function Component({ Content, id }: any): import("react/jsx-runtime").JSX.Element;
+export declare const Drawer: {
+ Component: typeof Component;
+ ShowDrawer: typeof ShowDrawer;
+};
+export {};
diff --git a/packages/components/built/Drawer.js b/packages/components/built/Drawer.js
new file mode 100644
index 000000000..171957c44
--- /dev/null
+++ b/packages/components/built/Drawer.js
@@ -0,0 +1,24 @@
+var __assign = (this && this.__assign) || function () {
+ __assign = Object.assign || function(t) {
+ for (var s, i = 1, n = arguments.length; i < n; i++) {
+ s = arguments[i];
+ for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
+ t[p] = s[p];
+ }
+ return t;
+ };
+ return __assign.apply(this, arguments);
+};
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+function ShowDrawer(_a) {
+ var text = _a.text, id = _a.id;
+ return (_jsx("button", __assign({ "data-drawer-target": id, "data-drawer-show": id, "data-drawer-placement": "right", "aria-controls": id }, { children: text })));
+}
+function Component(_a) {
+ var Content = _a.Content, id = _a.id;
+ return (_jsxs("div", __assign({ id: id, className: "fixed top-0 right-0 z-40 h-screen p-4 overflow-y-auto transition-transform translate-x-full bg-white w-80 dark:bg-gray-800", tabIndex: -1, "aria-labelledby": "drawer-right-label" }, { children: [_jsxs("button", __assign({ type: "button", "data-drawer-hide": id, "aria-controls": id, className: "text-gray-400 bg-transparent hover:bg-gray-200 hover:text-gray-900 rounded-lg text-sm w-8 h-8 absolute top-2.5 end-2.5 inline-flex items-center justify-center dark:hover:bg-gray-600 dark:hover:text-white" }, { children: [_jsx("svg", __assign({ className: "w-3 h-3", "aria-hidden": "true", xmlns: "http://www.w3.org/2000/svg", fill: "none", viewBox: "0 0 14 14" }, { children: _jsx("path", { stroke: "currentColor", strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: "2", d: "m1 1 6 6m0 0 6 6M7 7l6-6M7 7l-6 6" }) })), _jsx("span", __assign({ className: "sr-only" }, { children: "Close menu" }))] })), Content()] })));
+}
+export var Drawer = {
+ Component: Component,
+ ShowDrawer: ShowDrawer,
+};
diff --git a/packages/components/built/Gallery.js b/packages/components/built/Gallery.js
index 74b0a34a7..c5563b7ff 100644
--- a/packages/components/built/Gallery.js
+++ b/packages/components/built/Gallery.js
@@ -24,7 +24,7 @@ var __generator = (this && this.__generator) || function (thisArg, body) {
function verb(n) { return function (v) { return step([n, v]); }; }
function step(op) {
if (f) throw new TypeError("Generator is already executing.");
- while (g && (g = 0, op[0] && (_ = 0)), _) try {
+ while (_) try {
if (f = 1, y && (t = op[0] & 2 ? y["return"] : op[0] ? y["throw"] || ((t = y["return"]) && t.call(y), 0) : y.next) && !(t = t.call(y, op[1])).done) return t;
if (y = 0, t) op = [op[0] & 2, t.value];
switch (op[0]) {
diff --git a/packages/components/built/SmartObject.js b/packages/components/built/SmartObject.js
index 6593bfbb5..200667504 100644
--- a/packages/components/built/SmartObject.js
+++ b/packages/components/built/SmartObject.js
@@ -24,7 +24,7 @@ var __generator = (this && this.__generator) || function (thisArg, body) {
function verb(n) { return function (v) { return step([n, v]); }; }
function step(op) {
if (f) throw new TypeError("Generator is already executing.");
- while (g && (g = 0, op[0] && (_ = 0)), _) try {
+ while (_) try {
if (f = 1, y && (t = op[0] & 2 ? y["return"] : op[0] ? y["throw"] || ((t = y["return"]) && t.call(y), 0) : y.next) && !(t = t.call(y, op[1])).done) return t;
if (y = 0, t) op = [op[0] & 2, t.value];
switch (op[0]) {
diff --git a/packages/components/built/SmartObjectFunction.js b/packages/components/built/SmartObjectFunction.js
index 5b97569ab..d35ae0700 100644
--- a/packages/components/built/SmartObjectFunction.js
+++ b/packages/components/built/SmartObjectFunction.js
@@ -24,7 +24,7 @@ var __generator = (this && this.__generator) || function (thisArg, body) {
function verb(n) { return function (v) { return step([n, v]); }; }
function step(op) {
if (f) throw new TypeError("Generator is already executing.");
- while (g && (g = 0, op[0] && (_ = 0)), _) try {
+ while (_) try {
if (f = 1, y && (t = op[0] & 2 ? y["return"] : op[0] ? y["throw"] || ((t = y["return"]) && t.call(y), 0) : y.next) && !(t = t.call(y, op[1])).done) return t;
if (y = 0, t) op = [op[0] & 2, t.value];
switch (op[0]) {
@@ -98,7 +98,7 @@ export var SmartObjectFunction = function (_a) {
showLoader(true);
_a.label = 1;
case 1:
- _a.trys.push([1, 6, , 7]);
+ _a.trys.push([1, 6, 7, 8]);
revMap_1 = {};
params.forEach(function (param) {
var key = "".concat(fnName, "-").concat(param);
@@ -135,17 +135,18 @@ export var SmartObjectFunction = function (_a) {
res = _a.sent();
setFunctionResult({ _rev: res[0] });
setModalTitle("Success!");
- showLoader(false);
setShow(true);
- return [3 /*break*/, 7];
+ return [3 /*break*/, 8];
case 6:
error_1 = _a.sent();
setFunctionResult(getErrorMessage(error_1));
setModalTitle("Error!");
- showLoader(false);
setShow(true);
- return [3 /*break*/, 7];
- case 7: return [2 /*return*/];
+ return [3 /*break*/, 8];
+ case 7:
+ showLoader(false);
+ return [7 /*endfinally*/];
+ case 8: return [2 /*return*/];
}
});
}); };
diff --git a/packages/components/built/Transaction.js b/packages/components/built/Transaction.js
index 7e3a797fb..102dac51a 100644
--- a/packages/components/built/Transaction.js
+++ b/packages/components/built/Transaction.js
@@ -24,7 +24,7 @@ var __generator = (this && this.__generator) || function (thisArg, body) {
function verb(n) { return function (v) { return step([n, v]); }; }
function step(op) {
if (f) throw new TypeError("Generator is already executing.");
- while (g && (g = 0, op[0] && (_ = 0)), _) try {
+ while (_) try {
if (f = 1, y && (t = op[0] & 2 ? y["return"] : op[0] ? y["throw"] || ((t = y["return"]) && t.call(y), 0) : y.next) && !(t = t.call(y, op[1])).done) return t;
if (y = 0, t) op = [op[0] & 2, t.value];
switch (op[0]) {
diff --git a/packages/components/built/Wallet.d.ts b/packages/components/built/Wallet.d.ts
new file mode 100644
index 000000000..3fbf05ade
--- /dev/null
+++ b/packages/components/built/Wallet.d.ts
@@ -0,0 +1 @@
+export declare function Wallet(): import("react/jsx-runtime").JSX.Element;
diff --git a/packages/components/built/Wallet.js b/packages/components/built/Wallet.js
new file mode 100644
index 000000000..70a408ebe
--- /dev/null
+++ b/packages/components/built/Wallet.js
@@ -0,0 +1,127 @@
+var __assign = (this && this.__assign) || function () {
+ __assign = Object.assign || function(t) {
+ for (var s, i = 1, n = arguments.length; i < n; i++) {
+ s = arguments[i];
+ for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
+ t[p] = s[p];
+ }
+ return t;
+ };
+ return __assign.apply(this, arguments);
+};
+var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, generator) {
+ function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); }
+ return new (P || (P = Promise))(function (resolve, reject) {
+ function fulfilled(value) { try { step(generator.next(value)); } catch (e) { reject(e); } }
+ function rejected(value) { try { step(generator["throw"](value)); } catch (e) { reject(e); } }
+ function step(result) { result.done ? resolve(result.value) : adopt(result.value).then(fulfilled, rejected); }
+ step((generator = generator.apply(thisArg, _arguments || [])).next());
+ });
+};
+var __generator = (this && this.__generator) || function (thisArg, body) {
+ var _ = { label: 0, sent: function() { if (t[0] & 1) throw t[1]; return t[1]; }, trys: [], ops: [] }, f, y, t, g;
+ return g = { next: verb(0), "throw": verb(1), "return": verb(2) }, typeof Symbol === "function" && (g[Symbol.iterator] = function() { return this; }), g;
+ function verb(n) { return function (v) { return step([n, v]); }; }
+ function step(op) {
+ if (f) throw new TypeError("Generator is already executing.");
+ while (_) try {
+ if (f = 1, y && (t = op[0] & 2 ? y["return"] : op[0] ? y["throw"] || ((t = y["return"]) && t.call(y), 0) : y.next) && !(t = t.call(y, op[1])).done) return t;
+ if (y = 0, t) op = [op[0] & 2, t.value];
+ switch (op[0]) {
+ case 0: case 1: t = op; break;
+ case 4: _.label++; return { value: op[1], done: false };
+ case 5: _.label++; y = op[1]; op = [0]; continue;
+ case 7: op = _.ops.pop(); _.trys.pop(); continue;
+ default:
+ if (!(t = _.trys, t = t.length > 0 && t[t.length - 1]) && (op[0] === 6 || op[0] === 2)) { _ = 0; continue; }
+ if (op[0] === 3 && (!t || (op[1] > t[0] && op[1] < t[3]))) { _.label = op[1]; break; }
+ if (op[0] === 6 && _.label < t[1]) { _.label = t[1]; t = op; break; }
+ if (t && _.label < t[2]) { _.label = t[2]; _.ops.push(op); break; }
+ if (t[2]) _.ops.pop();
+ _.trys.pop(); continue;
+ }
+ op = body.call(thisArg, _);
+ } catch (e) { op = [6, e]; y = 0; } finally { f = t = 0; }
+ if (op[0] & 5) throw op[1]; return { value: op[0] ? op[1] : void 0, done: true };
+ }
+};
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { useCallback, useEffect, useState } from "react";
+import { HiRefresh } from "react-icons/hi";
+import { Auth } from "./Auth";
+import { Drawer } from "./Drawer";
+import { UtilsContext } from "./UtilsContext";
+var Balance = function (_a) {
+ var computer = _a.computer;
+ var _b = useState(0), balance = _b[0], setBalance = _b[1];
+ var _c = useState(localStorage.getItem("CHAIN") || "LTC"), chain = _c[0], setChain = _c[1];
+ var showSnackBar = UtilsContext.useUtilsComponents().showSnackBar;
+ var refreshBalance = useCallback(function () { return __awaiter(void 0, void 0, void 0, function () {
+ var _a, err_1;
+ return __generator(this, function (_b) {
+ switch (_b.label) {
+ case 0:
+ _b.trys.push([0, 3, , 4]);
+ if (!computer) return [3 /*break*/, 2];
+ _a = setBalance;
+ return [4 /*yield*/, computer.getBalance()];
+ case 1:
+ _a.apply(void 0, [_b.sent()]);
+ setChain(computer.getChain());
+ _b.label = 2;
+ case 2: return [3 /*break*/, 4];
+ case 3:
+ err_1 = _b.sent();
+ showSnackBar("Error fetching wallet details", false);
+ console.log("Error fetching wallet details", err_1);
+ return [3 /*break*/, 4];
+ case 4: return [2 /*return*/];
+ }
+ });
+ }); }, [computer]);
+ useEffect(function () {
+ refreshBalance();
+ }, []);
+ return (_jsxs("div", __assign({ className: "mb-4" }, { children: [_jsxs("h6", __assign({ className: "text-lg font-bold dark:text-white" }, { children: ["Balance", _jsx(HiRefresh, { onClick: refreshBalance, className: "w-4 h-4 ml-1 inline cursor-pointer text-gray-500 dark:text-gray-400 hover:text-slate-700 dark:hover:text-slate-100" })] })), _jsxs("p", __assign({ className: "mb-4 font-mono text-xs text-gray-500 dark:text-gray-400" }, { children: [balance / 1e8, " ", chain, " "] }))] })));
+};
+var Address = function (_a) {
+ var computer = _a.computer;
+ return (_jsxs("div", __assign({ className: "mb-4" }, { children: [_jsx("h6", __assign({ className: "text-lg font-bold dark:text-white" }, { children: "Address" })), _jsx("p", __assign({ className: "mb-4 font-mono text-xs text-gray-500 dark:text-gray-400" }, { children: computer.getAddress() }))] })));
+};
+var PublicKey = function (_a) {
+ var computer = _a.computer;
+ return (_jsxs("div", __assign({ className: "mb-4" }, { children: [_jsx("h6", __assign({ className: "text-lg font-bold dark:text-white" }, { children: "Public Key" })), _jsx("p", __assign({ className: "mb-4 font-mono text-xs text-gray-500 dark:text-gray-400 break-words" }, { children: computer.getPublicKey() }))] })));
+};
+var Mnemonic = function (_a) {
+ var computer = _a.computer;
+ var _b = useState(false), showMnemonic = _b[0], setShowMnemonic = _b[1];
+ var Heading = function () { return _jsx("h6", __assign({ className: "text-lg font-bold dark:text-white" }, { children: "Mnemonic" })); };
+ if (showMnemonic)
+ return (_jsxs("div", __assign({ className: "mb-4" }, { children: [_jsx(Heading, {}), _jsx("p", __assign({ className: "mb-1 font-mono text-xs text-gray-500 dark:text-gray-400 break-words" }, { children: computer.getMnemonic() })), _jsx("button", __assign({ onClick: function () { return setShowMnemonic(false); }, className: "text-sm text-gray-500 dark:text-gray-400 hover:text-blue-600 dark:hover:text-blue-500 underline" }, { children: "Hide" }))] })));
+ else
+ return (_jsxs("div", __assign({ className: "mb-4" }, { children: [_jsx(Heading, {}), _jsx("button", __assign({ onClick: function () { return setShowMnemonic(true); }, className: "text-sm text-gray-500 dark:text-gray-400 hover:text-blue-600 dark:hover:text-blue-500 underline" }, { children: "Show" })), _jsx("br", {})] })));
+};
+var Path = function (_a) {
+ var computer = _a.computer;
+ return (_jsxs("div", __assign({ className: "mb-4" }, { children: [_jsx("h6", __assign({ className: "text-lg font-bold dark:text-white" }, { children: "Path" })), _jsx("p", __assign({ className: "mb-4 font-mono text-xs text-gray-500 dark:text-gray-400 break-words" }, { children: computer.getPath() }))] })));
+};
+var Url = function (_a) {
+ var computer = _a.computer;
+ return (_jsxs("div", __assign({ className: "mb-4" }, { children: [_jsx("h6", __assign({ className: "text-lg font-bold dark:text-white" }, { children: "Node Url" })), _jsx("p", __assign({ className: "mb-4 font-mono text-xs text-gray-500 dark:text-gray-400 break-words" }, { children: computer.getUrl() }))] })));
+};
+var Chain = function (_a) {
+ var computer = _a.computer;
+ return (_jsxs("div", __assign({ className: "mb-4" }, { children: [_jsx("h6", __assign({ className: "text-lg font-bold dark:text-white" }, { children: "Chain" })), _jsx("p", __assign({ className: "mb-4 font-mono text-xs text-gray-500 dark:text-gray-400 break-words" }, { children: computer.getChain() }))] })));
+};
+var Network = function (_a) {
+ var computer = _a.computer;
+ return (_jsxs("div", __assign({ className: "mb-4" }, { children: [_jsx("h6", __assign({ className: "text-lg font-bold dark:text-white" }, { children: "Network" })), _jsx("p", __assign({ className: "mb-4 font-mono text-xs text-gray-500 dark:text-gray-400 break-words" }, { children: computer.getNetwork() }))] })));
+};
+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 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/common/types.d.ts b/packages/components/built/common/types.d.ts
index cf1cb54d1..5136d5130 100644
--- a/packages/components/built/common/types.d.ts
+++ b/packages/components/built/common/types.d.ts
@@ -1,2 +1,2 @@
-export type Chain = "LTC" | "BTC" | "DOGE";
-export type Network = "testnet" | "mainnet" | "regtest";
+export declare type Chain = "LTC" | "BTC" | "DOGE";
+export declare type Network = "testnet" | "mainnet" | "regtest";
diff --git a/packages/components/built/common/utils.d.ts b/packages/components/built/common/utils.d.ts
index 2aa0059f1..b1bf2befb 100644
--- a/packages/components/built/common/utils.d.ts
+++ b/packages/components/built/common/utils.d.ts
@@ -1,7 +1,7 @@
-type Json = JBasic | JObject | JArray;
-type JBasic = undefined | null | boolean | number | string | symbol | bigint;
-type JArray = Json[];
-type JObject = {
+declare type Json = JBasic | JObject | JArray;
+declare type JBasic = undefined | null | boolean | number | string | symbol | bigint;
+declare type JArray = Json[];
+declare type JObject = {
[x: string]: Json;
};
export declare const jsonMap: (g: (el: Json) => Json) => (json: Json) => Json;
diff --git a/packages/components/built/index.d.ts b/packages/components/built/index.d.ts
index 92950b0f9..60cebc941 100644
--- a/packages/components/built/index.d.ts
+++ b/packages/components/built/index.d.ts
@@ -7,3 +7,5 @@ export { Transaction } from "./Transaction";
export { Error404 } from "./Error404";
export { UtilsContext } from "./UtilsContext";
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 92950b0f9..60cebc941 100644
--- a/packages/components/built/index.js
+++ b/packages/components/built/index.js
@@ -7,3 +7,5 @@ export { Transaction } from "./Transaction";
export { Error404 } from "./Error404";
export { UtilsContext } from "./UtilsContext";
export { FunctionResultModalContent } from "./common/SmartCallExecutionResult";
+export { Drawer } from "./Drawer";
+export { Wallet } from "./Wallet";
diff --git a/packages/components/src/Drawer.tsx b/packages/components/src/Drawer.tsx
new file mode 100644
index 000000000..b7efe1c95
--- /dev/null
+++ b/packages/components/src/Drawer.tsx
@@ -0,0 +1,53 @@
+function ShowDrawer({ text, id }: { text: string; id: string }) {
+ return (
+
+ )
+}
+
+function Component({ Content, id }: any) {
+ return (
+
+
+ {Content()}
+
+ )
+}
+
+export const Drawer = {
+ Component,
+ ShowDrawer,
+}
diff --git a/packages/explorer/src/components/Wallet.tsx b/packages/components/src/Wallet.tsx
similarity index 95%
rename from packages/explorer/src/components/Wallet.tsx
rename to packages/components/src/Wallet.tsx
index 56d4efc9f..736fed706 100644
--- a/packages/explorer/src/components/Wallet.tsx
+++ b/packages/components/src/Wallet.tsx
@@ -1,7 +1,8 @@
import { useCallback, useEffect, useState } from "react"
import { HiRefresh } from "react-icons/hi"
+import { Auth } from "./Auth"
import { Drawer } from "./Drawer"
-import { Auth, UtilsContext } from "@bitcoin-computer/components"
+import { UtilsContext } from "./UtilsContext"
const Balance = ({ computer }: any) => {
const [balance, setBalance] = useState(0)
@@ -34,7 +35,9 @@ const Balance = ({ computer }: any) => {
/>
- {balance / 1e8} {chain}
+
+ {balance / 1e8} {chain}{" "}
+
)
}
@@ -150,7 +153,7 @@ const LogOut = () => {
)
}
-export default function Wallet() {
+export function Wallet() {
const [computer] = useState(Auth.getComputer())
const Content = () => (
@@ -170,5 +173,5 @@ export default function Wallet() {
>
)
- return
+ return
}
diff --git a/packages/components/src/index.tsx b/packages/components/src/index.tsx
index 683c12826..5d2fefe63 100644
--- a/packages/components/src/index.tsx
+++ b/packages/components/src/index.tsx
@@ -7,3 +7,5 @@ export { Transaction } from "./Transaction"
export { Error404 } from "./Error404"
export { UtilsContext } from "./UtilsContext"
export { FunctionResultModalContent } from "./common/SmartCallExecutionResult"
+export { Drawer } from "./Drawer"
+export { Wallet } from "./Wallet"
diff --git a/packages/explorer/src/App.tsx b/packages/explorer/src/App.tsx
index ee4e95842..9216dc687 100644
--- a/packages/explorer/src/App.tsx
+++ b/packages/explorer/src/App.tsx
@@ -4,7 +4,6 @@ import { BrowserRouter, Route, Routes, Navigate } from "react-router-dom"
import NavBar from "./components/Navbar"
import Block from "./components/Block"
import Blocks from "./components/Blocks"
-import Wallet from "./components/Wallet"
import Module from "./components/Module"
import Playground from "./components/playground/Playground"
import { initFlowbite } from "flowbite"
@@ -15,6 +14,7 @@ import {
Transaction,
Error404,
UtilsContext,
+ Wallet,
} from "@bitcoin-computer/components"
export default function App() {
useEffect(() => {
diff --git a/packages/explorer/src/components/Drawer.tsx b/packages/explorer/src/components/Drawer.tsx
deleted file mode 100644
index 122d4b186..000000000
--- a/packages/explorer/src/components/Drawer.tsx
+++ /dev/null
@@ -1,30 +0,0 @@
-export function ShowDrawer({ text, id }: { text: string, id: string }) {
- return
-}
-
-export function Drawer({ Content, id }: any) {
- return (
-
- {Content()}
-
)
-}
-
diff --git a/packages/explorer/src/components/Navbar.tsx b/packages/explorer/src/components/Navbar.tsx
index b6780e2aa..277b05cc9 100644
--- a/packages/explorer/src/components/Navbar.tsx
+++ b/packages/explorer/src/components/Navbar.tsx
@@ -1,6 +1,5 @@
import { Link } from "react-router-dom"
-import { ShowDrawer } from "./Drawer"
-import { Modal, Auth, UtilsContext } from "@bitcoin-computer/components"
+import { Modal, Auth, UtilsContext, Drawer } from "@bitcoin-computer/components"
import { SearchBar } from "./SearchBar"
import { useEffect, useState } from "react"
import { initFlowbite } from "flowbite"
@@ -14,7 +13,7 @@ function LoggedInMenu() {
-
-
From 260f43edb385a54d43c52d111b225a9008fd3a0f Mon Sep 17 00:00:00 2001
From: jonty007
Date: Tue, 13 Feb 2024 18:04:06 +0530
Subject: [PATCH 4/9] Fixed cra template
---
packages/cra-template/.env.example | 9 +
packages/cra-template/package.json | 2 +
packages/cra-template/src/App.tsx | 51 +--
.../cra-template/src/components/Counter.tsx | 49 +--
.../cra-template/src/components/Loader.tsx | 24 -
.../cra-template/src/components/Login.tsx | 138 ------
.../cra-template/src/components/Navbar.tsx | 415 +++++++++++-------
.../src/components/NavbarWrapper.tsx | 32 --
.../cra-template/src/components/SnackBar.tsx | 41 --
.../cra-template/src/components/Wallet.tsx | 95 ----
packages/cra-template/src/types/common.ts | 8 +-
packages/cra-template/tailwind.config.js | 14 +-
12 files changed, 321 insertions(+), 557 deletions(-)
create mode 100644 packages/cra-template/.env.example
delete mode 100644 packages/cra-template/src/components/Loader.tsx
delete mode 100644 packages/cra-template/src/components/Login.tsx
delete mode 100644 packages/cra-template/src/components/NavbarWrapper.tsx
delete mode 100644 packages/cra-template/src/components/SnackBar.tsx
delete mode 100644 packages/cra-template/src/components/Wallet.tsx
diff --git a/packages/cra-template/.env.example b/packages/cra-template/.env.example
new file mode 100644
index 000000000..b4a5b051f
--- /dev/null
+++ b/packages/cra-template/.env.example
@@ -0,0 +1,9 @@
+MNEMONIC=travel upgrade inside soda birth essence junk merit never twenty system opinion
+GENERATE_SOURCEMAP=false
+PORT=1032
+REACT_APP_LTC_TESTNET_URL=https://node.bitcoincomputer.io
+REACT_APP_LTC_REGTEST_URL=http://127.0.0.1:1031
+REACT_APP_BTC_TESTNET_URL=https://node.bitcoincomputer.io
+REACT_APP_BTC_REGTEST_URL=http://127.0.0.1:1031
+REACT_APP_CHAIN=LTC
+REACT_APP_NETWORK=testnet
\ No newline at end of file
diff --git a/packages/cra-template/package.json b/packages/cra-template/package.json
index 01533f120..f753f54f5 100644
--- a/packages/cra-template/package.json
+++ b/packages/cra-template/package.json
@@ -3,6 +3,7 @@
"version": "0.17.1-beta.0",
"private": true,
"dependencies": {
+ "@bitcoin-computer/components": "^0.17.1-beta.0",
"@bitcoin-computer/lib": "^0.17.1-beta.0",
"@testing-library/jest-dom": "^5.16.5",
"@testing-library/react": "^13.4.0",
@@ -12,6 +13,7 @@
"@types/node": "^16.18.16",
"@types/react": "^18.0.28",
"@types/react-dom": "^18.0.11",
+ "flowbite": "^2.2.1",
"react": "^18.2.0",
"react-dom": "^18.2.0",
"react-icons": "^4.8.0",
diff --git a/packages/cra-template/src/App.tsx b/packages/cra-template/src/App.tsx
index 3b5638b70..a719401d4 100644
--- a/packages/cra-template/src/App.tsx
+++ b/packages/cra-template/src/App.tsx
@@ -1,33 +1,30 @@
-import { Computer } from "@bitcoin-computer/lib"
-import { useState } from "react"
-import { BrowserRouter, Route, Routes, Navigate } from "react-router-dom"
import "./App.css"
-import NavbarWrapper from "./components/NavbarWrapper"
+import { useEffect } 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 } from "@bitcoin-computer/components"
import Counter from "./components/Counter"
-import { Config } from "./types/common"
+export default function App() {
+ useEffect(() => {
+ initFlowbite()
+ }, [])
-function App() {
- const mnemonic = localStorage.getItem("BIP_39_KEY") || ""
- const chain = localStorage.getItem("CHAIN") || ""
- const getConf = (network: string) => ({
- chain,
- network,
- mnemonic,
- url: network === "testnet" ? "https://node.bitcoincomputer.io" : "http://127.0.0.1:1031",
- })
- const config: Config = getConf("testnet")
- const [computer, setComputer] = useState(new Computer(config))
return (
- <>
-
-
-
- } />
- } />
-
-
- >
+
+
+
+
+
+
+
+
+ } />
+ } />
+ } />
+
+
+
+
)
}
-
-export default App
diff --git a/packages/cra-template/src/components/Counter.tsx b/packages/cra-template/src/components/Counter.tsx
index c6a1f1ef5..3ac34e6e7 100644
--- a/packages/cra-template/src/components/Counter.tsx
+++ b/packages/cra-template/src/components/Counter.tsx
@@ -1,15 +1,9 @@
-import { Computer } from "@bitcoin-computer/lib"
import { useState } from "react"
-import Loader from "./Loader"
-import SnackBar from "./SnackBar"
+import { Auth, UtilsContext } from "@bitcoin-computer/components"
-function Counter(props: { computer: Computer }) {
- const { computer } = props
- console.log(computer)
- const [show, setShow] = useState(false)
- const [loading, setLoading] = useState(false)
- const [success, setSuccess] = useState(false)
- const [message, setMessage] = useState("")
+function Counter() {
+ const [computer] = useState(Auth.getComputer())
+ const { showSnackBar, showLoader } = UtilsContext.useUtilsComponents()
const [counter, setCounter] = useState(null)
// eslint-disable-next-line no-undef
@@ -27,31 +21,32 @@ function Counter(props: { computer: Computer }) {
const createSmart = async (evt: any) => {
evt.preventDefault()
- setLoading(true)
+ showLoader(true)
try {
setCounter(await computer.new(Counter))
- setLoading(false)
- setMessage("Created counter smart object")
- setSuccess(true)
- setShow(true)
+ showSnackBar("Created counter smart object", true)
} catch (err: any) {
- setLoading(false)
- setMessage(err.message)
- setSuccess(false)
- setShow(true)
+ showSnackBar(err && err.message ? err.message : "Error occurred", false)
+ } finally {
+ showLoader(false)
}
}
const increment = async (evt: any) => {
evt.preventDefault()
- if (!counter) {
- setMessage("smart counter not present")
- setSuccess(false)
- setShow(true)
- return
+ try {
+ showLoader(false)
+ if (!counter) {
+ showSnackBar("smart counter not present", false)
+ return
+ }
+ await counter.inc()
+ setCount(counter.n)
+ } catch (err: any) {
+ showSnackBar(err && err.message ? err.message : "Error occurred", false)
+ } finally {
+ showLoader(false)
}
- await counter.inc()
- setCount(counter.n)
}
return (
@@ -78,8 +73,6 @@ function Counter(props: { computer: Computer }) {
{counter ? `Id: ${counter._id}` : ""}
{counter ? `Revision: ${counter._rev}` : ""}
- {show && }
- {loading && }
>
)
diff --git a/packages/cra-template/src/components/Loader.tsx b/packages/cra-template/src/components/Loader.tsx
deleted file mode 100644
index f904e1921..000000000
--- a/packages/cra-template/src/components/Loader.tsx
+++ /dev/null
@@ -1,24 +0,0 @@
-function Loader() {
- return (
-
- )
-}
-
-export default Loader
diff --git a/packages/cra-template/src/components/Login.tsx b/packages/cra-template/src/components/Login.tsx
deleted file mode 100644
index 4cb95fbc9..000000000
--- a/packages/cra-template/src/components/Login.tsx
+++ /dev/null
@@ -1,138 +0,0 @@
-import { Dispatch, SetStateAction, useState } from "react"
-import { Computer } from "@bitcoin-computer/lib"
-import SnackBar from "./SnackBar"
-import { Config } from "../types/common"
-
-function Login(props: {
- config: Config
- setComputer: Dispatch>
- setShowLogin: Dispatch>
- showLogin: boolean
-}) {
- const { config, setComputer, showLogin, setShowLogin } = props
- const [show, setShow] = useState(false)
- const [success, setSuccess] = useState(false)
- const [message, setMessage] = useState("")
-
- // Clear the local storage
- localStorage.removeItem("BIP_39_KEY")
- localStorage.removeItem("CHAIN")
-
- // const navigate = useNavigate();
- const [password, setPassword] = useState("")
- const [chain, setChain] = useState("LTC")
-
- const closeModal = () => {
- setShowLogin(false)
- }
-
- const login = () => {
- if (!password) {
- setMessage("Please provide valid password")
- setSuccess(false)
- setShow(true)
- return
- }
- localStorage.setItem("BIP_39_KEY", password)
- localStorage.setItem("CHAIN", chain)
- const computer = new Computer({
- ...config,
- chain: chain,
- mnemonic: localStorage.getItem("BIP_39_KEY"),
- })
- setComputer(computer)
- setShowLogin(false)
- }
-
- return (
- <>
- {showLogin && (
-
-
-
-
-
- Litecoin ART
-
-
-
-
-
-
Don&apost forget to write down your seed.
- {/*link to generate BIP39 Seed*/}
-
-
- Generate BIP39 Seed
-
-
- {/*the input field for password*/}
-
setPassword(e.target.value)}
- />
- {/*dropdown to select the crypto*/}
-
-
- {/*login button*/}
-
-
-
-
-
-
-
- )}
- {show && }
- >
- )
-}
-
-export default Login
diff --git a/packages/cra-template/src/components/Navbar.tsx b/packages/cra-template/src/components/Navbar.tsx
index ddc273b70..0dfe4eb03 100644
--- a/packages/cra-template/src/components/Navbar.tsx
+++ b/packages/cra-template/src/components/Navbar.tsx
@@ -1,180 +1,269 @@
-import { Computer } from "@bitcoin-computer/lib"
-import { Dispatch, SetStateAction, useEffect, useState } from "react"
-import { NavLink } from "react-router-dom"
-
-export default function Navbar(props: {
- computer: Computer
- setIsOpen: Dispatch>
- setShowLogin: Dispatch>
-}) {
- const { setIsOpen, computer, setShowLogin } = props
- const [showNavBar, setShowNavBar] = useState(true)
- const [dropDownHidden, setDropDownHidden] = useState(true)
-
- const [loggedIn, setLoggedIn] = useState(localStorage.getItem("BIP_39_KEY") !== null)
-
- const logout = () => {
- localStorage.removeItem("BIP_39_KEY")
- localStorage.removeItem("CHAIN")
- setLoggedIn(false)
- setIsOpen(false)
- window.location.href = "/"
- }
+import { Link } from "react-router-dom"
+import { Modal, Auth, UtilsContext, Drawer } from "@bitcoin-computer/components"
+import { useEffect, useState } from "react"
+import { initFlowbite } from "flowbite"
+import { Chain, Network } from "../types/common"
- useEffect(() => {
- setLoggedIn(localStorage.getItem("BIP_39_KEY") !== null)
- }, [loggedIn, computer])
+const modalTitle = "Connect to Node"
+const modalId = "unsupported-config-modal"
- const openMenu = (evt: any) => {
- evt.preventDefault()
- setShowNavBar(!showNavBar)
+function LoggedInMenu() {
+ return (
+
+ )
+}
+
+function formatChainAndNetwork(chain: string, network: string) {
+ const prefix = {
+ mainnet: "",
+ testnet: "t",
+ regtest: "r",
+ }[network]
+ return `${prefix}${chain}`
+}
+
+function ModalContent() {
+ const [url, setUrl] = useState("")
+ function setNetwork(e: React.SyntheticEvent) {
+ e.preventDefault()
+ localStorage.setItem("URL", url)
}
- const openDrowdown = (evt: any) => {
- evt.preventDefault()
- setDropDownHidden(!dropDownHidden)
+ function closeModal() {
+ Modal.get(modalId).hide()
}
return (
-