From a421da7ca5e67972d833e36c5bd1cbf6bb76a477 Mon Sep 17 00:00:00 2001
From: secondl1ght <85003930+secondl1ght@users.noreply.github.com>
Date: Tue, 2 Aug 2022 14:33:58 -0600
Subject: add transactions page

---
 src/routes/[username]/dashboard.svelte    |  2 +-
 src/routes/[username]/support.svelte      |  2 +-
 src/routes/[username]/transactions.svelte | 48 ++++++++++++++++++++++++++++++-
 3 files changed, 49 insertions(+), 3 deletions(-)

diff --git a/src/routes/[username]/dashboard.svelte b/src/routes/[username]/dashboard.svelte
index 4c0e4cfc..6f38a812 100644
--- a/src/routes/[username]/dashboard.svelte
+++ b/src/routes/[username]/dashboard.svelte
@@ -36,7 +36,7 @@
 
 	<div class="px-3 md:px-0 flex justify-center items-center mt-10 lg:mt-0 mb-20">
 		<div>
-			<h1 class="text-4xl font-semibold mb-8">Dashboard</h1>
+			<h1 class="text-3xl md:text-4xl font-semibold mb-8">Dashboard</h1>
 
 			<span class="text-secondary mx-auto text-lg font-bold"
 				>Bitcoin Price: <span class="text-black">{$rate ? btcPrice : 'fetching rate...'}</span>
diff --git a/src/routes/[username]/support.svelte b/src/routes/[username]/support.svelte
index 7dd254c1..f974bd80 100644
--- a/src/routes/[username]/support.svelte
+++ b/src/routes/[username]/support.svelte
@@ -8,7 +8,7 @@
 	<AppHeader />
 
 	<div class="my-20">
-		<h1 class="text-center text-4xl font-semibold mb-10">Support</h1>
+		<h1 class="text-center text-3xl md:text-4xl font-semibold mb-10">Support</h1>
 
 		<form class="space-y-5 mx-auto w-11/12 md:w-[350px]">
 			<div>
diff --git a/src/routes/[username]/transactions.svelte b/src/routes/[username]/transactions.svelte
index 1935b156..bbcc0c23 100644
--- a/src/routes/[username]/transactions.svelte
+++ b/src/routes/[username]/transactions.svelte
@@ -1,5 +1,51 @@
 <script>
 	import { AppHeader } from '$comp';
+	import { user } from '$lib/store';
+
+	$: transactions = $user.payments;
 </script>
 
-<AppHeader />
+{#if $user}
+	<AppHeader />
+
+	<div class="my-20">
+		<h1 class="px-3 md:px-0 text-center text-3xl md:text-4xl font-semibold mb-10">
+			Transaction History
+		</h1>
+
+		<div class="max-w-5xl w-11/12 md:w-3/4 xl:w-1/2 mx-auto md:text-lg">
+			<div class="text-secondary flex justify-between mb-5">
+				<h2>AMOUNT</h2>
+				<h2>TIME</h2>
+			</div>
+
+			<div class="space-y-10">
+				{#if transactions.length}
+					{#each transactions as tx}
+						<div class="flex justify-between items-center border-b pb-5">
+							<div class="font-bold">
+								<span class="block mb-1"
+									>{new Intl.NumberFormat('en-US', {
+										style: 'currency',
+										currency: 'USD'
+									}).format(tx.amount * (tx.rate / 100000000))}
+								</span>
+
+								<span class="text-secondary"
+									>({new Intl.NumberFormat('en-US', { maximumFractionDigits: 0 }).format(tx.amount)}
+									SATS)
+								</span>
+							</div>
+
+							<div class="text-secondary">
+								{new Date(tx.createdAt).toLocaleDateString(undefined, { dateStyle: 'medium' })}
+							</div>
+						</div>
+					{/each}
+				{:else}
+					<p class="text-secondary text-lg text-center">No transactions yet.</p>
+				{/if}
+			</div>
+		</div>
+	</div>
+{/if}
-- 
cgit v1.2.3