@tangle-network/blueprint-ui 0.1.0

package/src/hooks/useJobPrice.ts

@@ -0,0 +1,283 @@
+import { useState, useEffect, useCallback, useRef } from 'react';
+import type { Address } from 'viem';
+import { toHex } from 'viem';
+import { solvePoW, formatCost } from './useQuotes';
+
+/**
+ * Per-job RFQ hook — fetches price quotes for a specific job before submission.
+ *
+ * Implements the GetJobPrice protocol:
+ * 1. Solve PoW challenge (same as service-level RFQ)
+ * 2. POST to operator's /pricing/job-quote endpoint
+ * 3. Return signed JobQuoteDetails for submitJobFromQuote()
+ *
+ * This is the per-job counterpart to useQuotes (which handles service creation).
+ * Together they provide full RFQ coverage for the UI.
+ */
+
+// ── Types ──
+
+export interface JobQuote {
+  serviceId: bigint;
+  jobIndex: number;
+  price: bigint;
+  timestamp: bigint;
+  expiry: bigint;
+  signature: `0x${string}`;
+  operatorAddress: Address;
+}
+
+export interface UseJobPriceResult {
+  quote: JobQuote | null;
+  isLoading: boolean;
+  isSolvingPow: boolean;
+  error: string | null;
+  formattedPrice: string;
+  refetch: () => void;
+}
+
+/** Rewrite operator RPC hostname for browser reachability */
+function resolveOperatorRpc(raw: string): string {
+  if (typeof window === 'undefined') return raw;
+  const withProto = raw.includes('://') ? raw : `http://${raw}`;
+  try {
+    const url = new URL(withProto);
+    const pageHost = window.location.hostname;
+    const isNonRoutable =
+      url.hostname.endsWith('.local') ||
+      !url.hostname.includes('.') ||
+      url.hostname === '127.0.0.1' ||
+      url.hostname === 'localhost';
+    if (isNonRoutable && pageHost !== url.hostname) {
+      url.hostname = pageHost;
+    }
+    return url.toString().replace(/\/$/, '');
+  } catch {
+    return withProto;
+  }
+}
+
+// ── Hook ──
+
+export function useJobPrice(
+  operatorRpcUrl: string | undefined,
+  serviceId: bigint,
+  jobIndex: number,
+  blueprintId: bigint,
+  enabled: boolean,
+): UseJobPriceResult {
+  const [quote, setQuote] = useState<JobQuote | null>(null);
+  const [isLoading, setIsLoading] = useState(false);
+  const [isSolvingPow, setIsSolvingPow] = useState(false);
+  const [error, setError] = useState<string | null>(null);
+  const [fetchKey, setFetchKey] = useState(0);
+  const cancelledRef = useRef(false);
+
+  const refetch = useCallback(() => setFetchKey((k) => k + 1), []);
+
+  useEffect(() => {
+    if (!enabled || !operatorRpcUrl || serviceId === 0n) {
+      setQuote(null);
+      setError(null);
+      return;
+    }
+
+    cancelledRef.current = false;
+    setIsLoading(true);
+    setError(null);
+    setQuote(null);
+
+    async function fetchJobQuote() {
+      try {
+        const rpcUrl = resolveOperatorRpc(operatorRpcUrl!);
+        const timestamp = BigInt(Math.floor(Date.now() / 1000));
+
+        // Solve PoW
+        setIsSolvingPow(true);
+        const { proof } = await solvePoW(blueprintId, timestamp);
+        if (cancelledRef.current) return;
+        setIsSolvingPow(false);
+
+        // Fetch job price from operator
+        const response = await fetch(`${rpcUrl}/pricing/job-quote`, {
+          method: 'POST',
+          headers: { 'Content-Type': 'application/json' },
+          body: JSON.stringify({
+            service_id: String(serviceId),
+            job_index: jobIndex,
+            proof_of_work: toHex(proof),
+            challenge_timestamp: String(timestamp),
+          }),
+          signal: AbortSignal.timeout(10_000),
+        });
+
+        if (!response.ok) {
+          throw new Error(`HTTP ${response.status}: ${await response.text().catch(() => 'Unknown error')}`);
+        }
+
+        const data = await response.json();
+        if (cancelledRef.current) return;
+
+        setQuote({
+          serviceId: BigInt(data.service_id ?? serviceId),
+          jobIndex: data.job_index ?? jobIndex,
+          price: BigInt(data.price ?? '0'),
+          timestamp: BigInt(data.timestamp ?? timestamp),
+          expiry: BigInt(data.expiry ?? '0'),
+          signature: (data.signature ?? '0x') as `0x${string}`,
+          operatorAddress: data.operator as Address,
+        });
+      } catch (err) {
+        if (!cancelledRef.current) {
+          setError(err instanceof Error ? err.message : String(err));
+        }
+      } finally {
+        if (!cancelledRef.current) {
+          setIsLoading(false);
+          setIsSolvingPow(false);
+        }
+      }
+    }
+
+    fetchJobQuote();
+    return () => {
+      cancelledRef.current = true;
+    };
+  }, [operatorRpcUrl, serviceId, jobIndex, blueprintId, enabled, fetchKey]);
+
+  const formattedPrice = quote ? formatCost(quote.price) : '--';
+
+  return { quote, isLoading, isSolvingPow, error, formattedPrice, refetch };
+}
+
+/**
+ * Batch version — fetches job prices for multiple jobs at once.
+ * Used by the blueprint job list to show all prices simultaneously.
+ */
+export interface JobPriceEntry {
+  jobIndex: number;
+  jobName: string;
+  price: bigint;
+  formattedPrice: string;
+  mode: 'flat' | 'dynamic' | 'free';
+  quote: JobQuote | null;
+  error: string | null;
+}
+
+export interface UseJobPricesResult {
+  prices: JobPriceEntry[];
+  isLoading: boolean;
+  error: string | null;
+  refetch: () => void;
+}
+
+export function useJobPrices(
+  operatorRpcUrl: string | undefined,
+  serviceId: bigint,
+  blueprintId: bigint,
+  jobIndexes: { index: number; name: string; multiplier: number }[],
+  enabled: boolean,
+): UseJobPricesResult {
+  const [prices, setPrices] = useState<JobPriceEntry[]>([]);
+  const [isLoading, setIsLoading] = useState(false);
+  const [error, setError] = useState<string | null>(null);
+  const [fetchKey, setFetchKey] = useState(0);
+
+  const refetch = useCallback(() => setFetchKey((k) => k + 1), []);
+
+  useEffect(() => {
+    if (!enabled || !operatorRpcUrl || serviceId === 0n || jobIndexes.length === 0) {
+      setPrices([]);
+      setError(null);
+      return;
+    }
+
+    let cancelled = false;
+    setIsLoading(true);
+    setError(null);
+
+    async function fetchAllPrices() {
+      try {
+        const rpcUrl = resolveOperatorRpc(operatorRpcUrl!);
+        const timestamp = BigInt(Math.floor(Date.now() / 1000));
+        const { proof } = await solvePoW(blueprintId, timestamp);
+        if (cancelled) return;
+
+        // Fetch all job prices in parallel
+        const results = await Promise.allSettled(
+          jobIndexes.map(async (job) => {
+            const response = await fetch(`${rpcUrl}/pricing/job-quote`, {
+              method: 'POST',
+              headers: { 'Content-Type': 'application/json' },
+              body: JSON.stringify({
+                service_id: String(serviceId),
+                job_index: job.index,
+                proof_of_work: toHex(proof),
+                challenge_timestamp: String(timestamp),
+              }),
+              signal: AbortSignal.timeout(10_000),
+            });
+
+            if (!response.ok) return null;
+            return response.json();
+          }),
+        );
+
+        if (cancelled) return;
+
+        const entries: JobPriceEntry[] = jobIndexes.map((job, i) => {
+          const result = results[i];
+          if (result.status === 'fulfilled' && result.value) {
+            const data = result.value;
+            const price = BigInt(data.price ?? '0');
+            return {
+              jobIndex: job.index,
+              jobName: job.name,
+              price,
+              formattedPrice: formatCost(price),
+              mode: (data.mode ?? 'flat') as 'flat' | 'dynamic' | 'free',
+              quote: {
+                serviceId: BigInt(data.service_id ?? serviceId),
+                jobIndex: job.index,
+                price,
+                timestamp: BigInt(data.timestamp ?? timestamp),
+                expiry: BigInt(data.expiry ?? '0'),
+                signature: (data.signature ?? '0x') as `0x${string}`,
+                operatorAddress: data.operator as Address,
+              },
+              error: null,
+            };
+          }
+          // Fallback: estimate from multiplier (base rate = 0.001 TNT = 1e15 wei)
+          const estimatedPrice = BigInt(job.multiplier) * 1_000_000_000_000_000n;
+          return {
+            jobIndex: job.index,
+            jobName: job.name,
+            price: estimatedPrice,
+            formattedPrice: `~${formatCost(estimatedPrice)}`,
+            mode: 'flat' as const,
+            quote: null,
+            error: 'No RFQ response — showing estimate',
+          };
+        });
+
+        setPrices(entries);
+      } catch (err) {
+        if (!cancelled) {
+          setError(err instanceof Error ? err.message : String(err));
+        }
+      } finally {
+        if (!cancelled) {
+          setIsLoading(false);
+        }
+      }
+    }
+
+    fetchAllPrices();
+    return () => {
+      cancelled = true;
+    };
+  }, [operatorRpcUrl, serviceId, blueprintId, jobIndexes, enabled, fetchKey]);
+
+  return { prices, isLoading, error, refetch };
+}

