From d608c466c30019c4cc7d038f2308ac0e5b204841 Mon Sep 17 00:00:00 2001
From: Adam Soltys <asoltys@gmail.com>
Date: Thu, 3 Nov 2022 14:00:14 -0700
Subject: invoice requests

---
 src/components/Qr.svelte                           | 73 ++--------------------
 src/routes/(app)/[username]/+page.svelte           | 40 ++++++------
 .../(app)/[username]/settings/+page.server.js      | 14 ++++-
 src/routes/(app)/invoice/[id]/+page.svelte         | 10 +--
 src/routes/(app)/invoice/[id]/paid/+page.svelte    |  4 +-
 src/routes/(app)/send/[uuid=uuid]/+page.svelte     |  8 ++-
 src/routes/(app)/sent/+page.svelte                 |  4 +-
 7 files changed, 49 insertions(+), 104 deletions(-)

(limited to 'src')

diff --git a/src/components/Qr.svelte b/src/components/Qr.svelte
index e07906a5..952a905f 100644
--- a/src/components/Qr.svelte
+++ b/src/components/Qr.svelte
@@ -1,72 +1,9 @@
 <script>
-	import { fade } from 'svelte/transition';
 	import screenfull from 'screenfull';
-	import { browser } from '$app/environment';
-	import { onMount, tick } from 'svelte';
-	import { copy } from '$lib/utils';
-
-	export let image, text, qr, fullQr, full;
-
-	let toggle = async () => {
-		full = !full;
-		await tick();
-		screenfull.toggle(fullQr.firstChild);
-	};
-
-	let opts = {
-		type: 'canvas',
-		backgroundOptions: {
-			color: 'rgba(0, 0, 0, 0)'
-		},
-		imageOptions: {
-			hideBackgroundDots: false
-		}
-	};
-
-	let mask = false;
-	$: update(text);
-	let update = async (text, fullscreen) => {
-		mask = true;
-		if (!(browser && text)) return;
-		let { default: QRCodeStyling } = await import('qr-code-styling');
-
-		opts.data = text;
-		opts.height = opts.width = 300;
-		const qrCode = new QRCodeStyling(opts);
-
-		opts.height = opts.width = Math.min(window.innerWidth, window.innerHeight);
-		const fullQrCode = new QRCodeStyling(opts);
-
-		while (qr && qr.firstChild) qr.removeChild(qr.lastChild);
-		qrCode.append(qr);
-
-		while (fullQr && fullQr.firstChild) fullQr.removeChild(fullQr.lastChild);
-		fullQrCode.append(fullQr);
-		mask = false;
-	};
+	export let src;
+	let qr;
 </script>
 
