improve post cards

packages/nextjs/components/Header.tsx

@@ -1,11 +1,10 @@
 import React, { useCallback, useRef, useState } from "react";
 import Link from "next/link";
 import { useRouter } from "next/router";
-import { ArchiveBoxIcon, Bars3Icon, BugAntIcon, HomeIcon } from "@heroicons/react/24/outline";
+import { ArchiveBoxIcon, Bars3Icon, BugAntIcon, HomeIcon, KeyIcon } from "@heroicons/react/24/outline";
 import { FaucetButton, RainbowKitCustomConnectButton } from "~~/components/scaffold-eth";
 import { useOutsideClick } from "~~/hooks/scaffold-eth";
 
-
 interface HeaderMenuLink {
   label: string;
   href: string;
@@ -17,6 +16,11 @@ export const menuLinks: HeaderMenuLink[] = [
     href: "/",
     icon: <HomeIcon className="h-4 w-4" />,
   },
+  {
+    label: "Login",
+    href: "/login",
+    icon: <KeyIcon className="h-4 w-4" />,
+  },
   {
     label: "Client",
     href: "/client",
@@ -110,4 +114,4 @@ export const Header = () => {
       </div>
     </div>
   );
-};
+};

packages/nextjs/components/client/createPostCard.tsx

@@ -1,7 +1,9 @@
-import { useRef } from "react";
+import { useEffect, useRef, useState } from "react";
 import { useProfile } from "../../hooks/scaffold-eth/useProfile";
+import { Nostr3 } from "@scobru/nostr3/dist/nostr3";
 import { Filter, Relay, UnsignedEvent } from "nostr-tools";
 import { LazyLoadImage } from "react-lazy-load-image-component";
