From 17d2c4b23f6ec1857a486872e1d156a62fdb3cca Mon Sep 17 00:00:00 2001
From: Adam Soltys <asoltys@gmail.com>
Date: Sat, 7 Jan 2023 23:15:04 -0800
Subject: tx page

---
 src/routes/(app)/tx/[id]/+page.server.js |  6 ++++
 src/routes/(app)/tx/[id]/+page.svelte    | 62 ++++++++++++++++++++++++++++++++
 2 files changed, 68 insertions(+)
 create mode 100644 src/routes/(app)/tx/[id]/+page.server.js
 create mode 100644 src/routes/(app)/tx/[id]/+page.svelte

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

diff --git a/src/routes/(app)/tx/[id]/+page.server.js b/src/routes/(app)/tx/[id]/+page.server.js
new file mode 100644
index 00000000..7db5d4f1
--- /dev/null
+++ b/src/routes/(app)/tx/[id]/+page.server.js
@@ -0,0 +1,6 @@
+import { auth, get } from '$lib/utils';
+
+export async function load({ cookies, params }) {
+	let tx = await get(`/payments/${params.id}`, auth(cookies));
+  return { tx };
+}
diff --git a/src/routes/(app)/tx/[id]/+page.svelte b/src/routes/(app)/tx/[id]/+page.svelte
new file mode 100644
index 00000000..fc793916
--- /dev/null
+++ b/src/routes/(app)/tx/[id]/+page.svelte
@@ -0,0 +1,62 @@
+<script>
+	import { t } from '$lib/translations';
+	import { back, copy, f, s, sats } from '$lib/utils';
+	import { Avatar, Icon } from '$comp';
+	import { format, parseISO } from 'date-fns';
+	import { PUBLIC_EXPLORER as expl } from '$env/static/public';
+
+	export let data;
+	let { user, tx } = data;
+	let { username } = user;
+	let { amount, hash, createdAt, rate, network, preimage, fee, currency } = tx;
+	let fiat = (Math.abs(amount) * rate) / sats;
+</script>
+
+<button class="ml-5 md:ml-20 mt-5 md:mt-10 hover:opacity-80" on:click={back}>
+	<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">
+	<h1 class="px-3 md:px-0 text-center text-3xl md:text-4xl font-semibold mb-10">
+		{$t(amount < 0 ? 'transactions.sent' : 'transactions.received')}
+	</h1>
+
+	<div>
+		<div class="font-bold">{$t('transactions.amount')}</div>
+		<div class="text-xl">
+			{f(fiat, currency)}
+			<span class="text-secondary">⚡️{`${s(Math.abs(amount) + fee)}`}</span>
+		</div>
+	</div>
+
+	<div>
+		<div class="font-bold">{$t('transactions.date')}</div>
+		<div>
+			{format(parseISO(createdAt), 'MMMM d')},
+			{format(parseISO(createdAt), 'h:mm aaa')}
+		</div>
+	</div>
+
+	{#if network === 'lightning'}
+		<div>
+			<div class="font-bold">{$t('transactions.preimage')}</div>
+			<div>
+				{preimage}
+			</div>
+		</div>
+	{:else}
+		<div>
+			<div class="font-bold">{$t('transactions.id')}</div>
+      <div class="flex">
+			<div>
+				<a href={`${expl}/tx/${hash}`} target="_blank" class="text-blue-600">{hash}</a>
+			</div>
+			<button
+				class="flex font-bold hover:opacity-80 mb-auto"
+				on:click={() => copy(hash)}
+				><Icon icon="copy" style="mr-1" />
+			</button>
+      </div>
+		</div>
+	{/if}
+</div>
-- 
cgit v1.2.3