Infomation component + fixes

Kennix88 · Dec 17, 2024 · 4d52d12 · 4d52d12
1 parent f10b4ed
commit 4d52d12
Show file tree

Hide file tree

Showing 3 changed files with 42 additions and 9 deletions.
diff --git a/apps/HashRateGame/src/app/(telegram)/app/(main)/mining/_components/Information.tsx b/apps/HashRateGame/src/app/(telegram)/app/(main)/mining/_components/Information.tsx
@@ -1,13 +1,46 @@
+import { TbCoins } from 'react-icons/tb'
 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="bg-surface-container-l2 p-4 rounded-md text-sm flex flex-row flex-wrap gap-4 ">
+        <div className="flex flex-row gap-2 w-full items-center">
+          <div className="opacity-80 text-nowrap">Total mined</div>
+          <div className="bg-surface-container-h h-4 w-full flex items-center justify-start rounded-sm">
+            <div className="bg-gold h-full w-[34%] flex items-center justify-center text-on-primary font-normal rounded-sm"></div>
+          </div>
+          <div className="text-nowrap font-normal text-gold">
+            {addSuffixToNumber(235_000)}/{addSuffixToNumber(1_000_000_000)}
+          </div>
+        </div>
+        <div className="flex flex-row gap-2 items-center">
+          <div className="opacity-80">Status</div>
+          <div className="text-nowrap bg-warning-container text-on-warning-container rounded-sm px-2 font-normal">
+            Pending
+          </div>
+        </div>
+        <div className="flex flex-row gap-2 items-center">
           <div className="opacity-80">Complexity</div>
-          <div className="text-nowrap">{addSuffixToNumber(1647, 2)}</div>
+          <div className="text-nowrap font-normal ">
+            {addSuffixToNumber(1647, 2)}
+          </div>
+        </div>
+        <div className="flex flex-row gap-2 items-center">
+          <div className="opacity-80">Income</div>
+          <div className="flex flex-row gap-1 items-center text-silver text-nowrap font-normal">
+            <TbCoins className="text-lg " /> {addSuffixToNumber(246.53)}/hr
+          </div>
+          <div className="flex flex-row gap-1 items-center text-gold text-nowrap font-normal">
+            <TbCoins className="text-lg " /> {addSuffixToNumber(10.07)}/hr
+          </div>
+        </div>
+        <div className="flex flex-row gap-2 items-center">
+          <div className="opacity-80">Energy consumption</div>
+          <div className="text-nowrap font-normal ">
+            {addSuffixToNumber(53, 2)}/min
+          </div>
         </div>
       </div>
     </div>

diff --git a/apps/HashRateGame/src/app/(telegram)/app/(main)/mining/_components/Profile.tsx b/apps/HashRateGame/src/app/(telegram)/app/(main)/mining/_components/Profile.tsx
@@ -6,7 +6,7 @@ export default function Profile() {
     <>
       <div className="flex flex-col font-extralight">
         <div className="px-4  opacity-50">Profile</div>
-        <div className="bg-surface-container-l2 p-4 rounded-md grid grid-cols-2 gap-2 text-sm">
+        <div className="bg-surface-container-l2 p-4 rounded-md grid grid-cols-2 gap-4 text-sm">
           <div className="flex flex-row gap-2 flex-wrap col-span-2 items-center">
             <div className="flex justify-center items-center p-1 rounded-md bg-primary w-[40px] h-[40px]">
               🤖
@@ -23,10 +23,10 @@ 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">
+            <div className="flex flex-row gap-1 items-center text-silver text-nowrap font-normal">
               <TbCoins className="text-lg " /> {addSuffixToNumber(24648310.53)}
             </div>
-            <div className="flex flex-row gap-1 items-center text-gold text-nowrap">
+            <div className="flex flex-row gap-1 items-center text-gold text-nowrap font-normal">
               <TbCoins className="text-lg " /> {addSuffixToNumber(107021.07)}
             </div>
           </div>
@@ -35,7 +35,7 @@ export default function Profile() {
             <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">
+            <div className="text-nowrap font-normal">
               {(1647).toLocaleString('en-US')}/{(10500).toLocaleString('en-US')}
             </div>
           </div>

diff --git a/apps/HashRateGame/src/utils/addSuffixToNumber.util.ts b/apps/HashRateGame/src/utils/addSuffixToNumber.util.ts
@@ -1,6 +1,6 @@
 export default function addSuffixToNumber(
   number: number,
-  float: number = 3,
+  fixed: number = 3,
 ): string {
   const suffixes = ['', 'K', 'M', 'B', 'T', 'Q', 'S', 'O', 'N', 'D', 'U', 'D']
   let suffixIndex = 0
@@ -11,7 +11,7 @@ export default function addSuffixToNumber(
   }
 
   if (number % 1 !== 0) {
-    return `${number.toFixed(float)}${suffixes[suffixIndex]}`
+    return `${number.toFixed(fixed)}${suffixes[suffixIndex]}`
   } else {
     return `${number.toFixed(0)}${suffixes[suffixIndex]}`
   }