diff --git a/src/components/ReactionsModal/ReactionsModal.module.scss b/src/components/ReactionsModal/ReactionsModal.module.scss index 31d712b..7ea6054 100644 --- a/src/components/ReactionsModal/ReactionsModal.module.scss +++ b/src/components/ReactionsModal/ReactionsModal.module.scss @@ -185,7 +185,7 @@ justify-content: center; align-items: center; gap: 6px; - width: 40px; + width: 48px; height: 42px; diff --git a/src/components/ReactionsModal/ReactionsModal.tsx b/src/components/ReactionsModal/ReactionsModal.tsx index 0da2783..316902b 100644 --- a/src/components/ReactionsModal/ReactionsModal.tsx +++ b/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<{ >
-
{truncateNumber(zap.amount)}
+
{zap.amount < 100_000 ? zap.amount.toLocaleString() : truncateNumber2(zap.amount)}
diff --git a/src/lib/notifications.ts b/src/lib/notifications.ts index 9e4fa5a..9d06f98 100644 --- a/src/lib/notifications.ts +++ b/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+`; +};