fix: challenge 0 inputref ipfs upload error (#261)

ASaidOguz · web-flow · commit 7a95cbec3118 · 2025-07-07T00:45:03.000+07:00
diff --git a/packages/nextjs/app/ipfsDownload/page.tsx b/packages/nextjs/app/ipfsDownload/page.tsx
@@ -1,96 +1,109 @@
 "use client";
 
-import { lazy, useEffect, useState } from "react";
+import { useEffect, useState } from "react";
 import type { NextPage } from "next";
 import { notification } from "~~/utils/scaffold-stark/notification";
 import { getMetadataFromIPFS } from "~~/utils/simpleNFT/ipfs-fetch";
 import { INITIAL_ATTEMPT, MAX_ATTEMPTS } from "~~/utils/simpleNFT/constants";
 
-const LazyReactJson = lazy(() => import("react-json-view"));
+// Import the JSON editor component and its core CSS
+import { JsonEditor as Editor } from "jsoneditor-react";
+
 
 const IpfsDownload: NextPage = () => {
-  const [yourJSON, setYourJSON] = useState({});
+  const [yourJSON, setYourJSON] = useState<object | null>(null);
   const [ipfsPath, setIpfsPath] = useState("");
   const [loading, setLoading] = useState(false);
   const [mounted, setMounted] = useState(false);
+  // In your state
+  const [editorKey, setEditorKey] = useState(0);
   useEffect(() => {
     setMounted(true);
-  }, []);
-
+    console.log("Updated JSON to editor:", yourJSON);
+  }, [yourJSON]);
 
   const handleIpfsDownload = async () => {
     setLoading(true);
     const loadingNotificationId = notification.loading("Getting data from IPFS...");
     let retryNotificationId = null;
     let attempt = INITIAL_ATTEMPT;
     const maxAttempts = MAX_ATTEMPTS;
+
     while (attempt < maxAttempts) {
       try {
         const metaData = await getMetadataFromIPFS(ipfsPath);
+
         notification.remove(loadingNotificationId);
-        retryNotificationId && notification.remove(retryNotificationId);
+        if (retryNotificationId) notification.remove(retryNotificationId);
         notification.success("Downloaded from IPFS");
-        setYourJSON(metaData);
+
+        // Fix: Ensure it's serializable
+        const cleanData = JSON.parse(JSON.stringify(metaData));
+        console.log("meta-data:", cleanData);
+
+        setYourJSON(cleanData);
+        setEditorKey(prevKey => prevKey + 1);
         break;
       } catch (error) {
         attempt++;
         if (attempt < maxAttempts) {
           retryNotificationId = notification.info(`Retrying download... (${attempt}/${maxAttempts})`);
         } else {
           notification.remove(loadingNotificationId);
-          retryNotificationId && notification.remove(retryNotificationId);
+          if (retryNotificationId) notification.remove(retryNotificationId);
           notification.error(error instanceof Error ? error.message : "Error downloading from IPFS");
           console.error("IPFS Download Error:", error);
         }
       }
     }
+
     setLoading(false);
   };
 
   return (
-    <>
-      <div className="flex items-center flex-col flex-grow pt-10">
-        <h1 className="text-center mb-4">
-          <span className="block text-4xl font-bold">Download from IPFS</span>
-        </h1>
-        <div
-          className={`flex border-2 border-accent/95 bg-base-200 rounded-full text-accent w-96`}
-        >
-          <input
-            className="input input-ghost focus:outline-none focus:bg-transparent focus:text-secondary-content h-[2.2rem] min-h-[2.2rem] px-4 border w-full font-medium placeholder:text-accent/50 text-secondary-content/75"
-            placeholder="IPFS CID"
-            value={ipfsPath}
-            onChange={(e) => setIpfsPath(e.target.value)}
-            autoComplete="off"
-          />
-        </div>
-        <button
-          className={`btn btn-secondary text-white my-6 ${loading ? "loading" : ""}`}
-          disabled={loading}
-          onClick={handleIpfsDownload}
-        >
-          Download from IPFS
-        </button>
+    <div className="flex items-center flex-col flex-grow pt-10">
+      <h1 className="text-center mb-4">
+        <span className="block text-4xl font-bold">Download from IPFS</span>
+      </h1>
 
-        {mounted && (
-          <LazyReactJson
-            style={{ padding: "1rem", borderRadius: "0.75rem" }}
-            src={yourJSON}
-            theme="solarized"
-            enableClipboard={false}
-            onEdit={(edit) => {
-              setYourJSON(edit.updated_src);
-            }}
-            onAdd={(add) => {
-              setYourJSON(add.updated_src);
-            }}
-            onDelete={(del) => {
-              setYourJSON(del.updated_src);
-            }}
-          />
-        )}
+      <div className={`flex border-2 border-accent/95 bg-base-200 rounded-full text-accent w-96`}>
+        <input
+          className="input input-ghost focus:outline-none focus:bg-transparent focus:text-secondary-content h-[2.2rem] min-h-[2.2rem] px-4 border w-full font-medium placeholder:text-accent/50 text-secondary-content/75"
+          placeholder="IPFS CID"
+          value={ipfsPath}
+          onChange={(e) => setIpfsPath(e.target.value)}
+          autoComplete="off"
+        />
       </div>
-    </>
+
+      <button
+        className={`btn btn-secondary text-white my-6 ${loading ? "loading" : ""}`}
+        disabled={loading}
+        onClick={handleIpfsDownload}
+      >
+        Download from IPFS
+      </button>
+
+      {mounted && yourJSON && Object.keys(yourJSON).length > 0 && (
+    <div style={{ width: "100%", maxWidth: "1000px" }}>
+        <Editor
+            key={editorKey} // Add this line
+            value={yourJSON}
+            onChange={(updatedJson: object) => setYourJSON(updatedJson)}
+            mode="tree"
+            modes={["tree", "code", "form", "text", "view"]}
+            htmlElementProps={{
+                style: {
+                    height: "500px",
+                    borderRadius: "0.75rem",
+                    border: "1px solid #ccc",
+                    overflow: "hidden",
+                },
+            }}
+        />
+    </div>
+)}
+    </div>
   );
 };
 
