adjusted renderers and added spinner

src/components/apiComponents/apiComponentWrapper.jsx

@@ -2,6 +2,7 @@
 
 import apiMethods from '@/lib/api/aura/methods'
 import { useEffect, useState } from 'react'
+import Spinner from '../icons/spinner'
 import ApiParameterDisplay from './apiParams'
 import LanguageRenderer from './languageRenderer'
 import Responce from './responce'
@@ -9,6 +10,8 @@ import Responce from './responce'
 const ApiComponentWrapper = (args) => {
   const api = apiMethods[args.method]
 
+  const [responce, setResponce] = useState(null)
+  const [isLoading, setIsLoading] = useState(false)
   const [selectedExample, setSelectedExample] = useState(-1)
   const [activeEndpoint, setActiveEndpoint] = useState(
     'https://aura-eclipse-mainnet.metaplex.com'
@@ -50,38 +53,46 @@ const ApiComponentWrapper = (args) => {
     params: {},
   })
 
-  const [responce, setResponce] = useState(null)
-  const [isLoading, setIsLoading] = useState(false)
-
   console.log(body)
 
   const handleSetParam = (path, value) => {
-    console.log(path)
-    console.log(value)
-
     setBody((prev) => {
-      let newBody = { ...prev }
+      const newBody = { ...prev }
+
+      // Recursive function to traverse and update or clean up fields
+      const updateField = (obj, path) => {
+        const key = path[0]
+
+        if (path.length === 1) {
+          // If we are at the target field
+          if (
+            !value ||
+            (Array.isArray(value) && value.every((v) => v === ''))
+          ) {
+            // Delete the field if value is null, undefined, or an empty key-value pair
+            delete obj[key]
+          } else {
+            // Otherwise, set the value
+            obj[key] = value
+          }
+        } else {
+          // Ensure the parent key exists and is an object
+          if (!obj[key] || typeof obj[key] !== 'object') {
+            obj[key] = {}
+          }
 
-      if (path.length === 1) {
-        newBody.params[path[0]] = value
-        if (!value) {
-          delete newBody.params[path[0]]
-        }
-      } else {
-        let current = newBody.params
+          // Recurse into the nested object
+          updateField(obj[key], path.slice(1))
 
-        for (let i = 0; i < path.length; i++) {
-          if (i === path.length - 1) {
-            current[path[i]] = value
-          } else {
-            if (!current[path[i]]) {
-              current[path[i]] = {}
-            }
-            current = current[path[i]]
+          // Remove the parent key if it becomes empty after the update
+          if (Object.keys(obj[key]).length === 0) {
+            delete obj[key]
           }
         }
       }
 
+      updateField(newBody.params, path)
+
       return newBody
     })
   }
@@ -91,22 +102,24 @@ const ApiComponentWrapper = (args) => {
   }, [body])
 
   const handleTryItOut = async () => {
-    const res = await fetch(
-      activeEndpoint,
-      {
-        method: 'POST',
-        headers: {
-          'Content-Type': 'application/json',
-        },
-        body: JSON.stringify(body),
-      }
-    )
+    setResponce(null)
+    setIsLoading(true)
+
+    const res = await fetch(activeEndpoint, {
+      method: 'POST',
+      headers: {
+        'Content-Type': 'application/json',
+      },
+      body: JSON.stringify(body),
+    })
 
     const resJson = await res.json()
 
     console.log(resJson)
 
     setResponce(resJson)
+
+    setIsLoading(false)
   }
 
   return (
@@ -153,10 +166,10 @@ const ApiComponentWrapper = (args) => {
           }}
         />
         <button
-          className="bg-primary rounded-md border px-4 py-2 text-white 2xl:hidden"
+          className="block min-w-[150px] rounded-lg border border-gray-200 px-4 py-3 text-sm focus:border-blue-500 focus:outline-none focus:ring-2 focus:ring-blue-500/50 disabled:pointer-events-none disabled:opacity-50 dark:border-neutral-700 dark:bg-neutral-900 dark:text-neutral-300 dark:placeholder-neutral-500 2xl:hidden"
           onClick={handleTryItOut}
         >
-          Try it out
+          {isLoading ? <Spinner className="h-6 w-6" /> : 'Try it out'}
         </button>
       </div>
 
@@ -168,10 +181,10 @@ const ApiComponentWrapper = (args) => {
           setActiveEndPoint={(endpoint) => setActiveEndpoint(endpoint)}
         />
         <button
-          className="bg-primary hidden rounded-md border px-4 py-2 text-white 2xl:block"
+          className="hidden min-w-[150px] items-center justify-center rounded-lg border border-gray-200 px-4 py-3 text-sm focus:border-blue-500 focus:outline-none focus:ring-2 focus:ring-blue-500/50 disabled:pointer-events-none disabled:opacity-50 dark:border-neutral-700 dark:bg-neutral-900 dark:text-neutral-300 dark:placeholder-neutral-500 2xl:flex"
           onClick={handleTryItOut}
         >
-          Try it out
+          {isLoading ? <Spinner className="h-6 w-6" /> : 'Try it out'}
         </button>
         {responce && <Responce responce={responce} />}
       </div>

src/components/apiComponents/apiParams.jsx

@@ -116,6 +116,34 @@ const ParamRenderer = ({ param, subValue, setParam, path = [], value }) => {
         </select>
       )
       break
+      case 'arrayKeyValuePair':
+      content = (
+        <div div className="flex flex-col gap-2">
+        <input
+          name={`${param.name}-key`}
+          type="text"
+          className="block w-full rounded-md border border-gray-200 px-2 py-1 text-sm focus:border-blue-500 focus:outline-none focus:ring-2 focus:ring-blue-500/50 disabled:pointer-events-none disabled:opacity-50 dark:border-neutral-700 dark:bg-neutral-900/50 dark:text-neutral-300 dark:placeholder-neutral-500"
+          placeholder={"key"}
+          onChange={(e) => {
+            const newValue = [e.target.value, value ? value[1] : ""];
+            setParam(path, newValue);
+          }}
+          value={value ? value[0] : ''}
+        />
+        <input
+          name={`${param.name}-value`}
+          type="text"
+          className="block w-full rounded-md border border-gray-200 px-2 py-1 text-sm focus:border-blue-500 focus:outline-none focus:ring-2 focus:ring-blue-500/50 disabled:pointer-events-none disabled:opacity-50 dark:border-neutral-700 dark:bg-neutral-900/50 dark:text-neutral-300 dark:placeholder-neutral-500"
+          placeholder={"value"}
+          onChange={(e) => {
+            const newValue = [value ? value[0] : "", e.target.value];
+            setParam(path, newValue);
+          }}
+          value={value ? value[1] : ''}
+        />
+        </div>
+      )
+      break
 
     default:
       content = <span className="text-sm">{String(param.value)}</span>

src/components/apiComponents/languageRenderer.jsx

@@ -23,17 +23,6 @@ const LanguageRenderer = ({ api, body, setActiveEndPoint, activeEndPoint }) => {
       ? api.headers
       : { 'Content-Type': 'application/json' }
 
-    // const object = {
-    //   method: 'POST',
-    //   headers: headers,
-    //   body: {
-    //     jsonrpc: rpcVersion ? rpcVersion : '2.0',
-    //     id: id ? id : 1,
-    //     method: bodyMethod,
-    //     params: httpBody,
-    //   },
-    // }
-
     switch (activeLanguage) {
       case 'javascript':
         return (

src/components/icons/spinner.jsx

@@ -0,0 +1,5 @@
+const Spinner = ({className, style}) => {
+  return <span class={`loader ${className}`} style={style}></span>
+}
+
+export default Spinner

src/lib/api/aura/das/searchAssest.js

@@ -59,7 +59,7 @@ const searchAssets = {
     },
     {
       name: 'grouping',
-      type: 'array',
+      type: 'arrayKeyValuePair',
       locked: true,
       length: 2,
       value: [],

src/styles/extra.css

@@ -8,4 +8,22 @@ box-shadow: 11px 11px 22px -3px rgba(255, 255, 255, 0.212);
     -webkit-background-clip: text;
     -webkit-text-fill-color: transparent;
     background-clip: text;
-  }
+  }
+
+  .loader {
+    border: 2px solid #FFF;
+    border-bottom-color: #d162c2;
+    border-radius: 50%;
+    display: inline-block;
+    box-sizing: border-box;
+    animation: rotation 1s linear infinite;
+    }
+
+    @keyframes rotation {
+        0% {
+            transform: rotate(0deg);
+        }
+        100% {
+            transform: rotate(360deg);
+        }
+        }