@tangle-network/blueprint-ui 0.5.3 → 0.5.5

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@tangle-network/blueprint-ui",
-  "version": "0.5.3",
+  "version": "0.5.5",
   "description": "Shared blueprint UI components, hooks, and contract utilities for Tangle Network apps",
   "license": "MIT OR Apache-2.0",
   "repository": {

package/src/components/OperatorOnboardingGuide.tsx

@@ -0,0 +1,61 @@
+/**
+ * OperatorOnboardingGuide — shared component for operator registration.
+ *
+ * Renders the registration command (cargo-tangle or cast) with a copy button.
+ * Each blueprint app (trading, sandbox, bazaar) used to reimplement this;
+ * now they install <OperatorOnboardingGuide> and pass their blueprint config.
+ */
+import { type FC, useCallback, useState } from 'react';
+import { Button } from './ui/button';
+import {
+  useRegistrationCommand,
+  type RegistrationCommandOptions,
+} from '../hooks/useRegistrationCommand';
+
+export interface OperatorOnboardingGuideProps
+  extends RegistrationCommandOptions {
+  /** Optional title override. Defaults to "Register as operator". */
+  title?: string;
+  /** Optional description shown above the command. */
+  description?: string;
+}
+
+export const OperatorOnboardingGuide: FC<OperatorOnboardingGuideProps> = ({
+  title = 'Register as operator',
+  description = 'Run this command on your operator VPS to register for this blueprint on-chain.',
+  ...commandOptions
+}) => {
+  const { command, label, blueprintIdNumber } =
+    useRegistrationCommand(commandOptions);
+  const [copied, setCopied] = useState(false);
+
+  const handleCopy = useCallback(() => {
+    navigator.clipboard.writeText(command).then(() => {
+      setCopied(true);
+      setTimeout(() => setCopied(false), 2000);
+    });
+  }, [command]);
+
+  return (
+    <div className="space-y-4">
+      <div>
+        <h3 className="text-lg font-semibold text-foreground">{title}</h3>
+        <p className="text-sm text-muted-foreground mt-1">{description}</p>
+      </div>
+
+      <div className="rounded-lg border border-border bg-muted/30 p-4">
+        <div className="flex items-center justify-between mb-2">
+          <span className="text-xs font-mono text-muted-foreground uppercase tracking-wider">
+            Blueprint #{blueprintIdNumber} · {label}
+          </span>
+          <Button size="sm" variant="outline" onClick={handleCopy}>
+            {copied ? 'Copied!' : 'Copy'}
+          </Button>
+        </div>
+        <pre className="text-sm font-mono text-foreground overflow-x-auto whitespace-pre-wrap break-all">
+          {command}
+        </pre>
+      </div>
+    </div>
+  );
+};

package/src/components.ts

@@ -55,3 +55,11 @@ export { JobExecutionDialog } from './components/forms/JobExecutionDialog';
 
 // ── Blueprint Host ──
 export { BlueprintHostHero, BlueprintHostPanel } from './host';
+
+// ── Blueprint flows ──
+export { OperatorOnboardingGuide } from './components/OperatorOnboardingGuide';
+export type { OperatorOnboardingGuideProps } from './components/OperatorOnboardingGuide';
+
+// ── Blueprint flows ──
+export { OperatorOnboardingGuide } from './components/OperatorOnboardingGuide';
+export type { OperatorOnboardingGuideProps } from './components/OperatorOnboardingGuide';

package/src/hooks/useRegistrationCommand.ts

@@ -0,0 +1,83 @@
+/**
+ * Builds the operator registration command for a Tangle blueprint.
+ *
+ * Each blueprint app (trading arena, agent-sandbox, bazaar) used to reimplement
+ * this — encoding the `registerOperator` call, building the CLI command, and
+ * polling readiness. Lifted here so they install one hook instead of forking.
+ */
+import { useMemo } from 'react';
+
+export type RegistrationMode = 'cargo-tangle' | 'cast';
+
+export interface RegistrationCommandOptions {
+  blueprintId: bigint;
+  rpcAddress: string;
+  ecdsaPublicKey: string;
+  rpcUrl: string;
+  registrationInputs?: string;
+  mode?: RegistrationMode;
+  /** Contract address for cast mode (defaults to TANGLE_CORE placeholder). */
+  servicesAddress?: string;
+}
+
+export interface RegistrationCommandResult {
+  /** The copy-paste command for the operator to run on their VPS. */
+  command: string;
+  /** A human-readable label for the command type. */
+  label: string;
+  /** The blueprint id as a plain number (for display). */
+  blueprintIdNumber: number;
+}
+
+/**
+ * Builds the operator registration command string for the given blueprint.
+ * Two modes:
+ * - `cargo-tangle` (default) — the canonical `cargo tangle blueprint register` flow.
+ * - `cast` — raw `cast send` for operators who manage their own keys.
+ */
+export function useRegistrationCommand(
+  options: RegistrationCommandOptions,
+): RegistrationCommandResult {
+  const {
+    blueprintId,
+    rpcAddress,
+    ecdsaPublicKey,
+    rpcUrl,
+    registrationInputs = '0x',
+    mode = 'cargo-tangle',
+    servicesAddress = 'TANGLE_CORE',
+  } = options;
+
+  const blueprintIdNumber = Number(blueprintId);
+
+  const command = useMemo(() => {
+    if (mode === 'cast') {
+      return [
+        `cast send ${servicesAddress} \\`,
+        `  "registerOperator(uint64,bytes,string,bytes)" \\`,
+        `  ${blueprintIdNumber} \\`,
+        `  ${ecdsaPublicKey} \\`,
+        `  ${rpcAddress} \\`,
+        `  ${registrationInputs} \\`,
+        `  --rpc-url ${rpcUrl} \\`,
+        `  --private-key <YOUR_OPERATOR_KEY>`,
+      ].join('\n');
+    }
+
+    const wsUrl = rpcUrl.replace(/^http/, 'ws');
+
+    return [
+      `cargo tangle blueprint register \\`,
+      `  --blueprint-id ${blueprintIdNumber} \\`,
+      `  --http-rpc-url ${rpcUrl} \\`,
+      `  --ws-rpc-url ${wsUrl} \\`,
+      `  --keystore-uri <YOUR_KEYSTORE> \\`,
+      `  --rpc-address ${rpcAddress} \\`,
+      `  --ecdsa-public-key ${ecdsaPublicKey}`,
+    ].join('\n');
+  }, [blueprintIdNumber, ecdsaPublicKey, mode, registrationInputs, rpcAddress, rpcUrl, servicesAddress]);
+
+  const label = mode === 'cast' ? 'cast send (raw)' : 'cargo-tangle (canonical)';
+
+  return { command, label, blueprintIdNumber };
+}

package/src/hooks/useServiceRequest.ts

@@ -0,0 +1,52 @@
+/**
+ * Hook to request a service instance on-chain.
+ * Thin wrapper around wagmi's useWriteContract + the existing tangleServicesAbi.
+ */
+import { useWriteContract } from 'wagmi';
+import { tangleServicesAbi } from '../contracts/abi';
+import { getAddresses } from '../contracts/publicClient';
+import type { Address } from 'viem';
+import { useCallback } from 'react';
+
+export interface ServiceRequestParams {
+  blueprintId: bigint;
+  operators: Address[];
+  config: `0x${string}`;
+  permittedCallers: Address[];
+  ttl: bigint;
+  paymentToken: Address;
+  paymentAmount: bigint;
+}
+
+export function useServiceRequest(): {
+  requestService: (params: ServiceRequestParams) => Promise<`0x${string}`>;
+  isPending: boolean;
+  error: Error | null;
+  txHash: `0x${string}` | undefined;
+} {
+  const { writeContractAsync, isPending, error, data: txHash } =
+    useWriteContract();
+
+  const requestService = useCallback(
+    async (params: ServiceRequestParams) => {
+      const addresses = getAddresses();
+      return writeContractAsync({
+        address: addresses.services,
+        abi: tangleServicesAbi,
+        functionName: 'requestService',
+        args: [
+          params.blueprintId,
+          params.operators,
+          params.config,
+          params.permittedCallers,
+          params.ttl,
+          params.paymentToken,
+          params.paymentAmount,
+        ],
+      });
+    },
+    [writeContractAsync],
+  );
+
+  return { requestService, isPending, error, txHash };
+}

package/src/index.ts

@@ -123,3 +123,19 @@ export type { UseSidecarAuthOptions, SidecarAuth } from './hooks/useSidecarAuth'
 export { useSidecarAuth } from './hooks/useSidecarAuth';
 export { useWagmiSidecarAuth } from './hooks/useWagmiSidecarAuth';
 export { useWalletEthBalance } from './hooks/useWalletEthBalance';
+
+// ── Registration ──
+export { useRegistrationCommand } from './hooks/useRegistrationCommand';
+export type { RegistrationCommandOptions, RegistrationCommandResult, RegistrationMode } from './hooks/useRegistrationCommand';
+
+// ── Service Request ──
+export { useServiceRequest } from './hooks/useServiceRequest';
+export type { ServiceRequestParams } from './hooks/useServiceRequest';
+
+// ── Registration ──
+export { useRegistrationCommand } from './hooks/useRegistrationCommand';
+export type { RegistrationCommandOptions, RegistrationCommandResult, RegistrationMode } from './hooks/useRegistrationCommand';
+
+// ── Service Request ──
+export { useServiceRequest } from './hooks/useServiceRequest';
+export type { ServiceRequestParams } from './hooks/useServiceRequest';

package/dist/BlueprintHostPanel-L1KKLNbr.d.ts

@@ -1,124 +0,0 @@
-import { Address } from 'viem';
-import * as react_jsx_runtime from 'react/jsx-runtime';
-import * as React from 'react';
-import * as class_variance_authority_types from 'class-variance-authority/types';
-import { VariantProps } from 'class-variance-authority';
-
-/**
- * Blueprint Registry — defines the metadata layer for Tangle blueprints.
- *
- * Each blueprint exposes a set of jobs. The registry maps on-chain job IDs
- * to human-readable metadata: labels, descriptions, categories, form fields,
- * and pricing info. This enables the UI to render appropriate forms for each
- * job without procedurally generating UI from raw ABI data.
- *
- * Third-party blueprints can register here to appear in the wizard.
- */
-type JobCategory = 'lifecycle' | 'execution' | 'batch' | 'workflow' | 'ssh' | 'management';
-interface JobFieldDef {
-    name: string;
-    label: string;
-    type: 'text' | 'textarea' | 'number' | 'boolean' | 'select' | 'json' | 'combobox';
-    placeholder?: string;
-    required?: boolean;
-    defaultValue?: string | number | boolean;
-    options?: {
-        label: string;
-        value: string;
-    }[];
-    helperText?: string;
-    /** Minimum allowed value for number fields */
-    min?: number;
-    /** Maximum allowed value for number fields */
-    max?: number;
-    /** Step increment for number fields */
-    step?: number;
-    /** Solidity ABI type for encoding (e.g. 'string', 'uint64', 'bool', 'uint8') */
-    abiType?: string;
-    /** ABI param name if different from `name` (e.g. 'agent_identifier' vs 'agentIdentifier') */
-    abiParam?: string;
-    /** Field is included in ABI encoding but never shown in form (e.g. sidecar_token) */
-    internal?: boolean;
-}
-/** ABI param injected from runtime context, not user input (e.g. sidecar_url, sandbox_id) */
-interface AbiContextParam {
-    abiName: string;
-    abiType: string;
-}
-interface JobDefinition {
-    id: number;
-    name: string;
-    label: string;
-    description: string;
-    category: JobCategory;
-    icon: string;
-    pricingMultiplier: number;
-    /** Fields the user needs to fill for this job */
-    fields: JobFieldDef[];
-    /** Whether this job requires an existing sandbox to target */
-    requiresSandbox: boolean;
-    /** Optional warning shown before submission */
-    warning?: string;
-    /** ABI params prepended from runtime context (e.g. sidecar_url for sandbox jobs) */
-    contextParams?: AbiContextParam[];
-    /** Override for jobs with complex ABI encoding (e.g. nested structs) */
-    customEncoder?: (values: Record<string, unknown>, context?: Record<string, unknown>) => `0x${string}`;
-}
-interface BlueprintDefinition {
-    id: string;
-    name: string;
-    version: string;
-    description: string;
-    icon: string;
-    color: string;
-    /** Contract address per chain ID — resolved at runtime */
-    contracts: Record<number, Address>;
-    /** Supported job definitions */
-    jobs: JobDefinition[];
-    /** Category ordering for the UI */
-    categories: {
-        key: JobCategory;
-        label: string;
-        icon: string;
-    }[];
-}
-declare function registerBlueprint(bp: BlueprintDefinition): void;
-declare function getBlueprint(id: string): BlueprintDefinition | undefined;
-declare function getAllBlueprints(): BlueprintDefinition[];
-declare function getBlueprintJobs(blueprintId: string, category?: JobCategory): JobDefinition[];
-declare function getJobById(blueprintId: string, jobId: number): JobDefinition | undefined;
-
-declare const buttonVariants: (props?: ({
-    variant?: "default" | "link" | "success" | "secondary" | "destructive" | "outline" | "ghost" | null | undefined;
-    size?: "default" | "sm" | "lg" | "icon" | "icon-sm" | null | undefined;
-} & class_variance_authority_types.ClassProp) | undefined) => string;
-declare function Button({ className, variant, size, asChild, ...props }: React.ComponentProps<'button'> & VariantProps<typeof buttonVariants> & {
-    asChild?: boolean;
-}): react_jsx_runtime.JSX.Element;
-
-type Action = {
-    label: string;
-    href?: string;
-    onClick?: () => void;
-    variant?: React.ComponentProps<typeof Button>['variant'];
-    disabled?: boolean;
-};
-type BlueprintHostHeroProps = {
-    title: string;
-    tagline?: string;
-    description?: string;
-    badges?: string[];
-    actions?: Action[];
-    children?: React.ReactNode;
-    className?: string;
-};
-declare function BlueprintHostHero({ title, tagline, description, badges, actions, children, className, }: BlueprintHostHeroProps): react_jsx_runtime.JSX.Element;
-
-type BlueprintHostPanelProps = {
-    title: string;
-    children: React.ReactNode;
-    className?: string;
-};
-declare function BlueprintHostPanel({ title, children, className, }: BlueprintHostPanelProps): react_jsx_runtime.JSX.Element;
-
-export { type AbiContextParam as A, type BlueprintDefinition as B, type JobDefinition as J, BlueprintHostHero as a, type BlueprintHostHeroProps as b, BlueprintHostPanel as c, type BlueprintHostPanelProps as d, type JobCategory as e, type JobFieldDef as f, getAllBlueprints as g, getBlueprint as h, getBlueprintJobs as i, getJobById as j, Button as k, buttonVariants as l, registerBlueprint as r };

package/dist/chunk-37ADATBT.js

@@ -1,55 +0,0 @@
-// src/preset.ts
-function bpThemeTokens(prefix) {
-  return {
-    elements: {
-      borderColor: `var(--${prefix}-elements-borderColor)`,
-      borderColorActive: `var(--${prefix}-elements-borderColorActive)`,
-      background: {
-        depth: {
-          1: `var(--${prefix}-elements-bg-depth-1)`,
-          2: `var(--${prefix}-elements-bg-depth-2)`,
-          3: `var(--${prefix}-elements-bg-depth-3)`,
-          4: `var(--${prefix}-elements-bg-depth-4)`
-        }
-      },
-      textPrimary: `var(--${prefix}-elements-textPrimary)`,
-      textSecondary: `var(--${prefix}-elements-textSecondary)`,
-      textTertiary: `var(--${prefix}-elements-textTertiary)`,
-      button: {
-        primary: {
-          background: `var(--${prefix}-elements-button-primary-background)`,
-          backgroundHover: `var(--${prefix}-elements-button-primary-backgroundHover)`,
-          text: `var(--${prefix}-elements-button-primary-text)`
-        },
-        secondary: {
-          background: `var(--${prefix}-elements-button-secondary-background)`,
-          backgroundHover: `var(--${prefix}-elements-button-secondary-backgroundHover)`,
-          text: `var(--${prefix}-elements-button-secondary-text)`
-        },
-        danger: {
-          background: `var(--${prefix}-elements-button-danger-background)`,
-          backgroundHover: `var(--${prefix}-elements-button-danger-backgroundHover)`,
-          text: `var(--${prefix}-elements-button-danger-text)`
-        }
-      },
-      icon: {
-        success: `var(--${prefix}-elements-icon-success)`,
-        error: `var(--${prefix}-elements-icon-error)`,
-        warning: `var(--${prefix}-elements-icon-warning)`,
-        primary: `var(--${prefix}-elements-icon-primary)`,
-        secondary: `var(--${prefix}-elements-icon-secondary)`
-      },
-      dividerColor: `var(--${prefix}-elements-dividerColor)`,
-      item: {
-        backgroundHover: `var(--${prefix}-elements-item-backgroundHover)`,
-        backgroundActive: `var(--${prefix}-elements-item-backgroundActive)`
-      },
-      focus: `var(--${prefix}-elements-focus)`
-    }
-  };
-}
-
-export {
-  bpThemeTokens
-};
-//# sourceMappingURL=chunk-37ADATBT.js.map

package/dist/chunk-37ADATBT.js.map

@@ -1 +0,0 @@
-{"version":3,"sources":["../src/preset.ts"],"sourcesContent":["/**\n * Blueprint UI semantic token theme for UnoCSS.\n *\n * Components in this package use classes like `text-bp-elements-textPrimary`.\n * Each consuming app maps these to their own CSS variables by adding this\n * theme object under a `bp` key in their UnoCSS config:\n *\n *   import { bpThemeTokens } from '@tangle-network/blueprint-ui/preset';\n *   // theme: { colors: { bp: bpThemeTokens('cloud') } }\n *   // theme: { colors: { bp: bpThemeTokens('arena') } }\n */\n\nexport function bpThemeTokens(prefix: string) {\n  return {\n    elements: {\n      borderColor: `var(--${prefix}-elements-borderColor)`,\n      borderColorActive: `var(--${prefix}-elements-borderColorActive)`,\n      background: {\n        depth: {\n          1: `var(--${prefix}-elements-bg-depth-1)`,\n          2: `var(--${prefix}-elements-bg-depth-2)`,\n          3: `var(--${prefix}-elements-bg-depth-3)`,\n          4: `var(--${prefix}-elements-bg-depth-4)`,\n        },\n      },\n      textPrimary: `var(--${prefix}-elements-textPrimary)`,\n      textSecondary: `var(--${prefix}-elements-textSecondary)`,\n      textTertiary: `var(--${prefix}-elements-textTertiary)`,\n      button: {\n        primary: {\n          background: `var(--${prefix}-elements-button-primary-background)`,\n          backgroundHover: `var(--${prefix}-elements-button-primary-backgroundHover)`,\n          text: `var(--${prefix}-elements-button-primary-text)`,\n        },\n        secondary: {\n          background: `var(--${prefix}-elements-button-secondary-background)`,\n          backgroundHover: `var(--${prefix}-elements-button-secondary-backgroundHover)`,\n          text: `var(--${prefix}-elements-button-secondary-text)`,\n        },\n        danger: {\n          background: `var(--${prefix}-elements-button-danger-background)`,\n          backgroundHover: `var(--${prefix}-elements-button-danger-backgroundHover)`,\n          text: `var(--${prefix}-elements-button-danger-text)`,\n        },\n      },\n      icon: {\n        success: `var(--${prefix}-elements-icon-success)`,\n        error: `var(--${prefix}-elements-icon-error)`,\n        warning: `var(--${prefix}-elements-icon-warning)`,\n        primary: `var(--${prefix}-elements-icon-primary)`,\n        secondary: `var(--${prefix}-elements-icon-secondary)`,\n      },\n      dividerColor: `var(--${prefix}-elements-dividerColor)`,\n      item: {\n        backgroundHover: `var(--${prefix}-elements-item-backgroundHover)`,\n        backgroundActive: `var(--${prefix}-elements-item-backgroundActive)`,\n      },\n      focus: `var(--${prefix}-elements-focus)`,\n    },\n  };\n}\n"],"mappings":";AAYO,SAAS,cAAc,QAAgB;AAC5C,SAAO;AAAA,IACL,UAAU;AAAA,MACR,aAAa,SAAS,MAAM;AAAA,MAC5B,mBAAmB,SAAS,MAAM;AAAA,MAClC,YAAY;AAAA,QACV,OAAO;AAAA,UACL,GAAG,SAAS,MAAM;AAAA,UAClB,GAAG,SAAS,MAAM;AAAA,UAClB,GAAG,SAAS,MAAM;AAAA,UAClB,GAAG,SAAS,MAAM;AAAA,QACpB;AAAA,MACF;AAAA,MACA,aAAa,SAAS,MAAM;AAAA,MAC5B,eAAe,SAAS,MAAM;AAAA,MAC9B,cAAc,SAAS,MAAM;AAAA,MAC7B,QAAQ;AAAA,QACN,SAAS;AAAA,UACP,YAAY,SAAS,MAAM;AAAA,UAC3B,iBAAiB,SAAS,MAAM;AAAA,UAChC,MAAM,SAAS,MAAM;AAAA,QACvB;AAAA,QACA,WAAW;AAAA,UACT,YAAY,SAAS,MAAM;AAAA,UAC3B,iBAAiB,SAAS,MAAM;AAAA,UAChC,MAAM,SAAS,MAAM;AAAA,QACvB;AAAA,QACA,QAAQ;AAAA,UACN,YAAY,SAAS,MAAM;AAAA,UAC3B,iBAAiB,SAAS,MAAM;AAAA,UAChC,MAAM,SAAS,MAAM;AAAA,QACvB;AAAA,MACF;AAAA,MACA,MAAM;AAAA,QACJ,SAAS,SAAS,MAAM;AAAA,QACxB,OAAO,SAAS,MAAM;AAAA,QACtB,SAAS,SAAS,MAAM;AAAA,QACxB,SAAS,SAAS,MAAM;AAAA,QACxB,WAAW,SAAS,MAAM;AAAA,MAC5B;AAAA,MACA,cAAc,SAAS,MAAM;AAAA,MAC7B,MAAM;AAAA,QACJ,iBAAiB,SAAS,MAAM;AAAA,QAChC,kBAAkB,SAAS,MAAM;AAAA,MACnC;AAAA,MACA,OAAO,SAAS,MAAM;AAAA,IACxB;AAAA,EACF;AACF;","names":[]}