animated balance

5 files changed, 44 insertions, 24 deletions

diff --git a/src/routes/[username]/dashboard/+page.svelte b/src/routes/[username]/dashboard/+page.svelte
index 22e480f3..c17001b5 100644
--- a/src/routes/[username]/dashboard/+page.svelte
+++ b/src/routes/[username]/dashboard/+page.svelte
@@ -1,13 +1,35 @@
 <script>
-	import { f, s, post, failure } from '$lib/utils';
+	import { f, s, post, failure, sats } from '$lib/utils';
 	import { tick } from 'svelte';
 	import { AppHeader, Icon } from '$comp';
-	import { selectedRate } from '$lib/store';
+	import { rate, selectedRate } from '$lib/store';
 	import { goto } from '$app/navigation';
 	import { t } from '$lib/translations';
 
 	export let data;
+
+	let ease = (t) => (t < 0.5 ? 8 * t * t * t * t : 1 - 8 * --t * t * t * t);
+	let interval;
+
+	$: animateRate($rate);
+	let animateRate = (newRate) => {
+    if (!accountBalanceFiat) return;
+		let t = 0;
+    let newBalance = (user.account.balance * newRate / sats);
+    let oldBalance = parseFloat(accountBalanceFiat);
+    let diff = oldBalance - newBalance;
+
+		clearInterval(interval);
+		interval = setInterval(() => {
+			let delta = diff * ease(t / 100);
+			accountBalanceFiat = (oldBalance - delta).toFixed(2)
+			if (t > 80) clearInterval(interval);
+			t++;
+		}, 10);
+	};
+
 	$: user = data.user;
+  $: accountBalanceFiat = accountBalanceFiat || user && $rate && (user.account.balance * $rate / sats).toFixed(2);
 
 	let payreq = '',
 		payreqField,
@@ -35,9 +57,7 @@
 
 	$: btcPrice = f($selectedRate, user.currency);
 
-	$: accountBalanceFiat = f(user.account.balance * ($selectedRate / 100000000), user.currency);
-
-	$: accountBalanceBtc = user.account.balance / 100000000;
+	$: accountBalanceBtc = user.account.balance / sats;
 
 	$: accountBalanceSats = s(user.account.balance);
 </script>
diff --git a/src/routes/[username]/receive/+page.svelte b/src/routes/[username]/receive/+page.svelte
index a1dc0a0e..f79e2df5 100644
--- a/src/routes/[username]/receive/+page.svelte
+++ b/src/routes/[username]/receive/+page.svelte
@@ -2,7 +2,7 @@
 	import { AppHeader, Icon } from '$comp';
 	import { goto } from '$app/navigation';
 	import { invoiceAmount, invoiceAmountFiat, selectedRate, user } from '$lib/store';
-	import { f, s, post, warning } from '$lib/utils';
+	import { f, s, post, warning, sats } from '$lib/utils';
 	import { page } from '$app/stores';
 	import { t } from '$lib/translations';
 
@@ -11,19 +11,19 @@
 	let amountSats = 0;
 	let loading = false;
 
-	$: amount = parseInt(useFiat ? Math.round(amountFiat / ($selectedRate / 100000000)) : amountSats);
+	$: amount = parseInt(useFiat ? Math.round(amountFiat / ($selectedRate / sats)) : amountSats);
 
-	$: $invoiceAmount = parseInt(!amountSats ? amountFiat / ($selectedRate / 100000000) : amountSats);
+	$: $invoiceAmount = parseInt(!amountSats ? amountFiat / ($selectedRate / sats) : amountSats);
 
 	$: $invoiceAmountFiat = parseInt(
-		amountFiat === 0 ? amountSats * ($selectedRate / 100000000) : amountFiat
+		amountFiat === 0 ? amountSats * ($selectedRate / sats) : amountFiat
 	);
 
 	$: amountSatsFormatted = s(amountSats);
 
-	$: amountFiatConverted = f(amountSats * ($selectedRate / 100000000), $user.currency);
+	$: amountFiatConverted = f(amountSats * ($selectedRate / sats), $user.currency);
 
-	$: amountSatsConverted = s(amountFiat / ($selectedRate / 100000000));
+	$: amountSatsConverted = s(amountFiat / ($selectedRate / sats));
 
 	const numPad = ['1', '2', '3', '4', '5', '6', '7', '8', '9', '.', '0', '<'];
 
@@ -65,7 +65,7 @@
 						amountFiat = 0;
 					}
 				}
