From 6c31cea7d17856a0d0d2f6cb71e3e4f6c0e24d74 Mon Sep 17 00:00:00 2001
From: Adam Soltys <asoltys@gmail.com>
Date: Sat, 4 Mar 2023 09:47:46 -0800
Subject: experimenting

---
 .../(app)/[username]/(profile)/+layout.svelte      |  58 ++++-
 src/routes/(app)/[username]/(profile)/+page.svelte |  41 +---
 .../[username]/(profile)/messages/+page.server.js  |  19 ++
 .../[username]/(profile)/messages/+page.svelte     | 192 ++++++++++++++++
 .../(profile)/payments/[...page]/+page.server.js   |  24 ++
 .../(profile)/payments/[...page]/+page.svelte      | 241 ++++++++++++++++++++
 .../(profile)/payments/[...page]/+server.js        |  18 ++
 src/routes/(app)/[username]/address/+page.svelte   |   5 +-
 .../(app)/[username]/messages/+page.server.js      |  19 --
 src/routes/(app)/[username]/messages/+page.svelte  | 171 --------------
 .../[username]/payments/[...page]/+page.server.js  |  24 --
 .../[username]/payments/[...page]/+page.svelte     | 245 ---------------------
 .../(app)/[username]/payments/[...page]/+server.js |  18 --
 13 files changed, 545 insertions(+), 530 deletions(-)
 create mode 100644 src/routes/(app)/[username]/(profile)/messages/+page.server.js
 create mode 100644 src/routes/(app)/[username]/(profile)/messages/+page.svelte
 create mode 100644 src/routes/(app)/[username]/(profile)/payments/[...page]/+page.server.js
 create mode 100644 src/routes/(app)/[username]/(profile)/payments/[...page]/+page.svelte
 create mode 100644 src/routes/(app)/[username]/(profile)/payments/[...page]/+server.js
 delete mode 100644 src/routes/(app)/[username]/messages/+page.server.js
 delete mode 100644 src/routes/(app)/[username]/messages/+page.svelte
 delete mode 100644 src/routes/(app)/[username]/payments/[...page]/+page.server.js
 delete mode 100644 src/routes/(app)/[username]/payments/[...page]/+page.svelte
 delete mode 100644 src/routes/(app)/[username]/payments/[...page]/+server.js

(limited to 'src')

diff --git a/src/routes/(app)/[username]/(profile)/+layout.svelte b/src/routes/(app)/[username]/(profile)/+layout.svelte
index 02181c1b..ec37867c 100644
--- a/src/routes/(app)/[username]/(profile)/+layout.svelte
+++ b/src/routes/(app)/[username]/(profile)/+layout.svelte
@@ -4,6 +4,7 @@
 	import { Icon } from '$comp';
 	import { t } from '$lib/translations';
 	import { sign, send } from '$lib/nostr';
+	import { page } from '$app/stores';
 
 	export let data;
 	let events, user, subject, src, text;
@@ -59,12 +60,23 @@
 			t++;
 		}, 10);
 	};
+
+	$: paymentsTab = $page.url.pathname.includes('payments');
+	$: messagesTab = $page.url.pathname.includes('messages');
 </script>
 
 <div class="container mx-auto w-full px-4 flex flex-wrap lg:flex-nowrap">
 	<div class="hidden lg:block w-[240px] lg:mr-10" />
 	<div class="w-[240px] lg:absolute space-y-3 left-20 mx-auto lg:mr-10 mb-10">
-		<h1 class="text-3xl font-bold text-center mx-auto">{display || username}</h1>
+		<a href={`/${subject.username}/address`}>
+			<div>
+				<h1 class="text-3xl font-bold text-center mx-auto">{display || username}</h1>
+				<div class="text-center">
+					<div class="my-auto ml-1">{username}@coinos.io</div>
+				</div>
+			</div>
+		</a>
+
 		<div class="text-secondary mx-auto text-center lg:text-left lg:mx-0">
 			{subject.address && subject.address !== 'null' ? subject.address : ''}
 		</div>
@@ -80,15 +92,6 @@
 			>
 		</div>
 
