Message in a Bottle - FHEVM SDK Demo

A beautiful, ocean-themed decentralized application that demonstrates the power of Fully Homomorphic Encryption (FHE) on the blockchain. Send encrypted messages across the blockchain ocean using the FHEVM SDK.

🌊 Features

• Encrypted Messaging: Send messages encrypted with FHE that only you can decrypt
• Beautiful Ocean UI: Immersive ocean-themed interface with animated waves
• Sepolia Network: Deployed on Sepolia testnet for real blockchain interaction
• FHEVM Integration: Full integration with FHEVM SDK for encryption/decryption
• Responsive Design: Works on desktop and mobile devices

🚀 Quick Start

Prerequisites

• Node.js 20+
• pnpm (recommended) or npm
• MetaMask or compatible wallet
• Sepolia ETH for gas fees

Installation

1. Clone and install dependencies:

git clone <repository-url>
cd fhevm-react-template2
pnpm install

2. Set up environment variables: Create a .env.local file in the packages/nextjs directory:

# Sepolia Network Configuration
SEPOLIA_RPC_URL=
PRIVATE_KEY=

# Optional: Alchemy API Key
NEXT_PUBLIC_ALCHEMY_API_KEY=

# WalletConnect Project ID
NEXT_PUBLIC_WALLET_CONNECT_PROJECT_ID=

3. Deploy the smart contract:

# Deploy to Sepolia
pnpm hardhat:deploy:sepolia

4. Start the development server:

pnpm start

5. Open your browser: Navigate to http://localhost:3000

🏗️ Project Structure

packages/
├── fhevm-sdk/           # Universal FHEVM SDK
│   ├── src/
│   │   ├── core/        # Core FHEVM functionality
│   │   ├── react/       # React hooks and components
│   │   └── storage/     # Storage utilities
│   └── test/            # SDK tests
├── hardhat/             # Smart contracts
│   ├── contracts/       # Solidity contracts
│   └── scripts/         # Deployment scripts
└── nextjs/              # Frontend application
    ├── app/
    │   ├── _components/ # React components
    │   └── page.tsx     # Main page
    ├── hooks/           # Custom hooks
    └── services/        # Web3 services

🔧 Smart Contract

The MessageInBottle.sol contract provides:

• Encrypted Message Storage: Store messages encrypted with FHE
• Message Metadata: Public information like sender, timestamp
• Decryption Control: Only the sender can decrypt their messages
• Event Logging: Track message creation and reading

🎨 UI Components

Main Components

• MessageInBottleApp: Main application container
• BottleSender: Send encrypted messages
• BottleReceiver: View and decrypt received messages
• OceanWaves: Animated ocean background

Features

• Ocean Theme: Beautiful gradient backgrounds and wave animations
• Responsive Design: Mobile-first approach
• Loading States: Smooth loading animations
• Error Handling: User-friendly error messages

🔐 FHE Encryption Flow

1. User Input: User types a message
2. Encryption: Message is encrypted using FHEVM
3. Blockchain Storage: Encrypted message stored on Sepolia
4. Retrieval: User can fetch their encrypted messages
5. Decryption: Only the sender can decrypt their messages

🧪 Testing

Run the test suite:

# Test the SDK
pnpm sdk:test

# Test smart contracts
pnpm hardhat:test

📱 Usage

1. Connect Wallet: Click "Connect Wallet" to connect your MetaMask
2. Send Message:
   • Switch to "Send Message" tab
   • Type your secret message
   • Click "Encrypt Message"
   • Click "Send Bottle"
3. Receive Messages:
   • Switch to "Receive Messages" tab
   • Click "Search for Messages"
   • Click "Decrypt Message" to read encrypted content

📄 License

This project is licensed under the BSD-3-Clause-Clear License.

🙏 Acknowledgments

• FHEVM Team: For the amazing FHEVM SDK
• Zama: For pioneering FHE on blockchain
• RainbowKit: For wallet connection utilities
• Tailwind CSS: For beautiful styling

---

Made with ❤️ for the FHEVM community

Send your encrypted messages across the blockchain ocean! 🌊🍾