add indentation to json

package.json

@@ -21,6 +21,7 @@
     "eslint": "8.36.0",
     "eslint-config-react-app": "7.0.1",
     "ext-name": "5.0.0",
+    "json-stringify-pretty-compact": "^4.0.0",
     "lodash": "4.17.21",
     "mock-require": "3.0.3",
     "postcss": "8.4.21",

src/components/modals/SettingsModal.jsx

@@ -2,6 +2,7 @@ import React, { useState, useEffect, useRef } from "react";
 import { Link, useLocation, useNavigate } from "react-router-dom";
 import Modal from "react-modal";
 import { deleteAccount, deleteCaches, exportAccount, importAccount, setAccount, setActiveAccount, useAccount, useAccounts, useResolvedAuthorAddress } from "@plebbit/plebbit-react-hooks";
+import stringify from "json-stringify-pretty-compact"
 import { StyledModal } from "../styled/modals/SettingsModal.styled";
 import useError from "../../hooks/useError";
 import useSuccess from "../../hooks/useSuccess";
@@ -74,19 +75,32 @@ const SettingsModal = ({ isOpen, closeModal }) => {
     if (account) {
       const fetchAccountData = async () => {
         const data = await exportAccount();
-        setAccountJson(data);
+        try {
+          const parsedData = JSON.parse(data);
+          setAccountJson(stringify(parsedData));
+        } catch (error) {
+          console.error("Failed to pretty-print the JSON:", error);
+          setAccountJson(data);
+        }
       };
-    
       fetchAccountData();
     }
   }, [account]);
   
 
+
   const handleAccountJsonChange = (e) => {
-    setAccountJson(e.target.value);
+    try {
+      const parsedData = JSON.parse(e.target.value);
+      setAccountJson(stringify(parsedData));
+    } catch (error) {
+      console.error("Failed to pretty-print the JSON:", error);
+      setAccountJson(e.target.value);
+    }
   };
   
   
+
   useEffect(() => {
     if (checkedENS && resolvedAddress && state === 'succeeded') {
       setCheckedENS(false);
@@ -502,7 +516,10 @@ const SettingsModal = ({ isOpen, closeModal }) => {
               <textarea id="account-data-text" 
               value={accountJson} 
               ref={importRef} 
-              onChange={handleAccountJsonChange} />
+              onChange={handleAccountJsonChange}
+              autoComplete="off"
+              autoCorrect="off"
+              spellCheck="false" />
               <div className="account-buttons">
                 <button onClick={handleSaveAccount}>
                   Save

yarn.lock

@@ -9670,6 +9670,11 @@ json-stable-stringify-without-jsonify@^1.0.1:
   resolved "https://registry.yarnpkg.com/json-stable-stringify-without-jsonify/-/json-stable-stringify-without-jsonify-1.0.1.tgz#9db7b59496ad3f3cfef30a75142d2d930ad72651"
   integrity sha512-Bdboy+l7tA3OGW6FjyFHWkP5LuByj1Tk33Ljyq0axyzdk9//JSi2u3fP1QSmd1KNwq6VOKYGlAu87CisVir6Pw==
 
+json-stringify-pretty-compact@^4.0.0:
+  version "4.0.0"
+  resolved "https://registry.yarnpkg.com/json-stringify-pretty-compact/-/json-stringify-pretty-compact-4.0.0.tgz#cf4844770bddee3cb89a6170fe4b00eee5dbf1d4"
+  integrity sha512-3CNZ2DnrpByG9Nqj6Xo8vqbjT4F6N+tb4Gb28ESAZjYZ5yqvmc56J+/kuIwkaAMOyblTQhUW7PxMkUb8Q36N3Q==
+
 json-stringify-safe@^5.0.1:
   version "5.0.1"
   resolved "https://registry.yarnpkg.com/json-stringify-safe/-/json-stringify-safe-5.0.1.tgz#1296a2d58fd45f19a0f6ce01d65701e2c735b6eb"