hide zaps from muted users in stream

src/components/post-modal/index.tsx

@@ -47,6 +47,7 @@ import useCurrentAccount from "../../hooks/use-current-account";
 import useCacheForm from "../../hooks/use-cache-form";
 import { useAdditionalRelayContext } from "../../providers/additional-relay-context";
 import { useTextAreaUploadFileWithForm } from "../../hooks/use-textarea-upload-file";
+import { useThrottle } from "react-use";
 
 type FormValues = {
   subject: string;
@@ -147,6 +148,8 @@ export default function PostModal({
   const canSubmit = getValues().content.length > 0;
   const mentions = getContentMentions(correctContentMentions(getValues().content));
 
+  const previewDraft = useThrottle(getDraft(), 500);
+
   const renderContent = () => {
     if (publishAction) {
       return (
@@ -176,12 +179,12 @@ export default function PostModal({
             if (e.ctrlKey && e.key === "Enter") submit();
           }}
         />
-        {getValues().content.length > 0 && (
+        {previewDraft.content.length > 0 && (
           <Box>
             <Heading size="sm">Preview:</Heading>
             <Box borderWidth={1} borderRadius="md" p="2">
               <TrustProvider trust>
-                <NoteContents event={getDraft()} />
+                <NoteContents event={previewDraft} />
               </TrustProvider>
             </Box>
           </Box>

src/views/streams/stream/stream-chat/zap-message.tsx

@@ -11,6 +11,7 @@ import { parseZapEvent } from "../../../../helpers/nostr/zaps";
 import { readablizeSats } from "../../../../helpers/bolt11";
 import { TrustProvider } from "../../../../providers/trust";
 import ChatMessageContent from "./chat-message-content";
+import useClientSideMuteFilter from "../../../../hooks/use-client-side-mute-filter";
 
 function ZapMessage({ zap, stream }: { zap: NostrEvent; stream: ParsedStream }) {
   const ref = useRef<HTMLDivElement | null>(null);
@@ -21,8 +22,10 @@ function ZapMessage({ zap, stream }: { zap: NostrEvent; stream: ParsedStream })
       return parseZapEvent(zap);
     } catch (e) {}
   }, [zap]);
+  const clientMuteFilter = useClientSideMuteFilter();
 
   if (!parsed || !parsed.payment.amount) return null;
+  if (clientMuteFilter(parsed.event)) return null;
 
   return (
     <TrustProvider event={parsed.request}>

src/views/thread/components/reply-form.tsx

@@ -25,6 +25,7 @@ import { useContextEmojis } from "../../../providers/emoji-provider";
 import { TrustProvider } from "../../../providers/trust";
 import { nostrBuildUploadImage } from "../../../helpers/nostr-build";
 import { UploadImageIcon } from "../../../components/icons";
+import { useThrottle } from "react-use";
 
 export type ReplyFormProps = {
   item: ThreadItem;
@@ -96,6 +97,7 @@ export default function ReplyForm({ item, onCancel, onSubmitted, replyKind = Kin
   });
 
   const formRef = useRef<HTMLFormElement | null>(null);
+  const previewDraft = useThrottle(draft, 500);
 
   return (
     <Flex as="form" direction="column" gap="2" pb="4" onSubmit={submit} ref={formRef}>
@@ -142,10 +144,10 @@ export default function ReplyForm({ item, onCancel, onSubmitted, replyKind = Kin
           </Button>
         </ButtonGroup>
       </Flex>
-      {getValues().content.length > 0 && (
+      {previewDraft.content.length > 0 && (
         <Box p="2" borderWidth={1} borderRadius="md" mb="2">
           <TrustProvider trust>
-            <NoteContents event={draft} />
+            <NoteContents event={previewDraft} />
           </TrustProvider>
         </Box>
       )}