archy/neode-ui/src/views/web5/Web5.vue

<template>
  <div class="pb-6">
    <!-- Quick Actions + HW Banner -->
    <Web5QuickActions
      :showStagger="showStagger"
      :profitsBreakdown="profitsBreakdown"
      :networkingProfitsDisplay="networkingProfitsDisplay"
      :userDid="userDid"
      :didStatus="didStatus"
      :didCopied="didCopied"
      :creatingDid="creatingDid"
      :dhtDid="dhtDid"
      :dhtDidCopied="dhtDidCopied"
      :publishingDht="publishingDht"
      :walletConnected="walletConnected"
      :connectingWallet="connectingWallet"
      :nostrRelayStats="nostrRelaysRef?.nostrRelayStats ?? null"
      :connectedNodesCount="connectedNodesRef?.peers?.length ?? 0"
      :detectedHwWallets="detectedHwWallets"
      @copyDid="copyDid"
      @showDidDocument="showDidDocument"
      @createDid="createDID"
      @copyDhtDid="copyDhtDid"
      @refreshDhtDid="refreshDhtDid"
      @publishDhtDid="publishDhtDid"
      @connectWallet="connectWallet"
      @manageRelays="nostrRelaysRef?.openRelaysModal()"
    />

    <!-- DID Document Modal -->
    <Teleport to="body">
      <div v-if="showDidDocModal" class="fixed inset-0 z-50 flex items-center justify-center p-4 bg-black/60 backdrop-blur-md" @click.self="showDidDocModal = false" @keydown.escape="showDidDocModal = false">
        <div class="glass-card p-6 max-w-2xl w-full max-h-[90vh] overflow-y-auto" role="dialog" aria-modal="true" aria-labelledby="did-doc-title">
          <div class="flex items-center justify-between mb-4">
            <h3 id="did-doc-title" class="text-lg font-semibold text-white">{{ t('web5.didDocument') }}</h3>
            <div class="flex items-center gap-2">
              <span v-if="didDocVerified === true" class="text-xs text-green-400 flex items-center gap-1">
                <svg class="w-4 h-4" fill="currentColor" viewBox="0 0 20 20"><path fill-rule="evenodd" d="M16.707 5.293a1 1 0 010 1.414l-8 8a1 1 0 01-1.414 0l-4-4a1 1 0 011.414-1.414L8 12.586l7.293-7.293a1 1 0 011.414 0z" clip-rule="evenodd"/></svg>
                {{ t('web5.verified') }}
              </span>
              <span v-else-if="didDocVerified === false" class="text-xs text-red-400">{{ t('web5.invalid') }}</span>
            </div>
          </div>
          <div v-if="loadingDidDoc" class="text-white/60 text-sm">{{ t('common.loading') }}</div>
          <pre v-else class="text-xs text-white/80 font-mono bg-black/30 rounded-lg p-4 overflow-x-auto whitespace-pre-wrap">{{ didDocumentFormatted }}</pre>
          <div class="flex gap-3 mt-4">
            <button @click="copyDidDocument" class="flex-1 px-4 py-2 glass-button rounded-lg text-sm font-medium text-white/90 hover:text-white transition-colors">
              {{ didDocCopied ? t('common.copiedBang') : t('common.copy') }}
            </button>
            <button @click="showDidDocModal = false" class="px-4 py-2 rounded-lg bg-white/10 text-white font-medium hover:bg-white/20 transition-colors">
              {{ t('common.close') }}
            </button>
          </div>
        </div>
      </div>
    </Teleport>

    <!-- Connected Nodes + Node Visibility -->
    <div class="grid grid-cols-1 xl:grid-cols-2 gap-6 mb-6">
      <Web5ConnectedNodes ref="connectedNodesRef" @toast="showToast" />
      <Web5NodeVisibility :showStagger="showStagger" ref="nodeVisibilityRef" @toast="showToast" />
    </div>

    <!-- Identities + Nostr Relays -->
    <div class="grid grid-cols-1 xl:grid-cols-2 gap-6 mb-6">
      <Web5Identities ref="identitiesRef" :showStagger="showStagger" @toast="showToast" />
      <Web5NostrRelays ref="nostrRelaysRef" :showStagger="showStagger" />
    </div>

    <!-- Monitoring + Federation -->
    <div class="grid grid-cols-1 xl:grid-cols-2 gap-6 mb-8">
      <Web5Monitoring />
      <Web5Federation />
    </div>

    <!-- Send/Receive Modals hidden — wallet card removed -->
    <!-- <Web5SendReceiveModals ref="sendReceiveRef" @toast="showToast" @balancesChanged="reloadBalances" /> -->

    <!-- Identity Toast -->
    <Transition name="content-fade">
      <div v-if="identityToastVisible" class="fixed bottom-24 md:bottom-8 left-1/2 -translate-x-1/2 z-50 px-4 py-2 rounded-lg bg-black/80 backdrop-blur-md border border-white/10 text-white text-sm shadow-lg">
        {{ identityToastText }}
      </div>
    </Transition>
  </div>