diff --git a/packages/nextjs/app/ipfsUpload/page.tsx b/packages/nextjs/app/ipfsUpload/page.tsx
@@ -1,22 +1,28 @@
 "use client";
 
-import { lazy, useEffect, useState } from "react";
+import { useEffect, useState } from "react";
 import type { NextPage } from "next";
 import { notification } from "~~/utils/scaffold-stark/notification";
 import { addToIPFS } from "~~/utils/simpleNFT/ipfs-fetch";
 import nftsMetadata from "~~/utils/simpleNFT/nftsMetadata";
 import { INITIAL_ATTEMPT, MAX_ATTEMPTS } from "~~/utils/simpleNFT/constants";
 
-const LazyReactJson = lazy(() => import("react-json-view"));
+// Import the JSON editor component and its core CSS
+import { JsonEditor as Editor } from 'jsoneditor-react';
+
+
+
 
 const IpfsUpload: NextPage = () => {
   const [yourJSON, setYourJSON] = useState<object>(nftsMetadata[0]);
   const [loading, setLoading] = useState(false);
   const [uploadedIpfsPath, setUploadedIpfsPath] = useState("");
   const [mounted, setMounted] = useState(false);
+
   useEffect(() => {
     setMounted(true);
-  }, []);
+   
+  }, []); 
 
   const handleIpfsUpload = async () => {
     setLoading(true);
@@ -53,29 +59,33 @@ const IpfsUpload: NextPage = () => {
         </h1>
 
         {mounted && (
-          <LazyReactJson
-            style={{ padding: "1rem", borderRadius: "0.75rem" }}
-            src={yourJSON}
-            theme="solarized"
-            enableClipboard={false}
-            onEdit={(edit) => {
-              setYourJSON(edit.updated_src);
-            }}
-            onAdd={(add) => {
-              setYourJSON(add.updated_src);
-            }}
-            onDelete={(del) => {
-              setYourJSON(del.updated_src);
-            }}
-          />
+          <div style={{ width: '100%', maxWidth: '1000px' }}>
+            <Editor
+              value={yourJSON}
+              onChange={(updatedJson: object) => setYourJSON(updatedJson)}
+              mode="tree"
+              modes={['tree', 'code', 'form', 'text', 'view']}
+              htmlElementProps={{
+                style: {
+                  height: '500px',
+                  borderRadius: "0.75rem",
+                  border: "1px solid #ccc", // Keep a subtle border for the container
+                  overflow: 'hidden'
+                },
+                
+              }}
+            />
+          </div>
         )}
+
         <button
           className={`btn btn-secondary text-white my-4 ${loading ? "loading" : ""}`}
           disabled={loading}
           onClick={handleIpfsUpload}
         >
           Upload to IPFS
         </button>
+
         {uploadedIpfsPath && (
           <div className="mt-4">
             <a
@@ -92,4 +102,4 @@ const IpfsUpload: NextPage = () => {
   );
 };
 
-export default IpfsUpload;
+export default IpfsUpload;
diff --git a/packages/nextjs/package.json b/packages/nextjs/package.json
@@ -36,6 +36,8 @@
     "ethers": "^6.12.0",
     "get-starknet-core": "^4.0.0",
     "ipfs-utils": "^9.0.14",
+    "jsoneditor": "^10.2.0",
+    "jsoneditor-react": "^3.1.2",
     "kubo-rpc-client": "^4.0.1",
     "next": "15.2.4",
     "next-pwa": "^5.6.0",
@@ -48,7 +50,6 @@
     "react-copy-to-clipboard": "^5.1.0",
     "react-dom": "19.0.0",
     "react-hot-toast": "^2.4.1",
-    "react-json-view": "^1.21.3",
     "starknet": "^7.1.0",
     "type-fest": "^4.6.0",
     "usehooks-ts": "^2.13.0",
@@ -61,7 +62,7 @@
     "@types/next-pwa": "^5",
     "@types/node": "^20",
     "@types/nprogress": "^0",
-    "@types/react": "19.0.12",
+    "@types/react": "^19.1.8",
     "@types/react-copy-to-clipboard": "^5.0.4",
     "@types/react-dom": "19.0.4",
     "@vitejs/plugin-react": "^4.3.4",
diff --git a/packages/nextjs/styles/globals.css b/packages/nextjs/styles/globals.css
@@ -151,3 +151,56 @@ body {
     clip-path: polygon(100% 100%, 100% 0, 90% 100%);
   }
 }
+
+
+
+.jsoneditor-search input {
+  background-color: rgba(255, 255, 255, 0.1) !important;
+  border: 1px solid rgba(255, 255, 255, 0.3) !important;
+  color:rgb(2, 1, 1) !important;
+  border-radius: 4px !important;
+  padding: 4px 8px !important;
+}
+
+.jsoneditor-results {
+  background-color:rgba(56,131,250,255) !important;
+}
+
+/* Fix the alignment and remove inconsistent margins */
+.jsoneditor-search {
+  margin: 0 !important;
+  padding: 8px !important;
+  border-bottom: none !important;
+}
+
+.jsoneditor-results {
+  background-color: rgba(56,131,250,255) !important;
+  margin-top: 0 !important;
+  padding-right: 12px !important; /* Add internal padding on the right */
+  border-top: none !important;
+}
+
+/* Make sure the toolbar and results are flush */
+.jsoneditor-outer .jsoneditor-search,
+.jsoneditor-outer .jsoneditor-results {
+  vertical-align: top !important;
+}
+
+/* Remove any default margins that might be causing the gap */
+.jsoneditor-results-header,
+.jsoneditor-frame {
+  margin-top: 0 !important;
+  padding-top: 0 !important;
+}
+
+/* Ensure consistent background and no gaps */
+.jsoneditor-search,
+.jsoneditor-results {
+  background-color: #6ba3d6 !important; /* Use the same blue color */
+  border: none !important;
+}
+
+/* Remove any box model issues */
+* {
+  box-sizing: border-box !important;
+}
diff --git a/packages/nextjs/tsconfig.json b/packages/nextjs/tsconfig.json
@@ -21,8 +21,16 @@
       {
         "name": "next"
       }
-    ]
+    ],
+    // --- ADD THIS LINE ---
+    "typeRoots": ["./node_modules/@types", "./types"] // Include your custom types folder
   },
