diff options
| author | secondl1ght <[email protected]> | 2022-08-02 14:33:58 -0600 |
|---|---|---|
| committer | secondl1ght <[email protected]> | 2022-08-02 14:33:58 -0600 |
| commit | a421da7ca5e67972d833e36c5bd1cbf6bb76a477 (patch) | |
| tree | 1eb004a14327882ccf9bab624f5007a0ef53cb86 /src | |
| parent | 5b7410257ac755d27016ae1f28b44771e1f55bd2 (diff) | |
| download | coinos-ui-a421da7ca5e67972d833e36c5bd1cbf6bb76a477.tar.gz coinos-ui-a421da7ca5e67972d833e36c5bd1cbf6bb76a477.zip | |
add transactions page
Diffstat (limited to 'src')
| -rw-r--r-- | src/routes/[username]/dashboard.svelte | 2 | ||||
| -rw-r--r-- | src/routes/[username]/support.svelte | 2 | ||||
| -rw-r--r-- | src/routes/[username]/transactions.svelte | 48 |
3 files changed, 49 insertions, 3 deletions
diff --git a/src/routes/[username]/dashboard.svelte b/src/routes/[username]/dashboard.svelte index 4c0e4cfc..6f38a812 100644 --- a/src/routes/[username]/dashboard.svelte +++ b/src/routes/[username]/dashboard.svelte @@ -36,7 +36,7 @@ <div class="px-3 md:px-0 flex justify-center items-center mt-10 lg:mt-0 mb-20"> <div> - <h1 class="text-4xl font-semibold mb-8">Dashboard</h1> + <h1 class="text-3xl md:text-4xl font-semibold mb-8">Dashboard</h1> <span class="text-secondary mx-auto text-lg font-bold" >Bitcoin Price: <span class="text-black">{$rate ? btcPrice : 'fetching rate...'}</span> diff --git a/src/routes/[username]/support.svelte b/src/routes/[username]/support.svelte index 7dd254c1..f974bd80 100644 --- a/src/routes/[username]/support.svelte +++ b/src/routes/[username]/support.svelte @@ -8,7 +8,7 @@ <AppHeader /> <div class="my-20"> - <h1 class="text-center text-4xl font-semibold mb-10">Support</h1> + <h1 class="text-center text-3xl md:text-4xl font-semibold mb-10">Support</h1> <form class="space-y-5 mx-auto w-11/12 md:w-[350px]"> <div> diff --git a/src/routes/[username]/transactions.svelte b/src/routes/[username]/transactions.svelte index 1935b156..bbcc0c23 100644 --- a/src/routes/[username]/transactions.svelte +++ b/src/routes/[username]/transactions.svelte @@ -1,5 +1,51 @@ <script> import { AppHeader } from '$comp'; + import { user } from '$lib/store'; + + $: transactions = $user.payments; </script> -<AppHeader /> +{#if $user} + <AppHeader /> + + <div class="my-20"> + <h1 class="px-3 md:px-0 text-center text-3xl md:text-4xl font-semibold mb-10"> + Transaction History + </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 flex justify-between mb-5"> + <h2>AMOUNT</h2> + <h2>TIME</h2> + </div> + + <div class="space-y-10"> + {#if transactions.length} + {#each transactions as tx} + <div class="flex justify-between items-center border-b pb-5"> + <div class="font-bold"> + <span class="block mb-1" + >{new Intl.NumberFormat('en-US', { + style: 'currency', + currency: 'USD' + }).format(tx.amount * (tx.rate / 100000000))} + </span> + + <span class="text-secondary" + >({new Intl.NumberFormat('en-US', { maximumFractionDigits: 0 }).format(tx.amount)} + SATS) + </span> + </div> + + <div class="text-secondary"> + {new Date(tx.createdAt).toLocaleDateString(undefined, { dateStyle: 'medium' })} + </div> + </div> + {/each} + {:else} + <p class="text-secondary text-lg text-center">No transactions yet.</p> + {/if} + </div> + </div> + </div> +{/if} |