ChainTalk is a secure, wallet-to-wallet messaging application powered by the XMTP protocol. It provides a decentralized, end-to-end encrypted chat experience directly between Ethereum addresses, ensuring privacy and ownership of your conversations.
"Your keys, your messages." No central servers, no data silos. Just pure, encrypted communication.
- 🔐 End-to-End Encryption: All messages are encrypted using XMTP, readable only by the sender and recipient.
- 🆔 Wallet-Based Identity: Sign in with MetaMask or WalletConnect. Your wallet address is your identity.
- ⚡ Real-Time Messaging: Instant message delivery with live streaming support.
- 📱 Fully Responsive: A beautiful, modern UI that works seamlessly on desktop, tablet, and mobile.
- 🎨 Dark Mode Optimized: Sleek, glassmorphism-inspired design with a rich dark theme.
- 📂 Clean Architecture: Built with Next.js 14, TypeScript, and TailwindCSS for performance and maintainability.
- Framework: Next.js 14 (App Router)
- Language: TypeScript
- Styling: TailwindCSS + Custom CSS Variables
- Icons: Lucide React
- Protocol: XMTP SDK (Extensible Message Transport Protocol)
- Web3: Ethers.js v6 & WalletConnect
- State Management: React Context API
- Notifications: Sonner
The application follows a simple, secure 3-step workflow:
graph TD
A[Start] --> B(Connect Wallet)
B --> C{XMTP Identity?}
C -- No --> D[Sign to Enable XMTP]
C -- Yes --> E[Load Conversations]
D --> E
E --> F[Select / Start Chat]
F --> G[Send Encrypted Message]
G --> H[Recipient Decrypts & Reads]
- Connect Wallet: Users connect their Ethereum wallet (MetaMask or WalletConnect).
- Enable Identity: The user signs a signature request to generate their XMTP identity keys. This happens entirely client-side.
- Chat: Once authenticated, the user can:
- View existing conversations.
- Start a new chat by entering an Ethereum address (
0x...). - Send and receive encrypted messages in real-time.
blockchat/
├── src/
│ ├── app/ # Next.js App Router pages
│ │ ├── layout.tsx # Root layout with providers
│ │ └── page.tsx # Main entry component
│ ├── components/ # Reusable UI components
│ │ ├── Layout.tsx # Main app shell (Header/Footer)
│ │ ├── ChatPanel.tsx # Core chat interface
│ │ ├── MessageList.tsx # Scrollable message view
│ │ └── ...
│ ├── context/ # React Contexts for global state
│ │ ├── WalletContext.tsx # Wallet connection logic
│ │ ├── XMTPContext.tsx # XMTP client lifecycle
│ │ └── ChatContext.tsx # Messaging state & logic
│ ├── lib/ # Utilities and constants
│ └── services/ # External service integrations
│ └── xmtp.ts # XMTP SDK wrapper & types
├── public/ # Static assets
└── ...config files # (tailwind, postcode, next, etc.)
- Node.js 18+
- Bun, Yarn, or npm
- A WalletConnect Cloud Project ID (for WalletConnect support)
-
Clone the repository:
git clone https://github.com/amitgupta7061/blockchat.git cd blockchat -
Install dependencies:
bun install # or npm install -
Configure Environment: Create a
.envfile in the root directory:NEXT_PUBLIC_WALLET_CONNECT_PROJECT_ID=your_project_id_here NEXT_PUBLIC_XMTP_ENV=dev # or production
-
Run Development Server:
bun dev
-
Open http://localhost:3000 in your browser.
Contributions are welcome! Please feel free to submit a Pull Request.
- Fork the project
- Create your feature branch (
git checkout -b feature/AmazingFeature) - Commit your changes (
git commit -m 'Add some AmazingFeature') - Push to the branch (
git push origin feature/AmazingFeature) - Open a Pull Request
This project is open source and available under the MIT License.
Built with ❤️ by Amit Gupta