Settings page

src/Util.js

@@ -78,7 +78,7 @@ export const Reaction = {
  * @returns 
  */
 export function normalizeReaction(content) {
-    switch(content) {
+    switch (content) {
         case "": return Reaction.Positive;
         case "🤙": return Reaction.Positive;
         case "❤️": return Reaction.Positive;
@@ -89,4 +89,26 @@ export function normalizeReaction(content) {
         case "👎": return Reaction.Negative;
     }
     return content;
+}
+
+/**
+ * Converts LNURL service to LN Address
+ * @param {string} lnurl 
+ * @returns 
+ */
+export function extractLnAddress(lnurl) {
+    // some clients incorrectly set this to LNURL service, patch this
+    if (lnurl.toLowerCase().startsWith("lnurl")) {
+        let url = bech32ToText(lnurl);
+        if (url.startsWith("http")) {
+            let parsedUri = new URL(url);
+            // is lightning address
+            if (parsedUri.pathname.startsWith("/.well-known/lnurlp/")) {
+                let pathParts = parsedUri.pathname.split('/');
+                let username = pathParts[pathParts.length - 1];
+                return `${username}@${parsedUri.hostname}`;
+            }
+        }
+    }
+    return lnurl;
 }

src/element/Copy.css

@@ -0,0 +1,14 @@
+.copy {
+    user-select: none;
+    cursor: pointer;
+}
+
+.copy .body {
+    font-family: monospace;
+    font-size: 14px;
+    margin: 0;
+    width: 18em;
+    overflow: hidden;
+    white-space: nowrap;
+    text-overflow: ellipsis;
+}

src/element/Copy.js

@@ -0,0 +1,21 @@
+import "./Copy.css";
+import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
+import { faCopy, faCheck } from "@fortawesome/free-solid-svg-icons";
+import { useCopy } from "../useCopy";
+
+export default function Copy(props) {
+
+    const { copy, copied, error } = useCopy();
+    return (
+        <div className="flex flex-row copy" onClick={() => copy(props.text)}>
+            <FontAwesomeIcon
+                icon={copied ? faCheck : faCopy}
+                size="xs"
+                style={{ color: copied ? 'green' : 'currentColor', marginRight: '2px' }}
+            />
+            <p className="body">
+                {props.text}
+            </p>
+        </div>
+    )
+}

src/feed/UsersFeed.js

@@ -1,7 +1,6 @@
 import { useEffect, useMemo } from "react";
 import { useDispatch, useSelector } from "react-redux";
 import { ProfileCacheExpire } from "../Const";
-import Event from "../nostr/Event";
 import EventKind from "../nostr/EventKind";
 import { Subscriptions } from "../nostr/Subscriptions";
 import { setUserData } from "../state/Users";

src/index.css

@@ -83,6 +83,10 @@ input[type="text"], input[type="password"], input[type="number"], textarea {
   min-width: 0;
 }
 
+.f-center {
+  justify-content: center;
+}
+
 .f-1 {
   flex: 1;
 }
@@ -106,6 +110,9 @@ input[type="text"], input[type="password"], input[type="number"], textarea {
 
 .w-max {
   width: 100%;
+  width: -moz-available;
+  width: -webkit-fill-available;
+  width: fill-available;
 }
 
 a {
@@ -148,7 +155,17 @@ div.form-group > div {
   word-break: break-word;
 }
 
-div.form-group > div:first-child {
+div.form-group > div:nth-child(1) {
+  min-width: 100px;
+}
+
+div.form-group > div:nth-child(2) {
+  display: flex;
+  flex-grow: 1;
+  justify-content: end;
+}
+
+div.form-group > div:nth-child(2) input {
   flex-grow: 1;
 }
 

src/index.js

@@ -18,6 +18,7 @@ import RootPage from './pages/Root';
 import Store from "./state/Store";
 import NotificationsPage from './pages/Notifications';
 import NewUserPage from './pages/NewUserPage';
+import SettingsPage from './pages/SettingsPage';
 
 export const System = new NostrSystem();
 
@@ -34,6 +35,9 @@ root.render(
             <Route path="/p/:id" exact element={<ProfilePage />} />
             <Route path="/notifications" exact element={<NotificationsPage />} />
             <Route path="/new" exact element={<NewUserPage />} />
+            <Route path="/settings" exact element={<SettingsPage />}>
+              <Route path="/settings/relays" exact element={<h2>Relays</h2>} />
+            </Route>
           </Routes>
         </Layout>
       </Router>

src/nostr/Connection.js

@@ -4,6 +4,16 @@ import { Subscriptions } from "./Subscriptions";
 import Event from "./Event";
 import { DefaultConnectTimeout } from "../Const";
 
+export class ConnectionStats {
+    constructor() {
+        this.Latency = [];
+        this.Subs = 0;
+        this.SubsTimeout = 0;
+        this.EventsReceived = 0;
+        this.EventsSent = 0;
+    }
+}
+
 export default class Connection {
     constructor(addr, options) {
         this.Address = addr;
@@ -13,6 +23,7 @@ export default class Connection {
         this.Read = options?.read || true;
         this.Write = options?.write || true;
         this.ConnectTimeout = DefaultConnectTimeout;
+        this.Stats = new ConnectionStats();
         this.Connect();
     }
 
@@ -145,6 +156,7 @@ export default class Connection {
     _OnEvent(subId, ev) {
         if (this.Subscriptions[subId]) {
             //this._VerifySig(ev);
+            ev.relay = this.Address; // tag event with relay
             this.Subscriptions[subId].OnEvent(ev);
         } else {
             // console.warn(`No subscription for event! ${subId}`);

src/pages/Layout.js

@@ -68,7 +68,7 @@ export default function Layout(props) {
     return (
         <div className="page">
             <div className="header">
-                <div onClick={() => navigate("/")}>n o s t r</div>
+                <div onClick={() => navigate("/")}>snort</div>
                 <div>
                     {key ? accountHeader() :
                         <div className="btn" onClick={() => navigate("/login")}>Login</div>

src/pages/ProfilePage.css

@@ -18,50 +18,13 @@
     margin: 0;
 }
 
-.profile .npub-container {
-    user-select: none;
-    cursor: pointer;
-}
-
-.profile .npub {
-    font-family: monospace;
-    font-size: 14px;
-    margin: 0;
-    width: 18em;
-    overflow: hidden;
-    white-space: nowrap;
-    text-overflow: ellipsis;
-}
-
 .profile .avatar {
     width: 256px;
     height: 256px;
     background-size: cover;
-    cursor: pointer;
     border-radius: 10px;
 }
 
-.profile .avatar .edit {
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    width: 100%;
-    height: 100%;
-    opacity: 0;
-    background-color: black;
-}
-
-.profile .avatar .edit:hover {
-    opacity: 0.5;
-}
-
-.profile .editor textarea {
-    resize: vertical;
-    width: calc(100% - 30px);
-    max-height: 300px;
-    min-height: 60px;
-}
-
 @media(max-width: 720px) {
     .profile {
         flex-direction: column;

src/pages/ProfilePage.js

@@ -1,200 +1,44 @@
 import "./ProfilePage.css";
-import { useEffect, useMemo, useRef, useState } from "react";
-import { useDispatch, useSelector } from "react-redux";
+import Nostrich from "../nostrich.jpg";
+
+import { useState } from "react";
+import { useSelector } from "react-redux";
 import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
-import { faQrcode, faCopy, faCheck } from "@fortawesome/free-solid-svg-icons";
-import { useParams } from "react-router-dom";
+import { faQrcode } from "@fortawesome/free-solid-svg-icons";
+import { useNavigate, useParams } from "react-router-dom";
 
 import useProfile from "../feed/ProfileFeed";
-import { resetProfile } from "../state/Users";
-import Nostrich from "../nostrich.jpg";
-import useEventPublisher from "../feed/EventPublisher";
-import QRCodeStyling from "qr-code-styling";
-import { logout } from "../state/Login";
 import FollowButton from "../element/FollowButton";
-import VoidUpload from "../feed/VoidUpload";
-import { bech32ToText, openFile, parseId } from "../Util";
+import { extractLnAddress, parseId } from "../Util";
 import Timeline from "../element/Timeline";
 import { extractLinks } from '../Text'
-import { useCopy } from '../useCopy'
 import LNURLTip from "../element/LNURLTip";
+import Copy from "../element/Copy";
 
 export default function ProfilePage() {
-    const dispatch = useDispatch();
     const params = useParams();
+    const navigate = useNavigate();
     const id = parseId(params.id);
     const user = useProfile(id);
-    const publisher = useEventPublisher();
     const loginPubKey = useSelector(s => s.login.publicKey);
     const isMe = loginPubKey === id;
-    const qrRef = useRef();
-    const { copy, copied, error } = useCopy()
-
-    const [name, setName] = useState("");
-    const [picture, setPicture] = useState("");
-    const [about, setAbout] = useState("");
-    const [website, setWebsite] = useState("");
-    const [nip05, setNip05] = useState("");
-    const [lud06, setLud06] = useState("");
-    const [lud16, setLud16] = useState("");
     const [showLnQr, setShowLnQr] = useState(false);
 
-    useEffect(() => {
-        if (user) {
-            setName(user.name ?? "");
-            setPicture(user.picture ?? "");
-            setAbout(user.about ?? "");
-            setWebsite(user.website ?? "");
-            setNip05(user.nip05 ?? "");
-            setLud06(user.lud06 ?? "");
-            setLud16(user.lud16 ?? "");
-        }
-    }, [user]);
-
-    useMemo(() => {
-        // some clients incorrectly set this to LNURL service, patch this
-        if (lud16.toLowerCase().startsWith("lnurl")) {
-            let url = bech32ToText(lud16);
-            if (url.startsWith("http")) {
-                let parsedUri = new URL(url);
-                // is lightning address
-                if (parsedUri.pathname.startsWith("/.well-known/lnurlp/")) {
-                    let pathParts = parsedUri.pathname.split('/');
-                    let username = pathParts[pathParts.length - 1];
-                    setLud16(`${username}@${parsedUri.hostname}`);
-                }
-            }
-        }
-    }, [lud16]);
-
-    useMemo(() => {
-        if (qrRef.current && showLnQr) {
-            let qr = new QRCodeStyling({
-                data: { lud16 },
-                type: "canvas"
-            });
-            qrRef.current.innerHTML = "";
-            qr.append(qrRef.current);
-        }
-    }, [showLnQr]);
-
-    async function saveProfile() {
-        // copy user object and delete internal fields
-        let userCopy = {
-            ...user,
-            name,
-            about,
-            picture,
-            website,
-            nip05,
-            lud16
-        };
-        delete userCopy["loaded"];
-        delete userCopy["fromEvent"];
-        // event top level props should not be copied into metadata (bug)
-        delete userCopy["pubkey"];
-        delete userCopy["sig"];
-        delete userCopy["pubkey"];
-        delete userCopy["tags"];
-        delete userCopy["content"];
-        delete userCopy["created_at"];
-        delete userCopy["id"];
-        delete userCopy["kind"]
-
-        // trim empty string fields
-        Object.keys(userCopy).forEach(k => {
-            if (userCopy[k] === "") {
-                delete userCopy[k];
-            }
-        });
-        console.debug(userCopy);
-
-        let ev = await publisher.metadata(userCopy);
-        console.debug(ev);
-        dispatch(resetProfile(id));
-        publisher.broadcast(ev);
-    }
-
-    async function setNewAvatar() {
-        let file = await openFile();
-        console.log(file);
-        let rsp = await VoidUpload(file);
-        if (!rsp) {
-            throw "Upload failed, please try again later";
-        }
-        console.log(rsp);
-        setPicture(rsp.metadata.url ?? `https://void.cat/d/${rsp.id}`)
-    }
-
-    function editor() {
-        return (
-            <div className="editor">
-                <div className="form-group">
-                    <div>Name:</div>
-                    <div>
-                        <input type="text" value={name} onChange={(e) => setName(e.target.value)} />
-                    </div>
-                </div>
-                <div className="form-group f-col">
-                    <div>About:</div>
-                    <div className="w-max">
-                        <textarea onChange={(e) => setAbout(e.target.value)} value={about}></textarea>
-                    </div>
-                </div>
-                <div className="form-group">
-                    <div>Website:</div>
-                    <div>
-                        <input type="text" value={website} onChange={(e) => setWebsite(e.target.value)} />
-                    </div>
-                </div>
-                <div className="form-group">
-                    <div>NIP-05:</div>
-                    <div>
-                        <input type="text" value={nip05} onChange={(e) => setNip05(e.target.value)} />
-                    </div>
-                </div>
-                <div className="form-group">
-                    <div>LN Address:</div>
-                    <div>
-                        <input type="text" value={lud16} onChange={(e) => setLud16(e.target.value)} />
-                    </div>
-                </div>
-                <div className="form-group">
-                    <div>
-                        <div className="btn" onClick={() => dispatch(logout())}>Logout</div>
-                    </div>
-                    <div>
-                        <div className="btn" onClick={() => saveProfile()}>Save</div>
-                    </div>
-                </div>
-            </div>
-        )
-    }
-
     function details() {
-        const lnurl = lud16 || lud06;
+        const lnurl = extractLnAddress(user?.lud16 || user?.lud06 || "");
         return (
             <>
                 <div className="flex name">
                     <div className="f-grow">
-                        <h2>{name}</h2>
-                        <div className="flex flex-row npub-container" onClick={() => copy(params.id)}>
-                            <FontAwesomeIcon
-                              icon={copied ? faCheck : faCopy}
-                              size="xs"
-                              style={{ color: copied ? 'green' : 'currentColor', marginRight: '2px' }}
-                            />
-                            <p className="npub">
-                              {params.id}
-                            </p>
-                        </div>
+                        <h2>{user?.name}</h2>
+                        <Copy text={params.id} />
                     </div>
                     <div>
-                        <FollowButton pubkey={id} />
+                        {isMe ? <div className="btn" onClick={() => navigate("/settings")}>Settings</div> : <FollowButton pubkey={id} />}
                     </div>
                 </div>
-                <p>{extractLinks([about])}</p>
-                {website ? <a href={website} target="_blank" rel="noreferrer">{website}</a> : null}
+                <p>{extractLinks([user?.about])}</p>
+                {user?.website ? <a href={user?.website} target="_blank" rel="noreferrer">{user?.website}</a> : null}
 
                 {lnurl ? <div className="flex">
                     <div className="btn" onClick={(e) => setShowLnQr(true)}>
@@ -202,7 +46,7 @@ export default function ProfilePage() {
                     </div>
                     <div className="f-ellipsis">&nbsp; ⚡️ {lnurl}</div>
                 </div> : null}
-                <LNURLTip svc={lnurl} show={showLnQr} onClose={() => setShowLnQr(false)}/>
+                <LNURLTip svc={lnurl} show={showLnQr} onClose={() => setShowLnQr(false)} />
             </>
         )
     }
@@ -211,17 +55,11 @@ export default function ProfilePage() {
         <>
             <div className="profile flex">
                 <div>
-                    <div style={{ backgroundImage: `url(${picture.length === 0 ? Nostrich : picture})` }} className="avatar">
-                        {isMe ?
-                            <div className="edit" onClick={() => setNewAvatar()}>
-                                <div>Edit</div>
-                            </div>
-                            : null
-                        }
+                    <div style={{ backgroundImage: `url(${user?.picture.length === 0 ? Nostrich : user?.picture})` }} className="avatar">
                     </div>
                 </div>
                 <div className="f-grow">
-                    {isMe ? editor() : details()}
+                    {details()}
                 </div>
             </div>
             <div className="tabs">

src/pages/SettingsPage.css

@@ -0,0 +1,28 @@
+
+.settings .avatar {
+    width: 256px;
+    height: 256px;
+    background-size: cover;
+    border-radius: 10px;
+    cursor: pointer;
+}
+
+.settings .avatar .edit {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    width: 100%;
+    height: 100%;
+    opacity: 0;
+    background-color: black;
+}
+
+.settings .avatar .edit:hover {
+    opacity: 0.5;
+}
+
+.settings .editor textarea {
+    resize: vertical;
+    max-height: 300px;
+    min-height: 40px;
+}

src/pages/SettingsPage.js

@@ -0,0 +1,145 @@
+import "./SettingsPage.css";
+import Nostrich from "../nostrich.jpg";
+
+import { useEffect, useState } from "react";
+import { useDispatch, useSelector } from "react-redux";
+
+import useEventPublisher from "../feed/EventPublisher";
+import useProfile from "../feed/ProfileFeed";
+import VoidUpload from "../feed/VoidUpload";
+import { logout } from "../state/Login";
+import { resetProfile } from "../state/Users";
+import { openFile } from "../Util";
+
+export default function SettingsPage(props) {
+    const id = useSelector(s => s.login.publicKey);
+    const dispatch = useDispatch();
+    const user = useProfile(id);
+    const publisher = useEventPublisher();
+
+    const [name, setName] = useState("");
+    const [picture, setPicture] = useState("");
+    const [about, setAbout] = useState("");
+    const [website, setWebsite] = useState("");
+    const [nip05, setNip05] = useState("");
+    const [lud06, setLud06] = useState("");
+    const [lud16, setLud16] = useState("");
+
+    useEffect(() => {
+        if (user) {
+            setName(user.name ?? "");
+            setPicture(user.picture ?? "");
+            setAbout(user.about ?? "");
+            setWebsite(user.website ?? "");
+            setNip05(user.nip05 ?? "");
+            setLud06(user.lud06 ?? "");
+            setLud16(user.lud16 ?? "");
+        }
+    }, [user]);
+
+    async function saveProfile() {
+        // copy user object and delete internal fields
+        let userCopy = {
+            ...user,
+            name,
+            about,
+            picture,
+            website,
+            nip05,
+            lud16
+        };
+        delete userCopy["loaded"];
+        delete userCopy["fromEvent"];
+        // event top level props should not be copied into metadata (bug)
+        delete userCopy["pubkey"];
+        delete userCopy["sig"];
+        delete userCopy["pubkey"];
+        delete userCopy["tags"];
+        delete userCopy["content"];
+        delete userCopy["created_at"];
+        delete userCopy["id"];
+        delete userCopy["kind"]
+
+        // trim empty string fields
+        Object.keys(userCopy).forEach(k => {
+            if (userCopy[k] === "") {
+                delete userCopy[k];
+            }
+        });
+        console.debug(userCopy);
+
+        let ev = await publisher.metadata(userCopy);
+        console.debug(ev);
+        dispatch(resetProfile(id));
+        publisher.broadcast(ev);
+    }
+
+    async function setNewAvatar() {
+        let file = await openFile();
+        console.log(file);
+        let rsp = await VoidUpload(file);
+        if (!rsp) {
+            throw "Upload failed, please try again later";
+        }
+        console.log(rsp);
+        setPicture(rsp.metadata.url ?? `https://void.cat/d/${rsp.id}`)
+    }
+
+    function editor() {
+        return (
+            <div className="editor">
+                <div className="form-group">
+                    <div>Name:</div>
+                    <div>
+                        <input type="text" value={name} onChange={(e) => setName(e.target.value)} />
+                    </div>
+                </div>
+                <div className="form-group f-col">
+                    <div>About:</div>
+                    <div className="w-max">
+                        <textarea className="w-max" onChange={(e) => setAbout(e.target.value)} value={about}></textarea>
+                    </div>
+                </div>
+                <div className="form-group">
+                    <div>Website:</div>
+                    <div>
+                        <input type="text" value={website} onChange={(e) => setWebsite(e.target.value)} />
+                    </div>
+                </div>
+                <div className="form-group">
+                    <div>NIP-05:</div>
+                    <div>
+                        <input type="text" value={nip05} onChange={(e) => setNip05(e.target.value)} />
+                    </div>
+                </div>
+                <div className="form-group">
+                    <div>LN Address:</div>
+                    <div>
+                        <input type="text" value={lud16} onChange={(e) => setLud16(e.target.value)} />
+                    </div>
+                </div>
+                <div className="form-group">
+                    <div>
+                        <div className="btn" onClick={() => dispatch(logout())}>Logout</div>
+                    </div>
+                    <div>
+                        <div className="btn" onClick={() => saveProfile()}>Save</div>
+                    </div>
+                </div>
+            </div>
+        )
+    }
+
+    return (
+        <div className="settings">
+            <h1>Settings</h1>
+            <div className="flex f-center">
+                <div style={{ backgroundImage: `url(${picture.length === 0 ? Nostrich : picture})` }} className="avatar">
+                    <div className="edit">Edit</div>
+                </div>
+            </div>
+
+            {editor()}
+        </div>
+    );
+}