update SettingsModal, add useStateString, fixes

package.json

@@ -8,7 +8,7 @@
     "@babel/plugin-transform-react-jsx": "7.21.0",
     "@capacitor/android": "3.6.0",
     "@capacitor/core": "3.6.0",
-    "@plebbit/plebbit-react-hooks": "https://github.com/plebbit/plebbit-react-hooks.git#91ea5a494fde74836b085e912f671cc5489ecf09",
+    "@plebbit/plebbit-react-hooks": "https://github.com/plebbit/plebbit-react-hooks.git#e602eda8080f2b3449388c2d5868d6e6da60c8f6",
     "@testing-library/dom": "9.0.1",
     "@testing-library/jest-dom": "5.14.1",
     "@testing-library/react": "14.0.0",

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>
+              <button className="reset-button"onClick={handleResetPlebbitOptions}>Reset</button> 
-             </div>
+            </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

yarn.lock

@@ -2655,6 +2655,48 @@
     ts-custom-error "3.3.1"
     uuid "9.0.0"
 
+"@plebbit/plebbit-js@https://github.com/plebbit/plebbit-js.git#bcf4ec7ba024fdd7dc0bb2fab76c27c93597dd50":
+  version "0.0.3"
+  resolved "https://github.com/plebbit/plebbit-js.git#bcf4ec7ba024fdd7dc0bb2fab76c27c93597dd50"
+  dependencies:
+    "@keyv/sqlite" "3.6.2"
+    "@plebbit/plebbit-logger" "github:plebbit/plebbit-logger"
+    "@types/node-fetch" "2.6.2"
+    "@types/proper-lockfile" "4.1.2"
+    "@types/uuid" "8.3.4"
+    assert "2.0.0"
+    async-wait-until "2.0.12"
+    buffer "6.0.3"
+    captcha-canvas "3.2.1"
+    err-code "3.0.1"
+    ethers "5.7.2"
+    file-type "16.5.4"
+    form-data "4.0.0"
+    hpagent "1.2.0"
+    ipfs-http-client "56.0.3"
+    ipfs-only-hash "4.0.0"
+    is-ipfs "6.0.2"
+    jose "4.11.0"
+    js-sha256 "0.9.0"
+    keyv "4.5.2"
+    knex "2.3.0"
+    libp2p-crypto "0.21.2"
+    limiter "2.1.0"
+    localforage "1.10.0"
+    lodash-es "4.17.21"
+    open-graph-scraper "5.2.3"
+    p-limit "3.1.0"
+    peer-id "0.16.0"
+    proper-lockfile "github:plebbit/node-proper-lockfile"
+    retry "0.13.1"
+    safe-stable-stringify "2.4.1"
+    skia-canvas "1.0.0"
+    sqlite3 "5.1.2"
+    tiny-typed-emitter "2.1.0"
+    tinycache "1.1.2"
+    ts-custom-error "3.3.1"
+    uuid "9.0.0"
+
 "@plebbit/plebbit-logger@github:plebbit/plebbit-logger":
   version "0.0.1"
   uid "9525ca9539479918931c3b334e8d490d1c87e507"
@@ -2683,6 +2725,21 @@
     uuid "8.3.2"
     zustand "4.0.0"
 
+"@plebbit/plebbit-react-hooks@https://github.com/plebbit/plebbit-react-hooks.git#e602eda8080f2b3449388c2d5868d6e6da60c8f6":
+  version "0.0.1"
+  resolved "https://github.com/plebbit/plebbit-react-hooks.git#e602eda8080f2b3449388c2d5868d6e6da60c8f6"
+  dependencies:
+    "@plebbit/plebbit-js" "https://github.com/plebbit/plebbit-js.git#bcf4ec7ba024fdd7dc0bb2fab76c27c93597dd50"
+    "@plebbit/plebbit-logger" "https://github.com/plebbit/plebbit-logger.git"
+    assert "2.0.0"
+    ethers "5.6.9"
+    localforage "1.10.0"
+    lodash.isequal "4.5.0"
+    memoizee "0.4.15"
+    quick-lru "5.1.1"
+    uuid "8.3.2"
+    zustand "4.0.0"
+
 "@pmmmwh/react-refresh-webpack-plugin@^0.5.3":
   version "0.5.10"
   resolved "https://registry.yarnpkg.com/@pmmmwh/react-refresh-webpack-plugin/-/react-refresh-webpack-plugin-0.5.10.tgz#2eba163b8e7dbabb4ce3609ab5e32ab63dda3ef8"