From b41a453ddaba9fb20aeb5c914555b5896db66e4f Mon Sep 17 00:00:00 2001
From: Mitja Belak <mico@0x0.icu>
Date: Thu, 24 Oct 2024 12:32:33 +0200
Subject: [PATCH] Added available on chain counter

---
 app/src/components/Counter.tsx   | 16 ++++++++++------
 app/src/styles/Header.module.css |  5 +++++
 2 files changed, 15 insertions(+), 6 deletions(-)

diff --git a/app/src/components/Counter.tsx b/app/src/components/Counter.tsx
index efa4695..b33c814 100644
--- a/app/src/components/Counter.tsx
+++ b/app/src/components/Counter.tsx
@@ -12,7 +12,7 @@ const calculateBalance = (balance: bigint, perSecond: bigint, lastRaidedAt: bigi
       / BigInt(1000) /* deduct milliseconds*/))
 }
 
-const toReadable = (value: bigint) => {
+export const toReadable = (value: bigint) => {
   value = value / BigInt(10000);
   const suffixes = [
     { value: BigInt('1000'), suffix: 'thousand' },
@@ -38,7 +38,7 @@ const toReadable = (value: bigint) => {
   for (let i = 0; i < suffixes.length; i++) {
     if (value < suffixes[i].value) {
       if (i == 0) {
-        return value;
+        return value.toString();
       } else {
         const divided = value / suffixes[i - 1].value;
         const remainder = value % suffixes[i - 1].value;
@@ -54,7 +54,7 @@ const Counter = () => {
   const { balance, army, player } = usePlayer();
   const [, render] = useReducer(p => !p, false);
   const balanceCount = useRef(balance.toString() ?? "0")
-
+  const availableBalance = useRef(balance.toString() ?? "0")
   useEffect(() => {
     const tickInterval = setInterval(() => {
       balanceCount.current = toReadable(calculateBalance(
@@ -62,14 +62,18 @@ const Counter = () => {
         army?.profit_per_second ?? BigInt(0),
         player?.last_raided_at ?? BigInt(0)
       )).toString();
+      availableBalance.current = toReadable(balance);
       render();
     }, 100);
     return () => clearInterval(tickInterval)
   }, [balance, army?.profit_per_second, player?.last_raided_at])
 
-  return <p className={styles.counter}>
-    {balanceCount.current} GELD
-  </p>
+  return <>
+    <p className={styles.counter}>
+      {balanceCount.current} GELD
+    </p>
+    <p className={styles.counter_available}>available on chain: {availableBalance.current} GELD</p>
+  </>
 }
 
 export default Counter
diff --git a/app/src/styles/Header.module.css b/app/src/styles/Header.module.css
index 298b4a2..ce97767 100644
--- a/app/src/styles/Header.module.css
+++ b/app/src/styles/Header.module.css
@@ -19,3 +19,8 @@
   font-weight: 600;
   margin: 0;
 }
+.counter_available {
+  font-size: 1rem;
+  margin: 0;
+  opacity: 0.76;
+}