-{#if mask}
-	<div class="absolute bg-white w-[300px] h-[300px] t-0 l-0 z-10" out:fade />
-{/if}
-
-<div
-	bind:this={qr}
-	on:click={toggle}
-	on:keydown={toggle}
-	class:hidden={full}
-	class="relative overflow-visible"
-/>
-<div bind:this={fullQr} on:click={toggle} on:keydown={toggle} class:hidden={!full} />
-
-<style>
-	div {
-		@apply w-[300px]
-      h-[300px]
-      rounded-3xl
-      justify-center
-      items-center
-      cursor-pointer
-      mx-auto;
-	}
-</style>
+<div class="w-80 mx-auto my-5 cursor-pointer" bind:this={qr} on:click={() => screenfull.toggle(qr)} on:keydown={() => screenfull.toggle(qr)}>
+	<img {src} class="mx-auto" />
+</div>
diff --git a/src/routes/(app)/[username]/+page.svelte b/src/routes/(app)/[username]/+page.svelte
index 78e9a9d3..6bab769b 100644
--- a/src/routes/(app)/[username]/+page.svelte
+++ b/src/routes/(app)/[username]/+page.svelte
@@ -44,23 +44,19 @@
 			{subject.address && subject.address !== 'null' ? subject.address : ''}
 		</p>
 
-		<div class="flex gap-2">
-			<button
-				class="border rounded-full py-2 w-28 font-semibold flex justify-center items-center text-sm"
-				on:click={() => (followed = !followed)}
-				><Icon icon={followed ? 'minus' : 'plus'} style="mr-1" />
-				{$t('user.' + (followed ? 'following' : 'follow'))}
-			</button>
+    <div class="menu">
+		<button on:click={() => (followed = !followed)}>
+			{$t('user.' + (followed ? 'following' : 'follow'))}
+		</button>
 
-			<a href={`/${subject.username}/receive`}>
-				<button
-					class="border rounded-full py-2 w-28 font-semibold flex justify-center items-center text-sm"
-				>
-					<Icon icon="send" style="mr-1" />
-					Pay
-				</button>
-			</a>
-		</div>
+		<a href={`/${subject.username}/receive`}>
+			<button> Pay </button>
+		</a>
+
+		<a href={`/${subject.username}/request`}>
+			<button> Request invoice </button>
+		</a>
+    </div>
 	</div>
 
 	<div class="space-y-5 md:mt-20 mx-auto w-[350px]">
@@ -70,9 +66,9 @@
 			class="cursor-pointer w-[292px] md:w-[342px] h-[342px] border border-lightgrey rounded-3xl flex p-5 justify-center items-center relative mx-auto"
 		/>
 
-		<div class="bg-primary font-semibold rounded-xl text-sm p-3 flex justify-between items-center">
-			<span class="mx-auto">{lightningAddress}</span>
-			<button class="hover:opacity-80" on:click={() => copy(lightningAddress)}>
+		<div class="bg-primary font-semibold rounded-xl text-sm p-3 flex">
+			<div class="my-auto">{lightningAddress}</div>
+			<button class="ml-auto hover:opacity-80" on:click={() => copy(lightningAddress)}>
 				<Icon icon="copy" style="ml-2" />
 			</button>
 		</div>
@@ -86,3 +82,9 @@
 		</p>
 	</div>
 </div>
+
+<style>
+	.menu button {
+		@apply w-full mt-2 bg-primary text-black hover:bg-black hover:text-white font-semibold py-5 px-7 rounded-2xl;
+	}
+</style>
diff --git a/src/routes/(app)/[username]/settings/+page.server.js b/src/routes/(app)/[username]/settings/+page.server.js
index ae7e0a78..bf5661f6 100644
--- a/src/routes/(app)/[username]/settings/+page.server.js
+++ b/src/routes/(app)/[username]/settings/+page.server.js
@@ -1,12 +1,22 @@
 import { invalid } from '@sveltejs/kit';
 import { auth, get, post } from '$lib/utils';
+import Qr from 'qrcode-base64';
+
+export async function load({ locals: { user } }) {
+	return {
+		otpQr: Qr.drawImg(
+			`otpauth://totp/coinos:${user.username}?secret=${user.otpsecret}&period=30&digits=6&algorithm=SHA1&issuer=coinos`,
+			{ size: 600 }
+		)
+	};
+}
 
 export const actions = {
-	default: async ({ cookies, request }) => {
+	default: async ({ cookies, locals, request }) => {
 		let form = Object.fromEntries(await request.formData());
 
 		let user = {
-			...(await get('/me', auth(cookies))),
+			...locals.user,
 			...form
 		};
 
diff --git a/src/routes/(app)/invoice/[id]/+page.svelte b/src/routes/(app)/invoice/[id]/+page.svelte
index 98bde2ac..f24ca590 100644
--- a/src/routes/(app)/invoice/[id]/+page.svelte
+++ b/src/routes/(app)/invoice/[id]/+page.svelte
@@ -7,7 +7,6 @@
 	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);
@@ -22,7 +21,6 @@
 		user: { username, currency }
 	} = invoice;
 
-	let qr;
 	let tipPercent = 0;
 
 	let refresh = (data) => {
@@ -72,13 +70,7 @@
 				></span
 			>
 
-			<div
-				class="w-80 mx-auto my-5 cursor-pointer"
-				bind:this={qr}
-				on:click={() => screenfull.toggle(qr)}
-			>
-				<img {src} class="mx-auto" />
-			</div>
+      <Qr {src} />
 
 			<div class="mb-10">
 				<button
diff --git a/src/routes/(app)/invoice/[id]/paid/+page.svelte b/src/routes/(app)/invoice/[id]/paid/+page.svelte
index d619b7ff..d044a626 100644
--- a/src/routes/(app)/invoice/[id]/paid/+page.svelte
+++ b/src/routes/(app)/invoice/[id]/paid/+page.svelte
@@ -4,7 +4,7 @@
 	import { toast } from '@zerodevx/svelte-toast';
 	import { browser } from '$app/environment';
 	import { t } from '$lib/translations';
-	import { f, s, sats } from '$lib/utils';
+	import { f, s, sat, sats } from '$lib/utils';
 	import { goto } from '$app/navigation';
 	import { invoices } from '$lib/store';
 
@@ -30,7 +30,7 @@
 	<h2 class="text-2xl md:text-3xl font-semibold">
 		{f(amountFiat, invoice.currency)}
 	</h2>
-	<h3 class="text-secondary md:text-lg mb-6 mt-1">({s(invoice.amount)} SAT)</h3>
+	<h3 class="text-secondary md:text-lg mb-6 mt-1">{sat(invoice.amount)}</h3>
 	<button
 		class="bg-black text-white rounded-2xl w-20 py-3 font-bold hover:opacity-80"
 		on:click={handleDoneClick}
diff --git a/src/routes/(app)/send/[uuid=uuid]/+page.svelte b/src/routes/(app)/send/[uuid=uuid]/+page.svelte
index 73712f71..b5a1593a 100644
--- a/src/routes/(app)/send/[uuid=uuid]/+page.svelte
+++ b/src/routes/(app)/send/[uuid=uuid]/+page.svelte
@@ -2,7 +2,7 @@
 	import { goto } from '$app/navigation';
 	import { pin, selectedRate } from '$lib/store';
 	import { enhance } from '$app/forms';
-	import { Icon, Numpad, Spinner } from '$comp';
+	import { Avatar, Icon, Numpad, Spinner } from '$comp';
 	import { page } from '$app/stores';
 	import { back, f, s, sats } from '$lib/utils';
 	export let data;
@@ -61,7 +61,11 @@
 			</p>
 
 			<h1 class="text-xl md:text-2xl text-secondary mb-2">to</h1>
-			<p class="text-6xl break-words">{recipient.username}</p>
+
+			<div class="flex p-1 gap-2 justify-center">
+				<Avatar user={recipient} size={'20'} />
+				<p class="text-4xl break-words my-auto">{recipient.username}</p>
+			</div>
 		</div>
 	{:else}
 		<Numpad bind:amount={a} bind:amountFiat={af} {currency} bind:fiat />
diff --git a/src/routes/(app)/sent/+page.svelte b/src/routes/(app)/sent/+page.svelte
index 5c2301fa..4b73e651 100644
--- a/src/routes/(app)/sent/+page.svelte
+++ b/src/routes/(app)/sent/+page.svelte
@@ -1,5 +1,5 @@
 <script>
-	import { f, s, sats } from '$lib/utils';
+	import { f, s, sat, sats } from '$lib/utils';
 	import { scale } from 'svelte/transition';
 	import { Icon } from '$comp';
 	import { toast } from '@zerodevx/svelte-toast';
@@ -25,7 +25,7 @@
 	<h2 class="text-2xl md:text-3xl font-semibold">
 		{f(fiat, user.currency)}
 	</h2>
-	<h3 class="text-secondary md:text-lg mb-6 mt-1">({s(amount)} SAT)</h3>
+	<h3 class="text-secondary md:text-lg mb-6 mt-1">{sat(amount)}</h3>
 	<a href={`/${user.username}/transactions`}>
 		<button class="bg-black text-white rounded-2xl w-20 py-3 font-bold hover:opacity-80">
 			{$t('invoice.done')}
-- 
cgit v1.2.3