contacts on send page

4 files changed, 80 insertions, 72 deletions

diff --git a/src/components/AppHeader.svelte b/src/components/AppHeader.svelte
index 54f0b223..4094e50c 100644
--- a/src/components/AppHeader.svelte
+++ b/src/components/AppHeader.svelte
@@ -57,15 +57,6 @@
 					><Icon icon="numpad" style="mx-auto" />
 				</button>
 			</a>
-			<a href={`/scan`}>
-				<button
-					class="bg-white p-2 rounded-full w-12 h-12 drop-shadow-xl border border-black/10 {$page
-						.url.pathname === `/scan`
-						? 'opacity-100'
-						: 'opacity-70 hover:opacity-80'}"
-					><Icon icon="camera" style="mx-auto w-6" />
-				</button>
-			</a>
 			<a href={`/${user.username}/transactions`}>
 				<button
 					class="bg-white p-2 rounded-full w-12 h-12 drop-shadow-xl border border-black/10 {$page
@@ -85,6 +76,15 @@
 					{/if}
 				</button>
 			</a>
+			<a href={`/send`}>
+				<button
+					class="bg-white p-2 rounded-full w-12 h-12 drop-shadow-xl border border-black/10 {$page
+						.url.pathname === `/send`
+						? 'opacity-100'
+						: 'opacity-70 hover:opacity-80'}"
+					><Icon icon="send" style="mx-auto w-6" />
+				</button>
+			</a>
 			<div class="relative">
 				<OutClick on:outclick={() => (showMenu = false)}>
 					<button
diff --git a/src/components/Avatar.svelte b/src/components/Avatar.svelte
index 092af740..d2d83977 100644
--- a/src/components/Avatar.svelte
+++ b/src/components/Avatar.svelte
@@ -4,10 +4,11 @@
 
 	export let user;
 	export let size = 32;
+  export let disabled = false;
 	$: s = size.toString();
 </script>
 
-<a href={`/${user.username}`}>
+<a href={`/${user.username}`} class:pointer-events-none={disabled}>
 	<div
 		class="w-{s} h-{s} rounded-full border-4 border-white overflow-hidden bg-gradient-to-r {$colorTheme} flex justify-center items-center"
 	>
diff --git a/src/routes/(app)/send/[...text]/+page.server.js b/src/routes/(app)/send/[...text]/+page.server.js
index 761f27dc..0061e895 100644
--- a/src/routes/(app)/send/[...text]/+page.server.js
+++ b/src/routes/(app)/send/[...text]/+page.server.js
@@ -1,6 +1,6 @@
 import validate from 'bitcoin-address-validation';
 import bip21 from 'bip21';
-import { get, post } from '$lib/utils';
+import { auth, get, post } from '$lib/utils';
 import { invalid, redirect } from '@sveltejs/kit';
 
 let parse = async (t, r) => {
@@ -60,9 +60,11 @@ let parse = async (t, r) => {
 	if (user) throw redirect(307, `/send/user/${t}`);
 };
 
-export async function load({ params, request }) {
+export async function load({ cookies, params, request }) {
 	let { text } = params;
 	await parse(text, request);
+	let contacts = await get('/contacts', auth(cookies));
+	return { contacts };
 }
 
 export const actions = {
diff --git a/src/routes/(app)/send/[...text]/+page.svelte b/src/routes/(app)/send/[...text]/+page.svelte
index 1311422e..053a538e 100644
--- a/src/routes/(app)/send/[...text]/+page.svelte
+++ b/src/routes/(app)/send/[...text]/+page.svelte
@@ -1,19 +1,22 @@
 <script>
+	import { page } from '$app/stores';
 	import { fly } from 'svelte/transition';
 	import { enhance } from '$app/forms';
-	import { onMount } from 'svelte';
+	import { tick } from 'svelte';
 	import { browser } from '$app/environment';
 	import { t } from '$lib/translations';
-	import { Icon, Spinner } from '$comp';
+	import { Avatar, Icon, Spinner } from '$comp';
 	import { back, failure } from '$lib/utils';
 
+	export let data;
 	export let form;
 
-	let el;
+	let { contacts } = data;
+
+	let el, textarea, text;
 	let placeholder = 'Paste a bitcoin address, lightning invoice or coinos username';
-	let text;
 
-	let focus = () => text === placeholder && (text = '');
+	$: $page && setTimeout(() => textarea?.focus(), 0);
 	let keypress = (e) => e.key === 'Enter' && (e.preventDefault() || el.click());
 
 	let paste = async () => {
@@ -25,70 +28,72 @@
 	<Icon icon="arrow-left" style="w-10" />
 </button>
 
-<h1 class="px-3 md:px-0 text-center text-3xl md:text-4xl font-semibold mb-8">
-	Send bitcoin or lightning
-</h1>
+<div class="container px-4 max-w-lg mx-auto space-y-5 mt-10">
+	<h1 class="px-3 md:px-0 text-center text-3xl md:text-4xl font-semibold">Send</h1>
+
+	<form method="POST" use:enhance>
+		{#if form?.error}
+			<div class="text-red-600 text-center" in:fly>
+				{form.error}
+			</div>
+		{/if}
+		<div class="mb-2">
+			<input type="hidden" name="text" bind:value={text} />
 
-<form method="POST" class="container px-4 max-w-xl mx-auto" use:enhance>
-	{#if form?.error}
-		<div class="text-red-600 text-center" in:fly>
-			{form.error}
+			<textarea
+				{placeholder}
+				on:keypress={keypress}
+				class="w-full p-4 border rounded-xl h-48"
+				bind:value={text}
+				bind:this={textarea}
+			/>
 		</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} />
 
-		<textarea
-			{placeholder}
-			on:keypress={keypress}
-			class="w-full p-4 border rounded-xl h-48"
-			bind:value={text}
-		/>
-	</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>
 
-	<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"
+				on:click={paste}
 			>
-				<Icon icon="scan" style="mr-2 w-6 my-auto" />
-				<div class="my-auto">Scan</div>
+				<Icon icon="paste" style="mr-2 w-6 my-auto" />
+				<div class="my-auto">Paste</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>
 
-		<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>
+  {#if contacts.length}
+	<div class="space-y-5">
+		<h1 class="px-3 md:px-0 text-xl font-semibold mt-10">Contacts</h1>
+		<div class="flex gap-4">
+			{#each contacts as c}
+				<a href={`/${c.username}/receive`}>
+					<div class="text-center">
+            <Avatar user={c} size={20} disabled={true} />
+						<p class="text-lg break-words my-auto">{c.username}</p>
+					</div>
+				</a>
+			{/each}
+		</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;
-	}
-</style>
+  {/if}
+</div>