Alex Gleason
01980918bc
The Bitcoin zap dialog was heavier than the Lightning one, with a Review
step, a confirm screen, a balance card, a dropdown for transaction
speed, and a success view — all before you could actually send a zap.
The Lightning flow is presets → optional comment → Zap. Now Bitcoin is
the same shape.
Changes:
* Drop the form→confirm→success wizard. Single screen, single button.
The 'Zap' button does the whole thing; success closes the dialog
via the existing onSuccess callback (the hook already shows a toast).
* Remove the always-visible balance card. Balance only appears when
the amount exceeds available funds (or funds are zero).
* Collapse transaction speed into a one-line fee readout like
'Fee ≈ $0.12 · ~30 min' that opens a popover of the 4 speed options
when clicked. No dropdown taking up vertical space by default.
* Drop the 'Paying to <address>' card, the 'transactions are final'
warning, and the dedicated confirm screen — all redundant for a
small zap flow.
* Button label now reads 'Zap $5 · 5,123 sats' so users see both the
fiat amount they chose and the sats they're committing, without
needing a separate confirm screen to see either.
Fee-dominated warning becomes a single line of amber text instead of a
destructive alert; errors become a single line of destructive text.
Result is roughly half the vertical space and one click instead of three
to send a zap.
Ditto
Your content. Your vibe. Your rules. A fun, customizable Nostr client that puts you in control.
About
Ditto is an open-source, decentralized social media client built on the Nostr protocol. It's designed for people who want to have fun online without feeding the Big Tech machine. Express yourself with custom themes, Lightning payments, and an ever-growing set of content types -- all while owning your identity and data.
Made by Soapbox.
Features
- Theming -- 9 built-in theme presets, 19 CSS token properties for full customization, and the ability to publish and share themes as Nostr events
- Infinite Content Types -- Text notes, articles, short-form videos (Divines), live streams, polls, follow packs, color moments, magic decks, geocaching, and Webxdc mini-apps
- Lightning Payments -- Zap posts and profiles with sats via Nostr Wallet Connect (NWC) or WebLN
- Private Messaging -- End-to-end encrypted DMs (NIP-04 and NIP-17)
- Comments -- Comment on anything: posts, URLs, profiles, hashtags, books, and more (NIP-22)
- Self-Hosting -- Builds to static HTML/JS/CSS. Deploy anywhere -- GitHub Pages, Netlify, Vercel, a VPS, or a Raspberry Pi
- Mobile -- Android native app via Capacitor, responsive design for all screen sizes
Getting Started
Prerequisites
- Node.js 22+
- npm 10.9.4+
Development
git clone https://gitlab.com/soapbox-pub/ditto.git
cd ditto
npm install
npm run dev
The dev server starts at http://localhost:8080.
Build
npm run build
The built site is output to dist/.
Test
Runs type-checking, linting, unit tests, and a production build:
npm test
Configuration
Ditto is configured through a ditto.json file at the project root, read at build time. This file is gitignored so each deployment can have its own configuration.
{
"theme": "dark",
"relayMetadata": {
"relays": [
{ "url": "wss://relay.ditto.pub", "read": true, "write": true }
]
},
"blossomServers": ["https://blossom.ditto.pub"],
"feedSettings": {
"showPosts": true,
"showReposts": true,
"showArticles": true
// ...and more content type toggles
}
}
Configuration is resolved in three layers (highest priority first):
- User settings stored in localStorage
- Build config from
ditto.json - Hardcoded defaults
Use an alternate config file path with: CONFIG_FILE=./my-config.json npm run build
Custom Branding
For self-hosted instances:
- Replace
public/logo.svgandpublic/logo.pngwith your logo - Update the app name in
index.htmlandpublic/manifest.webmanifest - Replace
public/og-image.jpgfor social sharing previews - Set default relays and upload servers in
ditto.json
Deployment
Ditto builds to static files and can be deployed anywhere that serves HTML.
- GitHub Pages / GitLab Pages -- Push to
mainand CI auto-deploys - Netlify / Vercel -- Connect your fork and deploy. A
_redirectsfile is included for SPA routing - VPS / Any web server -- Build and copy
dist/to your server. Configure SPA routing (e.g., Nginxtry_files $uri $uri/ /index.html)
Android
Build a native Android app with Capacitor:
npm run build
npx cap sync
npx cap open android
Tech Stack
| Layer | Technology |
|---|---|
| Framework | React 18 |
| Build | Vite |
| Language | TypeScript |
| Styling | TailwindCSS 3 + shadcn/ui |
| Routing | React Router 6 |
| Data | TanStack Query |
| Nostr | Nostrify + nostr-tools |
| Mobile | Capacitor |
| Testing | Vitest + React Testing Library |
Project Structure
src/
components/ UI components (100+), including shadcn/ui primitives
hooks/ Custom React hooks (65+)
pages/ Page components for each route (30+)
contexts/ React context providers
lib/ Utilities and shared logic
test/ Test setup and helpers
public/ Static assets, icons, manifest
Contributing
We welcome contributions but have high standards. Please read the full Contributing Guide before submitting a merge request. The short version:
- Bug fixes: One bug, one MR. Keep it small and focused.
- New features: Must link to an existing issue and align with the Ditto Philosophy.
- Required: Live preview URL, before/after screenshots, completed self-review checklist.
- Required tools: Claude Opus 4.6 (or latest frontier model), an AI coding agent with plan mode.
Read the Ditto Philosophy to understand what Ditto is and isn't.