archy/neode-ui/src/views/apps/LightningChannels.vue

<template>
  <div class="pb-16 md:pb-4">
    <!-- Back Button -->
    <button @click="router.push('/dashboard/apps/lnd')" class="mb-6 flex items-center gap-2 text-white/70 hover:text-white transition-colors">
      <svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 19l-7-7 7-7" />
      </svg>
      Back to LND
    </button>

    <h1 class="text-2xl font-bold text-white mb-6">Lightning Channels</h1>

    <!-- Liquidity Summary -->
    <div class="grid grid-cols-1 md:grid-cols-3 gap-4 mb-6">
      <div class="glass-card p-4">
        <p class="text-white/60 text-sm mb-1">Total Outbound</p>
        <p class="text-white text-xl font-bold">{{ formatSats(summary.total_outbound) }}</p>
      </div>
      <div class="glass-card p-4">
        <p class="text-white/60 text-sm mb-1">Total Inbound</p>
        <p class="text-white text-xl font-bold">{{ formatSats(summary.total_inbound) }}</p>
      </div>
      <div class="glass-card p-4">
        <p class="text-white/60 text-sm mb-1">Channels</p>
        <p class="text-white text-xl font-bold">{{ channels.length }}</p>
      </div>
    </div>

    <!-- Open Channel Button -->
    <div class="flex justify-end mb-4">
      <button @click="showOpenModal = true" class="glass-button px-4 py-2 rounded-lg text-sm font-medium flex items-center gap-2">
        <svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
          <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 4v16m8-8H4" />
        </svg>
        Open Channel
      </button>
    </div>

    <Transition name="content-fade" mode="out-in">
    <!-- Loading -->
    <div v-if="loading" key="loading" class="glass-card p-12 text-center">
      <svg class="animate-spin h-8 w-8 text-blue-400 mx-auto mb-4" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24">
        <circle class="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" stroke-width="4"></circle>
        <path class="opacity-75" fill="currentColor" d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"></path>
      </svg>
      <p class="text-white/70">Loading channels...</p>
    </div>

    <!-- Error -->
    <div v-else-if="error" key="error" class="glass-card p-6 text-center">
      <p class="text-red-300 mb-4">{{ error }}</p>
      <button @click="loadChannels" class="glass-button px-4 py-2 rounded-lg text-sm">Retry</button>
    </div>

    <!-- No Channels -->
    <div v-else-if="channels.length === 0" key="empty" class="glass-card p-8 text-center">
      <svg class="w-16 h-16 text-white/20 mx-auto mb-4" 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>
      <p class="text-white/70 mb-2">No channels yet</p>
      <p class="text-white/50 text-sm">Open a channel to start sending and receiving Lightning payments.</p>
    </div>

    <!-- Channel List -->
    <div v-else key="channels" class="space-y-3">
      <div
        v-for="ch in channels"
        :key="ch.chan_id || ch.channel_point"
        class="glass-card p-4"
      >
        <div class="flex items-center justify-between mb-3">
          <div class="flex items-center gap-2">
            <span
              class="w-2 h-2 rounded-full"
              :class="{
                'bg-green-400': ch.status === 'active',
                'bg-yellow-400': ch.status === 'pending_open',
                'bg-red-400': ch.status === 'inactive',
              }"
            ></span>
            <span class="text-white/80 text-sm font-medium capitalize">{{ ch.status.replace('_', ' ') }}</span>
          </div>
          <button
            v-if="ch.status !== 'pending_open'"
            @click="confirmClose(ch)"
            class="text-red-400/70 hover:text-red-400 text-xs transition-colors"
          >
            Close
          </button>
        </div>

        <!-- Peer -->
        <p class="text-white/50 text-xs font-mono mb-3 truncate" :title="ch.remote_pubkey">
          {{ ch.remote_pubkey }}
        </p>

        <!-- Capacity Bar -->
        <div class="mb-2">
          <div class="flex justify-between text-xs text-white/60 mb-1">
            <span>Local: {{ formatSats(ch.local_balance) }}</span>
            <span>Remote: {{ formatSats(ch.remote_balance) }}</span>
          </div>
          <div class="h-2 bg-white/10 rounded-full overflow-hidden flex">
            <div
              class="bg-blue-400 h-full transition-all"
              :style="{ width: capacityPercent(ch.local_balance, ch.capacity) + '%' }"
            ></div>
            <div
              class="bg-orange-400 h-full transition-all"
              :style="{ width: capacityPercent(ch.remote_balance, ch.capacity) + '%' }"
            ></div>
          </div>
          <p class="text-white/40 text-xs mt-1 text-center">
            Capacity: {{ formatSats(ch.capacity) }}
          </p>
        </div>
      </div>
    </div>
    </Transition>

    <!-- Open Channel Modal -->
    <div v-if="showOpenModal" class="fixed inset-0 z-50 flex items-center justify-center bg-black/10 backdrop-blur-md" @click.self="showOpenModal = false">
      <div class="glass-card p-6 w-full max-w-md mx-4">
        <h2 class="text-lg font-bold text-white mb-4">Open Channel</h2>

        <div class="space-y-4">
          <div>
            <label class="text-white/60 text-sm block mb-1">Peer URI</label>
            <input
              v-model="openForm.peerUri"
              type="text"
              placeholder="pubkey@host:port"
              class="w-full bg-white/5 border border-white/10 rounded-lg px-3 py-2 text-white text-sm focus:outline-none focus:border-white/30"
            />
            <p class="text-white/40 text-xs mt-1">Format: pubkey@host:port</p>
          </div>
          <div>
            <label class="text-white/60 text-sm block mb-1">Amount (sats)</label>
            <input
              v-model.number="openForm.amount"
              type="number"
              min="20000"
              placeholder="100000"
              class="w-full bg-white/5 border border-white/10 rounded-lg px-3 py-2 text-white text-sm focus:outline-none focus:border-white/30"
            />
            <p class="text-white/40 text-xs mt-1">Minimum 20,000 sats</p>
          </div>
        </div>

        <div v-if="openError" class="mt-3 p-2 bg-red-500/20 border border-red-500/30 rounded-lg">
          <p class="text-red-300 text-xs">{{ openError }}</p>
        </div>

        <div class="flex gap-3 mt-6">
          <button @click="showOpenModal = false" class="flex-1 glass-button px-4 py-2 rounded-lg text-sm">Cancel</button>
          <button
            @click="openChannel"
            :disabled="openingChannel"
            class="flex-1 glass-button px-4 py-2 rounded-lg text-sm font-medium bg-blue-500/20 border-blue-500/30"
          >
            {{ openingChannel ? 'Opening...' : 'Open Channel' }}
          </button>
        </div>
      </div>
    </div>

    <!-- Close Confirmation Modal -->
    <div v-if="closeTarget" class="fixed inset-0 z-50 flex items-center justify-center bg-black/10 backdrop-blur-md" @click.self="closeTarget = null">
      <div class="glass-card p-6 w-full max-w-sm mx-4">
        <h2 class="text-lg font-bold text-white mb-2">Close Channel?</h2>
        <p class="text-white/60 text-sm mb-4">This will cooperatively close the channel with peer {{ closeTarget.remote_pubkey.slice(0, 16) }}...</p>
        <div v-if="closeError" class="mb-3 p-2 bg-red-500/20 border border-red-500/30 rounded-lg">
          <p class="text-red-300 text-xs">{{ closeError }}</p>
        </div>
        <div class="flex gap-3">
          <button @click="closeTarget = null" class="flex-1 glass-button px-4 py-2 rounded-lg text-sm">Cancel</button>
          <button
            @click="closeChannel"
            :disabled="closingChannel"
            class="flex-1 glass-button px-4 py-2 rounded-lg text-sm font-medium bg-red-500/20 border-red-500/30"
          >
            {{ closingChannel ? 'Closing...' : 'Close' }}
          </button>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import { ref, onMounted } from 'vue'