-		<div class="flex flex-wrap justify-center">
-			<a href={`/${subject.username}/address`}>
-				<button class="justify-center font-bold flex rounded-full py-3 px-5 hover:opacity-80">
-					<div>⚡️</div>
-					<div class="my-auto ml-1">{username}@coinos.io</div>
-				</button>
-			</a>
-		</div>
-
 		<div class="flex flex-wrap gap-2 w-full">
 			{#if user && user.username !== subject.username && pubkey}
 				{#if following}
@@ -120,6 +123,41 @@
 
 	<div class="w-full">
 		<div class="mx-auto space-y-5 lg:max-w-lg xl:max-w-2xl">
+			<div class="font-bold flex justify-center items-center border-b pb-3 text-secondary">
+				<a href={`/${username}/payments`} class="w-full">
+					<div class="relative">
+						<button class="mx-auto flex hover:opacity-80" class:text-black={paymentsTab}>
+							Feed
+						</button>
+						<div
+							class="absolute w-full border-b-4 border-black -bottom-3"
+							class:hidden={!paymentsTab}
+						/>
+					</div>
+				</a>
+				<a href={`/${username}/payments`} class="w-full">
+					<div class="relative">
+						<button class="mx-auto flex hover:opacity-80" class:text-black={paymentsTab}>
+							Payments
+						</button>
+						<div
+							class="absolute w-full border-b-4 border-black -bottom-3"
+							class:hidden={!paymentsTab}
+						/>
+					</div>
+				</a>
+				<a href={`/${username}/messages`} class="w-full">
+					<div class="relative">
+						<button class="mx-auto flex hover:opacity-80 relative" class:text-black={messagesTab}>
+							Messages
+						</button>
+						<div
+							class="absolute w-full border-b-4 border-black -bottom-3"
+							class:hidden={!messagesTab}
+						/>
+					</div>
+				</a>
+			</div>
 			<slot />
 		</div>
 	</div>
diff --git a/src/routes/(app)/[username]/(profile)/+page.svelte b/src/routes/(app)/[username]/(profile)/+page.svelte
index 570029dd..a0be8a0d 100644
--- a/src/routes/(app)/[username]/(profile)/+page.svelte
+++ b/src/routes/(app)/[username]/(profile)/+page.svelte
@@ -11,7 +11,7 @@
 	let { messages, notes, invoices, sent, received, subject, user } = data;
 	$: refresh(data);
 	let refresh = (d) => ({ messages, notes, invoices, sent, received, subject, user } = d);
-  let { pubkey, npub, username } = subject;
+	let { pubkey, npub, username } = subject;
 
 	let keys = new Set();
 	let latest = [];
@@ -56,7 +56,7 @@
 <div class="space-y-5">
 	{#if user?.id === subject.id}
 		<div>
-			<div class="flex justify-center lg:justify-start">
+			<div class="flex justify-center lg:justify-start my-10">
 				<Balance {user} />
 			</div>
 			{#if !user.balance}
@@ -98,23 +98,6 @@
 				</div>
 			{/if}
 		</div>
-	{:else}
-		<div class="font-bold flex justify-around items-center border-b pb-3 text-secondary">
-			<a href={`/${username}/payments`}>
-        <button class="flex hover:opacity-80" class:text-black={false}>
-          <div>⚡️</div>
-            <div>Payments</div>
-        </button>
-			</a>
-			<a href={`/${username}/notes`}>
-        <button class="flex hover:opacity-80" class:text-black={true}>
-						<Icon icon="nostr" style="mr-1 w-6" />
-            <div>Notes</div>
-        </button>
-			</a>
-		</div>
-
-
 	{/if}
 
 	{#if invoices.length}
@@ -186,26 +169,6 @@
 		</div>
 	{/if}
 
-	{#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>
-				</a>
-			{/each}
-		</div>
-	{/if}
 </div>
 
 <style>
diff --git a/src/routes/(app)/[username]/(profile)/messages/+page.server.js b/src/routes/(app)/[username]/(profile)/messages/+page.server.js
new file mode 100644
index 00000000..7b651389
--- /dev/null
+++ b/src/routes/(app)/[username]/(profile)/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]/(profile)/messages/+page.svelte b/src/routes/(app)/[username]/(profile)/messages/+page.svelte
new file mode 100644
index 00000000..9ab95433
--- /dev/null
+++ b/src/routes/(app)/[username]/(profile)/messages/+page.svelte
@@ -0,0 +1,192 @@
+<script>
+	import { cubicInOut } from 'svelte/easing';
+	import { browser } from '$app/environment';
+	import { t } from '$lib/translations';
+	import { format } from 'date-fns';
+	import { scale, fade, fly } 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;
+
+	function fadeScale(node, { delay = 0, duration = 200, easing = (x) => x, baseScale = 0 }) {
+		const o = +getComputedStyle(node).opacity;
+		const m = getComputedStyle(node).transform.match(/scale\(([0-9.]+)\)/);
+		const s = m ? m[1] : 1;
+		const is = 1 - baseScale;
+
+		return {
+			delay,
+			duration,
+			css: (t) => {
+				const eased = easing(t);
+				return `opacity: ${eased * o}; transform: scale(${eased * s * is + baseScale})`;
+			}
+		};
+	}
+
+	let latest = [];
+	let { messages, subject, user } = data;
+	let input, pane;
+
+	$: initialize($password);
+	let initialize = async (p) => {
+		if (!p) return;
+		await Promise.all(
+			messages.map(async (event) => (event.message = await decrypt({ event, user })))
+		);
+
+		messages = messages;
+		tick().then(() => pane && (pane.scrollTop = pane.scrollHeight));
+	};
+
+	e.subscribe(async (event) => {
+		let found = ~messages.findIndex((m) => m.id === event?.id);
+		if (event?.recipient.id === user.id && !found) {
+			event.message = await decrypt({ event, user });
+			messages.push(event);
+			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;
+
+		message = '';
+
+		event.author = user;
+		event.recipient = subject;
+
+		messages.push(event);
+		messages = messages;
+		tick().then(() => pane && (pane.scrollTop = pane.scrollHeight));
+
+		try {
+			event.id = await calculateId(event);
+			event.content = await encrypt({ message: event.message, recipient: subject.pubkey, user });
+			await sign({ event, user });
+			await send(event);
+
+			sent = true;
+		} catch (e) {
+			console.log(e);
+			fail('Failed to send message');
+		}
+
+		message = '';
+		submitting = false;
+	};
+
+	let keydown = (e) => {
+		if (e.key === 'Enter') {
+			e.preventDefault();
+			submit();
+		}
+	};
+</script>
+
+<div class="container max-w-xl mx-auto px-4 space-y-5">
+	{#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>
+				</a>
+			{/each}
+		</div>
+	{/if}
+	<div
+		class="h-[50vh] max-h-[50vh] overflow-y-scroll scrollbar-thin scrollbar-thumb-[#F2F6FC] scrollbar-track-white pr-8"
+		bind:this={pane}
+	>
+		{#each messages as { id, author, message, created_at, pubkey }}
+			{@const ours = pubkey === user.pubkey}
+			{@const theirs = !ours}
+
+			{#if message}
+				<div
+					class="flex gap-2"
+					class:flex-row-reverse={theirs}
+					class:justify-end={theirs}
+					in:fadeScale={{
+						easing: cubicInOut,
+						baseScale: 0.5
+					}}
+				>
+					<div
+						class="rounded-2xl px-4 py-2 max-w-[300px] mb-1 text-lg"
+						class:ours
+						class:theirs
+						:key={id}
+					>
+						{message}
+					</div>
+					<div class="mt-auto">
+						<Avatar user={author} size={'12'} />
+					</div>
+				</div>
+				<div class="text-sm text-gray-400 mb-6" class:text-right={ours}>
+					{format(new Date(created_at * 1000), 'MMM d')},
+					{format(new Date(created_at * 1000), 'h:mm aa')}
+				</div>
+			{/if}
+		{/each}
+	</div>
+
+	<form
+		method="POST"
+		class="w-full border rounded-xl outline-none gap-4 flex p-0 pr-2"
+		on:submit|preventDefault={submit}
+	>
+		<input type="hidden" name="requester_id" value={user.id} />
+		<input type="hidden" name="recipient" value={subject.username} />
+
+		<div
+			use:focus
+			contenteditable
+			class="grow break-all py-4 outline-none mt-0 pl-4"
+			bind:innerHTML={message}
+			on:keydown={keydown}
+		/>
+		<button type="submit" class="my-auto shrink-0">
+			<Icon icon="send" style="w-8" />
+		</button>
+	</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]/(profile)/payments/[...page]/+page.server.js b/src/routes/(app)/[username]/(profile)/payments/[...page]/+page.server.js
new file mode 100644
index 00000000..adc6dac8
--- /dev/null
+++ b/src/routes/(app)/[username]/(profile)/payments/[...page]/+page.server.js
@@ -0,0 +1,24 @@
+import { get, auth } from '$lib/utils';
+
+let limit = 25;
+
+export async function load({ cookies, params, request }) {
+	let parts = params.page.split('/');
+
+	let start, end, page;
+	if (parts.length === 1) [page] = parts;
+	if (parts.length === 2) [start, page] = parts;
+	if (parts.length === 3) [start, end, page] = parts;
+	if (!parseInt(page)) page = 1;
+
+	let offset = (page - 1) * limit;
+	if (!start) start = Date.now() / 1000 - 24 * 60 * 60;
+
+	let url = `/payments?start=${start * 1000}&limit=${limit}&offset=${offset}`;
+	if (end) url += `&end=${end * 1000}`;
+
+	let { total, payments } = await get(url, auth(cookies));
+	let pages = new Array(Math.ceil(total / limit));
+
+	return { total, payments, page, pages, start, end };
+}
diff --git a/src/routes/(app)/[username]/(profile)/payments/[...page]/+page.svelte b/src/routes/(app)/[username]/(profile)/payments/[...page]/+page.svelte
new file mode 100644
index 00000000..95a3f99c
--- /dev/null
+++ b/src/routes/(app)/[username]/(profile)/payments/[...page]/+page.svelte
@@ -0,0 +1,241 @@
+<script>
+	import { Avatar, Icon } from '$comp';
+	import { onMount } from 'svelte';
+	import { format } from 'date-fns';
+	import { newPayment, payments } from '$lib/store';
+	import { t } from '$lib/translations';
+	import { get, f, s, sat, sats } from '$lib/utils';
+	import { page } from '$app/stores';
+	import { differenceInDays, getUnixTime, sub } from 'date-fns';
+	import { goto, invalidate } from '$app/navigation';
+
+	export let data;
+
+	const types = {
+		internal: 'internal',
+		bitcoin: 'bitcoin',
+		lightning: 'lightning',
+		pot: 'pot',
+		classic: 'classic'
+	};
+
+	let { start, end, user } = data;
+	let change = ({ target: { value } }) => goto(value);
+	let link = (p) => {
+		if (p.pot) return `/pot/${p.pot}`;
+		if (p.with) return '/' + p.with.username;
+		return `/p/${p.id}`;
+	};
+
+	let presets = [
+		{ title: $t('payments.day'), start: sub(new Date(), { days: 1 }), end: null },
+		{ title: $t('payments.week'), start: sub(new Date(), { days: 7 }), end: null },
+		{ title: $t('payments.month'), start: sub(new Date(), { months: 1 }), end: null },
+		{ title: $t('payments.all'), start: sub(new Date(), { years: 5 }), end: null }
+	];
+
+	$: selection = start
+		? presets.findIndex((p) => Math.abs(differenceInDays(new Date(start * 1000), p.start)) < 1)
+		: 0;
+
+	let p,
+		total,
+		pages = [];
+	$: data && ({ page: p, pages, start, end, total, payments: $payments } = data);
+
+	$: $page && ($newPayment = false);
+	$: $newPayment && invalidate(`/users/${user.username}`);
+
+	$: path = $page.params.page
+		? $page.url.pathname.substring(0, $page.url.pathname.lastIndexOf('/'))
+		: $page.url.pathname;
+
+	let csv = async () => {
+		let url = `/${user.username}/payments`;
+		if (start) url += `/${start}`;
+		if (end) url += `/${end}`;
+
+		let { payments } = await get(url);
+
+		payments = payments.map((p) => ({
+			...p,
+			created: new Date(p.created),
+			amount_fiat: f((p.amount * p.rate) / sats, p.currency),
+			fee_fiat: p.fee ? f((p.fee * p.rate) / sats, p.currency) : null,
+			tip_fiat: p.tip ? f((p.tip * p.rate) / sats, p.currency) : null
+		}));
+
+		let keys = [
+			'type',
+			'id',
+			'created',
+			'rate',
+			'currency',
+			'amount',
+			'fee',
+			'tip',
+			'amount_fiat',
+			'fee_fiat',
+			'tip_fiat'
+		];
+
+		let csv =
+			keys.map((k) => `"${k}"`).join(',') +
+			'\n' +
+			payments.map((r) => keys.map((k) => `"${r[k] || ''}"`).join(',')).join('\n');
+
+		let filename = 'payments.csv';
+		let blob = new Blob([csv], { type: 'text/csv;charset=utf-8;' });
+		if (navigator.msSaveBlob) {
+			navigator.msSaveBlob(blob, filename);
+		} else {
+			let link = document.createElement('a');
+			if (link.download !== undefined) {
+				let url = URL.createObjectURL(blob);
+				link.setAttribute('href', url);
+				link.setAttribute('download', filename);
+				link.style.visibility = 'hidden';
+				document.body.appendChild(link);
+				link.click();
+				document.body.removeChild(link);
+			}
+		}
+	};
+</script>
+
+<div class="mt-24 mb-20">
+	<div class="container w-full mx-auto text-lg px-4 max-w-xl space-y-5">
+		<div class="flex text-md text-secondary relative">
+			<div class="mx-auto flex justify-center w-full gap-1">
+				{#each presets as { start, end, title }, i}
+					<a
+						class:active={selection === i}
+						href={`/${user.username}/payments/${getUnixTime(start) + '/'}1`}
+					>
+						<button
+							class="text-sm md:text-lg rounded-full border py-2 px-4 hover:opacity-80 min-w-[72px]"
+						>
+							<div class="my-auto">{title}</div>
+						</button>
+					</a>
+				{/each}
+			</div>
+		</div>
+
+		<div class="flex flex-wrap justify-center mb-8">
+			{#if pages.length > 1}
+				{#each pages as _, i}
+					<a class="mr-1 last:mr-0" href={`${path}/${i + 1}`} class:active={parseInt(p) === i + 1}>
+						<div class="border py-2 rounded-full border-2 w-12 h-12 hover:opacity-80 text-center">
+							{i + 1}
+						</div>
+					</a>
+				{/each}
+			{/if}
+		</div>
+
+		<div class="text-base">
+			{#each $payments as p}
+				<a href={`/payment/${p.id}`}>
+					<div class="grid grid-cols-3 border-b h-24 hover:bg-gray-100 px-4">
+						<div class="whitespace-nowrap my-auto">
+							<div class="font-bold">
+								{f(p.amount * (p.rate / sats), p.currency)}
+
+								{#if p.tip}
+									<span class="text-sm">
+										+{f(p.tip * (p.rate / sats), p.currency)}
+									</span>
+								{/if}
+							</div>
+
+							<div class="text-secondary">
+								{sat(p.amount)}
+
+								{#if p.tip}
+									<span class="text-sm">
+										+{sat(p.tip)}
+									</span>
+								{/if}
+							</div>
+						</div>
+
+						<div class="flex my-auto">
+							{#if p.type === types.pot}
+								<a href={`/pot/${p.pot}`}>
+									<div class="text-secondary flex">
+										<div class="my-auto mr-1">
+											<img
+												src="/icons/logo-symbol.svg"
+												class="w-12 border-4 border-transparent"
+												alt="Pot"
+											/>
+										</div>
+
+										<div class="my-auto">Pot</div>
+									</div>
+								</a>
+							{:else if p.with}
+								<div class="flex">
+									<div class="my-auto">
+										<Avatar user={p.with} size={16} disabled={true} />
+									</div>
+									<div class="my-auto ml-1 text-secondary">{p.with.username}</div>
+								</div>
+							{:else if p.type === types.classic}
+								<img
+									src="/images/classic.png"
+									class="w-24 border-4 border-transparent mr-1"
+									alt="Bitcoin"
+								/>
+								<div class="my-auto text-secondary">{p.memo}</div>
+							{:else}
+								<div class="text-secondary flex">
+									{#if p.type === types.lightning}
+										<div class="text-3xl">⚡️</div>
+									{:else if p.type === types.bitcoin}
+										<div class="my-auto mr-1">
+											<img
+												src="/images/bitcoin.svg"
+												class="w-12 border-4 border-transparent"
+												alt="Bitcoin"
+											/>
+										</div>
+									{/if}
+
+									<div class="my-auto">
+										{p.amount > 0 ? (p.confirmed ? 'Received' : 'Pending') : 'Sent'}
+									</div>
+								</div>
+							{/if}
+						</div>
+
+						<div class="text-secondary text-right text-sm my-auto">
+							<div>
+								{format(new Date(p.created), 'h:mm aaa')}
+							</div>
+							<div>
+								{format(new Date(p.created), 'MMM d')}
+							</div>
+						</div>
+					</div>
+				</a>
+			{:else}
+				<p class="text-secondary text-lg text-center">{$t('payments.empty')}</p>
+			{/each}
+		</div>
+		<button
+			class="ml-auto rounded-full border py-2 px-4 w-36 hover:opacity-80 flex mx-auto"
+			on:click={csv}
+		>
+			<Icon icon="save" style="opacity-50 mr-2 my-auto" />
+			<div class="my-auto">{$t('payments.export')}</div>
+		</button>
+	</div>
+</div>
+
+<style>
+	.active * {
+		@apply bg-black text-white border-black;
+	}
+</style>
diff --git a/src/routes/(app)/[username]/(profile)/payments/[...page]/+server.js b/src/routes/(app)/[username]/(profile)/payments/[...page]/+server.js
new file mode 100644
index 00000000..c7c5222d
--- /dev/null
+++ b/src/routes/(app)/[username]/(profile)/payments/[...page]/+server.js
@@ -0,0 +1,18 @@
+import { get, auth } from '$lib/utils';
+import { json } from '@sveltejs/kit';
+
+export async function GET({ cookies, params }) {
+	let parts = params.page.split('/');
+
+	let start, end;
+	if (parts.length === 1) [start] = parts;
+	if (parts.length === 2) [start, end] = parts;
+
+	if (!start) start = Date.now() / 1000 - 24 * 60 * 60;
+
+	let url = `/payments?start=${start * 1000}`;
+	if (end) url += `&end=${end * 1000}`;
+
+	let { payments } = await get(url, auth(cookies));
+	return json({ payments });
+}
diff --git a/src/routes/(app)/[username]/address/+page.svelte b/src/routes/(app)/[username]/address/+page.svelte
index fa4d8303..39a5254c 100644
--- a/src/routes/(app)/[username]/address/+page.svelte
+++ b/src/routes/(app)/[username]/address/+page.svelte
@@ -12,7 +12,6 @@
 
 <div class="space-y-8 container px-4 mx-auto my-20">
 	<p class="text-secondary text-lg text-center">
-		This
 		<a class="font-bold" href="https://lightningaddress.com/" target="_blank" rel="noreferrer">
 			⚡️ lightning address
 		</a>
@@ -27,12 +26,10 @@
 			nostr
       identifier
 		</a>
-     
-      can receive both money and messages
 	</p>
 	<div class="relative flex">
 		<div class="flex mx-auto w-[360px] h-[360px]">
-			<img {src} class="w-[300px] h-[300px] mx-auto z-10 mt-[20px]" bind:this={qr} alt={text} />
+      <img {src} class="w-[300px] h-[300px] mx-auto cursor-pointer z-10 mt-[20px]" bind:this={qr} alt={text} on:click={() => copy(text)} />
 		</div>
 		<div
 			class="absolute m-auto left-0 right-0 w-[340px] h-[340px] rounded-full bg-gradient-to-r from-[#F2F6FC] to-[#E1E3FF] z-0"
diff --git a/src/routes/(app)/[username]/messages/+page.server.js b/src/routes/(app)/[username]/messages/+page.server.js
deleted file mode 100644
index 7b651389..00000000
--- a/src/routes/(app)/[username]/messages/+page.server.js
+++ /dev/null
@@ -1,19 +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(`/${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
deleted file mode 100644
index 7a10d605..00000000
--- a/src/routes/(app)/[username]/messages/+page.svelte
+++ /dev/null
@@ -1,171 +0,0 @@
-<script>
-	import { cubicInOut } from 'svelte/easing';
-	import { browser } from '$app/environment';
-	import { t } from '$lib/translations';
-	import { format } from 'date-fns';
-	import { scale, fade, fly } 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;
-
-	function fadeScale(node, { delay = 0, duration = 200, easing = (x) => x, baseScale = 0 }) {
-		const o = +getComputedStyle(node).opacity;
-		const m = getComputedStyle(node).transform.match(/scale\(([0-9.]+)\)/);
-		const s = m ? m[1] : 1;
-		const is = 1 - baseScale;
-
-		return {
-			delay,
-			duration,
-			css: (t) => {
-				const eased = easing(t);
-				return `opacity: ${eased * o}; transform: scale(${eased * s * is + baseScale})`;
-			}
-		};
-	}
-
-	let { messages, subject, user } = data;
-	let input, pane;
-
-	$: initialize($password);
-	let initialize = async (p) => {
-		if (!p) return;
-		await Promise.all(
-			messages.map(async (event) => (event.message = await decrypt({ event, user })))
-		);
-
-		messages = messages;
-		tick().then(() => pane && (pane.scrollTop = pane.scrollHeight));
-	};
-
-	e.subscribe(async (event) => {
-		let found = ~messages.findIndex((m) => m.id === event?.id);
-		if (event?.recipient.id === user.id && !found) {
-			event.message = await decrypt({ event, user });
-			messages.push(event);
-			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;
-
-		message = '';
-
-		event.author = user;
-		event.recipient = subject;
-
-		messages.push(event);
-		messages = messages;
-		tick().then(() => pane && (pane.scrollTop = pane.scrollHeight));
-
-		try {
-			event.id = await calculateId(event);
-			event.content = await encrypt({ message: event.message, recipient: subject.pubkey, user });
-			await sign({ event, user });
-			await send(event);
-
-			sent = true;
-		} catch (e) {
-			console.log(e);
-			fail('Failed to send message');
-		}
-
-		message = '';
-		submitting = false;
-	};
-
-	let keydown = (e) => {
-		if (e.key === 'Enter') {
-			e.preventDefault();
-			submit();
-		}
-	};
-</script>
-
-<div class="container max-w-xl mx-auto px-4 space-y-5">
-	<div
-		class="h-[50vh] max-h-[50vh] overflow-y-scroll scrollbar-thin scrollbar-thumb-[#F2F6FC] scrollbar-track-white pr-8"
-		bind:this={pane}
-	>
-		{#each messages as { id, author, message, created_at, pubkey }}
-			{@const ours = pubkey === user.pubkey}
-			{@const theirs = !ours}
-
-			{#if message}
-				<div
-					class="flex gap-2"
-					class:flex-row-reverse={theirs}
-					class:justify-end={theirs}
-					in:fadeScale={{
-						easing: cubicInOut,
-						baseScale: 0.5
-					}}
-				>
-					<div
-						class="rounded-2xl px-4 py-2 max-w-[300px] mb-1 text-lg"
-						class:ours
-						class:theirs
-						:key={id}
-					>
-						{message}
-					</div>
-					<div class="mt-auto">
-						<Avatar user={author} size={'12'} />
-					</div>
-				</div>
-				<div class="text-sm text-gray-400 mb-6" class:text-right={ours}>
-					{format(new Date(created_at * 1000), 'MMM d')},
-					{format(new Date(created_at * 1000), 'h:mm aa')}
-				</div>
-			{/if}
-		{/each}
-	</div>
-
-	<form
-		method="POST"
-		class="w-full border rounded-xl outline-none gap-4 flex p-0 pr-2"
-		on:submit|preventDefault={submit}
-	>
-		<input type="hidden" name="requester_id" value={user.id} />
-		<input type="hidden" name="recipient" value={subject.username} />
-
-		<div
-			use:focus
-			contenteditable
-			class="grow break-all py-4 outline-none mt-0 pl-4"
-			bind:innerHTML={message}
-			on:keydown={keydown}
-		/>
-		<button type="submit" class="my-auto shrink-0">
-			<Icon icon="send" style="w-8" />
-		</button>
-	</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.server.js b/src/routes/(app)/[username]/payments/[...page]/+page.server.js
deleted file mode 100644
index adc6dac8..00000000
--- a/src/routes/(app)/[username]/payments/[...page]/+page.server.js
+++ /dev/null
@@ -1,24 +0,0 @@
-import { get, auth } from '$lib/utils';
-
-let limit = 25;
-
-export async function load({ cookies, params, request }) {
-	let parts = params.page.split('/');
-
-	let start, end, page;
-	if (parts.length === 1) [page] = parts;
-	if (parts.length === 2) [start, page] = parts;
-	if (parts.length === 3) [start, end, page] = parts;
-	if (!parseInt(page)) page = 1;
-
-	let offset = (page - 1) * limit;
-	if (!start) start = Date.now() / 1000 - 24 * 60 * 60;
-
-	let url = `/payments?start=${start * 1000}&limit=${limit}&offset=${offset}`;
-	if (end) url += `&end=${end * 1000}`;
-
-	let { total, payments } = await get(url, auth(cookies));
-	let pages = new Array(Math.ceil(total / limit));
-
-	return { total, payments, page, pages, start, end };
-}
diff --git a/src/routes/(app)/[username]/payments/[...page]/+page.svelte b/src/routes/(app)/[username]/payments/[...page]/+page.svelte
deleted file mode 100644
index a502f8c3..00000000
--- a/src/routes/(app)/[username]/payments/[...page]/+page.svelte
+++ /dev/null
@@ -1,245 +0,0 @@
-<script>
-	import { Avatar, Icon } from '$comp';
-	import { onMount } from 'svelte';
-	import { format } from 'date-fns';
-	import { newPayment, payments } from '$lib/store';
-	import { t } from '$lib/translations';
-	import { get, f, s, sat, sats } from '$lib/utils';
-	import { page } from '$app/stores';
-	import { differenceInDays, getUnixTime, sub } from 'date-fns';
-	import { goto, invalidate } from '$app/navigation';
-
-	export let data;
-
-	const types = {
-		internal: 'internal',
-		bitcoin: 'bitcoin',
-		lightning: 'lightning',
-		pot: 'pot',
-		classic: 'classic'
-	};
-
-	let { start, end, user } = data;
-	let change = ({ target: { value } }) => goto(value);
-	let link = (p) => {
-		if (p.pot) return `/pot/${p.pot}`;
-		if (p.with) return '/' + p.with.username;
-		return `/p/${p.id}`;
-	};
-
-	let presets = [
-		{ title: $t('payments.day'), start: sub(new Date(), { days: 1 }), end: null },
-		{ title: $t('payments.week'), start: sub(new Date(), { days: 7 }), end: null },
-		{ title: $t('payments.month'), start: sub(new Date(), { months: 1 }), end: null },
-		{ title: $t('payments.all'), start: sub(new Date(), { years: 5 }), end: null }
-	];
-
-	$: selection = start
-		? presets.findIndex((p) => Math.abs(differenceInDays(new Date(start * 1000), p.start)) < 1)
-		: 0;
-
-	let p,
-		total,
-		pages = [];
-	$: data && ({ page: p, pages, start, end, total, payments: $payments } = data);
-
-	$: $page && ($newPayment = false);
-	$: $newPayment && invalidate(`/users/${user.username}`);
-
-	$: path = $page.params.page
-		? $page.url.pathname.substring(0, $page.url.pathname.lastIndexOf('/'))
-		: $page.url.pathname;
-
-	let csv = async () => {
-		let url = `/${user.username}/payments`;
-		if (start) url += `/${start}`;
-		if (end) url += `/${end}`;
-
-		let { payments } = await get(url);
-
-		payments = payments.map((p) => ({
-			...p,
-			created: new Date(p.created),
-			amount_fiat: f((p.amount * p.rate) / sats, p.currency),
-			fee_fiat: p.fee ? f((p.fee * p.rate) / sats, p.currency) : null,
-			tip_fiat: p.tip ? f((p.tip * p.rate) / sats, p.currency) : null
-		}));
-
-		let keys = [
-			'type',
-			'id',
-			'created',
-			'rate',
-			'currency',
-			'amount',
-			'fee',
-			'tip',
-			'amount_fiat',
-			'fee_fiat',
-			'tip_fiat'
-		];
-
-		let csv =
-			keys.map((k) => `"${k}"`).join(',') +
-			'\n' +
-			payments.map((r) => keys.map((k) => `"${r[k] || ''}"`).join(',')).join('\n');
-
-		let filename = 'payments.csv';
-		let blob = new Blob([csv], { type: 'text/csv;charset=utf-8;' });
-		if (navigator.msSaveBlob) {
-			navigator.msSaveBlob(blob, filename);
-		} else {
-			let link = document.createElement('a');
-			if (link.download !== undefined) {
-				let url = URL.createObjectURL(blob);
-				link.setAttribute('href', url);
-				link.setAttribute('download', filename);
-				link.style.visibility = 'hidden';
-				document.body.appendChild(link);
-				link.click();
-				document.body.removeChild(link);
-			}
-		}
-	};
-</script>
-
-<div class="mt-24 mb-20">
-	<h1 class="px-3 md:px-0 text-center text-3xl md:text-4xl font-semibold mb-10">
-		{$t('payments.header')}
-	</h1>
-
-	<div class="container w-full mx-auto text-lg px-4 max-w-xl space-y-5">
-		<div class="flex text-md text-secondary relative">
-			<div class="mx-auto flex justify-center w-full gap-1">
-				{#each presets as { start, end, title }, i}
-					<a
-						class:active={selection === i}
-						href={`/${user.username}/payments/${getUnixTime(start) + '/'}1`}
-					>
-						<button
-							class="text-sm md:text-lg rounded-full border py-2 px-4 hover:opacity-80 min-w-[72px]"
-						>
-							<div class="my-auto">{title}</div>
-						</button>
-					</a>
-				{/each}
-			</div>
-		</div>
-
-		<div class="flex flex-wrap justify-center mb-8">
-			{#if pages.length > 1}
-				{#each pages as _, i}
-					<a class="mr-1 last:mr-0" href={`${path}/${i + 1}`} class:active={parseInt(p) === i + 1}>
-						<div class="border py-2 rounded-full border-2 w-12 h-12 hover:opacity-80 text-center">
-							{i + 1}
-						</div>
-					</a>
-				{/each}
-			{/if}
-		</div>
-
-		<div class="text-base">
-			{#each $payments as p}
-				<a href={`/payment/${p.id}`}>
-					<div class="grid grid-cols-3 border-b h-24 hover:bg-gray-100 px-4">
-						<div class="whitespace-nowrap my-auto">
-							<div class="font-bold">
-								{f(p.amount * (p.rate / sats), p.currency)}
-
-								{#if p.tip}
-									<span class="text-sm">
-										+{f(p.tip * (p.rate / sats), p.currency)}
-									</span>
-								{/if}
-							</div>
-
-							<div class="text-secondary">
-								{sat(p.amount)}
-
-								{#if p.tip}
-									<span class="text-sm">
-										+{sat(p.tip)}
-									</span>
-								{/if}
-							</div>
-						</div>
-
-						<div class="flex my-auto">
-							{#if p.type === types.pot}
-								<a href={`/pot/${p.pot}`}>
-									<div class="text-secondary flex">
-										<div class="my-auto mr-1">
-											<img
-												src="/icons/logo-symbol.svg"
-												class="w-12 border-4 border-transparent"
-												alt="Pot"
-											/>
-										</div>
-
-										<div class="my-auto">Pot</div>
-									</div>
-								</a>
-							{:else if p.with}
-								<div class="flex">
-									<div class="my-auto">
-										<Avatar user={p.with} size={16} disabled={true} />
-									</div>
-									<div class="my-auto ml-1 text-secondary">{p.with.username}</div>
-								</div>
-							{:else if p.type === types.classic}
-								<img
-									src="/images/classic.png"
-									class="w-24 border-4 border-transparent mr-1"
-									alt="Bitcoin"
-								/>
-								<div class="my-auto text-secondary">{p.memo}</div>
-							{:else}
-								<div class="text-secondary flex">
-									{#if p.type === types.lightning}
-										<div class="text-3xl">⚡️</div>
-									{:else if p.type === types.bitcoin}
-										<div class="my-auto mr-1">
-											<img
-												src="/images/bitcoin.svg"
-												class="w-12 border-4 border-transparent"
-												alt="Bitcoin"
-											/>
-										</div>
-									{/if}
-
-									<div class="my-auto">
-										{p.amount > 0 ? (p.confirmed ? 'Received' : 'Pending') : 'Sent'}
-									</div>
-								</div>
-							{/if}
-						</div>
-
-						<div class="text-secondary text-right text-sm my-auto">
-							<div>
-								{format(new Date(p.created), 'h:mm aaa')}
-							</div>
-							<div>
-								{format(new Date(p.created), 'MMM d')}
-							</div>
-						</div>
-					</div>
-				</a>
-			{:else}
-				<p class="text-secondary text-lg text-center">{$t('payments.empty')}</p>
-			{/each}
-		</div>
-		<button
-			class="ml-auto rounded-full border py-2 px-4 w-36 hover:opacity-80 flex mx-auto"
-			on:click={csv}
-		>
-			<Icon icon="save" style="opacity-50 mr-2 my-auto" />
-			<div class="my-auto">{$t('payments.export')}</div>
-		</button>
-	</div>
-</div>
-
-<style>
-	.active * {
-		@apply bg-black text-white border-black;
-	}
-</style>
diff --git a/src/routes/(app)/[username]/payments/[...page]/+server.js b/src/routes/(app)/[username]/payments/[...page]/+server.js
deleted file mode 100644
index c7c5222d..00000000
--- a/src/routes/(app)/[username]/payments/[...page]/+server.js
+++ /dev/null
@@ -1,18 +0,0 @@
-import { get, auth } from '$lib/utils';
-import { json } from '@sveltejs/kit';
-
-export async function GET({ cookies, params }) {
-	let parts = params.page.split('/');
-
-	let start, end;
-	if (parts.length === 1) [start] = parts;
-	if (parts.length === 2) [start, end] = parts;
-
-	if (!start) start = Date.now() / 1000 - 24 * 60 * 60;
-
-	let url = `/payments?start=${start * 1000}`;
-	if (end) url += `&end=${end * 1000}`;
-
-	let { payments } = await get(url, auth(cookies));
-	return json({ payments });
-}
-- 
cgit v1.2.3