{"_id":"@0xbojack/fhevm-react","_rev":"3-7b9c8bb5c7b8896456a4536cbe150794","name":"@0xbojack/fhevm-react","dist-tags":{"latest":"0.2.2"},"versions":{"0.2.0":{"name":"@0xbojack/fhevm-react","version":"0.2.0","keywords":["fhevm","fhe","encryption","react","hooks","privacy","zama","blockchain"],"author":{"name":"Zama"},"license":"BSD-3-Clause-Clear","_id":"@0xbojack/fhevm-react@0.2.0","maintainers":[{"name":"0xbojack","email":"coderbojack@gmail.com"}],"homepage":"https://github.com/zama-ai/fhevm-sdk#readme","bugs":{"url":"https://github.com/zama-ai/fhevm-sdk/issues"},"dist":{"shasum":"6b85c65963c4784850206f3253c1135bb0449fb9","tarball":"https://registry.npmjs.org/@0xbojack/fhevm-react/-/fhevm-react-0.2.0.tgz","fileCount":9,"integrity":"sha512-UtXcOZVAFJKkQLzatRXgatoZ2zTr0vNqCAdo0dzB/li8WI0tJlPQhdMn9LcCXVcMrwndyfNb9h7REovRiT2ZqQ==","signatures":[{"sig":"MEYCIQDqyzECfmISVkJJQjbEajQRqyNboLlAdft5wi59HiCcQQIhAOJK4EjKbaiS+ZwEr1wIm+wPMzAuItwL3W8lV9nJxw4H","keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U"}],"unpackedSize":74037},"main":"./dist/index.js","type":"module","types":"./dist/index.d.ts","module":"./dist/index.js","engines":{"node":">=18.0.0"},"exports":{".":{"types":"./dist/index.d.ts","import":"./dist/index.js","require":"./dist/index.cjs"}},"gitHead":"ff17a53b95b33a83c2bd89c3b608290641d2be72","scripts":{"dev":"tsup --watch","test":"vitest run","build":"tsup","clean":"rm -rf dist","test:watch":"vitest","prepublishOnly":"pnpm build"},"_npmUser":{"name":"0xbojack","email":"coderbojack@gmail.com"},"repository":{"url":"git+https://github.com/zama-ai/fhevm-sdk.git","type":"git","directory":"packages/react"},"_npmVersion":"10.8.2","description":"React hooks for FHEVM SDK","directories":{},"sideEffects":false,"_nodeVersion":"20.19.4","dependencies":{"@0xbojack/fhevm-core":"^0.2.0"},"_hasShrinkwrap":false,"devDependencies":{"tsup":"^8.5.0","react":"^18.3.1","vitest":"^2.1.9","react-dom":"^18.3.1","typescript":"^5.9.2","@types/node":"^22.7.5","@types/react":"^18.3.18","@testing-library/react":"^16.1.0","@testing-library/react-hooks":"^8.0.1"},"peerDependencies":{"react":"^18.0.0 || ^19.0.0","ethers":"^6.13.7"},"_npmOperationalInternal":{"tmp":"tmp/fhevm-react_0.2.0_1761115591864_0.6280486449410325","host":"s3://npm-registry-packages-npm-production"}},"0.2.1":{"name":"@0xbojack/fhevm-react","version":"0.2.1","keywords":["fhevm","fhe","encryption","react","hooks","privacy","zama","blockchain"],"author":{"name":"Zama"},"license":"BSD-3-Clause-Clear","_id":"@0xbojack/fhevm-react@0.2.1","maintainers":[{"name":"0xbojack","email":"coderbojack@gmail.com"}],"homepage":"https://github.com/huaigu/fhevm-sdk/tree/main/packages/react#readme","bugs":{"url":"https://github.com/huaigu/fhevm-sdk/issues"},"dist":{"shasum":"0d9eed7f7ba7a46235e2087e1136a7485f634d15","tarball":"https://registry.npmjs.org/@0xbojack/fhevm-react/-/fhevm-react-0.2.1.tgz","fileCount":9,"integrity":"sha512-FZSqYupqTeItqTrGfYv2lz/pjDQe/wx/n+ZwP8EcZRiSJ3CnHiXpkFo8AdPsScLG89AfXkeL6oe/Cvm83ndQMg==","signatures":[{"sig":"MEQCIH4MdAzQl4+mnsV6rwRIqy+1XWPRy15do5XiXP4tg7UDAiB8zonO7d5AIERuCaypobSWF1/QZY9Ey44fHo7DmvdjCg==","keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U"}],"unpackedSize":74059},"main":"./dist/index.js","type":"module","types":"./dist/index.d.ts","module":"./dist/index.js","engines":{"node":">=18.0.0"},"exports":{".":{"types":"./dist/index.d.ts","import":"./dist/index.js","require":"./dist/index.cjs"}},"gitHead":"c07f422db6ea84e5cdbb2866228f8181f2bfa6a3","scripts":{"dev":"tsup --watch","test":"vitest run","build":"tsup","clean":"rm -rf dist","test:watch":"vitest","prepublishOnly":"pnpm build"},"_npmUser":{"name":"0xbojack","email":"coderbojack@gmail.com"},"repository":{"url":"git+https://github.com/huaigu/fhevm-sdk.git","type":"git","directory":"packages/react"},"_npmVersion":"10.8.2","description":"React hooks for FHEVM SDK","directories":{},"sideEffects":false,"_nodeVersion":"20.19.4","dependencies":{"@0xbojack/fhevm-core":"^0.2.0"},"_hasShrinkwrap":false,"devDependencies":{"tsup":"^8.5.0","react":"^18.3.1","vitest":"^2.1.9","react-dom":"^18.3.1","typescript":"^5.9.2","@types/node":"^22.7.5","@types/react":"^18.3.18","@testing-library/react":"^16.1.0","@testing-library/react-hooks":"^8.0.1"},"peerDependencies":{"react":"^18.0.0 || ^19.0.0","ethers":"^6.13.7"},"_npmOperationalInternal":{"tmp":"tmp/fhevm-react_0.2.1_1761116185380_0.10941879904822294","host":"s3://npm-registry-packages-npm-production"}},"0.2.2":{"name":"@0xbojack/fhevm-react","version":"0.2.2","description":"React hooks for FHEVM SDK","type":"module","main":"./dist/index.js","module":"./dist/index.js","types":"./dist/index.d.ts","exports":{".":{"types":"./dist/index.d.ts","import":"./dist/index.js","require":"./dist/index.cjs"}},"engines":{"node":">=18.0.0"},"sideEffects":false,"keywords":["fhevm","fhe","encryption","react","hooks","privacy","zama","blockchain"],"author":{"name":"Zama"},"license":"BSD-3-Clause-Clear","repository":{"type":"git","url":"git+https://github.com/huaigu/fhevm-sdk.git","directory":"packages/react"},"homepage":"https://github.com/huaigu/fhevm-sdk/tree/main/packages/react#readme","bugs":{"url":"https://github.com/huaigu/fhevm-sdk/issues"},"dependencies":{"@0xbojack/fhevm-core":"^0.2.0"},"peerDependencies":{"react":"^18.0.0 || ^19.0.0","ethers":"^6.13.7"},"devDependencies":{"@testing-library/react":"^16.1.0","@testing-library/react-hooks":"^8.0.1","@types/react":"^18.3.18","react":"^18.3.1","react-dom":"^18.3.1","@types/node":"^22.7.5","tsup":"^8.5.0","typescript":"^5.9.2","vitest":"^2.1.9"},"scripts":{"build":"tsup","dev":"tsup --watch","test":"vitest run","test:watch":"vitest","clean":"rm -rf dist"},"_id":"@0xbojack/fhevm-react@0.2.2","_integrity":"sha512-GCeoXrYCRHA8Lqb0vwEX6SKmR9rGYVpskI3CXMLjp1eBGmJqfwzgaOJcw2BREYx4hhqTZXNIAdu2i/5vlDp76Q==","_resolved":"/tmp/80fddd5321d68037d6c1e24242683430/0xbojack-fhevm-react-0.2.2.tgz","_from":"file:0xbojack-fhevm-react-0.2.2.tgz","_nodeVersion":"20.19.4","_npmVersion":"10.8.2","dist":{"integrity":"sha512-GCeoXrYCRHA8Lqb0vwEX6SKmR9rGYVpskI3CXMLjp1eBGmJqfwzgaOJcw2BREYx4hhqTZXNIAdu2i/5vlDp76Q==","shasum":"bbb1b167eb98eaf0843638cc84efb7054b7b7597","tarball":"https://registry.npmjs.org/@0xbojack/fhevm-react/-/fhevm-react-0.2.2.tgz","fileCount":9,"unpackedSize":74259,"signatures":[{"keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U","sig":"MEQCIAKjuLKNP2IjwMOfiZM5cx2yuBawNX9RQxcQ1LvMFDaOAiAJ/PDeKpkfUE6UTgvDaNCUTxX9z5r/Ka1Z7dM+9ky06g=="}]},"_npmUser":{"name":"0xbojack","email":"coderbojack@gmail.com"},"directories":{},"maintainers":[{"name":"0xbojack","email":"coderbojack@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages-npm-production","tmp":"tmp/fhevm-react_0.2.2_1761201615208_0.3671889540066624"},"_hasShrinkwrap":false}},"time":{"created":"2025-10-22T06:46:31.723Z","modified":"2025-10-23T06:40:15.561Z","0.2.0":"2025-10-22T06:46:32.063Z","0.2.1":"2025-10-22T06:56:25.579Z","0.2.2":"2025-10-23T06:40:15.389Z"},"bugs":{"url":"https://github.com/huaigu/fhevm-sdk/issues"},"author":{"name":"Zama"},"license":"BSD-3-Clause-Clear","homepage":"https://github.com/huaigu/fhevm-sdk/tree/main/packages/react#readme","keywords":["fhevm","fhe","encryption","react","hooks","privacy","zama","blockchain"],"repository":{"type":"git","url":"git+https://github.com/huaigu/fhevm-sdk.git","directory":"packages/react"},"description":"React hooks for FHEVM SDK","maintainers":[{"name":"0xbojack","email":"coderbojack@gmail.com"}],"readme":"# @fhevm/react\n\nReact hooks and components for FHEVM SDK - Build privacy-preserving dApps with Fully Homomorphic Encryption.\n\n## Features\n\n- 🎣 **React Hooks**: Intuitive wagmi-like hooks (useInit, useEncrypt, useDecrypt)\n- ⚛️ **Context Provider**: Simple setup with FhevmProvider\n- 🔄 **Auto-cancellation**: Automatic cleanup on component unmount\n- 📊 **Status Tracking**: Built-in loading and error states\n- 🎯 **TypeScript**: Full type safety and IntelliSense support\n- ⚡ **Framework-Agnostic Core**: Built on @fhevm/core\n\n## Installation\n\n```bash\nnpm install @fhevm/react @fhevm/core ethers\n# or\npnpm add @fhevm/react @fhevm/core ethers\n# or\nyarn add @fhevm/react @fhevm/core ethers\n```\n\n## Quick Start\n\n### 1. Setup Provider\n\nWrap your app with `FhevmProvider`:\n\n```tsx\nimport { FhevmProvider, IndexedDBStorage } from '@fhevm/react';\n\nfunction App() {\n  return (\n    <FhevmProvider config={{ storage: new IndexedDBStorage() }}>\n      <YourApp />\n    </FhevmProvider>\n  );\n}\n```\n\n### 2. Initialize FHEVM\n\n```tsx\nimport { useInit } from '@fhevm/react';\nimport { BrowserProvider } from 'ethers';\nimport { useEffect } from 'react';\n\nfunction InitializeButton() {\n  const { init, status, error } = useInit();\n\n  useEffect(() => {\n    const initFhevm = async () => {\n      const provider = new BrowserProvider(window.ethereum);\n      await init({ provider });\n    };\n    initFhevm();\n  }, []);\n\n  if (status === 'loading') return <div>Initializing FHEVM...</div>;\n  if (error) return <div>Error: {error.message}</div>;\n  if (status === 'ready') return <div>FHEVM Ready ✅</div>;\n\n  return <button onClick={() => init({ provider })}>Initialize</button>;\n}\n```\n\n### 3. Encrypt Data\n\n```tsx\nimport { useEncrypt, useStatus } from '@fhevm/react';\n\nfunction EncryptComponent() {\n  const { encrypt, data, isLoading, error } = useEncrypt();\n  const { isReady } = useStatus();\n\n  const handleEncrypt = async () => {\n    const result = await encrypt({\n      value: 42,\n      type: 'euint32',\n      contractAddress: '0x...',\n      userAddress: '0x...',\n    });\n\n    if (result) {\n      // Use result.handles and result.inputProof in your contract call\n      console.log('Encrypted:', result);\n    }\n  };\n\n  if (!isReady) return <div>Please initialize FHEVM first</div>;\n\n  return (\n    <div>\n      <button onClick={handleEncrypt} disabled={isLoading}>\n        {isLoading ? 'Encrypting...' : 'Encrypt Value'}\n      </button>\n      {error && <div>Error: {error.message}</div>}\n      {data && <pre>{JSON.stringify(data, null, 2)}</pre>}\n    </div>\n  );\n}\n```\n\n### 4. Decrypt Data\n\n```tsx\nimport { useDecrypt } from '@fhevm/react';\nimport { BrowserProvider } from 'ethers';\n\nfunction DecryptComponent() {\n  const { decrypt, data, isLoading, error } = useDecrypt();\n\n  const handleDecrypt = async () => {\n    const provider = new BrowserProvider(window.ethereum);\n    const signer = await provider.getSigner();\n\n    const result = await decrypt(\n      [\n        { handle: '0x...', contractAddress: '0x...' },\n      ],\n      signer\n    );\n\n    if (result) {\n      console.log('Decrypted values:', result);\n    }\n  };\n\n  return (\n    <div>\n      <button onClick={handleDecrypt} disabled={isLoading}>\n        {isLoading ? 'Decrypting...' : 'Decrypt'}\n      </button>\n      {data && <div>Result: {JSON.stringify(data)}</div>}\n      {error && <div>Error: {error.message}</div>}\n    </div>\n  );\n}\n```\n\n## API Reference\n\n### Components\n\n#### `<FhevmProvider>`\n\nContext provider for FHEVM client.\n\n**Props:**\n- `children: ReactNode` - Child components\n- `config?: FhevmConfig` - Optional FHEVM configuration\n\n**Example:**\n```tsx\n<FhevmProvider config={{ storage: new IndexedDBStorage() }}>\n  <App />\n</FhevmProvider>\n```\n\n### Hooks\n\n#### `useInit()`\n\nInitialize the FHEVM instance.\n\n**Returns:**\n- `init: (params: InitParams) => Promise<FhevmInstance | null>` - Initialize function\n- `status: FhevmStatus` - Current status ('idle' | 'loading' | 'ready' | 'error')\n- `instance: FhevmInstance | null` - FHEVM instance (null if not ready)\n- `error: Error | null` - Error if initialization failed\n- `cancel: () => void` - Cancel ongoing initialization\n\n**Example:**\n```tsx\nconst { init, status, instance, error, cancel } = useInit();\n\n// Initialize with provider\nawait init({ provider });\n\n// Or with RPC URL\nawait init({ provider: 'http://localhost:8545', chainId: 31337 });\n\n// Cancel if needed\ncancel();\n```\n\n#### `useEncrypt()`\n\nEncrypt data for on-chain computation.\n\n**Returns:**\n- `encrypt: (params: EncryptParams) => Promise<EncryptResult | null>` - Encrypt function\n- `data: EncryptResult | null` - Encrypted result\n- `isLoading: boolean` - Loading state\n- `error: Error | null` - Error if encryption failed\n- `reset: () => void` - Reset state\n\n**Supported Types:**\n- `ebool` - Encrypted boolean\n- `euint8`, `euint16`, `euint32`, `euint64`, `euint128`, `euint256` - Encrypted unsigned integers\n- `eaddress` - Encrypted address\n\n**Example:**\n```tsx\nconst { encrypt, data, isLoading, error, reset } = useEncrypt();\n\nconst result = await encrypt({\n  value: 100,\n  type: 'euint32',\n  contractAddress: '0x...',\n  userAddress: '0x...',\n});\n\n// Reset state\nreset();\n```\n\n#### `useDecrypt()`\n\nDecrypt encrypted data (requires user signature).\n\n**Returns:**\n- `decrypt: (requests: DecryptRequest[], signer: JsonRpcSigner) => Promise<DecryptResult | null>` - Decrypt function\n- `data: DecryptResult | null` - Decrypted result\n- `isLoading: boolean` - Loading state\n- `error: Error | null` - Error if decryption failed\n- `reset: () => void` - Reset state\n\n**Example:**\n```tsx\nconst { decrypt, data, isLoading, error } = useDecrypt();\n\nconst provider = new BrowserProvider(window.ethereum);\nconst signer = await provider.getSigner();\n\nconst result = await decrypt(\n  [\n    { handle: '0x...', contractAddress: '0x...' },\n    { handle: '0x...', contractAddress: '0x...' },\n  ],\n  signer\n);\n```\n\n#### `useStatus()`\n\nGet current status with convenience booleans.\n\n**Returns:**\n- `status: FhevmStatus` - Current status\n- `isIdle: boolean` - Whether status is 'idle'\n- `isLoading: boolean` - Whether status is 'loading'\n- `isReady: boolean` - Whether status is 'ready'\n- `isError: boolean` - Whether status is 'error'\n\n**Example:**\n```tsx\nconst { status, isReady, isLoading, isError } = useStatus();\n\nif (isLoading) return <Spinner />;\nif (isError) return <Error />;\nif (isReady) return <App />;\n```\n\n#### `usePublicKey()`\n\nGet the public key for encryption (only available after initialization).\n\n**Returns:**\n- `publicKey: string | null` - Public key (null if not ready)\n- `error: Error | null` - Error if getting public key failed\n\n**Example:**\n```tsx\nconst { publicKey, error } = usePublicKey();\n\nif (publicKey) {\n  console.log('Public key:', publicKey);\n}\n```\n\n#### `useFhevmContext()`\n\nAccess the FHEVM client and status from context.\n\n**Returns:**\n- `client: FhevmClient` - FHEVM client instance\n- `status: FhevmStatus` - Current status\n\n**Example:**\n```tsx\nconst { client, status } = useFhevmContext();\n\n// Direct access to client methods\nconst instance = client.getInstance();\n```\n\n## Complete Example\n\n```tsx\nimport {\n  FhevmProvider,\n  useInit,\n  useEncrypt,\n  useDecrypt,\n  useStatus,\n  IndexedDBStorage,\n} from '@fhevm/react';\nimport { BrowserProvider } from 'ethers';\nimport { useEffect } from 'react';\n\nfunction App() {\n  return (\n    <FhevmProvider config={{ storage: new IndexedDBStorage() }}>\n      <FhevmApp />\n    </FhevmProvider>\n  );\n}\n\nfunction FhevmApp() {\n  const { init } = useInit();\n  const { isReady, isLoading, isError } = useStatus();\n\n  useEffect(() => {\n    const initFhevm = async () => {\n      const provider = new BrowserProvider(window.ethereum);\n      await init({ provider });\n    };\n    initFhevm();\n  }, []);\n\n  if (isLoading) return <div>Loading FHEVM...</div>;\n  if (isError) return <div>Failed to initialize FHEVM</div>;\n  if (!isReady) return <div>Please connect wallet</div>;\n\n  return (\n    <div>\n      <h1>FHEVM Demo</h1>\n      <EncryptSection />\n      <DecryptSection />\n    </div>\n  );\n}\n\nfunction EncryptSection() {\n  const { encrypt, data, isLoading } = useEncrypt();\n\n  return (\n    <div>\n      <button\n        onClick={() =>\n          encrypt({\n            value: 42,\n            type: 'euint32',\n            contractAddress: '0x...',\n            userAddress: '0x...',\n          })\n        }\n        disabled={isLoading}\n      >\n        Encrypt\n      </button>\n      {data && <pre>{JSON.stringify(data, null, 2)}</pre>}\n    </div>\n  );\n}\n\nfunction DecryptSection() {\n  const { decrypt, data, isLoading } = useDecrypt();\n\n  const handleDecrypt = async () => {\n    const provider = new BrowserProvider(window.ethereum);\n    const signer = await provider.getSigner();\n\n    await decrypt(\n      [{ handle: '0x...', contractAddress: '0x...' }],\n      signer\n    );\n  };\n\n  return (\n    <div>\n      <button onClick={handleDecrypt} disabled={isLoading}>\n        Decrypt\n      </button>\n      {data && <pre>{JSON.stringify(data, null, 2)}</pre>}\n    </div>\n  );\n}\n```\n\n## TypeScript Support\n\nFull TypeScript support with comprehensive type definitions.\n\n```tsx\nimport type {\n  FhevmConfig,\n  FhevmStatus,\n  InitParams,\n  EncryptParams,\n  EncryptResult,\n  DecryptRequest,\n  DecryptResult,\n} from '@fhevm/react';\n```\n\n## License\n\nBSD-3-Clause-Clear\n\n## Links\n\n- [FHEVM Documentation](https://docs.zama.ai/fhevm)\n- [@fhevm/core](../core)\n- [GitHub Repository](https://github.com/zama-ai/fhevm-sdk)\n- [Zama](https://zama.ai)\n","readmeFilename":"README.md"}