@dipansrimany/mlink-sdk 0.3.0 → 0.4.1

package/dist/react/index.js

@@ -41,18 +41,113 @@ var ActionButtonSchema = zod.z.object({
   placeholder: zod.z.string().optional(),
   disabled: zod.z.boolean().optional()
 });
+zod.z.enum([
+  "text",
+  "number",
+  "email",
+  "url",
+  "date",
+  "datetime-local",
+  "textarea",
+  "select",
+  "radio",
+  "checkbox",
+  "address",
+  "token",
+  "amount"
+]);
+var ActionParameterOptionSchema = zod.z.object({
+  label: zod.z.string().min(1),
+  value: zod.z.string(),
+  selected: zod.z.boolean().optional()
+});
+var ActionParameterBaseSchema = zod.z.object({
+  name: zod.z.string().min(1).max(50),
+  label: zod.z.string().max(100).optional(),
+  required: zod.z.boolean().optional(),
+  pattern: zod.z.string().optional(),
+  patternDescription: zod.z.string().optional(),
+  min: zod.z.union([zod.z.string(), zod.z.number()]).optional(),
+  max: zod.z.union([zod.z.string(), zod.z.number()]).optional()
+});
+var ActionParameterSchema = ActionParameterBaseSchema.extend({
+  type: zod.z.enum([
+    "text",
+    "number",
+    "email",
+    "url",
+    "date",
+    "datetime-local",
+    "textarea",
+    "address",
+    "token",
+    "amount"
+  ]).optional()
+});
+var ActionParameterSelectableSchema = ActionParameterBaseSchema.extend({
+  type: zod.z.enum(["select", "radio", "checkbox"]),
+  options: zod.z.array(ActionParameterOptionSchema).min(1)
+});
+var TypedActionParameterSchema = zod.z.union([
+  ActionParameterSelectableSchema,
+  ActionParameterSchema
+]);
+var LinkedActionTypeSchema = zod.z.enum(["transaction", "post", "external-link"]);
+var LinkedActionSchema = zod.z.object({
+  type: LinkedActionTypeSchema.optional(),
+  href: zod.z.string().min(1),
+  label: zod.z.string().min(1).max(50),
+  disabled: zod.z.boolean().optional(),
+  parameters: zod.z.array(TypedActionParameterSchema).optional()
+});
+var ActionLinksSchema = zod.z.object({
+  actions: zod.z.array(LinkedActionSchema).min(1)
+});
+var PostNextActionLinkSchema = zod.z.object({
+  type: zod.z.literal("post"),
+  href: zod.z.string().min(1)
+});
+var InlineNextActionLinkSchema = zod.z.object({
+  type: zod.z.literal("inline"),
+  action: zod.z.lazy(() => ActionMetadataSchema)
+});
+var NextActionLinkSchema = zod.z.union([
+  PostNextActionLinkSchema,
+  InlineNextActionLinkSchema
+]);
+var iconSchema = zod.z.string().refine(
+  (val) => {
+    if (val.startsWith("http://") || val.startsWith("https://")) return true;
+    if (val.startsWith("data:image/")) return true;
+    if (val.startsWith("/")) return true;
+    return false;
+  },
+  { message: "Icon must be a valid URL, base64 data URI, or relative path" }
+);
 var ActionMetadataSchema = zod.z.object({
-  title: zod.z.string().min(1).max(100),
-  icon: zod.z.string().url(),
-  description: zod.z.string().min(1).max(500),
-  actions: zod.z.array(ActionButtonSchema).min(1),
+  type: zod.z.enum(["action", "completed"]).optional(),
+  title: zod.z.string().min(1).max(200),
+  icon: iconSchema,
+  description: zod.z.string().min(1).max(1e3),
+  label: zod.z.string().max(50).optional(),
+  // Legacy actions (optional)
+  actions: zod.z.array(ActionButtonSchema).optional(),
+  // Solana-style linked actions (optional)
+  links: ActionLinksSchema.optional(),
   disabled: zod.z.boolean().optional(),
   error: zod.z.object({ message: zod.z.string() }).optional()
-});
+}).refine(
+  (data) => {
+    return data.actions && data.actions.length > 0 || data.links?.actions && data.links.actions.length > 0;
+  },
+  { message: "Must have at least one action or linked action" }
+);
 zod.z.object({
   account: zod.z.string().regex(addressRegex, "Invalid Ethereum address"),
   action: zod.z.string().min(1),
-  input: zod.z.string().optional()
+  input: zod.z.string().optional(),
+  // Solana-style parameter data
+  data: zod.z.record(zod.z.union([zod.z.string(), zod.z.array(zod.z.string())])).optional()
 });
 var EVMTransactionSchema = zod.z.object({
   to: zod.z.string().regex(addressRegex, "Invalid to address"),
@@ -60,10 +155,22 @@ var EVMTransactionSchema = zod.z.object({
   data: zod.z.string().regex(hexRegex, "Invalid hex data"),
   chainId: zod.z.number().positive()
 });
-var TransactionResponseSchema = zod.z.object({
-  transaction: EVMTransactionSchema,
-  message: zod.z.string().optional()
-});
+zod.z.object({
+  // Single transaction (legacy)
+  transaction: EVMTransactionSchema.optional(),
+  // Multiple transactions (batch)
+  transactions: zod.z.array(EVMTransactionSchema).optional(),
+  message: zod.z.string().optional(),
+  // Action chaining
+  links: zod.z.object({
+    next: NextActionLinkSchema.optional()
+  }).optional()
+}).refine(
+  (data) => {
+    return data.transaction !== void 0 || data.transactions && data.transactions.length > 0;
+  },
+  { message: "Must have either transaction or transactions" }
+);
 function validateActionMetadata(data) {
   const result = ActionMetadataSchema.safeParse(data);
   if (result.success) {
@@ -71,13 +178,6 @@ function validateActionMetadata(data) {
   }
   return { success: false, error: result.error.message };
 }
-function validateTransactionResponse(data) {
-  const result = TransactionResponseSchema.safeParse(data);
-  if (result.success) {
-    return { success: true, data: result.data };
-  }
-  return { success: false, error: result.error.message };
-}
 
 // src/react/useMlink.ts
 var DEFAULT_REFRESH_INTERVAL = 10 * 60 * 1e3;
@@ -164,7 +264,7 @@ function useExecuteMlink(options) {
     setError(null);
   }, []);
   const execute = react.useCallback(
-    async (action, input) => {
+    async (action, input, data) => {
       setStatus("executing");
       setError(null);
       setTxHash(null);
@@ -181,28 +281,33 @@ function useExecuteMlink(options) {
           body: JSON.stringify({
             account,
             action,
-            input
+            input,
+            data
+            // Include parameter data
           })
         });
         if (!response.ok) {
           const errorData = await response.json().catch(() => ({}));
           throw new Error(
-            errorData.message || `HTTP ${response.status}: ${response.statusText}`
+            errorData.error?.message || errorData.message || `HTTP ${response.status}: ${response.statusText}`
           );
         }
-        const data = await response.json();
-        const validation = validateTransactionResponse(data);
-        if (!validation.success) {
-          throw new Error(`Invalid response: ${validation.error}`);
+        const responseData = await response.json();
+        const transactions = responseData.transactions ? responseData.transactions : responseData.transaction ? [responseData.transaction] : [];
+        if (transactions.length === 0) {
+          throw new Error("No transaction returned from action");
+        }
+        let lastHash = "";
+        for (const tx of transactions) {
+          lastHash = await adapter.signAndSendTransaction(tx);
         }
-        const hash = await adapter.signAndSendTransaction(data.transaction);
-        setTxHash(hash);
+        setTxHash(lastHash);
         setStatus("success");
-        onSuccess?.(hash, action);
+        onSuccess?.(lastHash, action);
         return {
           success: true,
-          txHash: hash,
-          message: data.message
+          txHash: lastHash,
+          message: responseData.message
         };
       } catch (err) {
         const errorMessage = err instanceof Error ? err.message : "Transaction failed";
@@ -348,6 +453,23 @@ function useMlinkContext() {
   }
   return context;
 }
+
+// src/builders.ts
+function buildHref(template, params) {
+  let result = template;
+  for (const [key, value] of Object.entries(params)) {
+    const placeholder = `{${key}}`;
+    const replacement = Array.isArray(value) ? value.join(",") : value;
+    result = result.replace(new RegExp(placeholder, "g"), encodeURIComponent(replacement));
+  }
+  return result;
+}
+function hasParameters(action) {
+  return Boolean(action.parameters && action.parameters.length > 0);
+}
+function isSelectableParam(param) {
+  return param.type === "select" || param.type === "radio" || param.type === "checkbox";
+}
 function Mlink({
   url,
   adapter,
@@ -373,9 +495,14 @@ function Mlink({
     onError
   });
   const [inputValues, setInputValues] = react.useState({});
+  const [paramValues, setParamValues] = react.useState({});
+  const [selectedLinkedAction, setSelectedLinkedAction] = react.useState(null);
   const handleInputChange = react.useCallback((actionValue, value) => {
     setInputValues((prev) => ({ ...prev, [actionValue]: value }));
   }, []);
+  const handleParamChange = react.useCallback((name, value) => {
+    setParamValues((prev) => ({ ...prev, [name]: value }));
+  }, []);
   const handleAction = react.useCallback(
     async (action) => {
       const input = action.type === "input" ? inputValues[action.value] : void 0;
@@ -383,6 +510,40 @@ function Mlink({
     },
     [execute, inputValues]
   );
+  const handleLinkedAction = react.useCallback(
+    async (action) => {
+      if (hasParameters(action)) {
+        setSelectedLinkedAction(action);
+        const defaults = {};
+        action.parameters?.forEach((param) => {
+          if (isSelectableParam(param)) {
+            const selectedOption = param.options.find((o) => o.selected);
+            if (selectedOption) {
+              defaults[param.name] = param.type === "checkbox" ? [selectedOption.value] : selectedOption.value;
+            }
+          }
+        });
+        setParamValues(defaults);
+      } else {
+        await execute(action.href, void 0, {});
+      }
+    },
+    [execute]
+  );
+  const handleExecuteWithParams = react.useCallback(async () => {
+    if (!selectedLinkedAction) return;
+    const finalHref = buildHref(selectedLinkedAction.href, paramValues);
+    await execute(finalHref, void 0, paramValues);
+    setSelectedLinkedAction(null);
+    setParamValues({});
+  }, [selectedLinkedAction, paramValues, execute]);
+  const handleCancelParams = react.useCallback(() => {
+    setSelectedLinkedAction(null);
+    setParamValues({});
+  }, []);
+  const hasLinkedActions = react.useMemo(() => {
+    return metadata?.links?.actions && metadata.links.actions.length > 0;
+  }, [metadata]);
   if (fetchStatus === "loading") {
     return /* @__PURE__ */ jsxRuntime.jsx(MlinkContainer, { theme: resolvedTheme, className, preset: stylePreset, children: /* @__PURE__ */ jsxRuntime.jsx(MlinkSkeleton, {}) });
   }
@@ -399,6 +560,45 @@ function Mlink({
       }
     ) });
   }
+  if (selectedLinkedAction && hasParameters(selectedLinkedAction)) {
+    return /* @__PURE__ */ jsxRuntime.jsxs(MlinkContainer, { theme: resolvedTheme, className, preset: stylePreset, children: [
+      /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "mlink-content", children: [
+        /* @__PURE__ */ jsxRuntime.jsx("h3", { className: "mlink-title", children: selectedLinkedAction.label }),
+        /* @__PURE__ */ jsxRuntime.jsx("p", { className: "mlink-description", children: "Fill in the details below" })
+      ] }),
+      execError && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "mlink-error-banner", children: execError }),
+      /* @__PURE__ */ jsxRuntime.jsx("div", { className: "mlink-params", children: selectedLinkedAction.parameters?.map((param) => /* @__PURE__ */ jsxRuntime.jsx(
+        ParameterInput,
+        {
+          param,
+          value: paramValues[param.name] || "",
+          onChange: (value) => handleParamChange(param.name, value),
+          disabled: execStatus === "executing"
+        },
+        param.name
+      )) }),
+      /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "mlink-actions", children: [
+        /* @__PURE__ */ jsxRuntime.jsx(
+          "button",
+          {
+            className: "mlink-button",
+            onClick: handleExecuteWithParams,
+            disabled: execStatus === "executing",
+            children: execStatus === "executing" ? /* @__PURE__ */ jsxRuntime.jsx(MlinkSpinner, {}) : selectedLinkedAction.label
+          }
+        ),
+        /* @__PURE__ */ jsxRuntime.jsx(
+          "button",
+          {
+            className: "mlink-button mlink-button-secondary",
+            onClick: handleCancelParams,
+            disabled: execStatus === "executing",
+            children: "Back"
+          }
+        )
+      ] })
+    ] });
+  }
   return /* @__PURE__ */ jsxRuntime.jsxs(MlinkContainer, { theme: resolvedTheme, className, preset: stylePreset, children: [
     /* @__PURE__ */ jsxRuntime.jsx("div", { className: "mlink-icon", children: /* @__PURE__ */ jsxRuntime.jsx("img", { src: metadata.icon, alt: metadata.title }) }),
     /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "mlink-content", children: [
@@ -406,7 +606,29 @@ function Mlink({
       /* @__PURE__ */ jsxRuntime.jsx("p", { className: "mlink-description", children: metadata.description })
     ] }),
     execError && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "mlink-error-banner", children: execError }),
-    /* @__PURE__ */ jsxRuntime.jsx("div", { className: "mlink-actions", children: metadata.actions.map((action, index) => /* @__PURE__ */ jsxRuntime.jsx(
+    hasLinkedActions && /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "mlink-actions", children: [
+      /* @__PURE__ */ jsxRuntime.jsx("div", { className: "mlink-quick-actions", children: metadata.links.actions.filter((a) => !hasParameters(a)).map((action, index) => /* @__PURE__ */ jsxRuntime.jsx(
+        "button",
+        {
+          className: "mlink-button mlink-button-quick",
+          onClick: () => handleLinkedAction(action),
+          disabled: metadata.disabled || action.disabled || execStatus === "executing",
+          children: execStatus === "executing" ? /* @__PURE__ */ jsxRuntime.jsx(MlinkSpinner, {}) : action.label
+        },
+        `${action.href}-${index}`
+      )) }),
+      metadata.links.actions.filter((a) => hasParameters(a)).map((action, index) => /* @__PURE__ */ jsxRuntime.jsx(
+        "button",
+        {
+          className: "mlink-button mlink-button-custom",
+          onClick: () => handleLinkedAction(action),
+          disabled: metadata.disabled || action.disabled || execStatus === "executing",
+          children: action.label
+        },
+        `param-${action.href}-${index}`
+      ))
+    ] }),
+    !hasLinkedActions && metadata.actions && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "mlink-actions", children: metadata.actions.map((action, index) => /* @__PURE__ */ jsxRuntime.jsx(
       ActionButtonComponent,
       {
         action,
@@ -420,6 +642,161 @@ function Mlink({
     )) })
   ] });
 }
