From bf70219a4753d31a201ffc10e0c378a512adb721 Mon Sep 17 00:00:00 2001
From: Adam Soltys <asoltys@gmail.com>
Date: Thu, 6 Oct 2022 00:13:16 -0700
Subject: send route can take a parameter

---
 src/components/AppHeader.svelte                    |  3 -
 src/routes/+layout.svelte                          |  2 +
 src/routes/[username]/+page.svelte                 | 75 +++++++++-------
 src/routes/[username]/bitcoin/+page.server.js      |  4 +
 src/routes/[username]/bitcoin/+page.svelte         |  0
 src/routes/[username]/settings/+page.svelte        |  2 +-
 src/routes/[username]/settings/_account.svelte     |  3 +
 .../[username]/transactions/[...page]/+page.svelte | 19 +++--
 src/routes/scan/+page.svelte                       |  4 +-
 src/routes/send/+page.server.js                    | 47 ----------
 src/routes/send/+page.svelte                       | 99 ----------------------
 src/routes/send/[...text]/+page.server.js          | 55 ++++++++++++
 src/routes/send/[...text]/+page.svelte             | 99 ++++++++++++++++++++++
 src/routes/send/lightning/[payreq]/+page.svelte    |  2 +-
 src/routes/send/user/[username]/+page.svelte       |  2 +-
 15 files changed, 226 insertions(+), 190 deletions(-)
 create mode 100644 src/routes/[username]/bitcoin/+page.server.js
 create mode 100644 src/routes/[username]/bitcoin/+page.svelte
 delete mode 100644 src/routes/send/+page.server.js
 delete mode 100644 src/routes/send/+page.svelte
 create mode 100644 src/routes/send/[...text]/+page.server.js
 create mode 100644 src/routes/send/[...text]/+page.svelte

(limited to 'src')

diff --git a/src/components/AppHeader.svelte b/src/components/AppHeader.svelte
index a21c4ecd..94bd9b1a 100644
--- a/src/components/AppHeader.svelte
+++ b/src/components/AppHeader.svelte
@@ -13,9 +13,6 @@
 	$: update(data);
 	let update = (data) => ({ subject, user } = data);
 
-	$: updateUser(user);
-	let updateUser = () => console.log('USER', user);
-
 	const menuButtons = [
 		{ stringID: 'nav.dashboard', icon: 'dash', goto: 'dashboard' },
 		{ stringID: 'nav.settings', icon: 'settings', goto: 'settings' },
diff --git a/src/routes/+layout.svelte b/src/routes/+layout.svelte
index a07d2fb1..c86b0eb5 100644
--- a/src/routes/+layout.svelte
+++ b/src/routes/+layout.svelte
@@ -35,7 +35,9 @@
 
 <SvelteToast options={{ reversed: true, intro: { y: 192 } }} />
 
+<main data-sveltekit-prefetch>
 <slot />
+</main>
 
 <style global>
 	:root {
diff --git a/src/routes/[username]/+page.svelte b/src/routes/[username]/+page.svelte
index 48039c7b..27553192 100644
--- a/src/routes/[username]/+page.svelte
+++ b/src/routes/[username]/+page.svelte
@@ -36,43 +36,54 @@
 	let followed = false;
 </script>
 
-<div class="flex xl:block justify-center items-center my-20 px-3">
-	<div class="space-y-10 xl:space-y-0">
-		<div class="xl:ml-[calc(15vw-64px)] space-y-2 w-full md:w-72">
-			<h1 class="text-3xl font-bold">{subject.username}</h1>
+<div class="container px-4 flex flex-wrap">
+	<div class="p-10 pt-20 w-full lg:w-1/3">
+		<h1 class="text-3xl font-bold">{subject.username}</h1>
 
-			<p class="text-secondary">
-				{subject.address && subject.address !== 'null' ? subject.address : ''}
-			</p>
+		<p class="text-secondary">
+			{subject.address && subject.address !== 'null' ? subject.address : ''}
+		</p>
 
-			<!-- TODO
-        we need to hook this up
-        <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 ? 'remove' : 'follow'))}
-				</button>
-        -->
-		</div>
+		<!-- TODO
+      we need to hook this up
+      <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 ? 'remove' : 'follow'))}
+      </button>
+    -->
+	</div>
 
