@dipansrimany/mlink-sdk 0.1.0 → 0.3.0

package/dist/react/index.js

@@ -0,0 +1,580 @@
+'use strict';
+
+var react = require('react');
+var zod = require('zod');
+var jsxRuntime = require('react/jsx-runtime');
+
+// src/constants.ts
+var MANTLE_SEPOLIA = {
+  chainId: 5003,
+  name: "Mantle Sepolia",
+  rpcUrl: "https://rpc.sepolia.mantle.xyz",
+  explorerUrl: "https://sepolia.mantlescan.xyz",
+  nativeCurrency: {
+    name: "MNT",
+    symbol: "MNT",
+    decimals: 18
+  }
+};
+var DEFAULT_CHAIN = MANTLE_SEPOLIA;
+var ACTION_QUERY_PARAM = "action";
+
+// src/utils.ts
+function parseBlinkUrl(blinkUrl) {
+  try {
+    const url = new URL(blinkUrl);
+    const actionParam = url.searchParams.get(ACTION_QUERY_PARAM);
+    if (!actionParam) return null;
+    const actionUrl = decodeURIComponent(actionParam);
+    new URL(actionUrl);
+    return actionUrl;
+  } catch {
+    return null;
+  }
+}
+var addressRegex = /^0x[a-fA-F0-9]{40}$/;
+var hexRegex = /^0x[a-fA-F0-9]*$/;
+var ActionButtonSchema = zod.z.object({
+  label: zod.z.string().min(1).max(50),
+  value: zod.z.string().min(1),
+  type: zod.z.enum(["button", "input"]),
+  placeholder: zod.z.string().optional(),
+  disabled: zod.z.boolean().optional()
+});
+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),
+  disabled: zod.z.boolean().optional(),
+  error: zod.z.object({ message: zod.z.string() }).optional()
+});
+zod.z.object({
+  account: zod.z.string().regex(addressRegex, "Invalid Ethereum address"),
+  action: zod.z.string().min(1),
+  input: zod.z.string().optional()
+});
+var EVMTransactionSchema = zod.z.object({
+  to: zod.z.string().regex(addressRegex, "Invalid to address"),
+  value: zod.z.string(),
+  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()
+});
+function validateActionMetadata(data) {
+  const result = ActionMetadataSchema.safeParse(data);
+  if (result.success) {
+    return { success: true, data: result.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;
+function useMlink(url, options = {}) {
+  const { refreshInterval = DEFAULT_REFRESH_INTERVAL, enabled = true } = options;
+  const [status, setStatus] = react.useState("idle");
+  const [metadata, setMetadata] = react.useState(null);
+  const [error, setError] = react.useState(null);
+  const abortControllerRef = react.useRef(null);
+  const intervalRef = react.useRef(null);
+  const actionUrl = parseBlinkUrl(url) || url;
+  const fetchMetadata = react.useCallback(async () => {
+    if (!actionUrl || !enabled) return;
+    if (abortControllerRef.current) {
+      abortControllerRef.current.abort();
+    }
+    abortControllerRef.current = new AbortController();
+    setStatus("loading");
+    setError(null);
+    try {
+      const response = await fetch(actionUrl, {
+        method: "GET",
+        headers: {
+          Accept: "application/json"
+        },
+        signal: abortControllerRef.current.signal
+      });
+      if (!response.ok) {
+        throw new Error(`HTTP ${response.status}: ${response.statusText}`);
+      }
+      const data = await response.json();
+      const validation = validateActionMetadata(data);
+      if (!validation.success) {
+        throw new Error(`Invalid metadata: ${validation.error}`);
+      }
+      setMetadata(validation.data);
+      setStatus("ready");
+    } catch (err) {
+      if (err instanceof Error && err.name === "AbortError") {
+        return;
+      }
+      const errorMessage = err instanceof Error ? err.message : "Failed to fetch mlink data";
+      setError(errorMessage);
+      setStatus("error");
+    }
+  }, [actionUrl, enabled]);
+  react.useEffect(() => {
+    if (enabled) {
+      fetchMetadata();
+    }
+    return () => {
+      if (abortControllerRef.current) {
+        abortControllerRef.current.abort();
+      }
+    };
+  }, [fetchMetadata, enabled]);
+  react.useEffect(() => {
+    if (!enabled || !refreshInterval) return;
+    intervalRef.current = setInterval(() => {
+      fetchMetadata();
+    }, refreshInterval);
+    return () => {
+      if (intervalRef.current) {
+        clearInterval(intervalRef.current);
+      }
+    };
+  }, [fetchMetadata, refreshInterval, enabled]);
+  return {
+    status,
+    metadata,
+    error,
+    url: actionUrl,
+    refresh: fetchMetadata
+  };
+}
+function useExecuteMlink(options) {
+  const { adapter, actionUrl, onSuccess, onError } = options;
+  const [status, setStatus] = react.useState("ready");
+  const [txHash, setTxHash] = react.useState(null);
+  const [error, setError] = react.useState(null);
+  const reset = react.useCallback(() => {
+    setStatus("ready");
+    setTxHash(null);
+    setError(null);
+  }, []);
+  const execute = react.useCallback(
+    async (action, input) => {
+      setStatus("executing");
+      setError(null);
+      setTxHash(null);
+      try {
+        let account = adapter.getAddress();
+        if (!adapter.isConnected() || !account) {
+          account = await adapter.connect();
+        }
+        const response = await fetch(actionUrl, {
+          method: "POST",
+          headers: {
+            "Content-Type": "application/json"
+          },
+          body: JSON.stringify({
+            account,
+            action,
+            input
+          })
+        });
+        if (!response.ok) {
+          const errorData = await response.json().catch(() => ({}));
+          throw new Error(
+            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 hash = await adapter.signAndSendTransaction(data.transaction);
+        setTxHash(hash);
+        setStatus("success");
+        onSuccess?.(hash, action);
+        return {
+          success: true,
+          txHash: hash,
+          message: data.message
+        };
+      } catch (err) {
+        const errorMessage = err instanceof Error ? err.message : "Transaction failed";
+        setError(errorMessage);
+        setStatus("error");
+        onError?.(errorMessage);
+        return {
+          success: false,
+          error: errorMessage
+        };
+      }
+    },
+    [adapter, actionUrl, onSuccess, onError]
+  );
+  return {
+    execute,
+    status,
+    txHash,
+    error,
+    reset
+  };
+}
+
+// src/react/themes.ts
+var lightTheme = {
+  // Colors
+  "--mlink-bg-primary": "#ffffff",
+  "--mlink-bg-secondary": "#f8f9fa",
+  "--mlink-border-color": "#e9ecef",
+  "--mlink-text-primary": "#212529",
+  "--mlink-text-secondary": "#6c757d",
+  "--mlink-text-link": "#0d6efd",
+  "--mlink-button-bg": "#212529",
+  "--mlink-button-text": "#ffffff",
+  "--mlink-button-hover": "#343a40",
+  "--mlink-button-disabled": "#adb5bd",
+  "--mlink-input-bg": "#ffffff",
+  "--mlink-input-border": "#ced4da",
+  "--mlink-input-text": "#212529",
+  "--mlink-input-placeholder": "#adb5bd",
+  "--mlink-success": "#198754",
+  "--mlink-error": "#dc3545",
+  "--mlink-warning": "#ffc107",
+  // Sizing
+  "--mlink-border-radius": "12px",
+  "--mlink-button-radius": "8px",
+  "--mlink-input-radius": "8px",
+  // Shadows
+  "--mlink-shadow": "0 2px 8px rgba(0, 0, 0, 0.08)"
+};
+var darkTheme = {
+  // Colors
+  "--mlink-bg-primary": "#1a1a1a",
+  "--mlink-bg-secondary": "#2d2d2d",
+  "--mlink-border-color": "#404040",
+  "--mlink-text-primary": "#ffffff",
+  "--mlink-text-secondary": "#a0a0a0",
+  "--mlink-text-link": "#60a5fa",
+  "--mlink-button-bg": "#ffffff",
+  "--mlink-button-text": "#1a1a1a",
+  "--mlink-button-hover": "#e5e5e5",
+  "--mlink-button-disabled": "#525252",
+  "--mlink-input-bg": "#2d2d2d",
+  "--mlink-input-border": "#404040",
+  "--mlink-input-text": "#ffffff",
+  "--mlink-input-placeholder": "#6b7280",
+  "--mlink-success": "#22c55e",
+  "--mlink-error": "#ef4444",
+  "--mlink-warning": "#f59e0b",
+  // Sizing
+  "--mlink-border-radius": "12px",
+  "--mlink-button-radius": "8px",
+  "--mlink-input-radius": "8px",
+  // Shadows
+  "--mlink-shadow": "0 2px 8px rgba(0, 0, 0, 0.3)"
+};
+var mantleTheme = {
+  // Colors - Mantle brand colors
+  "--mlink-bg-primary": "#0a0a0a",
+  "--mlink-bg-secondary": "#141414",
+  "--mlink-border-color": "#2a2a2a",
+  "--mlink-text-primary": "#ffffff",
+  "--mlink-text-secondary": "#9ca3af",
+  "--mlink-text-link": "#65d9e4",
+  "--mlink-button-bg": "#65d9e4",
+  "--mlink-button-text": "#000000",
+  "--mlink-button-hover": "#85e3ec",
+  "--mlink-button-disabled": "#374151",
+  "--mlink-input-bg": "#1f1f1f",
+  "--mlink-input-border": "#374151",
+  "--mlink-input-text": "#ffffff",
+  "--mlink-input-placeholder": "#6b7280",
+  "--mlink-success": "#34d399",
+  "--mlink-error": "#f87171",
+  "--mlink-warning": "#fbbf24",
+  // Sizing
+  "--mlink-border-radius": "16px",
+  "--mlink-button-radius": "10px",
+  "--mlink-input-radius": "10px",
+  // Shadows
+  "--mlink-shadow": "0 4px 16px rgba(101, 217, 228, 0.1)"
+};
+var themePresets = {
+  light: lightTheme,
+  dark: darkTheme,
+  mantle: mantleTheme
+};
+function resolveTheme(theme) {
+  if (!theme) {
+    return darkTheme;
+  }
+  if (typeof theme === "string") {
+    return themePresets[theme] || darkTheme;
+  }
+  return { ...darkTheme, ...theme };
+}
+function themeToCSS(theme) {
+  return theme;
+}
+var MlinkContext = react.createContext(null);
+function MlinkProvider({
+  children,
+  theme,
+  defaultChain = DEFAULT_CHAIN
+}) {
+  const resolvedTheme = react.useMemo(() => resolveTheme(theme), [theme]);
+  const value = react.useMemo(
+    () => ({
+      theme: resolvedTheme,
+      defaultChain
+    }),
+    [resolvedTheme, defaultChain]
+  );
+  return /* @__PURE__ */ jsxRuntime.jsx(MlinkContext.Provider, { value, children });
+}
+function useMlinkContext() {
+  const context = react.useContext(MlinkContext);
+  if (!context) {
+    return {
+      theme: resolveTheme("dark"),
+      defaultChain: DEFAULT_CHAIN
+    };
+  }
+  return context;
+}
+function Mlink({
+  url,
+  adapter,
+  theme: themeProp,
+  onSuccess,
+  onError,
+  className = "",
+  stylePreset = "default"
+}) {
+  const context = useMlinkContext();
+  const resolvedTheme = themeProp ? resolveTheme(themeProp) : context.theme;
+  const { status: fetchStatus, metadata, error: fetchError } = useMlink(url);
+  const {
+    execute,
+    status: execStatus,
+    txHash,
+    error: execError,
+    reset
+  } = useExecuteMlink({
+    adapter,
+    actionUrl: url,
+    onSuccess,
+    onError
+  });
+  const [inputValues, setInputValues] = react.useState({});
+  const handleInputChange = react.useCallback((actionValue, value) => {
+    setInputValues((prev) => ({ ...prev, [actionValue]: value }));
+  }, []);
+  const handleAction = react.useCallback(
+    async (action) => {
+      const input = action.type === "input" ? inputValues[action.value] : void 0;
+      await execute(action.value, input);
+    },
+    [execute, inputValues]
+  );
+  if (fetchStatus === "loading") {
+    return /* @__PURE__ */ jsxRuntime.jsx(MlinkContainer, { theme: resolvedTheme, className, preset: stylePreset, children: /* @__PURE__ */ jsxRuntime.jsx(MlinkSkeleton, {}) });
+  }
+  if (fetchStatus === "error" || !metadata) {
+    return /* @__PURE__ */ jsxRuntime.jsx(MlinkContainer, { theme: resolvedTheme, className, preset: stylePreset, children: /* @__PURE__ */ jsxRuntime.jsx(MlinkError, { message: fetchError || "Failed to load action" }) });
+  }
+  if (execStatus === "success" && txHash) {
+    return /* @__PURE__ */ jsxRuntime.jsx(MlinkContainer, { theme: resolvedTheme, className, preset: stylePreset, children: /* @__PURE__ */ jsxRuntime.jsx(
+      MlinkSuccess,
+      {
+        message: metadata.title,
+        txHash,
+        onReset: reset
+      }
+    ) });
+  }
+  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: [
+      /* @__PURE__ */ jsxRuntime.jsx("h3", { className: "mlink-title", children: metadata.title }),
+      /* @__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(
+      ActionButtonComponent,
+      {
+        action,
+        inputValue: inputValues[action.value] || "",
+        onInputChange: (value) => handleInputChange(action.value, value),
+        onExecute: () => handleAction(action),
+        loading: execStatus === "executing",
+        disabled: metadata.disabled === true || action.disabled === true
+      },
+      `${action.value}-${index}`
+    )) })
+  ] });
+}
+function MlinkContainer({ theme, className, preset, children }) {
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    "div",
+    {
+      className: `mlink-container mlink-${preset} ${className}`,
+      style: themeToCSS(theme),
+      children
+    }
+  );
+}
+function MlinkSkeleton() {
+  return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "mlink-skeleton", children: [
+    /* @__PURE__ */ jsxRuntime.jsx("div", { className: "mlink-skeleton-icon" }),
+    /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "mlink-skeleton-content", children: [
+      /* @__PURE__ */ jsxRuntime.jsx("div", { className: "mlink-skeleton-title" }),
+      /* @__PURE__ */ jsxRuntime.jsx("div", { className: "mlink-skeleton-description" })
+    ] }),
+    /* @__PURE__ */ jsxRuntime.jsx("div", { className: "mlink-skeleton-button" })
+  ] });
+}
+function MlinkError({ message }) {
+  return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "mlink-error", children: [
+    /* @__PURE__ */ jsxRuntime.jsx("div", { className: "mlink-error-icon", children: "!" }),
+    /* @__PURE__ */ jsxRuntime.jsx("p", { className: "mlink-error-message", children: message })
+  ] });
+}
+function MlinkSuccess({ message, txHash, onReset }) {
+  const shortHash = `${txHash.slice(0, 10)}...${txHash.slice(-8)}`;
+  return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "mlink-success", children: [
+    /* @__PURE__ */ jsxRuntime.jsx("div", { className: "mlink-success-icon", children: "\u2713" }),
+    /* @__PURE__ */ jsxRuntime.jsx("h3", { className: "mlink-success-title", children: "Transaction Sent" }),
+    /* @__PURE__ */ jsxRuntime.jsx("p", { className: "mlink-success-message", children: message }),
+    /* @__PURE__ */ jsxRuntime.jsx("code", { className: "mlink-success-hash", children: shortHash }),
+    /* @__PURE__ */ jsxRuntime.jsx("button", { className: "mlink-button mlink-button-secondary", onClick: onReset, children: "Done" })
+  ] });
+}
+function ActionButtonComponent({
+  action,
+  inputValue,
+  onInputChange,
+  onExecute,
+  loading,
+  disabled
+}) {
+  if (action.type === "input") {
+    return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "mlink-input-group", children: [
+      /* @__PURE__ */ jsxRuntime.jsx(
+        "input",
+        {
+          type: "text",
+          className: "mlink-input",
+          placeholder: action.placeholder || action.label,
+          value: inputValue,
+          onChange: (e) => onInputChange(e.target.value),
+          disabled: disabled || loading
+        }
+      ),
+      /* @__PURE__ */ jsxRuntime.jsx(
+        "button",
+        {
+          className: "mlink-button",
+          onClick: onExecute,
+          disabled: disabled || loading || !inputValue.trim(),
+          children: loading ? /* @__PURE__ */ jsxRuntime.jsx(MlinkSpinner, {}) : action.label
+        }
+      )
+    ] });
+  }
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    "button",
+    {
+      className: "mlink-button",
+      onClick: onExecute,
+      disabled: disabled || loading,
+      children: loading ? /* @__PURE__ */ jsxRuntime.jsx(MlinkSpinner, {}) : action.label
+    }
+  );
+}
+function MlinkSpinner() {
+  return /* @__PURE__ */ jsxRuntime.jsx("span", { className: "mlink-spinner" });
+}
+var Mlink_default = Mlink;
+function useMlinkWagmiAdapter(config) {
+  const { address, isConnected, connect, sendTransaction } = config;
+  return react.useMemo(
+    () => ({
+      connect: async () => {
+        await connect();
+        if (!address) {
+          throw new Error("Failed to connect wallet");
+        }
+        return address;
+      },
+      signAndSendTransaction: async (transaction) => {
+        const txHash = await sendTransaction({
+          to: transaction.to,
+          value: BigInt(transaction.value),
+          data: transaction.data,
+          chainId: transaction.chainId
+        });
+        return txHash;
+      },
+      isConnected: () => isConnected,
+      getAddress: () => address || null
+    }),
+    [address, isConnected, connect, sendTransaction]
+  );
+}
+function useMlinkEthersAdapter(config) {
+  const { signer, connect } = config;
+  return react.useMemo(
+    () => ({
+      connect: async () => {
+        await connect();
+        if (!signer) {
+          throw new Error("Failed to connect wallet");
+        }
+        return await signer.getAddress();
+      },
+      signAndSendTransaction: async (transaction) => {
+        if (!signer) {
+          throw new Error("Wallet not connected");
+        }
+        const tx = await signer.sendTransaction({
+          to: transaction.to,
+          value: BigInt(transaction.value),
+          data: transaction.data,
+          chainId: transaction.chainId
+        });
+        return tx.hash;
+      },
+      isConnected: () => signer !== null,
+      getAddress: () => null
+      // Ethers requires async call
+    }),
+    [signer, connect]
+  );
+}
+function createMlinkAdapter(adapter) {
+  return adapter;
+}
+
+exports.Mlink = Mlink;
+exports.MlinkComponent = Mlink_default;
+exports.MlinkProvider = MlinkProvider;
+exports.createMlinkAdapter = createMlinkAdapter;
+exports.darkTheme = darkTheme;
+exports.lightTheme = lightTheme;
+exports.mantleTheme = mantleTheme;
+exports.resolveTheme = resolveTheme;
+exports.themePresets = themePresets;
+exports.useExecuteMlink = useExecuteMlink;
+exports.useMlink = useMlink;
+exports.useMlinkContext = useMlinkContext;
+exports.useMlinkEthersAdapter = useMlinkEthersAdapter;
+exports.useMlinkWagmiAdapter = useMlinkWagmiAdapter;
+//# sourceMappingURL=index.js.map
+//# sourceMappingURL=index.js.map