+function ParameterInput({ param, value, onChange, disabled }) {
+  const strValue = Array.isArray(value) ? value.join(",") : value;
+  if (isSelectableParam(param)) {
+    return /* @__PURE__ */ jsxRuntime.jsx(
+      SelectableParamInput,
+      {
+        param,
+        value,
+        onChange,
+        disabled
+      }
+    );
+  }
+  const inputType = getInputType(param.type);
+  if (param.type === "textarea") {
+    return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "mlink-param-group", children: [
+      param.label && /* @__PURE__ */ jsxRuntime.jsx("label", { className: "mlink-param-label", children: param.label }),
+      /* @__PURE__ */ jsxRuntime.jsx(
+        "textarea",
+        {
+          className: "mlink-textarea",
+          value: strValue,
+          onChange: (e) => onChange(e.target.value),
+          disabled,
+          required: param.required
+        }
+      )
+    ] });
+  }
+  return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "mlink-param-group", children: [
+    param.label && /* @__PURE__ */ jsxRuntime.jsxs("label", { className: "mlink-param-label", children: [
+      param.label,
+      param.required && /* @__PURE__ */ jsxRuntime.jsx("span", { className: "mlink-required", children: "*" })
+    ] }),
+    /* @__PURE__ */ jsxRuntime.jsx(
+      "input",
+      {
+        type: inputType,
+        className: "mlink-input",
+        value: strValue,
+        onChange: (e) => onChange(e.target.value),
+        disabled,
+        required: param.required,
+        pattern: param.pattern,
+        min: param.min?.toString(),
+        max: param.max?.toString(),
+        placeholder: param.label || param.name
+      }
+    ),
+    param.patternDescription && /* @__PURE__ */ jsxRuntime.jsx("span", { className: "mlink-param-hint", children: param.patternDescription })
+  ] });
+}
+function SelectableParamInput({
+  param,
+  value,
+  onChange,
+  disabled
+}) {
+  const arrayValue = Array.isArray(value) ? value : value ? [value] : [];
+  if (param.type === "select") {
+    return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "mlink-param-group", children: [
+      param.label && /* @__PURE__ */ jsxRuntime.jsxs("label", { className: "mlink-param-label", children: [
+        param.label,
+        param.required && /* @__PURE__ */ jsxRuntime.jsx("span", { className: "mlink-required", children: "*" })
+      ] }),
+      /* @__PURE__ */ jsxRuntime.jsxs(
+        "select",
+        {
+          className: "mlink-select",
+          value: arrayValue[0] || "",
+          onChange: (e) => onChange(e.target.value),
+          disabled,
+          required: param.required,
+          children: [
+            /* @__PURE__ */ jsxRuntime.jsxs("option", { value: "", children: [
+              "Select ",
+              param.label || param.name
+            ] }),
+            param.options.map((opt) => /* @__PURE__ */ jsxRuntime.jsx("option", { value: opt.value, children: opt.label }, opt.value))
+          ]
+        }
+      )
+    ] });
+  }
+  if (param.type === "radio") {
+    return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "mlink-param-group", children: [
+      param.label && /* @__PURE__ */ jsxRuntime.jsxs("label", { className: "mlink-param-label", children: [
+        param.label,
+        param.required && /* @__PURE__ */ jsxRuntime.jsx("span", { className: "mlink-required", children: "*" })
+      ] }),
+      /* @__PURE__ */ jsxRuntime.jsx("div", { className: "mlink-radio-group", children: param.options.map((opt) => /* @__PURE__ */ jsxRuntime.jsxs("label", { className: "mlink-radio-label", children: [
+        /* @__PURE__ */ jsxRuntime.jsx(
+          "input",
+          {
+            type: "radio",
+            name: param.name,
+            value: opt.value,
+            checked: arrayValue[0] === opt.value,
+            onChange: (e) => onChange(e.target.value),
+            disabled
+          }
+        ),
+        opt.label
+      ] }, opt.value)) })
+    ] });
+  }
+  if (param.type === "checkbox") {
+    return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "mlink-param-group", children: [
+      param.label && /* @__PURE__ */ jsxRuntime.jsxs("label", { className: "mlink-param-label", children: [
+        param.label,
+        param.required && /* @__PURE__ */ jsxRuntime.jsx("span", { className: "mlink-required", children: "*" })
+      ] }),
+      /* @__PURE__ */ jsxRuntime.jsx("div", { className: "mlink-checkbox-group", children: param.options.map((opt) => /* @__PURE__ */ jsxRuntime.jsxs("label", { className: "mlink-checkbox-label", children: [
+        /* @__PURE__ */ jsxRuntime.jsx(
+          "input",
+          {
+            type: "checkbox",
+            value: opt.value,
+            checked: arrayValue.includes(opt.value),
+            onChange: (e) => {
+              if (e.target.checked) {
+                onChange([...arrayValue, opt.value]);
+              } else {
+                onChange(arrayValue.filter((v) => v !== opt.value));
+              }
+            },
+            disabled
+          }
+        ),
+        opt.label
+      ] }, opt.value)) })
+    ] });
+  }
+  return null;
+}
+function getInputType(paramType) {
+  switch (paramType) {
+    case "number":
+    case "amount":
+      return "number";
+    case "email":
+      return "email";
+    case "url":
+      return "url";
+    case "date":
+      return "date";
+    case "datetime-local":
+      return "datetime-local";
+    case "address":
+    case "token":
+    case "text":
+    default:
+      return "text";
+  }
+}
 function MlinkContainer({ theme, className, preset, children }) {
   return /* @__PURE__ */ jsxRuntime.jsx(
     "div",