lightning send improvements

7 files changed, 120 insertions, 58 deletions

diff --git a/src/lib/socket.js b/src/lib/socket.js
index 7b1d72e5..ed3fa02e 100644
--- a/src/lib/socket.js
+++ b/src/lib/socket.js
@@ -27,7 +27,6 @@ export const messages = (data) => ({
 		if (data.amount > 0) {
 			success(`Received ${data.amount} sats!`);
 		} else {
-      console.log("DATA", JSON.stringify(data))
 			success(`Sent ${-data.amount} sats!`);
 		}
 	},
diff --git a/src/routes/[username]/transactions/[...page]/+page.server.js b/src/routes/[username]/transactions/[...page]/+page.server.js
index 5b88c32b..faa8a1ab 100644
--- a/src/routes/[username]/transactions/[...page]/+page.server.js
+++ b/src/routes/[username]/transactions/[...page]/+page.server.js
@@ -2,7 +2,7 @@ import { get, auth } from '$lib/utils';
 
 let offset = 25;
 
-export async function load({ params, request }) {
+export async function load({ cookies, params, request }) {
 	let page = parseInt(params.page || 1);
 	let transactions = await get('/payments', auth(cookies));
 	let total = transactions.length;
diff --git a/src/routes/scan/+page.svelte b/src/routes/scan/+page.svelte
index 0fba1c4a..9fff1949 100644
--- a/src/routes/scan/+page.svelte
+++ b/src/routes/scan/+page.svelte
@@ -16,6 +16,12 @@
 	<Icon icon="arrow-left" style="w-10" />
 </button>
 
-<div class="flex w-full">
+<div class="flex w-full mb-4">
 	<video bind:this={vid} class="w-full max-w-[600px] mx-auto" />
 </div>
+
+<div class="flex w-full">
+<button class="mx-auto border rounded-full px-6 py-2 font-bold hover:opacity-80" on:click={back}>
+  Cancel
+</button>
+</div>
diff --git a/src/routes/send/+page.server.js b/src/routes/send/+page.server.js
new file mode 100644
index 00000000..837060f2
--- /dev/null
+++ b/src/routes/send/+page.server.js
@@ -0,0 +1,39 @@
+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');
+		console.log('parsing', t);
+		if (!t) return;
+
+		// lightning
+		if (t.startsWith('ln')) {
+			throw redirect(303, `/send/lightning/${t}`);
+		}
+
+		// bitcoin
+		if (validate(t)) {
+			console.log('bitcoin');
+			throw redirect(303, `/send/bitcoin/${t}`);
+		}
+
+		// ln address
+		if (t.includes('@') && t.includes('.')) {
+			console.log('ln address');
+			let [name, domain] = t.split('@');
+			try {
+				let lnurl = await get(`/encode?domain=${domain}&name=${name}`);
+				console.log('lnurl', lnurl);
+			} catch (e) {}
+		}
+
+		// user
+		console.log('username');
+
+		return invalid(403, { error: 'Failed to parse destination' });
+	}
+};
diff --git a/src/routes/send/+page.svelte b/src/routes/send/+page.svelte
index 2162d76d..fdaa1db0 100644
--- a/src/routes/send/+page.svelte
+++ b/src/routes/send/+page.svelte
@@ -2,10 +2,17 @@
 	import { browser } from '$app/environment';
 	import { t } from '$lib/translations';
 	import { AppHeader, Icon, Spinner } from '$comp';
-	import { back, focus } from '$lib/utils';
-	import parse from '$lib/parse';
+	import { back } from '$lib/utils';
 
-	let text, loading;
+	export let form;
+
+	let placeholder = 'Address, Invoice, Username';
+	let text = placeholder,
+		loading;
+
+	let focus = () => {
+		if (text === placeholder) text = '';
+	};
 
 	let paste = async () => {
 		text = await navigator.clipboard.readText();
@@ -16,46 +23,72 @@
 	<Icon icon="arrow-left" style="w-10" />
 </button>
 
-<div class="container px-4 mt-20 max-w-xl mx-auto">
-	<div>
+<form method="POST" class="container px-4 mt-20 max-w-xl mx-auto">
+	<div class="mb-2">
 		<label for="invoice" class="font-bold mb-1 block">Destination</label>
+		<input type="hidden" name="text" bind:value={text} />
 
-		<div class="relative mb-8">
-			<input
-				placeholder="Address, Invoice, Username"
-				type="text"
-				name="text"
-				required
-				bind:value={text}
-				class="block rounded-2xl p-3 w-full bg-primary"
-			/>
-
-			<a href="/scan">
-				<div class="flex absolute h-[48px] right-0 top-0 px-2 mt-[1px]">
-					<Icon icon="scan" style="mr-2 w-6 my-auto" />
-				</div>
-			</a>
-
-			{#if browser && navigator.clipboard}
-				<div class="flex absolute h-[48px] right-10 top-0 px-2 mt-[1px]" on:click={paste}>
-					<Icon icon="paste" style="mr-2 w-6 my-auto" />
-				</div>
-			{/if}
+		<div
+			class="expandable-textarea"
+			class:text-gray-400={text === placeholder}
+			role="textbox"
+			contenteditable
+			bind:textContent={text}
+			on:focus={focus}
+		>
+			{text}
 		</div>
 	</div>
 
-	<div class="flex w-full">
+	<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
+			type="submit"
 			class="{!text
 				? 'opacity-50'
-				: 'opacity-100 hover:opacity-80'} rounded-2xl border py-3 font-bold mx-auto mt-2 bg-black text-white px-4 w-24"
-			on:click={() => parse(text)}
+				: 'opacity-100 hover:opacity-80'} bg-black text-white border rounded-full px-6 py-2 font-bold"
 		>
 			{#if loading}
 				<Spinner />
 			{:else}
-				{$t('user.dashboard.go')}
+				Next
 			{/if}
 		</button>
 	</div>
-</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 bg-primary;
+	}
+
+	.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 79fc1c44..47c6b763 100644
--- a/src/routes/send/lightning/[payreq]/+page.svelte
+++ b/src/routes/send/lightning/[payreq]/+page.svelte
@@ -4,12 +4,11 @@
 	import { back } from '$lib/utils';
 	export let data;
 
-  let { payreq } = $page.params;
+	let { payreq } = $page.params;
+	let { alias } = data;
 
 	let { currency } = data.user;
 	let amount, loading;
-
-  console.log(data)
 </script>
 
 <button class="ml-5 md:ml-20 mt-5 md:mt-10 hover:opacity-80" on:click={back}>
@@ -19,7 +18,7 @@
 <div class="container px-4 mt-20 max-w-xl mx-auto">
 	<div class="text-center mb-8">
 		<h1 class="text-3xl md:text-4xl font-semibold mb-2">Send to</h1>
-		<p class="text-lg text-secondary">{payreq}</p>
+		<p class="text-lg text-secondary break-words">{alias}</p>
 	</div>
 	<Numpad bind:amount {currency} />
 
diff --git a/src/routes/sent/+page.svelte b/src/routes/sent/+page.svelte
index 6e4cb539..de61fd41 100644
--- a/src/routes/sent/+page.svelte
+++ b/src/routes/sent/+page.svelte
@@ -1,38 +1,24 @@
 <script>
+	import { Icon } from '$comp';
 	import { toast } from '@zerodevx/svelte-toast';
-	import { browser } from '$app/environment';
 	import { t } from '$lib/translations';
-	import { LottiePlayer } from '@lottiefiles/svelte-lottie-player';
-	import { goto } from '$app/navigation';
 
 	export let data;
 	let { user } = data;
 
 	toast.pop(0);
-
-	const done = () => {
-		goto(`/${user.username}/transactions`);
-	};
 </script>
 
 <div class="text-center mt-20 md:mt-0">
-	{#if browser}
-		<div class="w-full mx-auto max-w-xl">
-			<LottiePlayer
-				src="/lottie/success.json"
-				autoplay={true}
-				loop={true}
-				controls={false}
-				renderer="svg"
-				background="transparent"
-			/>
-		</div>
-	{/if}
+	<div class="flex w-full py-20">
+		<Icon icon="check" style="mx-auto" />
+	</div>
 	<h1 class="text-3xl md:text-4xl font-bold mb-6">{$t('invoice.paymentSuccessful')}</h1>
+  <a href={`/${user.username}/transactions`}>
 	<button
 		class="bg-black text-white rounded-2xl w-20 py-3 font-bold hover:opacity-80"
-		on:click={done}
 	>
 		{$t('invoice.done')}
 	</button>
+    </a>
 </div>