Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Create invoice #4

Open
wants to merge 3 commits into
base: master
Choose a base branch
from
Open

Create invoice #4

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
bbd4321
Set layout for creating invoices and choosing which to pay with
majdamasoud Dec 24, 2021
42a6356
Create multiple invoices, choose invoice to pay, console modifications
majdamasoud Dec 28, 2021
e72cc43
Data is saved in session storage
majdamasoud Feb 16, 2022
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
27 changes: 21 additions & 6 deletions fourohtwo.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,5 +1,6 @@
const path = require("path");
const express = require("express");
const uuid = require('uuid');
const bodyParser = require("body-parser");
const cors = require("cors");
const { boltwall, TIME_CAVEAT_CONFIGS } = require("boltwall");
Expand Down Expand Up @@ -104,14 +105,29 @@ const app = express();
const lsatRouter = express.Router();
const appRouter = express.Router();

let newInvoice = null;

appRouter.get("/", async function (req, res) {
const invoice = await lnd.makeInvoice({ amount: 100, memo: "a402" });
res.render("index", { invoice: invoice.data, headers: req.headers, user: req.user });
res.render("index", { newInvoice, headers: req.headers, user: req.user });
if (newInvoice) {
newInvoice = null
}
});

// invoice calls

appRouter.post("/invoice", async function (req, res) {
const invoice = await lnd.makeInvoice({ amount: 100, memo: "a402" });
res.json({ payment_request: invoice.data.payment_request });
if (req.body.amount && req.body.name) {
const invoice = await lnd.makeInvoice({ amount: req.body.amount, memo: "a402" });
const newInvoiceObj = {
id: uuid.v4(),
name: req.body.name,
amount: req.body.amount,
data: invoice.data
}
newInvoice = newInvoiceObj;
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

You should not use global variables.
If I understand your code correct, then here a global variable is defined with an invoice object. Then the user is redirected to / on / a template is rendered that uses that global variable and then that global variable is set to null again.

But think about what happens if two or more users use the app at the same time. Then that one global variable is shared among all users and they overwrite each other.

I think generally no global variables should be used. HTTP is stateless and when build web apps we need to respect that.

}
res.redirect('/');
});

appRouter.get("/webamp", function (req, res) {
Expand Down Expand Up @@ -200,5 +216,4 @@ app.use("/", appRouter);

const port = process.env.PORT || 3030;
console.log(`Running on ${port}`);
app.listen(port);

app.listen(port);
9 changes: 7 additions & 2 deletions package.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -12,12 +12,17 @@
"express-session": "^1.17.2",
"node-fetch": "^2.6.1",
"passport": "^0.4.1",
"passport-lnurl-auth": "^1.3.0"
"passport-lnurl-auth": "^1.3.0",
"uuid": "^8.3.2"
},
"scripts": {
"dev": "nodemon fourohtwo",
"test": "echo \"Error: no test specified\" && exit 1"
},
"author": "",
"license": "MIT",
"description": ""
"description": "",
"devDependencies": {
"nodemon": "^2.0.15"
}
}
218 changes: 199 additions & 19 deletions public/css/style.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -4,15 +4,15 @@
margin: 0;
}

