Kieran/snort
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

improve ln url tip modal

Browse Source
This commit is contained in:
Alejandro Gomez 2023-01-11 12:30:43 +01:00
parent 357937b403
commit 1701ca7539
No known key found for this signature in database
GPG Key ID: 4DF39E566658C817
2 changed files with 35 additions and 19 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

29
src/element/LNURLTip.css
View File

@ -1,5 +1,5 @@
.lnurl-tip {
background-color: var(--gray-secondary);
background-color: var(--gray-tertiary);
padding: 10px;
border-radius: 10px;
width: 500px;
@ -9,6 +9,8 @@
.lnurl-tip .btn {
background-color: inherit;
width: 210px;
margin: 0 0 10px 0;
}
.lnurl-tip .btn:hover {
@ -17,15 +19,28 @@
.lnurl-tip .invoice {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
}
.lnurl-tip .invoice .actions {
display: flex;
flex-direction: column;
align-items: flex-start;
text-align: start;
text-align: center;
}
.lnurl-tip .invoice .actions > div {
margin: 10px;
.lnurl-tip .invoice .actions .copy-action {
margin: 10px auto;
}
.lnurl-tip .invoice .actions .pay-actions {
margin: 10px auto;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
}
@media(max-width: 720px) {
@ -33,10 +48,4 @@
width: 100vw;
margin: 0 10px;
}
.lnurl-tip .invoice {
flex-direction: column;
}
.lnurl-tip .invoice .actions {
text-align: center;
}
}

25
src/element/LNURLTip.js
View File

@ -3,6 +3,7 @@ import { useEffect, useMemo, useState } from "react";
import { bech32ToText } from "../Util";
import Modal from "./Modal";
import QrCode from "./QrCode";
import Copy from "./Copy";
export default function LNURLTip(props) {
const onClose = props.onClose || (() => { });
@ -132,7 +133,7 @@ export default function LNURLTip(props) {
function webLn() {
if ("webln" in window) {
return (
<div className="btn mb10" onClick={() => payWebLN()}>Pay with WebLN</div>
<div className="btn" onClick={() => payWebLN()}>Pay with WebLN</div>
)
}
return null;
@ -168,15 +169,21 @@ export default function LNURLTip(props) {
return (
<>
<div className="invoice">
<div>
<QrCode data={pr} link={`lightning:${pr}`} />
</div>
<QrCode data={pr} link={`lightning:${pr}`} />
<div className="actions">
{pr ? <>
{webLn()}
<div className="btn" onClick={() => window.open(`lightning:${pr}`)}>Open Wallet</div>
<div className="btn" onClick={() => navigator.clipboard.writeText(pr)}>Copy Invoice</div>
</> : null}
{pr && (
<>
<div className="copy-action">
<Copy text={pr} maxSize={26} />
</div>
<div className="pay-actions">
<div className="btn" onClick={() => window.open(`lightning:${pr}`)}>
Open Wallet
</div>
<div>{webLn()}</div>
</div>
</>
)}
</div>
</div>
</>