@sip-protocol/react 0.1.0

package/dist/index.mjs

@@ -0,0 +1,358 @@
+// src/providers/sip-provider.tsx
+import React, { createContext, useContext, useMemo } from "react";
+import { SIP } from "@sip-protocol/sdk";
+var SIPContext = createContext(void 0);
+function SIPProvider({ config, children }) {
+  const client = useMemo(() => new SIP(config), [config]);
+  const value = useMemo(() => ({ client, config }), [client, config]);
+  return /* @__PURE__ */ React.createElement(SIPContext.Provider, { value }, children);
+}
+function useSIPContext() {
+  const context = useContext(SIPContext);
+  if (!context) {
+    throw new Error("useSIPContext must be used within SIPProvider");
+  }
+  return context;
+}
+
+// src/hooks/use-sip.ts
+import { useState, useCallback } from "react";
+import { SIP as SIP2 } from "@sip-protocol/sdk";
+function useSIP() {
+  const [standaloneClient, setStandaloneClient] = useState(null);
+  const [standaloneReady, setStandaloneReady] = useState(false);
+  const [standaloneError, setStandaloneError] = useState(null);
+  let providerContext;
+  try {
+    providerContext = useSIPContext();
+  } catch {
+    providerContext = null;
+  }
+  const standaloneInitialize = useCallback(async (config) => {
+    if (standaloneClient && standaloneReady) {
+      console.warn("SIP client already initialized. Call will be ignored.");
+      return;
+    }
+    try {
+      setStandaloneError(null);
+      setStandaloneReady(false);
+      const newClient = new SIP2(config);
+      setStandaloneClient(newClient);
+      setStandaloneReady(true);
+    } catch (err) {
+      const error = err instanceof Error ? err : new Error(String(err));
+      setStandaloneError(error);
+      setStandaloneReady(false);
+      throw error;
+    }
+  }, [standaloneClient, standaloneReady]);
+  if (providerContext) {
+    return {
+      client: providerContext.client,
+      isReady: true,
+      // Provider always provides ready client
+      error: null,
+      // Provider throws on error, doesn't expose it
+      initialize: async () => {
+        console.warn("initialize() called but SIPProvider is already providing a client. This call will be ignored.");
+      }
+    };
+  }
+  return {
+    client: standaloneClient,
+    isReady: standaloneReady,
+    error: standaloneError,
+    initialize: standaloneInitialize
+  };
+}
+
+// src/hooks/use-stealth-address.ts
+import { useState as useState2, useEffect, useCallback as useCallback2 } from "react";
+import {
+  generateStealthMetaAddress,
+  generateStealthAddress,
+  generateEd25519StealthMetaAddress,
+  generateEd25519StealthAddress,
+  encodeStealthMetaAddress,
+  isEd25519Chain
+} from "@sip-protocol/sdk";
+function useStealthAddress(chain) {
+  const [metaAddress, setMetaAddress] = useState2(null);
+  const [stealthAddress, setStealthAddress] = useState2(null);
+  const [isGenerating, setIsGenerating] = useState2(false);
+  useEffect(() => {
+    let cancelled = false;
+    setIsGenerating(true);
+    const timer = setTimeout(() => {
+      if (cancelled) return;
+      try {
+        const isEd25519 = isEd25519Chain(chain);
+        const metaAddressData = isEd25519 ? generateEd25519StealthMetaAddress(chain) : generateStealthMetaAddress(chain);
+        const encoded = encodeStealthMetaAddress(metaAddressData.metaAddress);
+        if (cancelled) return;
+        setMetaAddress(encoded);
+        const stealthData = isEd25519 ? generateEd25519StealthAddress(metaAddressData.metaAddress) : generateStealthAddress(metaAddressData.metaAddress);
+        if (cancelled) return;
+        setStealthAddress(stealthData.stealthAddress.address);
+      } catch (error) {
+        console.error("Failed to generate stealth addresses:", error);
+        if (cancelled) return;
+        setMetaAddress(null);
+        setStealthAddress(null);
+      } finally {
+        if (!cancelled) {
+          setIsGenerating(false);
+        }
+      }
+    }, 0);
+    return () => {
+      cancelled = true;
+      clearTimeout(timer);
+    };
+  }, [chain]);
+  const regenerate = useCallback2(() => {
+    if (!metaAddress) {
+      return;
+    }
+    setIsGenerating(true);
+    setTimeout(() => {
+      try {
+        const parts = metaAddress.split(":");
+        if (parts.length < 4) {
+          throw new Error("Invalid meta-address format");
+        }
+        const [, chainId, spendingKey, viewingKey] = parts;
+        const metaAddressObj = {
+          chain: chainId,
+          spendingKey: spendingKey.startsWith("0x") ? spendingKey : `0x${spendingKey}`,
+          viewingKey: viewingKey.startsWith("0x") ? viewingKey : `0x${viewingKey}`
+        };
+        const isEd25519 = isEd25519Chain(chain);
+        const stealthData = isEd25519 ? generateEd25519StealthAddress(metaAddressObj) : generateStealthAddress(metaAddressObj);
+        setStealthAddress(stealthData.stealthAddress.address);
+      } catch (error) {
+        console.error("Failed to regenerate stealth address:", error);
+      } finally {
+        setIsGenerating(false);
+      }
+    }, 0);
+  }, [metaAddress, chain]);
+  const copyToClipboard = useCallback2(async () => {
+    if (!stealthAddress) {
+      return;
+    }
+    try {
+      await navigator.clipboard.writeText(stealthAddress);
+    } catch (error) {
+      console.error("Failed to copy to clipboard:", error);
+      const textArea = document.createElement("textarea");
+      textArea.value = stealthAddress;
+      textArea.style.position = "fixed";
+      textArea.style.left = "-999999px";
+      document.body.appendChild(textArea);
+      textArea.select();
+      try {
+        document.execCommand("copy");
+      } catch (err) {
+        console.error("Fallback copy failed:", err);
+      } finally {
+        document.body.removeChild(textArea);
+      }
+    }
+  }, [stealthAddress]);
+  return {
+    metaAddress,
+    stealthAddress,
+    isGenerating,
+    regenerate,
+    copyToClipboard
+  };
+}
+
+// src/hooks/use-private-swap.ts
+import { useState as useState3, useCallback as useCallback3 } from "react";
+function usePrivateSwap() {
+  const { client: sip } = useSIP();
+  const [quote, setQuote] = useState3(null);
+  const [status, setStatus] = useState3("idle");
+  const [isLoading, setIsLoading] = useState3(false);
+  const [error, setError] = useState3(null);
+  const fetchQuote = useCallback3(async (params) => {
+    if (!sip) {
+      throw new Error("SIP client not initialized. Wrap your app with SIPProvider or call initialize().");
+    }
+    try {
+      setStatus("fetching_quote");
+      setIsLoading(true);
+      setError(null);
+      const intentParams = {
+        input: {
+          asset: {
+            chain: params.inputChain,
+            symbol: params.inputToken,
+            address: null,
+            decimals: 9
+            // Default, should be configurable
+          },
+          amount: BigInt(params.inputAmount)
+        },
+        output: {
+          asset: {
+            chain: params.outputChain,
+            symbol: params.outputToken,
+            address: null,
+            decimals: 18
+            // Default, should be configurable
+          },
+          minAmount: 0n,
+          maxSlippage: params.maxSlippage ?? 0.01
+        },
+        privacy: params.privacyLevel ?? "shielded"
+      };
+      const quotes = await sip.getQuotes(intentParams);
+      if (quotes.length === 0) {
+        throw new Error("No quotes available");
+      }
+      setQuote(quotes[0]);
+      setStatus("idle");
+    } catch (err) {
+      setError(err instanceof Error ? err : new Error("Failed to fetch quote"));
+      setStatus("failed");
+      throw err;
+    } finally {
+      setIsLoading(false);
+    }
+  }, [sip]);
+  const swap = useCallback3(async (params) => {
+    if (!sip) {
+      throw new Error("SIP client not initialized. Wrap your app with SIPProvider or call initialize().");
+    }
+    try {
+      setStatus("pending");
+      setIsLoading(true);
+      setError(null);
+      const intentParams = {
+        input: {
+          asset: {
+            chain: params.input.chain,
+            symbol: params.input.token,
+            address: null,
+            decimals: 9
+            // Default, should be configurable
+          },
+          amount: params.input.amount
+        },
+        output: {
+          asset: {
+            chain: params.output.chain,
+            symbol: params.output.token,
+            address: null,
+            decimals: 18
+            // Default, should be configurable
+          },
+          minAmount: params.output.minAmount,
+          maxSlippage: params.maxSlippage ?? 0.01
+        },
+        privacy: params.privacyLevel
+      };
+      const intent = await sip.createIntent(intentParams);
+      let swapQuote = quote;
+      if (!swapQuote) {
+        const quotes = await sip.getQuotes(intentParams);
+        if (quotes.length === 0) {
+          throw new Error("No quotes available");
+        }
+        swapQuote = quotes[0];
+      }
+      setStatus("confirming");
+      const result = await sip.execute(intent, swapQuote);
+      setStatus("completed");
+      return {
+        txHash: result.txHash,
+        status: result.status,
+        outputAmount: result.outputAmount,
+        intentId: result.intentId
+      };
+    } catch (err) {
+      setError(err instanceof Error ? err : new Error("Swap failed"));
+      setStatus("failed");
+      throw err;
+    } finally {
+      setIsLoading(false);
+    }
+  }, [sip, quote]);
+  const reset = useCallback3(() => {
+    setQuote(null);
+    setStatus("idle");
+    setIsLoading(false);
+    setError(null);
+  }, []);
+  return {
+    quote,
+    fetchQuote,
+    swap,
+    status,
+    isLoading,
+    error,
+    reset
+  };
+}
+
+// src/hooks/use-viewing-key.ts
+import { useState as useState4, useCallback as useCallback4 } from "react";
+import {
+  generateViewingKey as sdkGenerateViewingKey,
+  decryptWithViewing
+} from "@sip-protocol/sdk";
+function useViewingKey() {
+  const [viewingKey, setViewingKey] = useState4(null);
+  const [sharedWith, setSharedWith] = useState4([]);
+  const generate = useCallback4((path) => {
+    const key = sdkGenerateViewingKey(path);
+    setViewingKey(key);
+    setSharedWith([]);
+    return key;
+  }, []);
+  const decrypt = useCallback4(
+    async (encrypted) => {
+      if (!viewingKey) {
+        throw new Error("No viewing key available. Call generate() first.");
+      }
+      return decryptWithViewing(encrypted, viewingKey);
+    },
+    [viewingKey]
+  );
+  const share = useCallback4(
+    async (auditorId) => {
+      if (!viewingKey) {
+        throw new Error("No viewing key available. Call generate() first.");
+      }
+      const shareEntry = {
+        auditorId,
+        viewingKeyHash: viewingKey.hash,
+        sharedAt: Date.now()
+      };
+      setSharedWith((prev) => [...prev, shareEntry]);
+    },
+    [viewingKey]
+  );
+  return {
+    /** Current viewing key (null if not generated) */
+    viewingKey,
+    /** List of auditors who have been given access */
+    sharedWith,
+    /** Generate a new viewing key */
+    generate,
+    /** Decrypt encrypted transaction data */
+    decrypt,
+    /** Share viewing key with an auditor */
+    share
+  };
+}
+export {
+  SIPProvider,
+  usePrivateSwap,
+  useSIP,
+  useStealthAddress,
+  useViewingKey
+};