package/src/hooks/useOperators.ts

@@ -0,0 +1,141 @@
+import { useState, useEffect } from 'react';
+import type { Address } from 'viem';
+import { tangleOperatorsAbi } from '../contracts/abi';
+import { publicClient, getAddresses } from '../contracts/publicClient';
+
+export interface DiscoveredOperator {
+  address: Address;
+  ecdsaPublicKey: string;
+  rpcAddress: string;
+}
+
+/**
+ * Discover operators registered for a blueprint by scanning OperatorRegistered
+ * events, then verifying each is still active via multicall.
+ */
+export function useOperators(blueprintId: bigint) {
+  const [operators, setOperators] = useState<DiscoveredOperator[]>([]);
+  const [operatorCount, setOperatorCount] = useState<bigint>(0n);
+  const [isLoading, setIsLoading] = useState(true);
+  const [error, setError] = useState<Error | null>(null);
+
+  useEffect(() => {
+    let cancelled = false;
+    const addrs = getAddresses();
+
+    async function discover() {
+      setIsLoading(true);
+      setError(null);
+
+      try {
+        // Step 1: Check operator count
+        const count = await publicClient.readContract({
+          address: addrs.services,
+          abi: tangleOperatorsAbi,
+          functionName: 'blueprintOperatorCount',
+          args: [blueprintId],
+        });
+        if (cancelled) return;
+        setOperatorCount(count as bigint);
+
+        if ((count as bigint) === 0n) {
+          setOperators([]);
+          setIsLoading(false);
+          return;
+        }
+
+        // Step 2: Fetch OperatorRegistered logs
+        const registeredLogs = await publicClient.getLogs({
+          address: addrs.services,
+          event: {
+            type: 'event' as const,
+            name: 'OperatorRegistered',
+            inputs: [
+              { name: 'blueprintId', type: 'uint64', indexed: true },
+              { name: 'operator', type: 'address', indexed: true },
+              { name: 'ecdsaPublicKey', type: 'bytes', indexed: false },
+              { name: 'rpcAddress', type: 'string', indexed: false },
+            ],
+          },
+          args: { blueprintId },
+          fromBlock: 0n,
+          toBlock: 'latest',
+        });
+
+        if (cancelled) return;
+
+        // Deduplicate by address (keep latest)
+        const byAddress = new Map<Address, DiscoveredOperator>();
+        for (const log of registeredLogs) {
+          const addr = log.args.operator as Address | undefined;
+          if (!addr) continue;
+          byAddress.set(addr, {
+            address: addr,
+            ecdsaPublicKey: (log.args.ecdsaPublicKey as string) ?? '0x',
+            rpcAddress: (log.args.rpcAddress as string) ?? '',
+          });
+        }
+
+        const candidates = Array.from(byAddress.values());
+        if (candidates.length === 0) {
+          setOperators([]);
+          setIsLoading(false);
+          return;
+        }
+
+        // Step 3: Verify each is still registered + fetch current preferences
+        const [registrationResults, preferencesResults] = await Promise.all([
+          publicClient.multicall({
+            contracts: candidates.map((op) => ({
+              address: addrs.services,
+              abi: tangleOperatorsAbi,
+              functionName: 'isOperatorRegistered' as const,
+              args: [blueprintId, op.address] as const,
+            })),
+          }),
+          publicClient.multicall({
+            contracts: candidates.map((op) => ({
+              address: addrs.services,
+              abi: tangleOperatorsAbi,
+              functionName: 'getOperatorPreferences' as const,
+              args: [blueprintId, op.address] as const,
+            })),
+          }),
+        ]);
+
+        if (cancelled) return;
+
+        const active: DiscoveredOperator[] = [];
+        candidates.forEach((op, i) => {
+          if (registrationResults[i]?.result !== true) return;
+          const prefs = preferencesResults[i];
+          if (prefs?.status === 'success' && prefs.result != null) {
+            const result = prefs.result as Record<string, unknown>;
+            const ecdsaKey = Array.isArray(result) ? String(result[0] ?? '') : String((result as any).ecdsaPublicKey ?? '');
+            const rpcAddr = Array.isArray(result) ? String(result[1] ?? '') : String((result as any).rpcAddress ?? '');
+            active.push({
+              ...op,
+              ecdsaPublicKey: ecdsaKey || op.ecdsaPublicKey,
+              rpcAddress: rpcAddr || op.rpcAddress,
+            });
+          } else {
+            active.push(op);
+          }
+        });
+
+        setOperators(active);
+      } catch (err) {
+        if (!cancelled) {
+          setError(err instanceof Error ? err : new Error(String(err)));
+        }
+      } finally {
+        if (!cancelled) setIsLoading(false);
+      }
+    }
+
+    discover();
+    return () => { cancelled = true; };
+  }, [blueprintId]);
+
+  return { operators, isLoading, error, operatorCount };
+}

