From 2af4a989092ae63eb9ae38ac35982b6bba2e917c Mon Sep 17 00:00:00 2001
From: Adam Soltys <asoltys@gmail.com>
Date: Thu, 3 Nov 2022 01:28:01 -0700
Subject: show who payments are with

---
 src/routes/(app)/+layout.svelte                    |  2 -
 src/routes/(app)/[username]/+page.svelte           |  7 ++-
 .../[username]/transactions/[...page]/+page.svelte | 60 ++++++++++------------
 src/routes/(app)/invoice/[id]/+layout.server.js    | 10 ++--
 src/routes/(app)/invoice/[id]/+page.svelte         | 51 ++++++++----------
 src/routes/(app)/invoice/[id]/tip/+page.svelte     | 15 +++---
 src/routes/(app)/locations/+server.js              |  2 +-
 src/routes/+page.server.js                         |  4 +-
 8 files changed, 67 insertions(+), 84 deletions(-)

(limited to 'src/routes')

diff --git a/src/routes/(app)/+layout.svelte b/src/routes/(app)/+layout.svelte
index 10b16449..f6d79788 100644
--- a/src/routes/(app)/+layout.svelte
+++ b/src/routes/(app)/+layout.svelte
@@ -24,8 +24,6 @@
 		$user = u;
 	};
 
