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.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 6b059d67e..000000000
--- a/packages/components/built/ModalOld.js
+++ /dev/null
@@ -1,24 +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"; };
-    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/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..92950b0f9 100644
--- a/packages/components/built/index.d.ts
+++ b/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";
diff --git a/packages/components/built/index.js b/packages/components/built/index.js
index 429561d6c..92950b0f9 100644
--- a/packages/components/built/index.js
+++ b/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";
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) => (
   <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,
 }
diff --git a/packages/components/src/ModalOld.tsx b/packages/components/src/ModalOld.tsx
deleted file mode 100644
index 9284854b0..000000000
--- a/packages/components/src/ModalOld.tsx
+++ /dev/null
@@ -1,97 +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"
-
-  return (
-    <>
-      {show && (
-        <div
-          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"
-        >
-          <div className="relative p-4 w-full max-w-4xl 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">
-                  {functionCallSuccess ? "Success!!" : "Error!"}
-                </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"
-                  onClick={() => setShow(false)}
-                >
-                  <svg
-                    className="w-3 h-3"
-                    aria-hidden="true"
-                    xmlns="http://www.w3.org/2000/svg"
-                    fill="none"
-                    viewBox="0 0 14 14"
-                  >
-                    <path
-                      stroke="currentColor"
-                      strokeLinecap="round"
-                      strokeLinejoin="round"
-                      strokeWidth="2"
-                      d="m1 1 6 6m0 0 6 6M7 7l6-6M7 7l-6 6"
-                    />
-                  </svg>
-                  <span className="sr-only">Close modal</span>
-                </button>
-              </div>
-              <div className="p-4 md:p-5 space-y-4">
-                {functionResult?.res && (
-                  <>
-                    <p className="text-base leading-relaxed text-gray-500 dark:text-gray-400">
-                      Data returned:
-                    </p>
-                    <pre className="text-base leading-relaxed text-gray-500 dark:text-gray-400">
-                      {functionResult.res.toString()}
-                    </pre>
-                  </>
-                )}
-                {typeof functionResult === "object" && functionResult && functionResult._rev && (
-                  <p className="text-base leading-relaxed text-gray-500 dark:text-gray-400">
-                    {"Check the latest state of your smart object by clicking the link below"}
-                  </p>
-                )}
-                {typeof functionResult === "string" && (
-                  <p className="text-base leading-relaxed text-gray-500 dark:text-gray-400">
-                    {functionResult}
-                  </p>
-                )}
-                <pre className="text-base leading-relaxed text-gray-500 dark:text-gray-400">
-                  {typeof functionResult === "object" &&
-                    !Array.isArray(functionResult) &&
-                    functionResult._rev && (
-                      <>
-                        <Link
-                          to={`/${getType()}/${functionResult._rev}`}
-                          className="font-medium text-blue-600 dark:text-blue-500 hover:underline"
-                          onClick={() => {
-                            navigate(`/${getType()}/${functionResult._rev}`)
-                            window.location.reload()
-                          }}
-                        >
-                          {functionResult._rev}
-                        </Link>
-                      </>
-                    )}
-                </pre>
-                {customElement ? customElement : <></>}
-              </div>
-            </div>
-          </div>
-        </div>
-      )}
-    </>
-  )
-}
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<any | null>(null)
   const [formState, setFormState] = useState<any>({})
   const [functionsExist, setFunctionsExist] = useState(false)
-  const [show, setShow] = useState(false)
   const [functionResult, setFunctionResult] = useState<any>({})
   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() {
 
         <MetaData smartObject={smartObject} />
       </div>
-      <ModalOld
-        show={show}
-        setShow={setShow}
-        functionResult={functionResult}
-        functionCallSuccess={functionCallSuccess}
-      ></ModalOld>
+      <Modal.Component
+        title={modalTitle}
+        content={FunctionResultModalContent}
+        contentData={{ functionResult }}
+        id={modalId}
+      />
     </>
   )
 }
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 (
+    <div>
+      <div className="p-4 md:p-5 space-y-4">
+        {functionResult?.res && (
+          <>
+            <p className="text-base leading-relaxed text-gray-500 dark:text-gray-400">
+              Data returned:
+            </p>
+            <pre className="text-base leading-relaxed text-gray-500 dark:text-gray-400">
+              {functionResult.res.toString()}
+            </pre>
+          </>
+        )}
+        {typeof functionResult === "object" && functionResult && functionResult._rev && (
+          <p className="text-base leading-relaxed text-gray-500 dark:text-gray-400">
+            {"Check the latest state of your smart object by clicking the link below"}
+          </p>
+        )}
+        {typeof functionResult === "string" && (
+          <p className="text-base leading-relaxed text-gray-500 dark:text-gray-400">
+            {functionResult}
+          </p>
+        )}
+        <pre className="text-base leading-relaxed text-gray-500 dark:text-gray-400">
+          {typeof functionResult === "object" &&
+            !Array.isArray(functionResult) &&
+            functionResult._rev && (
+              <>
+                <Link
+                  to={`/${getType()}/${functionResult._rev}`}
+                  className="font-medium text-blue-600 dark:text-blue-500 hover:underline"
+                  onClick={() => {
+                    navigate(`/${getType()}/${functionResult._rev}`)
+                    window.location.reload()
+                  }}
+                >
+                  smart object
+                </Link>
+              </>
+            )}
+        </pre>
+      </div>
+    </div>
+  )
+}
diff --git a/packages/components/src/index.tsx b/packages/components/src/index.tsx
index 26adcebda..683c12826 100644
--- a/packages/components/src/index.tsx
+++ b/packages/components/src/index.tsx
@@ -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"
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/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<HTMLInputElement>(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/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<number>(0)
+  const [chain, setChain] = useState<string>(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) => {
         />
       </h6>
 
-      <p className="mb-4 font-mono text-xs text-gray-500 dark:text-gray-400">{balance / 1e8} LTC</p>
+      <p className="mb-4 font-mono text-xs text-gray-500 dark:text-gray-400">{balance / 1e8} {chain} </p>
     </div>
   )
 }
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<any>(Auth.getComputer())
-  const [show, setShow] = useState(false)
   const [functionResult, setFunctionResult] = useState<any>({})
   const [functionCallSuccess, setFunctionCallSuccess] = useState(false)
   const [exampleCode, setExampleCode] = useState<string>("")
   const [exampleExpression, setExampleExpresion] = useState<string>("")
   const [exampleModule, setExampleModule] = useState<string>("")
   const [exampleVars, setExampleVars] = useState<any[]>([])
+  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 = () => {
 
         <Examples loadExamples={loadExamples} clearExamples={clearExamples} />
       </div>
-      <ModalOld
-        show={show}
-        setShow={setShow}
-        functionResult={functionResult}
-        functionCallSuccess={functionCallSuccess}
-      ></ModalOld>
+      <Modal.Component
+        title={modalTitle}
+        content={FunctionResultModalContent}
+        contentData={{ functionResult }}
+        id={modalId}
+      />
     </>
   )
 }
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)
   }
 }`
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)
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
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 (
-      <div className="p-8 mt-16 max-w-screen-md mx-auto">
-        <h2 className="text-4xl mb-8 text-center font-bold dark:text-white">TBC Wallet</h2>
-        <Auth.LoginForm />
-      </div>
+      <UtilsContext.UtilsProvider>
+        <div className="p-8 mt-16 max-w-screen-md mx-auto">
+          <h2 className="text-4xl mb-8 text-center font-bold dark:text-white">TBC Wallet</h2>
+          <Auth.LoginForm />
+        </div>
+      </UtilsContext.UtilsProvider>
     )
 
   return (