diff options
Diffstat (limited to 'src')
| -rw-r--r-- | src/locales/en.json | 10 | ||||
| -rw-r--r-- | src/routes/(app)/[username]/transactions/[...page]/+page.svelte | 117 | ||||
| -rw-r--r-- | src/routes/(app)/invoice/[id]/+page.svelte | 4 | ||||
| -rw-r--r-- | src/routes/(app)/tx/[id]/+page.server.js | 6 | ||||
| -rw-r--r-- | src/routes/(app)/tx/[id]/+page.svelte | 62 | ||||
| -rw-r--r-- | src/routes/(app)/voucher/[redeemcode]/+page.server.js | 2 |
6 files changed, 140 insertions, 61 deletions
diff --git a/src/locales/en.json b/src/locales/en.json index 5714adff..ec89d1c4 100644 --- a/src/locales/en.json +++ b/src/locales/en.json @@ -258,10 +258,14 @@ } }, "transactions": { + "amount": "Amount", + "date": "Date", + "id": "Transaction ID", + "details": "Transaction Details", "header": "Transactions", - "AMOUNT": "AMOUNT", - "TYPE": "TYPE", - "TIME": "TIME", + "preimage": "Preimage", + "type": "Type", + "time": "Time", "sent": "Sent", "received": "Received", "empty": "No transactions yet.", diff --git a/src/routes/(app)/[username]/transactions/[...page]/+page.svelte b/src/routes/(app)/[username]/transactions/[...page]/+page.svelte index 2ea151d5..89207134 100644 --- a/src/routes/(app)/[username]/transactions/[...page]/+page.svelte +++ b/src/routes/(app)/[username]/transactions/[...page]/+page.svelte @@ -13,6 +13,11 @@ let { start, end, user } = data; let change = ({ target: { value } }) => goto(value); + let link = (tx) => { + if (tx.redeemcode) return `/voucher/${tx.redeemcode}`; + if (tx.with) return '/' + tx.with.username; + return `/tx/${tx.hash}`; + }; let presets = [ { title: $t('transactions.day'), start: sub(new Date(), { days: 1 }), end: null }, @@ -101,75 +106,77 @@ <div class="text-base"> {#each $txns as tx} - <div class="grid grid-cols-3 border-b h-24"> - <div class="whitespace-nowrap my-auto"> - <div class="font-bold"> - {f(tx.amount * (tx.rate / sats), tx.currency)} + <a href={link(tx)}> + <div class="grid grid-cols-3 border-b h-24 hover:bg-gray-100 px-4"> + <div class="whitespace-nowrap my-auto"> + <div class="font-bold"> + {f(tx.amount * (tx.rate / sats), tx.currency)} - {#if tx.tip} - <span class="text-sm"> - +{f(tx.tip * (tx.rate / sats), tx.currency)} - </span> - {/if} - </div> + {#if tx.tip} + <span class="text-sm"> + +{f(tx.tip * (tx.rate / sats), tx.currency)} + </span> + {/if} + </div> - <div class="text-secondary"> - {sat(tx.amount)} + <div class="text-secondary"> + {sat(tx.amount)} - {#if tx.tip} - <span class="text-sm"> - +{sat(tx.tip)} - </span> - {/if} + {#if tx.tip} + <span class="text-sm"> + +{sat(tx.tip)} + </span> + {/if} + </div> </div> - </div> - <div class="flex my-auto"> - {#if tx.redeemcode} - <a href={`/voucher/${tx.redeemcode}`}> - <div class="text-secondary flex"> - <div class="my-auto mr-1"> - <img src="/icons/logo-symbol.svg" class="w-12 border-4 border-white" /> + <div class="flex my-auto"> + {#if tx.redeemcode} + <a href={`/voucher/${tx.redeemcode}`}> + <div class="text-secondary flex"> + <div class="my-auto mr-1"> + <img src="/icons/logo-symbol.svg" class="w-12 border-4 border-transparent" /> + </div> + + <div class="my-auto">Voucher</div> + </div> + </a> + {:else if tx.with} + <a href={`/${tx.with.username}`}> + <div class="flex"> + <div class="my-auto"> + <Avatar user={tx.with} size={12} /> + </div> + <div class="my-auto ml-1 text-secondary">{tx.with.username}</div> </div> + </a> + {:else} + <div class="text-secondary flex"> + {#if tx.network === 'lightning'} + <div class="text-3xl">⚡️</div> + {:else} + <div class="my-auto mr-1"> + <img src="/images/bitcoin.svg" class="w-12 border-4 border-transparent" /> + </div> + {/if} - <div class="my-auto">Voucher</div> - </div> - </a> - {:else if tx.with} - <a href={`/${tx.with.username}`}> - <div class="flex"> <div class="my-auto"> - <Avatar user={tx.with} size={12} /> + {tx.amount > 0 ? (tx.confirmed ? 'Received' : 'Pending') : 'Sent'} </div> - <div class="my-auto ml-1 text-secondary">{tx.with.username}</div> </div> - </a> - {:else} - <div class="text-secondary flex"> - {#if tx.network === 'lightning'} - <div class="text-3xl">⚡️</div> - {:else} - <div class="my-auto mr-1"> - <img src="/images/bitcoin.svg" class="w-12 border-4 border-white" /> - </div> - {/if} + {/if} + </div> - <div class="my-auto"> - {tx.amount > 0 ? (tx.confirmed ? 'Received' : 'Pending') : 'Sent'} - </div> + <div class="text-secondary text-right text-sm my-auto"> + <div> + {format(parseISO(tx.createdAt), 'h:mm aaa')} + </div> + <div> + {format(parseISO(tx.createdAt), 'MMM d')} </div> - {/if} - </div> - - <div class="text-secondary text-right text-sm my-auto"> - <div> - {format(parseISO(tx.createdAt), 'h:mm aaa')} - </div> - <div> - {format(parseISO(tx.createdAt), 'MMM d')} </div> </div> - </div> + </a> {:else} <p class="text-secondary text-lg text-center">{$t('transactions.empty')}</p> {/each} diff --git a/src/routes/(app)/invoice/[id]/+page.svelte b/src/routes/(app)/invoice/[id]/+page.svelte index e99d6747..5eadb179 100644 --- a/src/routes/(app)/invoice/[id]/+page.svelte +++ b/src/routes/(app)/invoice/[id]/+page.svelte @@ -22,7 +22,7 @@ prompt, text, tip, - user: { username, currency } + user: { username, currency, uuid } } = invoice; let showQr = !amount; @@ -43,7 +43,7 @@ prompt, text, tip, - user: { username, currency } + user: { username, currency, uuid } } = invoice); tipPercent = (tip / amount) * 100; 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> diff --git a/src/routes/(app)/voucher/[redeemcode]/+page.server.js b/src/routes/(app)/voucher/[redeemcode]/+page.server.js index 0af98538..27c8a8c1 100644 --- a/src/routes/(app)/voucher/[redeemcode]/+page.server.js +++ b/src/routes/(app)/voucher/[redeemcode]/+page.server.js @@ -3,7 +3,7 @@ import { auth, get, post } from '$lib/utils'; import Qr from 'qrcode-base64'; export let load = async ({ params: { redeemcode }, url }) => { - let payment = await get(`/payment/${redeemcode}`); + let payment = await get(`/voucher/${redeemcode}`); console.log(payment); let src = Qr.drawImg(url.href, { size: 300 }); |