@sip-protocol/react 0.1.0 → 0.1.1

package/src/components/ethereum/transaction-tracker.tsx

@@ -0,0 +1,302 @@
+/**
+ * Ethereum Transaction Tracker
+ *
+ * Preset configuration for tracking Ethereum privacy transactions.
+ *
+ * @module components/ethereum/transaction-tracker
+ */
+
+import React, { useMemo } from 'react'
+import {
+  TransactionTracker,
+  useTransactionTracker,
+  type TransactionTrackerProps,
+  type PrivacyTransaction,
+  type TransactionStatus,
+} from '../transaction-tracker'
+
+/**
+ * Ethereum network configuration
+ */
+export interface EthereumNetwork {
+  name: string
+  chainId: number
+  explorerUrl: string
+  /** Average block time in seconds */
+  blockTime: number
+  /** Confirmations required for finality */
+  requiredConfirmations: number
+}
+
+/**
+ * Predefined Ethereum networks
+ */
+export const ETHEREUM_NETWORKS: Record<string, EthereumNetwork> = {
+  mainnet: {
+    name: 'Ethereum',
+    chainId: 1,
+    explorerUrl: 'https://etherscan.io',
+    blockTime: 12,
+    requiredConfirmations: 12,
+  },
+  sepolia: {
+    name: 'Sepolia',
+    chainId: 11155111,
+    explorerUrl: 'https://sepolia.etherscan.io',
+    blockTime: 12,
+    requiredConfirmations: 6,
+  },
+  goerli: {
+    name: 'Goerli',
+    chainId: 5,
+    explorerUrl: 'https://goerli.etherscan.io',
+    blockTime: 12,
+    requiredConfirmations: 6,
+  },
+  arbitrum: {
+    name: 'Arbitrum One',
+    chainId: 42161,
+    explorerUrl: 'https://arbiscan.io',
+    blockTime: 0.3,
+    requiredConfirmations: 1,
+  },
+  arbitrumSepolia: {
+    name: 'Arbitrum Sepolia',
+    chainId: 421614,
+    explorerUrl: 'https://sepolia.arbiscan.io',
+    blockTime: 0.3,
+    requiredConfirmations: 1,
+  },
+  optimism: {
+    name: 'Optimism',
+    chainId: 10,
+    explorerUrl: 'https://optimistic.etherscan.io',
+    blockTime: 2,
+    requiredConfirmations: 1,
+  },
+  optimismSepolia: {
+    name: 'Optimism Sepolia',
+    chainId: 11155420,
+    explorerUrl: 'https://sepolia-optimism.etherscan.io',
+    blockTime: 2,
+    requiredConfirmations: 1,
+  },
+  base: {
+    name: 'Base',
+    chainId: 8453,
+    explorerUrl: 'https://basescan.org',
+    blockTime: 2,
+    requiredConfirmations: 1,
+  },
+  baseSepolia: {
+    name: 'Base Sepolia',
+    chainId: 84532,
+    explorerUrl: 'https://sepolia.basescan.org',
+    blockTime: 2,
+    requiredConfirmations: 1,
+  },
+  polygon: {
+    name: 'Polygon',
+    chainId: 137,
+    explorerUrl: 'https://polygonscan.com',
+    blockTime: 2,
+    requiredConfirmations: 128,
+  },
+  polygonMumbai: {
+    name: 'Polygon Mumbai',
+    chainId: 80001,
+    explorerUrl: 'https://mumbai.polygonscan.com',
+    blockTime: 2,
+    requiredConfirmations: 32,
+  },
+}
+
+/**
+ * Get network by chain ID
+ */
+export function getNetworkByChainId(chainId: number): EthereumNetwork | undefined {
+  return Object.values(ETHEREUM_NETWORKS).find((n) => n.chainId === chainId)
+}
+
+/**
+ * EthereumTransactionTracker props
+ */
+export interface EthereumTransactionTrackerProps
+  extends Omit<TransactionTrackerProps, 'networkName' | 'explorerUrlTemplate'> {
+  /** Network name or chain ID */
+  network?: string | number
+  /** Custom network configuration */
+  customNetwork?: EthereumNetwork
+}
+
+/**
+ * EthereumTransactionTracker - Ethereum-configured transaction tracker
+ *
+ * @example Basic usage
+ * ```tsx
+ * import { EthereumTransactionTracker } from '@sip-protocol/react'
+ *
+ * function TransactionView({ tx }) {
+ *   return (
+ *     <EthereumTransactionTracker
+ *       transaction={tx}
+ *       network="mainnet"
+ *     />
+ *   )
+ * }
+ * ```
+ *
+ * @example With L2 network
+ * ```tsx
+ * <EthereumTransactionTracker
+ *   transaction={tx}
+ *   network="arbitrum"
+ *   showPrivacyStatus
+ * />
+ * ```
+ */
+export function EthereumTransactionTracker({
+  network = 'mainnet',
+  customNetwork,
+  transaction,
+  ...props
+}: EthereumTransactionTrackerProps) {
+  // Resolve network configuration
+  const networkConfig = useMemo(() => {
+    if (customNetwork) return customNetwork
+
+    if (typeof network === 'number') {
+      return getNetworkByChainId(network) ?? ETHEREUM_NETWORKS.mainnet
+    }
+
+    return ETHEREUM_NETWORKS[network] ?? ETHEREUM_NETWORKS.mainnet
+  }, [network, customNetwork])
+
+  // Build explorer URL template
+  const explorerUrlTemplate = useMemo(() => {
+    return `${networkConfig.explorerUrl}/tx/{hash}`
+  }, [networkConfig])
+
+  // Adjust required confirmations if not set
+  const adjustedTransaction = useMemo(() => {
+    if (transaction.requiredConfirmations > 0) {
+      return transaction
+    }
+    return {
+      ...transaction,
+      requiredConfirmations: networkConfig.requiredConfirmations,
+    }
+  }, [transaction, networkConfig])
+
+  return (
+    <TransactionTracker
+      transaction={adjustedTransaction}
+      networkName={networkConfig.name}
+      explorerUrlTemplate={explorerUrlTemplate}
+      {...props}
+    />
+  )
+}
+
+/**
+ * Hook for managing Ethereum transaction tracking
+ *
+ * @example
+ * ```tsx
+ * const {
+ *   transaction,
+ *   updateTransaction,
+ *   startPolling,
+ *   stopPolling,
+ *   estimatedTimeToFinality,
+ * } = useEthereumTransactionTracker(tx, {
+ *   network: 'mainnet',
+ *   pollingInterval: 3000,
+ *   onConfirmed: (tx) => console.log('Confirmed!', tx),
+ * })
+ * ```
+ */
+export function useEthereumTransactionTracker(
+  initialTransaction?: PrivacyTransaction,
+  options: {
+    network?: string | number
+    pollingInterval?: number
+    onStatusChange?: (status: TransactionStatus) => void
+    onConfirmed?: (tx: PrivacyTransaction) => void
+    onFinalized?: (tx: PrivacyTransaction) => void
+    onFailed?: (tx: PrivacyTransaction) => void
+  } = {}
+) {
+  const {
+    network = 'mainnet',
+    pollingInterval = 3000,
+    onStatusChange,
+    onConfirmed,
+    onFinalized,
+    onFailed,
+  } = options
+
+  // Get base hook
+  const baseHook = useTransactionTracker(initialTransaction, {
+    pollingInterval,
+    onStatusChange: (status) => {
+      onStatusChange?.(status)
+
+      // Check for specific status callbacks
+      if (baseHook.transaction) {
+        if (status === 'confirmed') {
+          onConfirmed?.(baseHook.transaction)
+        } else if (status === 'finalized') {
+          onFinalized?.(baseHook.transaction)
+        } else if (status === 'failed') {
+          onFailed?.(baseHook.transaction)
+        }
+      }
+    },
+  })
+
+  // Get network config
+  const networkConfig = useMemo(() => {
+    if (typeof network === 'number') {
+      return getNetworkByChainId(network) ?? ETHEREUM_NETWORKS.mainnet
+    }
+    return ETHEREUM_NETWORKS[network] ?? ETHEREUM_NETWORKS.mainnet
+  }, [network])
+
+  // Calculate estimated time to finality
+  const estimatedTimeToFinality = useMemo(() => {
+    if (!baseHook.transaction) return null
+    if (baseHook.isFinal) return 0
+
+    const remaining =
+      networkConfig.requiredConfirmations - baseHook.transaction.confirmations
+    return Math.max(remaining, 0) * networkConfig.blockTime
+  }, [baseHook.transaction, baseHook.isFinal, networkConfig])
+
+  // Format time
+  const formattedTimeToFinality = useMemo(() => {
+    if (estimatedTimeToFinality === null) return null
+    if (estimatedTimeToFinality === 0) return 'Finalized'
+
+    if (estimatedTimeToFinality < 60) {
+      return `~${Math.ceil(estimatedTimeToFinality)}s`
+    }
+    return `~${Math.ceil(estimatedTimeToFinality / 60)}m`
+  }, [estimatedTimeToFinality])
+
+  // Get explorer URL
+  const explorerUrl = useMemo(() => {
+    if (!baseHook.transaction) return null
+    return `${networkConfig.explorerUrl}/tx/${baseHook.transaction.hash}`
+  }, [baseHook.transaction, networkConfig])
+
+  return {
+    ...baseHook,
+    networkConfig,
+    estimatedTimeToFinality,
+    formattedTimeToFinality,
+    explorerUrl,
+  }
+}
+
+export default EthereumTransactionTracker