package/src/hooks/useProvisionProgress.ts

@@ -0,0 +1,125 @@
+import { useCallback, useEffect, useRef, useState } from 'react';
+
+// ---------------------------------------------------------------------------
+// Types matching sandbox-runtime/src/provision_progress.rs
+// ---------------------------------------------------------------------------
+
+export type ProvisionPhase =
+  | 'queued'
+  | 'image_pull'
+  | 'container_create'
+  | 'container_start'
+  | 'health_check'
+  | 'ready'
+  | 'failed';
+
+export interface ProvisionStatus {
+  call_id: number;
+  sandbox_id: string | null;
+  phase: ProvisionPhase;
+  message: string | null;
+  started_at: number;
+  updated_at: number;
+  progress_pct: number;
+  sidecar_url: string | null;
+}
+
+const PHASE_LABELS: Record<ProvisionPhase, string> = {
+  queued: 'Queued',
+  image_pull: 'Pulling image',
+  container_create: 'Creating container',
+  container_start: 'Starting container',
+  health_check: 'Health check',
+  ready: 'Ready',
+  failed: 'Failed',
+};
+
+export function getPhaseLabel(phase: ProvisionPhase): string {
+  return PHASE_LABELS[phase] ?? phase;
+}
+
+export function isTerminalPhase(phase: ProvisionPhase): boolean {
+  return phase === 'ready' || phase === 'failed';
+}
+
+// ---------------------------------------------------------------------------
+// Hook
+// ---------------------------------------------------------------------------
+
+const POLL_INTERVAL = 2000;
+
+interface UseProvisionProgressOptions {
+  callId: number | null;
+  apiUrl?: string;
+  enabled?: boolean;
+}
+
+export function useProvisionProgress({
+  callId,
+  apiUrl,
+  enabled = true,
+}: UseProvisionProgressOptions) {
+  const [status, setStatus] = useState<ProvisionStatus | null>(null);
+  const [error, setError] = useState<string | null>(null);
+  const [isPolling, setIsPolling] = useState(false);
+  const intervalRef = useRef<ReturnType<typeof setInterval> | null>(null);
+
+  const baseUrl = apiUrl ?? import.meta.env.VITE_OPERATOR_API_URL ?? 'http://localhost:9090';
+
+  const fetchProgress = useCallback(async () => {
+    if (callId == null) return;
+
+    try {
+      const res = await fetch(`${baseUrl}/api/provisions/${callId}`);
+      if (res.status === 404) {
+        // Not yet tracked — keep polling
+        return;
+      }
+      if (!res.ok) {
+        throw new Error(`HTTP ${res.status}`);
+      }
+      const data: ProvisionStatus = await res.json();
+      setStatus(data);
+      setError(null);
+
+      // Stop polling on terminal phase
+      if (isTerminalPhase(data.phase) && intervalRef.current) {
+        clearInterval(intervalRef.current);
+        intervalRef.current = null;
+        setIsPolling(false);
+      }
+    } catch (err) {
+      setError(err instanceof Error ? err.message : 'Failed to fetch provision status');
+    }
+  }, [callId, baseUrl]);
+
+  useEffect(() => {
+    if (!enabled || callId == null) return;
+
+    setIsPolling(true);
+    fetchProgress(); // Initial fetch
+
+    intervalRef.current = setInterval(fetchProgress, POLL_INTERVAL);
+
+    return () => {
+      if (intervalRef.current) {
+        clearInterval(intervalRef.current);
+        intervalRef.current = null;
+      }
+      setIsPolling(false);
+    };
+  }, [enabled, callId, fetchProgress]);
+
+  return {
+    status,
+    error,
+    isPolling,
+    phase: status?.phase ?? null,
+    progressPct: status?.progress_pct ?? 0,
+    sandboxId: status?.sandbox_id ?? null,
+    sidecarUrl: status?.sidecar_url ?? null,
+    message: status?.message ?? null,
+    isReady: status?.phase === 'ready',
+    isFailed: status?.phase === 'failed',
+  };
+}