Implement Bitcoin and LND UI in Docker setup and enhance startup script

- Added Docker services for Bitcoin Core UI and LND UI, providing web interfaces for both applications. - Updated the startup script to improve image pulling process and service readiness checks with retries. - Modified the app view to open the Bitcoin Core UI in a new tab instead of routing through the app. - Removed the Bitcoin Core Vue component as it is no longer needed, streamlining the UI structure. - Excluded backend services from the app listing to improve clarity in the Docker package scanner.
2026-01-27 23:57:29 +00:00
parent 7667cfc721
commit 6a018e4953
12 changed files with 1625 additions and 360 deletions
@@ -0,0 +1,112 @@
+# Bitcoin Core Standalone UI - Complete
+
+## What Was Built
+
+A beautiful, standalone Bitcoin Core UI that opens in a **separate browser tab** on its own port (18445), just like the other apps.
+
+## Features
+
+### Layout & Design
+- **Improved Layout**: Better organized with distinct sections
+- **Header Section**: Logo with animated gradient border, title, subtitle, and live status badge
+- **Stats Grid**: 4-card responsive grid showing Network, RPC Port, P2P Port, and Block Height
+- **Action Cards**: 3 interactive cards for Connection, Settings, and Logs
+- **Connection Details**: Expandable section with copy-to-clipboard functionality
+- **Modals**: Beautiful glass-morphism modals for Settings and Logs
+
+### Styling
+- Full glassmorphism design matching your onboarding screens
+- Gradient backgrounds and borders
+- Smooth animations and hover effects
+- Responsive design for all screen sizes
+- Purple/blue gradient theme (#667eea to #764ba2)
+
+### Functionality
+- **Connection Details**: Toggle to show/hide RPC credentials
+- **Copy to Clipboard**: One-click copy for all connection strings
+- **Live Block Height**: Simulated updates every 5 seconds
+- **Settings Modal**: View node configuration
+- **Logs Modal**: View node logs
+- **Status Badge**: Shows running/stopped state
+
+## Files Created/Modified
+
+### New Files
+1. `/Users/dorian/Projects/archy/docker/bitcoin-ui/index.html`
+   - Standalone HTML page with all CSS and JavaScript
+   - Self-contained, no external dependencies
+   - Beautiful Bitcoin logo (embedded SVG)
+   - Fully functional UI with modals and interactions
+
+### Modified Files
+1. `/Users/dorian/Projects/archy/docker-compose.yml`
+   - Added `bitcoin-ui` service using nginx:alpine
+   - Serves the UI on port 18445
+   - Maps to `./docker/bitcoin-ui` directory
+
+2. `/Users/dorian/Projects/archy/neode-ui/src/views/Apps.vue`
+   - Updated `launchApp()` to open Bitcoin Core in new tab on port 18445
+   - Removed internal routing logic
+
+3. `/Users/dorian/Projects/archy/neode-ui/src/router/index.ts`
+   - Removed the `/apps/bitcoin-core` route (no longer needed)
+
+4. `/Users/dorian/Projects/archy/start-docker-apps.sh`
+   - Updated to show Bitcoin Core UI URL in the service list
+
+### Deleted Files
+1. `/Users/dorian/Projects/archy/neode-ui/src/views/apps/BitcoinCore.vue`
+   - No longer needed since we have standalone UI
+
+## How It Works
+
+1. **Docker Container**: Nginx serves the static HTML page on port 18445
+2. **Launch Flow**: Click Bitcoin Core → Opens `http://localhost:18445` in new tab
+3. **UI Updates**: JavaScript simulates block height updates and manages modals
+4. **Connection Info**: Shows RPC credentials for connecting other apps
+
+## Access Points
+
+- **Main UI**: http://localhost:18445
+- **RPC Endpoint**: localhost:18443
+- **P2P Port**: 18444
+- **ZMQ Blocks**: tcp://localhost:28332
+- **ZMQ Transactions**: tcp://localhost:28333
+
+## Credentials
+
+```
+RPC User: bitcoin
+RPC Password: bitcoinpass
+```
+
+## Testing
+
+1. **Restart Docker containers** (if already running):
+   ```bash
+   cd /Users/dorian/Projects/archy
+   docker compose down
+   docker compose up -d
+   ```
+
+2. **Access the UI**:
+   ```bash
+   open http://localhost:18445
+   ```
+
+3. **Test from Neode UI**:
+   - Go to My Apps
+   - Click Bitcoin Core
+   - Should open in new browser tab with beautiful UI
+
+## What You'll See
+
+- Large Bitcoin logo with animated glow effect
+- "Bitcoin Core" title with gradient text
+- Green "Running" status badge
+- 4 stat cards showing network info and ports
+- 3 action cards that open modals or toggle sections
+- Connection details with copy buttons
+- Full glassmorphism styling matching your design language
+
+Perfect integration with your existing glassmorphism aesthetic!