state changes

src/components/apiComponents/apiComponentWrapper.jsx

@@ -1,31 +1,79 @@
 'use client'
 
 import apiMethods from '@/lib/api/aura/methods'
-import { useState } from 'react'
+import renderRequestBody from '@/lib/api/renderRequestBody'
+import { useEffect, useState } from 'react'
 import ApiParameterDisplay from './apiParams'
 import LanguageRenderer from './languageRenderer'
 
 const ApiComponentWrapper = (args) => {
   const api = apiMethods[args.method]
 
-  const [playGroundParams, setPlayGroundParams] = useState(api)
+  const [body, setBody] = useState({
+    jsonrpc: '2.0',
+    id: '0',
+    method: api.method,
+    params: {},
+  })
+
+  console.log(body)
 
   const handleSetParam = (param) => {
-    const newParams = playGroundApi.params.map((p) => {
-      if (p.name === param.name) {
-        return param
+    console.log(param)
+
+    // Extract the key and value from the param object
+    const [key, value] = Object.entries(param)[0]
+
+    setBody((prev) => {
+      return {
+        ...prev,
+        params: {
+          ...prev.params,
+          [key]: value, // Use the extracted key and value
+        },
       }
-      return p
     })
-
-    setPlayGroundApi({ ...playGroundApi, params: newParams })
   }
 
-  console.log(api)
+  useEffect(() => {
+    console.log(body)
+  }, [body])
+
+  // const handleTryItOut = async () => {
+  //   const res = await fetch('https://aura-mainnet.metaplex.com', {
+  //     method: 'POST',
+  //     headers: {
+  //       'Content-Type': 'application/json',
+  //     },
+  //     body: {
+  //       jsonrpc: '2.0',
+  //       id: '0',
+  //       method: api.method,
+  //       params: playGroundParams,
+  //     },
+  //   })
+
+  //   const resJson = await res.json()
+
+  //   setResponce(resJson)
+  // }
+
   return (
     <div className="max-width[800px] flex gap-8">
-      <ApiParameterDisplay params={api.params} setParam={(param) => {}} />
-      <LanguageRenderer api={api} playgroundParams={playGroundParams} />
+      <div className="max-w[400px] relative w-full">
+        <ApiParameterDisplay
+          params={api.params}
+          setParam={(param) => {
+            handleSetParam(param)
+          }}
+        />
+      </div>
+      <div className="flex w-full max-w-[500px] flex-col items-end">
+        <LanguageRenderer api={api} playgroundParams={body} />
+        <button className="bg-primary rounded-md border px-4 py-2 text-white">
+          Try it out
+        </button>
+      </div>
     </div>
   )
 }

src/components/apiComponents/apiParams.jsx

@@ -1,14 +1,16 @@
 // Recursive component for rendering nested parameters
-const ParamRenderer = ({ param, subValue }) => {
+const ParamRenderer = ({ param, subValue, setParam, path = [] }) => {
   let content
 
   switch (param.type) {
     case 'string':
       content = (
         <input
+          name={param.name}
           type="text"
           className="w-full rounded px-2"
           placeholder={param.value}
+          onChange={(e) => setParam({ [param.name]: e.target.value })}
         />
       )
       break
@@ -16,6 +18,7 @@ const ParamRenderer = ({ param, subValue }) => {
     case 'number':
       content = (
         <input
+          name={param.name}
           type="number"
           className="w-full rounded px-2"
           placeholder={param.value}
@@ -28,8 +31,10 @@ const ParamRenderer = ({ param, subValue }) => {
         <div className="flex flex-col gap-4">
           {Object.entries(param.value).map(([key, value]) => (
             <ParamRenderer
+              path={[...path, key]}
               key={key}
               param={{ name: key, ...value, subValue: true }}
+              setParam={(param) => setParam(param)}
             />
           ))}
         </div>
@@ -48,7 +53,7 @@ const ParamRenderer = ({ param, subValue }) => {
 
     case 'boolean':
       content = (
-        <select className="w-full rounded px-2">
+        <select name={param.name} className="w-full rounded px-2">
           <option value="true">true</option>
           <option value="false">false</option>
         </select>
@@ -71,7 +76,7 @@ const ParamRenderer = ({ param, subValue }) => {
 }
 
 // Main component
-const ApiParameterDisplay = ({ params }) => {
+const ApiParameterDisplay = ({ params, setParam }) => {
   console.log(params)
 
   return (
@@ -79,9 +84,14 @@ const ApiParameterDisplay = ({ params }) => {
       className={`flex w-full max-w-[400px] flex-col gap-4 rounded-xl border border-white p-4`}
     >
       <div>Body</div>
-      <div className="flex flex-col">
+      <div className="flex w-full flex-col">
         {params.map((param) => (
-          <ParamRenderer key={param.name} param={param} />
+          <ParamRenderer
+            path={[param.name]}
+            key={param.name}
+            param={param}
+            setParam={(param) => setParam(param)}
+          />
         ))}
       </div>
     </div>

src/components/apiComponents/endPointSelector.jsx

@@ -1,22 +1,10 @@
 import { useState } from 'react'
 
 const endPoints = {
-  solanaAuraMainnet: {
-    name: 'Aura Mainnet',
-    uri: 'https://aura-mainnet.metaplex.com',
-  },
-  solanaAuraDevnet: {
-    name: 'Aura Devnet',
-    uri: 'https://aura-devnet.metaplex.com',
-  },
   eclipseAuraMainnet: {
     name: 'Eclipse Mainnet',
     uri: 'https://aura-eclipse-mainnet.metaplex.com',
   },
-  eclipseAuraDevnet: {
-    name: 'Eclipse Devnet',
-    uri: 'https://aura-eclipse-devnet.metaplex.com',
-  },
   custom: {
     name: 'Custom',
     uri: 'custom',

src/components/apiComponents/languageComponents/cSharpRenderer.jsx

@@ -54,7 +54,7 @@ const CSharpRequestRenderer = ({ method, url, headers, body }) => {
     `
   
     return (
-      <Fence className="w-full" language="c">
+      <Fence maxHeight={400} language="c">
         {code}
       </Fence>
     )

src/components/apiComponents/languageComponents/javascriptRequestRenderer.jsx

@@ -8,21 +8,27 @@ const JavascriptRequestRenderer = ({ method, url, headers, body }) => {
   const bodyString = body ? renderRequestBody(body) : ''
 
   const object = {
-    method: method,
-    headers: headers,
-    body: bodyString,
+    method: 'POST',
+    headers: headers
+      ? `{${headerString}}`
+      : { 'Content-Type': 'application/json' },
+    body: {
+      jsonrpc: '2.0',
+      id: 'test',
+      method: method,
+      id: 'test',
+      params: bodyString,
+    },
   }
 
   const code = `const res = await fetch('${url}', ${JSON.stringify(
     object,
     null,
     2
-  )}
+  )})
   
-  const json = await res.json()
-
-  console.log(json)
-  )`
+const data = await response.json();
+`
 
   return (
     <Fence className="w-full" language="javascript">

src/components/apiComponents/languageRenderer.jsx

@@ -15,6 +15,8 @@ const LanguageRenderer = ({ api, playgroundParams }) => {
   )
   const [activeLanguage, setActiveLanguage] = useState('javascript')
 
+  const [responce, setResponce] = useState('')
+
   const renderLanguage = (activeLanguage) => {
     switch (activeLanguage) {
       case 'javascript':

src/components/apiComponents/responce.jsx

@@ -0,0 +1,11 @@
+import { Fence } from '../Fence'
+
+const Responce = ({ responce }) => {
+  return (
+    <Fence className="w-full" language="json">
+      {code}
+    </Fence>
+  )
+}
+
+export default Responce

src/lib/api/aura/getAsset.js

@@ -1,33 +1,12 @@
-const testApiMethod = {
-    method: 'getAsset',
-    params: [
-      {
-        type: 'string',
-        name: 'name',
-        value: 'John Doe',
-        availableValues: ['John Doe', 'Jane Doe'],
-        optional: true,
-      },
-      { type: 'number', name: 'age', value: 30 },
-      { type: 'boolean', name: 'isStudent', value: false },
-      {
-        type: 'array',
-        name: 'hobbies',
-        value: ['reading', 'coding', 'hiking'],
-      },
-      {
-        type: 'object',
-        name: 'address',
-        value: {
-          city: { type: 'string', value: 'Metropolis' },
-          street: { type: 'string', value: 'Main Street' },
-          zip: { type: 'number', value: 54321 },
-        },
-      },
-      { type: 'null', name: 'middleName', value: null },
-      { type: 'string', name: 'dateOfBirth', value: '1992-05-14' },
-      { type: 'file', name: 'profilePicture', value: 'base64_encoded_string' },
-    ],
-  }
-  
-  export default testApiMethod
+const getAsset = {
+  method: 'getAsset',
+  params: [
+    {
+      type: 'string',
+      name: 'id',
+      value: '11111111111111111111111111111111',
+    },
+  ],
+}
+
+export default getAsset

src/lib/api/aura/methods.js

@@ -1,7 +1,9 @@
+import getAsset from "./getAsset"
 import testApiMethod from "./test"
 
 
 const apiMethods = {
   testApiMethod: testApiMethod,
+  getAsset: getAsset
 }
 export default apiMethods

src/pages/aura/api/v1/getasset.md

@@ -0,0 +1,7 @@
+---
+title: GetAsset
+metaTitle: GetAsset Method | Aura Api
+description: Learn about the GetAsset Aura API Method.
+---
+
+{% apiRenderer method="getAsset" %}