forked from Kieran/snort
feat: improve webln UX
This commit is contained in:
parent
0554600d36
commit
d156a44f0c
@ -5,6 +5,20 @@ import Modal from "Element/Modal";
|
||||
import QrCode from "Element/QrCode";
|
||||
import Copy from "Element/Copy";
|
||||
|
||||
const useWebLn = (enable = true) => {
|
||||
const maybeWebLn = "webln" in window ? window.webln : null
|
||||
|
||||
useEffect(() => {
|
||||
if (maybeWebLn && !maybeWebLn.enabled && enable) {
|
||||
maybeWebLn.enable().catch((error) => {
|
||||
console.debug("Couldn't enable WebLN")
|
||||
})
|
||||
}
|
||||
}, [maybeWebLn, enable])
|
||||
|
||||
return maybeWebLn
|
||||
}
|
||||
|
||||
declare global {
|
||||
interface Window {
|
||||
webln?: {
|
||||
@ -54,6 +68,7 @@ export default function LNURLTip(props: LNURLTipProps) {
|
||||
const [comment, setComment] = useState<string>();
|
||||
const [error, setError] = useState<string>();
|
||||
const [success, setSuccess] = useState<LNURLSuccessAction>();
|
||||
const webln = useWebLn(show);
|
||||
|
||||
useEffect(() => {
|
||||
if (show && !props.invoice) {
|
||||
@ -136,6 +151,7 @@ export default function LNURLTip(props: LNURLTipProps) {
|
||||
} else {
|
||||
setInvoice(data);
|
||||
setError("");
|
||||
payWebLNIfEnabled(data);
|
||||
}
|
||||
} else {
|
||||
setError("Failed to load invoice");
|
||||
@ -156,29 +172,19 @@ export default function LNURLTip(props: LNURLTipProps) {
|
||||
);
|
||||
}
|
||||
|
||||
async function payWebLN() {
|
||||
async function payWebLNIfEnabled(invoice: LNURLInvoice) {
|
||||
try {
|
||||
if (!window.webln!.enabled) {
|
||||
await window.webln!.enable();
|
||||
if (webln?.enabled) {
|
||||
let res = await webln.sendPayment(invoice!.pr);
|
||||
console.log(res);
|
||||
setSuccess(invoice!.successAction || {});
|
||||
}
|
||||
let res = await window.webln!.sendPayment(invoice!.pr);
|
||||
console.log(res);
|
||||
setSuccess(invoice!.successAction || {});
|
||||
} catch (e: any) {
|
||||
setError(e.toString());
|
||||
console.warn(e);
|
||||
}
|
||||
}
|
||||
|
||||
function webLn() {
|
||||
if ("webln" in window) {
|
||||
return (
|
||||
<div className="btn" onClick={() => payWebLN()}>Pay with WebLN</div>
|
||||
)
|
||||
}
|
||||
return null;
|
||||
}
|
||||
|
||||
function invoiceForm() {
|
||||
if (invoice) return null;
|
||||
return (
|
||||
@ -198,7 +204,7 @@ export default function LNURLTip(props: LNURLTipProps) {
|
||||
</span> : null}
|
||||
</div>
|
||||
{amount === -1 ? custom() : null}
|
||||
{(amount ?? 0) > 0 ? <div className="btn mb10" onClick={() => loadInvoice()}>Get Invoice</div> : null}
|
||||
{(amount ?? 0) > 0 && <button type="button" className="mb10" onClick={() => loadInvoice()}>Get Invoice</button>}
|
||||
</>
|
||||
)
|
||||
}
|
||||
@ -218,10 +224,9 @@ export default function LNURLTip(props: LNURLTipProps) {
|
||||
<Copy text={pr} maxSize={26} />
|
||||
</div>
|
||||
<div className="pay-actions">
|
||||
<div className="btn" onClick={() => window.open(`lightning:${pr}`)}>
|
||||
<button type="button" onClick={() => window.open(`lightning:${pr}`)}>
|
||||
Open Wallet
|
||||
</div>
|
||||
<div>{webLn()}</div>
|
||||
</button>
|
||||
</div>
|
||||
</>
|
||||
)}
|
||||
@ -236,7 +241,7 @@ export default function LNURLTip(props: LNURLTipProps) {
|
||||
return (
|
||||
<>
|
||||
<p>{success?.description ?? "Paid!"}</p>
|
||||
{success.url ? <a href={success.url} target="_blank">{success.url}</a> : null}
|
||||
{success.url ? <a href={success.url} rel="noreferrer" target="_blank">{success.url}</a> : null}
|
||||
</>
|
||||
)
|
||||
}
|
||||
|
Loading…
Reference in New Issue
Block a user