update SettingsModal, add useStateString, fixes

src/components/SettingsModal.jsx

@@ -189,7 +189,7 @@ const SettingsModal = ({ isOpen, closeModal }) => {
             <li>
             </li>
           </ul>
-        </ul>
+        </ul>*/}
         <ul>
           <li className="settings-cat-lbl">
           <span className={`${expanded.includes(1) ? 'minus' : 'plus'}`}
@@ -197,13 +197,19 @@ const SettingsModal = ({ isOpen, closeModal }) => {
           />
           <span className="settings-pointer" style={{cursor: "pointer"}}
             onClick={() => toggleExpanded(1)}
-          >Profile</span>
+          >Account</span>
+          <div className="plebbit-options-buttons"
+          style={{ display: expanded.includes(1) ? 'block' : 'none' }}
+          >
+            <button className="save-button">Export</button>
+            <button className="reset-button">Import</button> 
+          </div>
           </li>
           <ul className="settings-cat" style={{ display: expanded.includes(1) ? 'block' : 'none' }}>
             <li>
             </li>
           </ul>
-        </ul> */}
+        </ul>
         <ul>
           <li className="settings-cat-lbl">
             <span className={`${expanded.includes(2) ? 'minus' : 'plus'}`}
@@ -213,11 +219,11 @@ const SettingsModal = ({ isOpen, closeModal }) => {
               onClick={() => toggleExpanded(2)}
             >Plebbit Options</span>
             <div className="plebbit-options-buttons"
-              style={{ display: expanded.includes(2) ? 'block' : 'none' }}
+            style={{ display: expanded.includes(2) ? 'block' : 'none' }}
             >
               <button className="save-button" onClick={handleSavePlebbitOptions}>Save</button>
-              <button className="reset-button"onClick={handleResetPlebbitOptions}>Reset</button>
-             </div>
+              <button className="reset-button"onClick={handleResetPlebbitOptions}>Reset</button> 
+            </div>
           </li>
           <ul className="settings-cat" style={{ display: expanded.includes(2) ? 'block' : 'none' }}>
             <li className="settings-option disc">

src/hooks/useStateString.js

@@ -0,0 +1,47 @@
+import { useMemo } from 'react'
+
+const useStateString = (clients) => {
+  const stateString = useMemo(() => {
+    if (!clients) {
+      return
+    }
+    const states = {}
+    for (const clientType in clients) {
+      for (const clientUrl in clients[clientType]) {
+        const state = clients[clientType][clientUrl].state
+        if (state === 'stopped') {
+          continue
+        }
+        if (!states[state]) {
+          states[state] = []
+        }
+        states[state].push(clientUrl)
+      }
+    }
+
+    let stateString = ''
+    for (const state in states) {
+      const clientUrls = states[state]
+      const clientHosts = clientUrls.map(clientUrl => new URL(clientUrl).hostname)
+
+      // separate 2 different states using ', '
+      if (stateString) {
+        stateString += ', '
+      }
+
+      // e.g. 'fetching IPFS from cloudflare-ipfs.com, ipfs.io'
+      const formattedState = state.replaceAll('-', ' ').replace('ipfs', 'IPFS').replace('ipns', 'IPNS')
+      stateString += `${formattedState} from ${clientHosts.join(', ')}`
+    }
+
+    // capitalize first letter
+    stateString = stateString.charAt(0).toUpperCase() + stateString.slice(1)
+
+    // if string is empty, return undefined instead
+    return stateString || undefined
+  }, [clients])
+
+  return stateString
+}
+
+export default useStateString