</template>

<script lang="ts">
let web5AnimationDone = false
</script>

<script setup lang="ts">
import { ref, computed, onMounted, onUnmounted, watch } from 'vue'
import { useRoute } from 'vue-router'
import { useI18n } from 'vue-i18n'
import { rpcClient } from '@/api/rpc-client'
import { safeClipboardWrite } from './utils'
import type { ProfitsData, WalletTransaction, HwWalletDevice } from './types'

import Web5QuickActions from './Web5QuickActions.vue'
// import Web5Wallet from './Web5Wallet.vue'  // hidden for now
// import Web5Domains from './Web5Domains.vue'  // hidden for now
import Web5NostrRelays from './Web5NostrRelays.vue'
import Web5NodeVisibility from './Web5NodeVisibility.vue'
import Web5ConnectedNodes from './Web5ConnectedNodes.vue'
// import Web5SharedContent from './Web5SharedContent.vue'  // hidden for now
import Web5Identities from './Web5Identities.vue'
// import Web5DWN from './Web5DWN.vue'  // hidden for now
// import Web5CredentialsSummary from './Web5CredentialsSummary.vue'  // hidden for now
import Web5Monitoring from './Web5Monitoring.vue'
import Web5Federation from './Web5Federation.vue'
// import Web5SendReceiveModals from './Web5SendReceiveModals.vue'  // wallet hidden

const route = useRoute()
const { t } = useI18n()

const showStagger = !web5AnimationDone

// Child refs
// const domainsRef = ref(null)  // hidden for now
const nostrRelaysRef = ref<InstanceType<typeof Web5NostrRelays> | null>(null)
const nodeVisibilityRef = ref<InstanceType<typeof Web5NodeVisibility> | null>(null)
const connectedNodesRef = ref<InstanceType<typeof Web5ConnectedNodes> | null>(null)
const identitiesRef = ref<InstanceType<typeof Web5Identities> | null>(null)
// const dwnRef = ref(null)  // hidden for now
// const credentialsRef = ref(null)  // hidden for now
// const sharedContentRef = ref(null)  // hidden for now
// const sendReceiveRef = ref(null)  // wallet hidden

// --- Toast ---
const identityToastText = ref('')
const identityToastVisible = ref(false)
let identityToastTimer: ReturnType<typeof setTimeout> | undefined

function showToast(text: string) {
  identityToastText.value = text
  identityToastVisible.value = true
  clearTimeout(identityToastTimer)
  identityToastTimer = setTimeout(() => { identityToastVisible.value = false }, 2000)
}

// --- Networking Profits ---
const profitsBreakdown = ref<ProfitsData | null>(null)
const networkingProfitsDisplay = computed(() => {
  if (!profitsBreakdown.value) return '...'
  const sats = profitsBreakdown.value.total_sats
  if (sats === 0) return '0 sats'
  if (sats < 100000) return `${sats.toLocaleString()} sats`
  const btc = sats / 100_000_000
  return `\u20BF${btc.toFixed(8).replace(/0+$/, '').replace(/\.$/, '')}`
})

async function loadNetworkingProfits() {
  try {
    const res = await rpcClient.call<ProfitsData>({ method: 'wallet.networking-profits' })
    profitsBreakdown.value = res
  } catch {
    profitsBreakdown.value = { total_sats: 0, content_sales_sats: 0, routing_fees_sats: 0 }
  }
}

// --- DID State ---
const storedDid = ref<string | null>(null)
try {
  storedDid.value = localStorage.getItem('neode_did') || null
} catch { /* noop */ }

const userDid = computed(() => storedDid.value)
const didStatus = computed<'active' | 'inactive' | 'pending'>(() => userDid.value ? 'active' : 'inactive')
const creatingDid = ref(false)
const didCopied = ref(false)

