From a97c7a00ebb414b7ff7731e6bf3640f2f476aae3 Mon Sep 17 00:00:00 2001
From: Adam Soltys <asoltys@gmail.com>
Date: Thu, 16 Feb 2023 22:43:27 -0800
Subject: messages

---
 src/routes/(app)/+layout.svelte                    |   2 +-
 .../(app)/[username]/(profile)/+layout.svelte      |   2 +-
 .../(app)/[username]/(profile)/+page.server.js     |   1 +
 src/routes/(app)/[username]/(profile)/+page.svelte |  80 +++++++------
 .../[username]/(profile)/messages/+page.server.js  |  16 ---
 .../[username]/(profile)/messages/+page.svelte     | 123 --------------------
 .../(app)/[username]/invoice/[hash]/+page.svelte   |   4 +-
 .../(app)/[username]/messages/+page.server.js      |  19 ++++
 src/routes/(app)/[username]/messages/+page.svelte  | 126 +++++++++++++++++++++
 .../[username]/payments/[...page]/+page.svelte     |   2 +-
 src/routes/(app)/buy/+page.svelte                  |  33 +++++-
 src/routes/(app)/login/+page.svelte                |   1 -
 src/routes/(app)/payment/[id]/+page.svelte         |  16 +--
 13 files changed, 234 insertions(+), 191 deletions(-)
 delete mode 100644 src/routes/(app)/[username]/(profile)/messages/+page.server.js
 delete mode 100644 src/routes/(app)/[username]/(profile)/messages/+page.svelte
 create mode 100644 src/routes/(app)/[username]/messages/+page.server.js
 create mode 100644 src/routes/(app)/[username]/messages/+page.svelte

(limited to 'src/routes/(app)')

diff --git a/src/routes/(app)/+layout.svelte b/src/routes/(app)/+layout.svelte
index 2a122209..45469bdb 100644
--- a/src/routes/(app)/+layout.svelte
+++ b/src/routes/(app)/+layout.svelte
@@ -58,7 +58,7 @@
 	onDestroy(() => browser && clearTimeout(timer));
 </script>
 
