Render Embedded Zap Amount

src/components/EmbeddedNote/EmbeddedNote.module.scss

@@ -1,3 +1,16 @@
+.embeddedZapInfo {
+  display: flex;
+}
+
+.embeddedZapIcon {
+  width: 18px;
+  height: 18px;
+  background-color: var(--active-zap);
+  -webkit-mask: url(../../assets/icons/feed_zap_fill_2.svg) no-repeat center 0 /
+    auto 100%;
+  mask: url(../../assets/icons/feed_zap_fill_2.svg) no-repeat center 0 / auto
+    100%;
+}
 
 .mentionedNote {
   border: none;
@@ -58,7 +71,7 @@
         }
       }
 
-      .time{
+      .time {
         margin: 0px 2px;
         min-width: 40px;
         font-size: 14px;
@@ -107,7 +120,6 @@
         text-overflow: ellipsis;
         white-space: nowrap;
         overflow: hidden;
-
       }
     }
   }
@@ -116,3 +128,4 @@
 .noteContent {
   overflow: hidden;
 }
+

src/components/EmbeddedNote/EmbeddedNote.tsx

@@ -7,22 +7,22 @@ import { useThreadContext } from '../../contexts/ThreadContext';
 import { date } from '../../lib/dates';
 import { trimVerification } from '../../lib/profile';
 import { nip05Verification, userName } from '../../stores/profile';
-import { note as t } from '../../translations';
+import { note as t, profile as tProfile } from '../../translations';
 import { PrimalNote, PrimalUser } from '../../types/primal';
 import Avatar from '../Avatar/Avatar';
 import ParsedNote from '../ParsedNote/ParsedNote';
 import VerificationCheck from '../VerificationCheck/VerificationCheck';
 
 import styles from './EmbeddedNote.module.scss';
+import { humanizeNumber } from '../../lib/stats';
 
 const EmbeddedNote: Component<{
-  note: PrimalNote,
-  mentionedUsers?: Record<string, PrimalUser>,
-  includeEmbeds?: boolean,
-  isLast?: boolean,
-  alternativeBackground?: boolean,
+  note: PrimalNote;
+  mentionedUsers?: Record<string, PrimalUser>;
+  includeEmbeds?: boolean;
+  isLast?: boolean;
+  alternativeBackground?: boolean;
 }> = (props) => {
-
   const threadContext = useThreadContext();
   const intl = useIntl();
 
@@ -30,6 +30,26 @@ const EmbeddedNote: Component<{
 
   const noteId = () => nip19.noteEncode(props.note.post.id);
 
+  const isEmbeddedZap = (props.note.post.kind as number) === 9735;
+  const getEmbeddedZapAmount = () => {
+    try {
+      if (!isEmbeddedZap) return null;
+      const embeddedZapRequest = JSON.parse(
+        props.note.post.tags.find((t) => t[0] === 'description')![1]
+      );
+      const embeddedZapAmount = Math.round(
+        parseInt(
+          embeddedZapRequest.tags.find((t: any) => t[0] === 'amount')[1],
+          10
+        ) / 1000
+      );
+      return embeddedZapAmount;
+    } catch (error) {
+      return null;
+    }
+  };
+  const embeddedZapAmount = getEmbeddedZapAmount();
+
   const navToThread = () => {
     threadContext?.actions.setPrimaryNote(props.note);
   };
@@ -41,11 +61,11 @@ const EmbeddedNote: Component<{
   const klass = () => {
     let k = styles.mentionedNote;
     k += ' embeddedNote';
-    if (props.isLast) k+= ' noBottomMargin';
-    if (props.alternativeBackground) k+= ` ${styles.altBack}`;
+    if (props.isLast) k += ' noBottomMargin';
+    if (props.alternativeBackground) k += ` ${styles.altBack}`;
 
     return k;
-  }
+  };
 
   const wrapper = (children: JSXElement) => {
     if (props.includeEmbeds) {
@@ -75,29 +95,26 @@ const EmbeddedNote: Component<{
 
   return wrapper(
     <>
+      {embeddedZapAmount ? (
+        <div class={styles.embeddedZapInfo}>
+          <div class={styles.embeddedZapIcon}></div>
+          <span>{humanizeNumber(embeddedZapAmount)} sats</span>
+        </div>
+      ) : null}
+
       <div class={styles.mentionedNoteHeader}>
-        <Avatar
-          user={props.note.user}
-          size="xxs"
-        />
+        <Avatar user={props.note.user} size='xxs' />
         <span class={styles.postInfo}>
           <span class={styles.userInfo}>
             <Show
               when={props.note.user.nip05}
               fallback={
-                <span class={styles.userName}>
-                  {userName(props.note.user)}
-                </span>
+                <span class={styles.userName}>{userName(props.note.user)}</span>
               }
             >
-              <span class={styles.userName}>
-                {verification()[0]}
-              </span>
+              <span class={styles.userName}>{verification()[0]}</span>
               <VerificationCheck user={props.note.user} />
-              <span
-                class={styles.verifiedBy}
-                title={props.note.user.nip05}
-              >
+              <span class={styles.verifiedBy} title={props.note.user.nip05}>
                 {nip05Verification(props.note.user)}
               </span>
             </Show>
@@ -122,6 +139,6 @@ const EmbeddedNote: Component<{
       </div>
     </>
   );
-}
+};
 
 export default EmbeddedNote;