diff --git a/packages/components/built/Auth.js b/packages/components/built/Auth.js index e8ce867f4..689043e56 100644 --- a/packages/components/built/Auth.js +++ b/packages/components/built/Auth.js @@ -50,7 +50,7 @@ function getUrl(chain, network) { var index = "REACT_APP_".concat(chain.toUpperCase(), "_").concat(network.toUpperCase(), "_URL"); var url = process.env[index]; if (typeof url === "undefined") - throw new Error("Cannot find url"); + throw new Error("Cannot find a url for ".concat(chain.toUpperCase(), " ").concat(network.toUpperCase(), ", please provide a variable \"REACT_APP_").concat(chain.toUpperCase(), "_").concat(network.toUpperCase(), "_URL\" in your .env file")); return url; } function defaultConfiguration() { diff --git a/packages/components/built/Gallery.js b/packages/components/built/Gallery.js index 603d028ab..74b0a34a7 100644 --- a/packages/components/built/Gallery.js +++ b/packages/components/built/Gallery.js @@ -107,7 +107,8 @@ export default function WithPagination(_a) { var _b = useState(0), pageNum = _b[0], setPageNum = _b[1]; var _c = useState(true), isNextAvailable = _c[0], setIsNextAvailable = _c[1]; var _d = useState(pageNum > 0), isPrevAvailable = _d[0], setIsPrevAvailable = _d[1]; - var _e = useState([]), revs = _e[0], setRevs = _e[1]; + var _e = useState(false), showNoAsset = _e[0], setShowNoAsset = _e[1]; + var _f = useState([]), revs = _f[0], setRevs = _f[1]; var location = useLocation(); var pubKey = publicKey || new URLSearchParams(location.search).get("public-key"); useEffect(function () { @@ -133,6 +134,9 @@ export default function WithPagination(_a) { queryRevs = _a.sent(); setIsNextAvailable(queryRevs.length > contractsPerPage); setRevs(queryRevs); + if (pageNum === 0 && (queryRevs === null || queryRevs === void 0 ? void 0 : queryRevs.length) === 0) { + setShowNoAsset(true); + } return [3 /*break*/, 4]; case 3: error_1 = _a.sent(); @@ -163,7 +167,7 @@ export default function WithPagination(_a) { return [2 /*return*/]; }); }); }; - return (_jsxs("div", __assign({ className: "relative sm:rounded-lg pt-4" }, { children: [_jsx(FromRevs, { revs: revs, computer: computer }), !(pageNum === 0 && revs && revs.length === 0) && (_jsx(Pagination, { revs: revs, isPrevAvailable: isPrevAvailable, handlePrev: handlePrev, isNextAvailable: isNextAvailable, handleNext: handleNext }))] }))); + return (_jsxs("div", __assign({ className: "relative sm:rounded-lg pt-4 w-full" }, { children: [_jsx(FromRevs, { revs: revs, computer: computer }), !(pageNum === 0 && revs && revs.length === 0) && (_jsx(Pagination, { revs: revs, isPrevAvailable: isPrevAvailable, handlePrev: handlePrev, isNextAvailable: isNextAvailable, handleNext: handleNext })), pageNum === 0 && revs && revs.length === 0 && showNoAsset && (_jsx("h1", __assign({ className: "w-full mb-4 text-2xl font-extrabold leading-none tracking-tight text-gray-900 dark:text-white text-center mx-auto" }, { children: "No Assets" })))] }))); } export var Gallery = { FromRevs: FromRevs, diff --git a/packages/components/built/SmartObject.d.ts b/packages/components/built/SmartObject.d.ts index f67741e71..ed5f88080 100644 --- a/packages/components/built/SmartObject.d.ts +++ b/packages/components/built/SmartObject.d.ts @@ -1,7 +1,4 @@ -export declare const getErrorMessage: (error: any) => string; export declare const getFnParamNames: (fn: string) => string[]; -export declare const getValueForType: (type: string, stringValue: string) => string | number | true | null | undefined; -export declare const TypeSelectionDropdown: ({ id, onSelectMethod, dropdownList, selectedType }: any) => import("react/jsx-runtime").JSX.Element; declare function Component(): import("react/jsx-runtime").JSX.Element; export declare const SmartObject: { Component: typeof Component; diff --git a/packages/components/built/SmartObject.js b/packages/components/built/SmartObject.js index faaedbfd3..6593bfbb5 100644 --- a/packages/components/built/SmartObject.js +++ b/packages/components/built/SmartObject.js @@ -45,85 +45,22 @@ var __generator = (this && this.__generator) || function (thisArg, body) { if (op[0] & 5) throw op[1]; return { value: op[0] ? op[1] : void 0, done: true }; } }; -import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime"; +import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime"; import { useEffect, useState } from "react"; -import { Dropdown, initFlowbite, } from "flowbite"; import { Link, useLocation, useNavigate, useParams } from "react-router-dom"; -import { capitalizeFirstLetter, isValidRev, sleep, toObject } from "./common/utils"; +import { capitalizeFirstLetter, toObject } from "./common/utils"; import reactStringReplace from "react-string-replace"; import { Auth } from "./Auth"; import { Card } from "./Card"; import { Modal } from "./Modal"; import { FunctionResultModalContent } from "./common/SmartCallExecutionResult"; +import { SmartObjectFunction } from "./SmartObjectFunction"; 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) === - "mandatory-script-verify-flag-failed (Operation not valid with the current stack size)") { - return "You are not authorized to make changes to this smart object"; - } - else if ((_d = (_c = error === null || error === void 0 ? void 0 : error.response) === null || _c === void 0 ? void 0 : _c.data) === null || _d === void 0 ? void 0 : _d.error) { - return (_f = (_e = error === null || error === void 0 ? void 0 : error.response) === null || _e === void 0 ? void 0 : _e.data) === null || _f === void 0 ? void 0 : _f.error; - } - else { - return error.message ? error.message : "Error occurred"; - } -}; export var getFnParamNames = function (fn) { var match = fn.toString().match(/\(.*?\)/); return match ? match[0].replace(/[()]/gi, "").replace(/\s/gi, "").split(",") : []; }; -export var getValueForType = function (type, stringValue) { - switch (type) { - case "number": - return Number(stringValue); - case "string": - return stringValue; - case "boolean": - return true; // make this dynamic - case "undefined": - return undefined; - case "null": - return null; - case "object": - return stringValue; - default: - return Number(stringValue); - } -}; -export var TypeSelectionDropdown = function (_a) { - var id = _a.id, onSelectMethod = _a.onSelectMethod, dropdownList = _a.dropdownList, selectedType = _a.selectedType; - var _b = useState(), dropDown = _b[0], setDropdown = _b[1]; - var _c = useState(selectedType ? selectedType : "Type"), type = _c[0], setType = _c[1]; - var dropdownSelectionList = useState(dropdownList)[0]; - useEffect(function () { - initFlowbite(); - var $targetEl = document.getElementById("dropdownMenu".concat(id)); - var $triggerEl = document.getElementById("dropdownButton".concat(id)); - var options = { - placement: "bottom", - triggerType: "click", - offsetSkidding: 0, - offsetDistance: 10, - delay: 300, - }; - var instanceOptions = { - id: "dropdownMenu".concat(id), - override: true, - }; - setDropdown(new Dropdown($targetEl, $triggerEl, options, instanceOptions)); - }, [id]); - var handleClick = function (type) { - setType(type); - onSelectMethod(type); - if (dropDown) - dropDown.hide(); - }; - return (_jsxs(_Fragment, { children: [_jsxs("button", __assign({ id: "dropdownButton".concat(id), "data-dropdown-toggle": "dropdownMenu".concat(id), className: "flex justify-between w-32 text-gray-900 bg-white border border-gray-300 focus:outline-none hover:bg-gray-100 focus:ring-4 focus:ring-gray-200 font-medium rounded-lg text-sm px-5 py-2.5 text-center inline-flex items-center dark:bg-gray-800 dark:text-white dark:border-gray-600 dark:hover:bg-gray-700 dark:hover:border-gray-600 dark:focus:ring-gray-700", type: "button" }, { children: [type, _jsx("svg", __assign({ className: "w-2.5 h-2.5", "aria-hidden": "true", xmlns: "http://www.w3.org/2000/svg", fill: "none", viewBox: "0 0 10 6" }, { children: _jsx("path", { stroke: "currentColor", strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: "2", d: "m1 1 4 4 4-4" }) }))] })), _jsx("div", __assign({ id: "dropdownMenu".concat(id), className: "z-10 hidden bg-white divide-y divide-gray-100 rounded-lg shadow w-44 dark:bg-gray-700" }, { children: _jsx("ul", __assign({ className: "py-2 text-sm text-gray-700 dark:text-gray-200", "aria-labelledby": "dropdownButton".concat(id) }, { children: dropdownSelectionList.map(function (option, index) { return (_jsx("li", { children: _jsx("span", __assign({ onClick: function () { - handleClick(option); - }, className: "block px-4 py-2 hover:bg-gray-100 dark:hover:bg-gray-600 dark:hover:text-white" }, { children: option })) }, index)); }) })) }))] })); -}; function ObjectValueCard(_a) { var content = _a.content; var isRev = /([0-9a-fA-F]{64}:[0-9]+)/g; @@ -145,21 +82,6 @@ var SmartObjectValues = function (_a) { return (_jsxs("div", { children: [_jsx("h3", __assign({ className: "mt-2 text-xl font-bold dark:text-white" }, { children: capitalizeFirstLetter(key) })), _jsx(ObjectValueCard, { content: toObject(value) })] }, i)); }) })); }; -var Functions = function (_a) { - var smartObject = _a.smartObject, functionsExist = _a.functionsExist, formState = _a.formState, updateFormValue = _a.updateFormValue, updateTypes = _a.updateTypes, handleSmartObjectMethod = _a.handleSmartObjectMethod, options = _a.options; - if (!functionsExist) - return _jsx(_Fragment, {}); - return (_jsxs(_Fragment, { children: [_jsx("h2", __assign({ className: "mb-2 text-4xl font-bold dark:text-white" }, { children: "Functions" })), Object.getOwnPropertyNames(Object.getPrototypeOf(smartObject)) - .filter(function (key) { - return key !== "constructor" && typeof Object.getPrototypeOf(smartObject)[key] === "function"; - }) - .map(function (key, fnIndex) { - var paramList = getFnParamNames(Object.getPrototypeOf(smartObject)[key]); - return (_jsxs("div", __assign({ className: "mt-6 mb-6" }, { children: [_jsx("h3", __assign({ className: "mt-2 text-xl font-bold dark:text-white" }, { children: key })), _jsxs("form", __assign({ id: "fn-index-".concat(fnIndex) }, { children: [paramList.map(function (paramName, paramIndex) { return (_jsxs("div", __assign({ className: "mb-4" }, { children: [_jsx("div", __assign({ className: "mb-2" }, { children: _jsx("label", __assign({ htmlFor: "".concat(key, "-").concat(paramName), className: "block mb-2 text-sm font-medium text-gray-900 dark:text-white" }, { children: paramName })) })), _jsxs("div", __assign({ className: "flex items-center space-x-4" }, { children: [_jsx("input", { type: "text", id: "".concat(key, "-").concat(paramName), value: formState["".concat(key, "-").concat(paramName)], onChange: function (e) { return updateFormValue(e, "".concat(key, "-").concat(paramName)); }, className: "bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg focus:ring-blue-500 focus:border-blue-500 block w-full p-2.5 dark:bg-gray-700 dark:border-gray-600 dark:placeholder-gray-400 dark:text-white dark:focus:ring-blue-500 dark:focus:border-blue-500", placeholder: "Value", required: true }), _jsx(TypeSelectionDropdown, { id: "".concat(key).concat(paramName), dropdownList: options, onSelectMethod: function (option) { - return updateTypes(option, "".concat(key, "-").concat(paramName)); - } })] }))] }), paramIndex)); }), _jsx("button", __assign({ className: "mr-8 text-white bg-blue-700 hover:bg-blue-800 focus:outline-none focus:ring-4 focus:ring-blue-300 font-medium rounded-md text-sm px-5 py-2.5 text-center dark:bg-blue-600 dark:hover:bg-blue-700 dark:focus:ring-blue-800", onClick: function (evt) { return handleSmartObjectMethod(evt, smartObject, key, paramList); } }, { children: "Call Function" }))] }))] }), fnIndex)); - })] })); -}; var revToId = function (rev) { return rev === null || rev === void 0 ? void 0 : rev.split(":")[0]; }; var MetaData = function (_a) { var smartObject = _a.smartObject; @@ -173,14 +95,11 @@ function Component() { var rev = useState(params.rev || "")[0]; var computer = useState(Auth.getComputer())[0]; 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({}), functionResult = _d[0], setFunctionResult = _d[1]; - var _e = useState(false), functionCallSuccess = _e[0], setFunctionCallSuccess = _e[1]; + var _b = useState(false), functionsExist = _b[0], setFunctionsExist = _b[1]; + var _c = useState({}), functionResult = _c[0], setFunctionResult = _c[1]; var options = ["object", "string", "number", "bigint", "boolean", "undefined", "symbol"]; - var _f = useState(""), modalTitle = _f[0], setModalTitle = _f[1]; + var _d = useState(""), modalTitle = _d[0], setModalTitle = _d[1]; var setShow = function (flag) { - functionCallSuccess ? setModalTitle("Sucess!") : setModalTitle("Error!"); flag ? Modal.get(modalId).show() : Modal.get(modalId).hide(); }; useEffect(function () { @@ -220,77 +139,8 @@ function Component() { } setFunctionsExist(funcExist); }, [smartObject]); - var handleSmartObjectMethod = function (event, smartObject, fnName, params) { return __awaiter(_this, void 0, void 0, function () { - var revMap_1, tx, res, error_2; - return __generator(this, function (_a) { - switch (_a.label) { - case 0: - event.preventDefault(); - _a.label = 1; - case 1: - _a.trys.push([1, 6, , 7]); - revMap_1 = {}; - params.forEach(function (param) { - var key = "".concat(fnName, "-").concat(param); - var paramValue = getValueForType(formState["".concat(key, "--types")], formState[key]); - if (isValidRev(paramValue)) { - revMap_1[param] = paramValue; - } - }); - return [4 /*yield*/, computer.encode({ - exp: "smartObject.".concat(fnName, "(").concat(params.map(function (param) { - var key = "".concat(fnName, "-").concat(param); - var paramValue = getValueForType(formState["".concat(key, "--types")], formState[key]); - return isValidRev(paramValue) - ? param - : typeof paramValue === "string" - ? "'".concat(paramValue, "'") - : paramValue; - }), ")"), - env: __assign({ smartObject: smartObject._rev }, revMap_1), - // @ts-ignore - fund: true, - sign: true, - })]; - case 2: - tx = (_a.sent()).tx; - return [4 /*yield*/, computer.broadcast(tx)]; - case 3: - _a.sent(); - return [4 /*yield*/, sleep(1000)]; - case 4: - _a.sent(); - return [4 /*yield*/, computer.query({ ids: [smartObject._id] })]; - case 5: - res = _a.sent(); - setFunctionResult({ _rev: res[0] }); - setFunctionCallSuccess(true); - setShow(true); - return [3 /*break*/, 7]; - case 6: - error_2 = _a.sent(); - setFunctionResult(getErrorMessage(error_2)); - setFunctionCallSuccess(false); - setShow(true); - return [3 /*break*/, 7]; - case 7: return [2 /*return*/]; - } - }); - }); }; - var updateFormValue = function (e, key) { - e.preventDefault(); - console.log(e, key); - var value = __assign({}, formState); - value[key] = e.target.value; - setFormState(value); - }; - var updateTypes = function (option, key) { - var value = __assign({}, formState); - value["".concat(key, "--types")] = option; - 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(Modal.Component, { title: modalTitle, content: FunctionResultModalContent, contentData: { functionResult: functionResult }, id: modalId })] })); + var _e = rev.split(":"), txId = _e[0], outNum = _e[1]; + return (_jsxs(_Fragment, { children: [_jsxs("div", { children: [_jsx("h1", __assign({ className: "mb-2 text-5xl font-extrabold dark:text-white" }, { children: "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(SmartObjectFunction, { computer: computer, smartObject: smartObject, functionsExist: functionsExist, options: options, setFunctionResult: setFunctionResult, setShow: setShow, setModalTitle: setModalTitle }), _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/SmartObjectFunction.d.ts b/packages/components/built/SmartObjectFunction.d.ts new file mode 100644 index 000000000..0361ca1f2 --- /dev/null +++ b/packages/components/built/SmartObjectFunction.d.ts @@ -0,0 +1,4 @@ +export declare const getErrorMessage: (error: any) => string; +export declare const getFnParamNames: (fn: string) => string[]; +export declare const getValueForType: (type: string, stringValue: string) => string | number | true | null | undefined; +export declare const SmartObjectFunction: ({ computer, smartObject, functionsExist, options, setFunctionResult, setShow, setModalTitle, }: any) => import("react/jsx-runtime").JSX.Element; diff --git a/packages/components/built/SmartObjectFunction.js b/packages/components/built/SmartObjectFunction.js new file mode 100644 index 000000000..deee49cce --- /dev/null +++ b/packages/components/built/SmartObjectFunction.js @@ -0,0 +1,170 @@ +var __assign = (this && this.__assign) || function () { + __assign = Object.assign || function(t) { + for (var s, i = 1, n = arguments.length; i < n; i++) { + s = arguments[i]; + for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p)) + t[p] = s[p]; + } + return t; + }; + return __assign.apply(this, arguments); +}; +var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, generator) { + function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); } + return new (P || (P = Promise))(function (resolve, reject) { + function fulfilled(value) { try { step(generator.next(value)); } catch (e) { reject(e); } } + function rejected(value) { try { step(generator["throw"](value)); } catch (e) { reject(e); } } + function step(result) { result.done ? resolve(result.value) : adopt(result.value).then(fulfilled, rejected); } + step((generator = generator.apply(thisArg, _arguments || [])).next()); + }); +}; +var __generator = (this && this.__generator) || function (thisArg, body) { + var _ = { label: 0, sent: function() { if (t[0] & 1) throw t[1]; return t[1]; }, trys: [], ops: [] }, f, y, t, g; + return g = { next: verb(0), "throw": verb(1), "return": verb(2) }, typeof Symbol === "function" && (g[Symbol.iterator] = function() { return this; }), g; + function verb(n) { return function (v) { return step([n, v]); }; } + function step(op) { + if (f) throw new TypeError("Generator is already executing."); + while (g && (g = 0, op[0] && (_ = 0)), _) try { + if (f = 1, y && (t = op[0] & 2 ? y["return"] : op[0] ? y["throw"] || ((t = y["return"]) && t.call(y), 0) : y.next) && !(t = t.call(y, op[1])).done) return t; + if (y = 0, t) op = [op[0] & 2, t.value]; + switch (op[0]) { + case 0: case 1: t = op; break; + case 4: _.label++; return { value: op[1], done: false }; + case 5: _.label++; y = op[1]; op = [0]; continue; + case 7: op = _.ops.pop(); _.trys.pop(); continue; + default: + if (!(t = _.trys, t = t.length > 0 && t[t.length - 1]) && (op[0] === 6 || op[0] === 2)) { _ = 0; continue; } + if (op[0] === 3 && (!t || (op[1] > t[0] && op[1] < t[3]))) { _.label = op[1]; break; } + if (op[0] === 6 && _.label < t[1]) { _.label = t[1]; t = op; break; } + if (t && _.label < t[2]) { _.label = t[2]; _.ops.push(op); break; } + if (t[2]) _.ops.pop(); + _.trys.pop(); continue; + } + op = body.call(thisArg, _); + } catch (e) { op = [6, e]; y = 0; } finally { f = t = 0; } + if (op[0] & 5) throw op[1]; return { value: op[0] ? op[1] : void 0, done: true }; + } +}; +import { Fragment as _Fragment, jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime"; +import { useState } from "react"; +import { TypeSelectionDropdown } from "./common/TypeSelectionDropdown"; +import { isValidRev, sleep } from "./common/utils"; +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) === + "mandatory-script-verify-flag-failed (Operation not valid with the current stack size)") { + return "You are not authorized to make changes to this smart object"; + } + else if ((_d = (_c = error === null || error === void 0 ? void 0 : error.response) === null || _c === void 0 ? void 0 : _c.data) === null || _d === void 0 ? void 0 : _d.error) { + return (_f = (_e = error === null || error === void 0 ? void 0 : error.response) === null || _e === void 0 ? void 0 : _e.data) === null || _f === void 0 ? void 0 : _f.error; + } + else { + return error.message ? error.message : "Error occurred"; + } +}; +export var getFnParamNames = function (fn) { + var match = fn.toString().match(/\(.*?\)/); + return match ? match[0].replace(/[()]/gi, "").replace(/\s/gi, "").split(",") : []; +}; +export var getValueForType = function (type, stringValue) { + switch (type) { + case "number": + return Number(stringValue); + case "string": + return stringValue; + case "boolean": + return true; // make this dynamic + case "undefined": + return undefined; + case "null": + return null; + case "object": + return stringValue; + default: + return Number(stringValue); + } +}; +export var SmartObjectFunction = function (_a) { + var computer = _a.computer, smartObject = _a.smartObject, functionsExist = _a.functionsExist, options = _a.options, setFunctionResult = _a.setFunctionResult, setShow = _a.setShow, setModalTitle = _a.setModalTitle; + var _b = useState({}), formState = _b[0], setFormState = _b[1]; + var handleSmartObjectMethod = function (event, smartObject, fnName, params) { return __awaiter(void 0, void 0, void 0, function () { + var revMap_1, tx, res, error_1; + return __generator(this, function (_a) { + switch (_a.label) { + case 0: + event.preventDefault(); + _a.label = 1; + case 1: + _a.trys.push([1, 6, , 7]); + revMap_1 = {}; + params.forEach(function (param) { + var key = "".concat(fnName, "-").concat(param); + var paramValue = getValueForType(formState["".concat(key, "--types")], formState[key]); + if (isValidRev(paramValue)) { + revMap_1[param] = paramValue; + } + }); + return [4 /*yield*/, computer.encode({ + exp: "smartObject.".concat(fnName, "(").concat(params.map(function (param) { + var key = "".concat(fnName, "-").concat(param); + var paramValue = getValueForType(formState["".concat(key, "--types")], formState[key]); + return isValidRev(paramValue) + ? param + : typeof paramValue === "string" + ? "'".concat(paramValue, "'") + : paramValue; + }), ")"), + env: __assign({ smartObject: smartObject._rev }, revMap_1), + // @ts-ignore + fund: true, + sign: true, + })]; + case 2: + tx = (_a.sent()).tx; + return [4 /*yield*/, computer.broadcast(tx)]; + case 3: + _a.sent(); + return [4 /*yield*/, sleep(1000)]; + case 4: + _a.sent(); + return [4 /*yield*/, computer.query({ ids: [smartObject._id] })]; + case 5: + res = _a.sent(); + setFunctionResult({ _rev: res[0] }); + setModalTitle("Success!"); + setShow(true); + return [3 /*break*/, 7]; + case 6: + error_1 = _a.sent(); + setFunctionResult(getErrorMessage(error_1)); + setModalTitle("Error!"); + setShow(true); + return [3 /*break*/, 7]; + case 7: return [2 /*return*/]; + } + }); + }); }; + var updateFormValue = function (e, key) { + e.preventDefault(); + var value = __assign({}, formState); + value[key] = e.target.value; + setFormState(value); + }; + var updateTypes = function (option, key) { + var value = __assign({}, formState); + value["".concat(key, "--types")] = option; + setFormState(value); + }; + if (!functionsExist) + return _jsx(_Fragment, {}); + return (_jsxs(_Fragment, { children: [_jsx("h2", __assign({ className: "mb-2 text-4xl font-bold dark:text-white" }, { children: "Functions" })), Object.getOwnPropertyNames(Object.getPrototypeOf(smartObject)) + .filter(function (key) { + return key !== "constructor" && typeof Object.getPrototypeOf(smartObject)[key] === "function"; + }) + .map(function (key, fnIndex) { + var paramList = getFnParamNames(Object.getPrototypeOf(smartObject)[key]); + return (_jsxs("div", __assign({ className: "mt-6 mb-6" }, { children: [_jsx("h3", __assign({ className: "mt-2 text-xl font-bold dark:text-white" }, { children: key })), _jsxs("form", __assign({ id: "fn-index-".concat(fnIndex) }, { children: [paramList.map(function (paramName, paramIndex) { return (_jsxs("div", __assign({ className: "mb-4" }, { children: [_jsx("div", __assign({ className: "mb-2" }, { children: _jsx("label", __assign({ htmlFor: "".concat(key, "-").concat(paramName), className: "block mb-2 text-sm font-medium text-gray-900 dark:text-white" }, { children: paramName })) })), _jsxs("div", __assign({ className: "flex items-center space-x-4" }, { children: [_jsx("input", { type: "text", id: "".concat(key, "-").concat(paramName), value: formState["".concat(key, "-").concat(paramName)], onChange: function (e) { return updateFormValue(e, "".concat(key, "-").concat(paramName)); }, className: "bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg focus:ring-blue-500 focus:border-blue-500 block w-full p-2.5 dark:bg-gray-700 dark:border-gray-600 dark:placeholder-gray-400 dark:text-white dark:focus:ring-blue-500 dark:focus:border-blue-500", placeholder: "Value", required: true }), _jsx(TypeSelectionDropdown, { id: "".concat(key).concat(paramName), dropdownList: options, onSelectMethod: function (option) { + return updateTypes(option, "".concat(key, "-").concat(paramName)); + } })] }))] }), paramIndex)); }), _jsx("button", __assign({ className: "mr-8 text-white bg-blue-700 hover:bg-blue-800 focus:outline-none focus:ring-4 focus:ring-blue-300 font-medium rounded-md text-sm px-5 py-2.5 text-center dark:bg-blue-600 dark:hover:bg-blue-700 dark:focus:ring-blue-800", onClick: function (evt) { return handleSmartObjectMethod(evt, smartObject, key, paramList); } }, { children: "Call Function" }))] }))] }), fnIndex)); + })] })); +}; diff --git a/packages/components/built/common/TypeSelectionDropdown.d.ts b/packages/components/built/common/TypeSelectionDropdown.d.ts new file mode 100644 index 000000000..3b256f3f5 --- /dev/null +++ b/packages/components/built/common/TypeSelectionDropdown.d.ts @@ -0,0 +1 @@ +export declare const TypeSelectionDropdown: ({ id, onSelectMethod, dropdownList, selectedType }: any) => import("react/jsx-runtime").JSX.Element; diff --git a/packages/components/built/common/TypeSelectionDropdown.js b/packages/components/built/common/TypeSelectionDropdown.js new file mode 100644 index 000000000..ebc47182c --- /dev/null +++ b/packages/components/built/common/TypeSelectionDropdown.js @@ -0,0 +1,46 @@ +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 { useEffect, useState } from "react"; +import { Dropdown, initFlowbite, } from "flowbite"; +export var TypeSelectionDropdown = function (_a) { + var id = _a.id, onSelectMethod = _a.onSelectMethod, dropdownList = _a.dropdownList, selectedType = _a.selectedType; + var _b = useState(), dropDown = _b[0], setDropdown = _b[1]; + var _c = useState(selectedType ? selectedType : "Type"), type = _c[0], setType = _c[1]; + var dropdownSelectionList = useState(dropdownList)[0]; + useEffect(function () { + initFlowbite(); + var $targetEl = document.getElementById("dropdownMenu".concat(id)); + var $triggerEl = document.getElementById("dropdownButton".concat(id)); + var options = { + placement: "bottom", + triggerType: "click", + offsetSkidding: 0, + offsetDistance: 10, + delay: 300, + }; + var instanceOptions = { + id: "dropdownMenu".concat(id), + override: true, + }; + setDropdown(new Dropdown($targetEl, $triggerEl, options, instanceOptions)); + }, [id]); + var handleClick = function (type) { + setType(type); + onSelectMethod(type); + if (dropDown) + dropDown.hide(); + }; + return (_jsxs(_Fragment, { children: [_jsxs("button", __assign({ id: "dropdownButton".concat(id), "data-dropdown-toggle": "dropdownMenu".concat(id), className: "flex justify-between w-32 text-gray-900 bg-white border border-gray-300 focus:outline-none hover:bg-gray-100 focus:ring-4 focus:ring-gray-200 font-medium rounded-lg text-sm px-5 py-2.5 text-center inline-flex items-center dark:bg-gray-800 dark:text-white dark:border-gray-600 dark:hover:bg-gray-700 dark:hover:border-gray-600 dark:focus:ring-gray-700", type: "button" }, { children: [type, _jsx("svg", __assign({ className: "w-2.5 h-2.5", "aria-hidden": "true", xmlns: "http://www.w3.org/2000/svg", fill: "none", viewBox: "0 0 10 6" }, { children: _jsx("path", { stroke: "currentColor", strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: "2", d: "m1 1 4 4 4-4" }) }))] })), _jsx("div", __assign({ id: "dropdownMenu".concat(id), className: "z-10 hidden bg-white divide-y divide-gray-100 rounded-lg shadow w-44 dark:bg-gray-700" }, { children: _jsx("ul", __assign({ className: "py-2 text-sm text-gray-700 dark:text-gray-200", "aria-labelledby": "dropdownButton".concat(id) }, { children: dropdownSelectionList.map(function (option, index) { return (_jsx("li", { children: _jsx("span", __assign({ onClick: function () { + handleClick(option); + }, className: "block px-4 py-2 hover:bg-gray-100 dark:hover:bg-gray-600 dark:hover:text-white" }, { children: option })) }, index)); }) })) }))] })); +}; diff --git a/packages/components/src/Auth.tsx b/packages/components/src/Auth.tsx index 9b4c4fe86..c6200e88d 100644 --- a/packages/components/src/Auth.tsx +++ b/packages/components/src/Auth.tsx @@ -40,7 +40,10 @@ function getPath(chain: string, network: string): string { function getUrl(chain: Chain, network: Network) { const index = `REACT_APP_${chain.toUpperCase()}_${network.toUpperCase()}_URL` const url = process.env[index] - if (typeof url === "undefined") throw new Error("Cannot find url") + if (typeof url === "undefined") + throw new Error( + `Cannot find a url for ${chain.toUpperCase()} ${network.toUpperCase()}, please provide a variable "REACT_APP_${chain.toUpperCase()}_${network.toUpperCase()}_URL" in your .env file` + ) return url } diff --git a/packages/components/src/Gallery.tsx b/packages/components/src/Gallery.tsx index 9f1220319..0eb9b8635 100644 --- a/packages/components/src/Gallery.tsx +++ b/packages/components/src/Gallery.tsx @@ -145,6 +145,7 @@ export default function WithPagination({ publicKey }: { publicKey?: string }) { const [pageNum, setPageNum] = useState(0) const [isNextAvailable, setIsNextAvailable] = useState(true) const [isPrevAvailable, setIsPrevAvailable] = useState(pageNum > 0) + const [showNoAsset, setShowNoAsset] = useState(false) const [revs, setRevs] = useState([]) const location = useLocation() const pubKey = publicKey || new URLSearchParams(location.search).get("public-key") @@ -164,6 +165,9 @@ export default function WithPagination({ publicKey }: { publicKey?: string }) { const queryRevs = await computer.query(queryParms) setIsNextAvailable(queryRevs.length > contractsPerPage) setRevs(queryRevs) + if (pageNum === 0 && queryRevs?.length === 0) { + setShowNoAsset(true) + } } catch (error) { // todo: forward to error page here console.log("Error loading revisions", error) @@ -185,7 +189,7 @@ export default function WithPagination({ publicKey }: { publicKey?: string }) { } return ( -
+
{!(pageNum === 0 && revs && revs.length === 0) && ( )} + {pageNum === 0 && revs && revs.length === 0 && showNoAsset && ( +

+ No Assets +

+ )}
) } diff --git a/packages/components/src/SmartObject.tsx b/packages/components/src/SmartObject.tsx index ec9275597..3ebf273fb 100644 --- a/packages/components/src/SmartObject.tsx +++ b/packages/components/src/SmartObject.tsx @@ -13,128 +13,17 @@ import { Auth } from "./Auth" import { Card } from "./Card" import { Modal } from "./Modal" import { FunctionResultModalContent } from "./common/SmartCallExecutionResult" +import { TypeSelectionDropdown } from "./common/TypeSelectionDropdown" +import { SmartObjectFunction } from "./SmartObjectFunction" const keywords = ["_id", "_rev", "_owners", "_root", "_amount"] const modalId = "smart-object-info-modal" -export const getErrorMessage = (error: any): string => { - if ( - error?.response?.data?.error === - "mandatory-script-verify-flag-failed (Operation not valid with the current stack size)" - ) { - return "You are not authorized to make changes to this smart object" - } else if (error?.response?.data?.error) { - return error?.response?.data?.error - } else { - return error.message ? error.message : "Error occurred" - } -} - export const getFnParamNames = function (fn: string) { const match = fn.toString().match(/\(.*?\)/) return match ? match[0].replace(/[()]/gi, "").replace(/\s/gi, "").split(",") : [] } -export const getValueForType = (type: string, stringValue: string) => { - switch (type) { - case "number": - return Number(stringValue) - case "string": - return stringValue - case "boolean": - return true // make this dynamic - case "undefined": - return undefined - case "null": - return null - case "object": - return stringValue - default: - return Number(stringValue) - } -} - -export const TypeSelectionDropdown = ({ id, onSelectMethod, dropdownList, selectedType }: any) => { - const [dropDown, setDropdown] = useState() - const [type, setType] = useState(selectedType ? selectedType : "Type") - const [dropdownSelectionList] = useState(dropdownList) - - useEffect(() => { - initFlowbite() - const $targetEl: HTMLElement = document.getElementById(`dropdownMenu${id}`) as HTMLElement - const $triggerEl: HTMLElement = document.getElementById(`dropdownButton${id}`) as HTMLElement - const options: DropdownOptions = { - placement: "bottom", - triggerType: "click", - offsetSkidding: 0, - offsetDistance: 10, - delay: 300, - } - const instanceOptions: InstanceOptions = { - id: `dropdownMenu${id}`, - override: true, - } - setDropdown(new Dropdown($targetEl, $triggerEl, options, instanceOptions)) - }, [id]) - - const handleClick = (type: string) => { - setType(type) - onSelectMethod(type) - if (dropDown) dropDown.hide() - } - - return ( - <> - - -
-
    - {dropdownSelectionList.map((option: string, index: number) => ( -
  • - { - handleClick(option) - }} - className="block px-4 py-2 hover:bg-gray-100 dark:hover:bg-gray-600 dark:hover:text-white" - > - {option} - -
    • - ))} -
-
- - ) -} - function ObjectValueCard({ content }: { content: string }) { const isRev = /([0-9a-fA-F]{64}:[0-9]+)/g const revLink = (rev: string, i: number) => ( @@ -167,74 +56,6 @@ const SmartObjectValues = ({ smartObject }: any) => { ) } -const Functions = ({ - smartObject, - functionsExist, - formState, - updateFormValue, - updateTypes, - handleSmartObjectMethod, - options, -}: any) => { - if (!functionsExist) return <> - return ( - <> -

Functions

- {Object.getOwnPropertyNames(Object.getPrototypeOf(smartObject)) - .filter( - (key) => - key !== "constructor" && typeof Object.getPrototypeOf(smartObject)[key] === "function" - ) - .map((key, fnIndex) => { - const paramList = getFnParamNames(Object.getPrototypeOf(smartObject)[key]) - return ( -
-

{key}

-
- {paramList.map((paramName, paramIndex) => ( -
-
- -
-
- updateFormValue(e, `${key}-${paramName}`)} - className="bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg focus:ring-blue-500 focus:border-blue-500 block w-full p-2.5 dark:bg-gray-700 dark:border-gray-600 dark:placeholder-gray-400 dark:text-white dark:focus:ring-blue-500 dark:focus:border-blue-500" - placeholder="Value" - required - /> - - updateTypes(option, `${key}-${paramName}`) - } - /> -
-
- ))} - -
-
- ) - })} - - ) -} - const revToId = (rev: string) => rev?.split(":")[0] const MetaData = ({ smartObject }: any) => { @@ -350,16 +171,13 @@ function Component() { const [rev] = useState(params.rev || "") const [computer] = useState(Auth.getComputer()) const [smartObject, setSmartObject] = useState(null) - const [formState, setFormState] = useState({}) const [functionsExist, setFunctionsExist] = 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() } @@ -395,68 +213,6 @@ function Component() { setFunctionsExist(funcExist) }, [smartObject]) - const handleSmartObjectMethod = async ( - event: any, - smartObject: any, - fnName: string, - params: string[] - ) => { - event.preventDefault() - try { - const revMap: any = {} - - params.forEach((param) => { - const key = `${fnName}-${param}` - const paramValue = getValueForType(formState[`${key}--types`], formState[key]) - if (isValidRev(paramValue)) { - revMap[param] = paramValue - } - }) - - // @ts-ignore - const { tx } = await computer.encode({ - exp: `smartObject.${fnName}(${params.map((param) => { - const key = `${fnName}-${param}` - const paramValue = getValueForType(formState[`${key}--types`], formState[key]) - return isValidRev(paramValue) - ? param - : typeof paramValue === "string" - ? `'${paramValue}'` - : paramValue - })})`, - env: { smartObject: smartObject._rev, ...revMap }, - // @ts-ignore - fund: true, - sign: true, - }) - - await computer.broadcast(tx) - await sleep(1000) - const res = await computer.query({ ids: [smartObject._id] }) - setFunctionResult({ _rev: res[0] }) - setFunctionCallSuccess(true) - setShow(true) - } catch (error: any) { - setFunctionResult(getErrorMessage(error)) - setFunctionCallSuccess(false) - setShow(true) - } - } - - const updateFormValue = (e: any, key: string) => { - e.preventDefault() - console.log(e, key) - const value = { ...formState } - value[key] = e.target.value - setFormState(value) - } - - const updateTypes = (option: string, key: string) => { - const value = { ...formState } - value[`${key}--types`] = option - setFormState(value) - } - const [txId, outNum] = rev.split(":") return ( @@ -477,14 +233,14 @@ function Component() { - diff --git a/packages/components/src/SmartObjectFunction.tsx b/packages/components/src/SmartObjectFunction.tsx new file mode 100644 index 000000000..ba9a547c7 --- /dev/null +++ b/packages/components/src/SmartObjectFunction.tsx @@ -0,0 +1,171 @@ +import { useState } from "react" +import { TypeSelectionDropdown } from "./common/TypeSelectionDropdown" +import { isValidRev, sleep } from "./common/utils" + +export const getErrorMessage = (error: any): string => { + if ( + error?.response?.data?.error === + "mandatory-script-verify-flag-failed (Operation not valid with the current stack size)" + ) { + return "You are not authorized to make changes to this smart object" + } else if (error?.response?.data?.error) { + return error?.response?.data?.error + } else { + return error.message ? error.message : "Error occurred" + } +} + +export const getFnParamNames = function (fn: string) { + const match = fn.toString().match(/\(.*?\)/) + return match ? match[0].replace(/[()]/gi, "").replace(/\s/gi, "").split(",") : [] +} + +export const getValueForType = (type: string, stringValue: string) => { + switch (type) { + case "number": + return Number(stringValue) + case "string": + return stringValue + case "boolean": + return true // make this dynamic + case "undefined": + return undefined + case "null": + return null + case "object": + return stringValue + default: + return Number(stringValue) + } +} + +export const SmartObjectFunction = ({ + computer, + smartObject, + functionsExist, + options, + setFunctionResult, + setShow, + setModalTitle, +}: any) => { + const [formState, setFormState] = useState({}) + + const handleSmartObjectMethod = async ( + event: any, + smartObject: any, + fnName: string, + params: string[] + ) => { + event.preventDefault() + try { + const revMap: any = {} + + params.forEach((param) => { + const key = `${fnName}-${param}` + const paramValue = getValueForType(formState[`${key}--types`], formState[key]) + if (isValidRev(paramValue)) { + revMap[param] = paramValue + } + }) + + // @ts-ignore + const { tx } = await computer.encode({ + exp: `smartObject.${fnName}(${params.map((param) => { + const key = `${fnName}-${param}` + const paramValue = getValueForType(formState[`${key}--types`], formState[key]) + return isValidRev(paramValue) + ? param + : typeof paramValue === "string" + ? `'${paramValue}'` + : paramValue + })})`, + env: { smartObject: smartObject._rev, ...revMap }, + // @ts-ignore + fund: true, + sign: true, + }) + + await computer.broadcast(tx) + await sleep(1000) + const res = await computer.query({ ids: [smartObject._id] }) + setFunctionResult({ _rev: res[0] }) + setModalTitle("Success!") + setShow(true) + } catch (error: any) { + setFunctionResult(getErrorMessage(error)) + setModalTitle("Error!") + setShow(true) + } + } + + const updateFormValue = (e: any, key: string) => { + e.preventDefault() + const value = { ...formState } + value[key] = e.target.value + setFormState(value) + } + + const updateTypes = (option: string, key: string) => { + const value = { ...formState } + value[`${key}--types`] = option + setFormState(value) + } + + if (!functionsExist) return <> + return ( + <> +

Functions

+ {Object.getOwnPropertyNames(Object.getPrototypeOf(smartObject)) + .filter( + (key) => + key !== "constructor" && typeof Object.getPrototypeOf(smartObject)[key] === "function" + ) + .map((key, fnIndex) => { + const paramList = getFnParamNames(Object.getPrototypeOf(smartObject)[key]) + return ( +
+

{key}

+
+ {paramList.map((paramName, paramIndex) => ( +
+
+ +
+
+ updateFormValue(e, `${key}-${paramName}`)} + className="bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg focus:ring-blue-500 focus:border-blue-500 block w-full p-2.5 dark:bg-gray-700 dark:border-gray-600 dark:placeholder-gray-400 dark:text-white dark:focus:ring-blue-500 dark:focus:border-blue-500" + placeholder="Value" + required + /> + + updateTypes(option, `${key}-${paramName}`) + } + /> +
+
+ ))} + +
+
+ ) + })} + + ) +} diff --git a/packages/components/src/common/TypeSelectionDropdown.tsx b/packages/components/src/common/TypeSelectionDropdown.tsx new file mode 100644 index 000000000..72f604ca4 --- /dev/null +++ b/packages/components/src/common/TypeSelectionDropdown.tsx @@ -0,0 +1,89 @@ +import { useEffect, useState } from "react" +import { + Dropdown, + DropdownInterface, + DropdownOptions, + InstanceOptions, + initFlowbite, +} from "flowbite" + +export const TypeSelectionDropdown = ({ id, onSelectMethod, dropdownList, selectedType }: any) => { + const [dropDown, setDropdown] = useState() + const [type, setType] = useState(selectedType ? selectedType : "Type") + const [dropdownSelectionList] = useState(dropdownList) + + useEffect(() => { + initFlowbite() + const $targetEl: HTMLElement = document.getElementById(`dropdownMenu${id}`) as HTMLElement + const $triggerEl: HTMLElement = document.getElementById(`dropdownButton${id}`) as HTMLElement + const options: DropdownOptions = { + placement: "bottom", + triggerType: "click", + offsetSkidding: 0, + offsetDistance: 10, + delay: 300, + } + const instanceOptions: InstanceOptions = { + id: `dropdownMenu${id}`, + override: true, + } + setDropdown(new Dropdown($targetEl, $triggerEl, options, instanceOptions)) + }, [id]) + + const handleClick = (type: string) => { + setType(type) + onSelectMethod(type) + if (dropDown) dropDown.hide() + } + + return ( + <> + + +
+
    + {dropdownSelectionList.map((option: string, index: number) => ( +
  • + { + handleClick(option) + }} + className="block px-4 py-2 hover:bg-gray-100 dark:hover:bg-gray-600 dark:hover:text-white" + > + {option} + +
    • + ))} +
+
+ + ) +} diff --git a/packages/explorer/src/components/Wallet.tsx b/packages/explorer/src/components/Wallet.tsx index c317af9be..56d4efc9f 100644 --- a/packages/explorer/src/components/Wallet.tsx +++ b/packages/explorer/src/components/Wallet.tsx @@ -1,4 +1,4 @@ -import { useCallback, useState } from "react" +import { useCallback, useEffect, useState } from "react" import { HiRefresh } from "react-icons/hi" import { Drawer } from "./Drawer" import { Auth, UtilsContext } from "@bitcoin-computer/components" @@ -20,6 +20,10 @@ const Balance = ({ computer }: any) => { } }, [computer]) + useEffect(() => { + refreshBalance() + }, []) + return (
diff --git a/packages/explorer/src/components/playground/CreateNew.tsx b/packages/explorer/src/components/playground/CreateNew.tsx index 85526ffc4..9c2d57e1f 100644 --- a/packages/explorer/src/components/playground/CreateNew.tsx +++ b/packages/explorer/src/components/playground/CreateNew.tsx @@ -15,12 +15,11 @@ const CreateNew = (props: { computer: Computer setShow: Dispatch> setFunctionResult: Dispatch> - setFunctionCallSuccess: Dispatch> + setModalTitle: Dispatch> exampleCode: string exampleVars: { name: string; type: string; value: string }[] }) => { - const { computer, exampleVars, exampleCode, setShow, setFunctionCallSuccess, setFunctionResult } = - props + const { computer, exampleVars, exampleCode, setShow, setModalTitle, setFunctionResult } = props const [code, setCode] = useState() const [modSpec, setModSpec] = useState() const [argumentsList, setArgumentsList] = useState([]) @@ -108,16 +107,16 @@ const CreateNew = (props: { sleep(500) const { res } = await computer.sync(txId) setFunctionResult({ _rev: res._rev, type: "objects" }) - setFunctionCallSuccess(true) + setModalTitle("Success!") setShow(true) } else { setFunctionResult("Please check the code you provided!") - setFunctionCallSuccess(false) + setModalTitle("Error!") setShow(true) } } catch (error: any) { setFunctionResult(getErrorMessage(error)) - setFunctionCallSuccess(false) + setModalTitle("Error!") setShow(true) } } diff --git a/packages/explorer/src/components/playground/DeployModule.tsx b/packages/explorer/src/components/playground/DeployModule.tsx index 014b47511..592642550 100644 --- a/packages/explorer/src/components/playground/DeployModule.tsx +++ b/packages/explorer/src/components/playground/DeployModule.tsx @@ -6,10 +6,10 @@ const DeployModule = (props: { computer: Computer setShow: Dispatch> setFunctionResult: Dispatch> - setFunctionCallSuccess: Dispatch> + setModalTitle: Dispatch> exampleModule: string }) => { - const { computer, exampleModule, setShow, setFunctionCallSuccess, setFunctionResult } = props + const { computer, exampleModule, setShow, setModalTitle, setFunctionResult } = props const [module, setModule] = useState() useEffect(() => { @@ -21,11 +21,11 @@ const DeployModule = (props: { // @ts-ignore const modSpec = await computer.deploy(module?.trim()) setFunctionResult({ _rev: modSpec, type: "modules" }) - setFunctionCallSuccess(true) + setModalTitle("Success!") setShow(true) } catch (error: any) { setFunctionResult(getErrorMessage(error)) - setFunctionCallSuccess(false) + setModalTitle("Error!") setShow(true) } } diff --git a/packages/explorer/src/components/playground/ExecuteExpression.tsx b/packages/explorer/src/components/playground/ExecuteExpression.tsx index 7eeeee24a..d0a65ddfc 100644 --- a/packages/explorer/src/components/playground/ExecuteExpression.tsx +++ b/packages/explorer/src/components/playground/ExecuteExpression.tsx @@ -14,11 +14,11 @@ const ExecuteExpression = (props: { computer: Computer setShow: Dispatch> setFunctionResult: Dispatch> - setFunctionCallSuccess: Dispatch> + setModalTitle: Dispatch> exampleExpression: string exampleVars: { name: string; type: string }[] }) => { - const { computer, exampleExpression, setShow, setFunctionCallSuccess, setFunctionResult } = props + const { computer, exampleExpression, setShow, setModalTitle, setFunctionResult } = props const [expression, setExpression] = useState() const [modSpec, setModSpec] = useState() @@ -80,11 +80,11 @@ const ExecuteExpression = (props: { }) const txId = await computer.broadcast(tx) setFunctionResult({ _rev: `${txId}:0`, type: "objects", res: effect.res }) - setFunctionCallSuccess(true) + setModalTitle("Success!") setShow(true) } catch (error: any) { setFunctionResult(getErrorMessage(error)) - setFunctionCallSuccess(false) + setModalTitle("Error!") setShow(true) } } diff --git a/packages/explorer/src/components/playground/Playground.tsx b/packages/explorer/src/components/playground/Playground.tsx index d30e35abf..c082c0f56 100644 --- a/packages/explorer/src/components/playground/Playground.tsx +++ b/packages/explorer/src/components/playground/Playground.tsx @@ -128,7 +128,6 @@ const Tabs = () => { const Playground = () => { const [computer] = useState(Auth.getComputer()) const [functionResult, setFunctionResult] = useState({}) - const [functionCallSuccess, setFunctionCallSuccess] = useState(false) const [exampleCode, setExampleCode] = useState("") const [exampleExpression, setExampleExpresion] = useState("") const [exampleModule, setExampleModule] = useState("") @@ -136,7 +135,6 @@ const Playground = () => { const [modalTitle, setModalTitle] = useState("") const setShow: any = (flag: boolean) => { - functionCallSuccess ? setModalTitle("Sucess!") : setModalTitle("Error!") flag ? Modal.get(modalId).show() : Modal.get(modalId).hide() } @@ -191,7 +189,7 @@ const Playground = () => { { {