Merge branch '173-connect-backend-to-the-payments-and-usage-page' into xen-tg-app

Author: Ni-2

apps/xen-tg-app/src/components/HistoryNote.tsx

@@ -8,27 +8,32 @@ import { formatNearAmount } from '@/lib/utils'
 import { FC } from 'react'
 import { THistoryNote } from '../types'
 
-export const HistoryCard: FC<{ note: THistoryNote }> = ({ note }) => (
-  <div className="flex items-center justify-between gap-2.5">
-    <div className="flex min-w-12 flex-col items-center gap-0.5">
-      {note.isFree ? (
-        <div className="flex py-0.25 text-[12px]/[100%] font-normal text-(--color-my-primary)">
-          FREE
+export const HistoryCard: FC<{ note: THistoryNote }> = ({ note }) => {
+  const amountInNear = formatNearAmount(note.amount)
+  const amountInNearRounded = amountInNear.slice(0, amountInNear.indexOf('.') + 4)
+  return (
+    <div className="flex items-center justify-between gap-2.5">
+      <div className="flex w-max min-w-12 shrink-0 flex-col items-start gap-0.5">
+        {note.isFree ? (
+          <div className="flex py-0.25 text-[12px]/[100%] font-normal text-(--color-my-primary)">
+            FREE
+          </div>
+        ) : null}
+        <div className="flex w-max shrink-0 py-0.25 text-[14px]/[150%] font-semibold">
+          {(note.operationType === 'income' ? '+ ' : '- ') + amountInNearRounded}
         </div>
-      ) : null}
-      <div className="flex py-0.25 text-[14px]/[150%] font-semibold">
-        {(note.operationType === 'income' ? '+ ' : '- ') +
-          Math.round(+formatNearAmount(note.amount) * 1000) / 1000}
       </div>
-    </div>
-    <div className="flex flex-col gap-0.5">
-      <div className="flex py-0.25 text-[12px]/[100%] font-normal text-(--color-gray-text)">
-        {new Date(note.createdAt).toLocaleString()}
+      <div className="flex flex-col gap-0.5">
+        <div className="flex py-0.25 text-[12px]/[100%] font-normal text-(--color-gray-text)">
+          {new Date(note.createdAt).toLocaleString()}
+        </div>
+        <div className="flex py-0.25 text-[14px]/[150%] font-semibold wrap-anywhere">
+          {note.capabilityName}
+        </div>
       </div>
-      <div className="flex py-0.25 text-[14px]/[150%] font-semibold">{note.capabilityName}</div>
     </div>
-  </div>
-)
+  )
+}
 
 type THistoryNoteProps = {
   note: THistoryNote