3aebbcbbb8
Every Lightning setup (Open a Shop, Accept Payments, Run a Lightning Node)
gains a guided path to a working channel:
- New "Fund Your Bitcoin Wallet" step, gated on the blockchain finishing
its initial sync: while syncing it shows a live progress bar with a
counting-down time-remaining estimate; once synced it shows the on-chain
balance and a "Fund Wallet" button that opens the receive modal with a
fresh address, QR, and the Zeus channel limits (min 150,000 / max
1,500,000 sats) noted.
- When the sync finishes while a Lightning setup is mid-flight, a toast
pops with a "Finish setup" link straight back to the wizard (toasts now
support action links). If several setups are in flight, one is chosen —
the shared steps complete the lightning part of any of them.
- Channel steps are Zeus-branded (logo + copy) and land on the Lightning
Channels screen, which now carries an "Open a channel with Zeus" card
that prefills the open-channel modal with the Olympus peer URI, 150k
sats, and private-channel checked. "Get Zeus" links to zeusln.com.
- Setup completion now actually requires walking the manual steps (fund,
open channel, configure) — previously any step whose app was installed
was silently auto-ticked and running apps marked the whole goal done.
- Completion CTAs now go to the app you just set up ("Go to my shop
(BTCPay)" etc.) instead of the generic services list; iframe apps open
in the on-top app overlay.
- On-chain send modal gains a "Send all funds" sweep toggle, backed by
LND's send_all on the backend (amount no longer required when sweeping).
- Demo/mock: bitcoin.getinfo now returns the block_height/sync_progress
contract the UI reads and simulates a ~90s IBD ramp per visitor so the
timer, toast, and fund flow can all be demoed live; channel list data
fixed (status/channel_point/liquidity totals — the panel previously
crashed on the missing status field); sendcoins supports send_all.
Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>
79 lines
3.0 KiB
Vue
79 lines
3.0 KiB
Vue
<template>
|
|
<Teleport to="body">
|
|
<div class="fixed right-4 z-[9999] flex flex-col gap-2 pointer-events-none max-w-sm w-full" style="top: calc(var(--safe-area-top, env(safe-area-inset-top, 0px)) + 16px);">
|
|
<TransitionGroup name="toast-stack">
|
|
<div
|
|
v-for="toast in toasts"
|
|
:key="toast.id"
|
|
class="toast-stack-item pointer-events-auto flex items-center gap-3 px-4 py-3 rounded-xl border cursor-pointer"
|
|
:class="variantClass(toast.variant)"
|
|
@click="dismiss(toast.id)"
|
|
>
|
|
<div class="w-5 h-5 shrink-0 flex items-center justify-center">
|
|
<!-- Success -->
|
|
<svg v-if="toast.variant === 'success'" class="w-5 h-5 text-green-400" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
|
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7" />
|
|
</svg>
|
|
<!-- Error -->
|
|
<svg v-else-if="toast.variant === 'error'" class="w-5 h-5 text-red-400" 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>
|
|
<!-- Info -->
|
|
<svg v-else class="w-5 h-5 text-blue-400" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
|
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13 16h-1v-4h-1m1-4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z" />
|
|
</svg>
|
|
</div>
|
|
<div class="flex-1 min-w-0">
|
|
<span class="text-sm text-white/90">{{ toast.message }}</span>
|
|
<button
|
|
v-if="toast.action"
|
|
@click.stop="runAction(toast)"
|
|
class="block mt-1 text-sm font-semibold text-orange-400 hover:text-orange-300 transition-colors"
|
|
>{{ toast.action.label }} →</button>
|
|
</div>
|
|
</div>
|
|
</TransitionGroup>
|
|
</div>
|
|
</Teleport>
|
|
</template>
|
|
|
|
<script setup lang="ts">
|
|
import { useToast } from '@/composables/useToast'
|
|
import type { ToastItem, ToastVariant } from '@/composables/useToast'
|
|
|
|
const { toasts, dismiss } = useToast()
|
|
|
|
function runAction(toast: ToastItem | Readonly<ToastItem>) {
|
|
toast.action?.onClick()
|
|
dismiss(toast.id)
|
|
}
|
|
|
|
function variantClass(variant: ToastVariant): string {
|
|
switch (variant) {
|
|
case 'success': return 'bg-black/70 border-green-500/30 backdrop-blur-md'
|
|
case 'error': return 'bg-black/70 border-red-500/30 backdrop-blur-md'
|
|
default: return 'bg-black/70 border-blue-500/30 backdrop-blur-md'
|
|
}
|
|
}
|
|
</script>
|
|
|
|
<style scoped>
|
|
.toast-stack-enter-active {
|
|
transition: opacity 0.3s ease, transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
|
|
}
|
|
.toast-stack-leave-active {
|
|
transition: opacity 0.2s ease, transform 0.2s ease;
|
|
}
|
|
.toast-stack-enter-from {
|
|
opacity: 0;
|
|
transform: translateX(100%);
|
|
}
|
|
.toast-stack-leave-to {
|
|
opacity: 0;
|
|
transform: translateX(50%);
|
|
}
|
|
.toast-stack-move {
|
|
transition: transform 0.3s ease;
|
|
}
|
|
</style>
|