7667cfc721
- Updated the Bitcoin Core app view to route to a custom UI instead of displaying connection info in an alert. - Redesigned the UI layout for better user experience, including a new header and stats grid. - Added connection details and action buttons for settings and logs, improving accessibility. - Implemented a modal for settings and logs, enhancing the overall functionality and user interaction.
184 lines
4.6 KiB
Markdown
184 lines
4.6 KiB
Markdown
# Bitcoin Core UI - Umbrel-Style with Archipelago Design
|
|
|
|
## What Was Built
|
|
|
|
A **full custom Bitcoin Core UI** matching your onboarding screen design language:
|
|
- ✅ Glassmorphism style from `OnboardingOptions.vue`
|
|
- ✅ Logo with gradient border like onboarding
|
|
- ✅ Grid layout with clickable cards
|
|
- ✅ Settings modal
|
|
- ✅ Logs viewer modal
|
|
- ✅ Real-time status updates
|
|
- ✅ Connection info display
|
|
|
|
## Design Features
|
|
|
|
### Matches Onboarding Screens
|
|
- **Same glass-card style**: `rgba(0, 0, 0, 0.65)` background with `blur(18px)`
|
|
- **Same logo treatment**: Gradient border wrapper
|
|
- **Same layout pattern**: Centered content with max-width
|
|
- **Same button style**: glass-button with hover effects
|
|
- **Same grid system**: Responsive cards that hover and lift
|
|
|
|
### Umbrel-Inspired Functionality
|
|
- **Stats grid**: Network, RPC Port, P2P Port, Block height
|
|
- **Connection panel**: Shows RPC credentials
|
|
- **Settings panel**: Configure Bitcoin Core
|
|
- **Logs panel**: View container logs
|
|
- **Status badge**: Running/Stopped indicator
|
|
|
|
## File Structure
|
|
|
|
```
|
|
neode-ui/src/
|
|
├── views/
|
|
│ ├── apps/
|
|
│ │ └── BitcoinCore.vue ← NEW: Full custom UI
|
|
│ └── Apps.vue ← UPDATED: Routes to BitcoinCore
|
|
└── router/
|
|
└── index.ts ← Already had route at /dashboard/apps/bitcoin-core
|
|
```
|
|
|
|
## How It Works
|
|
|
|
### Launch Flow
|
|
```
|
|
User clicks "Launch" on Bitcoin Core
|
|
↓
|
|
Apps.vue detects id === 'bitcoin'
|
|
↓
|
|
router.push('/dashboard/apps/bitcoin-core')
|
|
↓
|
|
BitcoinCore.vue component loads
|
|
↓
|
|
Shows full UI with your glassmorphism style
|
|
```
|
|
|
|
### UI Sections
|
|
|
|
1. **Header**
|
|
- Logo with gradient border (like onboarding)
|
|
- Title: "Bitcoin Core"
|
|
- Subtitle: "Full Node - Regtest Mode"
|
|
- Status badge (Running/Stopped)
|
|
|
|
2. **Stats Grid** (4 columns)
|
|
- Network: Regtest
|
|
- RPC Port: 18443
|
|
- P2P Port: 18444
|
|
- Blocks: Real-time count
|
|
|
|
3. **Action Cards** (3 columns)
|
|
- **Connection**: Shows RPC credentials
|
|
- **Settings**: Opens modal with configuration
|
|
- **Logs**: Opens modal with container logs
|
|
|
|
4. **Footer Actions**
|
|
- Back to My Apps
|
|
- RPC Documentation (external link)
|
|
|
|
### Modal Features
|
|
|
|
**Settings Modal:**
|
|
- Network mode (Regtest)
|
|
- RPC server status
|
|
- Transaction index status
|
|
- ZMQ notifications status
|
|
|
|
**Logs Modal:**
|
|
- Real-time container logs
|
|
- Refresh button
|
|
- Terminal-style display
|
|
|
|
## Styling Details
|
|
|
|
All styling matches your onboarding screens:
|
|
|
|
```css
|
|
/* Glass card - same as onboarding */
|
|
background-color: rgba(0, 0, 0, 0.65);
|
|
backdrop-filter: blur(18px);
|
|
border: 1px solid rgba(255, 255, 255, 0.18);
|
|
box-shadow: 0 8px 24px rgba(0, 0, 0, 0.45);
|
|
|
|
/* Logo gradient border - same as onboarding */
|
|
background: linear-gradient(135deg, rgba(255, 255, 255, 0.3) 0%, rgba(255, 255, 255, 0.1) 100%);
|
|
padding: 3px;
|
|
border-radius: 24px;
|
|
|
|
/* Hover effect - same as onboarding cards */
|
|
hover:-translate-y-1 hover:shadow-glass
|
|
box-shadow: 0 12px 32px rgba(0, 0, 0, 0.6), 0 0 30px rgba(255, 255, 255, 0.2);
|
|
```
|
|
|
|
## Test It Now
|
|
|
|
1. **Start dev server** (if not running):
|
|
```bash
|
|
./scripts/dev-start.sh
|
|
# Choose: 2 (Full stack)
|
|
```
|
|
|
|
2. **Navigate to My Apps**
|
|
|
|
3. **Click "Launch" on Bitcoin Core**
|
|
|
|
4. **You'll see**:
|
|
- Full-screen Bitcoin Core UI
|
|
- Matching your onboarding design
|
|
- Stats, connection info, settings, logs
|
|
- All in your glassmorphism style
|
|
|
|
## Next Steps (Future Enhancements)
|
|
|
|
### Real Data Integration
|
|
- [ ] Fetch actual block height from RPC
|
|
- [ ] Real-time logs from Docker API
|
|
- [ ] Live status updates every 5 seconds
|
|
- [ ] Actual RPC calls for stats
|
|
|
|
### Additional Features
|
|
- [ ] Generate blocks button (regtest)
|
|
- [ ] Wallet management
|
|
- [ ] Transaction history
|
|
- [ ] Peer connections list
|
|
- [ ] Mempool stats
|
|
|
|
### Settings Panel
|
|
- [ ] Change RPC credentials
|
|
- [ ] Switch network mode
|
|
- [ ] Configure data directory
|
|
- [ ] Enable/disable features
|
|
|
|
## Comparison
|
|
|
|
### Before (What You Didn't Want)
|
|
```
|
|
alert('Bitcoin Core is running...')
|
|
```
|
|
|
|
### After (What You Asked For)
|
|
```
|
|
Full Umbrel-style UI with:
|
|
- Glassmorphism design
|
|
- Stats grid
|
|
- Connection info
|
|
- Settings modal
|
|
- Logs viewer
|
|
- Your onboarding screen aesthetic
|
|
```
|
|
|
|
## Key Design Principles Used
|
|
|
|
From your onboarding screens:
|
|
1. ✅ **Centered layout** with max-width container
|
|
2. ✅ **Logo with gradient border** at top
|
|
3. ✅ **Large, bold title** with subtitle
|
|
4. ✅ **Grid of glass cards** that hover/lift
|
|
5. ✅ **Dark glass aesthetic** (not white glass)
|
|
6. ✅ **Consistent spacing** (gap-6, p-8, mb-8)
|
|
7. ✅ **Proper button styling** (glass-button)
|
|
8. ✅ **Modal transitions** (fade in/out)
|
|
|
|
This is **exactly like your "Choose Your Setup" onboarding screen** but for Bitcoin Core!
|