From 3403bf5c6090109725493b4c7a4fef28266beda8 Mon Sep 17 00:00:00 2001
From: Adam Soltys <asoltys@gmail.com>
Date: Wed, 15 Feb 2023 19:57:47 -0800
Subject: messages on dashboard

---
 src/routes/(app)/buy/+page.server.js |  19 ++++++
 src/routes/(app)/buy/+page.svelte    | 126 +++++++++++++++++++++++++++++++++++
 2 files changed, 145 insertions(+)
 create mode 100644 src/routes/(app)/buy/+page.server.js
 create mode 100644 src/routes/(app)/buy/+page.svelte

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

diff --git a/src/routes/(app)/buy/+page.server.js b/src/routes/(app)/buy/+page.server.js
new file mode 100644
index 00000000..e03d6c0a
--- /dev/null
+++ b/src/routes/(app)/buy/+page.server.js
@@ -0,0 +1,19 @@
+import { env } from '$env/dynamic/private';
+import { error, redirect } from '@sveltejs/kit';
+import { post, auth } from '$lib/utils';
+import { createTicket } from '$lib/ticket';
+
+export const actions = {
+	default: async ({ cookies, request }) => {
+		let form = await request.formData();
+
+		await post('/buy', {
+			number: form.get('number').replace(/\s+/g, ''),
+			month: form.get('expiry').slice(0, 2),
+			year: form.get('expiry').slice(-2),
+			cvc: form.get('cvc')
+		}, auth(cookies));
+
+		throw redirect(307, `/launch/thanks/${asset}`);
+	}
+};
diff --git a/src/routes/(app)/buy/+page.svelte b/src/routes/(app)/buy/+page.svelte
new file mode 100644
index 00000000..34cfc2e5
--- /dev/null
+++ b/src/routes/(app)/buy/+page.svelte
@@ -0,0 +1,126 @@
+<script>
+	import { enhance } from '$app/forms';
+	import { Icon, Lock, Card, Calendar, Spinner } from '$comp';
+
+	export let data;
+
+	let { username } = data.user;
+	let loading;
+
+  let amount = 100;
+	let n = '4242 4242 4242 4242';
+	let d = '10/25';
+	let cvc = 444;
+</script>
+
+<div class="container px-4 max-w-xl mx-auto mt-10 space-y-5">
+	<div class="w-full flex">
+		<a href="/" class="mx-auto">
+			<Icon icon="logo" />
+		</a>
+	</div>
+
+	<div class="flex justify-center items-center text-center">
+		<div class="shadow-xl rounded-3xl px-10 pt-5 pb-10 space-y-5 w-full mx-5">
+			<div class="relative">
+				<!-- <p class="absolute right-0 top-1 underline"><Icon icon="settings" /></p> -->
+				<h1 class="text-2xl md:text-3xl font-semibold">Buy Bitcoin</h1>
+			</div>
+			<p class="text-secondary">Purchase up to $500 worth of Bitcoin from us.</p>
+
+			<p class="text-secondary">
+				If you want more, try <a href="https://www.kraken.com/" target="_blank" class="text-black"
+					>Kraken</a
+				>
+				or
+				<a href="https://shakepay.com/" target="_blank" class="text-black">ShakePay</a> or ask
+				around at our next
+				<a href="https://www.meetup.com/vancouver-bitcoiners" target="_blank" class="text-black"
+					>meetup</a
+				>.
+			</p>
+
+			<form
+				method="POST"
+				class="flex flex-wrap gap-5 w-full p-5 mt-20"
+				use:enhance={() => {
+					loading = true;
+					return ({ update }) => update() && (loading = false);
+				}}
+			>
+				<input type="hidden" name="username" value={username} />
+
+				<label class="relative w-full flex flex-col">
+					<span class="font-bold mb-3">Amount</span>
+					<input
+						class="rounded-md peer pl-12 pr-2 py-2 border-2 border-gray-200 placeholder-gray-300"
+						type="text"
+						name="number"
+						placeholder="500"
+						bind:value={amount}
+					/>
+					<span class="absolute text-gray-300 bottom-[9px] left-0 translate-x-1/2 w-6">$</span>
+				</label>
+
+				<label class="relative w-full flex flex-col">
+					<span class="font-bold mb-3">Card number</span>
+					<input
+						class="rounded-md peer pl-12 pr-2 py-2 border-2 border-gray-200 placeholder-gray-300"
+						type="text"
+						name="number"
+						placeholder="0000 0000 0000 0000"
+						bind:value={n}
+					/>
+					<Card />
+				</label>
+
+				<label class="relative flex-1 flex flex-col">
+					<span class="font-bold mb-3">Expire date</span>
+					<input
+						class="rounded-md peer pl-12 pr-2 py-2 border-2 border-gray-200 placeholder-gray-300"
+						type="text"
+						name="expiry"
+						placeholder="MM/YY"
+						bind:value={d}
+					/>
+					<Calendar />
+				</label>
+
+				<label class="relative flex-1 flex flex-col">
+					<span class="font-bold flex items-center gap-3 mb-3">
+						CVC/CVV
+						<span class="relative group">
+							<span
+								class="hidden group-hover:flex justify-center items-center px-2 py-1 text-xs absolute -right-2 transform translate-x-full -translate-y-1/2 w-max top-1/2 bg-black text-white"
+							>
+								3-digit number on the back of your card</span
+							>
+						</span>
+					</span>
+					<input
+						class="rounded-md peer pl-12 pr-2 py-2 border-2 border-gray-200 placeholder-gray-300"
+						type="text"
+						name="cvc"
+						placeholder="&bull;&bull;&bull;"
+						bind:value={cvc}
+					/>
+					<Lock />
+				</label>
+
+				<div class="w-full flex mt-8">
+					<button
+						class="bg-black text-white border rounded-full px-8 py-4 font-bold hover:opacity-80 mx-auto text-xl"
+						type="submit"
+						disabled={loading}
+					>
+						{#if loading}
+							<Spinner />
+						{:else}
+							Submit
+						{/if}
+					</button>
+				</div>
+			</form>
+		</div>
+	</div>
+</div>
-- 
cgit v1.2.3


From af598ffa4432706fd518c2fedd6b685f52fd1ae1 Mon Sep 17 00:00:00 2001
From: Adam Soltys <asoltys@gmail.com>
Date: Wed, 15 Feb 2023 22:47:27 -0800
Subject: buy page

---
 src/routes/(app)/buy/+page.server.js | 24 +++++++++++++++--------
 src/routes/(app)/buy/+page.svelte    | 37 ++++++++++++++----------------------
 2 files changed, 30 insertions(+), 31 deletions(-)

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

diff --git a/src/routes/(app)/buy/+page.server.js b/src/routes/(app)/buy/+page.server.js
index e03d6c0a..8a88ed4e 100644
--- a/src/routes/(app)/buy/+page.server.js
+++ b/src/routes/(app)/buy/+page.server.js
@@ -1,5 +1,5 @@
 import { env } from '$env/dynamic/private';
-import { error, redirect } from '@sveltejs/kit';
+import { error, fail, redirect } from '@sveltejs/kit';
 import { post, auth } from '$lib/utils';
 import { createTicket } from '$lib/ticket';
 
@@ -7,13 +7,21 @@ export const actions = {
 	default: async ({ cookies, request }) => {
 		let form = await request.formData();
 
-		await post('/buy', {
-			number: form.get('number').replace(/\s+/g, ''),
-			month: form.get('expiry').slice(0, 2),
-			year: form.get('expiry').slice(-2),
-			cvc: form.get('cvc')
-		}, auth(cookies));
+		let amount = parseFloat(form.get('amount'));
+		if (!amount || amount < 0 || amount > 500) return fail(400, { message: 'Invalid amount' });
 
-		throw redirect(307, `/launch/thanks/${asset}`);
+		await post(
+			'/buy',
+			{
+        amount: form.get('amount'),
+				number: form.get('number').replace(/\s+/g, ''),
+				month: form.get('expiry').slice(0, 2),
+				year: form.get('expiry').slice(-2),
+				cvc: form.get('cvc')
+			},
+			auth(cookies)
+		);
+
+		throw redirect(307, `/${form.get('username')}/payments`);
 	}
 };
diff --git a/src/routes/(app)/buy/+page.svelte b/src/routes/(app)/buy/+page.svelte
index 34cfc2e5..ed803110 100644
--- a/src/routes/(app)/buy/+page.svelte
+++ b/src/routes/(app)/buy/+page.svelte
@@ -2,15 +2,12 @@
 	import { enhance } from '$app/forms';
 	import { Icon, Lock, Card, Calendar, Spinner } from '$comp';
 
-	export let data;
+	export let data, form;
 
 	let { username } = data.user;
 	let loading;
 
-  let amount = 100;
-	let n = '4242 4242 4242 4242';
-	let d = '10/25';
-	let cvc = 444;
+  let amount, n, d, cvc;
 </script>
 
 <div class="container px-4 max-w-xl mx-auto mt-10 space-y-5">
@@ -20,25 +17,18 @@
 		</a>
 	</div>
 
-	<div class="flex justify-center items-center text-center">
+	<div class="flex justify-center items-center">
 		<div class="shadow-xl rounded-3xl px-10 pt-5 pb-10 space-y-5 w-full mx-5">
 			<div class="relative">
-				<!-- <p class="absolute right-0 top-1 underline"><Icon icon="settings" /></p> -->
-				<h1 class="text-2xl md:text-3xl font-semibold">Buy Bitcoin</h1>
+				<h1 class="text-2xl md:text-3xl font-semibold text-center">Buy Bitcoin</h1>
 			</div>
-			<p class="text-secondary">Purchase up to $500 worth of Bitcoin from us.</p>
+			<p class="text-secondary text-center">Purchase up to $500 worth of Bitcoin</p>
 
-			<p class="text-secondary">
-				If you want more, try <a href="https://www.kraken.com/" target="_blank" class="text-black"
-					>Kraken</a
-				>
-				or
-				<a href="https://shakepay.com/" target="_blank" class="text-black">ShakePay</a> or ask
-				around at our next
-				<a href="https://www.meetup.com/vancouver-bitcoiners" target="_blank" class="text-black"
-					>meetup</a
-				>.
-			</p>
+			{#if form?.message}
+				<div class="text-red-600 text-center">
+					{form.message}
+				</div>
+			{/if}
 
 			<form
 				method="POST"
@@ -55,11 +45,12 @@
 					<input
 						class="rounded-md peer pl-12 pr-2 py-2 border-2 border-gray-200 placeholder-gray-300"
 						type="text"
-						name="number"
-						placeholder="500"
+						name="amount"
+						placeholder="&bull;&bull;&bull;"
 						bind:value={amount}
 					/>
-					<span class="absolute text-gray-300 bottom-[9px] left-0 translate-x-1/2 w-6">$</span>
+          <span class="absolute bottom-[9px] left-0 translate-x-1/2 w-6 text-black peer-placeholder-shown:text-gray-300 
+          ">$</span>
 				</label>
 
 				<label class="relative w-full flex flex-col">
-- 
cgit v1.2.3


From 933495c2e42a59dc309131affc6ee4ef0ec2f567 Mon Sep 17 00:00:00 2001
From: Adam Soltys <asoltys@gmail.com>
Date: Wed, 15 Feb 2023 22:47:48 -0800
Subject: prettier

---
 src/components/Balance.svelte                                 | 2 +-
 src/routes/(app)/+error.svelte                                | 4 ++--
 src/routes/(app)/[username]/settings/[...tab]/+page.server.js | 2 +-
 src/routes/(app)/buy/+page.server.js                          | 2 +-
 src/routes/(app)/buy/+page.svelte                             | 8 +++++---
 src/routes/(app)/send/[...text]/+page.server.js               | 4 ++--
 src/routes/(static)/bounties/+page.svelte                     | 9 +++++++--
 7 files changed, 19 insertions(+), 12 deletions(-)

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

diff --git a/src/components/Balance.svelte b/src/components/Balance.svelte
index 5d993c28..cc923b7d 100644
--- a/src/components/Balance.svelte
+++ b/src/components/Balance.svelte
@@ -9,7 +9,7 @@
 <div class="space-y-2">
 	<div class="text-5xl font-bold tabular-nums">
 		{#if isNaN($animatedRate)}
-      <div class="text-gray-200">&mdash;</div>
+			<div class="text-gray-200">&mdash;</div>
 		{:else}
 			{f((user.balance * $animatedRate) / sats, user.currency)}
 		{/if}
diff --git a/src/routes/(app)/+error.svelte b/src/routes/(app)/+error.svelte
index 0851cb27..36726e26 100644
--- a/src/routes/(app)/+error.svelte
+++ b/src/routes/(app)/+error.svelte
@@ -1,7 +1,7 @@
 <script>
 	import { back } from '$lib/utils';
 	import { Icon } from '$comp';
-  import { page } from '$app/stores';
+	import { page } from '$app/stores';
 
 	export let data;
 	let { user } = data;
@@ -22,7 +22,7 @@
 				<h1 class="text-2xl md:text-3xl font-semibold text-center">Error</h1>
 			</div>
 			<p class="text-secondary text-center">Something went wrong</p>
-      <p class="text-secondary text-center">{$page.error.message}</p>
+			<p class="text-secondary text-center">{$page.error.message}</p>
 
 			<div class="flex justify-center py-24">
 				<a href={link}>
diff --git a/src/routes/(app)/[username]/settings/[...tab]/+page.server.js b/src/routes/(app)/[username]/settings/[...tab]/+page.server.js
index 94240adc..e833a102 100644
--- a/src/routes/(app)/[username]/settings/[...tab]/+page.server.js
+++ b/src/routes/(app)/[username]/settings/[...tab]/+page.server.js
@@ -9,7 +9,7 @@ export function load({ params, url }) {
 export const actions = {
 	default: async ({ cookies, request }) => {
 		let form = Object.fromEntries(await request.formData());
-    form.prompt = form.prompt === 'on'
+		form.prompt = form.prompt === 'on';
 		let user = { ...(await get('/me', auth(cookies))), ...form };
 
 		try {
diff --git a/src/routes/(app)/buy/+page.server.js b/src/routes/(app)/buy/+page.server.js
index 8a88ed4e..fc7ae473 100644
--- a/src/routes/(app)/buy/+page.server.js
+++ b/src/routes/(app)/buy/+page.server.js
@@ -13,7 +13,7 @@ export const actions = {
 		await post(
 			'/buy',
 			{
-        amount: form.get('amount'),
+				amount: form.get('amount'),
 				number: form.get('number').replace(/\s+/g, ''),
 				month: form.get('expiry').slice(0, 2),
 				year: form.get('expiry').slice(-2),
diff --git a/src/routes/(app)/buy/+page.svelte b/src/routes/(app)/buy/+page.svelte
index ed803110..323d5ef0 100644
--- a/src/routes/(app)/buy/+page.svelte
+++ b/src/routes/(app)/buy/+page.svelte
@@ -7,7 +7,7 @@
 	let { username } = data.user;
 	let loading;
 
-  let amount, n, d, cvc;
+	let amount, n, d, cvc;
 </script>
 
 <div class="container px-4 max-w-xl mx-auto mt-10 space-y-5">
@@ -49,8 +49,10 @@
 						placeholder="&bull;&bull;&bull;"
 						bind:value={amount}
 					/>
-          <span class="absolute bottom-[9px] left-0 translate-x-1/2 w-6 text-black peer-placeholder-shown:text-gray-300 
-          ">$</span>
+					<span
+						class="absolute bottom-[9px] left-0 translate-x-1/2 w-6 text-black peer-placeholder-shown:text-gray-300 
+          ">$</span
+					>
 				</label>
 
 				<label class="relative w-full flex flex-col">
diff --git a/src/routes/(app)/send/[...text]/+page.server.js b/src/routes/(app)/send/[...text]/+page.server.js
index b1089a5b..9c7d4185 100644
--- a/src/routes/(app)/send/[...text]/+page.server.js
+++ b/src/routes/(app)/send/[...text]/+page.server.js
@@ -52,8 +52,8 @@ let parse = async (t, host) => {
 			throw redirect(307, r);
 		}
 
-    if (user) throw redirect(307, `/send/${user.username}`);
-    else if (id) throw redirect(307, `/send/${id}`);
+		if (user) throw redirect(307, `/send/${user.username}`);
+		else if (id) throw redirect(307, `/send/${id}`);
 	}
 
 	// user
diff --git a/src/routes/(static)/bounties/+page.svelte b/src/routes/(static)/bounties/+page.svelte
index 843ef1d2..17fa5b7b 100644
--- a/src/routes/(static)/bounties/+page.svelte
+++ b/src/routes/(static)/bounties/+page.svelte
@@ -8,7 +8,10 @@
 
 	<ul>
 		<li>Grocery / Produce Store</li>
-    <li>Cafe &mdash; Claimed by <a href="/reverendhodl">ReverendHodl</a> for <a href="https://btcmap.org/map?lat=49.2814113&long=-123.049572">Laughing Bean Coffee Co.</a>!</li>
+		<li>
+			Cafe &mdash; Claimed by <a href="/reverendhodl">ReverendHodl</a> for
+			<a href="https://btcmap.org/map?lat=49.2814113&long=-123.049572">Laughing Bean Coffee Co.</a>!
+		</li>
 		<li>Bakery</li>
 		<li>Butcher Shop</li>
 		<li>Laundromat / Dry Cleaner</li>
@@ -79,5 +82,7 @@
 </div>
 
 <style>
-  a { @apply font-bold; }
+	a {
+		@apply font-bold;
+	}
 </style>
-- 
cgit v1.2.3


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

---
 package.json                                       |   1 +
 pnpm-lock.yaml                                     |  11 ++
 src/components/About.svelte                        |  13 ---
 src/lib/nostr.js                                   |  11 +-
 src/lib/socket.js                                  |  27 +----
 src/lib/store.js                                   |   3 +-
 src/locales/en.json                                |  13 +--
 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 +--
 tailwind.config.cjs                                |   3 +-
 21 files changed, 261 insertions(+), 246 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)/buy')

diff --git a/package.json b/package.json
index 908ec0bf..ac67d8b3 100644
--- a/package.json
+++ b/package.json
@@ -36,6 +36,7 @@
 		"svelte-preprocess": "^4.10.7",
 		"svelte-virtual-scroll-list": "^1.1.0",
 		"sveltekit-i18n": "^2.2.2",
+		"tailwind-scrollbar": "^2.1.0",
 		"tailwindcss": "^3.2.4",
 		"tiny-secp256k1": "^2.2.1",
 		"uuid": "^9.0.0",
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index 4f0d2ef2..3fe87f18 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -29,6 +29,7 @@ specifiers:
   svelte-preprocess: ^4.10.7
   svelte-virtual-scroll-list: ^1.1.0
   sveltekit-i18n: ^2.2.2
+  tailwind-scrollbar: ^2.1.0
   tailwindcss: ^3.2.4
   tiny-secp256k1: ^2.2.1
   uuid: ^9.0.0
@@ -68,6 +69,7 @@ devDependencies:
   svelte-preprocess: 4.10.7_qs7rgzvahok4cbkjoy5bgypde4
   svelte-virtual-scroll-list: 1.1.0_svelte@3.55.0
   sveltekit-i18n: 2.2.2_svelte@3.55.0
+  tailwind-scrollbar: 2.1.0_tailwindcss@3.2.4
   tailwindcss: 3.2.4_postcss@8.4.20
   tiny-secp256k1: 2.2.1
   uuid: 9.0.0
@@ -2477,6 +2479,15 @@ packages:
       svelte: 3.55.0
     dev: true
 
+  /tailwind-scrollbar/2.1.0_tailwindcss@3.2.4:
+    resolution: {integrity: sha512-zpvY5mDs0130YzYjZKBiDaw32rygxk5RyJ4KmeHjGnwkvbjm/PszON1m4Bbt2DkMRIXlXsfNevykAESgURN4KA==}
+    engines: {node: '>=12.13.0'}
+    peerDependencies:
+      tailwindcss: 3.x
+    dependencies:
+      tailwindcss: 3.2.4_postcss@8.4.20
+    dev: true
+
   /tailwindcss/3.2.4_postcss@8.4.20:
     resolution: {integrity: sha512-AhwtHCKMtR71JgeYDaswmZXhPcW9iuI9Sp2LvZPo9upDZ7231ZJ7eA9RaURbhpXGVlrjX4cFNlB4ieTetEb7hQ==}
     engines: {node: '>=12.13.0'}
diff --git a/src/components/About.svelte b/src/components/About.svelte
index d51b9268..0a0ff874 100644
--- a/src/components/About.svelte
+++ b/src/components/About.svelte
@@ -17,19 +17,6 @@
 			name: 'john',
 			socials: []
 		},
-		{
-			name: 'karnage',
-			socials: [
-				{ type: 'twitter', url: 'https://twitter.com/KarnageBitcoin', color: 'bg-[#1D9BF0]' }
-			]
-		},
-		{
-			name: 'secondl1ght',
-			socials: [
-				{ type: 'twitter', url: 'https://www.twitter.com/secondl1ght', color: 'bg-[#1D9BF0]' },
-				{ type: 'github', url: 'https://github.com/secondl1ght', color: 'bg-gray-800' }
-			]
-		},
 		{
 			name: 'shauna',
 			socials: [
diff --git a/src/lib/nostr.js b/src/lib/nostr.js
index 13251856..d72f48ef 100644
--- a/src/lib/nostr.js
+++ b/src/lib/nostr.js
@@ -5,7 +5,7 @@ import { Buffer } from 'buffer';
 import { bech32m } from 'bech32';
 import { bip32, fail, wait, post, stretch } from '$lib/utils';
 import { calculateId, signId } from 'nostr';
-import { password as pw, passwordPrompt, pin, loginRedirect } from '$lib/store';
+import { decrypted, password as pw, passwordPrompt, pin, loginRedirect } from '$lib/store';
 import { goto, invalidate } from '$app/navigation';
 
 const { encode, decode, fromWords, toWords } = bech32m;
@@ -58,8 +58,10 @@ export let encrypt = async ({ message, recipient, user }) => {
 };
 
 export let decrypt = async ({ event, user }) => {
+	let cache = get(decrypted);
 	try {
-		let { content, pubkey } = event;
+		let { content, pubkey, id } = event;
+		if (cache[id]) return cache[id];
 		if (pubkey === user.pubkey) pubkey = event.tags[0][1];
 		pubkey = Uint8Array.from(Buffer.from('02' + pubkey, 'hex'));
 
@@ -78,7 +80,10 @@ export let decrypt = async ({ event, user }) => {
 
 		let message = await crypto.subtle.decrypt({ name: 'AES-CBC', iv }, key, cipher);
 
-		return Buffer.from(message).toString('utf8');
+		cache[id] = Buffer.from(message).toString('utf8');
+		decrypted.set(cache);
+
+		return cache[id];
 	} catch (e) {
 		// console.log(e);
 	}
diff --git a/src/lib/socket.js b/src/lib/socket.js
index ce3cbe4b..aef8a513 100644
--- a/src/lib/socket.js
+++ b/src/lib/socket.js
@@ -1,23 +1,11 @@
 import { get } from 'svelte/store';
-import {
-	events as $events,
-	invoice,
-	request,
-	newPayment,
-	last,
-	rate,
-	payments,
-	user
-} from '$lib/store';
+import { event, invoice, request, newPayment, last, rate, payments, user } from '$lib/store';
 import { success, sat } from '$lib/utils';
 import { PUBLIC_SOCKET } from '$env/static/public';
 import { invalidate } from '$app/navigation';
 import { browser } from '$app/environment';
 
 let socket, token;
-let le = browser && localStorage.getItem('events');
-let events = le && le !== 'undefined' ? JSON.parse(le) : {};
-let q = Object.keys(events);
 
 export const auth = () => token && send('login', token) && send('heartbeat');
 
@@ -30,23 +18,12 @@ export const messages = (data) => ({
 	id() {
 		last.set(Date.now());
 	},
-
 	invoice() {
 		invoice.set(data);
 	},
-
 	event() {
-		data.seen = Math.round(Date.now() / 1000);
-		events[data.id] = data;
-		q.push(data.id);
-		$events.set(events);
-		while (q.length > 10000) delete events[q.shift()];
-		localStorage.setItem(
-			'events',
-			JSON.stringify(q.slice(-100).reduce((a, b) => (a = { ...a, [b]: events[b] }), {}))
-		);
+		event.set(data);
 	},
-
 	rate() {
 		rate.set(data);
 	},
diff --git a/src/lib/store.js b/src/lib/store.js
index 93ac3d47..6853386c 100644
--- a/src/lib/store.js
+++ b/src/lib/store.js
@@ -36,11 +36,12 @@ export const animatedRate = writable(0);
 export const avatar = writable();
 export const banner = writable();
 export const colorTheme = writable('from-primary to-gradient');
+export const event = writable();
 export const events = writable({});
 export const invoice = writable();
 export const last = writable();
 export const loginRedirect = writable();
-export const messages = persistLocal('messages', {});
+export const decrypted = persistLocal('decrypted', {});
 export const newPayment = persistLocal('newPayment');
 export const password = persistLocal('password');
 export const passwordPrompt = writable();
diff --git a/src/locales/en.json b/src/locales/en.json
index 17f4b34e..402f0214 100644
--- a/src/locales/en.json
+++ b/src/locales/en.json
@@ -15,17 +15,6 @@
 				"position": "Chief Technical Officer",
 				"bio": "Adam is a web developer and bitcoin enthusiast who believes sound money is key to increasing global prosperity. He lives in North Vancouver with his wife Chelsea and two children."
 			},
-			"secondl1ght": {
-				"name": "secondl1ght",
-				"position": "Web Developer",
-				"bio": "A self-taught Web Developer, secondl1ght dove head first down the bitcoin rabbit hole and left his fiat job to focus on bitcoin development full-time. He contributes to open source projects, is a privacy advocate, and freedom lover."
-			},
-
-			"karnage": {
-				"name": "Karnage",
-				"position": "Product Designer",
-				"bio": "My mission is to help startup founders succeed. I create products to achieve this goal. Pixel-perfect product design. Get it shipped."
-			},
 			"shauna": {
 				"name": "Shauna",
 				"position": "Operations & Marketing",
@@ -297,6 +286,6 @@
 		"redeem": "Redeem",
 		"redeemed": "Redeemed",
 		"redeemedBy": "Redeemed by",
-		"sendMessage": "Message"
+		"sendMessage": "Write a message..."
 	}
 }
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" />
diff --git a/tailwind.config.cjs b/tailwind.config.cjs
index 2941c890..c57db020 100644
--- a/tailwind.config.cjs
+++ b/tailwind.config.cjs
@@ -12,5 +12,6 @@ module.exports = {
 			}
 		}
 	},
-	plugins: []
+	plugins: [require('tailwind-scrollbar')],
+	safelist: ['w-16', 'h-16', 'w-20', 'h-20', 'w-24', 'h-24']
 };
-- 
cgit v1.2.3