-		<div class="space-y-5 static xl:absolute top-[255px] left-[calc(50vw-150px)]">
-			<div
-				on:click={() => copy(lightningAddress)}
-				id="qr"
-				class="cursor-pointer w-[292px] md:w-[342px] h-[342px] border border-lightgrey rounded-3xl flex p-5 justify-center items-center relative"
-			/>
+	<div class="space-y-5 lg:mt-20 mx-auto">
+		<div class="flex justify-center gap-2">
+      <a href={`/${subject.username}`}>
+				<button
+					class="rounded-full border py-2 px-5 font-bold hover:opacity-80 w-full mb-2 bg-black text-white"
+					>Lightning</button
+				>
+			</a>
+			<a href={`/${subject.username}/bitcoin`}>
+				<button class="rounded-full border py-2 px-5 font-bold hover:opacity-80 w-full mb-2"
+					>Bitcoin</button
+				>
+			</a>
+		</div>
+		<div
+			on:click={() => copy(lightningAddress)}
+			id="qr"
+			class="cursor-pointer w-[292px] md:w-[342px] h-[342px] border border-lightgrey rounded-3xl flex p-5 justify-center items-center relative"
+		/>
 
-			<p class="text-secondary text-xl text-center font-semibold">{$t('user.scanToPayBTC')}</p>
+		<p class="text-secondary text-xl text-center font-semibold">{$t('user.scanToPayBTC')}</p>
 
-			<div
-				class="bg-primary font-semibold rounded-xl text-sm p-3 flex flex-wrap justify-between items-center"
-			>
-				<span>{lightningAddress}</span>
-				<button class="hover:opacity-80" on:click={() => copy(lightningAddress)}>
-					<Icon icon="copy" style="ml-2" />
-				</button>
-			</div>
+		<div
+			class="bg-primary font-semibold rounded-xl text-sm p-3 flex flex-wrap justify-between items-center"
+		>
+			<span>{lightningAddress}</span>
+			<button class="hover:opacity-80" on:click={() => copy(lightningAddress)}>
+				<Icon icon="copy" style="ml-2" />
+			</button>
 		</div>
 	</div>
 </div>
diff --git a/src/routes/[username]/bitcoin/+page.server.js b/src/routes/[username]/bitcoin/+page.server.js
new file mode 100644
index 00000000..7ef65346
--- /dev/null
+++ b/src/routes/[username]/bitcoin/+page.server.js
@@ -0,0 +1,4 @@
+import { redirect } from '@sveltejs/kit';
+export async function load({ params }) {
+	throw redirect(303, `/${params.username}`);
+}
diff --git a/src/routes/[username]/bitcoin/+page.svelte b/src/routes/[username]/bitcoin/+page.svelte
new file mode 100644
index 00000000..e69de29b
diff --git a/src/routes/[username]/settings/+page.svelte b/src/routes/[username]/settings/+page.svelte
index b031cb93..9759b3d8 100644
--- a/src/routes/[username]/settings/+page.svelte
+++ b/src/routes/[username]/settings/+page.svelte
@@ -10,7 +10,7 @@
 	import { avatarUpload, bannerUpload } from '$lib/store';
 	import { upload } from '$lib/upload';
 
-	export let data, form;
+  export let data;
 
 	let { user, rates, token } = data;
 	$: update(data);
diff --git a/src/routes/[username]/settings/_account.svelte b/src/routes/[username]/settings/_account.svelte
index b6636129..7c667815 100644
--- a/src/routes/[username]/settings/_account.svelte
+++ b/src/routes/[username]/settings/_account.svelte
@@ -180,17 +180,20 @@
 			src={banner}
 			class="w-full object-cover object-center visible overflow-hidden h-48 mb-4 hover:opacity-80"
 			on:click={() => select('banner')}
