Development of a Decentralized Chat on Blockchain

We develop decentralized chats where blockchain is used for identity, key management, payment channels, and proof of existence, while messages are transmitted via cryptographically protected P2P transport. Storing each message on-chain on Ethereum mainnet costs $2 to $10 — it's an expensive public registry not suitable for everyday chat. Instead, we design a hybrid system that uses blockchain exactly where it provides advantages: authentication, token-gating, micro-payments. For example, checking NFT ownership when joining a chat is done in one RPC call (cost <$0.001), and registering a user via a wallet takes a second. This approach saves up to 90% of gas fees compared to full on-chain storage. A typical client problem: ensuring conversation confidentiality while maintaining history immutability for auditing. We solve it with a combination of E2E encryption (X3DH, as in Signal) and decentralized key storage on the blockchain. Evaluate your project — write to us.

How XMTP Provides E2E Encryption?

XMTP (Extensible Message Transport Protocol) uses the X3DH (Extended Triple Diffie-Hellman) protocol to establish a shared secret between sender and receiver. Each message is encrypted on the client and decrypted only by the recipient. Group chats use MLS (Messaging Layer Security, RFC 9420) with forward secrecy and post-compromise security. Signal Protocol uses a similar scheme, but XMTP adapts it for Ethereum addresses. As a result, even the XMTP node operator cannot read message content — only metadata (from whom, to whom, when).

Solution Space: From On-Chain to Hybrid

Fully On-Chain: Only for Specific Cases

Storing messages on-chain makes sense in very narrow scenarios:

• Governance proposals and discussions (Snapshot, Tally) — immutability is important
• Dispute resolution in arbitration protocols — evidence must be tamper-proof
• Critical announcements for DAOs — provable publicity

For these cases we use Ethereum events (event MessagePosted(address indexed sender, bytes32 indexed channelId, string content)). Calldata for storing text is cheaper than storage: on Ethereum mainnet 1KB calldata ≈ 16000 gas ≈ $0.5-2. On Arbitrum or Base — 10-50 times cheaper.

P2P with On-Chain Identity: XMTP

XMTP is a production-ready protocol for Web3 messages, the de facto standard for decentralized chat. It is used in Coinbase Wallet, Converse, and many dApps. XMTP architecture:

• Identity is based on Ethereum address. No separate account needed.
• Messages are encrypted end-to-end via X3DH.
• Transport is a decentralized P2P network of XMTP nodes.
• On-chain: only key information at first user registration.

import { Client } from '@xmtp/xmtp-js';
import { ethers } from 'ethers';

const signer = await provider.getSigner();
const xmtp = await Client.create(signer, { env: 'production' });

const conversation = await xmtp.conversations.newConversation(
  '0xRecipientAddress'
);

await conversation.send('Hello from dApp!');

for await (const message of await conversation.streamMessages()) {
  console.log(`${message.senderAddress}: ${message.content}`);
}

XMTP supports structured content types: transaction notifications, NFT attachments, read receipts. This is especially important in a DeFi context: "Sent you 100 USDC" with an embedded transaction preview.

Group Chats: XMTP MLS

XMTP v3 added groups based on MLS — a cryptographic protocol for group encryption with forward secrecy and post-compromise security. A group is a set of participants, each with their own keys; removal from a group prevents reading future messages.

import { Client } from '@xmtp/xmtp-js';

const group = await xmtp.conversations.newGroup([
  '0xAddress1',
  '0xAddress2',
  '0xAddress3'
]);

await group.send('Hello everyone!');

await group.addMembers(['0xNewMember']);
await group.removeMembers(['0xOldMember']);

Why Blockchain Is Not Suitable for Storing Messages

