54 lines
1.2 KiB
TypeScript
54 lines
1.2 KiB
TypeScript
import { useEffect } from "react";
|
|
import { LNVpsApi, VmPayment } from "../api";
|
|
import QrCode from "./qr";
|
|
import useLogin from "../hooks/login";
|
|
|
|
export default function VpsPayment({
|
|
payment,
|
|
onPaid,
|
|
}: {
|
|
payment: VmPayment;
|
|
onPaid?: () => void;
|
|
}) {
|
|
const login = useLogin();
|
|
const ln = `lightning:${payment.invoice}`;
|
|
|
|
async function checkPayment(api: LNVpsApi) {
|
|
try {
|
|
const st = await api.paymentStatus(payment.id);
|
|
if (st.is_paid) {
|
|
onPaid?.();
|
|
return true;
|
|
}
|
|
} catch (e) {
|
|
console.error(e);
|
|
}
|
|
return false;
|
|
}
|
|
|
|
useEffect(() => {
|
|
if (!login?.api) return;
|
|
|
|
const tx = setInterval(async () => {
|
|
if (await checkPayment(login.api)) {
|
|
clearInterval(tx);
|
|
}
|
|
}, 2_000);
|
|
return () => clearInterval(tx);
|
|
}, [login]);
|
|
|
|
return (
|
|
<div className="flex flex-col gap-4 rounded-xl p-3 bg-neutral-900 items-center">
|
|
<QrCode
|
|
data={ln}
|
|
link={ln}
|
|
width={512}
|
|
height={512}
|
|
avatar="/logo.jpg"
|
|
className="cursor-pointer rounded-xl overflow-hidden"
|
|
/>
|
|
{(payment.amount / 1000).toLocaleString()} sats
|
|
</div>
|
|
);
|
|
}
|