New modal, removed old modal and updated search bar

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

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,

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,

packages/components/built/common/SmartCallExecutionResult.d.ts

@@ -0,0 +1 @@
+export declare function FunctionResultModalContent({ functionResult }: any): import("react/jsx-runtime").JSX.Element;

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

packages/components/built/index.d.ts

@@ -3,7 +3,7 @@ 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";
+export { FunctionResultModalContent } from "./common/SmartCallExecutionResult";

packages/components/built/index.js

@@ -3,7 +3,7 @@ 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";
+export { FunctionResultModalContent } from "./common/SmartCallExecutionResult";

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) => (
   <button data-modal-target={id} data-modal-show={id} type="button">
     {text}
   </button>
-);
+)
 
 const HideButton = ({ id, text }: any) => (
   <button data-modal-target={id} data-modal-hide={id} type="button">
     {text}
   </button>
-);
+)
+
+const hideModal = (id: string) => {
+  get(id).hide()
+}
 
 const ToggleButton = ({ id, text }: any) => (
   <button data-modal-target={id} data-modal-toggle={id} type="button">
     {text}
   </button>
-);
+)
 
-const Component = ({ title, content, id }: any) => (
+const Component = ({ title, content, contentData, id }: any) => (
   <div
     id={id}
     tabIndex={-1}
@@ -38,13 +41,13 @@ const Component = ({ title, content, id }: any) => (
     <div className="relative p-4 w-full max-w-2xl max-h-full">
       <div className="relative bg-white rounded-lg shadow dark:bg-gray-700">
         <div className="flex items-center justify-between p-4 md:p-5 border-b rounded-t dark:border-gray-600">
-          <h3 className="text-xl font-semibold text-gray-900 dark:text-white">
-            {title}
-          </h3>
+          <h3 className="text-xl font-semibold text-gray-900 dark:text-white">{title}</h3>
           <button
             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={() => hideModal(id)}
           >
             <svg
               className="w-3 h-3"
@@ -64,16 +67,16 @@ const Component = ({ title, content, id }: any) => (
             <span className="sr-only">Close modal</span>
           </button>
         </div>
-        {content()}
+        {content(contentData)}
       </div>
     </div>
   </div>
-);
+)
 
 export const Modal = {
   get,
   ShowButton,
   HideButton,
   ToggleButton,
-  Component, 
+  Component,
 }