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 QrCode from "Element/QrCode";
|
||||||
import Copy from "Element/Copy";
|
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 {
|
declare global {
|
||||||
interface Window {
|
interface Window {
|
||||||
webln?: {
|
webln?: {
|
||||||
@ -54,6 +68,7 @@ export default function LNURLTip(props: LNURLTipProps) {
|
|||||||
const [comment, setComment] = useState<string>();
|
const [comment, setComment] = useState<string>();
|
||||||
const [error, setError] = useState<string>();
|
const [error, setError] = useState<string>();
|
||||||
const [success, setSuccess] = useState<LNURLSuccessAction>();
|
const [success, setSuccess] = useState<LNURLSuccessAction>();
|
||||||
|
const webln = useWebLn(show);
|
||||||
|
|
||||||
useEffect(() => {
|
useEffect(() => {
|
||||||
if (show && !props.invoice) {
|
if (show && !props.invoice) {
|
||||||
@ -136,6 +151,7 @@ export default function LNURLTip(props: LNURLTipProps) {
|
|||||||
} else {
|
} else {
|
||||||
setInvoice(data);
|
setInvoice(data);
|
||||||
setError("");
|
setError("");
|
||||||
|
payWebLNIfEnabled(data);
|
||||||
}
|
}
|
||||||
} else {
|
} else {
|
||||||
setError("Failed to load invoice");
|
setError("Failed to load invoice");
|
||||||
@ -156,29 +172,19 @@ export default function LNURLTip(props: LNURLTipProps) {
|
|||||||
);
|
);
|
||||||
}
|
}
|
||||||
|
|
||||||
async function payWebLN() {
|
async function payWebLNIfEnabled(invoice: LNURLInvoice) {
|
||||||
try {
|
try {
|
||||||
if (!window.webln!.enabled) {
|
if (webln?.enabled) {
|
||||||
await window.webln!.enable();
|
let res = await webln.sendPayment(invoice!.pr);
|
||||||
}
|
|
||||||
let res = await window.webln!.sendPayment(invoice!.pr);
|
|
||||||
console.log(res);
|
console.log(res);
|
||||||
setSuccess(invoice!.successAction || {});
|
setSuccess(invoice!.successAction || {});
|
||||||
|
}
|
||||||
} catch (e: any) {
|
} catch (e: any) {
|
||||||
setError(e.toString());
|
setError(e.toString());
|
||||||
console.warn(e);
|
console.warn(e);
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
function webLn() {
|
|
||||||
if ("webln" in window) {
|
|
||||||
return (
|
|
||||||
<div className="btn" onClick={() => payWebLN()}>Pay with WebLN</div>
|
|
||||||
)
|
|
||||||
}
|
|
||||||
return null;
|
|
||||||
}
|
|
||||||
|
|
||||||
function invoiceForm() {
|
function invoiceForm() {
|
||||||
if (invoice) return null;
|
if (invoice) return null;
|
||||||
return (
|
return (
|
||||||
@ -198,7 +204,7 @@ export default function LNURLTip(props: LNURLTipProps) {
|
|||||||
</span> : null}
|
</span> : null}
|
||||||
</div>
|
</div>
|
||||||
{amount === -1 ? custom() : null}
|
{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} />
|
<Copy text={pr} maxSize={26} />
|
||||||
</div>
|
</div>
|
||||||
<div className="pay-actions">
|
<div className="pay-actions">
|
||||||
<div className="btn" onClick={() => window.open(`lightning:${pr}`)}>
|
<button type="button" onClick={() => window.open(`lightning:${pr}`)}>
|
||||||
Open Wallet
|
Open Wallet
|
||||||
</div>
|
</button>
|
||||||
<div>{webLn()}</div>
|
|
||||||
</div>
|
</div>
|
||||||
</>
|
</>
|
||||||
)}
|
)}
|
||||||
@ -236,7 +241,7 @@ export default function LNURLTip(props: LNURLTipProps) {
|
|||||||
return (
|
return (
|
||||||
<>
|
<>
|
||||||
<p>{success?.description ?? "Paid!"}</p>
|
<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