add setting for account name and display name

src/components/modals/ReplyModal.jsx

@@ -1,5 +1,5 @@
 import React, { useCallback, useEffect, useRef, useState } from 'react';
-import { usePublishComment } from '@plebbit/plebbit-react-hooks';
+import { useAccount, usePublishComment } from '@plebbit/plebbit-react-hooks';
 import { StyledModal } from '../styled/modals/ReplyModal.styled';
 import useGeneralStore from '../../hooks/stores/useGeneralStore';
 import Modal from 'react-modal';
@@ -21,8 +21,9 @@ const ReplyModal = ({ isOpen, closeModal }) => {
     selectedStyle,
   } = useGeneralStore(state => state);
 
+  const account = useAccount();
+  
   const nodeRef = useRef(null);
-
   const nameRef = useRef();
   const commentRef = useRef();
   const linkRef = useRef();
@@ -224,7 +225,11 @@ const ReplyModal = ({ isOpen, closeModal }) => {
           </div>
           <div id="form">
             <div>
-              <input id="name" type="text" placeholder="Name" ref={nameRef} />
+              {account.author.displayName ? (
+                <input id="name" type="text" value={account.author.displayName} ref={nameRef} disabled />
+              ) : (
+                <input id="name" type="text" placeholder="Anonymous" ref={nameRef} />
+              )}
             </div>
             <div>
               <input id="name" type="text" placeholder="Embed link" ref={linkRef} />

src/components/modals/SettingsModal.jsx

@@ -11,7 +11,10 @@ const {version} = packageJson
 
 
 const SettingsModal = ({ isOpen, closeModal }) => {
-  const selectedStyle = useGeneralStore(state => state.selectedStyle);
+  const {
+    selectedStyle,
+  } = useGeneralStore(state => state);
+
   const navigate = useNavigate();
   const location = useLocation();
   const [expanded, setExpanded] = useState([]);
@@ -30,6 +33,7 @@ const SettingsModal = ({ isOpen, closeModal }) => {
   const pubsubRef = useRef();
   const dataPathRef = useRef();
   const importRef = useRef();
+  const nameRef = useRef();
 
   const isValidURL = (url) => {
     try {
@@ -171,6 +175,23 @@ const SettingsModal = ({ isOpen, closeModal }) => {
   const handleAccountChange = (e) => {
     setActiveAccount(e.target.value);
   };
+
+  const handleDisplayName = async () => {
+    const name = nameRef.current.value;
+
+    try {
+      await setAccount({ 
+        ...account, 
+        name: name || account.name,
+        author: {
+          ...account.author,
+          displayName: name,
+     }});
+      setSuccessMessage("Account Name Saved");
+    } catch (error) {
+      setErrorMessage(error.message);
+    }
+  };
   
   
   return (
@@ -229,31 +250,27 @@ const SettingsModal = ({ isOpen, closeModal }) => {
           </li>
           <ul className="settings-cat" style={{ display: expanded.includes(1) ? 'block' : 'none' }}>
             <li className="settings-option disc">
-              Export or Import Your Data
+              Account Data
             </li>
-              <div className="plebbit-options-buttons"
-              style={{ display: expanded.includes(1) ? 'block' : 'none' }}
-              >
-                <button className="save-button" 
-                onClick={handleExport}>Export</button>
-                <button className="reset-button" 
-                onClick={handleImport}
-                >Import</button> 
-              </div>
+            <div className="plebbit-options-buttons">
+              <button className="save-button" 
+              onClick={handleExport}>Export</button>
+              <button className="reset-button" 
+              onClick={handleImport}
+              >Import</button> 
+            </div>
             <li className="settings-tip">
               To export, click "Export", then save your account data displayed below in a safe place. To import,  paste your account data into the box below, then click "Import".
             </li>
             <div className="settings-input">
               <textarea ref={importRef} value={accountJson} />
             </div>
-            <li className="settings-option disc">
-              Current Account: {account?.name}
+            <li className="settings-option disc" style={{marginTop: '15px'}}>
+              Account Address: u/{account?.author.shortAddress}
             </li>
             <li className="settings-tip">
               Select a different account to use in the dropdown below.
             </li>
-          </ul>
-          <ul className="settings-cat" style={{ display: expanded.includes(1) ? 'block' : 'none' }}>
             <li>
               <div className="settings-input">
                 <select className="settings-select"
@@ -268,8 +285,24 @@ const SettingsModal = ({ isOpen, closeModal }) => {
                 </select>
               </div>
             </li>
+            <li className="settings-option disc" style={{marginTop: '15px'}}>
+              Account Name
+            </li>
+            <li className="settings-tip">
+              Change both your account name (default "Account 1") and display name (default "Anonymous"). This will not change your address.
+            </li>
+            <li>  
+              <div className="settings-input">
+                <input className="settings-input" style={{marginLeft: '20px'}}
+                type="text" ref={nameRef} defaultValue={account?.author.displayName}
+                placeholder="Anonymous"
+                />
+                <button className="save-button" id="save-name"
+                onClick={handleDisplayName}>Save</button>
+              </div>
+            </li>
+          </ul>
           </ul>
-        </ul>
         <ul>
           <li className="settings-cat-lbl">
             <span className={`${expanded.includes(2) ? 'minus' : 'plus'}`}

src/components/styled/modals/SettingsModal.styled.jsx

@@ -107,6 +107,13 @@ export const StyledModal = styled(Modal)`
     }
   }
 
+  #save-name {
+    display: inline-block;
+    margin-left: 10px;
+    height: 23px;
+    position: absolute;
+  }
+
   .cache-button {
     margin: auto;
     margin-bottom: 10px;
@@ -148,6 +155,12 @@ export const StyledModal = styled(Modal)`
   .settings-input {
     position: relative;
     padding-left: 23px;
+
+    input {
+      padding-left: 5px;
+      left: 4px;
+      font-family: monospace;
+    }
   }
 
   .settings-input::before {

src/components/views/Board.jsx

@@ -639,7 +639,11 @@ const Board = () => {
             <tr data-type="Name">
               <td id="td-name">Name</td>
               <td>
-                <input name="name" type="text" tabIndex={1} placeholder="Anonymous" ref={nameRef} />
+                {account.author.displayName ? (
+                  <input name="name" type="text" tabIndex={1} value={account.author.displayName} ref={nameRef} disabled />
+                ) : (
+                  <input name="name" type="text" placeholder="Anonymous" tabIndex={1} ref={nameRef} />
+                )}
               </td>
             </tr>
             <tr data-type="Subject">

src/components/views/Catalog.jsx

@@ -565,7 +565,11 @@ const Catalog = () => {
               <tr data-type="Name">
                 <td id="td-name">Name</td>
                 <td>
-                  <input name="name" type="text" tabIndex={1} placeholder="Anonymous" ref={nameRef} />
+                  {account.author.displayName ? (
+                    <input name="name" type="text" tabIndex={1} value={account.author.displayName} ref={nameRef} disabled />
+                  ) : (
+                    <input name="name" type="text" placeholder="Anonymous" tabIndex={1} ref={nameRef} />
+                  )}
                 </td>
               </tr>
               <tr data-type="Subject">

src/components/views/Thread.jsx

@@ -614,7 +614,11 @@ const Thread = () => {
               <tr data-type="Name">
                 <td id="td-name">Name</td>
                 <td>
-                  <input name="name" type="text" tabIndex={1} placeholder="Anonymous" ref={nameRef} />
+                  {account.author.displayName ? (
+                    <input name="name" type="text" tabIndex={1} value={account.author.displayName} ref={nameRef} disabled />
+                  ) : (
+                    <input name="name" type="text" placeholder="Anonymous" tabIndex={1} ref={nameRef} />
+                  )}
                   <input id="post-button" type="submit" value="Post" tabIndex={6} 
                   onClick={handleSubmit} />
                 </td>