-			} else if (value !== '<' && parseInt(amountSats + value) > 100000000) {
+			} else if (value !== '<' && parseInt(amountSats + value) > sats) {
 				warning($t('user.receive.lessThan1BTCWarning'));
 			} else {
 				amountSats = parseInt(amountSats + value);
@@ -125,11 +125,11 @@
 					<button
 						on:click={() => {
 							if (useFiat) {
-								amountSats = parseInt((amountFiat / ($selectedRate / 100000000)).toFixed(0));
+								amountSats = parseInt((amountFiat / ($selectedRate / sats)).toFixed(0));
 							} else {
 								amountFiat =
-									(amountSats * ($selectedRate / 100000000)).toFixed(2) > 0.0
-										? (amountSats * ($selectedRate / 100000000)).toFixed(2)
+									(amountSats * ($selectedRate / sats)).toFixed(2) > 0.0
+										? (amountSats * ($selectedRate / sats)).toFixed(2)
 										: 0;
 							}
 							useFiat = !useFiat;
diff --git a/src/routes/[username]/transactions/[...page]/+page.svelte b/src/routes/[username]/transactions/[...page]/+page.svelte
index 43b7101e..3042e574 100644
--- a/src/routes/[username]/transactions/[...page]/+page.svelte
+++ b/src/routes/[username]/transactions/[...page]/+page.svelte
@@ -2,7 +2,7 @@
 	import { AppHeader } from '$comp';
 	import { newPayment } from '$lib/store';
 	import { t } from '$lib/translations';
-	import { f, s } from '$lib/utils';
+	import { f, s, sats } from '$lib/utils';
 	export let data;
 
 	let { user } = data;
@@ -47,7 +47,7 @@
 					<div class="grid grid-cols-3 border-b pb-5">
 						<div class="font-bold">
 							<span class="block mb-1"
-								>{tx.amount > 0 ? '+' : ''}{f(tx.amount * (tx.rate / 100000000), tx.currency)}
+								>{tx.amount > 0 ? '+' : ''}{f(tx.amount * (tx.rate / sats), tx.currency)}
 							</span>
 
 							<span class="text-secondary"
diff --git a/src/routes/invoice/[id]/+page.svelte b/src/routes/invoice/[id]/+page.svelte
index ef3ba08e..094f698e 100644
--- a/src/routes/invoice/[id]/+page.svelte
+++ b/src/routes/invoice/[id]/+page.svelte
@@ -1,5 +1,5 @@
 <script>
-	import { copy, f, get, reverseFormat, s, toggleFullscreen } from '$lib/utils';
+	import { copy, f, get, reverseFormat, s, toggleFullscreen, sats } from '$lib/utils';
 	import { browser } from '$app/environment';
 	import { invoices, user } from '$lib/store';
 	import { Icon, Heart, Image, Qr, Tip } from '$comp';
@@ -47,9 +47,9 @@
 	$invoices[id] = { amount, id, rate, received, text, tip, username };
 	$: $invoices[id]?.received && goto(`/invoice/${id}/paid`);
 
-	$: amountFiat = parseFloat(((amount * rate) / 100000000).toFixed(2));
+	$: amountFiat = parseFloat(((amount * rate) / sats).toFixed(2));
 
-	$: tipAmount = ((tip * rate) / 100000000).toFixed(2);
+	$: tipAmount = ((tip * rate) / sats).toFixed(2);
 
 	$: invoiceAmountFiatFormatted = f(amountFiat, currency);
 </script>
@@ -120,7 +120,7 @@
 
 				<div class="px-5 space-y-3">
 					<div class="flex justify-between">
-            <span class="font-semibold text-sm">{$t('invoice.invoice')}</span>
+						<span class="font-semibold text-sm">{$t('invoice.invoice')}</span>
 						<span class="font-semibold text-sm"
 							>{invoiceAmountFiatFormatted}
 							<span class="text-secondary font-normal">{`(${s(amount)} SAT)`}</span></span
@@ -136,7 +136,7 @@
 					</div>
 
 					<div class="flex flex-wrap justify-between">
-            <span class="font-bold mr-1">{$t('invoice.total')}</span>
+						<span class="font-bold mr-1">{$t('invoice.total')}</span>
 						<span class="font-bold"
 							>{f(amountFiat + parseFloat(tipAmount), currency)}
 							<span class="text-secondary font-normal">{`(${s(tip + amount)} SAT)`}</span></span
diff --git a/src/routes/invoice/[id]/paid/+page.svelte b/src/routes/invoice/[id]/paid/+page.svelte
index 0fc09170..456ee3ba 100644
--- a/src/routes/invoice/[id]/paid/+page.svelte
+++ b/src/routes/invoice/[id]/paid/+page.svelte
@@ -2,7 +2,7 @@
 	import { toast } from '@zerodevx/svelte-toast';
 	import { browser } from '$app/environment';
 	import { t } from '$lib/translations';
-	import { f, s } from '$lib/utils';
+	import { f, s, sats } from '$lib/utils';
 	import { LottiePlayer } from '@lottiefiles/svelte-lottie-player';
 	import { goto } from '$app/navigation';
 	import { invoices } from '$lib/store';
@@ -13,7 +13,7 @@
 
 	toast.pop(0);
 
-	$: amountFiat = parseFloat(((amount * rate) / 100000000).toFixed(2));
+	$: amountFiat = parseFloat(((amount * rate) / sats).toFixed(2));
 
 	const handleDoneClick = () => {
 		delete $invoices[invoice.uuid];