lfg2025/archy
1
0
Fork 0
Code Issues 9 Pull Requests Actions Packages Projects Releases 44 Wiki Activity
archy/BITCOIN_UI_COMPLETE.md
Dorian 30ed48ad1b Enhance Docker integration and API for container management 
- 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.
2026-01-27 23:21:26 +00:00

4.7 KiB
Raw Blame History

✅ 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

// 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

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

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

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

cd core
ARCHIPELAGO_DATA_DIR=/tmp/archipelago-dev \
ARCHIPELAGO_DEV_MODE=true \
ARCHIPELAGO_CONTAINER_RUNTIME=docker \
./target/release/archipelago

Start Frontend

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!