73 lines
1.9 KiB
Vue
73 lines
1.9 KiB
Vue
|
<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>
|