2021-06-27 03:18:32 +00:00
|
|
|
import QRCode from 'qrcode.react'
|
|
|
|
import { CopyInput, InputSkeleton } from './form'
|
|
|
|
import InvoiceStatus from './invoice-status'
|
2021-09-07 17:52:59 +00:00
|
|
|
import { requestProvider } from 'webln'
|
|
|
|
import { useEffect } from 'react'
|
2021-06-27 03:18:32 +00:00
|
|
|
|
2023-08-10 23:33:57 +00:00
|
|
|
export default function Qr ({ asIs, value, webLn, statusVariant, description, status }) {
|
2023-01-18 18:49:20 +00:00
|
|
|
const qrValue = asIs ? value : 'lightning:' + value.toUpperCase()
|
2021-06-27 03:18:32 +00:00
|
|
|
|
2022-11-06 17:28:58 +00:00
|
|
|
useEffect(() => {
|
|
|
|
async function effect () {
|
|
|
|
if (webLn) {
|
|
|
|
try {
|
|
|
|
const provider = await requestProvider()
|
|
|
|
await provider.sendPayment(value)
|
|
|
|
} catch (e) {
|
|
|
|
console.log(e.message)
|
|
|
|
}
|
2021-09-07 17:52:59 +00:00
|
|
|
}
|
|
|
|
}
|
2022-11-06 17:28:58 +00:00
|
|
|
effect()
|
2021-09-07 17:52:59 +00:00
|
|
|
}, [])
|
|
|
|
|
2021-06-27 03:18:32 +00:00
|
|
|
return (
|
|
|
|
<>
|
2023-01-10 18:55:17 +00:00
|
|
|
<a className='d-block p-3 mx-auto' style={{ background: 'white', maxWidth: '300px' }} href={qrValue}>
|
2021-10-30 16:52:24 +00:00
|
|
|
<QRCode
|
|
|
|
className='h-auto mw-100' value={qrValue} renderAs='svg' size={300}
|
|
|
|
/>
|
2021-06-27 18:46:15 +00:00
|
|
|
</a>
|
2023-08-10 23:33:57 +00:00
|
|
|
{description && <div className='mt-1 fst-italic text-center text-muted'>{description}</div>}
|
2021-06-27 03:18:32 +00:00
|
|
|
<div className='mt-3 w-100'>
|
2022-08-18 18:15:24 +00:00
|
|
|
<CopyInput type='text' placeholder={value} readOnly noForm />
|
2021-06-27 03:18:32 +00:00
|
|
|
</div>
|
|
|
|
<InvoiceStatus variant={statusVariant} status={status} />
|
|
|
|
</>
|
|
|
|
)
|
|
|
|
}
|
|
|
|
|
2023-01-18 18:49:20 +00:00
|
|
|
export function QrSkeleton ({ status }) {
|
2021-06-27 03:18:32 +00:00
|
|
|
return (
|
|
|
|
<>
|
2021-11-04 18:22:03 +00:00
|
|
|
<div className='h-auto w-100 clouds' style={{ paddingTop: 'min(300px + 2rem, 100%)', maxWidth: 'calc(300px + 2rem)' }} />
|
2021-06-27 03:18:32 +00:00
|
|
|
<div className='mt-3 w-100'>
|
|
|
|
<InputSkeleton />
|
|
|
|
</div>
|
|
|
|
<InvoiceStatus variant='default' status={status} />
|
|
|
|
</>
|
|
|
|
)
|
|
|
|
}
|