-  "include": ["next-env.d.ts", "**/*.ts", "**/*.tsx", ".next/types/**/*.ts"],
+  "include": [
+    "next-env.d.ts",
+    "**/*.ts",
+    "**/*.tsx",
+    ".next/types/**/*.ts",
+    "types/**/*.d.ts" // --- ADD THIS LINE --- to explicitly include d.ts files in your 'types' folder
+  ],
   "exclude": ["node_modules"]
-}
+}
diff --git a/packages/nextjs/types/jsoneditor-react.d.ts b/packages/nextjs/types/jsoneditor-react.d.ts
@@ -0,0 +1,29 @@
+// src/types/jsoneditor-react.d.ts
+
+declare module 'jsoneditor-react' {
+  import * as React from 'react';
+  import { JSONEditorMode, JSONEditorOptions } from 'jsoneditor'; // Import types from the core jsoneditor library
+
+  interface JsonEditorProps {
+    value?: object | null;
+    mode?: JSONEditorMode;
+    modes?: JSONEditorMode[];
+    onChange?: (json: object) => void;
+    onModeChange?: (mode: JSONEditorMode) => void;
+    onError?: (error: Error) => void;
+    // You can add more props that jsoneditor-react supports here as needed
+    // For example, if it passes through all JSONEditorOptions:
+    htmlElementProps?: React.HTMLAttributes<HTMLDivElement>;
+    className?: string; // If it supports className directly
+    // Any other props that the library's documentation indicates
+    tag?: string; // if it allows changing the root element tag
+    // If it passes jsoneditor options directly, you can extend JSONEditorOptions
+    // E.g., options?: JSONEditorOptions;
+  }
+
+  // This declares a React component that takes JsonEditorProps
+  export class JsonEditor extends React.Component<JsonEditorProps, any> {}
+
+  // If it's a default export (which it often is for `jsoneditor-react`):
+  export default JsonEditor;
+}
diff --git a/yarn.lock b/yarn.lock
