Merge pull request #363 from metaplex-foundation/playground-api

Playground api

src/components/apiComponents/apiComponentWrapper.jsx

@@ -6,7 +6,6 @@ import { Fence } from '../Fence'
 import Spinner from '../icons/spinner'
 import { Totem, TotemAccordion } from '../Totem'
 import ApiParameterDisplay from './apiParams'
-import { endpoints } from './endPointSelector'
 import ApiExampleSelector from './exampleSelector'
 import LanguageRenderer from './languageRenderer'
 import Responce from './responce'
@@ -18,7 +17,15 @@ const ApiComponentWrapper = (args) => {
   const [responce, setResponce] = useState(null)
   const [isLoading, setIsLoading] = useState(false)
   const [selectedExample, setSelectedExample] = useState(-1)
-  const [activeEndpoint, setActiveEndpoint] = useState(endpoints.solanaMainnet)
+  const [activeEndpoint, setActiveEndpoint] = useState("https://api.devnet.solana.com")
+
+  useEffect(() => {
+    // Load saved endpoint from localStorage on component mount
+    const savedEndpoint = localStorage.getItem('customEndPoint')
+    if (savedEndpoint) {
+      setActiveEndpoint(savedEndpoint)
+    }
+  }, [])
 
   const handleSetExample = (index) => {
     if (index == -1) {
@@ -38,8 +45,17 @@ const ApiComponentWrapper = (args) => {
     })
 
     setSelectedExample(index)
-    if (activeEndpoint.name !== 'Custom') {
-      setActiveEndpoint(endpoints[api.examples[index].chain])
+    
+    // Update endpoint based on example chain if available
+    if (api.examples[index].chain) {
+      const chainEndpoint = api.examples[index].chain === 'devnet' 
+        ? 'https://api.devnet.solana.com'
+        : api.examples[index].chain === 'mainnet'
+          ? 'https://api.mainnet-beta.solana.com'
+          : activeEndpoint
+      
+      setActiveEndpoint(chainEndpoint)
+      localStorage.setItem('customEndPoint', chainEndpoint)
     }
   }
 
@@ -118,19 +134,35 @@ const ApiComponentWrapper = (args) => {
     setResponce(null)
     setIsLoading(true)
 
-    const res = await fetch(activeEndpoint.uri, {
-      method: 'POST',
-      headers: {
-        'Content-Type': 'application/json',
-      },
-      body: JSON.stringify(body),
-    })
+    try {
+      // Validate URL
+      if (!activeEndpoint || !activeEndpoint.startsWith('http')) {
+        throw new Error('Invalid endpoint URL. Please enter a valid URL starting with http:// or https://')
+      }
 
-    const resJson = await res.json()
+      const res = await fetch(activeEndpoint, {
+        method: 'POST',
+        headers: {
+          'Content-Type': 'application/json',
+        },
+        body: JSON.stringify(body),
+      })
 
-    setResponce(resJson)
+      if (!res.ok) {
+        throw new Error(`HTTP error! status: ${res.status}`)
+      }
 
-    setIsLoading(false)
+      const resJson = await res.json()
+      setResponce(resJson)
+    } catch (error) {
+      setResponce({
+        error: {
+          message: error.message || 'Failed to fetch. Please check your endpoint URL and try again.'
+        }
+      })
+    } finally {
+      setIsLoading(false)
+    }
   }
 
   return (

src/components/apiComponents/endPointSelector.jsx

@@ -1,62 +1,21 @@
 import { Select } from '@headlessui/react'
 import { ChevronDownIcon } from '@heroicons/react/20/solid'
 import clsx from 'clsx'
-import { useState } from 'react'
-
-export const endpoints = {
-  solanaMainnet: {
-    name: 'Solana Mainnet',
-    uri: 'https://api.mainnet-beta.solana.com',
-    value: 'solanaMainnet',
-  },
-  solanaDevnet: {
-    name: 'Solana Devnet',
-    uri: 'https://api.devnet.solana.com',
-    value: 'solanaDevnet',
-  },
-  eclipseAuraMainnet: {
-    name: 'Eclipse Mainnet',
-    uri: 'https://mainnetbeta-rpc.eclipse.xyz',
-    value: 'eclipseMainnet',
-    value: 'eclipseMainnet',
-  },
-  custom: {
-    name: 'Custom',
-    uri: '',
-    value: 'custom',
-  },
-}
+import { useEffect, useState } from 'react'
 
 const EndPointSelector = ({ setActiveEndpoint, activeEndpoint }) => {
-  const [isCustom, setIsCustom] = useState(false)
-  const [customEndPoint, setCustomEndPoint] = useState('')
-
-  // read endpoint from local storage
+  useEffect(() => {
+    // Load saved endpoint from localStorage on component mount
+    const savedEndpoint = localStorage.getItem('customEndPoint')
+    if (savedEndpoint) {
+      setActiveEndpoint(savedEndpoint)
+    }
+  }, [])
 
   const handleSelectEndpoint = (e) => {
-
-    if (e.target.name === 'selectEndPoint') {
-      if (e.target.value === 'custom') {
-        setIsCustom(true)
-        const endpoint = localStorage.getItem('customEndPoint') || ''
-
-        setActiveEndpoint({
-          name: 'Custom',
-          uri: endpoint,
-        })
-        setCustomEndPoint(endpoint)
-      } else {
-        setIsCustom(false)
-        setActiveEndpoint(endpoints[e.target.value])
-      }
-    }
-    if (e.target.name === 'customEndPoint') {
-      setActiveEndpoint({
-        name: 'Custom',
-        uri: e.target.value,
-      })
-      setCustomEndPoint(e.target.value)
-    }
+    const newEndpoint = e.target.value
+    setActiveEndpoint(newEndpoint)
+    localStorage.setItem('customEndPoint', newEndpoint)
   }
 
   return (
@@ -67,42 +26,14 @@ const EndPointSelector = ({ setActiveEndpoint, activeEndpoint }) => {
       >
         Endpoint
       </label>
-      <div className="relative flex h-12 w-full">
-        <Select
-          id="endPoint"
-          name="selectEndPoint"
-          className={clsx(
-            'dark:white block w-full appearance-none rounded-lg border border-black/10 bg-white/5 px-3 py-1.5 text-sm/6 text-black dark:border-white/15 dark:bg-transparent',
-            'focus:outline-none data-[focus]:outline-2 data-[focus]:-outline-offset-2 data-[focus]:outline-white/25',
-            // Make the text of each option black on Windows
-            '*:text-black dark:text-white'
-          )}
-          onChange={(e) => handleSelectEndpoint(e)}
-          value={isCustom ? 'custom' : activeEndpoint.value}
-        >
-          {Object.entries(endpoints).map(([key, value]) => (
-            <option key={key} value={key}>
-              {value.name}
-            </option>
-          ))}
-        </Select>
-        <ChevronDownIcon
-          className="group pointer-events-none absolute right-2.5 top-4 my-auto size-4 fill-black/60 dark:fill-white"
-          aria-hidden="true"
-        />
-      </div>
 
       <input
         type="text"
         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) => {
-          handleSelectEndpoint(e)
-          localStorage.setItem('customEndPoint', e.target.value)
-        }}
-        disabled={!isCustom}
-        value={isCustom ? customEndPoint : activeEndpoint.uri}
+        onChange={handleSelectEndpoint}
+        value={activeEndpoint}
       />
     </div>
   )

src/components/apiComponents/languageRenderer.jsx

@@ -33,7 +33,7 @@ const LanguageRenderer = ({ api, body, setActiveEndpoint, activeEndpoint }) => {
             </div>
             <JavascriptRequestRenderer
               method={api.method}
-              url={activeEndpoint.uri}
+              url={activeEndpoint}
               headers={headers}
               bodyMethod={body.method}
               bodyParams={body.params}
@@ -49,7 +49,7 @@ const LanguageRenderer = ({ api, body, setActiveEndpoint, activeEndpoint }) => {
             </div>
             <PythonRequestRenderer
               method={api.method}
-              url={activeEndpoint.uri}
+              url={activeEndpoint}
               headers={headers}
               bodyMethod={body.method}
               bodyParams={body.params}
@@ -65,7 +65,7 @@ const LanguageRenderer = ({ api, body, setActiveEndpoint, activeEndpoint }) => {
             </div>
             <CurlRequestRenderer
               method={api.method}
-              url={activeEndpoint.uri}
+              url={activeEndpoint}
               headers={headers}
               bodyMethod={body.method}
               bodyParams={body.params}
@@ -81,7 +81,7 @@ const LanguageRenderer = ({ api, body, setActiveEndpoint, activeEndpoint }) => {
             </div>
             <GoRequestRenderer
               method={api.method}
-              url={activeEndpoint.uri}
+              url={activeEndpoint}
               headers={headers}
               bodyMethod={body.method}
               bodyParams={body.params}
@@ -97,7 +97,7 @@ const LanguageRenderer = ({ api, body, setActiveEndpoint, activeEndpoint }) => {
             </div>
             <CSharpRequestRenderer
               method={api.method}
-              url={activeEndpoint.uri}
+              url={activeEndpoint}
               // headers={headers}
               bodyMethod={body.method}
               bodyParams={body.params}
@@ -113,7 +113,7 @@ const LanguageRenderer = ({ api, body, setActiveEndpoint, activeEndpoint }) => {
             </div>
             <JavaRenderer
               method={api.method}
-              url={activeEndpoint.uri}
+              url={activeEndpoint}
               headers={headers}
               bodyMethod={body.method}
               bodyParams={body.params}
@@ -129,7 +129,7 @@ const LanguageRenderer = ({ api, body, setActiveEndpoint, activeEndpoint }) => {
             </div>
             <PhpRenderer
               method={api.method}
-              url={activeEndpoint.uri}
+              url={activeEndpoint}
               headers={headers}
               bodyMethod={body.method}
               bodyParams={body.params}
@@ -159,7 +159,7 @@ const LanguageRenderer = ({ api, body, setActiveEndpoint, activeEndpoint }) => {
             </div>
             <RubyRenderer
               method={api.method}
-              url={activeEndpoint.uri}
+              url={activeEndpoint}
               headers={headers}
               bodyMethod={body.method}
               bodyParams={body.params}
@@ -174,7 +174,7 @@ const LanguageRenderer = ({ api, body, setActiveEndpoint, activeEndpoint }) => {
             </div>
             <RustRequestRenderer
               method={api.method}
-              url={activeEndpoint.uri}
+              url={activeEndpoint}
               headers={headers}
               bodyMethod={body.method}
               bodyParams={body.params}
@@ -189,7 +189,7 @@ const LanguageRenderer = ({ api, body, setActiveEndpoint, activeEndpoint }) => {
             </div>
             <SwiftRequestRenderer
               method={api.method}
-              url={activeEndpoint.uri}
+              url={activeEndpoint}
               headers={headers}
               bodyMethod={body.method}
               bodyParams={body.params}