152 lines
6.8 KiB
Vue
152 lines
6.8 KiB
Vue
<template>
|
|
<BaseModal :show="show" :title="t('web5.receiveBitcoinTitle')" max-width="max-w-2xl" content-class="max-h-[90vh] overflow-y-auto" @close="close">
|
|
<!-- Method tabs -->
|
|
<div class="flex gap-1 mb-4 p-1 bg-white/5 rounded-lg">
|
|
<button
|
|
v-for="m in (['onchain', 'lightning', 'ecash'] as const)"
|
|
:key="m"
|
|
@click="receiveMethod = m"
|
|
class="flex-1 px-2 py-1.5 rounded text-xs font-medium capitalize transition-colors"
|
|
:class="receiveMethod === m ? 'bg-white/15 text-white' : 'text-white/50 hover:text-white/80'"
|
|
>{{ m === 'onchain' ? t('receiveBitcoin.onChain') : m === 'lightning' ? t('receiveBitcoin.lightning') : t('receiveBitcoin.ecash') }}</button>
|
|
</div>
|
|
|
|
<!-- Lightning -->
|
|
<div v-if="receiveMethod === 'lightning'">
|
|
<div class="mb-3">
|
|
<label class="text-white/60 text-sm block mb-1">{{ t('receiveBitcoin.amountSats') }}</label>
|
|
<input v-model.number="invoiceAmount" type="number" min="1" placeholder="1000" class="w-full input-glass" />
|
|
</div>
|
|
<div class="mb-3">
|
|
<label class="text-white/60 text-sm block mb-1">{{ t('receiveBitcoin.memoOptional') }}</label>
|
|
<input v-model="invoiceMemo" type="text" :placeholder="t('receiveBitcoin.memoPlaceholder')" class="w-full input-glass" />
|
|
</div>
|
|
<div v-if="invoiceResult" class="mb-3 p-3 bg-white/5 rounded-lg text-center">
|
|
<canvas ref="lightningQrCanvas" class="mx-auto mb-3 rounded-lg" style="image-rendering: pixelated;"></canvas>
|
|
<p class="text-white/50 text-xs mb-1">{{ t('receiveBitcoin.invoiceShareLabel') }}</p>
|
|
<p class="text-xs font-mono text-white/80 break-all">{{ invoiceResult }}</p>
|
|
<button @click="copyText(invoiceResult)" class="mt-2 text-xs text-orange-400 hover:text-orange-300">{{ t('common.copy') }}</button>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- On-chain -->
|
|
<div v-if="receiveMethod === 'onchain'">
|
|
<div v-if="onchainAddress" class="mb-3 p-3 bg-white/5 rounded-lg text-center">
|
|
<canvas ref="onchainQrCanvas" class="mx-auto mb-3 rounded-lg" style="image-rendering: pixelated;"></canvas>
|
|
<p class="text-white/50 text-xs mb-2">{{ t('receiveBitcoin.yourBitcoinAddress') }}</p>
|
|
<p class="text-sm font-mono text-white/90 break-all">{{ onchainAddress }}</p>
|
|
<button @click="copyText(onchainAddress)" class="mt-2 text-xs text-orange-400 hover:text-orange-300">{{ t('common.copy') }}</button>
|
|
</div>
|
|
<div v-else class="mb-3 text-center">
|
|
<p class="text-white/50 text-sm mb-2">{{ t('web5.generateFreshAddress') }}</p>
|
|
<p v-if="processing" class="text-xs text-white/40">Checking Lightning wallet readiness...</p>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Ecash -->
|
|
<div v-if="receiveMethod === 'ecash'">
|
|
<div class="mb-3">
|
|
<label class="text-white/60 text-sm block mb-1">{{ t('receiveBitcoin.pasteEcashToken') }}</label>
|
|
<textarea v-model="ecashToken" rows="3" placeholder="cashuSend_..." class="w-full input-glass font-mono"></textarea>
|
|
</div>
|
|
<div v-if="ecashResult" class="mb-3 text-xs text-green-400">{{ ecashResult }}</div>
|
|
</div>
|
|
|
|
<div v-if="error" class="mb-3 alert-error">{{ error }}</div>
|
|
|
|
<div class="flex gap-3">
|
|
<button @click="close" class="flex-1 glass-button px-4 py-2 rounded-lg text-sm">{{ t('common.close') }}</button>
|
|
<button @click="receive" :disabled="processing" class="flex-1 glass-button glass-button-success px-4 py-2 rounded-lg text-sm font-medium disabled:opacity-50">
|
|
{{ processing ? t('receiveBitcoin.processing') : receiveMethod === 'onchain' ? t('receiveBitcoin.generateAddress') : receiveMethod === 'lightning' ? t('receiveBitcoin.createInvoice') : t('receiveBitcoin.receive') }}
|
|
</button>
|
|
</div>
|
|
</BaseModal>
|
|
</template>
|
|
|
|
<script setup lang="ts">
|
|
import { ref, nextTick } from 'vue'
|
|
import { useI18n } from 'vue-i18n'
|
|
import { rpcClient } from '@/api/rpc-client'
|
|
import BaseModal from '@/components/BaseModal.vue'
|
|
import { explainReceiveAddressFailure } from '@/utils/bitcoinReceive'
|
|
|
|
const { t } = useI18n()
|
|
|
|
defineProps<{ show: boolean }>()
|
|
const emit = defineEmits<{ close: []; received: [] }>()
|
|
|
|
const receiveMethod = ref<'lightning' | 'onchain' | 'ecash'>('onchain')
|
|
const invoiceAmount = ref<number>(0)
|
|
const invoiceMemo = ref('')
|
|
const invoiceResult = ref('')
|
|
const onchainAddress = ref('')
|
|
const ecashToken = ref('')
|
|
const ecashResult = ref('')
|
|
const onchainQrCanvas = ref<HTMLCanvasElement | null>(null)
|
|
const lightningQrCanvas = ref<HTMLCanvasElement | null>(null)
|
|
const processing = ref(false)
|
|
const error = ref('')
|
|
|
|
async function renderQr(data: string, canvas: HTMLCanvasElement | null, prefix = '') {
|
|
if (!canvas || !data) return
|
|
try {
|
|
const QRCode = await import('qrcode')
|
|
await QRCode.toCanvas(canvas, prefix ? `${prefix}${data}` : data, {
|
|
width: 200,
|
|
margin: 2,
|
|
color: { dark: '#000000', light: '#ffffff' },
|
|
})
|
|
} catch { /* QR rendering failed silently */ }
|
|
}
|
|
|
|
function close() {
|
|
invoiceResult.value = ''
|
|
onchainAddress.value = ''
|
|
ecashToken.value = ''
|
|
ecashResult.value = ''
|
|
error.value = ''
|
|
emit('close')
|
|
}
|
|
|
|
function copyText(text: string) {
|
|
navigator.clipboard.writeText(text).catch(() => {})
|
|
}
|
|
|
|
async function receive() {
|
|
processing.value = true
|
|
error.value = ''
|
|
try {
|
|
if (receiveMethod.value === 'lightning') {
|
|
if (!invoiceAmount.value) { error.value = t('receiveBitcoin.enterAnAmount'); return }
|
|
const res = await rpcClient.call<{ payment_request: string }>({
|
|
method: 'lnd.addinvoice',
|
|
params: { amount_sats: invoiceAmount.value, memo: invoiceMemo.value || undefined },
|
|
})
|
|
invoiceResult.value = res.payment_request
|
|
nextTick(() => renderQr(res.payment_request, lightningQrCanvas.value, 'lightning:'))
|
|
} else if (receiveMethod.value === 'onchain') {
|
|
const res = await rpcClient.call<{ address: string }>({ method: 'lnd.newaddress' })
|
|
if (!res.address) {
|
|
throw new Error('LND did not return a Bitcoin address')
|
|
}
|
|
onchainAddress.value = res.address
|
|
nextTick(() => renderQr(res.address, onchainQrCanvas.value, 'bitcoin:'))
|
|
} else {
|
|
if (!ecashToken.value.trim()) { error.value = t('receiveBitcoin.pasteAnEcashToken'); return }
|
|
await rpcClient.call<{ amount_sats: number }>({
|
|
method: 'wallet.ecash-receive',
|
|
params: { token: ecashToken.value.trim() },
|
|
})
|
|
ecashResult.value = t('receiveBitcoin.tokenReceivedSuccess')
|
|
emit('received')
|
|
}
|
|
} catch (err: unknown) {
|
|
error.value = receiveMethod.value === 'onchain'
|
|
? explainReceiveAddressFailure(err)
|
|
: err instanceof Error ? err.message : 'Failed'
|
|
} finally {
|
|
processing.value = false
|
|
}
|
|
}
|
|
</script>
|