package/package.json

@@ -0,0 +1,64 @@
+{
+  "name": "@sip-protocol/react",
+  "version": "0.1.0",
+  "description": "React hooks for Shielded Intents Protocol",
+  "author": "SIP Protocol <hello@sip-protocol.org>",
+  "homepage": "https://sip-protocol.org",
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/sip-protocol/sip-protocol.git",
+    "directory": "packages/react"
+  },
+  "bugs": {
+    "url": "https://github.com/sip-protocol/sip-protocol/issues"
+  },
+  "main": "./dist/index.js",
+  "module": "./dist/index.mjs",
+  "types": "./dist/index.d.ts",
+  "exports": {
+    ".": {
+      "types": "./dist/index.d.ts",
+      "import": "./dist/index.mjs",
+      "require": "./dist/index.js"
+    }
+  },
+  "files": [
+    "dist",
+    "src"
+  ],
+  "dependencies": {
+    "@sip-protocol/sdk": "^0.6.0",
+    "@sip-protocol/types": "^0.2.0"
+  },
+  "peerDependencies": {
+    "react": "^18.0.0",
+    "react-dom": "^18.0.0"
+  },
+  "devDependencies": {
+    "@testing-library/react": "^16.3.0",
+    "@testing-library/react-hooks": "^8.0.1",
+    "@types/react": "^18.2.0",
+    "@types/react-dom": "^18.2.0",
+    "jsdom": "^27.2.0",
+    "tsup": "^8.0.0",
+    "typescript": "^5.3.0",
+    "vitest": "^1.1.0"
+  },
+  "keywords": [
+    "sip",
+    "privacy",
+    "intents",
+    "cross-chain",
+    "react",
+    "hooks"
+  ],
+  "license": "MIT",
+  "scripts": {
+    "build": "tsup src/index.ts --format cjs,esm --dts",
+    "dev": "tsup src/index.ts --format cjs,esm --dts --watch",
+    "lint": "eslint --ext .ts,.tsx src/",
+    "typecheck": "tsc --noEmit",
+    "clean": "rm -rf dist",
+    "test": "vitest"
+  }
+}