body{
body {
width: 100%;
height: 90vh;
position: relative;
}

/* Nav bar */

.nav{
.nav {
display: flex;
justify-content: space-between;
align-items: center;
Expand All @@ -29,11 +29,11 @@ body{
color: white;
}

.nav > img{
.nav>img {
height: 100%;
}

.connect{
.connect {
background-color: orange;
color: white;
font-size: 16px;
Expand All @@ -45,19 +45,19 @@ body{
}


.connect:hover{
.connect:hover {
background-color: rgb(255, 182, 47);
cursor: pointer;
}

/* Playground */
.playground{
.playground {
display: flex;
margin-top: 10vh;
height: 100%;
}

.interaction{
.interaction {
display: flex;
flex-direction: column;
align-items: center;
Expand All @@ -80,15 +80,15 @@ body{
padding: 10px 25px 10px 25px;
}

.webln-sites > h3{
.webln-sites>h3 {
text-align: center;
}

textarea {
height: 40vh;
}

.buttons{
.buttons {
display: flex;
justify-content: space-between;
margin-bottom: 10px;
Expand All @@ -104,58 +104,238 @@ textarea {
border-radius: 5px;
}

.createinvoice{
.pay:hover {
background-color: rgb(255, 182, 47);
cursor: pointer;
}

#createinvoice {
height: 50px;
width: 50%;
background-color: grey;
color: black;
background-color: orange;
color: white;
font-size: 16px;
font-weight: bold;
border-radius: 5px;
}

.pay:hover {
#createinvoice:hover {
background-color: rgb(255, 182, 47);
cursor: pointer;
}

.codedisplay{
.codedisplay {
display: flex;
justify-content: start;
border: solid;
border-width: thin;
padding: 10px
}

.codedisplay > code{
.codedisplay>code {
display: flex;
margin-left: -90px;
}

.console{
.console {
display: flex;
flex-direction: column;
width: 50%;
border-left: solid;
border-width: thin;
padding: 25px
}

.display > ul {
#clear-console{
height: 50px;
margin-top: 10px;
background-color: orange;
color: white;
font-weight: bold;
border: solid;
border-width: thin;
border-radius: 5px;
}

#clear-console:hover{
cursor: pointer;
background-color: rgb(255, 182, 47);
}

.display>ul {
list-style-type: none;
}

.display > ul > li {
.display>ul>li {
border-bottom: solid;
border-bottom-width: thin;
border-color: grey;
padding-bottom: 20px;
margin-top: 20px;
}

.display{
.display {
width: 100%;
height: 80vh;
padding: 0 20px 20px 20px;
border-radius: 10px;
background-color: rgba(192, 225, 238, 0.425);
overflow: scroll;
}

/* Payment Modal */

#payment-modal {
display: none;
position: fixed;
z-index: 1;
left: 0;
top: 0;
width: 100%;
height: 100%;
overflow: auto;
background-color: rgb(0, 0, 0);
background-color: rgba(0, 0, 0, 0.4);
}

.payment-modal-content {
background-color: #fefefe;
margin: 15% auto;
padding: 20px;
border: 1px solid #888;
width: 50%;
}

.payment-modal-header {
display: flex;
justify-content: space-between;
margin-bottom: 20px;
}

.payment-close {
color: #aaa;
float: right;
font-size: 28px;
font-weight: bold;
margin-top: -10px;
}

.invoice-list {
display: flex;
flex-direction: column;
list-style-type: none;
}

.invoice-list-item{
display: flex;
justify-content: space-between;
align-items: center;
height: 50px;
border: solid;
border-width: thin;
border-radius: 5px;
border-color: black;
padding-left: 50px;
padding-right: 50px;
margin-bottom: 10px;
color: white;
font-weight: bold;
background-color: orange;
}

.invoice-list-item:hover{
cursor: pointer;
background-color: rgb(255, 182, 47);
}

.payment-close:hover,
.payment-close:focus {
color: black;
text-decoration: none;
cursor: pointer;
}

/* Invoice Modal */

#invoice-modal {
display: none;
position: fixed;
z-index: 1;
left: 0;
top: 0;
width: 100%;
height: 100%;
overflow: auto;
background-color: rgb(0, 0, 0);
background-color: rgba(0, 0, 0, 0.4);
}

.invoice-modal-content {
background-color: #fefefe;
margin: 15% auto;
padding: 20px;
border: 1px solid #888;
width: 50%;
}

.invoice-modal-header {
display: flex;
justify-content: space-between;
margin-bottom: 20px;
}

.amount{
display: flex;
flex-direction: column;
}

.amount > label {
margin-bottom: 5px;
}

.modal-input {
height: 30px;
padding-left: 5px;
margin-bottom: 25px;
width: 50%;
}

.submit-input {
height: 40px;
width: 15%;
background-color: orange;
color: white;
border-radius: 5px;
}

.submit-input:hover {
cursor: pointer;
background-color: rgb(255, 182, 47);
}

/* Chrome, Safari, Edge, Opera */
.modal-input::-webkit-outer-spin-button,
.modal-input::-webkit-inner-spin-button {
-webkit-appearance: none;
margin: 0;
}

/* Firefox */
.modal-input[type=number] {
-moz-appearance: textfield;
}

.invoice-close {
color: #aaa;
float: right;
font-size: 28px;
font-weight: bold;
margin-top: -10px;
}

.invoice-close:hover,
.invoice-close:focus {
color: black;
text-decoration: none;
cursor: pointer;
}
Loading