disable call action and dark mode for prev/next

packages/components/built/SmartObject.js

@@ -84,9 +84,9 @@ function MetaData(_a) {
     };
     return (_jsxs("div", { children: [_jsx("div", { className: "pt-6 pb-6 space-y-4 border-t border-gray-300 dark:border-gray-700", children: _jsxs("div", { className: "flex", children: [_jsx("a", { href: prev ? "/objects/".concat(prev) : undefined, className: "flex items-center justify-center px-4 h-10 ms-3 text-sm font-medium border rounded-lg transition \n      ".concat(prev
                                 ? 'bg-white text-black border-gray-300 hover:bg-gray-100 focus:ring-4 focus:ring-gray-100 dark:bg-gray-800 dark:text-white dark:border-gray-600 dark:hover:bg-gray-700 dark:focus:ring-gray-700'
-                                : 'bg-gray-200 text-gray-400 cursor-not-allowed'), "aria-disabled": !prev, children: "Previous" }), _jsx("a", { href: next ? "/objects/".concat(next) : undefined, className: "flex items-center justify-center px-4 h-10 ms-3 text-sm font-medium border rounded-lg transition \n      ".concat(next
+                                : 'bg-gray-200 text-gray-400 cursor-not-allowed dark:bg-gray-700 dark:text-gray-500'), "aria-disabled": !prev, children: "Previous" }), _jsx("a", { href: next ? "/objects/".concat(next) : undefined, className: "flex items-center justify-center px-4 h-10 ms-3 text-sm font-medium border rounded-lg transition \n      ".concat(next
                                 ? 'bg-white text-black border-gray-300 hover:bg-gray-100 focus:ring-4 focus:ring-gray-100 dark:bg-gray-800 dark:text-white dark:border-gray-600 dark:hover:bg-gray-700 dark:focus:ring-gray-700'
-                                : 'bg-gray-200 text-gray-400 cursor-not-allowed'), "aria-disabled": !next, children: "Next" }), _jsx("button", { onClick: toggleVisibility, className: "flex items-center justify-center px-4 h-10 ms-3 text-sm font-medium border rounded-lg transition \n      bg-white text-black border-gray-300 hover:bg-gray-100 focus:ring-4 focus:ring-gray-100 dark:bg-gray-800 dark:text-white dark:border-gray-600 dark:hover:bg-gray-700 dark:focus:ring-gray-700", children: isVisible ? 'Hide Metadata' : 'Show Metadata' })] }) }), isVisible && (_jsxs("table", { className: "w-full mt-4 mb-8 text-[12px] text-left text-gray-500 dark:text-gray-400", children: [_jsx("thead", { className: "text-xs text-gray-700 uppercase bg-gray-50 dark:bg-gray-700 dark:text-gray-400", children: _jsxs("tr", { children: [_jsx("th", { scope: "col", className: "px-4 py-2", children: "Key" }), _jsx("th", { scope: "col", className: "px-4 py-2", children: "Short" }), _jsx("th", { scope: "col", className: "px-4 py-2", children: "Value" })] }) }), _jsxs("tbody", { children: [_jsxs("tr", { className: "bg-white border-b dark:bg-gray-800 dark:border-gray-700", children: [_jsx("td", { className: "px-4 py-2", children: "Identity" }), _jsx("td", { className: "px-4 py-2", children: _jsx("pre", { children: "_id" }) }), _jsxs("td", { className: "px-4 py-2", children: [_jsx(Link, { to: "/objects/".concat(smartObject === null || smartObject === void 0 ? void 0 : smartObject._id), className: "font-medium text-blue-600 dark:text-blue-500 hover:underline", children: smartObject === null || smartObject === void 0 ? void 0 : smartObject._id }), _jsx(Copy, { text: smartObject === null || smartObject === void 0 ? void 0 : smartObject._id })] })] }), _jsxs("tr", { className: "bg-white border-b dark:bg-gray-800 dark:border-gray-700", children: [_jsx("td", { className: "px-4 py-2", children: "Revision" }), _jsx("td", { className: "px-4 py-2", children: _jsx("pre", { children: "_rev" }) }), _jsxs("td", { className: "px-4 py-2", children: [_jsx(Link, { to: "/objects/".concat(smartObject === null || smartObject === void 0 ? void 0 : smartObject._rev), className: "font-medium text-blue-600 dark:text-blue-500 hover:underline", children: smartObject === null || smartObject === void 0 ? void 0 : smartObject._rev }), _jsx(Copy, { text: smartObject === null || smartObject === void 0 ? void 0 : smartObject._rev })] })] }), _jsxs("tr", { className: "bg-white border-b dark:bg-gray-800 dark:border-gray-700", children: [_jsx("td", { className: "px-4 py-2", children: "Root" }), _jsx("td", { className: "px-4 py-2", children: _jsx("pre", { children: "_root" }) }), _jsxs("td", { className: "px-4 py-2", children: [_jsx(Link, { to: "/objects/".concat(smartObject === null || smartObject === void 0 ? void 0 : smartObject._root), className: "font-medium text-blue-600 dark:text-blue-500 hover:underline", children: smartObject === null || smartObject === void 0 ? void 0 : smartObject._root }), _jsx(Copy, { text: smartObject === null || smartObject === void 0 ? void 0 : smartObject._root })] })] }), _jsxs("tr", { className: "bg-white border-b dark:bg-gray-800 dark:border-gray-700", children: [_jsx("td", { className: "px-4 py-2", children: "Owners" }), _jsx("td", { className: "px-4 py-2", children: _jsx("pre", { children: "_owners" }) }), _jsxs("td", { className: "px-4 py-2", children: [_jsx("span", { className: "font-medium text-gray-900 dark:text-white", children: smartObject === null || smartObject === void 0 ? void 0 : smartObject._owners }), _jsx(Copy, { text: JSON.stringify(smartObject === null || smartObject === void 0 ? void 0 : smartObject._owners) })] })] }), _jsxs("tr", { className: "bg-white border-b dark:bg-gray-800 dark:border-gray-700", children: [_jsx("td", { className: "px-4 py-2", children: "Amount" }), _jsx("td", { className: "px-4 py-2", children: _jsx("pre", { children: "_amount" }) }), _jsxs("td", { className: "px-4 py-2", children: [_jsxs("span", { className: "font-medium text-gray-900 dark:text-white", children: [smartObject === null || smartObject === void 0 ? void 0 : smartObject._amount, " Satoshi"] }), _jsx(Copy, { text: smartObject === null || smartObject === void 0 ? void 0 : smartObject._amount })] })] })] })] }))] }));
+                                : 'bg-gray-200 text-gray-400 cursor-not-allowed dark:bg-gray-700 dark:text-gray-500'), "aria-disabled": !next, children: "Next" }), _jsx("button", { onClick: toggleVisibility, className: "flex items-center justify-center px-4 h-10 ms-3 text-sm font-medium border rounded-lg transition \n      bg-white text-black border-gray-300 hover:bg-gray-100 focus:ring-4 focus:ring-gray-100 dark:bg-gray-800 dark:text-white dark:border-gray-600 dark:hover:bg-gray-700 dark:focus:ring-gray-700", children: isVisible ? 'Hide Metadata' : 'Show Metadata' })] }) }), isVisible && (_jsxs("table", { className: "w-full mt-4 mb-8 text-[12px] text-left text-gray-500 dark:text-gray-400", children: [_jsx("thead", { className: "text-xs text-gray-700 uppercase bg-gray-50 dark:bg-gray-700 dark:text-gray-400", children: _jsxs("tr", { children: [_jsx("th", { scope: "col", className: "px-4 py-2", children: "Key" }), _jsx("th", { scope: "col", className: "px-4 py-2", children: "Short" }), _jsx("th", { scope: "col", className: "px-4 py-2", children: "Value" })] }) }), _jsxs("tbody", { children: [_jsxs("tr", { className: "bg-white border-b dark:bg-gray-800 dark:border-gray-700", children: [_jsx("td", { className: "px-4 py-2", children: "Identity" }), _jsx("td", { className: "px-4 py-2", children: _jsx("pre", { children: "_id" }) }), _jsxs("td", { className: "px-4 py-2", children: [_jsx(Link, { to: "/objects/".concat(smartObject === null || smartObject === void 0 ? void 0 : smartObject._id), className: "font-medium text-blue-600 dark:text-blue-500 hover:underline", children: smartObject === null || smartObject === void 0 ? void 0 : smartObject._id }), _jsx(Copy, { text: smartObject === null || smartObject === void 0 ? void 0 : smartObject._id })] })] }), _jsxs("tr", { className: "bg-white border-b dark:bg-gray-800 dark:border-gray-700", children: [_jsx("td", { className: "px-4 py-2", children: "Revision" }), _jsx("td", { className: "px-4 py-2", children: _jsx("pre", { children: "_rev" }) }), _jsxs("td", { className: "px-4 py-2", children: [_jsx(Link, { to: "/objects/".concat(smartObject === null || smartObject === void 0 ? void 0 : smartObject._rev), className: "font-medium text-blue-600 dark:text-blue-500 hover:underline", children: smartObject === null || smartObject === void 0 ? void 0 : smartObject._rev }), _jsx(Copy, { text: smartObject === null || smartObject === void 0 ? void 0 : smartObject._rev })] })] }), _jsxs("tr", { className: "bg-white border-b dark:bg-gray-800 dark:border-gray-700", children: [_jsx("td", { className: "px-4 py-2", children: "Root" }), _jsx("td", { className: "px-4 py-2", children: _jsx("pre", { children: "_root" }) }), _jsxs("td", { className: "px-4 py-2", children: [_jsx(Link, { to: "/objects/".concat(smartObject === null || smartObject === void 0 ? void 0 : smartObject._root), className: "font-medium text-blue-600 dark:text-blue-500 hover:underline", children: smartObject === null || smartObject === void 0 ? void 0 : smartObject._root }), _jsx(Copy, { text: smartObject === null || smartObject === void 0 ? void 0 : smartObject._root })] })] }), _jsxs("tr", { className: "bg-white border-b dark:bg-gray-800 dark:border-gray-700", children: [_jsx("td", { className: "px-4 py-2", children: "Owners" }), _jsx("td", { className: "px-4 py-2", children: _jsx("pre", { children: "_owners" }) }), _jsxs("td", { className: "px-4 py-2", children: [_jsx("span", { className: "font-medium text-gray-900 dark:text-white", children: smartObject === null || smartObject === void 0 ? void 0 : smartObject._owners }), _jsx(Copy, { text: JSON.stringify(smartObject === null || smartObject === void 0 ? void 0 : smartObject._owners) })] })] }), _jsxs("tr", { className: "bg-white border-b dark:bg-gray-800 dark:border-gray-700", children: [_jsx("td", { className: "px-4 py-2", children: "Amount" }), _jsx("td", { className: "px-4 py-2", children: _jsx("pre", { children: "_amount" }) }), _jsxs("td", { className: "px-4 py-2", children: [_jsxs("span", { className: "font-medium text-gray-900 dark:text-white", children: [smartObject === null || smartObject === void 0 ? void 0 : smartObject._amount, " Satoshi"] }), _jsx(Copy, { text: smartObject === null || smartObject === void 0 ? void 0 : smartObject._amount })] })] })] })] }))] }));
 }
 function Component(_a) {
     var _this = this;

packages/components/src/SmartObject.tsx

@@ -78,7 +78,7 @@ function MetaData({ smartObject, prev, next }: any) {
       ${
         prev
           ? 'bg-white text-black border-gray-300 hover:bg-gray-100 focus:ring-4 focus:ring-gray-100 dark:bg-gray-800 dark:text-white dark:border-gray-600 dark:hover:bg-gray-700 dark:focus:ring-gray-700'
-          : 'bg-gray-200 text-gray-400 cursor-not-allowed'
+          : 'bg-gray-200 text-gray-400 cursor-not-allowed dark:bg-gray-700 dark:text-gray-500'
       }`}
             aria-disabled={!prev}
           >
@@ -90,7 +90,7 @@ function MetaData({ smartObject, prev, next }: any) {
       ${
         next
           ? 'bg-white text-black border-gray-300 hover:bg-gray-100 focus:ring-4 focus:ring-gray-100 dark:bg-gray-800 dark:text-white dark:border-gray-600 dark:hover:bg-gray-700 dark:focus:ring-gray-700'
-          : 'bg-gray-200 text-gray-400 cursor-not-allowed'
+          : 'bg-gray-200 text-gray-400 cursor-not-allowed dark:bg-gray-700 dark:text-gray-500'
       }`}
             aria-disabled={!next}
           >

packages/explorer/src/components/playground/CreateNew.tsx

@@ -1,4 +1,4 @@
-import { Dispatch, SetStateAction, useEffect, useState } from 'react'
+import { Dispatch, SetStateAction, useEffect, useMemo, useState } from 'react'
 import { IoMdRemoveCircleOutline } from 'react-icons/io'
 import { Computer } from '@bitcoin-computer/lib'
 import { UtilsContext } from '@bitcoin-computer/components'
@@ -130,6 +130,11 @@ const CreateNew = (props: {
     }
   }
 
+  const isCallDisabled = useMemo(
+    () => argumentsList.some((arg) => !arg.type.trim() && !arg.hidden),
+    [argumentsList],
+  )
+
   return (
     <>
       <textarea
@@ -165,9 +170,7 @@ const CreateNew = (props: {
                 />
                 <TypeSelectionDropdown
                   id={`playground-dropdown-${index}`}
-                  onSelectMethod={(option: string) => {
-                    argument.type = option
-                  }}
+                  onSelectMethod={(option: string) => handleArgumentChange(index, 'type', option)}
                   dropdownList={options}
                   selectedType={argument.type}
                 />
@@ -197,7 +200,10 @@ const CreateNew = (props: {
       <button
         type="button"
         onClick={handleDeploy}
-        className="text-white bg-blue-700 hover:bg-blue-800 focus:ring-4 focus:ring-blue-300 font-medium rounded-lg text-sm px-5 py-2.5 me-2 mb-2 dark:bg-blue-600 dark:hover:bg-blue-700 focus:outline-none dark:focus:ring-blue-800"
+        disabled={isCallDisabled}
+        className={`text-white font-medium rounded-lg text-sm px-5 py-2.5 me-2 mb-2 focus:ring-4 focus:outline-none
+          ${isCallDisabled ? 'bg-gray-400 cursor-not-allowed' : 'bg-blue-700 hover:bg-blue-800 focus:ring-blue-300 dark:bg-blue-600 dark:hover:bg-blue-700 dark:focus:ring-blue-800'}
+        `}
       >
         Call
       </button>

packages/explorer/src/components/playground/ExecuteExpression.tsx

@@ -1,4 +1,4 @@
-import { Dispatch, SetStateAction, useEffect, useState } from 'react'
+import { Dispatch, SetStateAction, useEffect, useMemo, useState } from 'react'
 import { IoMdRemoveCircleOutline } from 'react-icons/io'
 import { Computer } from '@bitcoin-computer/lib'
 import { UtilsContext } from '@bitcoin-computer/components'
@@ -99,6 +99,11 @@ const ExecuteExpression = (props: {
     }
   }
 
+  const isCallDisabled = useMemo(
+    () => expressionArgumentsList.some((arg) => !arg.name.trim()),
+    [expressionArgumentsList],
+  )
+
   return (
     <>
       <textarea
@@ -165,8 +170,10 @@ const ExecuteExpression = (props: {
 
       <button
         type="button"
-        onClick={handleExpressionCall}
-        className="text-white bg-blue-700 hover:bg-blue-800 focus:ring-4 focus:ring-blue-300 font-medium rounded-lg text-sm px-5 py-2.5 me-2 mb-2 dark:bg-blue-600 dark:hover:bg-blue-700 focus:outline-none dark:focus:ring-blue-800"
+        disabled={isCallDisabled}
+        className={`text-white font-medium rounded-lg text-sm px-5 py-2.5 me-2 mb-2 focus:ring-4 focus:outline-none
+          ${isCallDisabled ? 'bg-gray-400 cursor-not-allowed' : 'bg-blue-700 hover:bg-blue-800 focus:ring-blue-300 dark:bg-blue-600 dark:hover:bg-blue-700 dark:focus:ring-blue-800'}
+        `}
       >
         Execute Expression
       </button>