-{#if $passwordPrompt}
+{#if browser && $passwordPrompt}
 	<Password {user} />
 {/if}
 
diff --git a/src/routes/(app)/[username]/(profile)/+layout.svelte b/src/routes/(app)/[username]/(profile)/+layout.svelte
index dfa25b78..6eb2a850 100644
--- a/src/routes/(app)/[username]/(profile)/+layout.svelte
+++ b/src/routes/(app)/[username]/(profile)/+layout.svelte
@@ -111,7 +111,7 @@
 				{/if}
 
 				<div class="w-full flex">
-					<a href={`/${subject.pubkey}/messages`} class="mx-auto">
+					<a href={`/${subject.username}/messages`} class="mx-auto">
 						<button class="rounded-full border py-3 px-6 font-bold hover:opacity-80 flex w-60">
 							<div class="mx-auto flex">
 								<Icon icon="support" style="mr-2 my-auto" />
diff --git a/src/routes/(app)/[username]/(profile)/+page.server.js b/src/routes/(app)/[username]/(profile)/+page.server.js
index d1fa2f41..2777afdc 100644
--- a/src/routes/(app)/[username]/(profile)/+page.server.js
+++ b/src/routes/(app)/[username]/(profile)/+page.server.js
@@ -10,6 +10,7 @@ export async function load({ cookies, params, parent, url }) {
 	if (user) {
 		try {
 			messages = await get(`/${user.pubkey}/${since}/messages`);
+			messages = messages.sort((a, b) => b.created_at - a.created_at);
 		} catch (e) {
 			console.log(`failed to fetch nostr messages`, e);
 		}
diff --git a/src/routes/(app)/[username]/(profile)/+page.svelte b/src/routes/(app)/[username]/(profile)/+page.svelte
index 0421782c..bc19a9df 100644
--- a/src/routes/(app)/[username]/(profile)/+page.svelte
+++ b/src/routes/(app)/[username]/(profile)/+page.svelte
@@ -17,8 +17,8 @@
 		if (!browser) return;
 		while (latest.length < 3 && i < messages.length) {
 			let event = messages[i];
-			let { pubkey: k } = event.user;
-			if (k !== user.pubkey && !keys.has(k)) {
+			let k = event.author.id === user.id ? event.recipient.pubkey : event.author.pubkey;
+			if (!keys.has(k)) {
 				keys.add(k);
 				event.content = await decrypt({ event, user });
 				if (event.content) latest.push(event);
@@ -33,36 +33,44 @@
 <div class="space-y-8">
 	{#if user?.id === subject.id}
 		<div>
-			{#if user.balance > 0}
-				<div class="flex justify-center lg:justify-start">
-					<Balance {user} />
-				</div>
-			{:else}
-				<div class="space-y-3">
-					<h1 class="text-2xl">Welcome</h1>
-
-					<p class="text-secondary">
-						Get started by making a deposit or getting someone to pay you in Bitcoin!
+			<div class="flex justify-center lg:justify-start">
+				<Balance {user} />
+			</div>
+			{#if !user.balance}
+				<div class="space-y-8 mt-8">
+					<p class="text-secondary text-lg">
+						Welcome! Your account balance is empty. You can start by making a deposit or by asking
+						someone to pay you.
 					</p>
 
 					<div class="flex gap-4 justify-center w-full">
 						<a href={`/${user.username}/receive`}>
-							<button class="rounded-full border py-3 px-6 font-bold hover:opacity-80 flex w-60">
+							<button
+								class="rounded-full border py-3 px-6 font-bold hover:opacity-80 flex w-60 bg-black text-white"
+							>
 								<div class="mx-auto flex">
-									<Icon icon="numpad" style="my-auto h-6 mr-2" />
-									<div class="my-auto mt-1">Receive a Payment</div>
+									<Icon icon="numpad" style="my-auto h-6 mr-2 invert" />
+									<div class="my-auto mt-1">Request Payment</div>
 								</div>
 							</button>
 						</a>
 
-						<!-- <a href={`/buy`}> -->
-						<!-- 	<button class="rounded-full border py-3 px-6 font-bold hover:opacity-80 flex w-60"> -->
-						<!-- 		<div class="mx-auto flex"> -->
-						<!-- 			<Icon icon="plus" style="my-auto h-6 mr-2" /> -->
-						<!-- 			<div class="my-auto mt-1">Buy Bitcoin</div> -->
-						<!-- 		</div> -->
-						<!-- 	</button> -->
-						<!-- </a> -->
+						{#if user.eligible}
+							<a href={`/buy`}>
+								<button class="rounded-full border py-3 px-6 font-bold hover:opacity-80 flex w-60">
+									<div class="mx-auto flex">
+										<!-- <Icon icon="plus" style="my-auto h-6 mr-2" /> -->
+
+										<img
+											src="/images/bitcoin.svg"
+											class="w-8 border-4 border-transparent mr-2"
+											alt="Bitcoin"
+										/>
+										<div class="my-auto mt-1">Buy Bitcoin</div>
+									</div>
+								</button>
+							</a>
+						{/if}
 					</div>
 				</div>
 			{/if}
@@ -138,17 +146,23 @@
 		</div>
 	{/if}
 
-	{#if latest.length}
-		<div>
-			<h1 class="text-2xl">Messages</h1>
-			{#each latest as { content, user }}
-				<div class="flex">
-					<div class="my-auto">
-						<Avatar {user} size={12} disabled={true} />
+	{#if latest.length && user.id === subject.id}
+		<div class="relative">
+			{#each latest as { content, pubkey, author, recipient }}
+				{@const user = author.id === user.id ? recipient : author}
+				<a href={`/${user.username}/messages`}>
+					<div class="flex hover:bg-gray-100 p-4 rounded-2xl">
+						<div class="my-auto">
+							<Avatar {user} size={'20'} disabled={true} />
+						</div>
+						<div class="my-auto truncate">
+							<div class="my-auto ml-1 text-lg font-bold">{user.username}</div>
+							<div class="my-auto ml-1 text-secondary text-lg truncate">
+								{content}
+							</div>
+						</div>
 					</div>
-					<div class="my-auto ml-1 text-secondary">{user.username}</div>
-					{content}
-				</div>
+				</a>
 			{/each}
 		</div>
 	{/if}
diff --git a/src/routes/(app)/[username]/(profile)/messages/+page.server.js b/src/routes/(app)/[username]/(profile)/messages/+page.server.js
deleted file mode 100644
index 63116099..00000000
--- a/src/routes/(app)/[username]/(profile)/messages/+page.server.js
+++ /dev/null
@@ -1,16 +0,0 @@
-import { get } from '$lib/utils';
-
-export async function load({ params, parent, url }) {
-	let { user, subject } = await parent();
-	let { since = 0 } = params;
-
-	let messages = [];
-
-	try {
-		messages = await get(`/nostr/${user.pubkey}/${subject.pubkey}/${since}/messages`);
-	} catch (e) {
-		console.log(`failed to fetch nostr messages`, e);
-	}
-
-	return { newMessages: messages };
-}
diff --git a/src/routes/(app)/[username]/(profile)/messages/+page.svelte b/src/routes/(app)/[username]/(profile)/messages/+page.svelte
deleted file mode 100644
index db7b1ced..00000000
--- a/src/routes/(app)/[username]/(profile)/messages/+page.svelte
+++ /dev/null
@@ -1,123 +0,0 @@
-<script>
-	import { browser } from '$app/environment';
-	import { t } from '$lib/translations';
-	import { format, parseISO } from 'date-fns';
-	import { scale } from 'svelte/transition';
-	import { enhance } from '$app/forms';
-	import { Icon } from '$comp';
-	import { back, fail, focus } from '$lib/utils';
-	import { sign, send, encrypt, decrypt } from '$lib/nostr';
-	import { messages, password } from '$lib/store';
-	import { tick, onMount } from 'svelte';
-	import { calculateId } from 'nostr';
-
-	export let data;
-
-	let { newMessages, subject, user } = data;
-	let input, pane;
-
-	$: initialize($password);
-	let initialize = async (p) => {
-		if (!p) return;
-		$messages[user.pubkey] = $messages[user.pubkey] || {};
-		$messages[user.pubkey][subject.pubkey] = $messages[user.pubkey][subject.pubkey] || {};
-
-		for (let m of newMessages) {
-			if (!$messages[user.pubkey][subject.pubkey][m.id]) {
-				m.message = await decrypt({ event: m, user });
-				$messages[user.pubkey][subject.pubkey][m.id] = m;
-				tick().then(() => pane && (pane.scrollTop = pane.scrollHeight));
-			}
-		}
-		tick().then(() => pane && (pane.scrollTop = pane.scrollHeight));
-	};
-
-	$: events =
-		($messages[user.pubkey] &&
-			$messages[user.pubkey][subject.pubkey] &&
-			Object.values($messages[user.pubkey][subject.pubkey]).sort(
-				(a, b) => a.created_at - b.created
-			)) ||
-		[];
-
-	let sent, submitting, message;
-	let submit = async () => {
-		submitting = true;
-
-		let event = {
-			pubkey: user.pubkey,
-			created_at: Math.floor(Date.now() / 1000),
-			kind: 4,
-			tags: [['p', subject.pubkey]]
-		};
-
-		event.message = message;
-		event.id = await calculateId(event);
-		$messages[user.pubkey][subject.pubkey][event.id] = event;
-		$messages = $messages;
-		tick().then(() => pane && (pane.scrollTop = pane.scrollHeight));
-
-		try {
-			event.content = await encrypt({ message, recipient: subject.pubkey, user });
-			await sign({ event, user });
-			await send(event);
-
-			sent = true;
-		} catch (e) {
-			fail('Failed to send message');
-			delete $messages[user.pubkey][subject.pubkey][event.id];
-			$messages = $messages;
-		}
-
-		message = '';
-		submitting = false;
-	};
-</script>
-
-<div class="container max-w-lg px-4 mx-auto mt-10 space-y-5">
-	<h1 class="px-3 md:px-0 text-center text-3xl md:text-4xl font-semibold">
-		{$t('payments.sendMessage')}
-	</h1>
-
-	<div class="max-h-[calc(50vh)] overflow-y-scroll p-4" bind:this={pane}>
-		{#each events as data}
-			{@const ours = data.pubkey === user.pubkey}
-			{@const theirs = !ours}
-			<div class="rounded-2xl p-4 max-w-[300px] mb-1 text-md" class:ours class:theirs>
-				{#if data.message}
-					{data.message}
-				{:else}
-					-
-				{/if}
-			</div>
-			<div class="text-sm text-gray-400 mb-6" class:text-right={ours}>
-				{format(new Date(data.created_at * 1000), 'MMM d')},
-				{format(new Date(data.created_at * 1000), 'h:mm aa')}
-			</div>
-		{/each}
-	</div>
-
-	<form method="POST" class="space-y-5" on:submit|preventDefault={submit}>
-		<input type="hidden" name="requester_id" value={user.id} />
-		<input type="hidden" name="recipient" value={subject.username} />
-
-		<input
-			use:focus
-			name="message"
-			placeholder={$t('payments.sendMessage')}
-			class="w-full p-4 border rounded-xl"
-			bind:value={message}
-			bind:this={input}
-		/>
-	</form>
-</div>
-
-<style>
-	.ours {
-		@apply bg-gray-100 rounded-br-none ml-auto;
-	}
-
-	.theirs {
-		@apply bg-gray-200 rounded-bl-none;
-	}
-</style>
diff --git a/src/routes/(app)/[username]/invoice/[hash]/+page.svelte b/src/routes/(app)/[username]/invoice/[hash]/+page.svelte
index b5571f23..2ff92687 100644
--- a/src/routes/(app)/[username]/invoice/[hash]/+page.svelte
+++ b/src/routes/(app)/[username]/invoice/[hash]/+page.svelte
@@ -152,9 +152,9 @@
 	{/if}
 
 	<div class="w-full flex justify-center">
-		<button class="flex rounded-full border py-2 px-5 hover:opacity-80" on:click={() => copy(txt)}>
+		<button class="flex rounded-full border py-3 px-5 hover:opacity-80" on:click={() => copy(txt)}>
 			<Icon icon="copy" style="mr-1" />
-			<div class="text-secondary">{txt.substr(0, 10)}..{txt.substr(-6)}</div></button
+			<div class="text-secondary">{txt.substr(0, 10)}...{txt.substr(-10)}</div></button
 		>
 	</div>
 </div>
diff --git a/src/routes/(app)/[username]/messages/+page.server.js b/src/routes/(app)/[username]/messages/+page.server.js
new file mode 100644
index 00000000..7b651389
--- /dev/null
+++ b/src/routes/(app)/[username]/messages/+page.server.js
@@ -0,0 +1,19 @@
+import { get } from '$lib/utils';
+
+export async function load({ params, parent, url }) {
+	let { user, subject } = await parent();
+	let { since = 0 } = params;
+
+	let messages = [];
+
+	try {
+		messages = await get(`/${user.pubkey}/${since}/messages`);
+		messages = messages
+			.filter((m) => m.recipient.id === subject.id || m.author.id === subject.id)
+			.sort((a, b) => a.created_at - b.created_at);
+	} catch (e) {
+		console.log(`failed to fetch nostr messages`, e);
+	}
+
+	return { messages, user };
+}
diff --git a/src/routes/(app)/[username]/messages/+page.svelte b/src/routes/(app)/[username]/messages/+page.svelte
new file mode 100644
index 00000000..f8f64aea
--- /dev/null
+++ b/src/routes/(app)/[username]/messages/+page.svelte
@@ -0,0 +1,126 @@
+<script>
+	import { browser } from '$app/environment';
+	import { t } from '$lib/translations';
+	import { format, parseISO } from 'date-fns';
+	import { scale } from 'svelte/transition';
+	import { enhance } from '$app/forms';
+	import { Avatar, Icon } from '$comp';
+	import { back, fail, focus } from '$lib/utils';
+	import { sign, send, encrypt, decrypt } from '$lib/nostr';
+	import { event as e, password } from '$lib/store';
+	import { tick, onMount } from 'svelte';
+	import { calculateId } from 'nostr';
+
+	export let data;
+
+	let { messages, subject, user } = data;
+	let input, pane, ready;
+
+	$: initialize($password);
+	let initialize = async (p) => {
+		if (!p) return;
+		ready = true;
+		tick().then(() => pane && (pane.scrollTop = pane.scrollHeight));
+	};
+
+	e.subscribe((ev) => {
+		if (ev?.recipient.id === user.id && !~messages.findIndex((m) => m.id === ev.id)) {
+			messages.push(ev);
+			messages = messages;
+			tick().then(() => pane && (pane.scrollTop = pane.scrollHeight));
+		}
+	});
+
+	let sent, submitting, message;
+	let submit = async () => {
+		submitting = true;
+
+		let event = {
+			pubkey: user.pubkey,
+			created_at: Math.floor(Date.now() / 1000),
+			kind: 4,
+			tags: [['p', subject.pubkey]]
+		};
+
+		event.message = message;
+		event.id = await calculateId(event);
+		tick().then(() => pane && (pane.scrollTop = pane.scrollHeight));
+
+		try {
+			event.content = await encrypt({ message, recipient: subject.pubkey, user });
+			event.author = user;
+			event.recipient = subject;
+			await sign({ event, user });
+			await send(event);
+			messages.push(event);
+			messages = messages;
+			tick().then(() => pane && (pane.scrollTop = pane.scrollHeight));
+
+			sent = true;
+		} catch (e) {
+			fail('Failed to send message');
+		}
+
+		message = '';
+		submitting = false;
+	};
+</script>
+
+<div class="container max-w-xl mx-auto px-4">
+	{#if messages.length && ready}
+		<div
+			class="max-h-[calc(40vh)] overflow-y-scroll scrollbar-thin scrollbar-thumb-[#F2F6FC] scrollbar-track-white pr-8"
+			bind:this={pane}
+		>
+			{#each messages as event}
+				{@const ours = event.pubkey === user.pubkey}
+				{@const theirs = !ours}
+				<div class="flex gap-2" class:flex-row-reverse={theirs} class:justify-end={theirs}>
+					<div
+						class="rounded-2xl px-4 py-2 max-w-[300px] mb-1 text-lg"
+						class:ours
+						class:theirs
+						:key={event.id}
+					>
+						{#await decrypt({ event, user })}
+							-
+						{:then message}
+							{message}
+						{/await}
+					</div>
+					<div class="mt-auto">
+						<Avatar user={event.author} size={'12'} />
+					</div>
+				</div>
+				<div class="text-sm text-gray-400 mb-6" class:text-right={ours}>
+					{format(new Date(event.created_at * 1000), 'MMM d')},
+					{format(new Date(event.created_at * 1000), 'h:mm aa')}
+				</div>
+			{/each}
+		</div>
+	{/if}
+
+	<form method="POST" class="space-y-5" on:submit|preventDefault={submit}>
+		<input type="hidden" name="requester_id" value={user.id} />
+		<input type="hidden" name="recipient" value={subject.username} />
+
+		<input
+			use:focus
+			name="message"
+			placeholder={$t('payments.sendMessage')}
+			class="w-full p-4 border rounded-xl outline-none"
+			bind:value={message}
+			bind:this={input}
+		/>
+	</form>
+</div>
+
+<style>
+	.ours {
+		@apply bg-gradient-to-r from-[#F2F6FC] to-[#E1E3FF] text-black rounded-br-none ml-auto;
+	}
+
+	.theirs {
+		@apply bg-gray-100 text-black rounded-bl-none;
+	}
+</style>
diff --git a/src/routes/(app)/[username]/payments/[...page]/+page.svelte b/src/routes/(app)/[username]/payments/[...page]/+page.svelte
index 2068c306..aacba81e 100644
--- a/src/routes/(app)/[username]/payments/[...page]/+page.svelte
+++ b/src/routes/(app)/[username]/payments/[...page]/+page.svelte
@@ -182,7 +182,7 @@
 							{:else if p.with}
 								<div class="flex">
 									<div class="my-auto">
-										<Avatar user={p.with} size={12} disabled={true} />
+										<Avatar user={p.with} size={16} disabled={true} />
 									</div>
 									<div class="my-auto ml-1 text-secondary">{p.with.username}</div>
 								</div>
diff --git a/src/routes/(app)/buy/+page.svelte b/src/routes/(app)/buy/+page.svelte
index 323d5ef0..2f556ada 100644
--- a/src/routes/(app)/buy/+page.svelte
+++ b/src/routes/(app)/buy/+page.svelte
@@ -1,13 +1,33 @@
 <script>
 	import { enhance } from '$app/forms';
 	import { Icon, Lock, Card, Calendar, Spinner } from '$comp';
+	import { animatedRate, selectedRate } from '$lib/store';
+	import { f } from '$lib/utils';
 
 	export let data, form;
 
-	let { username } = data.user;
+	let { username, currency } = data.user;
 	let loading;
 
 	let amount, n, d, cvc;
+
+	let ease = (t) => (t < 0.5 ? 8 * t * t * t * t : 1 - 8 * --t * t * t * t);
+	let i;
+
+	let o = $selectedRate;
+	$: animate($selectedRate);
+	let animate = (n) => {
+		clearInterval(i);
+
+		let t = 0;
+		let d = o - n;
+
+		i = setInterval(() => {
+			$animatedRate = (o - d * ease(t / 100)).toFixed(2);
+			if (t > 80) (o = n) && clearInterval(i);
+			t++;
+		}, 10);
+	};
 </script>
 
 <div class="container px-4 max-w-xl mx-auto mt-10 space-y-5">
@@ -114,6 +134,17 @@
 					</button>
 				</div>
 			</form>
+
+			<div class="flex">
+				<div class="text-secondary flex mr-auto">
+					<div class="flex mr-1">
+						<div class="my-auto mr-1">1</div>
+						<img src="/images/bitcoin.svg" class="w-5 my-auto" alt="Bitcoin" />
+					</div>
+					<div>= {f($animatedRate, currency)}</div>
+				</div>
+				<p class="text-secondary">3% credit card fee applies</p>
+			</div>
 		</div>
 	</div>
 </div>
diff --git a/src/routes/(app)/login/+page.svelte b/src/routes/(app)/login/+page.svelte
index 9a1e41da..75998cd0 100644
--- a/src/routes/(app)/login/+page.svelte
+++ b/src/routes/(app)/login/+page.svelte
@@ -1,5 +1,4 @@
 <script>
-	import { messages } from '$lib/store';
 	import { RegisterOrLogin } from '$comp';
 
 	export let form;
diff --git a/src/routes/(app)/payment/[id]/+page.svelte b/src/routes/(app)/payment/[id]/+page.svelte
index 8125c63c..2988ddb5 100644
--- a/src/routes/(app)/payment/[id]/+page.svelte
+++ b/src/routes/(app)/payment/[id]/+page.svelte
@@ -18,7 +18,7 @@
 	<Icon icon="arrow-left" style="w-10" />
 </button>
 
-<div class="container mx-auto max-w-lg px-4 space-y-2 sm:space-y-5 break-all text-2xl">
+<div class="container mx-auto max-w-lg px-4 space-y-8 break-all text-2xl">
 	<h1 class="px-3 md:px-0 text-center text-3xl md:text-4xl font-semibold mb-10">
 		{$t(amount < 0 ? 'payments.sent' : 'payments.received')}
 	</h1>
@@ -28,7 +28,7 @@
 			<span class="text-lg text-secondary my-auto mr-2">{amount > 0 ? 'From' : 'To'}</span>
 			<div class="flex">
 				<div class="my-auto">
-					<Avatar user={p.with} />
+					<Avatar user={p.with} size={20} />
 				</div>
 				<div class="my-auto ml-1 text-secondary">{p.with.username}</div>
 			</div>
@@ -69,20 +69,12 @@
 		</div>
 	</div>
 
-	{#if type === 'lightning'}
-		<div>
-			<span class="text-lg text-secondary">Proof</span>
-			<div class="font-bold">{$t('payments.preimage')}</div>
-			<div>
-				{ref}
-			</div>
-		</div>
-	{:else if type === 'bitcoin'}
+	{#if type === 'bitcoin'}
 		<div>
 			<span class="text-lg text-secondary">Txid</span>
 			<div class="flex">
 				<div>
-					<a href={`${expl}/payment/${id}`} target="_blank" rel="noreferrer">{id}</a>
+					<a href={`${expl}/tx/${id}`} target="_blank" rel="noreferrer">{id}</a>
 				</div>
 				<button class="flex font-bold hover:opacity-80 mb-auto my-auto" on:click={() => copy(id)}
 					><Icon icon="copy" style="ml-2 w-20 my-auto" />
-- 
cgit v1.2.3