From 29ed3a4366eb9719d32dac390764bf119c40afff Mon Sep 17 00:00:00 2001
From: Adam Soltys <asoltys@gmail.com>
Date: Sun, 22 Jan 2023 21:03:57 -0800
Subject: rename txns

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

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

diff --git a/src/routes/(app)/payment/[id]/+page.server.js b/src/routes/(app)/payment/[id]/+page.server.js
new file mode 100644
index 00000000..cbd7355e
--- /dev/null
+++ b/src/routes/(app)/payment/[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)/payment/[id]/+page.svelte b/src/routes/(app)/payment/[id]/+page.svelte
new file mode 100644
index 00000000..9c0afaac
--- /dev/null
+++ b/src/routes/(app)/payment/[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 } from 'date-fns';
+	import { PUBLIC_EXPLORER as expl } from '$env/static/public';
+
+	export let data;
+	let { user, tx } = data;
+	let { username } = user;
+	let { id, amount, hash, created, rate, type, preimage, fee, currency } = tx;
+	fee = fee || 0;
+
+	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 ? 'payments.sent' : 'payments.received')}
+	</h1>
+
+	<div>
+		<div class="font-bold">{$t('payments.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('payments.date')}</div>
+		<div>
+			{format(new Date(created), 'MMMM d')},
+			{format(new Date(created), 'h:mm aaa')}
+		</div>
+	</div>
+
+	{#if type === 'lightning'}
+		<div>
+			<div class="font-bold">{$t('payments.preimage')}</div>
+			<div>
+				{preimage}
+			</div>
+		</div>
+	{:else}
+		<div>
+			<div class="font-bold">{$t('payments.id')}</div>
+			<div class="flex">
+				<div>
+					<a href={`${expl}/tx/${id}`} target="_blank" class="text-blue-600">{id}</a>
+				</div>
+				<button class="flex font-bold hover:opacity-80 mb-auto" on:click={() => copy(id)}
+					><Icon icon="copy" style="mr-1" />
+				</button>
+			</div>
+		</div>
+	{/if}
+</div>
-- 
cgit v1.2.3