method testing

src/components/apiComponents/apiComponentWrapper.jsx

@@ -9,24 +9,15 @@ import Responce from './responce'
 const ApiComponentWrapper = (args) => {
   const api = apiMethods[args.method]
 
-  const [selectedExample, setSelectedExample] = useState(0)
+  const [selectedExample, setSelectedExample] = useState(-1)
   const [activeEndpoint, setActiveEndpoint] = useState(
-    'https://eclipse-aura-mainnet.metaplex.com'
+    'https://aura-eclipse-mainnet.metaplex.com'
   )
-  useEffect(() => {
-    //load endpoint from local storage
-
-    const endPoint = localStorage.getItem('endPoint')
-
-    if (endPoint) {
-      setActiveEndpoint(endPoint)
-    }
-  }, [])
 
-  const handleSetActiveEndPoint = (name, endpoint) => {
-    console.log('set active endpoint')
-    console.log({name, endpoint})
-  }
+  // const handleSetActiveEndPoint = (name, endpoint) => {
+  //   console.log('set active endpoint')
+  //   console.log({name, endpoint})
+  // }
 
   const handleSetExample = (index) => {
     console.log(index)
@@ -54,12 +45,9 @@ const ApiComponentWrapper = (args) => {
 
   const [body, setBody] = useState({
     jsonrpc: '2.0',
-    id: '0',
+    id: '1',
     method: api.method,
-    params:
-      api.examples && api.examples[0].body.params
-        ? api.examples[0].body.params
-        : {},
+    params: {},
   })
 
   const [responce, setResponce] = useState(null)
@@ -76,6 +64,9 @@ const ApiComponentWrapper = (args) => {
 
       if (path.length === 1) {
         newBody.params[path[0]] = value
+        if (!value) {
+          delete newBody.params[path[0]]
+        }
       } else {
         let current = newBody.params
 
@@ -101,7 +92,7 @@ const ApiComponentWrapper = (args) => {
 
   const handleTryItOut = async () => {
     const res = await fetch(
-      'https://mainnet.helius-rpc.com/?api-key=555f20ad-afaf-4a78-a889-244f281ab399',
+      activeEndpoint,
       {
         method: 'POST',
         headers: {
@@ -137,7 +128,11 @@ const ApiComponentWrapper = (args) => {
               >
                 <option value={-1}>-</option>
                 {api.examples.map((example, index) => {
-                  return <option value={index}>{example.name}</option>
+                  return (
+                    <option key={index} value={index}>
+                      {example.name}
+                    </option>
+                  )
                 })}
               </select>
               <button
@@ -170,7 +165,7 @@ const ApiComponentWrapper = (args) => {
           api={api}
           body={body}
           activeEndPoint={activeEndpoint}
-          setActiveEndPoint={(name, endpoint) => handleSetActiveEndPoint(name, endpoint)}
+          setActiveEndPoint={(endpoint) => setActiveEndpoint(endpoint)}
         />
         <button
           className="bg-primary hidden rounded-md border px-4 py-2 text-white 2xl:block"

src/components/apiComponents/apiParams.jsx

@@ -3,7 +3,7 @@ import { PlusIcon } from '@heroicons/react/24/solid'
 import { PluginsIcon } from '../icons/dual-tone/PluginsIcon'
 
 // Recursive component for rendering nested parameters
-const ParamRenderer = ({ param, subValue, setParam, path = [] }) => {
+const ParamRenderer = ({ param, subValue, setParam, path = [], value }) => {
   let content
 
   switch (param.type) {
@@ -15,6 +15,7 @@ const ParamRenderer = ({ param, subValue, setParam, path = [] }) => {
           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={param.placeholder}
           onChange={(e) => setParam(path, e.target.value)}
+          value={value || ''}
         />
       )
       break
@@ -27,6 +28,7 @@ const ParamRenderer = ({ param, subValue, setParam, path = [] }) => {
           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={param.value}
           onChange={(e) => setParam(path, Number.parseInt(e.target.value))}
+          value={value || ''}
         />
       )
       break
@@ -54,12 +56,13 @@ const ParamRenderer = ({ param, subValue, setParam, path = [] }) => {
             <div key={index} className="flex gap-2">
               <input
                 className="block w-full rounded-md border border-gray-200 px-2 py-2 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={item}
+                placeholder={param.placeHolder}
                 onChange={(e) => {
                   const newValue = param.value
                   newValue[index] = e.target.value
                   setParam(path, newValue)
                 }}
+                value={item}
               />
               <TrashIcon
                 className=" h-6 w-6 cursor-pointer self-center text-gray-500 dark:text-neutral-400"
@@ -90,7 +93,7 @@ const ParamRenderer = ({ param, subValue, setParam, path = [] }) => {
           onChange={(e) => setParam(path, e.target.value)}
           className="block w-full rounded-md border border-gray-200 px-2 py-2 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"
         >
-          {!param.required && <option value={''}/>}
+          {!param.required && <option value={''} />}
           <option value="true">true</option>
           <option value="false">false</option>
         </select>
@@ -102,9 +105,13 @@ const ParamRenderer = ({ param, subValue, setParam, path = [] }) => {
           onChange={(e) => setParam(path, e.target.value)}
           className="block w-full rounded-md border border-gray-200 px-2 py-2 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"
         >
-          {!param.required && <option value={''}/>}
-          {param.value.map((choice) => {
-            return <option value={choice}>{choice}</option>
+          {!param.required && <option value={''} />}
+          {param.value.map((choice, index) => {
+            return (
+              <option key={index} value={choice}>
+                {choice}
+              </option>
+            )
           })}
         </select>
       )
@@ -140,8 +147,8 @@ const ParamRenderer = ({ param, subValue, setParam, path = [] }) => {
 }
 
 // Main component
-const ApiParameterDisplay = ({ params, setParam }) => {
-  console.log(params)
+const ApiParameterDisplay = ({ params, setParam, body }) => {
+  console.log(body)
 
   return (
     <div className="flex w-full flex-col gap-4 rounded-xl border border-gray-200 bg-white py-4 pb-0 dark:border-neutral-700/50 dark:bg-neutral-800/50">
@@ -151,6 +158,7 @@ const ApiParameterDisplay = ({ params, setParam }) => {
       <div className="flex flex-col">
         {params.map((param) => (
           <ParamRenderer
+            value={body[param.name]}
             path={[param.name]}
             key={param.name}
             param={param}

src/components/apiComponents/endPointSelector.jsx

@@ -1,18 +1,44 @@
-import { useState } from 'react'
+import { act, useState } from 'react'
 
 const endPoints = {
   eclipseAuraMainnet: {
     name: 'Eclipse Mainnet',
     uri: 'https://aura-eclipse-mainnet.metaplex.com',
+    value: 'eclipseAuraMainnet',
   },
   custom: {
     name: 'Custom',
     uri: 'custom',
+    value: 'custom',
   },
 }
 
 const EndPointSelector = ({ setActiveEndpoint }) => {
   const [isCustom, setIsCustom] = useState(false)
+  const [customEndPoint, setCustomEndPoint] = useState('')
+
+  // read endpoint from local storage
+
+  const handleSelectEndpoint = (e) => {
+    console.log(e.target.name)
+    if (e.target.name === 'selectEndPoint') {
+      if (e.target.value === 'custom') {
+        setIsCustom(true)
+        const endpoint = localStorage.getItem('customEndPoint') || ''
+        console.log(endpoint)
+        setActiveEndpoint(endpoint)
+        setCustomEndPoint(endpoint)
+      } else {
+        setIsCustom(false)
+        setActiveEndpoint(e.target.value)
+      }
+    }
+    if (e.target.name === 'customEndPoint') {
+      console.log(e.target.value)
+      setActiveEndpoint(e.target.value)
+      setCustomEndPoint(e.target.value)
+    }
+  }
 
   return (
     <div className="flex flex-col gap-2 px-1">
@@ -24,15 +50,9 @@ const EndPointSelector = ({ setActiveEndpoint }) => {
       </label>
       <select
         id="endPoint"
+        name="selectEndPoint"
         className="block rounded-lg border border-gray-200 px-2 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"
-        onChange={(e) => {
-          if (e.target.value === 'custom') {
-            setIsCustom(true)
-          } else {
-            setIsCustom(false)
-            setActiveEndpoint(e.target.value)
-          }
-        }}
+        onChange={(e) => handleSelectEndpoint(e)}
       >
         {Object.entries(endPoints).map(([key, value]) => (
           <option key={key} value={value.uri}>
@@ -46,7 +66,11 @@ const EndPointSelector = ({ setActiveEndpoint }) => {
           name="customEndPoint"
           placeholder="https://"
           className="block w-full rounded-lg border border-gray-200 px-2 py-2 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"
-          onChange={(e) => setActiveEndpoint("custom", e.target.value)}
+          onChange={(e) => {
+            handleSelectEndpoint(e)
+            localStorage.setItem('customEndPoint', e.target.value)
+          }}
+          value={customEndPoint}
         />
       )}
     </div>

src/components/apiComponents/languageRenderer.jsx

@@ -12,14 +12,13 @@ import RubyRenderer from './languageComponents/rubyRenderer'
 import LanguageSelector from './languageSelector'
 
 const LanguageRenderer = ({ api, body, setActiveEndPoint, activeEndPoint }) => {
-  
   const [activeLanguage, setActiveLanguage] = useState('javascript')
 
   function strToTitleCase(str) {
     return str.charAt(0).toUpperCase() + str.slice(1)
   }
 
-  const renderLanguage = (activeLanguage) => {
+  const renderLanguage = (activeLanguage, activeEndpoint) => {
     const headers = api.headers
       ? api.headers
       : { 'Content-Type': 'application/json' }
@@ -175,7 +174,7 @@ const LanguageRenderer = ({ api, body, setActiveEndPoint, activeEndPoint }) => {
   return (
     <div className="flex w-full flex-col gap-8 overflow-hidden">
       <EndPointSelector
-        setActiveEndpoint={(name, endpoint) => setActiveEndPoint(name, endpoint)}
+        setActiveEndpoint={(endpoint) => setActiveEndPoint(endpoint)}
       />
       <LanguageSelector
         activeLanguage={activeLanguage}

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

@@ -1,6 +1,6 @@
 const getAssetsByAuthority = {
   description: 'Returns the list of assets given an authority address.',
-  method: 'getAssetByAuthority',
+  method: 'getAssetsByAuthority',
   params: [
     {
       name: 'authorityAddress',

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

@@ -5,9 +5,10 @@ const getAssetBatch = {
     {
       type: 'array',
       description: 'Public keys of the Assets to fetch',
-      name: 'id',
+      name: 'ids',
       value: [""],
       required: true,
+      placeHolder: "Asset Public Key"
     },
   ],
 }

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

@@ -6,9 +6,10 @@ const getAssetProofBatch = {
     {
       type: 'array',
       description: 'Public keys of the assets you want to fetch proofs for',
-      name: 'id',
+      name: 'ids',
       value: [],
       required: true,
+      placeHolder: 'Asset Public Key',
     },
   ],
 }