package/src/hooks/index.ts

@@ -0,0 +1,10 @@
+export { useSIP, type UseSIPReturn } from './use-sip'
+export { useStealthAddress } from './use-stealth-address'
+export {
+  usePrivateSwap,
+  type SwapStatus,
+  type QuoteParams,
+  type SwapParams,
+  type SwapResult,
+} from './use-private-swap'
+export { useViewingKey } from './use-viewing-key'

package/src/hooks/use-private-swap.ts

@@ -0,0 +1,268 @@
+import { useState, useCallback } from 'react'
+import { useSIP } from './use-sip'
+import type { Quote, PrivacyLevel, CreateIntentParams, TrackedIntent, FulfillmentResult } from '@sip-protocol/types'
+
+/**
+ * Status of the swap lifecycle
+ */
+export type SwapStatus =
+  | 'idle'
+  | 'fetching_quote'
+  | 'pending'
+  | 'confirming'
+  | 'completed'
+  | 'failed'
+
+/**
+ * Parameters for fetching a quote
+ */
+export interface QuoteParams {
+  /** Input chain */
+  inputChain: string
+  /** Output chain */
+  outputChain: string
+  /** Input token symbol */
+  inputToken: string
+  /** Output token symbol */
+  outputToken: string
+  /** Input amount (as string, in smallest unit) */
+  inputAmount: string
+  /** Privacy level (optional) */
+  privacyLevel?: PrivacyLevel
+  /** Maximum acceptable slippage (0-1, e.g. 0.01 = 1%) */
+  maxSlippage?: number
+}
+
+/**
+ * Parameters for executing a swap
+ */
+export interface SwapParams {
+  /** Input asset details */
+  input: {
+    chain: string
+    token: string
+    amount: bigint
+  }
+  /** Output asset details */
+  output: {
+    chain: string
+    token: string
+    minAmount: bigint
+  }
+  /** Privacy level */
+  privacyLevel: PrivacyLevel
+  /** Maximum acceptable slippage (0-1, e.g. 0.01 = 1%) */
+  maxSlippage?: number
+}
+
+/**
+ * Result of a swap execution
+ */
+export interface SwapResult {
+  /** Transaction hash (if available) */
+  txHash?: string
+  /** Status of the swap */
+  status: string
+  /** Output amount received */
+  outputAmount?: bigint
+  /** Intent ID */
+  intentId: string
+}
+
+/**
+ * usePrivateSwap - Execute private swaps with shielded intents
+ *
+ * @remarks
+ * Hook for managing the complete lifecycle of a private swap:
+ * - Fetch quotes from solvers
+ * - Execute swaps with privacy
+ * - Track swap status through completion
+ * - Handle errors gracefully
+ *
+ * @example
+ * ```tsx
+ * import { usePrivateSwap } from '@sip-protocol/react'
+ * import { PrivacyLevel } from '@sip-protocol/types'
+ *
+ * function MyComponent() {
+ *   const { quote, fetchQuote, swap, status, isLoading, error, reset } = usePrivateSwap()
+ *
+ *   // Fetch a quote
+ *   const handleGetQuote = async () => {
+ *     await fetchQuote({
+ *       inputChain: 'solana',
+ *       outputChain: 'ethereum',
+ *       inputToken: 'SOL',
+ *       outputToken: 'ETH',
+ *       inputAmount: '1000000000', // 1 SOL
+ *     })
+ *   }
+ *
+ *   // Execute the swap
+ *   const handleSwap = async () => {
+ *     const result = await swap({
+ *       input: { chain: 'solana', token: 'SOL', amount: 1000000000n },
+ *       output: { chain: 'ethereum', token: 'ETH', minAmount: 0n },
+ *       privacyLevel: PrivacyLevel.SHIELDED,
+ *       maxSlippage: 0.01,
+ *     })
+ *   }
+ * }
+ * ```
+ */
+export function usePrivateSwap() {
+  const { client: sip } = useSIP()
+
+  // State
+  const [quote, setQuote] = useState<Quote | null>(null)
+  const [status, setStatus] = useState<SwapStatus>('idle')
+  const [isLoading, setIsLoading] = useState(false)
+  const [error, setError] = useState<Error | null>(null)
+
+  /**
+   * Fetch a quote for the given parameters
+   */
+  const fetchQuote = useCallback(async (params: QuoteParams): Promise<void> => {
+    if (!sip) {
+      throw new Error('SIP client not initialized. Wrap your app with SIPProvider or call initialize().')
+    }
+
+    try {
+      setStatus('fetching_quote')
+      setIsLoading(true)
+      setError(null)
+
+      // Build CreateIntentParams from QuoteParams
+      const intentParams: CreateIntentParams = {
+        input: {
+          asset: {
+            chain: params.inputChain as any,
+            symbol: params.inputToken,
+            address: null,
+            decimals: 9, // Default, should be configurable
+          },
+          amount: BigInt(params.inputAmount),
+        },
+        output: {
+          asset: {
+            chain: params.outputChain as any,
+            symbol: params.outputToken,
+            address: null,
+            decimals: 18, // Default, should be configurable
+          },
+          minAmount: 0n,
+          maxSlippage: params.maxSlippage ?? 0.01,
+        },
+        privacy: params.privacyLevel ?? 'shielded' as PrivacyLevel,
+      }
+
+      // Get quotes from SIP client
+      const quotes = await sip.getQuotes(intentParams)
+
+      if (quotes.length === 0) {
+        throw new Error('No quotes available')
+      }
+
+      // Use the best quote (first one, assuming they're sorted)
+      setQuote(quotes[0])
+      setStatus('idle')
+    } catch (err) {
+      setError(err instanceof Error ? err : new Error('Failed to fetch quote'))
+      setStatus('failed')
+      throw err
+    } finally {
+      setIsLoading(false)
+    }
+  }, [sip])
+
+  /**
+   * Execute a swap with the given parameters
+   */
+  const swap = useCallback(async (params: SwapParams): Promise<SwapResult> => {
+    if (!sip) {
+      throw new Error('SIP client not initialized. Wrap your app with SIPProvider or call initialize().')
+    }
+
+    try {
+      setStatus('pending')
+      setIsLoading(true)
+      setError(null)
+
+      // Create the shielded intent
+      const intentParams: CreateIntentParams = {
+        input: {
+          asset: {
+            chain: params.input.chain as any,
+            symbol: params.input.token,
+            address: null,
+            decimals: 9, // Default, should be configurable
+          },
+          amount: params.input.amount,
+        },
+        output: {
+          asset: {
+            chain: params.output.chain as any,
+            symbol: params.output.token,
+            address: null,
+            decimals: 18, // Default, should be configurable
+          },
+          minAmount: params.output.minAmount,
+          maxSlippage: params.maxSlippage ?? 0.01,
+        },
+        privacy: params.privacyLevel,
+      }
+
+      const intent: TrackedIntent = await sip.createIntent(intentParams)
+
+      // Get quotes if we don't have one cached
+      let swapQuote = quote
+      if (!swapQuote) {
+        const quotes = await sip.getQuotes(intentParams)
+        if (quotes.length === 0) {
+          throw new Error('No quotes available')
+        }
+        swapQuote = quotes[0]
+      }
+
+      setStatus('confirming')
+
+      // Execute the swap
+      const result: FulfillmentResult = await sip.execute(intent, swapQuote)
+
+      setStatus('completed')
+
+      return {
+        txHash: result.txHash,
+        status: result.status,
+        outputAmount: result.outputAmount,
+        intentId: result.intentId,
+      }
+    } catch (err) {
+      setError(err instanceof Error ? err : new Error('Swap failed'))
+      setStatus('failed')
+      throw err
+    } finally {
+      setIsLoading(false)
+    }
+  }, [sip, quote])
+
+  /**
+   * Reset all state to initial values
+   */
+  const reset = useCallback(() => {
+    setQuote(null)
+    setStatus('idle')
+    setIsLoading(false)
+    setError(null)
+  }, [])
+
+  return {
+    quote,
+    fetchQuote,
+    swap,
+    status,
+    isLoading,
+    error,
+    reset,
+  }
+}