package/src/components/ethereum/viewing-key-manager.tsx

@@ -0,0 +1,228 @@
+/**
+ * Ethereum Viewing Key Manager
+ *
+ * Preset configuration for managing Ethereum viewing keys.
+ *
+ * @module components/ethereum/viewing-key-manager
+ */
+
+import React, { useCallback } from 'react'
+import {
+  ViewingKeyManager,
+  useViewingKeyManager,
+  type ViewingKeyManagerProps,
+  type ViewingKey,
+  type KeyExportFormat,
+  type KeyImportSource,
+} from '../viewing-key-manager'
+
+/**
+ * Ethereum-specific viewing key data
+ */
+export interface EthereumViewingKey extends ViewingKey {
+  /** Chain ID the key is associated with */
+  chainId?: number
+  /** Stealth meta-address associated with this key */
+  stealthMetaAddress?: string
+}
+
+/**
+ * EthereumViewingKeyManager props
+ */
+export interface EthereumViewingKeyManagerProps
+  extends Omit<ViewingKeyManagerProps, 'keys' | 'onGenerateKey' | 'onExportKey' | 'onImportKey' | 'onShareKey' | 'onRevokeKey'> {
+  /** List of Ethereum viewing keys */
+  keys: EthereumViewingKey[]
+  /** Callback to generate a new key */
+  onGenerateKey?: (label?: string, chainId?: number) => Promise<EthereumViewingKey>
+  /** Callback to export a key */
+  onExportKey?: (keyId: string, format: KeyExportFormat, password?: string) => Promise<string | Blob>
+  /** Callback to import a key */
+  onImportKey?: (source: KeyImportSource, data: string | File) => Promise<EthereumViewingKey>
+  /** Callback to share a key */
+  onShareKey?: (keyId: string, recipient: string) => Promise<void>
+  /** Callback to revoke a key */
+  onRevokeKey?: (keyId: string) => Promise<void>
+  /** Default chain ID for new keys */
+  defaultChainId?: number
+}
+
+/**
+ * EthereumViewingKeyManager - Ethereum-configured viewing key manager
+ *
+ * @example Basic usage
+ * ```tsx
+ * import { EthereumViewingKeyManager } from '@sip-protocol/react'
+ *
+ * function KeyManagement() {
+ *   const [keys, setKeys] = useState<EthereumViewingKey[]>([])
+ *
+ *   return (
+ *     <EthereumViewingKeyManager
+ *       keys={keys}
+ *       onGenerateKey={async (label, chainId) => {
+ *         const key = await generateEthereumViewingKey(label, chainId)
+ *         setKeys([...keys, key])
+ *         return key
+ *       }}
+ *     />
+ *   )
+ * }
+ * ```
+ */
+export function EthereumViewingKeyManager({
+  keys,
+  onGenerateKey,
+  onExportKey,
+  onImportKey,
+  onShareKey,
+  onRevokeKey,
+  defaultChainId = 1,
+  ...props
+}: EthereumViewingKeyManagerProps) {
+  // Wrap the generate callback to include chain ID
+  const handleGenerateKey = useCallback(
+    async (label?: string) => {
+      if (!onGenerateKey) {
+        throw new Error('onGenerateKey not provided')
+      }
+      return onGenerateKey(label, defaultChainId)
+    },
+    [onGenerateKey, defaultChainId]
+  )
+
+  // Cast handlers to match base interface
+  const handleExportKey = useCallback(
+    async (keyId: string, format: KeyExportFormat, password?: string) => {
+      if (!onExportKey) {
+        throw new Error('onExportKey not provided')
+      }
+      return onExportKey(keyId, format, password)
+    },
+    [onExportKey]
+  )
+
+  const handleImportKey = useCallback(
+    async (source: KeyImportSource, data: string | File) => {
+      if (!onImportKey) {
+        throw new Error('onImportKey not provided')
+      }
+      return onImportKey(source, data)
+    },
+    [onImportKey]
+  )
+
+  return (
+    <ViewingKeyManager
+      keys={keys}
+      onGenerateKey={onGenerateKey ? handleGenerateKey : undefined}
+      onExportKey={onExportKey ? handleExportKey : undefined}
+      onImportKey={onImportKey ? handleImportKey : undefined}
+      onShareKey={onShareKey}
+      onRevokeKey={onRevokeKey}
+      {...props}
+    />
+  )
+}
+
+/**
+ * Hook for managing Ethereum viewing keys
+ *
+ * @example
+ * ```tsx
+ * const {
+ *   keys,
+ *   activeKeys,
+ *   generateKey,
+ *   exportKey,
+ *   revokeKey,
+ * } = useEthereumViewingKey({
+ *   chainId: 1,
+ *   onKeyGenerated: (key) => console.log('Generated:', key),
+ * })
+ * ```
+ */
+export function useEthereumViewingKey(options: {
+  chainId?: number
+  initialKeys?: EthereumViewingKey[]
+  onKeyGenerated?: (key: EthereumViewingKey) => void
+  onKeyRevoked?: (keyId: string) => void
+} = {}) {
+  const { chainId = 1, initialKeys = [], onKeyGenerated, onKeyRevoked } = options
+
+  // Use base hook
+  const baseHook = useViewingKeyManager(initialKeys)
+
+  // Generate Ethereum-specific key (mock implementation - real would use SDK)
+  const generateKey = useCallback(
+    async (label?: string): Promise<EthereumViewingKey> => {
+      // Generate a mock key - in real usage, this would call the SDK
+      const id = `vk_${Date.now()}_${Math.random().toString(36).slice(2)}`
+      const publicKey = `0x${Array(64)
+        .fill(0)
+        .map(() => Math.floor(Math.random() * 16).toString(16))
+        .join('')}`
+      const privateKey = `0x${Array(64)
+        .fill(0)
+        .map(() => Math.floor(Math.random() * 16).toString(16))
+        .join('')}`
+
+      const key: EthereumViewingKey = {
+        id,
+        publicKey,
+        privateKey,
+        label: label || `Ethereum Key ${baseHook.keys.length + 1}`,
+        status: 'active',
+        createdAt: Date.now(),
+        usageHistory: [{ timestamp: Date.now(), action: 'created' }],
+        chainId,
+      }
+
+      baseHook.addKey(key)
+      onKeyGenerated?.(key)
+
+      return key
+    },
+    [baseHook, chainId, onKeyGenerated]
+  )
+
+  // Revoke key with callback
+  const revokeKey = useCallback(
+    (keyId: string) => {
+      baseHook.revokeKey(keyId)
+      onKeyRevoked?.(keyId)
+    },
+    [baseHook, onKeyRevoked]
+  )
+
+  // Get keys for specific chain
+  const keysForChain = useCallback(
+    (targetChainId: number) => {
+      return (baseHook.keys as EthereumViewingKey[]).filter(
+        (k) => k.chainId === targetChainId || !k.chainId
+      )
+    },
+    [baseHook.keys]
+  )
+
+  // Format viewing key for display
+  const formatViewingKeyAddress = useCallback((key: EthereumViewingKey) => {
+    const pk = key.publicKey
+    if (pk.length <= 16) return pk
+    return `${pk.slice(0, 10)}...${pk.slice(-8)}`
+  }, [])
+
+  return {
+    ...baseHook,
+    keys: baseHook.keys as EthereumViewingKey[],
+    activeKeys: baseHook.activeKeys as EthereumViewingKey[],
+    revokedKeys: baseHook.revokedKeys as EthereumViewingKey[],
+    generateKey,
+    revokeKey,
+    keysForChain,
+    formatViewingKeyAddress,
+    currentChainId: chainId,
+  }
+}
+
+export default EthereumViewingKeyManager

