profile settings

src/components/Settings.jsx

@@ -0,0 +1,89 @@
+// deno-lint-ignore-file no-explicit-any
+import { useState } from "react";
+import { useAtom } from "react-atomize-store";
+import { useNavigate } from "react-router-dom";
+import { sendSignEvent } from "../utils";
+import { useNostr } from "../context/NostrProvider";
+
+const Settings = () => {
+  const [keypair] = useAtom("keypair");
+  const navigate = useNavigate();
+  const { publish } = useNostr();
+
+  if (!keypair.pk) return navigate("/");
+
+  const onRevokeKey = () => {
+    sendSignEvent({
+      kind: 5,
+      content: "delete",
+      tags: [
+        ["p", keypair.pk],
+        ["intent", "delete"],
+      ],
+      keypair,
+      publish,
+    }).then(() => navigate("/"));
+  };
+
+  // d04dacdd491a8221359c5a100010dc44b59e14a0d9c3cc1067b4431e438e2fb7
+
+  return (
+    <div className="container">
+      <h3>Settings</h3>
+
+      {keypair.sk !== "nip07" && <Keys keypair={keypair} />}
+
+      <button onClick={() => onRevokeKey()}>Revoke key</button>
+    </div>
+  );
+};
+
+const Keys = ({ keypair }) => {
+  const [showSk, setShowSk] = useState({ enable: false, show: false });
+
+  return (
+    <div className="col">
+      <div className="col-2">
+        <strong>Public key</strong>
+        <pre>{keypair.pk}</pre>
+      </div>
+      <div className="col-2">
+        <strong>Private key</strong>
+        <pre>{!showSk.show ? "*".repeat(keypair.sk.length) : keypair.sk}</pre>
+      </div>
+
+      {!showSk.enable && (
+        <label>
+          <input
+            type="checkbox"
+            onChange={(e) => {
+              if (e.target.checked) {
+                setShowSk((prev) => ({
+                  ...prev,
+                  enable: !prev.show,
+                }));
+              }
+            }}
+          />{" "}
+          <span>Yes, I want to see my private key</span>
+        </label>
+      )}
+
+      {showSk.enable && (
+        <button
+          onClick={() => {
+            setShowSk((prev) => ({
+              ...prev,
+              show: !prev.show,
+            }));
+          }}
+          className="btn"
+        >
+          {showSk.show ? "Hide" : "Show"} private key
+        </button>
+      )}
+    </div>
+  );
+};
+
+export default Settings;

src/components/Snip.jsx

@@ -4,21 +4,21 @@ import SyntaxHighlighter from "react-syntax-highlighter";
 import { dracula } from "react-syntax-highlighter/dist/esm/styles/hljs";
 import { useNostr } from "../context/NostrProvider";
 import { useAtom } from "react-atomize-store";
+import { useNavigate } from "react-router-dom";
 
 const Snip = ({ events }) => {
   const [keypair] = useAtom("keypair");
+  const navigate = useNavigate();
   const { publish } = useNostr();
 
   const onDeleteSnip = (id) => {
-    // console.log("delete", id);
-
     sendSignEvent({
       kind: 5,
       content: "deleted",
       tags: [["e", id]],
       keypair,
       publish,
-    }).then(() => console.log("deleted"));
+    }).then(() => navigate("/"));
   };
 
   return (

src/pages/Profile.jsx

@@ -1,13 +1,21 @@
-import { useParams } from "react-router-dom";
+import { useParams, Link } from "react-router-dom";
 import { useNostrEvents } from "../context/NostrProvider";
 import Snip from "../components/Snip";
 import { shortPubKey } from "../utils";
 import { Loading } from "../components/Loading";
 import { TOPIC } from "../config";
+import Settings from "../components/Settings";
+import { useAtom } from "react-atomize-store";
 
 const Profile = () => {
   const { id } = useParams();
 
+  return <div>{id !== "profile" ? <Set id={id} /> : <Settings />}</div>;
+};
+
+const Set = ({ id }) => {
+  const [keypair] = useAtom("keypair");
+
   const { events, isLoading } = useNostrEvents({
     filter: {
       "#t": [TOPIC],
@@ -18,11 +26,11 @@ const Profile = () => {
   });
 
   return (
-    <div>
+    <>
       <h2>Profile {shortPubKey(id, 10)}</h2>
-
+      {id === keypair.pk && <Link to={`/profile`}>Settings</Link>}
       {isLoading ? <Loading /> : <Snip events={events} />}
-    </div>
+    </>
   );
 };
 

src/styles/Comments.scss

@@ -3,7 +3,7 @@
 }
 
 .container {
-  background-color: #fff;
+  margin: 20px 0;
 }
 
 button {
@@ -223,3 +223,7 @@ button {
 .pointer {
   cursor: pointer;
 }
+
+.col-2 {
+  margin: 15px 0;
+}