Change zap amount truncation in reactions modal

src/components/ReactionsModal/ReactionsModal.module.scss

@@ -185,7 +185,7 @@
     justify-content: center;
     align-items: center;
     gap: 6px;
-    width: 40px;
+    width: 48px;
     height: 42px;
 
 

src/components/ReactionsModal/ReactionsModal.tsx

@@ -9,7 +9,7 @@ import { ReactionStats } from '../../contexts/AppContext';
 import { hookForDev } from '../../lib/devTools';
 import { hexToNpub } from '../../lib/keys';
 import { getEventReactions } from '../../lib/notes';
-import { truncateNumber } from '../../lib/notifications';
+import { truncateNumber, truncateNumber2 } from '../../lib/notifications';
 import { subscribeTo } from '../../sockets';
 import { userName } from '../../stores/profile';
 import { actions as tActions, placeholders as tPlaceholders } from '../../translations';
@@ -119,6 +119,7 @@ const ReactionsModal: Component<{
       if (type === 'EOSE') {
         const zapData = zaps.map((zap => ({
           ...zap,
+          amount: parseInt(zap.amount || '0'),
           sender: users[zap.pubkey],
         })));
 
@@ -324,7 +325,7 @@ const ReactionsModal: Component<{
                   >
                     <div class={styles.zapAmount}>
                       <div class={styles.zapIcon}></div>
-                      <div class={styles.amount}>{truncateNumber(zap.amount)}</div>
+                      <div class={styles.amount}>{zap.amount < 100_000 ? zap.amount.toLocaleString() : truncateNumber2(zap.amount)}</div>
                     </div>
                     <Avatar src={zap.sender?.picture} size="vs" />
                     <div class={styles.zapInfo}>

src/lib/notifications.ts

@@ -148,3 +148,29 @@ export const truncateNumber = (amount: number, from?: 1 | 2 | 3 | 4) => {
 
   return `1T+`;
 };
+
+
+export const truncateNumber2 = (amount: number, from?: 1 | 2 | 3 | 4) => {
+  const t = 1_000;
+  const s = from || 1;
+
+  const l = Math.pow(t, s);
+
+  if (amount < l) {
+    return amount.toLocaleString();
+  }
+
+  if (amount < Math.pow(t, 2)) {
+    return `${(amount / t).toFixed(1)}K`;
+  }
+
+  if (amount < Math.pow(t, 3)) {
+    return `${(amount / Math.pow(t, 2)).toFixed(1)}M`
+  }
+
+  if (amount < Math.pow(t, 4)) {
+    return `${(amount / Math.pow(t, 3)).toFixed(1)}B`
+  }
+
+  return `1T+`;
+};