A framework-agnostic SDK for building confidential frontends with Fully Homomorphic Encryption (FHE)
GitHub Repository: https://github.com/LulaPadberg/fhevm-react-template
Live Example Application: https://fhe-vehicle-insurance.vercel.app/
Example Smart Contract: 0x2A86c562acc0a861A96E4114d7323987e313795F (Sepolia Testnet)
Demo Video: Download demo.mp4 to watch the complete platform demonstration showcasing FHE vehicle insurance claims processing with full privacy protection.
# Install the SDK
npm install @fhevm/universal-sdk
# Initialize in your React app
import { useFhevmClient, useEncrypt } from '@fhevm/universal-sdk/react';
const { client } = useFhevmClient({ network: { chainId: 8009, rpcUrl: 'https://devnet.zama.ai', name: 'Zama Devnet' } });
const { encryptValue } = useEncrypt();
// Encrypt and use!
const encrypted = await encryptValue('uint32', 12345);- 🎯 Framework-Agnostic - Works with React, Vue, Node.js, or any JavaScript environment
- 📦 All-in-One - Single package wrapping all FHEVM dependencies
- 🔗 Wagmi-like API - Familiar interface for web3 developers
- ⚡ Quick Setup - Less than 10 lines of code to get started
- 🔐 Type-Safe - Full TypeScript support with intelligent type inference
- 🪝 React Hooks - Built-in hooks for React applications
- 🎨 Zero Configuration - Sensible defaults that just work
- 📚 Well Documented - Comprehensive docs with examples
npm install @fhevm/universal-sdk
# Or with yarn
yarn add @fhevm/universal-sdk
# Or with pnpm
pnpm add @fhevm/universal-sdk// Install multiple packages
npm install fhevmjs @zama-fhe/oracle-solidity ethers
// Complex initialization
import { createInstance } from 'fhevmjs';
const provider = new BrowserProvider(window.ethereum);
const network = await provider.getNetwork();
const publicKeyResponse = await fetch('...');
const instance = await createInstance({ chainId, publicKey });
// ...many more lines// Install one package
npm install @fhevm/universal-sdk
// Simple initialization
import { useFhevmClient } from '@fhevm/universal-sdk/react';
const { client } = useFhevmClient({
network: { chainId: 8009, rpcUrl: 'https://devnet.zama.ai', name: 'Zama' }
});'use client';
import { useFhevmClient, useEncrypt, useDecrypt } from '@fhevm/universal-sdk/react';
export default function App() {
// Initialize FHEVM
const { client, isReady } = useFhevmClient({
network: {
chainId: 8009,
rpcUrl: 'https://devnet.zama.ai',
name: 'Zama Devnet'
}
});
// Encryption
const { encryptValue, isEncrypting } = useEncrypt({
onSuccess: (data) => console.log('Encrypted!', data)
});
// Decryption
const { decryptValue, result } = useDecrypt({
onSuccess: (result) => console.log('Decrypted:', result.value)
});
// Use it
const handleEncrypt = async () => {
const encrypted = await encryptValue('uint32', 12345);
// Send encrypted data to your smart contract
};
const handleDecrypt = async () => {
await decryptValue({
contractAddress: '0x...',
handle: '0x...'
});
};
if (!isReady) return <div>Loading FHEVM...</div>;
return (
<div>
<button onClick={handleEncrypt} disabled={isEncrypting}>
Encrypt
</button>
<button onClick={handleDecrypt}>
Decrypt
</button>
{result && <p>Result: {result.value.toString()}</p>}
</div>
);
}import { createFhevmClient, encrypt, decrypt } from '@fhevm/universal-sdk';
// Initialize client
const client = await createFhevmClient({
network: {
chainId: 8009,
rpcUrl: 'https://devnet.zama.ai',
name: 'Zama Devnet'
}
});
// Encrypt
const encryptedValue = await encrypt('uint32', 12345);
// Decrypt
const result = await decrypt({
contractAddress: '0x...',
handle: '0x...'
});
console.log('Decrypted value:', result.value);<script setup>
import { ref, onMounted } from 'vue';
import { createFhevmClient, encrypt } from '@fhevm/universal-sdk';
const isReady = ref(false);
const encryptedData = ref(null);
onMounted(async () => {
await createFhevmClient({
network: {
chainId: 8009,
rpcUrl: 'https://devnet.zama.ai',
name: 'Zama Devnet'
}
});
isReady.value = true;
});
async function handleEncrypt() {
encryptedData.value = await encrypt('uint32', 12345);
}
</script>
<template>
<div v-if="isReady">
<button @click="handleEncrypt">Encrypt</button>
</div>
</template>Initialize the FHEVM client.
const client = await createFhevmClient({
network: {
chainId: 8009,
rpcUrl: 'https://devnet.zama.ai',
name: 'Zama Devnet'
},
gateway: {
url: 'https://gateway.zama.ai/decrypt', // optional
relayerAddress: '0x...' // optional
},
aclAddress: '0x...' // optional
});Encrypt a value with automatic type handling.
// Supported types: 'bool', 'uint8', 'uint16', 'uint32', 'uint64', 'address'
const encrypted = await encrypt('uint32', 12345);
const encryptedBool = await encrypt('bool', true);
const encryptedAddr = await encrypt('address', '0x...');Decrypt an encrypted value.
const result = await decrypt({
contractAddress: '0x...',
handle: '0x...'
});
console.log(result.value); // bigintHook for initializing and managing the FHEVM client.
const { client, isLoading, error, isReady } = useFhevmClient(config);Hook for encrypting values.
const { encryptValue, isEncrypting, error, data } = useEncrypt({
onSuccess: (data) => {},
onError: (error) => {}
});Hook for decrypting values.
const { decryptValue, decryptBatch, isDecrypting, error, result } = useDecrypt({
onSuccess: (result) => {},
onError: (error) => {}
});The templates/ directory contains ready-to-use starter templates:
- Next.js Template - Complete Next.js application with SDK integration
- Insurance Frontend Template - Production-ready insurance platform
# Use a template to start your project
cd templates/nextjs
npm install
npm run devThe examples/ directory contains comprehensive examples:
- Next.js Showcase - Full-featured demo with encryption, decryption, and UI components
- Private Vehicle Insurance - Complete insurance platform with SDK integration (React + Next.js)
- Insurance Platform Frontend - Real-world insurance application
- Insurance Platform Contracts - Smart contract implementation
- PrivateVehicleInsurance - Static HTML reference implementation
# Run an example
cd examples/nextjs-showcase
npm install
npm run dev
# Or try the private vehicle insurance app
cd examples/private-vehicle-insurance
npm install
npm run devSee the live insurance platform example at https://fhe-vehicle-insurance.vercel.app/ using smart contract 0x2A86c562acc0a861A96E4114d7323987e313795F on Sepolia Testnet.
@fhevm/universal-sdk
├── Core (Framework-Agnostic)
│ ├── Client Management
│ ├── Encryption (all FHE types)
│ └── Decryption (with EIP-712 signing)
├── React Integration
│ ├── useFhevmClient
│ ├── useEncrypt
│ └── useDecrypt
└── Utilities
├── Type Conversions
└── Helper Functions
The showcase is deployed at: https://fhe-vehicle-insurance.vercel.app/
# Run SDK tests
cd packages/fhevm-sdk
npm test
# Run Next.js example
cd examples/nextjs-showcase
npm run devContributions are welcome! Please see CONTRIBUTING.md for details.
MIT License - see LICENSE for details.
Built with:
- fhevmjs - Official Zama FHEVM JavaScript library
- Zama Oracle - Decryption oracle
- TypeScript, React, Next.js
- Vue.js composables
- Angular services
- Svelte stores
- React Native support
- Enhanced error handling
- Batch operations optimization
- Caching layer
- DevTools integration
Built with ❤️ for the Fully Homomorphic Encryption community