// did:dht
const dhtDid = ref<string | null>(null)
const publishingDht = ref(false)
const dhtDidCopied = ref(false)
try {
  dhtDid.value = localStorage.getItem('neode_dht_did') || null
} catch { /* noop */ }

async function createDID() {
  creatingDid.value = true
  try {
    const res = await rpcClient.call<{ did: string }>({ method: 'identity.create-did' })
    storedDid.value = res.did
    localStorage.setItem('neode_did', res.did)
  } catch {
    if (!crypto.subtle) {
      const randomBytes = new Uint8Array(32)
      crypto.getRandomValues(randomBytes)
      const hex = Array.from(randomBytes).map(b => b.toString(16).padStart(2, '0')).join('')
      const did = `did:key:z${hex}`
      storedDid.value = did
      localStorage.setItem('neode_did', did)
    } else {
      const keyPair = await crypto.subtle.generateKey({ name: 'ECDSA', namedCurve: 'P-256' }, true, ['sign', 'verify'])
      const exported = await crypto.subtle.exportKey('raw', keyPair.publicKey)
      const bytes = new Uint8Array(exported)
      const hex = Array.from(bytes).map(b => b.toString(16).padStart(2, '0')).join('')
      const did = `did:key:z${hex}`
      storedDid.value = did
      localStorage.setItem('neode_did', did)
    }
  } finally {
    creatingDid.value = false
  }
}

async function copyDid() {
  if (!userDid.value) return
  await safeClipboardWrite(userDid.value)
  didCopied.value = true
  setTimeout(() => { didCopied.value = false }, 2000)
}

async function publishDhtDid() {
  publishingDht.value = true
  try {
    const identities = await rpcClient.call<{ identities: Array<{ id: string; is_default: boolean }> }>({ method: 'identity.list' })
    const defaultId = identities.identities?.find((i: { is_default: boolean }) => i.is_default)
    if (!defaultId) return
    const res = await rpcClient.call<{ dht_did: string }>({
      method: 'identity.create-dht-did',
      params: { identity_id: defaultId.id },
    })
    dhtDid.value = res.dht_did
    localStorage.setItem('neode_dht_did', res.dht_did)
  } catch {
    const did = storedDid.value || localStorage.getItem('neode_did')
    if (did) {
      const dhtVersion = did.replace('did:key:', 'did:dht:')
      dhtDid.value = dhtVersion
      localStorage.setItem('neode_dht_did', dhtVersion)
    }
  } finally {
    publishingDht.value = false
  }
}

async function refreshDhtDid() {
  publishingDht.value = true
  try {
    const identities = await rpcClient.call<{ identities: Array<{ id: string; is_default: boolean }> }>({ method: 'identity.list' })
    const defaultId = identities.identities?.find((i: { is_default: boolean }) => i.is_default)
    if (!defaultId) return
    await rpcClient.call({ method: 'identity.refresh-dht-did', params: { identity_id: defaultId.id } })
  } catch { /* silently ignore */ }
  finally { publishingDht.value = false }
}

async function copyDhtDid() {
  if (!dhtDid.value) return
  await safeClipboardWrite(dhtDid.value)
  dhtDidCopied.value = true
  setTimeout(() => { dhtDidCopied.value = false }, 2000)
}

// DID Document modal
const showDidDocModal = ref(false)
const loadingDidDoc = ref(false)
const didDocumentData = ref<Record<string, unknown> | null>(null)
const didDocVerified = ref<boolean | null>(null)
const didDocCopied = ref(false)

const didDocumentFormatted = computed(() =>
  didDocumentData.value ? JSON.stringify(didDocumentData.value, null, 2) : ''
)

async function showDidDocument() {
  showDidDocModal.value = true
  loadingDidDoc.value = true
  didDocVerified.value = null
  try {
    const doc = await rpcClient.resolveDid()
    didDocumentData.value = doc
    const verification = await rpcClient.call({
      method: 'identity.verify-did-document',
      params: { document: doc },
    }) as { valid: boolean }
    didDocVerified.value = verification.valid
  } catch (err) {
    if (import.meta.env.DEV) console.error('Failed to load DID Document:', err)
    didDocumentData.value = null
  } finally {
    loadingDidDoc.value = false
  }
}

async function copyDidDocument() {
  if (!didDocumentFormatted.value) return
  await safeClipboardWrite(didDocumentFormatted.value)
  didDocCopied.value = true
  setTimeout(() => { didDocCopied.value = false }, 2000)
}