-	$: $page.url.searchParams.get('logout') && close();
-
 	$: $selectedRate = r * (rates[u?.currency || 'USD'] / rates.USD);
 
 	onMount(() => {
diff --git a/src/routes/(app)/[username]/+page.svelte b/src/routes/(app)/[username]/+page.svelte
index fb22c828..78e9a9d3 100644
--- a/src/routes/(app)/[username]/+page.svelte
+++ b/src/routes/(app)/[username]/+page.svelte
@@ -77,8 +77,11 @@
 			</button>
 		</div>
 		<p class="text-center">
-			This is a <a href="https://lightningaddress.com/" class="underline" target="_blank" rel="noreferrer"
-				>lightning address</a
+			This is a <a
+				href="https://lightningaddress.com/"
+				class="underline"
+				target="_blank"
+				rel="noreferrer">lightning address</a
 			>
 		</p>
 	</div>
diff --git a/src/routes/(app)/[username]/transactions/[...page]/+page.svelte b/src/routes/(app)/[username]/transactions/[...page]/+page.svelte
index dd58509a..efecbaf2 100644
--- a/src/routes/(app)/[username]/transactions/[...page]/+page.svelte
+++ b/src/routes/(app)/[username]/transactions/[...page]/+page.svelte
@@ -1,10 +1,10 @@
 <script>
-	import { Icon } from '$comp';
+	import { Avatar, Icon } from '$comp';
 	import { onMount } from 'svelte';
-	import { formatDistance, parseISO } from 'date-fns';
+	import { format, parseISO } from 'date-fns';
 	import { newPayment } from '$lib/store';
 	import { t } from '$lib/translations';
-	import { f, s, sats } from '$lib/utils';
+	import { f, s, sat, sats } from '$lib/utils';
 	import { page } from '$app/stores';
 	import { differenceInDays, getUnixTime, sub } from 'date-fns';
 	import { goto } from '$app/navigation';
@@ -15,7 +15,7 @@
 	let change = ({ target: { value } }) => goto(value);
 
 	let presets = [
-		{ title: 'Today', start: null, end: null },
+		{ title: 'Day', start: sub(new Date(), { days: 1 }), end: null },
 		{ title: 'Week', start: sub(new Date(), { days: 7 }), end: null },
 		{ title: 'Month', start: sub(new Date(), { months: 1 }), end: null },
 		{ title: 'All', start: sub(new Date(), { years: 5 }), end: null }
@@ -35,7 +35,6 @@
 	$: $newPayment && invalidate(`/users/${user.username}`);
 
 	$: path = $page.url.pathname.substring(0, $page.url.pathname.lastIndexOf('/'));
-	$: console.log(path);
 
 	let csv = () => {
 		const keys = ['hash', 'updatedAt', 'rate', 'currency', 'amount', 'fee', 'tip'];
@@ -74,16 +73,15 @@
 				{#each presets as { start, end, title }, i}
 					<option
 						selected={selection === i}
-						value={`/${user.username}/transactions/${start ? getUnixTime(start) + '/' : ''}1`}
-						>{title}</option
+						value={`/${user.username}/transactions/${getUnixTime(start) + '/'}1`}>{title}</option
 					>
 				{/each}
 			</select>
-			<div class="hidden md:block flex flex-wrap gap-2">
+			<div class="hidden md:block flex">
 				{#each presets as { start, end, title }, i}
 					<a
 						class:active={selection === i}
-						href={`/${user.username}/transactions/${start ? getUnixTime(start) + '/' : ''}1`}
+						href={`/${user.username}/transactions/${getUnixTime(start) + '/'}1`}
 					>
 						<button class="rounded-full border py-2 px-5 hover:opacity-80 mb-2">
 							<div class="my-auto">{title}</div>
@@ -109,38 +107,36 @@
 			{/if}
 		</div>
 
-		<div class="text-secondary grid grid-cols-3 mb-5">
-			<h2>{$t('user.transactions.AMOUNT')}</h2>
-			<h2 class="text-center" />
-			<h2 class="text-right">{$t('user.transactions.TIME')}</h2>
-		</div>
-
 		<div class="space-y-10">
 			{#if transactions.length}
 				{#each transactions as tx}
 					<div class="grid grid-cols-3 border-b pb-5">
-						<div class="font-bold">
-							<span class="block mb-1"
-								>{tx.amount > 0 ? '+' : ''}{f(tx.amount * (tx.rate / sats), tx.currency)}
-							</span>
-
-							<span class="text-secondary"
-								>{tx.amount > 0 ? '+' : ''}{s(tx.amount)}
-								SAT
-							</span>
+						<div>
+							<div class="mb-1 font-bold">{f(tx.amount * (tx.rate / sats), tx.currency)}</div>
+
+							<span class="text-secondary">{sat(tx.amount)} </span>
 						</div>
 
-						<div class="text-center">
-							<span class="text-secondary"
-								>{$t('user.transactions.' + (tx.amount < 0 ? 'sent' : 'received'))}</span
-							>
+						<div class="flex">
+							{#if tx.with}
+								<a href={`/${tx.with.username}`} class="mx-auto">
+									<div class="flex">
+										<div class="my-auto">
+											<Avatar user={tx.with} size={12} />
+										</div>
+										<div class="my-auto ml-1">{tx.with.username}</div>
+									</div>
+								</a>
+							{/if}
 						</div>
 
 						<div class="text-secondary text-right">
-							{formatDistance(parseISO(tx.createdAt), new Date(), {
-								includeSeconds: true,
-								addSuffix: true
-							})}
+							<div>
+								{format(parseISO(tx.createdAt), 'h:mm aaa')}
+							</div>
+							<div>
+								{format(parseISO(tx.createdAt), 'MMM d')}
+							</div>
 						</div>
 					</div>
 				{/each}
diff --git a/src/routes/(app)/invoice/[id]/+layout.server.js b/src/routes/(app)/invoice/[id]/+layout.server.js
index 690deda0..9df99035 100644
--- a/src/routes/(app)/invoice/[id]/+layout.server.js
+++ b/src/routes/(app)/invoice/[id]/+layout.server.js
@@ -1,14 +1,10 @@
-import Qr from 'qrcode-svg';
+import Qr from 'qrcode-base64';
 import { get } from '$lib/utils';
 
 export async function load({ params }) {
 	let { id } = params;
 	let invoice = await get(`/invoice?uuid=${id}`);
-	let svg = new Qr({
-		content: invoice.text,
-		join: true,
-		container: 'svg-viewbox'
-	}).svg();
+	let src = Qr.drawImg(invoice.text, { size: 600 });
 
-	return { id, invoice, svg };
+	return { id, invoice, src };
 }
diff --git a/src/routes/(app)/invoice/[id]/+page.svelte b/src/routes/(app)/invoice/[id]/+page.svelte
index bb41a116..98bde2ac 100644
--- a/src/routes/(app)/invoice/[id]/+page.svelte
+++ b/src/routes/(app)/invoice/[id]/+page.svelte
@@ -1,6 +1,6 @@
 <script>
 	import { send } from '$lib/socket';
-	import { back, copy, f, get, reverseFormat, s, sats } from '$lib/utils';
+	import { back, copy, f, get, sat, reverseFormat, s, sats } from '$lib/utils';
 	import { onMount, onDestroy } from 'svelte';
 	import { browser } from '$app/environment';
 	import { invoices, last } from '$lib/store';
@@ -11,7 +11,7 @@
 
 	export let data;
 	$: refresh(data);
-	let { invoice, id, user, svg } = data;
+	let { invoice, id, user, src } = data;
 	let {
 		amount,
 		rate,
@@ -48,12 +48,6 @@
 	$: 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';
-	};
-
 	let subbed;
 	onMount(() => {
 		browser &&
@@ -65,10 +59,7 @@
 	});
 </script>
 
-<button
-	class="ml-5 md:ml-20 mt-5 md:mt-10 hover:opacity-80"
-	on:click={back}
->
+<button class="ml-5 md:ml-20 mt-5 md:mt-10 hover:opacity-80" on:click={back}>
 	<Icon icon="arrow-left" style="w-10" />
 </button>
 
@@ -81,10 +72,12 @@
 				></span
 			>
 
-			<div id="qr" class="w-80 mx-auto" bind:this={qr} on:click={full}>
-				<div class="max-w-lg mx-auto">
-					{@html svg}
-				</div>
+			<div
+				class="w-80 mx-auto my-5 cursor-pointer"
+				bind:this={qr}
+				on:click={() => screenfull.toggle(qr)}
+			>
+				<img {src} class="mx-auto" />
 			</div>
 
 			<div class="mb-10">
@@ -99,27 +92,27 @@
 			<div class="px-5 space-y-3 w-80 mx-auto">
 				{#if invoice.tip}
 					<div class="flex justify-between">
-						<span class="font-semibold text-sm">{$t('invoice.invoice')}</span>
-						<span class="font-semibold text-sm"
-							>{f(amountFiat, currency)}
-							<span class="text-secondary font-normal">{`(${s(amount)} SAT)`}</span></span
-						>
+						{$t('invoice.invoice')}
+						<span>
+							{f(amountFiat, currency)}
+							<span class="text-secondary">{`${sat(amount)}`}</span>
+						</span>
 					</div>
 
 					<div class="flex justify-between">
-						<span class="font-semibold text-sm">{$t('invoice.tip')}</span>
-						<span class="font-semibold text-sm"
+						{$t('invoice.tip')}
+						<span
 							>{f(tipAmount, currency)}
-							<span class="text-secondary font-normal">{`(${s(tip)} SAT)`}</span></span
-						>
+							<span class="text-secondary">{`${sat(tip)}`}</span>
+						</span>
 					</div>
 				{/if}
 
-				<div class="flex flex-wrap justify-between">
-					<span class="font-bold mr-1">{$t('invoice.total')}</span>
-					<span class="font-bold"
+				<div class="flex flex-wrap justify-between font-bold">
+					<span class="mr-1">{$t('invoice.total')}</span>
+					<span
 						>{f(amountFiat + parseFloat(tipAmount), currency)}
-						<span class="text-secondary font-normal">{`(${s(tip + amount)} SAT)`}</span></span
+						<span class="text-secondary font-normal">{`${sat(tip + amount)}`}</span></span
 					>
 				</div>
 			</div>
diff --git a/src/routes/(app)/invoice/[id]/tip/+page.svelte b/src/routes/(app)/invoice/[id]/tip/+page.svelte
index 6ea3aae5..b3906010 100644
--- a/src/routes/(app)/invoice/[id]/tip/+page.svelte
+++ b/src/routes/(app)/invoice/[id]/tip/+page.svelte
@@ -1,7 +1,7 @@
 <script>
 	import { browser } from '$app/environment';
 	import { invoices } from '$lib/store';
-	import { back, copy, f, get, reverseFormat, s, sats } from '$lib/utils';
+	import { back, copy, f, sat, get, reverseFormat, s, sats } from '$lib/utils';
 	import { Icon } from '$comp';
 	import { goto } from '$app/navigation';
 	import { t } from '$lib/translations';
@@ -107,10 +107,7 @@
 	$: invoiceAmountFiatFormatted = f(amountFiat, currency);
 </script>
 
-<button
-	class="ml-5 md:ml-20 mt-5 md:mt-10 hover:opacity-80"
-	on:click={back}
->
+<button class="ml-5 md:ml-20 mt-5 md:mt-10 hover:opacity-80" on:click={back}>
 	<Icon icon="arrow-left" style="w-10" />
 </button>
 
@@ -137,7 +134,7 @@
 				on:input={handleSlide}
 			/>
 
-			<div class="flex mb-8 text-sm">
+			<div class="flex mb-8 text-lg">
 				<div>
 					<span class="mr-1">
 						{f(amountFiat, currency)}
@@ -145,9 +142,9 @@
 					</span>
 				</div>
 
-				<div class="ml-auto">
-					{s(amount)}
-					<span class="font-semibold">+{s(tip)} SAT</span>
+				<div class="ml-auto text-lg">
+					{sat(amount)}
+					<span class="font-semibold">+{sat(tip)}</span>
 				</div>
 			</div>
 
diff --git a/src/routes/(app)/locations/+server.js b/src/routes/(app)/locations/+server.js
index 381919ab..87f8975d 100644
--- a/src/routes/(app)/locations/+server.js
+++ b/src/routes/(app)/locations/+server.js
@@ -1,4 +1,4 @@
-import { get } from "$lib/utils";
+import { get } from '$lib/utils';
 import { json } from '@sveltejs/kit';
 
 export async function GET({ fetch, setHeaders }) {
diff --git a/src/routes/+page.server.js b/src/routes/+page.server.js
index 774b4586..4b9e84b0 100644
--- a/src/routes/+page.server.js
+++ b/src/routes/+page.server.js
@@ -1,4 +1,4 @@
-import { get } from "$lib/utils";
+import { get } from '$lib/utils';
 
 export const prerender = true;
-export let load = async () => get("/locations");
+export let load = async () => get('/locations');
-- 
cgit v1.2.3