+      alt="Banner"
 		/>
 	{:else if user.banner}
 		<img
 			src={`/api/public/${user.username}-banner.png`}
 			class="w-full object-cover object-center visible overflow-hidden h-48 mb-4 hover:opacity-80"
 			on:click={() => select('banner')}
+      alt="Banner"
 		/>
 	{:else}
 		<div
 			class="bg-gradient-to-r {$colorTheme} w-full h-48 mb-4 cursor-pointer hover:opacity-80"
 			on:click={() => select('banner')}
+      alt="Banner"
 		/>
 	{/if}
 
diff --git a/src/routes/[username]/transactions/[...page]/+page.svelte b/src/routes/[username]/transactions/[...page]/+page.svelte
index 5e03cc57..d694c760 100644
--- a/src/routes/[username]/transactions/[...page]/+page.svelte
+++ b/src/routes/[username]/transactions/[...page]/+page.svelte
@@ -1,17 +1,23 @@
 <script>
+  import { onMount } from "svelte";
+	import { formatDistance, parseISO } from 'date-fns';
 	import { newPayment } from '$lib/store';
 	import { t } from '$lib/translations';
 	import { f, s, sats } from '$lib/utils';
+  import { page } from "$app/stores";
+
 	export let data;
 
 	let { user } = data;
 
-	$newPayment = false;
-	let page,
+	let p,
 		total,
 		transactions = [],
 		pages = [];
-	$: data && ({ page, pages, total, transactions } = data);
+	$: data && ({ page: p, pages, total, transactions } = data);
+
+  $: $page && ($newPayment = false);
+  $: $newPayment && invalidate(`/users/${user.username}`);
 </script>
 
 <div class="mt-24 mb-20">
@@ -26,7 +32,7 @@
 					<a
 						class="mr-1 last:mr-0"
 						href={`/${user.username}/transactions/${i + 1}`}
-						class:active={page === i + 1}
+						class:active={p === i + 1}
 					>
 						<div class="border py-2 rounded-full border-2 w-12 h-12 hover:opacity-80 text-center">
 							{i + 1}
@@ -64,7 +70,10 @@
 						</div>
 
 						<div class="text-secondary text-right">
-							{new Date(tx.createdAt).toLocaleDateString(undefined, { dateStyle: 'medium' })}
+							{formatDistance(parseISO(tx.createdAt), new Date(), {
+								includeSeconds: true,
+								addSuffix: true
+							})}
 						</div>
 					</div>
 				{/each}
diff --git a/src/routes/scan/+page.svelte b/src/routes/scan/+page.svelte
index 3e024bc8..1c14cb6d 100644
--- a/src/routes/scan/+page.svelte
+++ b/src/routes/scan/+page.svelte
@@ -1,7 +1,7 @@
 <script>
 	import { Icon } from '$comp';
 	import QrScanner from 'qr-scanner';
-	import { onMount } from 'svelte';
+	import { onMount, onDestroy } from 'svelte';
 	import { back } from '$lib/utils';
 	import { goto } from '$app/navigation';
 
@@ -10,6 +10,8 @@
 		scanner = new QrScanner(vid, (text) => goto(`/send/${text}`));
 		scanner.start();
 	});
+
+	onDestroy(() => scanner?.stop());
 </script>
 
 <button class="ml-5 md:ml-20 mt-5 md:mt-10 hover:opacity-80" on:click={back}>