package/src/components/index.ts

@@ -0,0 +1,107 @@
+/**
+ * SIP Protocol React Components
+ *
+ * UI components for privacy-enabled transactions.
+ *
+ * @packageDocumentation
+ */
+
+export {
+  PrivacyToggle,
+  usePrivacyToggle,
+  type PrivacyLevel,
+  type PrivacyToggleProps,
+  type GasEstimate,
+  type PrivacyLevelInfo,
+} from './privacy-toggle'
+
+export {
+  StealthAddressDisplay,
+  useStealthAddressDisplay,
+  isValidStealthAddress,
+  truncateAddress,
+  NEAR_NETWORKS,
+  type StealthAddressDisplayProps,
+  type OwnershipStatus,
+  type NetworkConfig,
+} from './stealth-address-display'
+
+export {
+  TransactionTracker,
+  useTransactionTracker,
+  type TransactionTrackerProps,
+  type TransactionStatus,
+  type PrivacyVerificationStatus,
+  type TransactionActionType,
+  type TransactionAction,
+  type PrivacyVerification,
+  type PrivacyTransaction,
+} from './transaction-tracker'
+
+export {
+  ViewingKeyManager,
+  useViewingKeyManager,
+  type ViewingKeyManagerProps,
+  type ViewingKey,
+  type ViewingKeyStatus,
+  type ViewingKeyUsage,
+  type KeyExportFormat,
+  type KeyImportSource,
+} from './viewing-key-manager'
+
+// Ethereum-specific components
+export {
+  EthereumPrivacyToggle,
+  useEthereumPrivacyToggle,
+  type EthereumPrivacyToggleProps,
+  type EthereumPrivacyLevel,
+  type EthereumNetworkId,
+  type EthereumGasEstimate,
+  type EthereumPrivacyLevelInfo,
+  type NetworkGasConfig,
+} from './ethereum/privacy-toggle'
+
+export {
+  EthereumTransactionTracker,
+  useEthereumTransactionTracker,
+  ETHEREUM_NETWORKS,
+  getNetworkByChainId,
+  type EthereumTransactionTrackerProps,
+  type EthereumNetwork,
+} from './ethereum/transaction-tracker'
+
+export {
+  EthereumViewingKeyManager,
+  useEthereumViewingKey,
+  type EthereumViewingKeyManagerProps,
+  type EthereumViewingKey,
+} from './ethereum/viewing-key-manager'
+
+export {
+  EthereumStealthAddressDisplay,
+  useEthereumStealthAddressDisplay,
+  ETHEREUM_STEALTH_NETWORKS,
+  isValidEthereumAddress,
+  isValidEthereumStealthAddress,
+  isValidEphemeralPublicKey,
+  truncateEthereumAddress,
+  type EthereumStealthAddressDisplayProps,
+  type EthereumOwnershipStatus,
+  type EthereumStealthNetworkId,
+  type EthereumStealthNetworkConfig,
+} from './ethereum/stealth-address-display'
+
+export {
+  TransactionHistory,
+  useTransactionHistory as useEthereumTransactionHistory,
+  type TransactionHistoryProps,
+  type PrivacyTransactionHistoryItem,
+  type TransactionHistoryFilter,
+  type TransactionHistorySort,
+} from './ethereum/transaction-history'
+
+// NEAR Transaction History (M17-NEAR-20)
+export {
+  TransactionHistoryView as NEARTransactionHistoryView,
+  type TransactionHistoryViewProps as NEARTransactionHistoryViewProps,
+} from './transaction-history'