// --- Wallet / LND Balances ---
const walletConnected = ref(false)
const connectingWallet = ref(false)
const lndOnchainBalance = ref(0)
const lndChannelBalance = ref(0)
const walletError = ref('')
const ecashBalance = ref(0)

// Transactions — wallet card hidden, but loadTransactions still called for QuickActions walletConnected state
const walletTransactions = ref<WalletTransaction[]>([])

// Hardware wallets
const detectedHwWallets = ref<HwWalletDevice[]>([])

async function loadLndBalances() {
  try {
    const res = await rpcClient.call<{
      balance_sats: number
      channel_balance_sats: number
      synced_to_chain: boolean
    }>({ method: 'lnd.getinfo' })
    lndOnchainBalance.value = res.balance_sats || 0
    lndChannelBalance.value = res.channel_balance_sats || 0
    walletConnected.value = true
    walletError.value = ''
  } catch (e) {
    walletConnected.value = false
    lndOnchainBalance.value = 0
    lndChannelBalance.value = 0
    walletError.value = e instanceof Error ? e.message : 'Failed to load wallet balances'
  }
}

async function loadEcashBalance() {
  try {
    const res = await rpcClient.call<{ balance_sats: number; token_count: number }>({ method: 'wallet.ecash-balance' })
    ecashBalance.value = res.balance_sats ?? 0
  } catch {
    ecashBalance.value = 0
  }
}

async function loadTransactions() {
  try {
    const res = await rpcClient.call<{ transactions: WalletTransaction[]; incoming_pending_count: number }>({ method: 'lnd.gettransactions' })
    walletTransactions.value = res.transactions || []
    walletError.value = ''
  } catch (e) {
    walletTransactions.value = []
    walletError.value = e instanceof Error ? e.message : 'Failed to load transactions'
  }
}

async function connectWallet() {
  if (walletConnected.value) {
    walletConnected.value = false
  } else {
    connectingWallet.value = true
    await loadLndBalances()
    connectingWallet.value = false
  }
}

async function detectHardwareWallets() {
  try {
    const res = await rpcClient.detectUsbDevices()
    detectedHwWallets.value = res.devices || []
  } catch {
    detectedHwWallets.value = []
  }
}

// function reloadBalances() {  // wallet hidden
//   loadLndBalances()
//   loadEcashBalance()
//   loadTransactions()
// }

// Auto-refresh wallet data every 30s
let walletRefreshInterval: ReturnType<typeof setInterval> | null = null

onMounted(() => {
  web5AnimationDone = true

  // Load the authoritative node DID from the backend
  rpcClient.getNodeDid().then(res => {
    if (res.did && res.did !== storedDid.value) {
      storedDid.value = res.did
      try { localStorage.setItem('neode_did', res.did) } catch { /* noop */ }
    }
  }).catch(() => { /* use cached localStorage value */ })

  // Load all data from child components
  connectedNodesRef.value?.loadPeers()
  connectedNodesRef.value?.loadReceivedMessages()
  connectedNodesRef.value?.loadConnectionRequests()
  identitiesRef.value?.loadIdentities()
  nodeVisibilityRef.value?.loadVisibility()
  // domainsRef.value?.loadDomainNames()  // hidden for now
  nostrRelaysRef.value?.loadNostrRelays()
  // dwnRef.value?.loadDwnStatus()  // hidden for now
  // dwnRef.value?.loadDwnProtocols()  // hidden for now
  // credentialsRef.value?.loadCredentials()  // hidden for now
  // sharedContentRef.value?.loadContentItems()  // hidden for now

  // Load local state data
  loadEcashBalance()
  loadNetworkingProfits()
  loadLndBalances()
  loadTransactions()
  detectHardwareWallets()

  // Shared content loaded by the component itself via expose
  // The SharedContent component manages its own loadContentItems

  walletRefreshInterval = setInterval(() => {
    loadLndBalances()
    loadTransactions()
    loadEcashBalance()
  }, 30000)

  // Open Messages tab when navigated via toast
  if (route.query.tab === 'messages') {
    connectedNodesRef.value?.scrollToMessages()
  }
})

onUnmounted(() => {
  if (walletRefreshInterval) {
    clearInterval(walletRefreshInterval)
    walletRefreshInterval = null
  }
})

watch(() => route.query.tab, (tab) => {
  if (tab === 'messages') {
    connectedNodesRef.value?.scrollToMessages()
  }
})
</script>