@tangle-network/blueprint-ui 0.1.0

package/src/hooks/useQuotes.ts

@@ -0,0 +1,261 @@
+import { useState, useEffect, useCallback } from 'react';
+import type { Address } from 'viem';
+import { sha256 as viemSha256, toHex } from 'viem';
+import type { DiscoveredOperator } from './useOperators';
+import { resolveOperatorRpc } from '../utils/resolveOperatorRpc';
+
+/**
+ * RFQ (Request for Quote) hook — fetches pricing quotes from operators.
+ *
+ * Implements the Tangle pricing protocol:
+ * 1. Solve PoW challenge (SHA256 with 20-bit difficulty)
+ * 2. Send gRPC GetPrice request to each operator's registered RPC
+ * 3. Collect signed QuoteDetails for createServiceFromQuotes()
+ *
+ * When operators don't have a pricing engine (no rpcAddress), falls back to
+ * multiplier-based estimation from the on-chain getDefaultJobRates().
+ */
+
+// ── Types ──
+
+export interface OperatorQuote {
+  operator: Address;
+  totalCost: bigint;
+  signature: `0x${string}`;
+  details: {
+    blueprintId: bigint;
+    ttlBlocks: bigint;
+    totalCost: bigint;
+    timestamp: bigint;
+    expiry: bigint;
+    securityCommitments: readonly {
+      asset: { kind: number; token: Address };
+      exposureBps: number;
+    }[];
+  };
+  costRate: number;
+}
+
+export interface UseQuotesResult {
+  quotes: OperatorQuote[];
+  isLoading: boolean;
+  isSolvingPow: boolean;
+  errors: Map<Address, string>;
+  totalCost: bigint;
+  refetch: () => void;
+}
+
+// ── PoW solver (mirrors Tangle pricing-engine/src/pow.rs) ──
+
+const POW_DIFFICULTY = 20;
+const WEI_PER_TNT = 1_000_000_000_000_000_000; // 10^18
+
+function sha256(data: Uint8Array): Uint8Array {
+  return viemSha256(data, 'bytes');
+}
+
+function generateChallenge(blueprintId: bigint, timestamp: bigint): Uint8Array {
+  const input = new Uint8Array(16);
+  const view = new DataView(input.buffer);
+  view.setBigUint64(0, blueprintId, false);
+  view.setBigUint64(8, timestamp, false);
+  return sha256(input);
+}
+
+function checkDifficulty(hash: Uint8Array, difficulty: number): boolean {
+  const zeroBytes = Math.floor(difficulty / 8);
+  const zeroBits = difficulty % 8;
+  for (let i = 0; i < zeroBytes; i++) {
+    if (hash[i] !== 0) return false;
+  }
+  if (zeroBits > 0) {
+    const mask = 0xff << (8 - zeroBits);
+    if ((hash[zeroBytes] & mask) !== 0) return false;
+  }
+  return true;
+}
+
+export async function solvePoW(
+  blueprintId: bigint,
+  timestamp: bigint,
+): Promise<{ hash: Uint8Array; nonce: number; proof: Uint8Array }> {
+  const challenge = generateChallenge(blueprintId, timestamp);
+  const buf = new Uint8Array(challenge.length + 8);
+  buf.set(challenge, 0);
+  const view = new DataView(buf.buffer);
+
+  for (let nonce = 0; nonce < 0x1_0000_0000; nonce++) {
+    view.setBigUint64(challenge.length, BigInt(nonce), false);
+    const hash = sha256(buf);
+    if (checkDifficulty(hash, POW_DIFFICULTY)) {
+      // Bincode-serialize Proof { hash: Vec<u8>, nonce: u64 }
+      const proof = new Uint8Array(8 + 32 + 8);
+      const pv = new DataView(proof.buffer);
+      pv.setBigUint64(0, 32n, true);
+      proof.set(hash, 8);
+      pv.setBigUint64(40, BigInt(nonce), true);
+      return { hash, nonce, proof };
+    }
+    // Yield to browser every 5000 iterations
+    if (nonce % 5000 === 0 && nonce > 0) {
+      await new Promise((r) => setTimeout(r, 0));
+    }
+  }
+  throw new Error('PoW: exhausted nonce space');
+}
+
+export function formatCost(totalCost: bigint): string {
+  // totalCost is in wei (1e18 wei = 1 TNT)
+  const tnt = Number(totalCost) / WEI_PER_TNT;
+  if (tnt === 0) return '0 TNT';
+  if (tnt < 0.001) return `${(tnt * 1_000_000).toFixed(2)} \u03bcTNT`;
+  if (tnt < 0.01) return `${(tnt * 1000).toFixed(2)} mTNT`;
+  if (tnt < 1000) return `${tnt.toFixed(4)} TNT`;
+  return `${tnt.toLocaleString(undefined, { maximumFractionDigits: 2 })} TNT`;
+}
+
+// ── Hook ──
+
+export function useQuotes(
+  operators: DiscoveredOperator[],
+  blueprintId: bigint,
+  ttlBlocks: bigint,
+  enabled: boolean,
+): UseQuotesResult {
+  const [quotes, setQuotes] = useState<OperatorQuote[]>([]);
+  const [isLoading, setIsLoading] = useState(false);
+  const [isSolvingPow, setIsSolvingPow] = useState(false);
+  const [errors, setErrors] = useState<Map<Address, string>>(new Map());
+  const [fetchKey, setFetchKey] = useState(0);
+
+  const refetch = useCallback(() => setFetchKey((k) => k + 1), []);
+
+  useEffect(() => {
+    if (!enabled || operators.length === 0) {
+      // Only set state if it's actually non-empty to avoid triggering re-renders
+      setQuotes((prev) => (prev.length === 0 ? prev : []));
+      setErrors((prev) => (prev.size === 0 ? prev : new Map()));
+      return;
+    }
+
+    let cancelled = false;
+    setIsLoading(true);
+    setIsSolvingPow(true);
+    setQuotes([]);
+    setErrors(new Map());
+
+    async function fetchQuotes() {
+      const results: OperatorQuote[] = [];
+      const errs = new Map<Address, string>();
+
+      const promises = operators.map(async (op) => {
+        try {
+          if (!op.rpcAddress) throw new Error('No RPC address registered');
+
+          const rpcUrl = resolveOperatorRpc(op.rpcAddress);
+          const timestamp = BigInt(Math.floor(Date.now() / 1000));
+
+          // Solve PoW challenge
+          if (!cancelled) setIsSolvingPow(true);
+          const { proof } = await solvePoW(blueprintId, timestamp);
+          if (!cancelled) setIsSolvingPow(false);
+
+          // Try gRPC GetPrice endpoint
+          // Since we may not have the generated protobuf types, try a JSON/REST
+          // fallback first, then gRPC if available
+          const response = await fetchPriceFromOperator(rpcUrl, {
+            blueprintId,
+            ttlBlocks,
+            proofOfWork: proof,
+            challengeTimestamp: timestamp,
+          });
+
+          if (!response) throw new Error('No quote returned from operator');
+
+          if (!cancelled) results.push(response);
+        } catch (err) {
+          if (!cancelled) {
+            errs.set(op.address, err instanceof Error ? err.message : String(err));
+          }
+        }
+      });
+
+      await Promise.allSettled(promises);
+
+      if (!cancelled) {
+        setQuotes(results);
+        setErrors(errs);
+        setIsLoading(false);
+        setIsSolvingPow(false);
+      }
+    }
+
+    fetchQuotes();
+    return () => {
+      cancelled = true;
+    };
+  }, [operators, blueprintId, ttlBlocks, enabled, fetchKey]);
+
+  const totalCost = quotes.reduce((sum, q) => sum + q.totalCost, 0n);
+
+  return { quotes, isLoading, isSolvingPow, errors, totalCost, refetch };
+}
+
+/**
+ * Attempt to fetch a price from an operator's RPC endpoint.
+ * Tries a JSON endpoint first (/pricing/quote), which operators may optionally expose.
+ * Returns null if the operator doesn't support pricing.
+ */
+async function fetchPriceFromOperator(
+  rpcUrl: string,
+  params: {
+    blueprintId: bigint;
+    ttlBlocks: bigint;
+    proofOfWork: Uint8Array;
+    challengeTimestamp: bigint;
+  },
+): Promise<OperatorQuote | null> {
+  // Try JSON endpoint (simpler, no protobuf dependency required)
+  try {
+    const response = await fetch(`${rpcUrl}/pricing/quote`, {
+      method: 'POST',
+      headers: { 'Content-Type': 'application/json' },
+      body: JSON.stringify({
+        blueprint_id: String(params.blueprintId),
+        ttl_blocks: String(params.ttlBlocks),
+        proof_of_work: toHex(params.proofOfWork),
+        challenge_timestamp: String(params.challengeTimestamp),
+        resource_requirements: [
+          { kind: 'CPU', count: 1 },
+          { kind: 'MemoryMB', count: 1024 },
+          { kind: 'StorageMB', count: 10240 },
+        ],
+      }),
+      signal: AbortSignal.timeout(10_000),
+    });
+
+    if (!response.ok) throw new Error(`HTTP ${response.status}`);
+    const data = await response.json();
+
+    return {
+      operator: data.operator as Address,
+      totalCost: BigInt(data.total_cost ?? '0'),
+      signature: (data.signature ?? '0x') as `0x${string}`,
+      costRate: Number(data.cost_rate ?? 0),
+      details: {
+        blueprintId: BigInt(data.details?.blueprint_id ?? params.blueprintId),
+        ttlBlocks: BigInt(data.details?.ttl_blocks ?? params.ttlBlocks),
+        totalCost: BigInt(data.details?.total_cost ?? '0'),
+        timestamp: BigInt(data.details?.timestamp ?? params.challengeTimestamp),
+        expiry: BigInt(data.details?.expiry ?? '0'),
+        securityCommitments: (data.details?.security_commitments ?? []).map((sc: any) => ({
+          asset: { kind: sc.asset?.kind ?? 0, token: (sc.asset?.token ?? '0x0000000000000000000000000000000000000000') as Address },
+          exposureBps: sc.exposure_bps ?? 0,
+        })),
+      },
+    };
+  } catch {
+    // JSON endpoint not available — operator doesn't have pricing engine
+    return null;
+  }
+}

