lfg2025/archy
1
0
Fork 0
Code Issues 7 Pull Requests Actions Packages Projects Releases 33 Wiki Activity

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

Browse Source 
- 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.
This commit is contained in:
Dorian
2026-01-27 23:57:29 +00:00
parent 7667cfc721
commit 6a018e4953
12 changed files with 1625 additions and 360 deletions
Download Patch File Download Diff File Expand all files Collapse all files

5
neode-ui/src/router/index.ts
View File

@@ -97,11 +97,6 @@ const router = createRouter({
name: 'app-details',
component: () => import('../views/AppDetails.vue'),
},
{
path: 'apps/bitcoin-core',
name: 'bitcoin-core',
component: () => import('../views/apps/BitcoinCore.vue'),
},
{
path: 'marketplace',
name: 'marketplace',

4
neode-ui/src/views/Apps.vue
View File

@@ -185,9 +185,9 @@ function launchApp(id: string) {
const isDev = import.meta.env.DEV
const pkg = packages.value[id]
// Special handling for Bitcoin Core - route to custom UI
// Special handling for Bitcoin Core - open in new tab on port 18445
if (id === 'bitcoin') {
router.push('/dashboard/apps/bitcoin-core')
window.open('http://localhost:18445', '_blank', 'noopener,noreferrer')
return
}

317
neode-ui/src/views/apps/BitcoinCore.vue
View File

@@ -1,317 +0,0 @@
<template>
<div class="min-h-screen flex items-center justify-center p-4">
<div class="max-w-6xl w-full">
<!-- Header with Logo -->
<div class="text-center mb-8">
<div class="logo-gradient-border inline-block mb-8">
<img
src="/assets/img/app-icons/bitcoin.svg"
alt="Bitcoin Core"
class="w-20 h-20"
/>
</div>
<h1 class="text-4xl font-bold text-white mb-4">Bitcoin Core</h1>
<p class="text-xl text-white/80">Full Node - Regtest Mode</p>
<div
class="inline-block mt-4 px-4 py-2 rounded-full"
:class="statusClass"
>
{{ statusText }}
</div>
</div>
<!-- Stats Grid -->
<div class="grid grid-cols-1 md:grid-cols-4 gap-6 mb-8">
<div class="glass-card p-6 text-center">
<div class="text-white/60 text-sm mb-2">Network</div>
<div class="text-2xl font-bold text-white">Regtest</div>
</div>
<div class="glass-card p-6 text-center">
<div class="text-white/60 text-sm mb-2">RPC Port</div>
<div class="text-2xl font-bold text-white">18443</div>
</div>
<div class="glass-card p-6 text-center">
<div class="text-white/60 text-sm mb-2">P2P Port</div>
<div class="text-2xl font-bold text-white">18444</div>
</div>
<div class="glass-card p-6 text-center">
<div class="text-white/60 text-sm mb-2">Blocks</div>
<div class="text-2xl font-bold text-white">{{ blockHeight }}</div>
</div>
</div>
<!-- Main Content Grid -->
<div class="grid grid-cols-1 md:grid-cols-3 gap-6 mb-8">
<!-- Connection Info -->
<button
class="glass-card p-8 text-left transition-all hover:-translate-y-1 hover:shadow-glass"
>
<div class="mb-6">
<div class="w-16 h-16 mx-auto bg-white/10 rounded-full flex items-center justify-center">
<svg class="w-8 h-8 text-white/60" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13 10V3L4 14h7v7l9-11h-7z" />
</svg>
</div>
</div>
<h3 class="text-xl font-semibold text-white mb-3">Connection</h3>
<div class="space-y-2 text-sm">
<div class="text-white/70">
<span class="text-white/50">RPC:</span> localhost:18443
</div>
<div class="text-white/70">
<span class="text-white/50">User:</span> bitcoin
</div>
<div class="text-white/70">
<span class="text-white/50">Pass:</span> ••••••••••••
</div>
</div>
</button>
<!-- Settings -->
<button
@click="showSettings = true"
class="glass-card p-8 text-center transition-all hover:-translate-y-1 hover:shadow-glass"
>
<div class="mb-6">
<div class="w-16 h-16 mx-auto bg-white/10 rounded-full flex items-center justify-center">
<svg class="w-8 h-8 text-white/60" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M10.325 4.317c.426-1.756 2.924-1.756 3.35 0a1.724 1.724 0 002.573 1.066c1.543-.94 3.31.826 2.37 2.37a1.724 1.724 0 001.065 2.572c1.756.426 1.756 2.924 0 3.35a1.724 1.724 0 00-1.066 2.573c.94 1.543-.826 3.31-2.37 2.37a1.724 1.724 0 00-2.572 1.065c-.426 1.756-2.924 1.756-3.35 0a1.724 1.724 0 00-2.573-1.066c-1.543.94-3.31-.826-2.37-2.37a1.724 1.724 0 00-1.065-2.572c-1.756-.426-1.756-2.924 0-3.35a1.724 1.724 0 001.066-2.573c-.94-1.543.826-3.31 2.37-2.37.996.608 2.296.07 2.572-1.065z" />
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 12a3 3 0 11-6 0 3 3 0 016 0z" />
</svg>
</div>
</div>
<h3 class="text-xl font-semibold text-white mb-3">Settings</h3>
<p class="text-white/70 text-sm">
Configure Bitcoin Core
</p>
</button>
<!-- Logs -->
<button
@click="showLogs = true"
class="glass-card p-8 text-center transition-all hover:-translate-y-1 hover:shadow-glass"
>
<div class="mb-6">
<div class="w-16 h-16 mx-auto bg-white/10 rounded-full flex items-center justify-center">
<svg class="w-8 h-8 text-white/60" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12h6m-6 4h6m2 5H7a2 2 0 01-2-2V5a2 2 0 012-2h5.586a1 1 0 01.707.293l5.414 5.414a1 1 0 01.293.707V19a2 2 0 01-2 2z" />
</svg>
</div>
</div>
<h3 class="text-xl font-semibold text-white mb-3">Logs</h3>
<p class="text-white/70 text-sm">
View container logs
</p>
</button>
</div>
<!-- Actions -->
<div class="flex gap-4 justify-center">
<button
@click="router.push('/dashboard/apps')"
class="glass-button px-8 py-4 rounded-lg text-lg font-medium transition-all hover:bg-black/70 hover:border-white/30"
>
← Back to My Apps
</button>
<a
href="https://developer.bitcoin.org/reference/rpc/"
target="_blank"
class="glass-button px-8 py-4 rounded-lg text-lg font-medium transition-all hover:bg-black/70 hover:border-white/30"
>
📖 RPC Documentation
</a>
</div>
</div>
<!-- Settings Modal -->
<Teleport to="body">
<Transition name="modal">
<div
v-if="showSettings"
class="fixed inset-0 bg-black/60 backdrop-blur-sm flex items-center justify-center p-4 z-50"
@click.self="showSettings = false"
>
<div class="glass-card max-w-2xl w-full p-8">
<div class="flex justify-between items-center mb-6">
<h2 class="text-2xl font-bold text-white">Bitcoin Core Settings</h2>
<button
@click="showSettings = false"
class="text-white/60 hover:text-white"
>
<svg class="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12" />
</svg>
</button>
</div>
<div class="space-y-4">
<div class="p-4 bg-white/5 rounded-lg border border-white/10">
<div class="flex justify-between items-center mb-2">
<span class="text-white font-medium">Network Mode</span>
<span class="text-white/60">Regtest</span>
</div>
<p class="text-sm text-white/50">Local testing network with instant block generation</p>
</div>
<div class="p-4 bg-white/5 rounded-lg border border-white/10">
<div class="flex justify-between items-center mb-2">
<span class="text-white font-medium">RPC Server</span>
<span class="text-green-400">Enabled</span>
</div>
<p class="text-sm text-white/50">Listening on 0.0.0.0:18443</p>
</div>
<div class="p-4 bg-white/5 rounded-lg border border-white/10">
<div class="flex justify-between items-center mb-2">
<span class="text-white font-medium">Transaction Index</span>
<span class="text-green-400">Enabled</span>
</div>
<p class="text-sm text-white/50">Full transaction indexing for complete history</p>
</div>
<div class="p-4 bg-white/5 rounded-lg border border-white/10">
<div class="flex justify-between items-center mb-2">
<span class="text-white font-medium">ZMQ Notifications</span>
<span class="text-green-400">Enabled</span>
</div>
<p class="text-sm text-white/50">Real-time block and transaction notifications</p>
</div>
</div>
<div class="mt-6 flex justify-end">
<button
@click="showSettings = false"
class="glass-button px-6 py-3 rounded-lg font-medium transition-all hover:bg-black/70"
>
Close
</button>
</div>
</div>
</div>
</Transition>
</Teleport>
<!-- Logs Modal -->
<Teleport to="body">
<Transition name="modal">
<div
v-if="showLogs"
class="fixed inset-0 bg-black/60 backdrop-blur-sm flex items-center justify-center p-4 z-50"
@click.self="showLogs = false"
>
<div class="glass-card max-w-4xl w-full p-8 max-h-[80vh] flex flex-col">
<div class="flex justify-between items-center mb-6">
<h2 class="text-2xl font-bold text-white">Container Logs</h2>
<button
@click="showLogs = false"
class="text-white/60 hover:text-white"
>
<svg class="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12" />
</svg>
</button>
</div>
<div class="flex-1 overflow-auto bg-black/40 rounded-lg p-4 border border-white/10 font-mono text-sm">
<div class="text-green-400">$ docker logs archy-bitcoin</div>
<div class="text-white/70 mt-2 whitespace-pre-wrap">{{ logs }}</div>
</div>
<div class="mt-4 flex justify-end">
<button
@click="refreshLogs"
class="glass-button px-6 py-3 rounded-lg font-medium transition-all hover:bg-black/70 mr-2"
>
🔄 Refresh
</button>
<button
@click="showLogs = false"
class="glass-button px-6 py-3 rounded-lg font-medium transition-all hover:bg-black/70"
>
Close
</button>
</div>
</div>
</div>
</Transition>
</Teleport>
</div>
</template>
<script setup lang="ts">
import { ref, computed, onMounted } from 'vue'
import { useRouter } from 'vue-router'
import { useAppStore } from '@/store/app'
const router = useRouter()
const store = useAppStore()
const showSettings = ref(false)
const showLogs = ref(false)
const logs = ref('Loading logs...')
const blockHeight = ref(0)
const bitcoinPackage = computed(() => store.packages['bitcoin'])
const statusText = computed(() => {
const state = bitcoinPackage.value?.state
if (state === 'running') return 'Running'
if (state === 'stopped') return 'Stopped'
return 'Unknown'
})
const statusClass = computed(() => {
const state = bitcoinPackage.value?.state
if (state === 'running') return 'bg-green-500/20 text-green-400 border border-green-500/30'
if (state === 'stopped') return 'bg-red-500/20 text-red-400 border border-red-500/30'
return 'bg-gray-500/20 text-gray-400 border border-gray-500/30'
})
async function refreshLogs() {
logs.value = 'Loading logs...'
try {
// In a real implementation, this would call the backend
logs.value = 'Bitcoin Core logs would appear here.\nIntegration with docker logs coming soon...'
} catch (error) {
logs.value = 'Failed to load logs: ' + error
}
}
onMounted(() => {
// Simulate getting block height
blockHeight.value = 0
// Auto-refresh block height every 10 seconds
setInterval(() => {
// In real implementation, query RPC
blockHeight.value = Math.floor(Math.random() * 100)
}, 10000)
})
</script>
<style scoped>
.modal-enter-active,
.modal-leave-active {
transition: opacity 0.3s ease;
}
.modal-enter-from,
.modal-leave-to {
opacity: 0;
}
.modal-enter-active .glass-card,
.modal-leave-active .glass-card {
transition: transform 0.3s ease, opacity 0.3s ease;
}
.modal-enter-from .glass-card,
.modal-leave-to .glass-card {
transform: scale(0.95);
opacity: 0;
}
.hover\:shadow-glass:hover {
box-shadow: 0 12px 32px rgba(0, 0, 0, 0.6), 0 0 30px rgba(255, 255, 255, 0.2);
}
</style>