251 lines
8.8 KiB
Vue
251 lines
8.8 KiB
Vue
<template>
|
||
<!-- z-3600: this is raised from INSIDE another modal (Receive, the Web5
|
||
send/receive sheet, the app launcher's paywall), so it must sit above
|
||
the standard modal layer (3000) but below the app overlay (4000) —
|
||
same reasoning as ExternalExplorerModal. -->
|
||
<BaseModal
|
||
:show="lightning.show.value"
|
||
:title="modalTitle"
|
||
max-width="max-w-md"
|
||
z-index="z-[3600]"
|
||
@close="onClose"
|
||
>
|
||
<p v-if="lightning.status.value === 'no-funds'" class="text-sm text-white/70 leading-relaxed">
|
||
Your Lightning node is running, but it has no payment channel yet.
|
||
<template v-if="lightning.fundingDirection.value === 'receive'">
|
||
Receiving needs <span class="text-white/90">inbound liquidity</span> — a
|
||
channel with funds on the far side — otherwise any invoice you create
|
||
is unpayable.
|
||
</template>
|
||
<template v-else>
|
||
Sending needs <span class="text-white/90">outbound liquidity</span> — a
|
||
funded channel to route through.
|
||
</template>
|
||
Open one with <span class="text-white/90">Zeus Olympus</span> from the
|
||
channels screen — it's prefilled there, and needs 150,000–1,500,000
|
||
on-chain sats.
|
||
</p>
|
||
<p v-else-if="lightning.status.value === 'stopped'" class="text-sm text-white/70 leading-relaxed">
|
||
Lightning payments need a Lightning node that's actually running. Yours is
|
||
installed but isn't running right now — start it from My Apps and try
|
||
again.
|
||
</p>
|
||
<p v-else class="text-sm text-white/70 leading-relaxed">
|
||
Lightning payments need a Lightning node running on this Archipelago
|
||
node. You don't have one installed yet — pick an implementation below and
|
||
it'll be installed for you.
|
||
</p>
|
||
|
||
<div v-if="lightning.status.value === 'absent'" class="mt-4 space-y-2">
|
||
<div
|
||
v-for="node in nodes"
|
||
:key="node.id"
|
||
class="rounded-xl border border-white/10 bg-white/[0.04] p-3"
|
||
>
|
||
<div class="ln-node-row flex items-start gap-3">
|
||
<div class="ln-node-icon shrink-0">
|
||
<img
|
||
v-if="!failedIcons.has(node.id)"
|
||
:src="node.icon"
|
||
:alt="node.name"
|
||
class="w-full h-full object-contain"
|
||
@error="failedIcons.add(node.id)"
|
||
/>
|
||
<!-- No packaged icon yet (Core Lightning): a neutral bolt keeps the
|
||
row aligned instead of showing a broken-image box. -->
|
||
<svg v-else class="w-6 h-6 text-white/40" fill="none" stroke="currentColor" stroke-width="1.8" viewBox="0 0 24 24">
|
||
<path stroke-linecap="round" stroke-linejoin="round" d="M13 10V3L4 14h7v7l9-11h-7z" />
|
||
</svg>
|
||
</div>
|
||
<div class="flex-1 min-w-0">
|
||
<div class="flex items-center gap-2">
|
||
<span class="text-sm font-medium text-white">{{ node.name }}</span>
|
||
<span
|
||
v-if="!node.available"
|
||
class="text-[10px] uppercase tracking-wide px-2 py-0.5 rounded-full bg-white/10 text-white/50"
|
||
>Coming soon</span>
|
||
</div>
|
||
<p class="text-xs text-white/50 mt-0.5 leading-relaxed">{{ node.blurb }}</p>
|
||
</div>
|
||
<button
|
||
v-if="node.available"
|
||
:disabled="installing !== null"
|
||
class="ln-node-action glass-button glass-button-warning rounded-lg text-xs font-medium disabled:opacity-50"
|
||
@click="install(node.id)"
|
||
>
|
||
{{ installing === node.id ? 'Installing…' : 'Install' }}
|
||
</button>
|
||
<button
|
||
v-else
|
||
disabled
|
||
class="ln-node-action glass-button rounded-lg text-xs opacity-40 cursor-not-allowed"
|
||
>Install</button>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<p v-if="error" class="mt-3 alert-error text-sm">{{ error }}</p>
|
||
|
||
<p v-if="installing" class="mt-3 text-xs text-white/50 leading-relaxed">
|
||
This takes a few minutes — the image has to be pulled and the node
|
||
started. You can close this and carry on; the install keeps running.
|
||
</p>
|
||
|
||
<div class="flex flex-wrap gap-2 mt-6">
|
||
<button class="flex-1 glass-button px-4 py-2 rounded-lg text-sm" @click="onClose">
|
||
{{ installing ? 'Close' : 'Not now' }}
|
||
</button>
|
||
<button
|
||
v-if="lightning.status.value === 'stopped'"
|
||
class="flex-1 glass-button glass-button-warning px-4 py-2 rounded-lg text-sm font-medium"
|
||
@click="openApps"
|
||
>Open My Apps</button>
|
||
<template v-else-if="lightning.status.value === 'no-funds'">
|
||
<button
|
||
class="flex-1 glass-button px-4 py-2 rounded-lg text-sm"
|
||
@click="openSetupGuide"
|
||
>Setup Guide</button>
|
||
<button
|
||
class="flex-1 glass-button glass-button-warning px-4 py-2 rounded-lg text-sm font-medium"
|
||
@click="openLightningSetup"
|
||
>Open a channel</button>
|
||
</template>
|
||
</div>
|
||
</BaseModal>
|
||
</template>
|
||
|
||
<script setup lang="ts">
|
||
import { ref, computed } from 'vue'
|
||
import BaseModal from '@/components/BaseModal.vue'
|
||
import { useRouter } from 'vue-router'
|
||
import { useAppStore } from '@/stores/app'
|
||
import { useLightningRequired } from '@/composables/useLightningRequired'
|
||
|
||
interface NodeChoice {
|
||
id: string
|
||
name: string
|
||
blurb: string
|
||
/** Falls back to a neutral bolt when the asset is missing. */
|
||
icon: string
|
||
/** False renders the row as "Coming soon" with a dead Install button. */
|
||
available: boolean
|
||
}
|
||
|
||
// Core Lightning is listed deliberately while unavailable: the choice is the
|
||
// point of this modal, and showing it greyed tells the user the platform is
|
||
// not LND-only. When its app id lands in the catalog, flip `available` here
|
||
// and add the id to LIGHTNING_NODE_APP_IDS — nothing else changes.
|
||
const nodes: NodeChoice[] = [
|
||
{
|
||
id: 'lnd',
|
||
name: 'LND',
|
||
blurb: 'Lightning Network Daemon. The implementation Archipelago ships today — wallet, channels and payments are wired to it.',
|
||
icon: '/assets/img/app-icons/lnd.png',
|
||
available: true,
|
||
},
|
||
{
|
||
id: 'core-lightning',
|
||
name: 'Core Lightning',
|
||
blurb: 'Blockstream\'s implementation. Not packaged yet — it will appear here as a choice once it ships.',
|
||
icon: '/assets/img/app-icons/core-lightning.svg',
|
||
available: false,
|
||
},
|
||
]
|
||
|
||
const router = useRouter()
|
||
|
||
const modalTitle = computed(() => {
|
||
if (lightningStatusIs('no-funds')) return 'You need a Lightning channel'
|
||
if (lightningStatusIs('stopped')) return 'Lightning node not running'
|
||
return 'Lightning node required'
|
||
})
|
||
const appStore = useAppStore()
|
||
const lightning = useLightningRequired()
|
||
|
||
/** App id currently installing, or null. */
|
||
/** Icons that 404'd — swapped for the inline bolt. */
|
||
const failedIcons = ref(new Set<string>())
|
||
|
||
const installing = ref<string | null>(null)
|
||
const error = ref('')
|
||
|
||
async function install(id: string) {
|
||
installing.value = id
|
||
error.value = ''
|
||
try {
|
||
await appStore.installPackage(id, '', 'latest')
|
||
// The gate reads install state from the package list, so once the install
|
||
// lands the modal simply stops being raised. Close on success rather than
|
||
// holding the user here watching a spinner.
|
||
lightning.close()
|
||
} catch (err) {
|
||
error.value = `Install failed: ${err instanceof Error ? err.message : 'Unknown error'}`
|
||
} finally {
|
||
installing.value = null
|
||
}
|
||
}
|
||
|
||
function lightningStatusIs(s: string) {
|
||
return lightning.status.value === s
|
||
}
|
||
|
||
/** The Lightning goal already owns funding + channel-opening, so reuse it
|
||
* rather than duplicating that flow inside this modal. */
|
||
function openLightningSetup() {
|
||
lightning.close()
|
||
// The channels screen already has the prefilled Zeus/Olympus open-channel
|
||
// flow, so send the user straight to the thing that solves it rather than
|
||
// to the wizard that would only point here anyway.
|
||
router.push('/dashboard/apps/lnd/channels')
|
||
}
|
||
|
||
/** The guided walkthrough, for someone who wants the whole path explained
|
||
* rather than to be dropped straight into the open-channel form. */
|
||
function openSetupGuide() {
|
||
lightning.close()
|
||
router.push('/dashboard/goals/run-lightning-node')
|
||
}
|
||
|
||
function openApps() {
|
||
lightning.close()
|
||
router.push('/dashboard/apps')
|
||
}
|
||
|
||
function onClose() {
|
||
error.value = ''
|
||
lightning.close()
|
||
}
|
||
</script>
|
||
|
||
<style scoped>
|
||
.ln-node-icon {
|
||
width: 2.5rem;
|
||
height: 2.5rem;
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
border-radius: 0.75rem;
|
||
background: rgba(255, 255, 255, 0.06);
|
||
border: 1px solid rgba(255, 255, 255, 0.08);
|
||
padding: 0.35rem;
|
||
}
|
||
.ln-node-action {
|
||
flex-shrink: 0;
|
||
padding: 0.375rem 0.875rem;
|
||
}
|
||
/* Narrow phones: the icon + name + blurb keep the top row, and the action
|
||
drops to its own full-width line rather than squeezing the blurb into a
|
||
two-word column. */
|
||
@media (max-width: 26rem) {
|
||
.ln-node-row {
|
||
flex-wrap: wrap;
|
||
}
|
||
.ln-node-action {
|
||
width: 100%;
|
||
margin-top: 0.625rem;
|
||
padding-top: 0.5rem;
|
||
padding-bottom: 0.5rem;
|
||
}
|
||
}
|
||
</style>
|