Added available on chain counter

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}>
+  return <>
-    {balanceCount.current} GELD
+    <p className={styles.counter}>
-  </p>
+      {balanceCount.current} GELD
+    </p>
+    <p className={styles.counter_available}>available on chain: {availableBalance.current} GELD</p>
+  </>
 }
 
 export default Counter

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;
+}