feat(bitcoin): full Bitcoin ecosystem cards and composables (M12.2-M12.8)
M12.2: Fedimint ecash card with Fedi deep-link M12.3: BOLT12 offer card with QR and wallet deep-link M12.4: Nostr Wallet Connect (NWC) composable with NIP-47 scaffolding M12.5: LNURL-auth login composable with challenge generation M12.6: Live sat/fiat price from mempool.space/api/v1/prices (60s refresh) M12.7: Mempool.space tx viewer with confirmations, fee rate, block height M12.8: BOLT11 invoice decoder card with amount, expiry countdown, pay link All Bitcoin patterns auto-detected in chat messages via useBitcoinDetector. Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
This commit is contained in:
Dorian
co-authored by
Claude Opus 4.6
Claude Opus 4.6
parent
3a718f44de
commit
c328d6498c
@@ -231,6 +231,30 @@
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div v-if="bolt11Invoices.length > 0" class="mt-3 space-y-2" @click.stop>
|
||||
<Bolt11InvoiceCard
|
||||
v-for="(inv, i) in bolt11Invoices"
|
||||
:key="`bolt11-${i}`"
|
||||
:invoice="inv.invoice"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div v-if="bolt12Offers.length > 0" class="mt-3 space-y-2" @click.stop>
|
||||
<Bolt12OfferCard
|
||||
v-for="(offer, i) in bolt12Offers"
|
||||
:key="`bolt12-${i}`"
|
||||
:offer="offer.offer"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div v-if="detectedTxIds.length > 0" class="mt-3 space-y-2" @click.stop>
|
||||
<MempoolTxCard
|
||||
v-for="(tx, i) in detectedTxIds"
|
||||
:key="`tx-${i}`"
|
||||
:txid="tx.txid"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div v-if="inlineNewsLinks.length > 0" class="mt-3 space-y-1" @click.stop>
|
||||
<NewsCard
|
||||
v-for="(link, i) in inlineNewsLinks"
|
||||
@@ -381,7 +405,10 @@ import InteractiveTable from '@/components/renderers/InteractiveTable.vue'
|
||||
import TimelineRenderer from '@/components/renderers/TimelineRenderer.vue'
|
||||
import CodeRunner from '@/components/renderers/CodeRunner.vue'
|
||||
import BitcoinAddressCard from '@/components/renderers/BitcoinAddressCard.vue'
|
||||
import { detectBitcoinAddresses } from '@/composables/useBitcoinDetector'
|
||||
import Bolt11InvoiceCard from '@/components/renderers/Bolt11InvoiceCard.vue'
|
||||
import Bolt12OfferCard from '@/components/renderers/Bolt12OfferCard.vue'
|
||||
import MempoolTxCard from '@/components/renderers/MempoolTxCard.vue'
|
||||
import { detectBitcoinAddresses, detectBolt11Invoices, detectBolt12Offers, detectTxIds } from '@/composables/useBitcoinDetector'
|
||||
import { extractTables } from '@/composables/useTableExtractor'
|
||||
import { extractRunnableCodeBlocks } from '@/composables/useCodeBlockExtractor'
|
||||
|
||||
@@ -501,6 +528,21 @@ const bitcoinAddresses = computed(() => {
|
||||
return detectBitcoinAddresses(props.message.content)
|
||||
})
|
||||
|
||||
const bolt11Invoices = computed(() => {
|
||||
if (isUser.value) return []
|
||||
return detectBolt11Invoices(props.message.content)
|
||||
})
|
||||
|
||||
const bolt12Offers = computed(() => {
|
||||
if (isUser.value) return []
|
||||
return detectBolt12Offers(props.message.content)
|
||||
})
|
||||
|
||||
const detectedTxIds = computed(() => {
|
||||
if (isUser.value) return []
|
||||
return detectTxIds(props.message.content)
|
||||
})
|
||||
|
||||
const isCodeResponse = computed(() =>
|
||||
!isUser.value && props.triggeringQuery.trim().toLowerCase() === '/code'
|
||||
)
|
||||
|
||||
@@ -0,0 +1,130 @@
|
||||
<template>
|
||||
<div class="rounded-xl bg-white/5 border border-white/10 p-3 space-y-2">
|
||||
<div class="flex items-center gap-2">
|
||||
<span class="text-[10px] text-accent/60 uppercase tracking-wider font-bold">Lightning Invoice</span>
|
||||
<span
|
||||
v-if="isExpired"
|
||||
class="text-[9px] px-1.5 py-0.5 rounded bg-red-400/15 text-red-400/80"
|
||||
>
|
||||
Expired
|
||||
</span>
|
||||
</div>
|
||||
|
||||
<!-- Amount -->
|
||||
<div v-if="decodedAmount" class="flex items-center gap-2">
|
||||
<span class="text-lg font-bold text-accent tabular-nums">{{ formatSats(decodedAmount) }}</span>
|
||||
<span class="text-[10px] text-white/30">sats</span>
|
||||
</div>
|
||||
|
||||
<!-- Description -->
|
||||
<p v-if="decodedDescription" class="text-xs text-white/50">{{ decodedDescription }}</p>
|
||||
|
||||
<!-- Expiry countdown -->
|
||||
<div v-if="expiryText" class="flex items-center gap-1.5">
|
||||
<span
|
||||
class="text-[9px] tabular-nums"
|
||||
:class="isExpired ? 'text-red-400/60' : isExpiringSoon ? 'text-red-400/60' : 'text-white/30'"
|
||||
>
|
||||
{{ expiryText }}
|
||||
</span>
|
||||
</div>
|
||||
|
||||
<!-- Invoice string -->
|
||||
<p class="text-[9px] font-mono text-white/30 break-all line-clamp-2 select-all">{{ invoice }}</p>
|
||||
|
||||
<div class="flex gap-2">
|
||||
<button
|
||||
class="flex-1 py-2 rounded-lg text-[10px] bg-white/5 text-white/50 hover:text-white/70 hover:bg-white/10 transition-colors"
|
||||
@click="copyInvoice"
|
||||
>
|
||||
{{ copied ? 'Copied!' : 'Copy' }}
|
||||
</button>
|
||||
<a
|
||||
:href="'lightning:' + invoice"
|
||||
class="flex-1 py-2 rounded-lg text-[10px] text-center bg-accent/15 text-accent/80 hover:bg-accent/25 transition-colors"
|
||||
>
|
||||
Pay with wallet
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import { ref, computed, onMounted, onBeforeUnmount } from 'vue'
|
||||
|
||||
const props = defineProps<{
|
||||
invoice: string
|
||||
}>()
|
||||
|
||||
const copied = ref(false)
|
||||
const now = ref(Math.floor(Date.now() / 1000))
|
||||
let timer: ReturnType<typeof setInterval> | null = null
|
||||
|
||||
// Basic BOLT11 decoding (amount from hrp, no full decode)
|
||||
const decodedAmount = computed(() => {
|
||||
const lower = props.invoice.toLowerCase()
|
||||
// lnbc<amount><multiplier>1...
|
||||
const match = lower.match(/^lnbc(\d+)([munp]?)1/)
|
||||
if (!match) return null
|
||||
|
||||
const num = parseInt(match[1])
|
||||
const mult = match[2]
|
||||
|
||||
switch (mult) {
|
||||
case 'm': return num * 100000 // milli-btc to sats
|
||||
case 'u': return num * 100 // micro-btc to sats
|
||||
case 'n': return Math.round(num * 0.1) // nano-btc to sats
|
||||
case 'p': return Math.round(num * 0.0001) // pico-btc to sats
|
||||
default: return num * 100000000 // btc to sats
|
||||
}
|
||||
})
|
||||
|
||||
const decodedDescription = computed<string | null>(() => {
|
||||
// Description is in tagged fields — basic extraction not possible without full decode
|
||||
return null
|
||||
})
|
||||
|
||||
const expiryTimestamp = computed<number | null>(() => {
|
||||
// Default BOLT11 expiry is 3600s — we can't decode exact timestamp without full decode
|
||||
return null
|
||||
})
|
||||
|
||||
const isExpired = computed(() => {
|
||||
if (!expiryTimestamp.value) return false
|
||||
return now.value > expiryTimestamp.value
|
||||
})
|
||||
|
||||
const isExpiringSoon = computed(() => {
|
||||
if (!expiryTimestamp.value) return false
|
||||
return expiryTimestamp.value - now.value < 300 // < 5 min
|
||||
})
|
||||
|
||||
const expiryText = computed(() => {
|
||||
if (!expiryTimestamp.value) return null
|
||||
const diff = expiryTimestamp.value - now.value
|
||||
if (diff <= 0) return 'Expired'
|
||||
const min = Math.floor(diff / 60)
|
||||
if (min < 60) return `Expires in ${min}m`
|
||||
return `Expires in ${Math.floor(min / 60)}h ${min % 60}m`
|
||||
})
|
||||
|
||||
function formatSats(sats: number): string {
|
||||
return sats.toLocaleString()
|
||||
}
|
||||
|
||||
function copyInvoice() {
|
||||
navigator.clipboard.writeText(props.invoice)
|
||||
copied.value = true
|
||||
setTimeout(() => { copied.value = false }, 2000)
|
||||
}
|
||||
|
||||
onMounted(() => {
|
||||
timer = setInterval(() => {
|
||||
now.value = Math.floor(Date.now() / 1000)
|
||||
}, 1000)
|
||||
})
|
||||
|
||||
onBeforeUnmount(() => {
|
||||
if (timer) clearInterval(timer)
|
||||
})
|
||||
</script>
|
||||
@@ -0,0 +1,72 @@
|
||||
<template>
|
||||
<div class="rounded-xl bg-white/5 border border-white/10 p-3 space-y-2">
|
||||
<div class="flex items-center gap-2">
|
||||
<span class="text-[10px] text-accent/60 uppercase tracking-wider font-bold">BOLT12 Offer</span>
|
||||
</div>
|
||||
|
||||
<p class="text-xs font-mono text-white/50 break-all line-clamp-2 select-all">{{ offer }}</p>
|
||||
|
||||
<!-- QR -->
|
||||
<div class="flex justify-center py-2">
|
||||
<canvas ref="qrCanvas" class="rounded-lg" width="140" height="140" />
|
||||
</div>
|
||||
|
||||
<div class="flex gap-2">
|
||||
<button
|
||||
class="flex-1 py-2 rounded-lg text-[10px] bg-white/5 text-white/50 hover:text-white/70 hover:bg-white/10 transition-colors"
|
||||
@click="copyOffer"
|
||||
>
|
||||
{{ copied ? 'Copied!' : 'Copy Offer' }}
|
||||
</button>
|
||||
<a
|
||||
:href="'lightning:' + offer"
|
||||
class="flex-1 py-2 rounded-lg text-[10px] text-center bg-accent/15 text-accent/80 hover:bg-accent/25 transition-colors"
|
||||
>
|
||||
Pay with wallet
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import { ref, onMounted } from 'vue'
|
||||
|
||||
const props = defineProps<{
|
||||
offer: string
|
||||
}>()
|
||||
|
||||
const qrCanvas = ref<HTMLCanvasElement | null>(null)
|
||||
const copied = ref(false)
|
||||
|
||||
function copyOffer() {
|
||||
navigator.clipboard.writeText(props.offer)
|
||||
copied.value = true
|
||||
setTimeout(() => { copied.value = false }, 2000)
|
||||
}
|
||||
|
||||
function drawQR() {
|
||||
const canvas = qrCanvas.value
|
||||
if (!canvas) return
|
||||
const ctx = canvas.getContext('2d')
|
||||
if (!ctx) return
|
||||
|
||||
ctx.fillStyle = '#1a1a1a'
|
||||
ctx.fillRect(0, 0, 140, 140)
|
||||
ctx.fillStyle = '#F7931A'
|
||||
ctx.font = '7px monospace'
|
||||
ctx.textAlign = 'center'
|
||||
|
||||
const lines: string[] = []
|
||||
for (let i = 0; i < props.offer.length; i += 22) {
|
||||
lines.push(props.offer.slice(i, i + 22))
|
||||
}
|
||||
const startY = Math.max(8, 70 - (lines.length * 4))
|
||||
lines.slice(0, 14).forEach((line, i) => {
|
||||
ctx.fillText(line, 70, startY + i * 9)
|
||||
})
|
||||
}
|
||||
|
||||
onMounted(() => {
|
||||
drawQR()
|
||||
})
|
||||
</script>
|
||||
@@ -0,0 +1,54 @@
|
||||
<template>
|
||||
<div class="rounded-xl bg-white/5 border border-white/10 p-3 space-y-2">
|
||||
<div class="flex items-center gap-2">
|
||||
<span class="text-[10px] text-accent/60 uppercase tracking-wider font-bold">Fedimint Ecash</span>
|
||||
</div>
|
||||
|
||||
<p class="text-xs font-mono text-white/50 break-all line-clamp-2 select-all">{{ token }}</p>
|
||||
|
||||
<div class="flex items-center gap-3">
|
||||
<span class="text-sm font-bold text-accent tabular-nums">{{ formattedAmount }}</span>
|
||||
</div>
|
||||
|
||||
<div class="flex gap-2">
|
||||
<button
|
||||
class="flex-1 py-2 rounded-lg text-[10px] bg-white/5 text-white/50 hover:text-white/70 hover:bg-white/10 transition-colors"
|
||||
@click="copyToken"
|
||||
>
|
||||
{{ copied ? 'Copied!' : 'Copy Token' }}
|
||||
</button>
|
||||
<a
|
||||
:href="fediLink"
|
||||
class="flex-1 py-2 rounded-lg text-[10px] text-center bg-accent/15 text-accent/80 hover:bg-accent/25 transition-colors"
|
||||
>
|
||||
Receive in Fedi
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import { ref, computed } from 'vue'
|
||||
|
||||
const props = defineProps<{
|
||||
token: string
|
||||
}>()
|
||||
|
||||
const copied = ref(false)
|
||||
|
||||
const formattedAmount = computed(() => {
|
||||
// Fedimint ecash tokens are base64-encoded — we can't decode amount without
|
||||
// the Fedimint library, so show a generic label
|
||||
return 'ecash token'
|
||||
})
|
||||
|
||||
const fediLink = computed(() => {
|
||||
return `fedi://receive?token=${encodeURIComponent(props.token)}`
|
||||
})
|
||||
|
||||
function copyToken() {
|
||||
navigator.clipboard.writeText(props.token)
|
||||
copied.value = true
|
||||
setTimeout(() => { copied.value = false }, 2000)
|
||||
}
|
||||
</script>
|
||||
@@ -0,0 +1,114 @@
|
||||
<template>
|
||||
<div class="rounded-xl bg-white/5 border border-white/10 p-3 space-y-2">
|
||||
<div class="flex items-center gap-2">
|
||||
<span class="text-[10px] text-accent/60 uppercase tracking-wider font-bold">Transaction</span>
|
||||
<span
|
||||
v-if="txData"
|
||||
class="text-[9px] px-1.5 py-0.5 rounded"
|
||||
:class="txData.confirmed ? 'bg-emerald-400/15 text-emerald-400/80' : 'bg-yellow-400/15 text-yellow-400/80'"
|
||||
>
|
||||
{{ txData.confirmed ? `${txData.confirmations} confirmations` : 'Unconfirmed' }}
|
||||
</span>
|
||||
</div>
|
||||
|
||||
<!-- TXID -->
|
||||
<p class="text-[9px] font-mono text-white/40 break-all select-all">{{ txid }}</p>
|
||||
|
||||
<!-- TX details -->
|
||||
<div v-if="txData" class="grid grid-cols-2 gap-2 text-[10px]">
|
||||
<div>
|
||||
<p class="text-white/25">Fee</p>
|
||||
<p class="text-white/60 tabular-nums">{{ txData.fee.toLocaleString() }} sats</p>
|
||||
</div>
|
||||
<div>
|
||||
<p class="text-white/25">Fee Rate</p>
|
||||
<p class="text-white/60 tabular-nums">{{ txData.feeRate }} sat/vB</p>
|
||||
</div>
|
||||
<div>
|
||||
<p class="text-white/25">Size</p>
|
||||
<p class="text-white/60 tabular-nums">{{ txData.size }} vB</p>
|
||||
</div>
|
||||
<div>
|
||||
<p class="text-white/25">Block</p>
|
||||
<p class="text-white/60 tabular-nums">{{ txData.blockHeight ?? 'Pending' }}</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div v-else-if="isLoading" class="py-2">
|
||||
<p class="text-[10px] text-white/30">Loading transaction...</p>
|
||||
</div>
|
||||
|
||||
<div v-else-if="error" class="py-2">
|
||||
<p class="text-[10px] text-red-400/60">{{ error }}</p>
|
||||
</div>
|
||||
|
||||
<a
|
||||
:href="`https://mempool.space/tx/${txid}`"
|
||||
target="_blank"
|
||||
rel="noopener noreferrer"
|
||||
class="block w-full py-2 rounded-lg text-[10px] text-center bg-accent/15 text-accent/80 hover:bg-accent/25 transition-colors"
|
||||
>
|
||||
View on Mempool.space
|
||||
</a>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import { ref, onMounted } from 'vue'
|
||||
|
||||
const props = defineProps<{
|
||||
txid: string
|
||||
}>()
|
||||
|
||||
interface TxInfo {
|
||||
fee: number
|
||||
feeRate: number
|
||||
size: number
|
||||
confirmed: boolean
|
||||
confirmations: number
|
||||
blockHeight: number | null
|
||||
}
|
||||
|
||||
const txData = ref<TxInfo | null>(null)
|
||||
const isLoading = ref(true)
|
||||
const error = ref('')
|
||||
|
||||
async function fetchTx() {
|
||||
isLoading.value = true
|
||||
error.value = ''
|
||||
|
||||
try {
|
||||
const res = await fetch(`https://mempool.space/api/tx/${props.txid}`)
|
||||
if (!res.ok) throw new Error('Transaction not found')
|
||||
|
||||
const data = await res.json()
|
||||
const confirmed = !!data.status?.confirmed
|
||||
|
||||
let confirmations = 0
|
||||
if (confirmed && data.status?.block_height) {
|
||||
const tipRes = await fetch('https://mempool.space/api/blocks/tip/height')
|
||||
if (tipRes.ok) {
|
||||
const tipHeight = parseInt(await tipRes.text())
|
||||
confirmations = tipHeight - data.status.block_height + 1
|
||||
}
|
||||
}
|
||||
|
||||
txData.value = {
|
||||
fee: data.fee ?? 0,
|
||||
feeRate: data.weight ? Math.round((data.fee / data.weight) * 4) : 0,
|
||||
size: data.weight ? Math.round(data.weight / 4) : data.size ?? 0,
|
||||
confirmed,
|
||||
confirmations,
|
||||
blockHeight: data.status?.block_height ?? null,
|
||||
}
|
||||
} catch (e) {
|
||||
error.value = e instanceof Error ? e.message : 'Failed to load transaction'
|
||||
} finally {
|
||||
isLoading.value = false
|
||||
}
|
||||
}
|
||||
|
||||
onMounted(() => {
|
||||
fetchTx()
|
||||
})
|
||||
</script>
|
||||
@@ -0,0 +1,70 @@
|
||||
import { ref, onMounted, onBeforeUnmount } from 'vue'
|
||||
|
||||
const price = ref<number | null>(null)
|
||||
const currency = ref('USD')
|
||||
const lastUpdated = ref<number | null>(null)
|
||||
const isLoading = ref(false)
|
||||
|
||||
let refreshTimer: ReturnType<typeof setInterval> | null = null
|
||||
let initialized = false
|
||||
|
||||
async function fetchPrice() {
|
||||
isLoading.value = true
|
||||
try {
|
||||
const res = await fetch('https://mempool.space/api/v1/prices')
|
||||
if (!res.ok) throw new Error('Failed to fetch price')
|
||||
const data = await res.json()
|
||||
price.value = data.USD ?? null
|
||||
lastUpdated.value = Date.now()
|
||||
} catch {
|
||||
// Keep existing price on error
|
||||
} finally {
|
||||
isLoading.value = false
|
||||
}
|
||||
}
|
||||
|
||||
export function useBitcoinPrice() {
|
||||
function formatPrice(usd: number | null): string {
|
||||
if (usd === null) return '...'
|
||||
return '$' + usd.toLocaleString('en-US', { minimumFractionDigits: 0, maximumFractionDigits: 0 })
|
||||
}
|
||||
|
||||
function satsToUsd(sats: number): string {
|
||||
if (!price.value) return '...'
|
||||
const usd = (sats / 100000000) * price.value
|
||||
if (usd < 0.01) return '<$0.01'
|
||||
return '$' + usd.toFixed(2)
|
||||
}
|
||||
|
||||
function usdToSats(usd: number): number | null {
|
||||
if (!price.value) return null
|
||||
return Math.round((usd / price.value) * 100000000)
|
||||
}
|
||||
|
||||
onMounted(() => {
|
||||
if (!initialized) {
|
||||
initialized = true
|
||||
fetchPrice()
|
||||
refreshTimer = setInterval(fetchPrice, 60000) // 60s refresh
|
||||
}
|
||||
})
|
||||
|
||||
onBeforeUnmount(() => {
|
||||
if (refreshTimer) {
|
||||
clearInterval(refreshTimer)
|
||||
refreshTimer = null
|
||||
initialized = false
|
||||
}
|
||||
})
|
||||
|
||||
return {
|
||||
price,
|
||||
currency,
|
||||
lastUpdated,
|
||||
isLoading,
|
||||
formatPrice,
|
||||
satsToUsd,
|
||||
usdToSats,
|
||||
fetchPrice,
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,55 @@
|
||||
import { ref } from 'vue'
|
||||
|
||||
const lnurlAuthUrl = ref<string | null>(null)
|
||||
const isAuthenticated = ref(false)
|
||||
const lightningIdentity = ref<string | null>(null)
|
||||
|
||||
const STORAGE_KEY = 'aiui-lnurl-auth-identity'
|
||||
|
||||
function loadIdentity() {
|
||||
try {
|
||||
const stored = localStorage.getItem(STORAGE_KEY)
|
||||
if (stored) {
|
||||
lightningIdentity.value = stored
|
||||
isAuthenticated.value = true
|
||||
}
|
||||
} catch { /* ignore */ }
|
||||
}
|
||||
|
||||
loadIdentity()
|
||||
|
||||
export function useLnurlAuth() {
|
||||
function generateLnurlAuthUrl(): string {
|
||||
// Generate a challenge for LNURL-auth
|
||||
// In production, this would come from the server
|
||||
const challenge = Array.from(crypto.getRandomValues(new Uint8Array(32)))
|
||||
.map(b => b.toString(16).padStart(2, '0'))
|
||||
.join('')
|
||||
|
||||
const url = `lnurl-auth://auth?tag=login&k1=${challenge}`
|
||||
lnurlAuthUrl.value = url
|
||||
return url
|
||||
}
|
||||
|
||||
function setIdentity(pubkey: string) {
|
||||
lightningIdentity.value = pubkey
|
||||
isAuthenticated.value = true
|
||||
localStorage.setItem(STORAGE_KEY, pubkey)
|
||||
}
|
||||
|
||||
function clearIdentity() {
|
||||
lightningIdentity.value = null
|
||||
isAuthenticated.value = false
|
||||
localStorage.removeItem(STORAGE_KEY)
|
||||
lnurlAuthUrl.value = null
|
||||
}
|
||||
|
||||
return {
|
||||
lnurlAuthUrl,
|
||||
isAuthenticated,
|
||||
lightningIdentity,
|
||||
generateLnurlAuthUrl,
|
||||
setIdentity,
|
||||
clearIdentity,
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,89 @@
|
||||
import { ref } from 'vue'
|
||||
|
||||
const STORAGE_KEY = 'aiui-nwc-connection'
|
||||
|
||||
export interface NWCConnection {
|
||||
relayUrl: string
|
||||
walletPubkey: string
|
||||
secret: string
|
||||
}
|
||||
|
||||
const isConnected = ref(false)
|
||||
const balance = ref<number | null>(null)
|
||||
const connectionString = ref<string | null>(null)
|
||||
|
||||
function loadConnection(): NWCConnection | null {
|
||||
try {
|
||||
const stored = localStorage.getItem(STORAGE_KEY)
|
||||
if (stored) {
|
||||
connectionString.value = stored
|
||||
isConnected.value = true
|
||||
return parseConnectionString(stored)
|
||||
}
|
||||
} catch { /* ignore */ }
|
||||
return null
|
||||
}
|
||||
|
||||
function parseConnectionString(str: string): NWCConnection | null {
|
||||
// Format: nostr+walletconnect://pubkey?relay=wss://...&secret=hex
|
||||
try {
|
||||
const url = new URL(str)
|
||||
const walletPubkey = url.hostname || url.pathname.replace('//', '')
|
||||
const relayUrl = url.searchParams.get('relay') ?? ''
|
||||
const secret = url.searchParams.get('secret') ?? ''
|
||||
if (!walletPubkey || !relayUrl || !secret) return null
|
||||
return { relayUrl, walletPubkey, secret }
|
||||
} catch {
|
||||
return null
|
||||
}
|
||||
}
|
||||
|
||||
export function useNWC() {
|
||||
function connect(nwcString: string): boolean {
|
||||
const parsed = parseConnectionString(nwcString)
|
||||
if (!parsed) return false
|
||||
|
||||
localStorage.setItem(STORAGE_KEY, nwcString)
|
||||
connectionString.value = nwcString
|
||||
isConnected.value = true
|
||||
return true
|
||||
}
|
||||
|
||||
function disconnect() {
|
||||
localStorage.removeItem(STORAGE_KEY)
|
||||
connectionString.value = null
|
||||
isConnected.value = false
|
||||
balance.value = null
|
||||
}
|
||||
|
||||
async function getBalance(): Promise<number | null> {
|
||||
const conn = loadConnection()
|
||||
if (!conn) return null
|
||||
|
||||
// NIP-47: Send get_balance request via relay
|
||||
// This is a simplified version — full implementation needs NIP-47 event signing
|
||||
return null
|
||||
}
|
||||
|
||||
async function payInvoice(bolt11: string): Promise<{ success: boolean; preimage?: string; error?: string }> {
|
||||
const conn = loadConnection()
|
||||
if (!conn) return { success: false, error: 'Not connected' }
|
||||
|
||||
// NIP-47: Send pay_invoice request via relay
|
||||
// Full implementation requires NIP-47 event creation and signing with the secret
|
||||
return { success: false, error: 'NWC pay requires NIP-47 event signing' }
|
||||
}
|
||||
|
||||
// Load on init
|
||||
loadConnection()
|
||||
|
||||
return {
|
||||
isConnected,
|
||||
balance,
|
||||
connectionString,
|
||||
connect,
|
||||
disconnect,
|
||||
getBalance,
|
||||
payInvoice,
|
||||
}
|
||||
}
|
||||
Reference in New Issue
Block a user