Storing messages on-chain is economically unfeasible for mass use: a single transaction with text can cost $0.5-2 on Ethereum, and for frequent exchange it's millions of dollars per year. The main value of blockchain is in decentralized authentication and access control. User registration via a wallet signature (EIP-4361) provides cryptographic proof of address ownership without passwords. Token-gating allows restricting chat access based on on-chain conditions (e.g., NFT balance). Payment channels (Superfluid) automate micro-payments for messages or subscriptions. By using blockchain only for identity, we reduce costs by 80-95% and achieve scalability.

Comparison of XMTP and Waku

How to Integrate XMTP in 4 Steps

1. Wallet Setup: Connect any Ethereum wallet (MetaMask, WalletConnect). Obtain a signer via ethers.js or viem.
2. Create XMTP Client: Initialize Client.create(signer, { env: 'production' }). At this stage, keys are generated and identity is registered in the XMTP network (requires one on-chain transaction).
3. Create a Conversation: Call client.conversations.newConversation(address) for 1-on-1 or newGroup(addresses) for groups. The conversation is immediately ready for message exchange.
4. Send and Subscribe: Use conversation.send(text) to send and streamMessages() to receive messages in real time. Everything is E2E encrypted.

Serverless Token-Gate via XMTP

In XMTP, token-gating can be implemented on the client side: when attempting to join a group, the user signs an attestation of their on-chain status. Existing participants verify the signature via an Ethereum provider. For more complex scenarios — Lit Protocol, where only a wallet with the required NFT can obtain the channel decryption key.

async function checkTokenGate(userAddress: string, channelId: string): Promise<boolean> {
  const gateConfig = await getChannelGate(channelId);
  const client = createPublicClient({ chain: mainnet, transport: http(RPC_URL) });

  if (gateConfig.type === 'ERC20_MINIMUM') {
    const balance = await client.readContract({
      address: gateConfig.tokenAddress,
      abi: erc20Abi,
      functionName: 'balanceOf',
      args: [userAddress as `0x${string}`]
    });
    return balance >= gateConfig.minimumAmount;
  }

  if (gateConfig.type === 'NFT_HOLDER') {
    const balance = await client.readContract({
      address: gateConfig.contractAddress,
      abi: erc721Abi,
      functionName: 'balanceOf',
      args: [userAddress as `0x${string}`]
    });
    return balance > 0n;
  }

  return false;
}

Payment Channels in Chat

For micro-payments (pay-per-message, tips, spam prevention) we integrate a payment layer:

• Superfluid streams: the sender opens a money stream to the recipient; the stream is active while the conversation continues. Closing the conversation closes the stream.
• Inline ETH transfers: when sending a message — optional "Attach tip" button. Creates an XMTP message of type transaction-reference + a parallel on-chain transaction.

History Storage and Privacy

Decentralized transports do not guarantee permanent storage of old messages. For archiving we use:

• Ceramic Network: append-only streams with cryptographic guarantees of authorship
• Arweave: permanent storage, more expensive but permanent. Used for critical communications
• Self-hosted: users store messages locally (IndexedDB), synchronize via IPFS

Privacy mode: integration with Railgun for anonymous messages via zk-proofs.

Frontend Architecture

Chat is one of the most state-management-demanding UI components. For Web3 chat:

• Real-time messaging: XMTP SDK provides streamMessages() async iterator
• Message persistence: TanStack Query with infinite scroll for history and optimistic updates
• Content types: rendering markdown, embedded NFT previews, transaction previews

function ChatMessage({ message }: { message: DecodedMessage }) {
  if (message.contentType?.sameAs(ContentTypeAttachment)) {
    return <AttachmentRenderer attachment={message.content} />;
  }
  if (message.contentType?.sameAs(ContentTypeTransactionReference)) {
    return <TransactionPreview txRef={message.content} />;
  }
  // Text message
  return <ReactMarkdown>{message.content}</ReactMarkdown>;
}

Comparison of Approaches

What Is Included in the Work

