6a018e4953
- 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.
113 lines
3.6 KiB
Markdown
113 lines
3.6 KiB
Markdown
# 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!
|