diff options
| author | Adam Soltys <[email protected]> | 2023-01-07 23:15:04 -0800 |
|---|---|---|
| committer | Adam Soltys <[email protected]> | 2023-01-07 23:15:04 -0800 |
| commit | 17d2c4b23f6ec1857a486872e1d156a62fdb3cca (patch) | |
| tree | f816bf66ac7575fddb7b794d3cfdf902d57daefd /src/routes/(app)/tx | |
| parent | 88f25bb416e202d9480de56189d1b09f4804f749 (diff) | |
| download | coinos-ui-17d2c4b23f6ec1857a486872e1d156a62fdb3cca.tar.gz coinos-ui-17d2c4b23f6ec1857a486872e1d156a62fdb3cca.zip | |
tx page
Diffstat (limited to 'src/routes/(app)/tx')
| -rw-r--r-- | src/routes/(app)/tx/[id]/+page.server.js | 6 | ||||
| -rw-r--r-- | src/routes/(app)/tx/[id]/+page.svelte | 62 |
2 files changed, 68 insertions, 0 deletions
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> |