package/src/hooks/useServiceValidation.ts

@@ -0,0 +1,113 @@
+import { useState, useCallback } from 'react';
+import type { Address } from 'viem';
+import { tangleServicesAbi } from '../contracts/abi';
+import { publicClient, getAddresses } from '../contracts/publicClient';
+
+export interface ServiceInfo {
+  active: boolean;
+  blueprintId: bigint;
+  owner: Address;
+  operatorCount: number;
+  operators: Address[];
+  permitted: boolean;
+  ttl: bigint;
+  createdAt: bigint;
+}
+
+/**
+ * Validate a service on-chain: check if active, fetch operators,
+ * verify the current user is a permitted caller.
+ */
+export function useServiceValidation() {
+  const [isValidating, setIsValidating] = useState(false);
+  const [serviceInfo, setServiceInfo] = useState<ServiceInfo | null>(null);
+  const [error, setError] = useState<string | null>(null);
+
+  const validate = useCallback(async (serviceId: bigint, userAddress?: Address) => {
+    setIsValidating(true);
+    setError(null);
+    setServiceInfo(null);
+
+    const addrs = getAddresses();
+
+    try {
+      // Run reads in parallel without multicall to avoid type union issues
+      const [isActiveResult, serviceDataResult, operatorsResult, permittedResult] = await Promise.all([
+        publicClient.readContract({
+          address: addrs.services,
+          abi: tangleServicesAbi,
+          functionName: 'isServiceActive',
+          args: [serviceId],
+        }).catch(() => false),
+
+        publicClient.readContract({
+          address: addrs.services,
+          abi: tangleServicesAbi,
+          functionName: 'getService',
+          args: [serviceId],
+        }).catch(() => null),
+
+        publicClient.readContract({
+          address: addrs.services,
+          abi: tangleServicesAbi,
+          functionName: 'getServiceOperators',
+          args: [serviceId],
+        }).catch(() => [] as readonly Address[]),
+
+        userAddress
+          ? publicClient.readContract({
+              address: addrs.services,
+              abi: tangleServicesAbi,
+              functionName: 'isPermittedCaller',
+              args: [serviceId, userAddress],
+            }).catch(() => false)
+          : Promise.resolve(true),
+      ]);
+
+      const isActive = isActiveResult as boolean;
+      const serviceData = serviceDataResult as Record<string, any> | null;
+      const operators = (operatorsResult ?? []) as readonly Address[];
+      const permitted = permittedResult as boolean;
+
+      if (!serviceData) {
+        setError('Service not found');
+        setIsValidating(false);
+        return null;
+      }
+
+      const info: ServiceInfo = {
+        active: isActive,
+        blueprintId: serviceData.blueprintId ?? serviceData[0] ?? 0n,
+        owner: serviceData.owner ?? serviceData[1] ?? ('0x0' as Address),
+        operatorCount: operators.length,
+        operators: [...operators],
+        permitted,
+        ttl: serviceData.ttl ?? serviceData[3] ?? 0n,
+        createdAt: serviceData.createdAt ?? serviceData[2] ?? 0n,
+      };
+
+      setServiceInfo(info);
+
+      if (!isActive) {
+        setError('Service is not active');
+      } else if (!permitted && userAddress) {
+        setError('You are not a permitted caller for this service');
+      }
+
+      setIsValidating(false);
+      return info;
+    } catch (err) {
+      const msg = err instanceof Error ? err.message : String(err);
+      setError(msg);
+      setIsValidating(false);
+      return null;
+    }
+  }, []);
+
+  const reset = useCallback(() => {
+    setServiceInfo(null);
+    setError(null);
+  }, []);
+
+  return { validate, reset, isValidating, serviceInfo, error };
+}

