invoice requests and btc deposits

4 files changed, 58 insertions, 30 deletions

diff --git a/src/routes/(app)/[username]/(profile)/+page.svelte b/src/routes/(app)/[username]/(profile)/+page.svelte
index af191a2b..baab8ba1 100644
--- a/src/routes/(app)/[username]/(profile)/+page.svelte
+++ b/src/routes/(app)/[username]/(profile)/+page.svelte
@@ -1,9 +1,11 @@
 <script>
 	import { Avatar, Balance, Feed } from '$comp';
 	import { t } from '$lib/translations';
+	import { f, sat, sats } from '$lib/utils';
 
 	export let data;
 	let { events, invoices, sent, received, subject, user } = data;
+	console.log(invoices);
 </script>
 
 <div class="flex justify-center lg:justify-start">
@@ -13,28 +15,41 @@
 </div>
 
 <div>
-	<!-- {#each invoice} -->
-	<!-- 	<a href={`/${user.username}/receive/${id}`}> -->
-	<!-- 		<div class="border-b p-2 last:border-b-0 hover:bg-gray-100"> -->
-	<!-- 			<div class="flex"> -->
-	<!-- 				<div> -->
-	<!-- 					<div class="flex"> -->
-	<!-- 						<Avatar user={r} size={20} /> -->
-	<!-- 						<div class="my-auto text-left"> -->
-	<!-- 							<p class="ml-1 text-lg break-words">{r.username}</p> -->
-	<!-- 							<p class="ml-1 text-secondary">{memo}</p> -->
-	<!-- 						</div> -->
-	<!-- 					</div> -->
-	<!-- 				</div> -->
-	<!-- 				<div class="whitespace-nowrap my-auto ml-auto flex gap-2"> -->
-	<!-- 					<button class="rounded-full border py-2 px-4 font-bold hover:opacity-80 w-full" -->
-	<!-- 						>Invoice</button -->
-	<!-- 					> -->
-	<!-- 				</div> -->
-	<!-- 			</div> -->
-	<!-- 		</div> -->
-	<!-- 	</a> -->
-	<!-- {/each} -->
+	{#each invoices as { amount, currency, rate, request: { requester, recipient }, hash }}
+		{@const requested = user.username === requester?.username}
+		<a href={`/${recipient.username}/invoice/${hash}` + (requested ? '/tip' : '')}>
+			<div class="border-b p-2 last:border-b-0 hover:bg-gray-100">
+				<div class="flex gap-2">
+					<div>
+						{#if requested}
+							<div class="flex">
+								<Avatar user={recipient} size={20} />
+								<div class="my-auto text-left">
+									<p class="text-secondary">{$t('payments.invoiceFrom')}</p>
+									<p class="ml-1 text-lg break-words">{recipient.username}</p>
+								</div>
+							</div>
+						{:else}
+							<div class="flex">
+								<Avatar user={requester} size={20} />
+								<div class="my-auto text-left">
+									<p class="text-secondary">{$t('payments.awaiting')}</p>
+									<p class="ml-1 text-lg break-words">{requester.username}</p>
+								</div>
+							</div>
+						{/if}
+					</div>
+					<div class="whitespace-nowrap my-auto ml-auto flex gap-2">
+						<div class="font-bold">
+							{f(amount * (rate / sats), currency)}
+						</div>
+
+						<div class="text-secondary">{sat(amount)}</div>
+					</div>
+				</div>
+			</div>
+		</a>
+	{/each}
 
 	{#each received as { id, invoice, memo, requester: r }}
 		<a href={`/${user.username}/receive/${id}`}>
diff --git a/src/routes/(app)/[username]/invoice/[hash]/+layout.server.js b/src/routes/(app)/[username]/invoice/[hash]/+layout.server.js
index 0f6168e3..b5323d3f 100644
--- a/src/routes/(app)/[username]/invoice/[hash]/+layout.server.js
+++ b/src/routes/(app)/[username]/invoice/[hash]/+layout.server.js
@@ -2,11 +2,16 @@ import Qr from 'qrcode-base64';
 import { get } from '$lib/utils';
 import { redirect } from '@sveltejs/kit';
 
-export async function load({ depends, params, url }) {
+export async function load({ depends, params, url, parent }) {
 	depends('app:invoice');
 
+	let { user } = await parent();
 	let { hash } = params;
 	let invoice = await get(`/invoice/${hash}`);
+
+	if (user && invoice.uid !== user.id && !url.pathname.includes('tip'))
+		throw redirect(307, `/send/invoice/${hash}`);
+
 	let { amount, received } = invoice;
 	amount = parseInt(amount);
 
diff --git a/src/routes/(app)/[username]/invoice/[hash]/+page.svelte b/src/routes/(app)/[username]/invoice/[hash]/+page.svelte
index 6d7e1dda..ad9721e7 100644
--- a/src/routes/(app)/[username]/invoice/[hash]/+page.svelte
+++ b/src/routes/(app)/[username]/invoice/[hash]/+page.svelte
@@ -13,8 +13,8 @@
 	$: refresh(data);
 	let { invoice, id, user, sm, lg } = data;
 	let {
-		address,
 		amount,
+		hash,
 		type,
 		rate,
 		received,
@@ -34,8 +34,8 @@
 	let refresh = (data) => {
 		({ invoice, id } = data);
 		({
-			address,
 			amount,
+			hash,
 			type,
 			rate,
 			received,
@@ -61,8 +61,8 @@
 			});
 	});
 
-	$: link = address ? text : `lightning:${text}`;
-	$: txt = address || text;
+	$: link = type === 'bitcoin' ? text : `lightning:${text}`;
+	$: txt = type === 'bitcoin' ? hash : text;
 
 	let full;
 	let toggle = () => {
@@ -115,8 +115,8 @@
 	{/if}
 
 	<div class="w-full flex justify-center">
-		<button class="flex rounded-full border py-2 px-5 hover:opacity-80" on:click={() => copy(txt)}
-			><Icon icon="copy" style="mr-1" />
+		<button class="flex rounded-full border py-2 px-5 hover:opacity-80" on:click={() => copy(txt)}>
+			<Icon icon="copy" style="mr-1" />
 			<div class="text-secondary">{txt.substr(0, 10)}..{txt.substr(-6)}</div></button
 		>
 	</div>
diff --git a/src/routes/(app)/[username]/receive/[...param]/+page.svelte b/src/routes/(app)/[username]/receive/[...param]/+page.svelte
index 29a0f7a5..99d95be0 100644
--- a/src/routes/(app)/[username]/receive/[...param]/+page.svelte
+++ b/src/routes/(app)/[username]/receive/[...param]/+page.svelte
@@ -1,5 +1,5 @@
 <script>
-	import { Icon, Numpad } from '$comp';
+	import { Icon, Numpad, Toggle } from '$comp';
 	import { t } from '$lib/translations';
 	import { enhance } from '$app/forms';
 	import { page } from '$app/stores';
@@ -16,9 +16,12 @@
 
 	let amount;
 
+	let lightning = true;
 	let { currency, username, prompt } = data.subject;
 	let { user } = data;
 	let submit;
+
+	$: type = lightning ? 'lightning' : 'bitcoin';
 </script>
 
 <form method="POST" class="flex justify-center items-center mt-24 mb-3 px-3" use:enhance>
@@ -43,5 +46,10 @@
 		>
 			{amount ? $t('payments.next') : $t('payments.sendersChoice')}
 		</button>
+
+		<div class="w-full flex justify-center">
+			<span class="font-bold mr-2">{type[0].toUpperCase() + type.substring(1, type.length)}</span>
+			<Toggle id="prompt" checked={lightning} bind:value={lightning} />
+		</div>
 	</div>
 </form>