f688f45739
- PostSeparator was a bare 1px line flush against both neighbouring cards, so the seam looked like card contact instead of a real break. Wrapped it in a 12px vertical padding — now there's 12px blank above the line, 1px line, 12px blank below. Trimmed the card's own paddingVertical back down since the separator now owns the inter-post breathing room. - FAB was lifted to bottom: max(insets.bottom, 8) + 70 in the previous commit which put it far too high (a leftover from the original experiment with the absoluteFill wrapper). User wants 12px above the NavBar and 12px from the right edge. The Feed screen's container ends at the NavBar top (enforced by (app)/_layout.tsx's outer <View flex:1> + NavBar sibling), so a simple `right: 12, bottom: 12` on position:absolute lands the button exactly there on every device. Removed the now-unnecessary absoluteFill wrapper too. Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
DChain Messenger — React Native Client
E2E-encrypted mobile/desktop messenger built on the DChain blockchain stack.
Stack: React Native · Expo · NativeWind (Tailwind) · TweetNaCl · Zustand
Quick Start
cd client-app
npm install
npx expo start # opens Expo Dev Tools
# Press 'i' for iOS simulator, 'a' for Android, 'w' for web
Requirements
- Node.js 18+
- Expo Go on your phone (for Expo tunnel), or iOS/Android emulator
- A running DChain node (see root README for
docker compose up --build -d)
Project Structure
client-app/
├── app/
│ ├── _layout.tsx # Root layout — loads keys, sets up nav
│ ├── index.tsx # Welcome / onboarding
│ ├── (auth)/
│ │ ├── create.tsx # Generate new Ed25519 + X25519 keys
│ │ ├── created.tsx # Key created — export reminder
│ │ └── import.tsx # Import existing key.json
│ └── (app)/
│ ├── _layout.tsx # Tab bar — Chats · Wallet · Settings
│ ├── chats/
│ │ ├── index.tsx # Chat list with contacts
│ │ └── [id].tsx # Individual chat with E2E encryption
│ ├── requests.tsx # Incoming contact requests
│ ├── new-contact.tsx # Add contact by @username or address
│ ├── wallet.tsx # Balance + TX history + send
│ └── settings.tsx # Node URL, key export, profile
├── components/ui/ # shadcn-style components (Button, Card, Input…)
├── hooks/
│ ├── useMessages.ts # Poll relay inbox, decrypt messages
│ ├── useBalance.ts # Poll token balance
│ └── useContacts.ts # Load contacts + poll contact requests
└── lib/
├── api.ts # REST client for all DChain endpoints
├── crypto.ts # NaCl box encrypt/decrypt, Ed25519 sign
├── storage.ts # SecureStore (keys) + AsyncStorage (data)
├── store.ts # Zustand global state
├── types.ts # TypeScript interfaces
└── utils.ts # cn(), formatAmount(), relativeTime()
Cryptography
| Operation | Algorithm | Library |
|---|---|---|
| Transaction signing | Ed25519 | TweetNaCl sign |
| Key exchange | X25519 (Curve25519) | TweetNaCl box |
| Message encryption | NaCl box (XSalsa20-Poly1305) | TweetNaCl box |
| Key storage | Device secure enclave | expo-secure-store |
Messages are encrypted as:
Envelope {
sender_pub: <X25519 hex> // sender's public key
recipient_pub: <X25519 hex> // recipient's public key
nonce: <24-byte hex> // random per message
ciphertext: <hex> // NaCl box(plaintext, nonce, sender_priv, recipient_pub)
}
Connect to your node
- Start the DChain node:
docker compose up --build -d - Open the app → Settings → Node URL →
http://YOUR_IP:8081 - If using Expo Go on physical device: your PC and phone must be on the same network, or use
npx expo start --tunnel
Key File Format
The key.json exported/imported by the app:
{
"pub_key": "26018d40...", // Ed25519 public key (64 hex chars)
"priv_key": "...", // Ed25519 private key (128 hex chars)
"x25519_pub": "...", // X25519 public key (64 hex chars)
"x25519_priv": "..." // X25519 private key (64 hex chars)
}
This is the same format as the Go node's --key flag.