animated balance

8 files changed, 54 insertions, 32 deletions

diff --git a/src/components/Tip.svelte b/src/components/Tip.svelte
index d08368d9..8509405c 100644
--- a/src/components/Tip.svelte
+++ b/src/components/Tip.svelte
@@ -63,7 +63,7 @@
 		showCustomAmount = false;
 	};
 
-let timeout;
+	let timeout;
 	const handleSlide = (e) => {
 		customTipAmount = '';
 		if (customInput) {
diff --git a/src/lib/utils.js b/src/lib/utils.js
index 7c05e7c3..df621c4b 100644
--- a/src/lib/utils.js
+++ b/src/lib/utils.js
@@ -142,3 +142,5 @@ export const toggleFullscreen = (el) =>
 	document.fullscreenElement
 		? document.exitFullscreen()
 		: el.requestFullscreen().catch(console.log);
+
+export const sats = 100000000;
diff --git a/src/locales/en.json b/src/locales/en.json
index 704f6d1b..7c07f0e9 100644
--- a/src/locales/en.json
+++ b/src/locales/en.json
@@ -5,7 +5,7 @@
 	},
 	"about": {
 		"header": "About",
-		"p1": "coinos is an open source bitcoin payment app. Development started in Vancouver in September 2012 as a way to provide local merchants with a convenient way to accept bitcoin payments.",
+		"p1": "Coinos is an open source bitcoin payment app. Development started in Vancouver in September 2012 as a way to provide local merchants with a convenient way to accept bitcoin payments.",
 		"p2": "You can download the source code to run an instance and connect it to your own bitcoin and lightning nodes. We'll help you get started being a benevolent custodian and payments provider for your community.",
 		"p3": "Account transfers amongst users on our server are done off-chain so they're completely free, instant, and unlimited.",
 		"team": {
@@ -44,7 +44,7 @@
 		},
 		"locations": {
 			"header": "Locations",
-			"description": "These are businesses that are accepting bitcoin with coinos. If you are using our application, please <a href=\"mailto:[email protected]\" class=\"underline underline-offset-4 hover:opacity-80\">let us know!</a>"
+			"description": "These are businesses that are accepting bitcoin with Coinos. If you are using our application, please <a href=\"mailto:[email protected]\" class=\"underline underline-offset-4 hover:opacity-80\">let us know!</a>"
 		}
 	},
 	"error": {
@@ -56,11 +56,11 @@
 		"header": "FAQ",
 		"cost": {
 			"question": "What does it cost?",
-			"answer": "coinos is free to use. You pay nothing to register and maintain your account. You can send and receive unlimited payments over the lightning network at no cost. We charge a 0.1% conversion fee if you need to move your funds off of lightning to an on-chain bitcoin address at an external wallet or exchange."
+			"answer": "Coinos is free to use. You pay nothing to register and maintain your account. You can send and receive unlimited payments over the lightning network at no cost. We charge a 0.1% conversion fee if you need to move your funds off of lightning to an on-chain bitcoin address at an external wallet or exchange."
 		},
 		"compatibility": {
 			"question": "Do I need any special device or software?",
-			"answer": "No. coinos is web-based, so as long as you have an internet connection, you can use it on any device. Retail merchants might use it on a phone or a tablet."
+			"answer": "No. Coinos is web-based, so as long as you have an internet connection, you can use it on any device. Retail merchants might use it on a phone or a tablet."
 		},
 		"safety": {
 			"question": "What can I do with the bitcoin I receive?",
@@ -104,7 +104,7 @@
 	"jobs": {
 		"header": "Jobs",
 		"subheader": "Current Openings",
-		"pitch1": "coinos is actively looking for developers to join our growing team (full-time or part-time, remote working OK).",
+		"pitch1": "Coinos is actively looking for developers to join our growing team (full-time or part-time, remote working OK).",
 		"pitch2": "Excited about working on open source bitcoin? Then take a look at our repositories on",
 		"github": "GitHub",
 		"pitch3": "If you think you can make an impact, we'd love to hear from you. Send us your resume to"
@@ -121,7 +121,7 @@
 		"info2": {
 			"title": "Simple to use",
 			"description1": "Just enter an amount in your local currency, share the QR code and you’re done.",
-			"description2": "coinos gives you free access to use our hosted bitcoin and lightning nodes, eliminating the need to understand how bitcoin or lightning works. We do all the heavy lifting so you can focus on your business.",
+			"description2": "Coinos gives you free access to use our hosted bitcoin and lightning nodes, eliminating the need to understand how bitcoin or lightning works. We do all the heavy lifting so you can focus on your business.",
 			"description3": "You always have the option of taking custody of your funds by withdrawing instantly at any time."
 		},
 		"info3": {
@@ -193,7 +193,7 @@
 			"emailNotifications": "Email Notifications",
 			"emailNotificationsDescription": "Get notified via email when a change occurs on your account or when people send you payments.",
 			"smsNotifications": "SMS Notifications",
-			"smsNotificationsDescription": "coinos will send you text notifications when this is enabled.",
+			"smsNotificationsDescription": "Coinos will send you text notifications when this is enabled.",
 			"theme": "Color Theme",
 			"themeDescription": "Select from the default color themes.",
 			"localCurrency": "Local Currency",
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];