package/src/hooks/useSessionAuth.ts

@@ -0,0 +1,103 @@
+import { useCallback, useState } from 'react';
+import { useSignMessage } from 'wagmi';
+import { getSession, setSession, removeSession, type SessionEntry } from '../stores/session';
+
+// ---------------------------------------------------------------------------
+// Types
+// ---------------------------------------------------------------------------
+
+interface ChallengeResponse {
+  nonce: string;
+  message: string;
+  expires_at: number;
+}
+
+interface SessionResponse {
+  token: string;
+  address: string;
+  expires_at: number;
+}
+
+// ---------------------------------------------------------------------------
+// Hook
+// ---------------------------------------------------------------------------
+
+interface UseSessionAuthOptions {
+  sandboxId: string;
+  apiUrl?: string;
+}
+
+export function useSessionAuth({ sandboxId, apiUrl }: UseSessionAuthOptions) {
+  const baseUrl = apiUrl ?? import.meta.env.VITE_OPERATOR_API_URL ?? 'http://localhost:9090';
+  const { signMessageAsync } = useSignMessage();
+
+  const [isAuthenticating, setIsAuthenticating] = useState(false);
+  const [error, setError] = useState<string | null>(null);
+
+  // Get cached session
+  const session = getSession(sandboxId);
+
+  const authenticate = useCallback(async (): Promise<SessionEntry | null> => {
+    setIsAuthenticating(true);
+    setError(null);
+
+    try {
+      // Step 1: Request challenge
+      const challengeRes = await fetch(`${baseUrl}/api/auth/challenge`, {
+        method: 'POST',
+      });
+      if (!challengeRes.ok) {
+        throw new Error(`Challenge request failed: HTTP ${challengeRes.status}`);
+      }
+      const challenge: ChallengeResponse = await challengeRes.json();
+
+      // Step 2: Sign with wallet
+      const signature = await signMessageAsync({ message: challenge.message });
+
+      // Step 3: Exchange signature for session token
+      const sessionRes = await fetch(`${baseUrl}/api/auth/session`, {
+        method: 'POST',
+        headers: { 'Content-Type': 'application/json' },
+        body: JSON.stringify({
+          nonce: challenge.nonce,
+          signature,
+        }),
+      });
+      if (!sessionRes.ok) {
+        const body = await sessionRes.json().catch(() => ({}));
+        throw new Error(body.error ?? `Session exchange failed: HTTP ${sessionRes.status}`);
+      }
+      const sessionData: SessionResponse = await sessionRes.json();
+
+      // Step 4: Store session
+      const entry: SessionEntry = {
+        token: sessionData.token,
+        address: sessionData.address,
+        expiresAt: sessionData.expires_at,
+        sandboxId,
+      };
+      setSession(entry);
+
+      return entry;
+    } catch (err) {
+      const msg = err instanceof Error ? err.message : 'Authentication failed';
+      setError(msg);
+      return null;
+    } finally {
+      setIsAuthenticating(false);
+    }
+  }, [baseUrl, sandboxId, signMessageAsync]);
+
+  const logout = useCallback(() => {
+    removeSession(sandboxId);
+  }, [sandboxId]);
+
+  return {
+    session,
+    isAuthenticated: session !== null,
+    isAuthenticating,
+    error,
+    authenticate,
+    logout,
+  };
+}

