From b18828c0188ffe3b85b1132b480e4849cfc1039f Mon Sep 17 00:00:00 2001 From: Adam Soltys Date: Wed, 9 Nov 2022 16:26:30 -0800 Subject: unit reference on dashboard --- src/routes/(app)/+layout.svelte | 1 + src/routes/(app)/[username]/dashboard/+page.svelte | 64 +++++++++++++++------ .../(app)/[username]/settings/[...tab]/_pos.svelte | 2 + static/images/bitcoin.png | Bin 0 -> 50848 bytes static/images/bitcoin.svg | 7 +++ 5 files changed, 58 insertions(+), 16 deletions(-) create mode 100644 static/images/bitcoin.png create mode 100644 static/images/bitcoin.svg diff --git a/src/routes/(app)/+layout.svelte b/src/routes/(app)/+layout.svelte index 3d03e199..4cd08ab4 100644 --- a/src/routes/(app)/+layout.svelte +++ b/src/routes/(app)/+layout.svelte @@ -25,6 +25,7 @@ }; $: $selectedRate = r * (rates[u?.currency || 'USD'] / rates.USD); + $: $selectedRate = $rate * (rates[u?.currency || 'USD'] / rates.USD); onMount(() => { let localStorageLocale = localStorage.getItem(localeLocalStorageKey); diff --git a/src/routes/(app)/[username]/dashboard/+page.svelte b/src/routes/(app)/[username]/dashboard/+page.svelte index 43879fcb..3a90968c 100644 --- a/src/routes/(app)/[username]/dashboard/+page.svelte +++ b/src/routes/(app)/[username]/dashboard/+page.svelte @@ -9,8 +9,10 @@ export let data; let ease = (t) => (t < 0.5 ? 8 * t * t * t * t : 1 - 8 * --t * t * t * t); - let interval; + let interval, rateInterval; + let oldRate = $selectedRate; + let animatedRate = oldRate; $: animateRate($selectedRate); let animateRate = (newRate) => { if (!accountBalanceFiat) return; @@ -18,6 +20,17 @@ let newBalance = (user.account.balance * newRate) / sats; let oldBalance = parseFloat(accountBalanceFiat); let diff = oldBalance - newBalance; + let rateDiff = oldRate - newRate; + + clearInterval(rateInterval); + rateInterval = setInterval(() => { + let delta = rateDiff * ease(t / 100); + animatedRate = (oldRate - delta).toFixed(2); + if (t > 80) clearInterval(interval); + t++; + }, 10); + + oldRate = newRate; clearInterval(interval); interval = setInterval(() => { @@ -42,35 +55,54 @@ $: accountBalanceBtc = user.account.balance / sats; -
-
- {$selectedRate ? f(accountBalanceFiat, user.currency) : $t('user.dashboard.fetchingRate')} -
+
+
+
+ {$selectedRate ? f(accountBalanceFiat, user.currency) : $t('user.dashboard.fetchingRate')} +
-
- ⚡️{s(user.account.balance)} +
+ ⚡️{s(user.account.balance)} +
-
+
- - - - - - + + + +
+ +
+
+
+
1
+ +
+
= {f(animatedRate, user.currency)}
+
+
+
{sat(sats)} =
+
+
1
+ +
+
diff --git a/src/routes/(app)/[username]/settings/[...tab]/_pos.svelte b/src/routes/(app)/[username]/settings/[...tab]/_pos.svelte index ccbeeff4..d5e17786 100644 --- a/src/routes/(app)/[username]/settings/[...tab]/_pos.svelte +++ b/src/routes/(app)/[username]/settings/[...tab]/_pos.svelte @@ -5,6 +5,8 @@ import { page } from '$app/stores'; let { rates, user } = $page.data; + + $: ({ rates, user } = $page.data); const fiats = Object.keys(rates); diff --git a/static/images/bitcoin.png b/static/images/bitcoin.png new file mode 100644 index 00000000..9b4f5d47 Binary files /dev/null and b/static/images/bitcoin.png differ diff --git a/static/images/bitcoin.svg b/static/images/bitcoin.svg new file mode 100644 index 00000000..04079be3 --- /dev/null +++ b/static/images/bitcoin.svg @@ -0,0 +1,7 @@ + + + + + + + -- cgit v1.2.3