unit reference on dashboard

3 files changed, 51 insertions, 16 deletions

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;
 </script>
 
-<div class="container px-4 max-w-md mx-auto mt-20">
-	<div class="text-5xl font-bold mb-2">
-		{$selectedRate ? f(accountBalanceFiat, user.currency) : $t('user.dashboard.fetchingRate')}
-	</div>
+<div class="container px-4 max-w-md mx-auto mt-20 space-y-12">
+	<div>
+		<div class="text-5xl font-bold mb-2">
+			{$selectedRate ? f(accountBalanceFiat, user.currency) : $t('user.dashboard.fetchingRate')}
+		</div>
 
-	<div class="text-secondary text-2xl">
-		⚡️{s(user.account.balance)}
+		<div class="text-secondary text-2xl">
+			⚡️{s(user.account.balance)}
+		</div>
 	</div>
 
-	<div class="grid sm:grid-cols-2 gap-2 mt-8">
+	<div class="grid sm:grid-cols-2 gap-2">
 		<a href="/send">
-			<button class="rounded-full border py-2 px-5 font-bold hover:opacity-80 w-full mb-2"
+			<button class="rounded-full border py-2 px-5 font-bold hover:opacity-80 w-full"
 				>{$t('user.dashboard.withdraw')}</button
 			>
 		</a>
 		<a href={`/${user.username}/receive`}>
-			<button class="rounded-full border py-2 px-5 font-bold hover:opacity-80 w-full mb-2"
+			<button class="rounded-full border py-2 px-5 font-bold hover:opacity-80 w-full"
 				>{$t('user.dashboard.receive')}</button
 			>
 		</a>
-		<a href={`/${user.username}/settings`}>
-			<button class="rounded-full border py-2 px-5 font-bold hover:opacity-80 w-full mb-2"
-				>Setup Account</button
-			>
-		</a>
 		<a href={`/${user.username}/address`}>
-			<button class="rounded-full border py-2 px-5 font-bold hover:opacity-80 w-full mb-2"
+			<button class="rounded-full border py-2 px-5 font-bold hover:opacity-80 w-full"
 				>Deposit</button
 			>
 		</a>
+		<a href={`/${user.username}/settings`}>
+			<button class="rounded-full border py-2 px-5 font-bold hover:opacity-80 w-full"
+				>Settings</button
+			>
+		</a>
+	</div>
+
+	<div class="grid grid-cols-2">
+		<div class="text-secondary flex">
+			<div class="flex mr-1">
+				<div class="my-auto mr-1">1</div>
+				<img src="/images/bitcoin.svg" class="w-5 my-auto" />
+			</div>
+			<div>= {f(animatedRate, user.currency)}</div>
+		</div>
+		<div class="text-secondary flex ml-auto">
+      <div>{sat(sats)} =</div>
+			<div class="flex ml-1">
+				<div class="my-auto mr-1">1</div>
+				<img src="/images/bitcoin.svg" class="w-5 my-auto" />
+			</div>
+		</div>
 	</div>
 </div>
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);
 </script>