lightning send improvements

3 files changed, 106 insertions, 35 deletions

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} />