From 78b430264e17a2601a27ddf14587779975974e32 Mon Sep 17 00:00:00 2001
From: Bojan Mojsilovic <bmojsilovic@itekako.com>
Date: Tue, 16 Apr 2024 12:50:44 +0200
Subject: [PATCH] Fix reaction modal zaps linking to undefined

---
 .../ReactionsModal/ReactionsModal.tsx         | 12 ++++-----
 src/translations.ts                           | 27 ++++++++++++++++++-
 2 files changed, 32 insertions(+), 7 deletions(-)

diff --git a/src/components/ReactionsModal/ReactionsModal.tsx b/src/components/ReactionsModal/ReactionsModal.tsx
index 316902b..459869b 100644
--- a/src/components/ReactionsModal/ReactionsModal.tsx
+++ b/src/components/ReactionsModal/ReactionsModal.tsx
@@ -12,7 +12,7 @@ import { getEventReactions } from '../../lib/notes';
 import { truncateNumber, truncateNumber2 } from '../../lib/notifications';
 import { subscribeTo } from '../../sockets';
 import { userName } from '../../stores/profile';
-import { actions as tActions, placeholders as tPlaceholders } from '../../translations';
+import { actions as tActions, placeholders as tPlaceholders, reactionsModal } from '../../translations';
 import { parseBolt11 } from '../../utils';
 import Avatar from '../Avatar/Avatar';
 import Loader from '../Loader/Loader';
@@ -241,22 +241,22 @@ const ReactionsModal: Component<{
             <Tabs.List class={styles.tabs}>
               <Show when={props.stats.likes > 0}>
                 <Tabs.Trigger class={styles.tab} value={'likes'} >
-                  Likes ({props.stats.likes})
+                 {intl.formatMessage(reactionsModal.tabs.likes, { count: props.stats.likes })}
                 </Tabs.Trigger>
               </Show>
               <Show when={props.stats.zaps > 0}>
                 <Tabs.Trigger class={styles.tab} value={'zaps'} >
-                  Zaps ({props.stats.zaps})
+                 {intl.formatMessage(reactionsModal.tabs.zaps, { count: props.stats.zaps })}
                 </Tabs.Trigger>
               </Show>
               <Show when={props.stats.reposts > 0}>
                 <Tabs.Trigger class={styles.tab} value={'reposts'} >
-                  Reposts ({props.stats.reposts})
+                 {intl.formatMessage(reactionsModal.tabs.reposts, { count: props.stats.reposts })}
                 </Tabs.Trigger>
               </Show>
               <Show when={props.stats.quotes > 0}>
                 <Tabs.Trigger class={styles.tab} value={'quotes'} >
-                  Quotes ({props.stats.quotes})
+                 {intl.formatMessage(reactionsModal.tabs.quotes, { count: props.stats.quotes })}
                 </Tabs.Trigger>
               </Show>
 
@@ -319,7 +319,7 @@ const ReactionsModal: Component<{
               >
                 {zap =>
                   <A
-                    href={`/p/${zap.npub}`}
+                    href={`/p/${hexToNpub(zap.pubkey)}`}
                     class={styles.zapItem}
                     onClick={props.onClose}
                   >
diff --git a/src/translations.ts b/src/translations.ts
index 8b11649..ee1f5bd 100644
--- a/src/translations.ts
+++ b/src/translations.ts
@@ -444,7 +444,7 @@ export const actions = {
   reactions: {
     id: 'actions.reactions',
     defaultMessage: 'Reactions ({count})',
-    description: 'Label for zap',
+    description: 'Label for reactions',
   },
 };
 
@@ -2263,3 +2263,28 @@ export const cashuInvoice = {
   },
 
 };
+
+export const reactionsModal = {
+  tabs: {
+    likes: {
+      id: 'reactionsModal.tabs.likes',
+      defaultMessage: 'Likes {count}',
+      description: 'Likes tab label in reactions modal',
+    },
+    zaps: {
+      id: 'reactionsModal.tabs.zaps',
+      defaultMessage: 'Zaps {count}',
+      description: 'Zaps tab label in reactions modal',
+    },
+    reposts: {
+      id: 'reactionsModal.tabs.reposts',
+      defaultMessage: 'Reposts {count}',
+      description: 'Reposts tab label in reactions modal',
+    },
+    quotes: {
+      id: 'reactionsModal.tabs.quotes',
+      defaultMessage: 'Quotes {count}',
+      description: 'Quotes tab label in reactions modal',
+    },
+  }
+};