package/src/hooks/useSubmitJob.ts

@@ -0,0 +1,115 @@
+import { useCallback, useState, useMemo } from 'react';
+import { useAccount, useWriteContract, useWaitForTransactionReceipt } from 'wagmi';
+import { decodeEventLog } from 'viem';
+import { tangleJobsAbi } from '../contracts/abi';
+import { getAddresses } from '../contracts/publicClient';
+import { addTx, updateTx } from '../stores/txHistory';
+import { selectedChainIdStore } from '../contracts/publicClient';
+import { useEffect } from 'react';
+
+export interface SubmitJobOpts {
+  serviceId: bigint;
+  jobId: number;
+  args: `0x${string}`;
+  label?: string;
+  value?: bigint;
+}
+
+export type JobSubmitStatus = 'idle' | 'signing' | 'pending' | 'confirmed' | 'failed';
+
+export function useSubmitJob() {
+  const { address } = useAccount();
+  const { writeContractAsync, data: hash, isPending: isSigning } = useWriteContract();
+  const [status, setStatus] = useState<JobSubmitStatus>('idle');
+  const [error, setError] = useState<string | null>(null);
+  const [txHash, setTxHash] = useState<`0x${string}` | undefined>();
+
+  const { data: receipt, isSuccess, isError } = useWaitForTransactionReceipt({
+    hash: txHash,
+  });
+
+  // Extract callId from the JobCalled event in the receipt logs
+  const callId = useMemo<number | null>(() => {
+    if (!receipt?.logs) return null;
+    for (const log of receipt.logs) {
+      try {
+        const decoded = decodeEventLog({
+          abi: tangleJobsAbi,
+          data: log.data,
+          topics: log.topics,
+        });
+        if (decoded.eventName === 'JobCalled' && 'callId' in decoded.args) {
+          return Number(decoded.args.callId);
+        }
+      } catch {
+        // Not a matching event, skip
+      }
+    }
+    return null;
+  }, [receipt]);
+
+  useEffect(() => {
+    if (isSuccess && txHash) {
+      setStatus('confirmed');
+      updateTx(txHash, { status: 'confirmed' });
+    }
+    if (isError && txHash) {
+      setStatus('failed');
+      updateTx(txHash, { status: 'failed' });
+    }
+  }, [isSuccess, isError, txHash]);
+
+  const submitJob = useCallback(
+    async (opts: SubmitJobOpts) => {
+      if (!address) {
+        setError('Wallet not connected');
+        return undefined;
+      }
+
+      const addrs = getAddresses();
+      const label = opts.label ?? `Job #${opts.jobId}`;
+
+      try {
+        setStatus('signing');
+        setError(null);
+
+        const result = await writeContractAsync({
+          address: addrs.jobs,
+          abi: tangleJobsAbi,
+          functionName: 'submitJob',
+          args: [opts.serviceId, opts.jobId, opts.args],
+          value: opts.value,
+        });
+
+        setTxHash(result);
+        setStatus('pending');
+        addTx(result, label, selectedChainIdStore.get());
+
+        return result;
+      } catch (err: any) {
+        setStatus('failed');
+        const msg = err?.shortMessage ?? err?.message ?? 'Transaction failed';
+        setError(msg);
+        return undefined;
+      }
+    },
+    [address, writeContractAsync],
+  );
+
+  const reset = useCallback(() => {
+    setStatus('idle');
+    setError(null);
+    setTxHash(undefined);
+  }, []);
+
+  return {
+    submitJob,
+    reset,
+    status,
+    error,
+    txHash,
+    callId,
+    isSigning,
+    isConnected: !!address,
+  };
+}

