From 0de811116fa92e83512b74b7c4ffc448ab2ad804 Mon Sep 17 00:00:00 2001 From: ocknamo Date: Sat, 10 Feb 2024 00:34:54 +0900 Subject: [PATCH 01/39] test import --- index.html | 2 +- lib/console.js | 4 ++++ main.js | 6 +++++- 3 files changed, 10 insertions(+), 2 deletions(-) create mode 100644 lib/console.js diff --git a/index.html b/index.html index 29fd5df..d5e1b8f 100644 --- a/index.html +++ b/index.html @@ -337,7 +337,7 @@ - + \ No newline at end of file diff --git a/lib/console.js b/lib/console.js new file mode 100644 index 0000000..a8d8fbd --- /dev/null +++ b/lib/console.js @@ -0,0 +1,4 @@ +export const consoleLog = (message) => { + console.log(message); +} + diff --git a/main.js b/main.js index ad814f3..4aadfc4 100644 --- a/main.js +++ b/main.js @@ -791,4 +791,8 @@ async function displaySiteVersion() { if (siteVersion) { getDomElementById('siteVersion').textContent = siteVersion; } -} \ No newline at end of file +} + +import { consoleLog } from 'lib/console.js'; + +consoleLog('import test.'); From 23cbce5207fb9a16deb3051dd54914fb80dcfa1e Mon Sep 17 00:00:00 2001 From: ocknamo Date: Sat, 10 Feb 2024 00:36:09 +0900 Subject: [PATCH 02/39] fix path --- main.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/main.js b/main.js index 4aadfc4..81502e5 100644 --- a/main.js +++ b/main.js @@ -793,6 +793,6 @@ async function displaySiteVersion() { } } -import { consoleLog } from 'lib/console.js'; +import { consoleLog } from './lib/console.js'; consoleLog('import test.'); From ce13c982d0e019de74c331153c9b397471382459 Mon Sep 17 00:00:00 2001 From: ocknamo Date: Sat, 10 Feb 2024 00:46:44 +0900 Subject: [PATCH 03/39] fix export function --- main.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/main.js b/main.js index 81502e5..e816439 100644 --- a/main.js +++ b/main.js @@ -166,7 +166,7 @@ function getInputValue(id) { } // 計算 -function calculateValues(inputField) { +export function calculateValues(inputField) { const values = { btc: getInputValue('btc'), sats: getInputValue('sats'), From d4f968e80be837a7856dc2013f5cd675c88154d5 Mon Sep 17 00:00:00 2001 From: ocknamo Date: Sat, 10 Feb 2024 00:55:34 +0900 Subject: [PATCH 04/39] fix global function --- index.html | 10 +++++----- main.js | 6 +++++- 2 files changed, 10 insertions(+), 6 deletions(-) diff --git a/index.html b/index.html index d5e1b8f..a8ebc58 100644 --- a/index.html +++ b/index.html @@ -113,7 +113,7 @@ + oninput="window.satsRate.calculateValues('sats')" pattern="[0-9]+([\.,][0-9]+)?" inputmode="decimal"> @@ -124,7 +124,7 @@ + oninput="window.satsRate.calculateValues('btc')" pattern="[0-9]+([\.,][0-9]+)?" inputmode="decimal"> @@ -135,7 +135,7 @@ + oninput="window.satsRate.calculateValues('jpy')" pattern="[0-9]+([\.,][0-9]+)?" inputmode="decimal"> @@ -146,7 +146,7 @@ + oninput="window.satsRate.calculateValues('usd')" pattern="[0-9]+([\.,][0-9]+)?" inputmode="decimal"> @@ -157,7 +157,7 @@ + oninput="window.satsRate.calculateValues('eur')" pattern="[0-9]+([\.,][0-9]+)?" inputmode="decimal"> diff --git a/main.js b/main.js index e816439..4e64e47 100644 --- a/main.js +++ b/main.js @@ -166,7 +166,7 @@ function getInputValue(id) { } // 計算 -export function calculateValues(inputField) { +function calculateValues(inputField) { const values = { btc: getInputValue('btc'), sats: getInputValue('sats'), @@ -796,3 +796,7 @@ async function displaySiteVersion() { import { consoleLog } from './lib/console.js'; consoleLog('import test.'); + +window.satsRate = { + calculateValues, +} From d0240adf94ab056fc8b8a5a239b012dc9a4d4c68 Mon Sep 17 00:00:00 2001 From: ocknamo Date: Sat, 10 Feb 2024 01:04:16 +0900 Subject: [PATCH 05/39] chore: add comments --- main.js | 2 ++ 1 file changed, 2 insertions(+) diff --git a/main.js b/main.js index 4e64e47..4fe937b 100644 --- a/main.js +++ b/main.js @@ -793,10 +793,12 @@ async function displaySiteVersion() { } } +// モジュールのテスト import { consoleLog } from './lib/console.js'; consoleLog('import test.'); +// html使用する関数をグローバルスコープで使用できるようにwindowに追加する window.satsRate = { calculateValues, } From cf9630d8b94bac7f830ed86dbeecf73b6049d1cd Mon Sep 17 00:00:00 2001 From: ocknamo Date: Mon, 12 Feb 2024 00:42:24 +0900 Subject: [PATCH 06/39] add pos class --- index.html | 14 ++++++++++++++ lib/console.js | 4 ---- lib/pos.js | 21 +++++++++++++++++++++ main.js | 9 +++++---- 4 files changed, 40 insertions(+), 8 deletions(-) delete mode 100644 lib/console.js create mode 100644 lib/pos.js diff --git a/index.html b/index.html index a8ebc58..731bd8b 100644 --- a/index.html +++ b/index.html @@ -174,6 +174,20 @@ +
+
+ POS +
+ +
+
+ +
+
+
SNSに計算結果を共有 diff --git a/lib/console.js b/lib/console.js deleted file mode 100644 index a8d8fbd..0000000 --- a/lib/console.js +++ /dev/null @@ -1,4 +0,0 @@ -export const consoleLog = (message) => { - console.log(message); -} - diff --git a/lib/pos.js b/lib/pos.js new file mode 100644 index 0000000..37a1407 --- /dev/null +++ b/lib/pos.js @@ -0,0 +1,21 @@ +export class Pos { + _lnAddress = ''; + + initialize() { + // TODO: ローカルストレージからアドレスを取得 + console.info('Pos: initialize POS') + } + + getLnAddress() { + console.info('Pos: get lnAddress') + return this._lnAddress; + } + + setLnAddress(adress) { + console.info('Pos: set lnAddress') + console.info(adress) + // TODO: ローカルストレージにアドレスを保管 + this._lnAddress = adress; + } +} + diff --git a/main.js b/main.js index 4fe937b..c57a66c 100644 --- a/main.js +++ b/main.js @@ -793,12 +793,13 @@ async function displaySiteVersion() { } } -// モジュールのテスト -import { consoleLog } from './lib/console.js'; +import { Pos } from './lib/pos.js'; -consoleLog('import test.'); +const pos = new Pos(); +pos.initialize(); -// html使用する関数をグローバルスコープで使用できるようにwindowに追加する +// index.htmlで使用する関数をグローバルスコープで使用できるようにwindowに追加する window.satsRate = { calculateValues, + pos, } From 34b99f5e98aa53a7bb86f8538aea33d9bf384f91 Mon Sep 17 00:00:00 2001 From: ocknamo Date: Mon, 12 Feb 2024 00:51:58 +0900 Subject: [PATCH 07/39] set address debug chore fix --- index.html | 2 +- lib/pos.js | 11 +++++++---- 2 files changed, 8 insertions(+), 5 deletions(-) diff --git a/index.html b/index.html index 731bd8b..5cdb028 100644 --- a/index.html +++ b/index.html @@ -182,7 +182,7 @@
diff --git a/lib/pos.js b/lib/pos.js index 37a1407..a3fb24c 100644 --- a/lib/pos.js +++ b/lib/pos.js @@ -11,11 +11,14 @@ export class Pos { return this._lnAddress; } - setLnAddress(adress) { - console.info('Pos: set lnAddress') - console.info(adress) + setLnAddress(form) { + console.info('Pos: set lnAddress'); + const formData = new FormData(form); + console.log(formData); + console.log(Object.fromEntries(formData)); + console.log(formData.get('lightning-address')); // TODO: ローカルストレージにアドレスを保管 - this._lnAddress = adress; + this._lnAddress = formData.get('lightning-address'); } } From 21fa6cce8c1b0b2ee6c92101e7d3bff3cb723fcd Mon Sep 17 00:00:00 2001 From: ocknamo Date: Mon, 12 Feb 2024 01:06:02 +0900 Subject: [PATCH 08/39] add localStrage function --- index.html | 2 +- lib/pos.js | 16 +++++++++------- 2 files changed, 10 insertions(+), 8 deletions(-) diff --git a/index.html b/index.html index 5cdb028..4dc496d 100644 --- a/index.html +++ b/index.html @@ -181,7 +181,7 @@
-
-
+
POS
- +
-
+
POS
@@ -186,6 +186,7 @@ +
diff --git a/lib/pos.js b/lib/pos.js index b994146..ff09b56 100644 --- a/lib/pos.js +++ b/lib/pos.js @@ -36,14 +36,18 @@ export class Pos { return; } - const payButton = window.document.getElementById('lightning-pos-box'); + const qrWrapper = window.document.getElementById('lightning-pos-qr-box'); + qrWrapper.innerHTML = ''; const img = document.createElement('img'); img.width = 150; img.height = 150; // FIXME: QRの作成に外部APIを使用するのは危険なので本番で使用するな img.src = `https://api.qrserver.com/v1/create-qr-code/?size=150x150&data=lightning://${this._lnAddress}` - payButton.appendChild(img); + qrWrapper.appendChild(img); + + // TODO: 入力値を固定してLNURLを作成する + // TODO: おそらく別のサービスに切り出すべき. LightningPayServiceなど？ } } From 83dec68a0d4b16c377134f02e8793bca134686d8 Mon Sep 17 00:00:00 2001 From: ocknamo Date: Wed, 14 Feb 2024 00:18:33 +0900 Subject: [PATCH 14/39] LightningAddress class fix import --- index.html | 1 + lib/lightning-address.js | 24 ++++++++++++++++++++++++ lib/pos.js | 40 ++++++++++++++++++++++++++++++---------- 3 files changed, 55 insertions(+), 10 deletions(-) create mode 100644 lib/lightning-address.js diff --git a/index.html b/index.html index b11522e..e2a4053 100644 --- a/index.html +++ b/index.html @@ -182,6 +182,7 @@
diff --git a/lib/lightning-address.js b/lib/lightning-address.js new file mode 100644 index 0000000..7e6e23b --- /dev/null +++ b/lib/lightning-address.js @@ -0,0 +1,24 @@ +export class LightningAddress { + #domain = ''; + #userName = ''; + + data = {}; + + constructor(lightningAddressString) { + const [userName, domain] = lightningAddressString.split('@'); + this.#domain = domain; + this.#userName = userName; + } + + async fetchAddressData() { + if(!this.#domain || !this.#userName) { + return; + } + + fetch(`https://${this.#domain}/.well-known/lnurlp/${this.#userName}`).then(async (res) => { + this.data = await res.json(); + + console.log(this.data); + }); + } +} \ No newline at end of file diff --git a/lib/pos.js b/lib/pos.js index ff09b56..7dc01e1 100644 --- a/lib/pos.js +++ b/lib/pos.js @@ -1,3 +1,5 @@ +import { LightningAddress } from "./lightning-address.js"; + export class Pos { // 定数 localStorageKey = 'POS:LnAddress'; @@ -30,24 +32,42 @@ export class Pos { console.debug(`Pos: set lnAddress: ${this._lnAddress}`); } + getCurrntSatsAmount() { + const satsInput = window.document.getElementById('sats'); + console.info(`Pos: getCurrntSatsAmount: ${satsInput.value}`); + + return satsInput.value || null; + } + // 支払いボタン押下時 - pay() { + async pay() { if(!this._lnAddress) { return; } - const qrWrapper = window.document.getElementById('lightning-pos-qr-box'); - qrWrapper.innerHTML = ''; - const img = document.createElement('img'); - img.width = 150; - img.height = 150; + const amount = this.getCurrntSatsAmount(); + if(!amount) { + return; + } + + this.#showQrCode(); - // FIXME: QRの作成に外部APIを使用するのは危険なので本番で使用するな - img.src = `https://api.qrserver.com/v1/create-qr-code/?size=150x150&data=lightning://${this._lnAddress}` - qrWrapper.appendChild(img); // TODO: 入力値を固定してLNURLを作成する - // TODO: おそらく別のサービスに切り出すべき. LightningPayServiceなど？ + const lightningAddress = new LightningAddress(this._lnAddress); + await lightningAddress.fetchAddressData(); + } + + #showQrCode() { + const qrWrapper = window.document.getElementById('lightning-pos-qr-box'); + qrWrapper.innerHTML = ''; + const img = document.createElement('img'); + img.width = 150; + img.height = 150; + + // FIXME: QRの作成に外部APIを使用するのは危険なので本番で使用するな + img.src = `https://api.qrserver.com/v1/create-qr-code/?size=150x150&data=lightning://${this._lnAddress}` + qrWrapper.appendChild(img); } } From 1978a879c9e89dbcda55b61327cf8955287f69db Mon Sep 17 00:00:00 2001 From: ocknamo Date: Wed, 14 Feb 2024 01:14:31 +0900 Subject: [PATCH 15/39] get invoice from lnaddress chore fix --- lib/lightning-address.js | 29 +++++++++++++++++++++++++---- lib/pos.js | 5 +++++ 2 files changed, 30 insertions(+), 4 deletions(-) diff --git a/lib/lightning-address.js b/lib/lightning-address.js index 7e6e23b..f320fbd 100644 --- a/lib/lightning-address.js +++ b/lib/lightning-address.js @@ -3,6 +3,7 @@ export class LightningAddress { #userName = ''; data = {}; + invoice = {}; constructor(lightningAddressString) { const [userName, domain] = lightningAddressString.split('@'); @@ -15,10 +16,30 @@ export class LightningAddress { return; } - fetch(`https://${this.#domain}/.well-known/lnurlp/${this.#userName}`).then(async (res) => { - this.data = await res.json(); + this.data = await fetch(`https://${this.#domain}/.well-known/lnurlp/${this.#userName}`).then(async (res) => { + return res.json(); + }) - console.log(this.data); - }); + console.info(this.data); + } + + async getInvoice(amount) { + if(!this.data || this.data.status !== 'OK' || this.data.tag !== 'payRequest' || !this.data.callback) { + return; + } + + // 数量のバリデーション + if( amount > this.data.maxSendable && amount < (this.data.minSendable ?? 0)) { + return; + } + + const callbackUrl = new URL(this.data.callback) + callbackUrl.searchParams.append('amount', amount); + + this.invoice = await fetch(callbackUrl).then(async (res) => { + return res.json; + }) + + console.info(this.invoice); } } \ No newline at end of file diff --git a/lib/pos.js b/lib/pos.js index 7dc01e1..3242281 100644 --- a/lib/pos.js +++ b/lib/pos.js @@ -56,6 +56,11 @@ export class Pos { // TODO: 入力値を固定してLNURLを作成する const lightningAddress = new LightningAddress(this._lnAddress); await lightningAddress.fetchAddressData(); + + if(lightningAddress.data.status === 'OK' && lightningAddress.data.payRequest !== 'payRequest') { + console.warn(`Pos: invalid lightningAddress`); + return; + } } #showQrCode() { From 44928f28145d273061ecc136f1d57b323598fc41 Mon Sep 17 00:00:00 2001 From: ocknamo Date: Wed, 14 Feb 2024 01:24:06 +0900 Subject: [PATCH 16/39] feat: get invoice fix get json --- lib/lightning-address.js | 2 +- lib/pos.js | 9 ++++----- 2 files changed, 5 insertions(+), 6 deletions(-) diff --git a/lib/lightning-address.js b/lib/lightning-address.js index f320fbd..7e12374 100644 --- a/lib/lightning-address.js +++ b/lib/lightning-address.js @@ -37,7 +37,7 @@ export class LightningAddress { callbackUrl.searchParams.append('amount', amount); this.invoice = await fetch(callbackUrl).then(async (res) => { - return res.json; + return res.json(); }) console.info(this.invoice); diff --git a/lib/pos.js b/lib/pos.js index 3242281..292b0be 100644 --- a/lib/pos.js +++ b/lib/pos.js @@ -53,14 +53,13 @@ export class Pos { this.#showQrCode(); - // TODO: 入力値を固定してLNURLを作成する + // TODO: 入力値からインボイスを取得する const lightningAddress = new LightningAddress(this._lnAddress); await lightningAddress.fetchAddressData(); - if(lightningAddress.data.status === 'OK' && lightningAddress.data.payRequest !== 'payRequest') { - console.warn(`Pos: invalid lightningAddress`); - return; - } + const invoice = await lightningAddress.getInvoice(); + + console.log(invoice); } #showQrCode() { From 9c2331a76c1a85c58bd227b516f56d96fbeef640 Mon Sep 17 00:00:00 2001 From: ocknamo Date: Wed, 14 Feb 2024 01:32:43 +0900 Subject: [PATCH 17/39] convert millsats --- lib/lightning-address.js | 5 +++++ lib/pos.js | 2 +- 2 files changed, 6 insertions(+), 1 deletion(-) diff --git a/lib/lightning-address.js b/lib/lightning-address.js index 7e12374..0bb9959 100644 --- a/lib/lightning-address.js +++ b/lib/lightning-address.js @@ -23,6 +23,11 @@ export class LightningAddress { console.info(this.data); } + /** + * 入力値の数量でインボイスを生成する + * @param {number} amount ミリサトシ + * @returns void + */ async getInvoice(amount) { if(!this.data || this.data.status !== 'OK' || this.data.tag !== 'payRequest' || !this.data.callback) { return; diff --git a/lib/pos.js b/lib/pos.js index 292b0be..07ba590 100644 --- a/lib/pos.js +++ b/lib/pos.js @@ -57,7 +57,7 @@ export class Pos { const lightningAddress = new LightningAddress(this._lnAddress); await lightningAddress.fetchAddressData(); - const invoice = await lightningAddress.getInvoice(); + const invoice = await lightningAddress.getInvoice(amount * 1000); console.log(invoice); } From 518708600d5ee985ece4372104f02547fbdc9bea Mon Sep 17 00:00:00 2001 From: ocknamo Date: Wed, 14 Feb 2024 01:37:56 +0900 Subject: [PATCH 18/39] show invoice qr fix qr data fix qr size --- lib/lightning-address.js | 5 ++--- lib/pos.js | 20 +++++++++++--------- 2 files changed, 13 insertions(+), 12 deletions(-) diff --git a/lib/lightning-address.js b/lib/lightning-address.js index 0bb9959..1dd8695 100644 --- a/lib/lightning-address.js +++ b/lib/lightning-address.js @@ -3,7 +3,6 @@ export class LightningAddress { #userName = ''; data = {}; - invoice = {}; constructor(lightningAddressString) { const [userName, domain] = lightningAddressString.split('@'); @@ -41,10 +40,10 @@ export class LightningAddress { const callbackUrl = new URL(this.data.callback) callbackUrl.searchParams.append('amount', amount); - this.invoice = await fetch(callbackUrl).then(async (res) => { + const invoice = await fetch(callbackUrl).then(async (res) => { return res.json(); }) - console.info(this.invoice); + return invoice; } } \ No newline at end of file diff --git a/lib/pos.js b/lib/pos.js index 07ba590..9df9221 100644 --- a/lib/pos.js +++ b/lib/pos.js @@ -50,27 +50,29 @@ export class Pos { return; } - this.#showQrCode(); + this.#showQrCode(`lightning://${this._lnAddress}`); // TODO: 入力値からインボイスを取得する - const lightningAddress = new LightningAddress(this._lnAddress); - await lightningAddress.fetchAddressData(); + const lightningAddress = new LightningAddress(this._lnAddress); + await lightningAddress.fetchAddressData(); - const invoice = await lightningAddress.getInvoice(amount * 1000); + const invoice = await lightningAddress.getInvoice(amount * 1000); - console.log(invoice); + console.log(invoice); + // TODO: エラーハンドリングする + this.#showQrCode(invoice.pr); } - #showQrCode() { + #showQrCode(data) { const qrWrapper = window.document.getElementById('lightning-pos-qr-box'); qrWrapper.innerHTML = ''; const img = document.createElement('img'); - img.width = 150; - img.height = 150; + img.width = 300; + img.height = 300; // FIXME: QRの作成に外部APIを使用するのは危険なので本番で使用するな - img.src = `https://api.qrserver.com/v1/create-qr-code/?size=150x150&data=lightning://${this._lnAddress}` + img.src = `https://api.qrserver.com/v1/create-qr-code/?size=150x150&data=${data}` qrWrapper.appendChild(img); } } From 5e43a2bbd25071e97f0efbfe0cdb25df1aa0bf85 Mon Sep 17 00:00:00 2001 From: ocknamo Date: Thu, 15 Feb 2024 00:17:10 +0900 Subject: [PATCH 19/39] feat: dialog debug dialog fix submit dialog --- index.html | 22 +++++++++++++++------- lib/pos.js | 2 -- main.js | 9 +++++++++ 3 files changed, 24 insertions(+), 9 deletions(-) diff --git a/index.html b/index.html index e2a4053..ff55473 100644 --- a/index.html +++ b/index.html @@ -180,13 +180,21 @@

- - - + +
+ +
+ +

+ +

diff --git a/lib/pos.js b/lib/pos.js index 9df9221..5cdc596 100644 --- a/lib/pos.js +++ b/lib/pos.js @@ -52,8 +52,6 @@ export class Pos { this.#showQrCode(`lightning://${this._lnAddress}`); - - // TODO: 入力値からインボイスを取得する const lightningAddress = new LightningAddress(this._lnAddress); await lightningAddress.fetchAddressData(); diff --git a/main.js b/main.js index c57a66c..9cd4b78 100644 --- a/main.js +++ b/main.js @@ -798,6 +798,15 @@ import { Pos } from './lib/pos.js'; const pos = new Pos(); pos.initialize(); +// ライトニングアドレスの変更ダイアログの制御 +const showButton = document.getElementById('show-lightning-address-dialog'); +const lnDialog = document.getElementById('update-lightning-address-dialog'); +// const submitBtn = document.getElementById("lightning-address-submit-button"); + +showButton.addEventListener("click", () => { + lnDialog.showModal(); +}); + // index.htmlで使用する関数をグローバルスコープで使用できるようにwindowに追加する window.satsRate = { calculateValues, From 09bce40b725b27a9b539acac3c07b06ccea6363c Mon Sep 17 00:00:00 2001 From: ocknamo Date: Thu, 15 Feb 2024 02:42:08 +0900 Subject: [PATCH 20/39] use event lisener fix window fix form --- index.html | 6 +++--- main.js | 19 ++++++++++++++++--- 2 files changed, 19 insertions(+), 6 deletions(-) diff --git a/index.html b/index.html index ff55473..037854b 100644 --- a/index.html +++ b/index.html @@ -178,16 +178,16 @@
POS
- +
-
+
diff --git a/main.js b/main.js index 9cd4b78..7f8ae46 100644 --- a/main.js +++ b/main.js @@ -798,17 +798,30 @@ import { Pos } from './lib/pos.js'; const pos = new Pos(); pos.initialize(); +// 支払いインボイスのQRコード表示のためのボタン +const posPayButton = document.getElementById('pos-pay-button'); +posPayButton.addEventListener('click', () => { + pos.pay(); +}); + // ライトニングアドレスの変更ダイアログの制御 const showButton = document.getElementById('show-lightning-address-dialog'); const lnDialog = document.getElementById('update-lightning-address-dialog'); -// const submitBtn = document.getElementById("lightning-address-submit-button"); +const lnDialogSubmitButton = document.getElementById('lightning-address-submit-button'); +const lnAddressForm = document.getElementById('lightning-address-form'); -showButton.addEventListener("click", () => { +showButton.addEventListener('click', () => { lnDialog.showModal(); }); +lnDialogSubmitButton.addEventListener('click', (event) => { + pos.setLnAddress(lnAddressForm) + event.preventDefault(); // フォームを送信しない + lnDialog.close(); +}); + // index.htmlで使用する関数をグローバルスコープで使用できるようにwindowに追加する window.satsRate = { calculateValues, - pos, + pos, // 必要？ } From 2b3f658ea627f78347fd4579fcbe394029a607a0 Mon Sep 17 00:00:00 2001 From: ocknamo Date: Fri, 16 Feb 2024 00:06:33 +0900 Subject: [PATCH 21/39] add LnAddress view --- index.html | 3 ++- lib/lightning-address.js | 20 ++++++++++++++++++++ lib/pos.js | 29 +++++++++-------------------- main.js | 3 +-- 4 files changed, 32 insertions(+), 23 deletions(-) diff --git a/index.html b/index.html index 037854b..49eee8f 100644 --- a/index.html +++ b/index.html @@ -193,7 +193,8 @@

- + +

diff --git a/lib/lightning-address.js b/lib/lightning-address.js index 1dd8695..a129311 100644 --- a/lib/lightning-address.js +++ b/lib/lightning-address.js @@ -1,10 +1,15 @@ export class LightningAddress { + addressView = document.getElementById('lightning-address-output'); + addressInput = window.document.getElementById('lightning-address-input'); + #domain = ''; #userName = ''; + #LightningAddressStr = ''; data = {}; constructor(lightningAddressString) { + this.#LightningAddressStr = lightningAddressString; const [userName, domain] = lightningAddressString.split('@'); this.#domain = domain; this.#userName = userName; @@ -20,6 +25,7 @@ export class LightningAddress { }) console.info(this.data); + return this.data; } /** @@ -46,4 +52,18 @@ export class LightningAddress { return invoice; } + + toString() { + return this.#LightningAddressStr; + } + + hasValidAddress() { + // 修正する + return !!this.#LightningAddressStr; + } + + #updateView() { + this.addressView.value = this.#LightningAddressStr || '未設定' + this.addressInput.value = this.#LightningAddressStr || ''; + } } \ No newline at end of file diff --git a/lib/pos.js b/lib/pos.js index 5cdc596..4e2dc6a 100644 --- a/lib/pos.js +++ b/lib/pos.js @@ -4,32 +4,22 @@ export class Pos { // 定数 localStorageKey = 'POS:LnAddress'; - _lnAddress = ''; - + #lnAddress = new LightningAddress(''); initialize() { console.info('Pos: initialize POS') // ローカルストレージからアドレスを取得 - this._lnAddress = window.localStorage.getItem(this.localStorageKey) ?? ''; - - // ローカルストレージのアドレスをインプットに設定 - const addressInput = window.document.getElementById('lightning-address-input'); - addressInput.value = this._lnAddress; - } - - getLnAddress() { - console.info('Pos: get lnAddress') - return this._lnAddress; + this.#lnAddress = new LightningAddress(window.localStorage.getItem(this.localStorageKey) ?? ''); } setLnAddress(form) { console.info('Pos: setting lnAddress'); const formData = new FormData(form); - this._lnAddress = formData.get('lightning-address'); - window.localStorage.setItem(this.localStorageKey, this._lnAddress); - console.debug(`Pos: set lnAddress: ${this._lnAddress}`); + this.#lnAddress = formData.get('lightning-address'); + window.localStorage.setItem(this.localStorageKey, this.#lnAddress); + console.debug(`Pos: set lnAddress: ${this.#lnAddress}`); } getCurrntSatsAmount() { @@ -41,7 +31,7 @@ export class Pos { // 支払いボタン押下時 async pay() { - if(!this._lnAddress) { + if(!this.#lnAddress.hasValidAddress()) { return; } @@ -50,12 +40,11 @@ export class Pos { return; } - this.#showQrCode(`lightning://${this._lnAddress}`); + this.#showQrCode(`lightning://${this.#lnAddress.toString()}`); - const lightningAddress = new LightningAddress(this._lnAddress); - await lightningAddress.fetchAddressData(); + await this.#lnAddress.fetchAddressData(); - const invoice = await lightningAddress.getInvoice(amount * 1000); + const invoice = await this.#lnAddress.getInvoice(amount * 1000); console.log(invoice); // TODO: エラーハンドリングする diff --git a/main.js b/main.js index 7f8ae46..0b9c5d2 100644 --- a/main.js +++ b/main.js @@ -798,7 +798,7 @@ import { Pos } from './lib/pos.js'; const pos = new Pos(); pos.initialize(); -// 支払いインボイスのQRコード表示のためのボタン +// 支払いインボイスのQRコード表示の制御 const posPayButton = document.getElementById('pos-pay-button'); posPayButton.addEventListener('click', () => { pos.pay(); @@ -823,5 +823,4 @@ lnDialogSubmitButton.addEventListener('click', (event) => { // index.htmlで使用する関数をグローバルスコープで使用できるようにwindowに追加する window.satsRate = { calculateValues, - pos, // 必要？ } From ab36ec219c0ded2f7903fc0c1f21eb679c1200dc Mon Sep 17 00:00:00 2001 From: ocknamo Date: Fri, 16 Feb 2024 01:55:17 +0900 Subject: [PATCH 22/39] feat: address input intaractions --- index.html | 19 ++++++++++++++----- lib/lightning-address.js | 12 ++++++++---- lib/pos.js | 20 +++++++++++++++----- main.js | 11 +++++++++++ styles.css | 16 +++++++++++++++- 5 files changed, 63 insertions(+), 15 deletions(-) diff --git a/index.html b/index.html index 49eee8f..58c3d88 100644 --- a/index.html +++ b/index.html @@ -182,12 +182,21 @@
-
diff --git a/lib/lightning-address.js b/lib/lightning-address.js index 59fc178..ddcc380 100644 --- a/lib/lightning-address.js +++ b/lib/lightning-address.js @@ -29,7 +29,7 @@ export class LightningAddress { return res.json(); }) - console.info(this.data); + console.info(this.data); // Debug; return this.data; } @@ -51,11 +51,9 @@ export class LightningAddress { const callbackUrl = new URL(this.data.callback) callbackUrl.searchParams.append('amount', amount); - const invoice = await fetch(callbackUrl).then(async (res) => { + return fetch(callbackUrl).then(async (res) => { return res.json(); - }) - - return invoice; + }); } toString() { diff --git a/lib/pos.js b/lib/pos.js index adcf89f..b4f3681 100644 --- a/lib/pos.js +++ b/lib/pos.js @@ -7,6 +7,8 @@ export class Pos { // LightningAddressクラスのインスタンス #lnAddress; + #qrWrapper = window.document.getElementById('lightning-pos-qr-box'); + initialize() { console.info('Pos: initialize POS') @@ -24,7 +26,6 @@ export class Pos { if(!this.#lnAddress.hasValidAddress) { console.warn(`Pos: invalid address: ${formData.get('lightning-address')}`); - // TODO: フォームにライトニングアドレスの形式と違うとメッセージ出す return; } @@ -40,7 +41,8 @@ export class Pos { } // 支払いボタン押下時 - async pay() { + async generateInvoice() { + this.#clearQrCode(); if(!this.#lnAddress.hasValidAddress()) { return; } @@ -58,19 +60,26 @@ export class Pos { console.log(invoice); // TODO: エラーハンドリングする + this.#clearQrCode(); this.#showQrCode(invoice.pr); } + clearLnAddress() { + this.#lnAddress = new LightningAddress(''); + } + + #clearQrCode() { + this.#qrWrapper.innerHTML = ''; + } + #showQrCode(data) { - const qrWrapper = window.document.getElementById('lightning-pos-qr-box'); - qrWrapper.innerHTML = ''; const img = document.createElement('img'); img.width = 300; img.height = 300; // FIXME: QRの作成に外部APIを使用するのは危険なので本番で使用するな img.src = `https://api.qrserver.com/v1/create-qr-code/?size=150x150&data=${data}` - qrWrapper.appendChild(img); + this.#qrWrapper.appendChild(img); } } diff --git a/main.js b/main.js index 073be1b..fd313c0 100644 --- a/main.js +++ b/main.js @@ -801,7 +801,7 @@ pos.initialize(); // 支払いインボイスのQRコード表示の制御 const posPayButton = document.getElementById('pos-pay-button'); posPayButton.addEventListener('click', () => { - pos.pay(); + pos.generateInvoice(); }); // ライトニングアドレスの変更ダイアログの制御 @@ -809,16 +809,27 @@ const showButton = document.getElementById('show-lightning-address-dialog'); const lnDialog = document.getElementById('update-lightning-address-dialog'); const lnDialogSubmitButton = document.getElementById('lightning-address-submit-button'); const lnDialogCloseButton = document.getElementById('lightning-address-close-button'); +const lnDialogClearButton = document.getElementById('lightning-address-clear-button'); const lnAddressForm = document.getElementById('lightning-address-form'); +// ダイアログを開く showButton.addEventListener('click', () => { lnDialog.showModal(); }); + +// ダイアログを閉じる lnDialogCloseButton.addEventListener('click', (event) => { event.preventDefault(); // フォームを送信しない lnDialog.close(); }); +// フォームをクリア +lnDialogClearButton.addEventListener('click', (event) => { + event.preventDefault(); // フォームを送信しない + pos.clearLnAddress(); +}); + +// アドレスを設定する lnDialogSubmitButton.addEventListener('click', (event) => { const isValid = lnAddressForm.checkValidity() if(!isValid) { From fa39d05b295bd741ea4ad700e713c9760eecd921 Mon Sep 17 00:00:00 2001 From: ocknamo Date: Sat, 17 Feb 2024 00:26:03 +0900 Subject: [PATCH 24/39] safe string number parse for sats input correct sats amount --- lib/pos.js | 5 +++-- 1 file changed, 3 insertions(+), 2 deletions(-) diff --git a/lib/pos.js b/lib/pos.js index b4f3681..3449fd9 100644 --- a/lib/pos.js +++ b/lib/pos.js @@ -35,9 +35,10 @@ export class Pos { getCurrntSatsAmount() { const satsInput = window.document.getElementById('sats'); - console.info(`Pos: getCurrntSatsAmount: ${satsInput.value}`); + const satsAmount = satsInput.value.replaceAll(',', ''); + console.info(`Pos: getCurrntSatsAmount: ${satsAmount}`); - return satsInput.value || null; + return satsAmount || null; } // 支払いボタン押下時 From 2e7a809c0c26c1ebca3f1b95c723cd9ab6091c71 Mon Sep 17 00:00:00 2001 From: ocknamo Date: Sat, 17 Feb 2024 00:35:05 +0900 Subject: [PATCH 25/39] =?UTF-8?q?=E5=80=A4=E3=81=8C=E5=A4=89=E6=9B=B4?= =?UTF-8?q?=E3=81=95=E3=82=8C=E3=81=9F=E3=82=89=E8=AB=8B=E6=B1=82=E6=9B=B8?= =?UTF-8?q?=E3=81=AF=E5=89=8A=E9=99=A4=E3=81=99=E3=82=8B?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit use input event --- index.html | 2 +- lib/pos.js | 9 +++++++-- 2 files changed, 8 insertions(+), 3 deletions(-) diff --git a/index.html b/index.html index 820e3cf..a06915b 100644 --- a/index.html +++ b/index.html @@ -178,7 +178,7 @@
POS
- +
diff --git a/lib/pos.js b/lib/pos.js index 3449fd9..e1a9dbb 100644 --- a/lib/pos.js +++ b/lib/pos.js @@ -8,12 +8,18 @@ export class Pos { #lnAddress; #qrWrapper = window.document.getElementById('lightning-pos-qr-box'); + #satsInput = window.document.getElementById('sats'); initialize() { console.info('Pos: initialize POS') // ローカルストレージからアドレスを取得 this.#lnAddress = new LightningAddress(window.localStorage.getItem(this.localStorageKey) ?? ''); + + // 値が変更されたら請求書は削除する + this.#satsInput.addEventListener('input', () => { + this.#clearQrCode(); + }); } setLnAddress(form) { @@ -34,8 +40,7 @@ export class Pos { } getCurrntSatsAmount() { - const satsInput = window.document.getElementById('sats'); - const satsAmount = satsInput.value.replaceAll(',', ''); + const satsAmount = this.#satsInput.value.replaceAll(',', ''); console.info(`Pos: getCurrntSatsAmount: ${satsAmount}`); return satsAmount || null; From b257a4f7b9c31ae496bc1723da3bd4cd9fc219be Mon Sep 17 00:00:00 2001 From: ocknamo Date: Sat, 17 Feb 2024 00:52:40 +0900 Subject: [PATCH 26/39] qr-code-styling import from index.html actual data change qr setting debug clear correct handle input event correct input change handling --- index.html | 1 + lib/pos.js | 49 +++++++++++++++++++++++++++++++++++++------------ 2 files changed, 38 insertions(+), 12 deletions(-) diff --git a/index.html b/index.html index a06915b..25d2de6 100644 --- a/index.html +++ b/index.html @@ -372,6 +372,7 @@ + diff --git a/lib/pos.js b/lib/pos.js index e1a9dbb..b829920 100644 --- a/lib/pos.js +++ b/lib/pos.js @@ -9,6 +9,7 @@ export class Pos { #qrWrapper = window.document.getElementById('lightning-pos-qr-box'); #satsInput = window.document.getElementById('sats'); + #otherUnits = ['btc', 'jpy', 'usd', 'eur'] initialize() { console.info('Pos: initialize POS') @@ -17,9 +18,7 @@ export class Pos { this.#lnAddress = new LightningAddress(window.localStorage.getItem(this.localStorageKey) ?? ''); // 値が変更されたら請求書は削除する - this.#satsInput.addEventListener('input', () => { - this.#clearQrCode(); - }); + this.#handleInputChange(); } setLnAddress(form) { @@ -62,10 +61,10 @@ export class Pos { await this.#lnAddress.fetchAddressData(); + // TODO: エラーハンドリングする const invoice = await this.#lnAddress.getInvoice(amount * 1000); - console.log(invoice); - // TODO: エラーハンドリングする + this.#clearQrCode(); this.#showQrCode(invoice.pr); } @@ -75,17 +74,43 @@ export class Pos { } #clearQrCode() { + console.log('Pos: #clearQrCode ') this.#qrWrapper.innerHTML = ''; } #showQrCode(data) { - const img = document.createElement('img'); - img.width = 300; - img.height = 300; - - // FIXME: QRの作成に外部APIを使用するのは危険なので本番で使用するな - img.src = `https://api.qrserver.com/v1/create-qr-code/?size=150x150&data=${data}` - this.#qrWrapper.appendChild(img); + const qrCode = new QRCodeStyling({ + width: 320, + height: 320, + type: "svg", + data, + image: "./images/icon_x192.png", + margin: 8, + dotsOptions: { + color: "#4D4D4D", + type: "rounded" + }, + backgroundOptions: { + color: "#e9ebee", + }, + imageOptions: { + crossOrigin: "anonymous", + margin: 8 + } + }) + qrCode.append(this.#qrWrapper); + } + + #handleInputChange() { + let inputs = this.#otherUnits.map(u => window.document.getElementById(u)) + inputs = [ ...inputs, this.#satsInput ]; + + // どの通貨が変更された場合もQRコードをクリアする + inputs.forEach(input => { + input.addEventListener('input', () => { + this.#clearQrCode(); + }); + }); } } From 96e84568608fa0c1d9d8b43a694cdaeffeca1347 Mon Sep 17 00:00:00 2001 From: ocknamo Date: Sat, 17 Feb 2024 01:48:08 +0900 Subject: [PATCH 27/39] update dialog style --- styles.css | 11 +++++++++-- 1 file changed, 9 insertions(+), 2 deletions(-) diff --git a/styles.css b/styles.css index 3280a75..4cf81f4 100644 --- a/styles.css +++ b/styles.css @@ -641,8 +641,15 @@ input:checked+.slider:before { /* POS機能設定 */ .lightning-address-label { - display: block; margin-top: 1em; + display: flex; + flex-flow: column; + padding: 16px; +} + +.lightning-address-input{ + margin: 1.5em; + height: 2em; } .lightning-address-input:invalid { @@ -650,4 +657,4 @@ input:checked+.slider:before { border: none; outline: 2px solid red; border-radius: 5px; - } \ No newline at end of file +} \ No newline at end of file From 35e9f8adc17c374fcf2b8160770c821b4e6e1422 Mon Sep 17 00:00:00 2001 From: ocknamo Date: Sat, 17 Feb 2024 01:53:01 +0900 Subject: [PATCH 28/39] format --- lib/pos.js | 14 +++++++------- 1 file changed, 7 insertions(+), 7 deletions(-) diff --git a/lib/pos.js b/lib/pos.js index b829920..ce58fe4 100644 --- a/lib/pos.js +++ b/lib/pos.js @@ -1,4 +1,4 @@ -import { LightningAddress } from "./lightning-address.js"; +import { LightningAddress } from './lightning-address.js'; export class Pos { // 定数 @@ -82,19 +82,19 @@ export class Pos { const qrCode = new QRCodeStyling({ width: 320, height: 320, - type: "svg", + type: 'svg', data, - image: "./images/icon_x192.png", + image: './images/icon_x192.png', margin: 8, dotsOptions: { - color: "#4D4D4D", - type: "rounded" + color: '#4D4D4D', + type: 'rounded' }, backgroundOptions: { - color: "#e9ebee", + color: '#e9ebee', }, imageOptions: { - crossOrigin: "anonymous", + crossOrigin: 'anonymous', margin: 8 } }) From b752164c821a344e1d814158b28ad82abcb19c5f Mon Sep 17 00:00:00 2001 From: ocknamo Date: Sat, 17 Feb 2024 22:28:58 +0900 Subject: [PATCH 29/39] emit status OK check --- lib/lightning-address.js | 8 +++++++- 1 file changed, 7 insertions(+), 1 deletion(-) diff --git a/lib/lightning-address.js b/lib/lightning-address.js index ddcc380..413b856 100644 --- a/lib/lightning-address.js +++ b/lib/lightning-address.js @@ -39,7 +39,13 @@ export class LightningAddress { * @returns void */ async getInvoice(amount) { - if(!this.data || this.data.status !== 'OK' || this.data.tag !== 'payRequest' || !this.data.callback) { + if(!this.data || this.data.tag !== 'payRequest' || !this.data.callback) { + return; + } + + if(this.data.status === 'ERROR') { + // TODO: 仕様上this.data.reasonが存在するはずなのでエラー理由をスローする + return; } From 72a754c295f42842c70f6416d510b4bbdf375b3a Mon Sep 17 00:00:00 2001 From: ocknamo Date: Tue, 20 Feb 2024 21:50:05 +0900 Subject: [PATCH 30/39] clear local storage with clear ln address --- index.html | 6 +++--- lib/pos.js | 2 ++ 2 files changed, 5 insertions(+), 3 deletions(-) diff --git a/index.html b/index.html index 25d2de6..2035c16 100644 --- a/index.html +++ b/index.html @@ -182,7 +182,7 @@
-

- +

diff --git a/styles.css b/styles.css index fff7d88..f0f1723 100644 --- a/styles.css +++ b/styles.css @@ -657,7 +657,16 @@ input:checked+.slider:before { border-radius: 6px; height: 42px; line-height: 42px; - padding: 0; + padding: 0 1em; +} + +.pos .setting-btn { + border: none; + background: none; +} + +.pos svg { + color: var(--svg-color); } .lightning-address-label { From 2eb3511b0d307800471fc7ebbb0edf7bb1a19087 Mon Sep 17 00:00:00 2001 From: ocknamo Date: Mon, 26 Feb 2024 02:06:57 +0900 Subject: [PATCH 36/39] update button style update button style 2 update button style 3 update button style 4 --- index.html | 3 +-- styles.css | 9 ++++++++- 2 files changed, 9 insertions(+), 3 deletions(-) diff --git a/index.html b/index.html index a09a71c..8cf589b 100644 --- a/index.html +++ b/index.html @@ -179,7 +179,6 @@ POS
-
@@ -204,7 +203,7 @@ -

+