50aacced0b
Three related layout polish issues. 1. Avatar + name + time splitting to two lines Fixed by collapsing the "·" separator + time into a single Text component (was three sibling Texts). RN occasionally lays out three-Text-sibling rows oddly when the name is long because each Text measures independently. With the separator glued to the time, there's one indivisible chip for "· 2h" that flexShrink:0 keeps on the row; the name takes the rest and truncates with "…" if needed. Also wrapped the name + time in a flex:1 Pressable (author tap target) so the row width is authoritative. 2. Avatar flush against the left edge The outer Pressable's style-function paddingLeft was being applied but the visual offset felt wrong because avatar has no explicit width. Added width:44 to the avatar's own Pressable wrapper so the flex-row layout reserves exactly the expected space and the 16-px paddingLeft on the outer Pressable is visible around the avatar's left edge. 3. Like / view count text visually below icon's centre RN Text includes extra top padding (Android) and baseline-anchors (iOS) that push the number glyph a pixel or two below the icon centre in a flex-row with alignItems:'center'. Added explicit lineHeight:16 (matching icon size) + includeFontPadding:false + textAlignVertical:'center' on both the heart button's Text and the shared ActionButton Text → numbers now sit on the same optical baseline as their icons on both platforms. 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.