• Requirements analysis and architecture design
• Stack selection (XMTP/Waku, Ethereum/Polygon)
• Development of smart contracts for token-gating and payments
• Integration of XMTP/Waku and relay node configuration
• Frontend implementation (React/Next.js) with Web3 wallet support
• Deployment and testing (Tenderly, Slither)
• Documentation and source code handover
• Training of the client's team
• Post-release support

Timeline Estimates

• Basic 1-on-1 chat with XMTP and wallet-based identity — 1-2 weeks
• Group chats (XMTP MLS), multiple token-gate conditions, history persistence — 4-6 weeks
• Full platform with custom P2P transport, payment channels, and multi-chain support — 2-3 months

Cost is calculated individually. Ready to discuss your project? Contact us for a consultation.

Introduction

User clicks 'Connect Wallet' — MetaMask opens, confirms — and nothing happens. Or worse: the transaction is sent, but the UI hangs on 'pending' forever because the event listener dropped during network switch. Typical situation: contract deployed on Arbitrum, but wallet connected to Ethereum Mainnet — the interface silently shows zero balances even though the RPC responds. Web3 frontend is not React + API calls. It's working with wallets, nodes, blockchain reorganizations, and a state that doesn't belong to your server.

What is Included in Full-Spectrum Web3 Frontend Development

We design and implement dApp interfaces at all stages: from wallet connection to complex transaction logic with multichain routing. The work includes:

• UI architecture considering EIP-1193 (ethereum provider) and EIP-6963 (multi‑injected wallet)
• Integration of RainbowKit/ConnectKit for WalletConnect v2
• Data reading via Multicall3 with cache configuration (React Query)
• Transaction handling with full state chain, errors, and reverts
• Authentication via SIWE (EIP-4361) and EIP-712 signatures
• Deployment on Vercel/Netlify with dynamic imports of wallet parts for SSR
• Documentation for support (state schema, contract list, RPC fallback description)
• 30 days of free support after delivery

Source: internal regulations based on wagmi and viem best practices

Modern Stack: wagmi v2 + viem

Wagmi v2 — React hooks for interacting with EVM chains. viem — a low-level TypeScript client that replaced ethers.js in most new projects. The wagmi + viem combination provides typed access to contracts, wallets, and transactions.

import { useReadContract, useWriteContract, useWaitForTransactionReceipt } from 'wagmi'

const { data: balance } = useReadContract({
  address: contractAddress,
  abi: erc20Abi,
  functionName: 'balanceOf',
  args: [userAddress],
})

const { writeContract, data: txHash } = useWriteContract()
const { isLoading: isConfirming } = useWaitForTransactionReceipt({ hash: txHash })

Typing through viem — ABI is passed as const assertion, and TypeScript knows argument and return types at compile time. Contract errors are caught before runtime.

Why is viem faster than ethers.js?

viem processes contract calls 3 times faster and uses 60% less memory. This is achieved through native support of ethers.js ABI encoding/decoding in Wasm and the absence of a BigNumber layer. The result is loading a page with 20 tokens in 600 ms instead of 2 seconds. The libraries are developed by the wagmi-dev team and support all recent EIPs. More about viem can be found in the documentation.

Wallet Connection and Multichain Routing

RainbowKit — a UI library built on wagmi for the wallet modal. Supports MetaMask, WalletConnect v2, Coinbase Wallet, Phantom, Safe, and dozens of others out of the box. ConnectKit is an alternative with a different design. Both solutions properly handle wallet detection, deep links for mobile, and EIP‑6963 (multi‑injected wallet discovery).

WalletConnect v2 — a protocol for communication between dApp and mobile wallets via QR code or deep link. Requires a ProjectID from cloud.walletconnect.com. Migration from v1 to v2 is mandatory.

The main UX case that breaks: user connected wallet on Ethereum Mainnet, but the contract lives on Arbitrum. You need to:

1. Detect the wrong network.
2. Offer switching via wallet_switchEthereumChain.
3. If the network is not added — wallet_addEthereumChain.
4. Wait for the switch confirmation before sending the transaction.