import { useRouter } from 'vue-router'
import { rpcClient } from '../../api/rpc-client'

const router = useRouter()

interface Channel {
  chan_id: string
  remote_pubkey: string
  capacity: number
  local_balance: number
  remote_balance: number
  active: boolean
  status: string
  channel_point: string
}

const loading = ref(true)
const error = ref<string | null>(null)
const channels = ref<Channel[]>([])
const summary = ref({ total_inbound: 0, total_outbound: 0 })

const showOpenModal = ref(false)
const openForm = ref({ peerUri: '', amount: 100000 })
const openingChannel = ref(false)
const openError = ref<string | null>(null)

const closeTarget = ref<Channel | null>(null)
const closingChannel = ref(false)
const closeError = ref<string | null>(null)

function formatSats(sats: number): string {
  if (sats >= 100_000_000) return `${(sats / 100_000_000).toFixed(2)} BTC`
  if (sats >= 1_000_000) return `${(sats / 1_000_000).toFixed(1)}M sats`
  if (sats >= 1_000) return `${(sats / 1_000).toFixed(1)}k sats`
  return `${sats} sats`
}

function capacityPercent(amount: number, capacity: number): number {
  if (capacity <= 0) return 0
  return Math.round((amount / capacity) * 100)
}

async function loadChannels() {
  loading.value = true
  error.value = null
  try {
    const result = await rpcClient.call<{ channels: Channel[]; total_inbound: number; total_outbound: number }>({
      method: 'lnd.listchannels',
      timeout: 15000,
    })
    channels.value = result.channels || []
    summary.value = {
      total_inbound: result.total_inbound || 0,
      total_outbound: result.total_outbound || 0,
    }
  } catch (err: unknown) {
    error.value = err instanceof Error ? err.message : 'Failed to load channels'
  } finally {
    loading.value = false
  }
}

async function openChannel() {
  if (openingChannel.value) return
  openError.value = null

  const uri = openForm.value.peerUri.trim()
  if (!uri) { openError.value = 'Peer URI is required'; return }
  if (openForm.value.amount < 20000) { openError.value = 'Minimum 20,000 sats'; return }

  const parts = uri.split('@')
  const pubkey = parts[0]
  const address = parts[1] || undefined

  openingChannel.value = true
  try {
    await rpcClient.call({
      method: 'lnd.openchannel',
      params: { pubkey, address, amount: openForm.value.amount },
      timeout: 30000,
    })
    showOpenModal.value = false
    openForm.value = { peerUri: '', amount: 100000 }
    await loadChannels()
  } catch (err: unknown) {
    openError.value = err instanceof Error ? err.message : 'Failed to open channel'
  } finally {
    openingChannel.value = false
  }
}

function confirmClose(ch: Channel) {
  closeTarget.value = ch
  closeError.value = null
}

async function closeChannel() {
  if (closingChannel.value || !closeTarget.value) return
  closeError.value = null
  closingChannel.value = true
  try {
    await rpcClient.call({
      method: 'lnd.closechannel',
      params: { channel_point: closeTarget.value.channel_point },
      timeout: 30000,
    })
    closeTarget.value = null
    await loadChannels()
  } catch (err: unknown) {
    closeError.value = err instanceof Error ? err.message : 'Failed to close channel'
  } finally {
    closingChannel.value = false
  }
}

onMounted(loadChannels)
</script>