diff options
Diffstat (limited to 'src')
| -rw-r--r-- | src/routes/+layout.svelte | 7 | ||||
| -rw-r--r-- | src/routes/[username]/transactions/+page.svelte | 86 |
2 files changed, 46 insertions, 47 deletions
diff --git a/src/routes/+layout.svelte b/src/routes/+layout.svelte index 3309393e..8ebf6824 100644 --- a/src/routes/+layout.svelte +++ b/src/routes/+layout.svelte @@ -13,12 +13,13 @@ const localeLocalStorageKey = 'sveltekit-i18n-locale'; - $: $token = data.token; - export let data; + $: $token = data.token; + $: $user = data.user; + $rates = data.rates; - $: $selectedRate = data.user && $rate * (data.rates[data.user.currency] / data.rates.USD); + $: $selectedRate = $user && $rate * (data.rates[data.user.currency] / data.rates.USD); onMount(() => { let localStorageLocale = localStorage.getItem(localeLocalStorageKey); diff --git a/src/routes/[username]/transactions/+page.svelte b/src/routes/[username]/transactions/+page.svelte index 743bfc1c..9bc67fda 100644 --- a/src/routes/[username]/transactions/+page.svelte +++ b/src/routes/[username]/transactions/+page.svelte @@ -8,56 +8,54 @@ $: transactions = $user.payments; </script> -{#if $user} - <AppHeader /> +<AppHeader /> - <div class="my-20"> - <h1 class="px-3 md:px-0 text-center text-3xl md:text-4xl font-semibold mb-10"> - {$t('user.transactions.header')} - </h1> +<div class="my-20"> + <h1 class="px-3 md:px-0 text-center text-3xl md:text-4xl font-semibold mb-10"> + {$t('user.transactions.header')} + </h1> - <div class="max-w-5xl w-11/12 md:w-3/4 xl:w-1/2 mx-auto md:text-lg"> - <div class="text-secondary grid grid-cols-3 mb-5"> - <h2>{$t('user.transactions.AMOUNT')}</h2> - <h2 class="text-center">{$t('user.transactions.TYPE')}</h2> - <h2 class="text-right">{$t('user.transactions.TIME')}</h2> - </div> + <div class="max-w-5xl w-11/12 md:w-3/4 xl:w-1/2 mx-auto md:text-lg"> + <div class="text-secondary grid grid-cols-3 mb-5"> + <h2>{$t('user.transactions.AMOUNT')}</h2> + <h2 class="text-center">{$t('user.transactions.TYPE')}</h2> + <h2 class="text-right">{$t('user.transactions.TIME')}</h2> + </div> - <div class="space-y-10"> - {#if transactions.length} - {#each transactions as tx} - <div class="grid grid-cols-3 border-b pb-5"> - <div class="font-bold"> - <span class="block mb-1" - >{tx.amount > 0 ? '+' : ''}{new Intl.NumberFormat('en-US', { - style: 'currency', - currency: tx.currency - }).format(tx.amount * (tx.rate / 100000000))} - </span> + <div class="space-y-10"> + {#if transactions.length} + {#each transactions as tx} + <div class="grid grid-cols-3 border-b pb-5"> + <div class="font-bold"> + <span class="block mb-1" + >{tx.amount > 0 ? '+' : ''}{new Intl.NumberFormat('en-US', { + style: 'currency', + currency: tx.currency + }).format(tx.amount * (tx.rate / 100000000))} + </span> - <span class="text-secondary" - >{tx.amount > 0 ? '+' : ''}{new Intl.NumberFormat('en-US', { - maximumFractionDigits: 0 - }).format(tx.amount)} - SAT - </span> - </div> + <span class="text-secondary" + >{tx.amount > 0 ? '+' : ''}{new Intl.NumberFormat('en-US', { + maximumFractionDigits: 0 + }).format(tx.amount)} + SAT + </span> + </div> - <div class="text-center"> - <span class="text-secondary" - >{$t('user.transactions.' + (tx.amount < 0 ? 'sent' : 'received'))}</span - > - </div> + <div class="text-center"> + <span class="text-secondary" + >{$t('user.transactions.' + (tx.amount < 0 ? 'sent' : 'received'))}</span + > + </div> - <div class="text-secondary text-right"> - {new Date(tx.createdAt).toLocaleDateString(undefined, { dateStyle: 'medium' })} - </div> + <div class="text-secondary text-right"> + {new Date(tx.createdAt).toLocaleDateString(undefined, { dateStyle: 'medium' })} </div> - {/each} - {:else} - <p class="text-secondary text-lg text-center">{$t('user.transactions.empty')}</p> - {/if} - </div> + </div> + {/each} + {:else} + <p class="text-secondary text-lg text-center">{$t('user.transactions.empty')}</p> + {/if} </div> </div> -{/if} +</div> |