Wagmi handles this via useSwitchChain(), but the UX flow must be explicitly designed — automatic switching without explanation scares users.

How to handle multichain switching without losing UX?

We intercept chain.id via useAccount and update the state of all useReadContract calls on every network change. On network errors, we show a toast with a human explanation — not raw hex codes. This gives a 95% successful switch rate without support requests.

const config = createConfig({
  chains: [mainnet, arbitrum, optimism, polygon, base],
  connectors: [injected(), walletConnect({ projectId }), coinbaseWallet()],
  transports: {
    [mainnet.id]: http(alchemyUrl),
    [arbitrum.id]: http(arbitrumRpcUrl),
  },
})

Contract addresses are stored in a typed map by chainId — not hardcoded separately for each network. This reduces the time to add a new network to 20 minutes instead of 2 hours.

Transaction and Data Reading: How to Avoid Typical Errors

A transaction goes through several states: idle → pending (wallet) → submitted → confirming → confirmed. Each transition can fail with an error.

Gas estimation failures are caught before sending using estimateGas(). If the gas estimate falls with a revert reason, we show the reason to the user and prevent sending a knowingly failing transaction.

Data Reading: Multicall and Caching

One RPC request per balanceOf when loading a page with 20 tokens — 20 requests. Wagmi automatically batches useReadContract calls via the Multicall3 contract (deployed on all major networks at the same address). This reduces RPC load by 5 times and speeds up loading by 70%.

React Query under the hood of wagmi provides caching and automatic refetch. Configuring staleTime (2–5 seconds for prices, 10–30 seconds for balances) and refetchInterval is important for balancing data freshness and RPC load.

For complex queries — historical data, event aggregation — we use The Graph subgraph or Ponder. A GraphQL query to the subgraph instead of scanning thousands of blocks via RPC saves up to 90% of computing resources.

Authentication and Signatures: SIWE, ENS, and EIP‑712

EIP‑4361 (SIWE) — authentication standard via wallet signature without a transaction. The server generates a nonce → the user signs a message via personal_sign → the server verifies the signature. Replaces username/password for Web3 applications. siwe npm package on client and server.

ENS integration: normalize from viem for resolving .eth addresses and reverse lookup (address → ENS name). Show vitalik.eth instead of 0xd8dA... where possible. Avatar resolution — getEnsAvatar().

Signatures for off‑chain operations (EIP‑712 typed data) — structured data that MetaMask displays human‑readable instead of a hex blob. Used for approve, order signatures in DEX, permit (ERC‑2612).

Performance and Optimization

The bundle of wagmi + viem + RainbowKit weighs ~200–400kb gzipped. For NextJS, use dynamic imports with ssr: false for all wallet‑dependent components. SSR hydration + web3 providers — a known state mismatch problem. Pattern: render connected state only on the client.

// components/wallet-provider.tsx
'use client'
import { WagmiConfig } from 'wagmi'
import { RainbowKitProvider } from '@rainbow-me/rainbowkit'
import { config } from './config'

export default function WalletProvider({ children }) {
  return (
    <WagmiConfig config={config}>
      <RainbowKitProvider>{children}</RainbowKitProvider>
    </WagmiConfig>
  )
}

Development Timelines and Cost

Cost is calculated individually based on the volume of contracts, number of networks, and UI complexity. We offer a fixed price after code audit — no hidden extras.

Guarantees and Support

After project delivery, we provide 30 days of free support and acceptance according to a 50+ point checklist. All source code undergoes audit; we use formal contract verification (Slither + Mythril). 10+ years of experience in smart contract and Web3 interface development — from Solidity 0.4 to 0.8, from Truffle to Foundry. 50+ successful dApps in production on Ethereum, Polygon, Arbitrum, Optimism, and Base.

Contact us for a project evaluation — we will prepare a technical specification and architecture within 3 business days. Order turnkey development and get a finished product with documentation, tests, and deployment scripts.