workspace with decoupled nostr package

packages/app/src/Element/DM.tsx

@@ -0,0 +1,61 @@
+import "./DM.css";
+import { useEffect, useState } from "react";
+import { useDispatch, useSelector } from "react-redux";
+import { useIntl } from "react-intl";
+import { useInView } from "react-intersection-observer";
+
+import useEventPublisher from "Feed/EventPublisher";
+import { Event } from "@snort/nostr";
+import NoteTime from "Element/NoteTime";
+import Text from "Element/Text";
+import { setLastReadDm } from "Pages/MessagesPage";
+import { RootState } from "State/Store";
+import { HexKey, TaggedRawEvent } from "@snort/nostr";
+import { incDmInteraction } from "State/Login";
+import { unwrap } from "Util";
+
+import messages from "./messages";
+
+export type DMProps = {
+  data: TaggedRawEvent;
+};
+
+export default function DM(props: DMProps) {
+  const dispatch = useDispatch();
+  const pubKey = useSelector<RootState, HexKey | undefined>(s => s.login.publicKey);
+  const publisher = useEventPublisher();
+  const [content, setContent] = useState("Loading...");
+  const [decrypted, setDecrypted] = useState(false);
+  const { ref, inView } = useInView();
+  const { formatMessage } = useIntl();
+  const isMe = props.data.pubkey === pubKey;
+  const otherPubkey = isMe ? pubKey : unwrap(props.data.tags.find(a => a[0] === "p")?.[1]);
+
+  async function decrypt() {
+    const e = new Event(props.data);
+    const decrypted = await publisher.decryptDm(e);
+    setContent(decrypted || "<ERROR>");
+    if (!isMe) {
+      setLastReadDm(e.PubKey);
+      dispatch(incDmInteraction());
+    }
+  }
+
+  useEffect(() => {
+    if (!decrypted && inView) {
+      setDecrypted(true);
+      decrypt().catch(console.error);
+    }
+  }, [inView, props.data]);
+
+  return (
+    <div className={`flex dm f-col${isMe ? " me" : ""}`} ref={ref}>
+      <div>
+        <NoteTime from={props.data.created_at * 1000} fallback={formatMessage(messages.JustNow)} />
+      </div>
+      <div className="w-max">
+        <Text content={content} tags={[]} users={new Map()} creator={otherPubkey} />
+      </div>
+    </div>
+  );
+}