unit reference on dashboard

5 files changed, 58 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>
 
diff --git a/static/images/bitcoin.png b/static/images/bitcoin.png
new file mode 100644
index 00000000..9b4f5d47
--- /dev/null
+++ b/static/images/bitcoin.png
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 @@
+<!-- Created with Inkscape (http://www.inkscape.org/) -->
+<svg xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#" xmlns="http://www.w3.org/2000/svg" height="64" width="64" version="1.1" xmlns:cc="http://creativecommons.org/ns#" xmlns:dc="http://purl.org/dc/elements/1.1/">
+<g transform="translate(0.00630876,-0.00301984)">
+<path fill="#f7931a" d="m63.033,39.744c-4.274,17.143-21.637,27.576-38.782,23.301-17.138-4.274-27.571-21.638-23.295-38.78,4.272-17.145,21.635-27.579,38.775-23.305,17.144,4.274,27.576,21.64,23.302,38.784z"/>
+<path fill="#FFF" d="m46.103,27.444c0.637-4.258-2.605-6.547-7.038-8.074l1.438-5.768-3.511-0.875-1.4,5.616c-0.923-0.23-1.871-0.447-2.813-0.662l1.41-5.653-3.509-0.875-1.439,5.766c-0.764-0.174-1.514-0.346-2.242-0.527l0.004-0.018-4.842-1.209-0.934,3.75s2.605,0.597,2.55,0.634c1.422,0.355,1.679,1.296,1.636,2.042l-1.638,6.571c0.098,0.025,0.225,0.061,0.365,0.117-0.117-0.029-0.242-0.061-0.371-0.092l-2.296,9.205c-0.174,0.432-0.615,1.08-1.609,0.834,0.035,0.051-2.552-0.637-2.552-0.637l-1.743,4.019,4.569,1.139c0.85,0.213,1.683,0.436,2.503,0.646l-1.453,5.834,3.507,0.875,1.439-5.772c0.958,0.26,1.888,0.5,2.798,0.726l-1.434,5.745,3.511,0.875,1.453-5.823c5.987,1.133,10.489,0.676,12.384-4.739,1.527-4.36-0.076-6.875-3.226-8.515,2.294-0.529,4.022-2.038,4.483-5.155zm-8.022,11.249c-1.085,4.36-8.426,2.003-10.806,1.412l1.928-7.729c2.38,0.594,10.012,1.77,8.878,6.317zm1.086-11.312c-0.99,3.966-7.1,1.951-9.082,1.457l1.748-7.01c1.982,0.494,8.365,1.416,7.334,5.553z"/>
+</g>
+</svg>