fix: long history agent ID in history node

Author: Ni-2

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

@@ -1,28 +1,31 @@
 import { AccordionContent, AccordionItem, AccordionTrigger } from '@/components/ui/accordion'
 import { formatNearAmount } from '@/lib/utils'
-import { FC } from 'react'
+import { FC, useMemo } from 'react'
 import { THistoryNote } from '../types'
 
 export const HistoryCard: FC<{ note: THistoryNote }> = ({ note }) => {
-  const amountInNear = formatNearAmount(note.amount)
-  const amountInNearRounded = amountInNear.slice(0, amountInNear.indexOf('.') + 4)
+  const amountInNearRounded = useMemo(() => {
+    const amountInNear = formatNearAmount(note.amount)
+    return amountInNear.slice(0, amountInNear.indexOf('.') + 4)
+  }, [note.amount])
+
   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)">
+          <div className="flex py-0.25 text-xs/[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">
+        <div className="flex w-max shrink-0 py-0.25 text-[14px] font-semibold">
           {(note.operationType === 'income' ? '+ ' : '- ') + amountInNearRounded}
         </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)">
+        <div className="flex py-0.25 text-xs/[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">
+        <div className="flex py-0.25 text-[14px]/4 font-semibold break-all">
           {note.capabilityName}
         </div>
       </div>