diff options
Diffstat (limited to 'src/routes/(app)/payment')
| -rw-r--r-- | src/routes/(app)/payment/[id]/+page.server.js | 4 | ||||
| -rw-r--r-- | src/routes/(app)/payment/[id]/+page.svelte | 82 |
2 files changed, 61 insertions, 25 deletions
diff --git a/src/routes/(app)/payment/[id]/+page.server.js b/src/routes/(app)/payment/[id]/+page.server.js index cbd7355e..1c90ab69 100644 --- a/src/routes/(app)/payment/[id]/+page.server.js +++ b/src/routes/(app)/payment/[id]/+page.server.js @@ -1,6 +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 }; + let payment = await get(`/payments/${params.id}`, auth(cookies)); + return { payment }; } diff --git a/src/routes/(app)/payment/[id]/+page.svelte b/src/routes/(app)/payment/[id]/+page.svelte index a961d14d..2e170a43 100644 --- a/src/routes/(app)/payment/[id]/+page.svelte +++ b/src/routes/(app)/payment/[id]/+page.svelte @@ -1,62 +1,98 @@ <script> import { t } from '$lib/translations'; - import { back, copy, f, s, sats } from '$lib/utils'; + import { back, copy, f, s, fiat, 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 { user, payment: p } = data; let { username } = user; - let { id, amount, created, rate, type, ref, fee, currency } = tx; - fee = fee || 0; + let { id, amount, created, rate, type, ref, tip, ourfee, fee, currency } = p; + let a = Math.abs(amount); - let fiat = (Math.abs(amount) * rate) / sats; + fee = fee || 0; </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"> +<div class="container mx-auto max-w-lg px-4 space-y-8 break-all text-2xl"> <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> + {#if p.with} + <div> + <span class="text-lg text-secondary my-auto mr-2">{amount > 0 ? 'From' : 'To'}</span> + <a href={`/${p.with.username}`}> + <div class="flex"> + <div class="my-auto"> + <Avatar user={p.with} size={20} /> + </div> + <div class="my-auto ml-1">{p.with.username}</div> + </div> + </a> + </div> + {/if} + <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> + <span class="text-lg text-secondary">Amount</span> + <div> + {f(fiat(a, rate), currency)} + {#if tip} + <span class="text-lg"> + + {f(fiat(tip, rate), currency)} + </span> + {/if} + <span class="text-secondary" + >⚡️{`${s(a)}`} + + {#if tip} + <span class="text-lg"> + + ⚡️{s(tip)} + </span> + {/if} + </span> </div> </div> <div> - <div class="font-bold">{$t('payments.date')}</div> + <span class="text-lg text-secondary">Network fee</span> <div> - {format(new Date(created), 'MMMM d')}, - {format(new Date(created), 'h:mm aaa')} + {f(fiat(fee, rate), currency)} + <span class="text-secondary">⚡️{`${s(fee)}`}</span> </div> </div> - {#if type === 'lightning'} + {#if ourfee > 0} <div> - <div class="font-bold">{$t('payments.preimage')}</div> + <span class="text-lg text-secondary">Platform fee</span> <div> - {ref} + {f(fiat(ourfee, rate), currency)} + <span class="text-secondary">⚡️{`${s(ourfee)}`}</span> </div> </div> - {:else} + {/if} + + <div> + <span class="text-lg text-secondary">Date</span> + <div> + {format(new Date(created), 'MMMM d')}, + {format(new Date(created), 'h:mm aaa')} + </div> + </div> + + {#if type === 'bitcoin'} <div> - <div class="font-bold">{$t('payments.id')}</div> + <span class="text-lg text-secondary">Txid</span> <div class="flex"> <div> - <a href={`${expl}/tx/${id}`} target="_blank" rel="noreferrer" class="text-blue-600" - >{id}</a - > + <a href={`${expl}/tx/${id}`} target="_blank" rel="noreferrer">{id}</a> </div> - <button class="flex font-bold hover:opacity-80 mb-auto" on:click={() => copy(id)} - ><Icon icon="copy" style="mr-1" /> + <button class="flex font-bold hover:opacity-80 mb-auto my-auto" on:click={() => copy(id)} + ><Icon icon="copy" style="ml-2 w-20 my-auto" /> </button> </div> </div> |