diff --git a/src/routes/send/+page.server.js b/src/routes/send/+page.server.js
deleted file mode 100644
index c8edb1cc..00000000
--- a/src/routes/send/+page.server.js
+++ /dev/null
@@ -1,47 +0,0 @@
-import validate from 'bitcoin-address-validation';
-import bip21 from 'bip21';
-import { get } from '$lib/utils';
-import { invalid, redirect } from '@sveltejs/kit';
-
-export const actions = {
-	default: async ({ request }) => {
-		const values = await request.formData();
-		const t = values.get('text');
-		if (!t) return;
-
-		// lightning
-		if (t.startsWith('ln')) {
-			throw redirect(303, `/send/lightning/${t}`);
-		}
-
-		// bitcoin
-		if (validate(t)) {
-			let user;
-			try {
-				({ user } = await get(`/invoice/${t}`));
-			} catch (e) {
-				throw redirect(303, `/send/bitcoin/${t}`);
-			}
-
-			if (user) throw redirect(303, `/send/user/${user.username}`);
-		}
-
-		// ln address
-		if (t.includes('@') && t.includes('.')) {
-			let [name, domain] = t.split('@');
-			try {
-				let lnurl = await get(`/encode?domain=${domain}&name=${name}`);
-			} catch (e) {}
-		}
-
-		// user
-		let user;
-		try {
-			user = await get(`/users/${t}`);
-		} catch (e) {}
-
-		if (user) throw redirect(303, `/send/user/${t}`);
-
-		return invalid(403, { error: 'Failed to recognize input' });
-	}
-};
diff --git a/src/routes/send/+page.svelte b/src/routes/send/+page.svelte
deleted file mode 100644
index 5d6d123e..00000000
--- a/src/routes/send/+page.svelte
+++ /dev/null
@@ -1,99 +0,0 @@
-<script>
-	import { fly } from 'svelte/transition';
-	import { enhance } from '$app/forms';
-	import { onMount } from 'svelte';
-	import { browser } from '$app/environment';
-	import { t } from '$lib/translations';
-	import { Icon, Spinner } from '$comp';
-	import { back, failure } from '$lib/utils';
-
-	export let form;
-
-	let el;
-	let placeholder = 'Address, Invoice or Username';
-	let text = placeholder;
-
-	let focus = () => text === placeholder && (text = '');
-	let keypress = (e) => e.key === 'Enter' && (e.preventDefault() || el.click());
-
-	let paste = async () => {
-		text = await navigator.clipboard.readText();
-	};
-</script>
-
-<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>
-
-<form method="POST" class="container px-4 mt-20 max-w-xl mx-auto" use:enhance>
-	{#if form?.error}
-		<div class="text-red-600 text-center" in:fly>
-			{form.error}
-		</div>
-	{/if}
-	<div class="mb-2">
-		<label for="invoice" class="font-bold mb-1 block">To</label>
-		<input type="hidden" name="text" bind:value={text} />
-
-		<div
-			class="expandable-textarea"
-			class:text-gray-400={text === placeholder}
-			role="textbox"
-			contenteditable
-			bind:textContent={text}
-			on:focus={focus}
-			on:keypress={keypress}
-		>
-			{text}
-		</div>
-	</div>
-
-	<div class="flex justify-end">
-		<a href="/scan">
-			<button
-				type="button"
-				class="flex border rounded-full px-6 py-2 font-bold hover:opacity-80 mr-1"
-			>
-				<Icon icon="scan" style="mr-2 w-6 my-auto" />
-				<div class="my-auto">Scan</div>
-			</button>
-		</a>
-
-		<button
-			type="button"
-			class="flex border rounded-full px-6 py-2 font-bold hover:opacity-80 mr-1"
-			on:click={paste}
-		>
-			<Icon icon="paste" style="mr-2 w-6 my-auto" />
-			<div class="my-auto">Paste</div>
-		</button>
-
-		<button
-			bind:this={el}
-			type="submit"
-			class="{!text
-				? 'opacity-50'
-				: 'opacity-100 hover:opacity-80'} bg-black text-white border rounded-full px-6 py-2 font-bold"
-		>
-			Next
-		</button>
-	</div>
-</form>
-
-<style>
-	.expandable-textarea {
-		font-family: inherit;
-		font-size: inherit;
-
-		resize: both;
-		display: block;
-		overflow: hidden;
-		min-height: 48px;
-		line-height: 20px;
-		@apply block border rounded-2xl p-3 py-4 w-full;
-	}
-
-	.expandable-expandable::-webkit-resizer {
-		background: transparent;
-	}
-</style>
diff --git a/src/routes/send/[...text]/+page.server.js b/src/routes/send/[...text]/+page.server.js
new file mode 100644
index 00000000..ec764882
--- /dev/null
+++ b/src/routes/send/[...text]/+page.server.js
@@ -0,0 +1,55 @@
+import validate from 'bitcoin-address-validation';
+import bip21 from 'bip21';
+import { get } from '$lib/utils';
+import { invalid, redirect } from '@sveltejs/kit';
+
+let parse = async (t) => {
+	if (!t) return;
+
+	// lightning
+	if (t.startsWith('ln')) {
+		throw redirect(303, `/send/lightning/${t}`);
+	}
+
+	// bitcoin
+	if (validate(t)) {
+		let user;
+		try {
+			({ user } = await get(`/invoice/${t}`));
+		} catch (e) {
+			throw redirect(303, `/send/bitcoin/${t}`);
+		}
+
+		if (user) throw redirect(303, `/send/user/${user.username}`);
+	}
+
+	// ln address
+	if (t.includes('@') && t.includes('.')) {
+		let [name, domain] = t.split('@');
+		try {
+			let lnurl = await get(`/encode?domain=${domain}&name=${name}`);
+		} catch (e) {}
+	}
+
+	// user
+	let user;
+	try {
+		user = await get(`/users/${t}`);
+	} catch (e) {}
+
+	if (user) throw redirect(303, `/send/user/${t}`);
+};
+
+export async function load({ params }) {
+  let { text } = params;
+  await parse(text);
+}
+
+export const actions = {
+	default: async ({ request }) => {
+		const form = await request.formData();
+		await parse(form.get('text'));
+
+		return invalid(403, { error: 'Failed to recognize input' });
+	}
+};
diff --git a/src/routes/send/[...text]/+page.svelte b/src/routes/send/[...text]/+page.svelte
new file mode 100644
index 00000000..5d6d123e
--- /dev/null
+++ b/src/routes/send/[...text]/+page.svelte
@@ -0,0 +1,99 @@
+<script>
+	import { fly } from 'svelte/transition';
+	import { enhance } from '$app/forms';
+	import { onMount } from 'svelte';
+	import { browser } from '$app/environment';
+	import { t } from '$lib/translations';
+	import { Icon, Spinner } from '$comp';
+	import { back, failure } from '$lib/utils';
+
+	export let form;
+
+	let el;
+	let placeholder = 'Address, Invoice or Username';
+	let text = placeholder;
+
+	let focus = () => text === placeholder && (text = '');
+	let keypress = (e) => e.key === 'Enter' && (e.preventDefault() || el.click());
+
+	let paste = async () => {
+		text = await navigator.clipboard.readText();
+	};
+</script>
+
+<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>
+
+<form method="POST" class="container px-4 mt-20 max-w-xl mx-auto" use:enhance>
+	{#if form?.error}
+		<div class="text-red-600 text-center" in:fly>
+			{form.error}
+		</div>
+	{/if}
+	<div class="mb-2">
+		<label for="invoice" class="font-bold mb-1 block">To</label>
+		<input type="hidden" name="text" bind:value={text} />
+
+		<div
+			class="expandable-textarea"
+			class:text-gray-400={text === placeholder}
+			role="textbox"
+			contenteditable
+			bind:textContent={text}
+			on:focus={focus}
+			on:keypress={keypress}
+		>
+			{text}
+		</div>
+	</div>
+
+	<div class="flex justify-end">
+		<a href="/scan">
+			<button
+				type="button"
+				class="flex border rounded-full px-6 py-2 font-bold hover:opacity-80 mr-1"
+			>
+				<Icon icon="scan" style="mr-2 w-6 my-auto" />
+				<div class="my-auto">Scan</div>
+			</button>
+		</a>
+
+		<button
+			type="button"
+			class="flex border rounded-full px-6 py-2 font-bold hover:opacity-80 mr-1"
+			on:click={paste}
+		>
+			<Icon icon="paste" style="mr-2 w-6 my-auto" />
+			<div class="my-auto">Paste</div>
+		</button>
+
+		<button
+			bind:this={el}
+			type="submit"
+			class="{!text
+				? 'opacity-50'
+				: 'opacity-100 hover:opacity-80'} bg-black text-white border rounded-full px-6 py-2 font-bold"
+		>
+			Next
+		</button>
+	</div>
+</form>
+
+<style>
+	.expandable-textarea {
+		font-family: inherit;
+		font-size: inherit;
+
+		resize: both;
+		display: block;
+		overflow: hidden;
+		min-height: 48px;
+		line-height: 20px;
+		@apply block border rounded-2xl p-3 py-4 w-full;
+	}
+
+	.expandable-expandable::-webkit-resizer {
+		background: transparent;
+	}
+</style>
diff --git a/src/routes/send/lightning/[payreq]/+page.svelte b/src/routes/send/lightning/[payreq]/+page.svelte
index 1b248af6..973550f6 100644
--- a/src/routes/send/lightning/[payreq]/+page.svelte
+++ b/src/routes/send/lightning/[payreq]/+page.svelte
@@ -23,7 +23,7 @@
 <div class="container px-4 mt-20 max-w-xl mx-auto">
 	{#if amount}
 		<div class="text-center mb-8">
-			<h1 class="text-xl md:text-2xl text-secondary mb-2">Sending</h1>
+			<h1 class="text-xl md:text-2xl text-secondary mb-2">Send</h1>
 			<p class="text-6xl break-words mb-4">
 				{s(amount)} <span class="text-xl md:text-2xl text-secondary">sats</span>
 			</p>
diff --git a/src/routes/send/user/[username]/+page.svelte b/src/routes/send/user/[username]/+page.svelte
index 1193696b..05908011 100644
--- a/src/routes/send/user/[username]/+page.svelte
+++ b/src/routes/send/user/[username]/+page.svelte
@@ -38,7 +38,7 @@
 <div class="container px-4 mt-20 max-w-xl mx-auto">
 	{#if amount}
 		<div class="text-center mb-8">
-			<h1 class="text-xl md:text-2xl text-secondary mb-2">Sending</h1>
+			<h1 class="text-xl md:text-2xl text-secondary mb-2">Send</h1>
 			<p class="text-6xl break-words mb-4">
 				{fiat ? f(amountFiat, currency) : s(a)}
 				{#if !fiat}
-- 
cgit v1.2.3


From 97948ce65ec1ea90c17ef8813929cbd12b0c4bfc Mon Sep 17 00:00:00 2001
From: Adam Soltys <asoltys@gmail.com>
Date: Thu, 6 Oct 2022 00:28:42 -0700
Subject: check for internal payments

---
 src/routes/send/[...text]/+page.server.js | 13 ++++++++++---
 1 file changed, 10 insertions(+), 3 deletions(-)

(limited to 'src')

diff --git a/src/routes/send/[...text]/+page.server.js b/src/routes/send/[...text]/+page.server.js
index ec764882..471724e4 100644
--- a/src/routes/send/[...text]/+page.server.js
+++ b/src/routes/send/[...text]/+page.server.js
@@ -8,7 +8,14 @@ let parse = async (t) => {
 
 	// lightning
 	if (t.startsWith('ln')) {
-		throw redirect(303, `/send/lightning/${t}`);
+		let user;
+		try {
+			({ user } = await get(`/invoice/${t}`));
+		} catch (e) {
+			throw redirect(303, `/send/lightning/${t}`);
+		}
+
+		if (user) throw redirect(303, `/send/user/${user.username}`);
 	}
 
 	// bitcoin
@@ -41,8 +48,8 @@ let parse = async (t) => {
 };
 
 export async function load({ params }) {
-  let { text } = params;
-  await parse(text);
+	let { text } = params;
+	await parse(text);
 }
 
 export const actions = {
-- 
cgit v1.2.3