30ed48ad1b
- Implemented Docker container scanning and periodic updates in the Server initialization. - Added new RPC endpoints for managing Docker containers, including start, stop, and restart functionalities. - Updated the API to handle package management for Docker-based applications. - Improved environment variable handling for user-specific configurations in Podman and Docker clients. - Enhanced the development startup script to include Docker container management and provide clearer instructions for full stack setup.
185 lines
4.7 KiB
Markdown
185 lines
4.7 KiB
Markdown
# ✅ BITCOIN CORE GLASSMORPHISM UI COMPLETE
|
|
|
|
## Summary
|
|
|
|
Created a beautiful custom UI for Bitcoin Core with glassmorphism design that opens when you click "Launch" in My Apps. Also fixed the port extraction bug that was causing invalid URLs.
|
|
|
|
## What Was Fixed
|
|
|
|
### 1. Port Extraction Bug
|
|
**Problem:** Port range `18443-18444` was being used in URL as `http://localhost:18443-18444/`
|
|
**Solution:** Modified `extract_lan_address()` to extract only the first port from ranges
|
|
|
|
```rust
|
|
// Before: "18443-18444" → http://localhost:18443-18444/
|
|
// After: "18443-18444" → http://localhost:18443
|
|
let single_port = port_part.split('-').next().unwrap_or(port_part);
|
|
```
|
|
|
|
### 2. Custom Bitcoin Core UI
|
|
**Created:** `/Users/dorian/Projects/archy/neode-ui/src/views/apps/BitcoinCore.vue`
|
|
|
|
**Features:**
|
|
- ✅ Glassmorphism card design with backdrop blur
|
|
- ✅ Gradient background matching Archipelago theme
|
|
- ✅ Real-time status badge (running/stopped)
|
|
- ✅ Stats grid showing network, ports, status
|
|
- ✅ Connection details with RPC/P2P endpoints
|
|
- ✅ Action buttons (RPC Docs, Logs, Back to Apps)
|
|
- ✅ Fully responsive design
|
|
- ✅ Uses Archipelago's visual style (dark blues, Bitcoin orange)
|
|
|
|
## UI Design
|
|
|
|
### Glassmorphism Effect
|
|
```css
|
|
background: rgba(255, 255, 255, 0.05);
|
|
backdrop-filter: blur(20px);
|
|
border: 1px solid rgba(255, 255, 255, 0.1);
|
|
box-shadow:
|
|
0 8px 32px 0 rgba(31, 38, 135, 0.37),
|
|
inset 0 0 80px rgba(255, 255, 255, 0.03);
|
|
```
|
|
|
|
### Gradient Background
|
|
```css
|
|
background: linear-gradient(135deg,
|
|
#1a1a2e 0%,
|
|
#0f3460 50%,
|
|
#16213e 100%
|
|
);
|
|
```
|
|
|
|
### Color Scheme
|
|
- **Primary**: Bitcoin Orange (#f7931a)
|
|
- **Background**: Dark Blue Gradients
|
|
- **Glass**: Semi-transparent white with blur
|
|
- **Text**: White with varying opacity
|
|
- **Status**: Green (running), Red (stopped)
|
|
|
|
## How It Works
|
|
|
|
### Launch Flow
|
|
|
|
1. **User clicks "Launch" on Bitcoin Core**
|
|
2. **Apps.vue `launchApp()` detects `id === 'bitcoin'`**
|
|
3. **Routes to `/dashboard/apps/bitcoin-core`**
|
|
4. **BitcoinCore.vue component loads**
|
|
5. **Displays glassmorphism UI with live data**
|
|
|
|
### Data Binding
|
|
|
|
```typescript
|
|
const bitcoinPackage = computed(() => store.packages['bitcoin'])
|
|
const statusText = computed(() => {
|
|
const state = bitcoinPackage.value?.state
|
|
return state === 'running' ? 'Running' : 'Stopped'
|
|
})
|
|
```
|
|
|
|
The UI automatically updates when container state changes (via WebSocket).
|
|
|
|
## UI Components
|
|
|
|
### Header
|
|
- Bitcoin icon with shadow
|
|
- Title: "Bitcoin Core"
|
|
- Subtitle: "Full Bitcoin Node - Regtest Mode"
|
|
- Status badge with color coding
|
|
|
|
### Stats Grid (4 cards)
|
|
1. **Network**: Regtest
|
|
2. **RPC Port**: 18443
|
|
3. **P2P Port**: 18444
|
|
4. **Status**: Container status from backend
|
|
|
|
### Info Section
|
|
- Description of Bitcoin Core
|
|
- Connection details with copy-able endpoints
|
|
- Data directory location
|
|
|
|
### Action Buttons
|
|
1. **RPC Documentation** - Opens Bitcoin Core API docs
|
|
2. **View Logs** - (Coming soon)
|
|
3. **Back to My Apps** - Returns to apps list
|
|
|
|
## Files Modified
|
|
|
|
1. **`core/archipelago/src/container/docker_packages.rs`**
|
|
- Fixed port range extraction
|
|
|
|
2. **`neode-ui/src/views/apps/BitcoinCore.vue`** (NEW)
|
|
- Complete glassmorphism UI component
|
|
|
|
3. **`neode-ui/src/router/index.ts`**
|
|
- Added route: `/dashboard/apps/bitcoin-core`
|
|
|
|
4. **`neode-ui/src/views/Apps.vue`**
|
|
- Modified `launchApp()` to route to custom UI for Bitcoin
|
|
|
|
## Testing
|
|
|
|
### Start Backend
|
|
```bash
|
|
cd core
|
|
ARCHIPELAGO_DATA_DIR=/tmp/archipelago-dev \
|
|
ARCHIPELAGO_DEV_MODE=true \
|
|
ARCHIPELAGO_CONTAINER_RUNTIME=docker \
|
|
./target/release/archipelago
|
|
```
|
|
|
|
### Start Frontend
|
|
```bash
|
|
cd neode-ui
|
|
npm run dev
|
|
```
|
|
|
|
### Test Flow
|
|
1. Navigate to http://localhost:8101
|
|
2. Go to "My Apps"
|
|
3. See Bitcoin Core running
|
|
4. Click "Launch"
|
|
5. **Result**: Custom glassmorphism UI opens
|
|
6. See stats, connection details, status badge
|
|
7. All data updates live from backend
|
|
|
|
## Screenshots Description
|
|
|
|
**The UI features:**
|
|
- Dark blue gradient background
|
|
- Semi-transparent glass card with blur effect
|
|
- Bitcoin orange accent colors
|
|
- Clean, modern layout
|
|
- Real-time status updates
|
|
- Professional typography
|
|
- Responsive grid layout
|
|
- Hover effects on interactive elements
|
|
|
|
## Responsive Design
|
|
|
|
- **Desktop**: 3-4 column stats grid, horizontal buttons
|
|
- **Tablet**: 2 column stats grid
|
|
- **Mobile**: Single column layout, stacked buttons
|
|
|
|
## Future Enhancements
|
|
|
|
- [ ] Real-time blockchain stats (block height, connections)
|
|
- [ ] Interactive RPC console
|
|
- [ ] Log viewer with search/filter
|
|
- [ ] Charts for bandwidth/CPU usage
|
|
- [ ] Generate new addresses
|
|
- [ ] Send/receive test coins in regtest
|
|
|
|
---
|
|
|
|
**Current Status:**
|
|
✅ Port extraction fixed
|
|
✅ Custom UI created
|
|
✅ Routing configured
|
|
✅ Launch working
|
|
✅ Live data binding active
|
|
✅ Glassmorphism design complete
|
|
|
|
**Test it now:**
|
|
Click "Launch" on Bitcoin Core in My Apps!
|