Util addSuffixToNumber

apps/HashRateGame/src/app/(telegram)/app/(main)/mining/_components/Information.tsx

@@ -0,0 +1,15 @@
+import addSuffixToNumber from '../../../../../../utils/addSuffixToNumber.util'
+
+export default function Information() {
+  return (
+    <div className="flex flex-col font-extralight">
+      <div className="px-4  opacity-50">Information</div>
+      <div className="bg-surface-container-l2 p-4 rounded-md text-sm grid grid-cols-2 gap-2 ">
+        <div className="flex flex-row gap-2 col-span-2 items-center">
+          <div className="opacity-80">Complexity</div>
+          <div className="text-nowrap">{addSuffixToNumber(1647, 2)}</div>
+        </div>
+      </div>
+    </div>
+  )
+}

apps/HashRateGame/src/app/(telegram)/app/(main)/mining/_components/Profile.tsx

@@ -1,4 +1,5 @@
 import { TbCoins } from 'react-icons/tb'
+import addSuffixToNumber from '../../../../../../utils/addSuffixToNumber.util'
 
 export default function Profile() {
   return (
@@ -22,19 +23,21 @@ export default function Profile() {
           </div>
           <div className="flex flex-row gap-2 flex-wrap col-span-2 items-center">
             <div className="opacity-80">Balance</div>
-            <div className="flex flex-row gap-1 items-center text-silver text-nowrap text-[12px]">
-              <TbCoins className="text-lg " /> 24 648 310.53
+            <div className="flex flex-row gap-1 items-center text-silver text-nowrap">
+              <TbCoins className="text-lg " /> {addSuffixToNumber(24648310.53)}
             </div>
-            <div className="flex flex-row gap-1 items-center text-gold text-nowrap text-[12px]">
-              <TbCoins className="text-lg " /> 107 021.07
+            <div className="flex flex-row gap-1 items-center text-gold text-nowrap">
+              <TbCoins className="text-lg " /> {addSuffixToNumber(107021.07)}
             </div>
           </div>
           <div className="flex flex-row gap-2 col-span-2 items-center">
             <div className="opacity-80">Energy</div>
             <div className="bg-surface-container-h h-4 w-full flex items-center justify-start rounded-sm">
               <div className="bg-primary h-full w-[75%] flex items-center justify-center text-on-primary font-normal rounded-sm"></div>
             </div>
-            <div className="text-nowrap">1 647/10 500</div>
+            <div className="text-nowrap">
+              {(1647).toLocaleString('en-US')}/{(10500).toLocaleString('en-US')}
+            </div>
           </div>
         </div>
       </div>

apps/HashRateGame/src/app/(telegram)/app/(main)/mining/page.tsx

@@ -1,11 +1,11 @@
-import Condition from './_components/Condition'
+import Information from './_components/Information'
 import Profile from './_components/Profile'
 
 export default function Page() {
   return (
     <div className="flex flex-col gap-2">
       <Profile />
-      <Condition />
+      <Information />
     </div>
   )
 }

apps/HashRateGame/src/utils/addSuffixToNumber.util.ts

@@ -0,0 +1,18 @@
+export default function addSuffixToNumber(
+  number: number,
+  float: number = 3,
+): string {
+  const suffixes = ['', 'K', 'M', 'B', 'T', 'Q', 'S', 'O', 'N', 'D', 'U', 'D']
+  let suffixIndex = 0
+
+  while (number >= 1000 && suffixIndex < suffixes.length - 1) {
+    number /= 1000
+    suffixIndex++
+  }
+
+  if (number % 1 !== 0) {
+    return `${number.toFixed(float)}${suffixes[suffixIndex]}`
+  } else {
+    return `${number.toFixed(0)}${suffixes[suffixIndex]}`
+  }
+}