From 858e2e72f00c01a8a2ed1fddea0a5ead815eb45c Mon Sep 17 00:00:00 2001 From: jonty007 Date: Fri, 12 Jan 2024 19:43:52 +0530 Subject: [PATCH 1/5] New modal, removed old modal and updated search bar --- packages/components/built/Modal.d.ts | 4 +- packages/components/built/Modal.js | 9 ++-- packages/components/built/ModalOld.js | 5 +- packages/components/built/SmartObject.js | 16 ++++-- .../common/SmartCallExecutionResult.d.ts | 1 + .../built/common/SmartCallExecutionResult.js | 26 ++++++++++ packages/components/built/index.d.ts | 1 + packages/components/built/index.js | 1 + packages/components/src/Modal.tsx | 31 ++++++----- packages/components/src/ModalOld.tsx | 4 +- packages/components/src/SmartObject.tsx | 24 ++++++--- .../src/common/SmartCallExecutionResult.tsx | 52 +++++++++++++++++++ packages/components/src/index.tsx | 1 + .../src/components/playground/Playground.tsx | 24 +++++---- packages/explorer/src/utils.ts | 10 ++-- 15 files changed, 161 insertions(+), 48 deletions(-) create mode 100644 packages/components/built/common/SmartCallExecutionResult.d.ts create mode 100644 packages/components/built/common/SmartCallExecutionResult.js create mode 100644 packages/components/src/common/SmartCallExecutionResult.tsx diff --git a/packages/components/built/Modal.d.ts b/packages/components/built/Modal.d.ts index cde8db492..aabfa9e91 100644 --- a/packages/components/built/Modal.d.ts +++ b/packages/components/built/Modal.d.ts @@ -1,8 +1,8 @@ -import { Modal as ModalClass } from 'flowbite'; +import { Modal as ModalClass } from "flowbite"; export declare const Modal: { get: (id: string) => ModalClass; ShowButton: ({ id, text }: any) => import("react/jsx-runtime").JSX.Element; HideButton: ({ id, text }: any) => import("react/jsx-runtime").JSX.Element; ToggleButton: ({ id, text }: any) => import("react/jsx-runtime").JSX.Element; - Component: ({ title, content, id }: any) => import("react/jsx-runtime").JSX.Element; + Component: ({ title, content, contentData, id }: any) => import("react/jsx-runtime").JSX.Element; }; diff --git a/packages/components/built/Modal.js b/packages/components/built/Modal.js index 11aec547a..6a4c2e05b 100644 --- a/packages/components/built/Modal.js +++ b/packages/components/built/Modal.js @@ -10,7 +10,7 @@ var __assign = (this && this.__assign) || function () { return __assign.apply(this, arguments); }; import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime"; -import { Modal as ModalClass } from 'flowbite'; +import { Modal as ModalClass } from "flowbite"; var get = function (id) { var $modalElement = document.querySelector("#".concat(id)); var modalOptions = {}; @@ -25,13 +25,16 @@ var HideButton = function (_a) { var id = _a.id, text = _a.text; return (_jsx("button", __assign({ "data-modal-target": id, "data-modal-hide": id, type: "button" }, { children: text }))); }; +var hideModal = function (id) { + get(id).hide(); +}; var ToggleButton = function (_a) { var id = _a.id, text = _a.text; return (_jsx("button", __assign({ "data-modal-target": id, "data-modal-toggle": id, type: "button" }, { children: text }))); }; var Component = function (_a) { - var title = _a.title, content = _a.content, id = _a.id; - return (_jsx("div", __assign({ id: id, tabIndex: -1, "aria-hidden": "true", className: "hidden overflow-y-auto overflow-x-hidden fixed top-0 right-0 left-0 z-50 justify-center items-center w-full md:inset-0 h-[calc(100%-1rem)] max-h-full" }, { children: _jsx("div", __assign({ className: "relative p-4 w-full max-w-2xl max-h-full" }, { children: _jsxs("div", __assign({ className: "relative bg-white rounded-lg shadow dark:bg-gray-700" }, { children: [_jsxs("div", __assign({ className: "flex items-center justify-between p-4 md:p-5 border-b rounded-t dark:border-gray-600" }, { children: [_jsx("h3", __assign({ className: "text-xl font-semibold text-gray-900 dark:text-white" }, { children: title })), _jsxs("button", __assign({ type: "button", className: "text-gray-400 bg-transparent hover:bg-gray-200 hover:text-gray-900 rounded-lg text-sm w-8 h-8 ms-auto inline-flex justify-center items-center dark:hover:bg-gray-600 dark:hover:text-white", "data-modal-hide": id }, { 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 modal" }))] }))] })), content()] })) })) }))); + var title = _a.title, content = _a.content, contentData = _a.contentData, id = _a.id; + return (_jsx("div", __assign({ id: id, tabIndex: -1, "aria-hidden": "true", className: "hidden overflow-y-auto overflow-x-hidden fixed top-0 right-0 left-0 z-50 justify-center items-center w-full md:inset-0 h-[calc(100%-1rem)] max-h-full" }, { children: _jsx("div", __assign({ className: "relative p-4 w-full max-w-2xl max-h-full" }, { children: _jsxs("div", __assign({ className: "relative bg-white rounded-lg shadow dark:bg-gray-700" }, { children: [_jsxs("div", __assign({ className: "flex items-center justify-between p-4 md:p-5 border-b rounded-t dark:border-gray-600" }, { children: [_jsx("h3", __assign({ className: "text-xl font-semibold text-gray-900 dark:text-white" }, { children: title })), _jsxs("button", __assign({ type: "button", className: "text-gray-400 bg-transparent hover:bg-gray-200 hover:text-gray-900 rounded-lg text-sm w-8 h-8 ms-auto inline-flex justify-center items-center dark:hover:bg-gray-600 dark:hover:text-white", "data-modal-hide": id, "data-modal-target": id, onClick: function () { return hideModal(id); } }, { 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 modal" }))] }))] })), content(contentData)] })) })) }))); }; export var Modal = { get: get, diff --git a/packages/components/built/ModalOld.js b/packages/components/built/ModalOld.js index 6b059d67e..e6499cf80 100644 --- a/packages/components/built/ModalOld.js +++ b/packages/components/built/ModalOld.js @@ -14,7 +14,10 @@ import { Link, useNavigate } from "react-router-dom"; export var ModalOld = function (_a) { var customElement = _a.customElement, show = _a.show, setShow = _a.setShow, functionResult = _a.functionResult, functionCallSuccess = _a.functionCallSuccess; var navigate = useNavigate(); - var getType = function () { return functionResult && (functionResult === null || functionResult === void 0 ? void 0 : functionResult.type) ? functionResult.type : "objects"; }; + var getType = function () { + return functionResult && (functionResult === null || functionResult === void 0 ? void 0 : functionResult.type) ? functionResult.type : "objects"; + }; + console.log("function result old: ", functionResult); return (_jsx(_Fragment, { children: show && (_jsx("div", __assign({ "tab-index": "-1", "aria-hidden": "true", className: "flex overflow-y-auto overflow-x-hidden fixed top-0 right-0 left-0 z-50 justify-center items-center w-full md:inset-0 h-[calc(100%-1rem)] max-h-full" }, { children: _jsx("div", __assign({ className: "relative p-4 w-full max-w-4xl max-h-full" }, { children: _jsxs("div", __assign({ className: "relative bg-white rounded-lg shadow dark:bg-gray-700" }, { children: [_jsxs("div", __assign({ className: "flex items-center justify-between p-4 md:p-5 border-b rounded-t dark:border-gray-600" }, { children: [_jsx("h3", __assign({ className: "text-xl font-semibold text-gray-900 dark:text-white" }, { children: functionCallSuccess ? "Success!!" : "Error!" })), _jsxs("button", __assign({ type: "button", className: "text-gray-400 bg-transparent hover:bg-gray-200 hover:text-gray-900 rounded-lg text-sm w-8 h-8 ms-auto inline-flex justify-center items-center dark:hover:bg-gray-600 dark:hover:text-white", onClick: function () { return setShow(false); } }, { 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 modal" }))] }))] })), _jsxs("div", __assign({ className: "p-4 md:p-5 space-y-4" }, { children: [(functionResult === null || functionResult === void 0 ? void 0 : functionResult.res) && (_jsxs(_Fragment, { children: [_jsx("p", __assign({ className: "text-base leading-relaxed text-gray-500 dark:text-gray-400" }, { children: "Data returned:" })), _jsx("pre", __assign({ className: "text-base leading-relaxed text-gray-500 dark:text-gray-400" }, { children: functionResult.res.toString() }))] })), typeof functionResult === "object" && functionResult && functionResult._rev && (_jsx("p", __assign({ className: "text-base leading-relaxed text-gray-500 dark:text-gray-400" }, { children: "Check the latest state of your smart object by clicking the link below" }))), typeof functionResult === "string" && (_jsx("p", __assign({ className: "text-base leading-relaxed text-gray-500 dark:text-gray-400" }, { children: functionResult }))), _jsx("pre", __assign({ className: "text-base leading-relaxed text-gray-500 dark:text-gray-400" }, { children: typeof functionResult === "object" && !Array.isArray(functionResult) && functionResult._rev && (_jsx(_Fragment, { children: _jsx(Link, __assign({ to: "/".concat(getType(), "/").concat(functionResult._rev), className: "font-medium text-blue-600 dark:text-blue-500 hover:underline", onClick: function () { diff --git a/packages/components/built/SmartObject.js b/packages/components/built/SmartObject.js index 7a153f736..faaedbfd3 100644 --- a/packages/components/built/SmartObject.js +++ b/packages/components/built/SmartObject.js @@ -51,10 +51,12 @@ import { Dropdown, initFlowbite, } from "flowbite"; import { Link, useLocation, useNavigate, useParams } from "react-router-dom"; import { capitalizeFirstLetter, isValidRev, sleep, toObject } from "./common/utils"; import reactStringReplace from "react-string-replace"; -import { ModalOld } from "./ModalOld"; import { Auth } from "./Auth"; import { Card } from "./Card"; +import { Modal } from "./Modal"; +import { FunctionResultModalContent } from "./common/SmartCallExecutionResult"; var keywords = ["_id", "_rev", "_owners", "_root", "_amount"]; +var modalId = "smart-object-info-modal"; 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) === @@ -173,10 +175,14 @@ function Component() { var _a = useState(null), smartObject = _a[0], setSmartObject = _a[1]; var _b = useState({}), formState = _b[0], setFormState = _b[1]; var _c = useState(false), functionsExist = _c[0], setFunctionsExist = _c[1]; - var _d = useState(false), show = _d[0], setShow = _d[1]; - var _e = useState({}), functionResult = _e[0], setFunctionResult = _e[1]; - var _f = useState(false), functionCallSuccess = _f[0], setFunctionCallSuccess = _f[1]; + var _d = useState({}), functionResult = _d[0], setFunctionResult = _d[1]; + var _e = useState(false), functionCallSuccess = _e[0], setFunctionCallSuccess = _e[1]; var options = ["object", "string", "number", "bigint", "boolean", "undefined", "symbol"]; + var _f = useState(""), modalTitle = _f[0], setModalTitle = _f[1]; + var setShow = function (flag) { + functionCallSuccess ? setModalTitle("Sucess!") : setModalTitle("Error!"); + flag ? Modal.get(modalId).show() : Modal.get(modalId).hide(); + }; useEffect(function () { var fetch = function () { return __awaiter(_this, void 0, void 0, function () { var synced, error_1, txId_1; @@ -284,7 +290,7 @@ function Component() { setFormState(value); }; var _g = rev.split(":"), txId = _g[0], outNum = _g[1]; - return (_jsxs(_Fragment, { children: [_jsxs("div", { children: [_jsx("h1", __assign({ className: "mb-2 text-5xl font-extrabold dark:text-white" }, { children: "Output" })), _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("h2", __assign({ className: "mb-2 text-4xl font-bold dark:text-white" }, { children: "Data" })), _jsx(SmartObjectValues, { smartObject: smartObject }), _jsx(Functions, { smartObject: smartObject, functionsExist: functionsExist, formState: formState, updateFormValue: updateFormValue, updateTypes: updateTypes, handleSmartObjectMethod: handleSmartObjectMethod, options: options }), _jsx(MetaData, { smartObject: smartObject })] }), _jsx(ModalOld, { show: show, setShow: setShow, functionResult: functionResult, functionCallSuccess: functionCallSuccess })] })); + return (_jsxs(_Fragment, { children: [_jsxs("div", { children: [_jsx("h1", __assign({ className: "mb-2 text-5xl font-extrabold dark:text-white" }, { children: "Output" })), _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("h2", __assign({ className: "mb-2 text-4xl font-bold dark:text-white" }, { children: "Data" })), _jsx(SmartObjectValues, { smartObject: smartObject }), _jsx(Functions, { smartObject: smartObject, functionsExist: functionsExist, formState: formState, updateFormValue: updateFormValue, updateTypes: updateTypes, handleSmartObjectMethod: handleSmartObjectMethod, options: options }), _jsx(MetaData, { smartObject: smartObject })] }), _jsx(Modal.Component, { title: modalTitle, content: FunctionResultModalContent, contentData: { functionResult: functionResult }, id: modalId })] })); } export var SmartObject = { Component: Component, diff --git a/packages/components/built/common/SmartCallExecutionResult.d.ts b/packages/components/built/common/SmartCallExecutionResult.d.ts new file mode 100644 index 000000000..56fcb4411 --- /dev/null +++ b/packages/components/built/common/SmartCallExecutionResult.d.ts @@ -0,0 +1 @@ +export declare function FunctionResultModalContent({ functionResult }: any): import("react/jsx-runtime").JSX.Element; diff --git a/packages/components/built/common/SmartCallExecutionResult.js b/packages/components/built/common/SmartCallExecutionResult.js new file mode 100644 index 000000000..5ede41c38 --- /dev/null +++ b/packages/components/built/common/SmartCallExecutionResult.js @@ -0,0 +1,26 @@ +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, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime"; +import { Link, useNavigate } from "react-router-dom"; +export function FunctionResultModalContent(_a) { + var functionResult = _a.functionResult; + var navigate = useNavigate(); + var getType = function () { + return functionResult && (functionResult === null || functionResult === void 0 ? void 0 : functionResult.type) ? functionResult.type : "objects"; + }; + return (_jsx("div", { children: _jsxs("div", __assign({ className: "p-4 md:p-5 space-y-4" }, { children: [(functionResult === null || functionResult === void 0 ? void 0 : functionResult.res) && (_jsxs(_Fragment, { children: [_jsx("p", __assign({ className: "text-base leading-relaxed text-gray-500 dark:text-gray-400" }, { children: "Data returned:" })), _jsx("pre", __assign({ className: "text-base leading-relaxed text-gray-500 dark:text-gray-400" }, { children: functionResult.res.toString() }))] })), typeof functionResult === "object" && functionResult && functionResult._rev && (_jsx("p", __assign({ className: "text-base leading-relaxed text-gray-500 dark:text-gray-400" }, { children: "Check the latest state of your smart object by clicking the link below" }))), typeof functionResult === "string" && (_jsx("p", __assign({ className: "text-base leading-relaxed text-gray-500 dark:text-gray-400" }, { children: functionResult }))), _jsx("pre", __assign({ className: "text-base leading-relaxed text-gray-500 dark:text-gray-400" }, { children: typeof functionResult === "object" && + !Array.isArray(functionResult) && + functionResult._rev && (_jsx(_Fragment, { children: _jsx(Link, __assign({ to: "/".concat(getType(), "/").concat(functionResult._rev), className: "font-medium text-blue-600 dark:text-blue-500 hover:underline", onClick: function () { + navigate("/".concat(getType(), "/").concat(functionResult._rev)); + window.location.reload(); + } }, { children: "smart object" })) })) }))] })) })); +} diff --git a/packages/components/built/index.d.ts b/packages/components/built/index.d.ts index 429561d6c..f861c0db1 100644 --- a/packages/components/built/index.d.ts +++ b/packages/components/built/index.d.ts @@ -7,3 +7,4 @@ export { ModalOld } from "./ModalOld"; export { Transaction } from "./Transaction"; export { Error404 } from "./Error404"; export { UtilsContext } from "./UtilsContext"; +export { FunctionResultModalContent } from "./common/SmartCallExecutionResult"; diff --git a/packages/components/built/index.js b/packages/components/built/index.js index 429561d6c..f861c0db1 100644 --- a/packages/components/built/index.js +++ b/packages/components/built/index.js @@ -7,3 +7,4 @@ export { ModalOld } from "./ModalOld"; export { Transaction } from "./Transaction"; export { Error404 } from "./Error404"; export { UtilsContext } from "./UtilsContext"; +export { FunctionResultModalContent } from "./common/SmartCallExecutionResult"; diff --git a/packages/components/src/Modal.tsx b/packages/components/src/Modal.tsx index 0e2092361..dce9ab631 100644 --- a/packages/components/src/Modal.tsx +++ b/packages/components/src/Modal.tsx @@ -1,7 +1,6 @@ -import { Modal as ModalClass } from 'flowbite'; -import type { ModalOptions, ModalInterface } from 'flowbite'; -import type { InstanceOptions } from 'flowbite'; -import { useState } from 'react'; +import { Modal as ModalClass } from "flowbite" +import type { ModalOptions } from "flowbite" +import type { InstanceOptions } from "flowbite" const get = (id: string) => { const $modalElement = document.querySelector(`#${id}`) as HTMLElement @@ -14,21 +13,25 @@ const ShowButton = ({ id, text }: any) => ( -); +) const HideButton = ({ id, text }: any) => ( -); +) + +const hideModal = (id: string) => { + get(id).hide() +} const ToggleButton = ({ id, text }: any) => ( -); +) -const Component = ({ title, content, id }: any) => ( +const Component = ({ title, content, contentData, id }: any) => (
(
-

- {title} -

+

{title}

- {content()} + {content(contentData)}
-); +) export const Modal = { get, ShowButton, HideButton, ToggleButton, - Component, + Component, } diff --git a/packages/components/src/ModalOld.tsx b/packages/components/src/ModalOld.tsx index 9284854b0..574c02390 100644 --- a/packages/components/src/ModalOld.tsx +++ b/packages/components/src/ModalOld.tsx @@ -8,7 +8,9 @@ export const ModalOld = ({ functionCallSuccess, }: any) => { const navigate = useNavigate() - const getType = (): string => functionResult && functionResult?.type ? functionResult.type : "objects" + const getType = (): string => + functionResult && functionResult?.type ? functionResult.type : "objects" + console.log("function result old: ", functionResult) return ( <> diff --git a/packages/components/src/SmartObject.tsx b/packages/components/src/SmartObject.tsx index 50213635e..ec9275597 100644 --- a/packages/components/src/SmartObject.tsx +++ b/packages/components/src/SmartObject.tsx @@ -9,11 +9,13 @@ import { import { Link, useLocation, useNavigate, useParams } from "react-router-dom" import { capitalizeFirstLetter, isValidRev, sleep, toObject } from "./common/utils" import reactStringReplace from "react-string-replace" -import { ModalOld } from "./ModalOld" import { Auth } from "./Auth" import { Card } from "./Card" +import { Modal } from "./Modal" +import { FunctionResultModalContent } from "./common/SmartCallExecutionResult" const keywords = ["_id", "_rev", "_owners", "_root", "_amount"] +const modalId = "smart-object-info-modal" export const getErrorMessage = (error: any): string => { if ( @@ -350,11 +352,17 @@ function Component() { const [smartObject, setSmartObject] = useState(null) const [formState, setFormState] = useState({}) const [functionsExist, setFunctionsExist] = useState(false) - const [show, setShow] = useState(false) const [functionResult, setFunctionResult] = useState({}) const [functionCallSuccess, setFunctionCallSuccess] = useState(false) const options = ["object", "string", "number", "bigint", "boolean", "undefined", "symbol"] + const [modalTitle, setModalTitle] = useState("") + + const setShow: any = (flag: boolean) => { + functionCallSuccess ? setModalTitle("Sucess!") : setModalTitle("Error!") + flag ? Modal.get(modalId).show() : Modal.get(modalId).hide() + } + useEffect(() => { const fetch = async () => { try { @@ -481,12 +489,12 @@ function Component() { - + ) } diff --git a/packages/components/src/common/SmartCallExecutionResult.tsx b/packages/components/src/common/SmartCallExecutionResult.tsx new file mode 100644 index 000000000..ae56bf745 --- /dev/null +++ b/packages/components/src/common/SmartCallExecutionResult.tsx @@ -0,0 +1,52 @@ +import { Link, useNavigate } from "react-router-dom" + +export function FunctionResultModalContent({ functionResult }: any) { + const navigate = useNavigate() + const getType = (): string => + functionResult && functionResult?.type ? functionResult.type : "objects" + + return ( +
+
+ {functionResult?.res && ( + <> +

+ Data returned: +

+ 
+              {functionResult.res.toString()}
+
+ + )} + {typeof functionResult === "object" && functionResult && functionResult._rev && ( +

+ {"Check the latest state of your smart object by clicking the link below"} +

+ )} + {typeof functionResult === "string" && ( +

+ {functionResult} +

+ )} + 
+          {typeof functionResult === "object" &&
+            !Array.isArray(functionResult) &&
+            functionResult._rev && (
+              <>
+                 {
+                    navigate(`/${getType()}/${functionResult._rev}`)
+                    window.location.reload()
+                  }}
+                >
+                  smart object
+                
+              
+            )}
+
+
+
+ ) +} diff --git a/packages/components/src/index.tsx b/packages/components/src/index.tsx index 26adcebda..afdff1b1e 100644 --- a/packages/components/src/index.tsx +++ b/packages/components/src/index.tsx @@ -7,3 +7,4 @@ export { ModalOld } from "./ModalOld" export { Transaction } from "./Transaction" export { Error404 } from "./Error404" export { UtilsContext } from "./UtilsContext" +export { FunctionResultModalContent } from "./common/SmartCallExecutionResult" diff --git a/packages/explorer/src/components/playground/Playground.tsx b/packages/explorer/src/components/playground/Playground.tsx index da803acee..d30e35abf 100644 --- a/packages/explorer/src/components/playground/Playground.tsx +++ b/packages/explorer/src/components/playground/Playground.tsx @@ -21,7 +21,9 @@ import { nftVars, tokenVars, } from "./examples" -import { Auth, ModalOld } from "@bitcoin-computer/components" +import { Auth, Modal, FunctionResultModalContent } from "@bitcoin-computer/components" + +const modalId = "playground-info-modal" const Examples = ({ loadExamples, clearExamples }: { loadExamples: any; clearExamples: any }) => { return ( @@ -124,15 +126,19 @@ const Tabs = () => { } const Playground = () => { - console.log("Playground") const [computer] = useState(Auth.getComputer()) - const [show, setShow] = useState(false) const [functionResult, setFunctionResult] = useState({}) const [functionCallSuccess, setFunctionCallSuccess] = useState(false) const [exampleCode, setExampleCode] = useState("") const [exampleExpression, setExampleExpresion] = useState("") const [exampleModule, setExampleModule] = useState("") const [exampleVars, setExampleVars] = useState([]) + const [modalTitle, setModalTitle] = useState("") + + const setShow: any = (flag: boolean) => { + functionCallSuccess ? setModalTitle("Sucess!") : setModalTitle("Error!") + flag ? Modal.get(modalId).show() : Modal.get(modalId).hide() + } useEffect(() => { initFlowbite() @@ -226,12 +232,12 @@ const Playground = () => { - + ) } diff --git a/packages/explorer/src/utils.ts b/packages/explorer/src/utils.ts index 2bef459ff..55b9f5254 100644 --- a/packages/explorer/src/utils.ts +++ b/packages/explorer/src/utils.ts @@ -93,10 +93,10 @@ export const getValueForType = (type: string, stringValue: string) => { export const capitalizeFirstLetter = (string: string) => string.charAt(0).toUpperCase() + string.slice(1) -export const isValidHexadecimalPrivateKey = (privateKey: string): boolean => { - if (!privateKey) return false - let trimmedPrivateKey = privateKey.trim() - return trimmedPrivateKey.length === 64 || trimmedPrivateKey.length === 66 +export const isValidHexadecimalPublicKey = (publicKey: string): boolean => { + if (!publicKey) return false + let trimmedPublicKey = publicKey.trim() + return trimmedPublicKey.length === 64 || trimmedPublicKey.length === 66 } export const getErrorMessage = (error: any): string => { @@ -114,4 +114,4 @@ export const getErrorMessage = (error: any): string => { // https://github.com/GoogleChromeLabs/jsbi/issues/30 export const toObject = (obj: any) => - JSON.stringify(obj, (key, value) => typeof value === 'bigint' ? value.toString() : value, 2); + JSON.stringify(obj, (key, value) => (typeof value === "bigint" ? value.toString() : value), 2) From 1e9ddb9ad07ff13e0b99710f3ecdf9208040018e Mon Sep 17 00:00:00 2001 From: jonty007 Date: Tue, 16 Jan 2024 17:22:33 +0530 Subject: [PATCH 2/5] removed oldmodal and fixed wallet utilscontext --- packages/components/built/ModalOld.d.ts | 1 - packages/components/built/ModalOld.js | 27 ----- packages/components/built/index.d.ts | 1 - packages/components/built/index.js | 1 - packages/components/src/ModalOld.tsx | 99 ------------------- packages/components/src/index.tsx | 1 - .../explorer/src/components/SearchBar.tsx | 4 +- packages/wallet/src/App.tsx | 10 +- 8 files changed, 8 insertions(+), 136 deletions(-) delete mode 100644 packages/components/built/ModalOld.d.ts delete mode 100644 packages/components/built/ModalOld.js delete mode 100644 packages/components/src/ModalOld.tsx diff --git a/packages/components/built/ModalOld.d.ts b/packages/components/built/ModalOld.d.ts deleted file mode 100644 index 3cb2ba712..000000000 --- a/packages/components/built/ModalOld.d.ts +++ /dev/null @@ -1 +0,0 @@ -export declare const ModalOld: ({ customElement, show, setShow, functionResult, functionCallSuccess, }: any) => import("react/jsx-runtime").JSX.Element; diff --git a/packages/components/built/ModalOld.js b/packages/components/built/ModalOld.js deleted file mode 100644 index e6499cf80..000000000 --- a/packages/components/built/ModalOld.js +++ /dev/null @@ -1,27 +0,0 @@ -var __assign = (this && this.__assign) || function () { - __assign = Object.assign || function(t) { - for (var s, i = 1, n = arguments.length; i < n; i++) { - s = arguments[i]; - for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p)) - t[p] = s[p]; - } - return t; - }; - return __assign.apply(this, arguments); -}; -import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime"; -import { Link, useNavigate } from "react-router-dom"; -export var ModalOld = function (_a) { - var customElement = _a.customElement, show = _a.show, setShow = _a.setShow, functionResult = _a.functionResult, functionCallSuccess = _a.functionCallSuccess; - var navigate = useNavigate(); - var getType = function () { - return functionResult && (functionResult === null || functionResult === void 0 ? void 0 : functionResult.type) ? functionResult.type : "objects"; - }; - console.log("function result old: ", functionResult); - return (_jsx(_Fragment, { children: show && (_jsx("div", __assign({ "tab-index": "-1", "aria-hidden": "true", className: "flex overflow-y-auto overflow-x-hidden fixed top-0 right-0 left-0 z-50 justify-center items-center w-full md:inset-0 h-[calc(100%-1rem)] max-h-full" }, { children: _jsx("div", __assign({ className: "relative p-4 w-full max-w-4xl max-h-full" }, { children: _jsxs("div", __assign({ className: "relative bg-white rounded-lg shadow dark:bg-gray-700" }, { children: [_jsxs("div", __assign({ className: "flex items-center justify-between p-4 md:p-5 border-b rounded-t dark:border-gray-600" }, { children: [_jsx("h3", __assign({ className: "text-xl font-semibold text-gray-900 dark:text-white" }, { children: functionCallSuccess ? "Success!!" : "Error!" })), _jsxs("button", __assign({ type: "button", className: "text-gray-400 bg-transparent hover:bg-gray-200 hover:text-gray-900 rounded-lg text-sm w-8 h-8 ms-auto inline-flex justify-center items-center dark:hover:bg-gray-600 dark:hover:text-white", onClick: function () { return setShow(false); } }, { 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 modal" }))] }))] })), _jsxs("div", __assign({ className: "p-4 md:p-5 space-y-4" }, { children: [(functionResult === null || functionResult === void 0 ? void 0 : functionResult.res) && (_jsxs(_Fragment, { children: [_jsx("p", __assign({ className: "text-base leading-relaxed text-gray-500 dark:text-gray-400" }, { children: "Data returned:" })), _jsx("pre", __assign({ className: "text-base leading-relaxed text-gray-500 dark:text-gray-400" }, { children: functionResult.res.toString() }))] })), typeof functionResult === "object" && functionResult && functionResult._rev && (_jsx("p", __assign({ className: "text-base leading-relaxed text-gray-500 dark:text-gray-400" }, { children: "Check the latest state of your smart object by clicking the link below" }))), typeof functionResult === "string" && (_jsx("p", __assign({ className: "text-base leading-relaxed text-gray-500 dark:text-gray-400" }, { children: functionResult }))), _jsx("pre", __assign({ className: "text-base leading-relaxed text-gray-500 dark:text-gray-400" }, { children: typeof functionResult === "object" && - !Array.isArray(functionResult) && - functionResult._rev && (_jsx(_Fragment, { children: _jsx(Link, __assign({ to: "/".concat(getType(), "/").concat(functionResult._rev), className: "font-medium text-blue-600 dark:text-blue-500 hover:underline", onClick: function () { - navigate("/".concat(getType(), "/").concat(functionResult._rev)); - window.location.reload(); - } }, { children: functionResult._rev })) })) })), customElement ? customElement : _jsx(_Fragment, {})] }))] })) })) }))) })); -}; diff --git a/packages/components/built/index.d.ts b/packages/components/built/index.d.ts index f861c0db1..92950b0f9 100644 --- a/packages/components/built/index.d.ts +++ b/packages/components/built/index.d.ts @@ -3,7 +3,6 @@ export { Auth } from "./Auth"; export { Modal } from "./Modal"; export { Gallery } from "./Gallery"; export { SmartObject } from "./SmartObject"; -export { ModalOld } from "./ModalOld"; export { Transaction } from "./Transaction"; export { Error404 } from "./Error404"; export { UtilsContext } from "./UtilsContext"; diff --git a/packages/components/built/index.js b/packages/components/built/index.js index f861c0db1..92950b0f9 100644 --- a/packages/components/built/index.js +++ b/packages/components/built/index.js @@ -3,7 +3,6 @@ export { Auth } from "./Auth"; export { Modal } from "./Modal"; export { Gallery } from "./Gallery"; export { SmartObject } from "./SmartObject"; -export { ModalOld } from "./ModalOld"; export { Transaction } from "./Transaction"; export { Error404 } from "./Error404"; export { UtilsContext } from "./UtilsContext"; diff --git a/packages/components/src/ModalOld.tsx b/packages/components/src/ModalOld.tsx deleted file mode 100644 index 574c02390..000000000 --- a/packages/components/src/ModalOld.tsx +++ /dev/null @@ -1,99 +0,0 @@ -import { Link, useNavigate } from "react-router-dom" - -export const ModalOld = ({ - customElement, - show, - setShow, - functionResult, - functionCallSuccess, -}: any) => { - const navigate = useNavigate() - const getType = (): string => - functionResult && functionResult?.type ? functionResult.type : "objects" - console.log("function result old: ", functionResult) - - return ( - <> - {show && ( - - )} - - ) -} diff --git a/packages/components/src/index.tsx b/packages/components/src/index.tsx index afdff1b1e..683c12826 100644 --- a/packages/components/src/index.tsx +++ b/packages/components/src/index.tsx @@ -3,7 +3,6 @@ export { Auth } from "./Auth" export { Modal } from "./Modal" export { Gallery } from "./Gallery" export { SmartObject } from "./SmartObject" -export { ModalOld } from "./ModalOld" export { Transaction } from "./Transaction" export { Error404 } from "./Error404" export { UtilsContext } from "./UtilsContext" diff --git a/packages/explorer/src/components/SearchBar.tsx b/packages/explorer/src/components/SearchBar.tsx index 753ca7bab..7747a27bb 100644 --- a/packages/explorer/src/components/SearchBar.tsx +++ b/packages/explorer/src/components/SearchBar.tsx @@ -1,7 +1,7 @@ import { useRef, useState } from "react" import { useNavigate } from "react-router-dom" import { Auth } from "@bitcoin-computer/components" -import { isValidHexadecimalPrivateKey } from "../utils" +import { isValidHexadecimalPublicKey } from "../utils" export function SearchBar() { const inputRef = useRef(null) @@ -26,7 +26,7 @@ export function SearchBar() { } catch (error) { navigate(`/objects/${searchInput}`) } - } else if (isValidHexadecimalPrivateKey(searchInput)) + } else if (isValidHexadecimalPublicKey(searchInput)) navigate(`/?public-key=${searchInput.trim()}`) else navigate(`/transactions/${searchInput}`) } diff --git a/packages/wallet/src/App.tsx b/packages/wallet/src/App.tsx index 01b88ea86..d1b76d97d 100644 --- a/packages/wallet/src/App.tsx +++ b/packages/wallet/src/App.tsx @@ -176,10 +176,12 @@ function SideBar() { export default function App() { if (!Auth.isLoggedIn()) return ( -
-

TBC Wallet

- -
+ +
+

TBC Wallet

+ +
+ ) return ( From 87c13fedd2344d51144d8a778553684d8456fca3 Mon Sep 17 00:00:00 2001 From: ltardivo Date: Thu, 18 Jan 2024 16:40:10 -0300 Subject: [PATCH 3/5] Fixes playground examples --- packages/explorer/src/components/playground/examples.ts | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) diff --git a/packages/explorer/src/components/playground/examples.ts b/packages/explorer/src/components/playground/examples.ts index 4bcbe2e2b..1ff0e6cae 100644 --- a/packages/explorer/src/components/playground/examples.ts +++ b/packages/explorer/src/components/playground/examples.ts @@ -49,7 +49,7 @@ export const fungibleToken = `class Token extends Contract { } send(amount, to) { if (this.tokens < amount) throw new Error() - this._amount -= amount + this.tokens -= amount return new Token(amount, to) } }` @@ -63,7 +63,7 @@ export const fungibleTokenExpresion = (pubKey: string) => `class Token extends C } send(amount, to) { if (this.tokens < amount) throw new Error() - this._amount -= amount + this.tokens -= amount return new Token(amount, to) } } @@ -78,7 +78,7 @@ export const fungibleTokenExport = `export class Token extends Contract { } send(amount, to) { if (this.tokens < amount) throw new Error() - this._amount -= amount + this.tokens -= amount return new Token(amount, to) } }` From 29dd37742e6d5429ad49b3b9cb291c5026567786 Mon Sep 17 00:00:00 2001 From: ltardivo Date: Thu, 18 Jan 2024 17:12:00 -0300 Subject: [PATCH 4/5] Adds default env values for BTC config --- packages/explorer/.env.example | 2 ++ packages/wallet/.env.example | 2 ++ 2 files changed, 4 insertions(+) diff --git a/packages/explorer/.env.example b/packages/explorer/.env.example index 3e543c1b1..db0ee16de 100644 --- a/packages/explorer/.env.example +++ b/packages/explorer/.env.example @@ -2,5 +2,7 @@ MNEMONIC=capital hurdle actual tunnel stool pause measure fresh deer mass thrive GENERATE_SOURCEMAP=false 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://tbtc.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/wallet/.env.example b/packages/wallet/.env.example index 45b7afd33..eaf820914 100644 --- a/packages/wallet/.env.example +++ b/packages/wallet/.env.example @@ -4,5 +4,7 @@ REACT_APP_EXPLORER_URL=localhost:1032 GENERATE_SOURCEMAP=false 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://tbtc.node.bitcoincomputer.io +REACT_APP_BTC_REGTEST_URL=http://127.0.0.1:1031 REACT_APP_CHAIN=LTC REACT_APP_NETWORK=testnet From dd35e61da1f4d1dd2b73c457e703f8adff511554 Mon Sep 17 00:00:00 2001 From: ltardivo Date: Thu, 18 Jan 2024 17:13:12 -0300 Subject: [PATCH 5/5] Read chain from computer config in wallet --- packages/explorer/src/components/Wallet.tsx | 8 ++++++-- 1 file changed, 6 insertions(+), 2 deletions(-) diff --git a/packages/explorer/src/components/Wallet.tsx b/packages/explorer/src/components/Wallet.tsx index c679786e9..c317af9be 100644 --- a/packages/explorer/src/components/Wallet.tsx +++ b/packages/explorer/src/components/Wallet.tsx @@ -5,11 +5,15 @@ import { Auth, UtilsContext } from "@bitcoin-computer/components" const Balance = ({ computer }: any) => { const [balance, setBalance] = useState(0) + const [chain, setChain] = useState(localStorage.getItem("CHAIN") || "LTC") const { showSnackBar } = UtilsContext.useUtilsComponents() const refreshBalance = useCallback(async () => { try { - if (computer) setBalance(await computer.getBalance()) + if (computer) { + setBalance(await computer.getBalance()) + setChain(computer.getChain()) + } } catch (err) { showSnackBar("Error fetching wallet details", false) console.log("Error fetching wallet details", err) @@ -26,7 +30,7 @@ const Balance = ({ computer }: any) => { /> -

{balance / 1e8} LTC

+

{balance / 1e8} {chain}

) }