diff options
| author | Adam Soltys <[email protected]> | 2023-01-22 21:03:57 -0800 |
|---|---|---|
| committer | Adam Soltys <[email protected]> | 2023-01-22 21:03:57 -0800 |
| commit | 29ed3a4366eb9719d32dac390764bf119c40afff (patch) | |
| tree | 89217b59e723ea8b08a12fdac1caa5c63844fa2f /src/routes/(app)/payment | |
| parent | 681e307d00e38ee9bc336e547660f56e71b646c6 (diff) | |
| download | coinos-ui-29ed3a4366eb9719d32dac390764bf119c40afff.tar.gz coinos-ui-29ed3a4366eb9719d32dac390764bf119c40afff.zip | |
rename txns
Diffstat (limited to 'src/routes/(app)/payment')
| -rw-r--r-- | src/routes/(app)/payment/[id]/+page.server.js | 6 | ||||
| -rw-r--r-- | src/routes/(app)/payment/[id]/+page.svelte | 62 |
2 files changed, 68 insertions, 0 deletions
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> |