package/src/hooks/useThemeValue.ts

@@ -0,0 +1,6 @@
+import { useStore } from '@nanostores/react';
+import { themeStore, type Theme } from '../stores/theme';
+
+export function useThemeValue(): Theme {
+  return useStore(themeStore);
+}

package/src/index.ts

@@ -0,0 +1,79 @@
+/**
+ * @tangle-network/blueprint-ui — shared utilities, stores, contracts, hooks, and types
+ * for Tangle blueprint UIs.
+ */
+
+// ── Utils ──
+export { cn } from './utils';
+export { resolveOperatorRpc } from './utils/resolveOperatorRpc';
+export { createTangleTransports, defaultConnectKitOptions, tangleWalletChains } from './utils/web3';
+export { bpThemeTokens } from './preset';
+
+// ── Stores ──
+export { serializeWithBigInt, deserializeWithBigInt, persistedAtom } from './stores/persistedAtom';
+export type { SessionEntry } from './stores/session';
+export { sessionMapStore, getSession, setSession, removeSession, gcSessions } from './stores/session';
+export type { TrackedTx } from './stores/txHistory';
+export { txListStore, pendingCount, addTx, updateTx, clearTxs } from './stores/txHistory';
+export type { OperatorInfo, InfraConfig } from './stores/infra';
+export { infraStore, updateInfra, getInfra } from './stores/infra';
+export type { Theme } from './stores/theme';
+export { kTheme, DEFAULT_THEME, themeStore, themeIsDark, toggleTheme } from './stores/theme';
+
+// ── Contracts ──
+export { tangleJobsAbi, tangleServicesAbi, tangleOperatorsAbi } from './contracts/abi';
+export type { CoreAddresses, NetworkConfig } from './contracts/chains';
+export {
+  resolveRpcUrl,
+  rpcUrl,
+  tangleLocal,
+  tangleTestnet,
+  tangleMainnet,
+  allTangleChains,
+  mainnet,
+  configureNetworks,
+  getNetworks,
+} from './contracts/chains';
+export {
+  selectedChainIdStore,
+  publicClientStore,
+  getPublicClient,
+  publicClient,
+  getAddresses,
+} from './contracts/publicClient';
+export { encodeJobArgs } from './contracts/generic-encoder';
+
+// ── Blueprints ──
+export type {
+  JobCategory,
+  JobFieldDef,
+  AbiContextParam,
+  JobDefinition,
+  BlueprintDefinition,
+} from './blueprints/registry';
+export {
+  registerBlueprint,
+  getBlueprint,
+  getAllBlueprints,
+  getBlueprintJobs,
+  getJobById,
+} from './blueprints/registry';
+
+// ── Hooks ──
+export type { DiscoveredOperator } from './hooks/useOperators';
+export { useOperators } from './hooks/useOperators';
+export type { JobFormState } from './hooks/useJobForm';
+export { useJobForm } from './hooks/useJobForm';
+export type { JobQuote, UseJobPriceResult, JobPriceEntry, UseJobPricesResult } from './hooks/useJobPrice';
+export { useJobPrice, useJobPrices } from './hooks/useJobPrice';
+export type { ServiceInfo } from './hooks/useServiceValidation';
+export { useServiceValidation } from './hooks/useServiceValidation';
+export { useAuthenticatedFetch } from './hooks/useAuthenticatedFetch';
+export type { OperatorQuote, UseQuotesResult } from './hooks/useQuotes';
+export { solvePoW, formatCost, useQuotes } from './hooks/useQuotes';
+export type { SubmitJobOpts, JobSubmitStatus } from './hooks/useSubmitJob';
+export { useSubmitJob } from './hooks/useSubmitJob';
+export { useSessionAuth } from './hooks/useSessionAuth';
+export type { ProvisionPhase, ProvisionStatus } from './hooks/useProvisionProgress';
+export { getPhaseLabel, isTerminalPhase, useProvisionProgress } from './hooks/useProvisionProgress';
+export { useThemeValue } from './hooks/useThemeValue';