From 363f1b23d00ec8ec1e4d6b66afa2b28f87e45902 Mon Sep 17 00:00:00 2001 From: Adam Soltys Date: Mon, 31 Oct 2022 23:15:37 -0700 Subject: server side qr --- package.json | 1 + pnpm-lock.yaml | 52 ++++++++++---- src/lib/invoice.js | 2 +- src/routes/invoice/[id]/+layout.server.js | 10 ++- src/routes/invoice/[id]/+page.svelte | 110 ++++++++++++++++-------------- 5 files changed, 106 insertions(+), 69 deletions(-) diff --git a/package.json b/package.json index b00befb7..4f99bb9b 100644 --- a/package.json +++ b/package.json @@ -25,6 +25,7 @@ "prettier-plugin-svelte": "^2.8.0", "qr-code-styling": "1.6.0-rc.1", "qr-scanner": "^1.4.1", + "qrcode-svg": "^1.1.0", "screenfull": "^6.0.2", "svelte": "^3.52.0", "svelte-outclick": "^3.2.0", diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml index 7c621b24..4d90a1b4 100644 --- a/pnpm-lock.yaml +++ b/pnpm-lock.yaml @@ -16,6 +16,7 @@ specifiers: prettier-plugin-svelte: ^2.8.0 qr-code-styling: 1.6.0-rc.1 qr-scanner: ^1.4.1 + qrcode-svg: ^1.1.0 screenfull: ^6.0.2 svelte: ^3.52.0 svelte-outclick: ^3.2.0 @@ -26,7 +27,7 @@ specifiers: vite: ^3.1.8 devDependencies: - '@sveltejs/adapter-node': 1.0.0-next.99 + '@sveltejs/adapter-node': 1.0.0-next.100 '@sveltejs/kit': 1.0.0-next.516_svelte@3.52.0+vite@3.1.8 '@zerodevx/svelte-toast': 0.7.2 autoprefixer: 10.4.12_postcss@8.4.18 @@ -41,6 +42,7 @@ devDependencies: prettier-plugin-svelte: 2.8.0_lrllcp5xtrkmmdzifit4hd52ze qr-code-styling: 1.6.0-rc.1 qr-scanner: 1.4.1 + qrcode-svg: 1.1.0 screenfull: 6.0.2 svelte: 3.52.0 svelte-outclick: 3.2.0 @@ -95,8 +97,8 @@ packages: resolution: {integrity: sha512-a5Sab1C4/icpTZVzZc5Ghpz88yQtGOyNqYXcZgOssB2uuAr+wF/MvN6bgtW32q7HHrvBki+BsZ0OuNv6EV3K9g==} dev: true - /@rollup/plugin-commonjs/23.0.0_rollup@2.79.1: - resolution: {integrity: sha512-JbrTRyDNtLQj/rhl7RFUuYXwQ2fac+33oLDAu2k++WD95zweyo28UAomLVA0JMGx4vmCa7Nw4T6k/1F6lelExg==} + /@rollup/plugin-commonjs/23.0.2_rollup@2.79.1: + resolution: {integrity: sha512-e9ThuiRf93YlVxc4qNIurvv+Hp9dnD+4PjOqQs5vAYfcZ3+AXSrcdzXnVjWxcGQOa6KGJFcRZyUI3ktWLavFjg==} engines: {node: '>=14.0.0'} peerDependencies: rollup: ^2.68.0||^3.0.0 @@ -104,7 +106,7 @@ packages: rollup: optional: true dependencies: - '@rollup/pluginutils': 4.2.1 + '@rollup/pluginutils': 5.0.2_rollup@2.79.1 commondir: 1.0.1 estree-walker: 2.0.2 glob: 8.0.3 @@ -113,8 +115,8 @@ packages: rollup: 2.79.1 dev: true - /@rollup/plugin-json/5.0.0_rollup@2.79.1: - resolution: {integrity: sha512-LsWDA5wJs/ggzakVuKQhZo7HPRcQZgBa3jWIVxQSFxaRToUGNi8ZBh3+k/gQ+1eInVYJgn4WBRCUkmoDrmmGzw==} + /@rollup/plugin-json/5.0.1_rollup@2.79.1: + resolution: {integrity: sha512-QCwhZZLvM8nRcTHyR1vOgyTMiAnjiNj1ebD/BMRvbO1oc/z14lZH6PfxXeegee2B6mky/u9fia4fxRM4TqrUaw==} engines: {node: '>=14.0.0'} peerDependencies: rollup: ^1.20.0||^2.0.0||^3.0.0 @@ -122,12 +124,12 @@ packages: rollup: optional: true dependencies: - '@rollup/pluginutils': 4.2.1 + '@rollup/pluginutils': 5.0.2_rollup@2.79.1 rollup: 2.79.1 dev: true - /@rollup/plugin-node-resolve/15.0.0_rollup@2.79.1: - resolution: {integrity: sha512-iwJbzfTzlzDDQcGmkS7EkCKwe2kSkdBrjX87Fy/KrNjr6UNnLpod0t6X66e502LRe5JJCA4FFqrEscWPnZAkig==} + /@rollup/plugin-node-resolve/15.0.1_rollup@2.79.1: + resolution: {integrity: sha512-ReY88T7JhJjeRVbfCyNj+NXAG3IIsVMsX9b5/9jC98dRP8/yxlZdz7mHZbHk5zHr24wZZICS5AcXsFZAXYUQEg==} engines: {node: '>=14.0.0'} peerDependencies: rollup: ^2.78.0||^3.0.0 @@ -135,7 +137,7 @@ packages: rollup: optional: true dependencies: - '@rollup/pluginutils': 4.2.1 + '@rollup/pluginutils': 5.0.2_rollup@2.79.1 '@types/resolve': 1.20.2 deepmerge: 4.2.2 is-builtin-module: 3.2.0 @@ -152,12 +154,27 @@ packages: picomatch: 2.3.1 dev: true - /@sveltejs/adapter-node/1.0.0-next.99: - resolution: {integrity: sha512-HnAuHtx0kWJrcsQ58YYFJca7FbAHvcuPL4CCEW9XDLTLHnZTwrwcB8eY//NSfxdJeVxf9JroXI3exnY4fYWEtQ==} + /@rollup/pluginutils/5.0.2_rollup@2.79.1: + resolution: {integrity: sha512-pTd9rIsP92h+B6wWwFbW8RkZv4hiR/xKsqre4SIuAOaOEQRxi0lqLke9k2/7WegC85GgUs9pjmOjCUi3In4vwA==} + engines: {node: '>=14.0.0'} + peerDependencies: + rollup: ^1.20.0||^2.0.0||^3.0.0 + peerDependenciesMeta: + rollup: + optional: true dependencies: - '@rollup/plugin-commonjs': 23.0.0_rollup@2.79.1 - '@rollup/plugin-json': 5.0.0_rollup@2.79.1 - '@rollup/plugin-node-resolve': 15.0.0_rollup@2.79.1 + '@types/estree': 1.0.0 + estree-walker: 2.0.2 + picomatch: 2.3.1 + rollup: 2.79.1 + dev: true + + /@sveltejs/adapter-node/1.0.0-next.100: + resolution: {integrity: sha512-XtyweoRcrnD3T/hkqv4XAlhU24VM6/QiUqR2mfs7I3Ji/KrBKWSM2GCpSptnfk3mELK193sJ0T4m6Z3x8uf47w==} + dependencies: + '@rollup/plugin-commonjs': 23.0.2_rollup@2.79.1 + '@rollup/plugin-json': 5.0.1_rollup@2.79.1 + '@rollup/plugin-node-resolve': 15.0.1_rollup@2.79.1 rollup: 2.79.1 dev: true @@ -1299,6 +1316,11 @@ packages: resolution: {integrity: sha512-HM7yY8O2ilqhmULxGMpcHSF1EhJJ9yBj8gvDEuZ6M+KGJ0YY2hKpnXvRD+hZPLrDVck3ExIGhmPtSdcjC+guuw==} dev: true + /qrcode-svg/1.1.0: + resolution: {integrity: sha512-XyQCIXux1zEIA3NPb0AeR8UMYvXZzWEhgdBgBjH9gO7M48H9uoHzviNz8pXw3UzrAcxRRRn9gxHewAVK7bn9qw==} + hasBin: true + dev: true + /qs/6.11.0: resolution: {integrity: sha512-MvjoMCJwEarSbUYk5O+nmoSzSutSsTwF85zcHPQ9OrlFoZOYIjaqBAJIqIXjptyD5vThxGq52Xu/MaJzRkIk4Q==} engines: {node: '>=0.6'} diff --git a/src/lib/invoice.js b/src/lib/invoice.js index e8a5f615..b1330f89 100644 --- a/src/lib/invoice.js +++ b/src/lib/invoice.js @@ -16,7 +16,7 @@ export default async ({ cookies, request }) => { let user = { username: form.get('username') }; - let { uuid } = await post('/invoice', { invoice, user }, auth(cookies)); + let { uuid }= await post('/invoice', { invoice, user }, auth(cookies)); if (invoice.prompt) { throw redirect(307, `/invoice/${uuid}/tip`); diff --git a/src/routes/invoice/[id]/+layout.server.js b/src/routes/invoice/[id]/+layout.server.js index e123c7d7..690deda0 100644 --- a/src/routes/invoice/[id]/+layout.server.js +++ b/src/routes/invoice/[id]/+layout.server.js @@ -1,6 +1,14 @@ +import Qr from 'qrcode-svg'; import { get } from '$lib/utils'; export async function load({ params }) { let { id } = params; - return { id, invoice: await get(`/invoice?uuid=${id}`) }; + let invoice = await get(`/invoice?uuid=${id}`); + let svg = new Qr({ + content: invoice.text, + join: true, + container: 'svg-viewbox' + }).svg(); + + return { id, invoice, svg }; } diff --git a/src/routes/invoice/[id]/+page.svelte b/src/routes/invoice/[id]/+page.svelte index 17eac2f5..7a888d5c 100644 --- a/src/routes/invoice/[id]/+page.svelte +++ b/src/routes/invoice/[id]/+page.svelte @@ -6,10 +6,11 @@ import { Icon, Heart, Image, Qr } from '$comp'; import { goto } from '$app/navigation'; import { t } from '$lib/translations'; + import screenfull from 'screenfull'; export let data; $: refresh(data); - let { invoice, id, user } = data; + let { invoice, id, user, svg } = data; let { amount, rate, @@ -23,8 +24,6 @@ let qr; let tipPercent = 0; - let fullscreen; - let refresh = (data) => { ({ invoice, id } = data); ({ @@ -47,65 +46,72 @@ $: amountFiat = parseFloat(((amount * rate) / sats).toFixed(2)); $: tipAmount = ((tip * rate) / sats).toFixed(2); + + let full = () => { + screenfull.toggle(qr); + let el = document.getElementById('qr'); + el.style.width = '300px'; + console.log('yes', el); + }; -
- + -
-
-
- Scan to pay {username} +
+
+
+ Scan to pay {username} - - -
- +
+
+ {@html svg}
+
-
- {#if invoice.tip} -
- {$t('invoice.invoice')} - {f(amountFiat, currency)} - {`(${s(amount)} SAT)`} -
+
+ +
-
- {$t('invoice.tip')} - {f(tipAmount, currency)} - {`(${s(tip)} SAT)`} -
- {/if} +
+ {#if invoice.tip} +
+ {$t('invoice.invoice')} + {f(amountFiat, currency)} + {`(${s(amount)} SAT)`} +
-
- {$t('invoice.total')} - {f(amountFiat + parseFloat(tipAmount), currency)} - {`(${s(tip + amount)} SAT)`} + {$t('invoice.tip')} + {f(tipAmount, currency)} + {`(${s(tip)} SAT)`}
+ {/if} + +
+ {$t('invoice.total')} + {f(amountFiat + parseFloat(tipAmount), currency)} + {`(${s(tip + amount)} SAT)`}
-- cgit v1.2.3