+import { useGlobalState } from "~~/services/store/store";
 
 interface CreatePostCardProps {
   posterPK: string;
@@ -14,17 +16,54 @@ interface CreatePostCardProps {
 
 export default function CreatePostCard(props: CreatePostCardProps) {
   const { data: userData } = useProfile({ pubkey: props.posterPK, relay: props.relay });
-
+  const [isEncrypted, setIsEncrypted] = useState<boolean>(false);
   const textArea = useRef<HTMLTextAreaElement | null>(null);
+  const privateKey = useGlobalState(state => state.nostrKeys.sec);
+  const [pubKeyReceiver, setPubKeyReceiver] = useState<string>("");
+  const [toMe, setToMe] = useState<boolean>(false);
+  const [isDM, setIsDM] = useState<boolean>(false);
+  const nostr3 = new Nostr3(privateKey);
+  const setEventId = useGlobalState(state => state.setEventId);
+  const [proposedEventId, setProposedEventId] = useState<string>("");
+  const eventId = useGlobalState(state => state.eventId);
+
+  /* const extractHashtags = (str: string) => {
+    const regex = /#(\w+)/g;
+    let matches;
+    const hashtags = [];
+
+    while ((matches = regex.exec(str)) !== null) {
+      if (matches.index === regex.lastIndex) {
+        regex.lastIndex++;
+      }
+
+      hashtags.push(matches[1]); // Pushing the captured group, excluding the '#' symbol
+    }
+
+    // Return the hashtags array in the desired format
+    return ["t", ...hashtags];
+  };
+ */
+  useEffect(() => {
+    if (eventId) {
+      setProposedEventId(eventId);
+      setIsEncrypted(false);
+      setIsDM(false);
+    }
+  }, [eventId, proposedEventId]);
 
   return (
-    <div className="divide-y divide-white overflow-hidden rounded-lgshadow border border-dashed">
+    <div
+      className={`divide-y divide-white overflow-hidden rounded-lgshadow border ${
+        proposedEventId ? "border-success border-2 shadow-lg shadow-success" : "border-dashed"
+      }`}
+    >
       <div
         className="px-4 py-5 sm:px-6 text-lg hover:dark:bg-base-300/25 hover:!text-xl hover:cursor-pointer hover:underline hover:decoration-green-300"
         onClick={() => {
           const filter: Filter[] = [
             {
-              kinds: [1, 6],
+              kinds: [1, 6, 4],
               authors: [props.posterPK],
             },
           ];
@@ -44,25 +83,93 @@ export default function CreatePostCard(props: CreatePostCardProps) {
       </div>
       <div className="px-4 py-5 sm:p-6">
         <div className="mt-2">
+          <div className="flex items-center my-4">
+            <input
+              type="checkbox"
+              className="input input-checkbox mx-2"
+              placeholder="Encrypt"
+              onChange={e => {
+                setIsEncrypted(e.target.checked);
+              }}
+            />
+            <span>Encrypt</span>
+            <input
+              type="checkbox"
+              className="input input-checkbox mx-2"
+              placeholder="Encrypt"
+              onChange={e => {
+                setToMe(e.target.checked);
+              }}
+            />
+            <span>To me</span>
+            <input
+              type="checkbox"
+              className="input input-checkbox mx-2"
+              placeholder="Encrypt"
+              checked={isDM}
+              onChange={e => {
+                setIsDM(e.target.checked);
+              }}
+            />
+            <span>DM</span>
+            {(isEncrypted && !toMe) || isDM ? (
+              <input
+                type="text"
+                className="input input-ghost input-sm mx-4"
+                placeholder="Receiver Public Key"
+                value={pubKeyReceiver}
+                onChange={e => {
+                  setPubKeyReceiver(e.target.value);
+                }}
+              />
+            ) : null}
+          </div>
+
           <textarea
             name="post"
             id="post"
-            className="block w-full h-32 bg-gray-900/25 dark:bg-white/25 rounded-lg p-1.5 text-gray-900 text-xl shadow ring-1 ring-inset ring-gray-300 placeholder:text-gray-400 focus:ring-2 focus:ring-inset focus:ring-green-300 sm:leading-6 dark:text-white placeholder:text-gray-800 dark:placeholder:text-gray-200"
+            className="block w-full h-32 bg-gray-900/25 dark:bg-white/25 rounded-lg p-1.5 text-gray-900 text-xl shadow ring-1 ring-inset ring-gray-300 placeholder:text-gray-400 focus:ring-2 focus:ring-inset focus:ring-green-300 sm:leading-6 dark:text-white  dark:placeholder:text-gray-200"
             placeholder="Type your post..."
             ref={textArea}
           ></textarea>
           <button
             className="mt-5 btn btn-ghost"
-            onClick={() => {
-              const newEvent = {
-                kind: 1,
-                created_at: Math.floor(Date.now() / 1000),
-                tags: [],
-                content: textArea?.current?.value,
-                pubkey: props.posterPK,
-              };
+            onClick={async () => {
+              if (!isEncrypted && !isDM && !proposedEventId) {
+                const newEvent = {
+                  kind: 1,
+                  created_at: Math.floor(Date.now() / 1000),
+                  tags: [],
+                  content: textArea?.current?.value,
+                  pubkey: props.posterPK,
+                };
+
+                props.publishEvent(newEvent as UnsignedEvent);
+              } else if (proposedEventId) {
+                const newEvent = {
+                  kind: 1,
+                  created_at: Math.floor(Date.now() / 1000),
+                  tags: [["e", proposedEventId]],
+                  content: textArea?.current?.value,
+                  pubkey: props.posterPK,
+                };
+
+                props.publishEvent(newEvent as UnsignedEvent);
+              } else {
+                const ciphertext = await nostr3.encryptDM(textArea?.current?.value, pubKeyReceiver);
+                const newEvent = {
+                  kind: 4,
+                  created_at: Math.floor(Date.now() / 1000),
+                  tags: [["p", pubKeyReceiver]],
+                  content: ciphertext,
+                  pubkey: props.posterPK,
+                };
+
+                props.publishEvent(newEvent as UnsignedEvent);
+              }
 
-              props.publishEvent(newEvent as UnsignedEvent);
+              setProposedEventId("");
+              setEventId("");
             }}
           >
             Publish

packages/nextjs/components/client/createdAccModal.tsx

@@ -30,7 +30,7 @@ export default function CreatedAccModal(props: CreatedAccModalProps) {
               </div>
               <div className="mt-3 w-full h-full text-center sm:ml-4 sm:mt-0 sm:text-left">
                 <h3 className="font-semibold text-gray-800 dark:text-gray-200" id="modal-title">
-                  Store Your Keys Somewhere Safe Fren <span className="ml-2 text-lg font-bold text-green-700">:)</span>
+                  Store Your Keys Somewhere Safe <span className="ml-2 text-lg font-bold text-green-700">:)</span>
                 </h3>
                 <div className="mt-10 w-full h-50 flex flex-row justify-center space-x-5">
                   <button