show who payments are with

14 files changed, 101 insertions, 110 deletions

diff --git a/package.json b/package.json
index 4f99bb9b..aa8d0f29 100644
--- a/package.json
+++ b/package.json
@@ -25,7 +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",
+		"qrcode-base64": "^1.0.1",
 		"screenfull": "^6.0.2",
 		"svelte": "^3.52.0",
 		"svelte-outclick": "^3.2.0",
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index 4d90a1b4..680956bc 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -16,7 +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
+  qrcode-base64: ^1.0.1
   screenfull: ^6.0.2
   svelte: ^3.52.0
   svelte-outclick: ^3.2.0
@@ -42,7 +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
+  qrcode-base64: 1.0.1
   screenfull: 6.0.2
   svelte: 3.52.0
   svelte-outclick: 3.2.0
@@ -1312,13 +1312,12 @@ packages:
       '@types/offscreencanvas': 2019.7.0
     dev: true
 
-  /qrcode-generator/1.4.4:
-    resolution: {integrity: sha512-HM7yY8O2ilqhmULxGMpcHSF1EhJJ9yBj8gvDEuZ6M+KGJ0YY2hKpnXvRD+hZPLrDVck3ExIGhmPtSdcjC+guuw==}
+  /qrcode-base64/1.0.1:
+    resolution: {integrity: sha512-B0BDmnRSvbj47Nq/+IeZjj22afNrf4rwIloNrSXN6OwnkoO+Q0hsUa53gCEfqNQjx+OcytF3azvQhi6wV2Tk6g==}
     dev: true
 
-  /qrcode-svg/1.1.0:
-    resolution: {integrity: sha512-XyQCIXux1zEIA3NPb0AeR8UMYvXZzWEhgdBgBjH9gO7M48H9uoHzviNz8pXw3UzrAcxRRRn9gxHewAVK7bn9qw==}
-    hasBin: true
+  /qrcode-generator/1.4.4:
+    resolution: {integrity: sha512-HM7yY8O2ilqhmULxGMpcHSF1EhJJ9yBj8gvDEuZ6M+KGJ0YY2hKpnXvRD+hZPLrDVck3ExIGhmPtSdcjC+guuw==}
     dev: true
 
   /qs/6.11.0:
diff --git a/src/hooks.server.js b/src/hooks.server.js
index 510affb6..d8b52215 100644
--- a/src/hooks.server.js
+++ b/src/hooks.server.js
@@ -2,7 +2,10 @@ import { auth, get, protectedRoutes } from '$lib/utils';
 
 export async function handle({ event, resolve }) {
 	let token = event.cookies.get('token');
-	let { params, url: { pathname, origin } } = event;
+	let {
+		params,
+		url: { pathname, origin }
+	} = event;
 
 	let user;
 	if (token && pathname !== '/logout') {
@@ -10,10 +13,10 @@ export async function handle({ event, resolve }) {
 			user = await get('/me', auth(event.cookies));
 			event.locals.user = user;
 
-      if (['/login', '/register'].includes(pathname))
-        return Response.redirect(origin + `/${user.username}/dashboard`, 307);
+			if (['/login', '/register'].includes(pathname))
+				return Response.redirect(origin + `/${user.username}/dashboard`, 307);
 		} catch (e) {
-      return Response.redirect(origin + '/logout', 307);
+			return Response.redirect(origin + '/logout', 307);
 		}
 	}
 
diff --git a/src/lib/socket.js b/src/lib/socket.js
index 94c1802e..672d008c 100644
--- a/src/lib/socket.js
+++ b/src/lib/socket.js
@@ -15,9 +15,9 @@ export const send = (type, data) => {
 };
 
 export const messages = (data) => ({
-  id() {
+	id() {
 		last.set(Date.now());
-  },
+	},
 
 	rate() {
 		rate.set(data);
diff --git a/src/lib/utils.js b/src/lib/utils.js
index c33b1cf9..a2829ca4 100644
--- a/src/lib/utils.js
+++ b/src/lib/utils.js
@@ -64,13 +64,7 @@ export function reverseFormat(val, locale) {
 	return Number.isNaN(reversedVal) ? 0 : +reversedVal;
 }
 
-export let protectedRoutes = [
-	/customers/,
-	/dashboard/,
-	/settings/,
-	/transactions/,
-	/support/
-];
+export let protectedRoutes = [/customers/, /dashboard/, /settings/, /transactions/, /support/];
 
 export const success = (m) => {
 	toast.pop();
@@ -138,16 +132,28 @@ export const f = (s, currency) =>
 		.replace('CA', '');
 
 export const s = (s) => new Intl.NumberFormat('en-US', { maximumFractionDigits: 0 }).format(s);
+export const sat = (s) => {
+	let p = Math.floor(Math.log(s) / Math.LN10 + 0.000000001);
+	let d = Math.floor((p + 1) / 3);
+
+	return (
+		'⚡️' +
+		(parseInt(s) > 0
+			? new Intl.NumberFormat('en-US', { maximumFractionDigits: 1 }).format(s / Math.pow(1000, d)) +
+			  ['', 'K', 'M', 'G'][d]
+			: 0
+		).toString()
+	);
+};
 
 export const sats = 100000000;
 
 export const back = () => browser && history.go(-1);
 export const focus = (el) => setTimeout(() => el.focus());
 
-
 export const wait = async (f, s = 300) => {
-  let i = 0;
-  while (!(await f()) && i < s) (await sleep(1000)) && i++;
-  if (i >= s) throw new Error("timeout");
-  return f();
+	let i = 0;
+	while (!(await f()) && i < s) (await sleep(1000)) && i++;
+	if (i >= s) throw new Error('timeout');
+	return f();
 };
diff --git a/src/locales/en.json b/src/locales/en.json
index be7baa71..89ccb8a5 100644
--- a/src/locales/en.json
+++ b/src/locales/en.json
@@ -160,7 +160,7 @@
 		"update1": ""
 	},
 	"user": {
-    "unfollow": "Unfollow",
+		"unfollow": "Unfollow",
 		"following": "Following",
 		"follow": "Follow",
 		"remove": "Remove",
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>
+						<div>
+							<div class="mb-1 font-bold">{f(tx.amount * (tx.rate / sats), tx.currency)}</div>
 
-							<span class="text-secondary"
-								>{tx.amount > 0 ? '+' : ''}{s(tx.amount)}
-								SAT
-							</span>
+							<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');