Merge pull request #367 from metaplex-foundation/das-playground/devnet-examples

added devnet examples to dropdown

src/components/apiComponents/exampleSelector.jsx

@@ -1,12 +1,47 @@
-import { Select } from '@headlessui/react'
-import { ChevronDownIcon } from '@heroicons/react/20/solid'
-import clsx from 'clsx'
+import { Select } from '@headlessui/react';
+import { ChevronDownIcon } from '@heroicons/react/20/solid';
+import clsx from 'clsx';
 
 const ApiExampleSelector = ({
-  examples,
+  examples = [],
   selectedExample,
   handleSetExample,
 }) => {
+  if (!Array.isArray(examples)) {
+    console.error('ApiExampleSelector: examples prop must be an array');
+    return null;
+  }
+
+  const { mainnetExamples, devnetExamples } = examples.reduce(
+    (acc, example) => {
+      if (example?.chain === 'solanaMainnet') {
+        acc.mainnetExamples.push(example);
+      } else if (example?.chain === 'solanaDevnet') {
+        acc.devnetExamples.push(example);
+      }
+      return acc;
+    },
+    { mainnetExamples: [], devnetExamples: [] }
+  );
+
+  const currentExample = selectedExample >= 0 && selectedExample < examples.length 
+    ? examples[selectedExample] 
+    : null;
+
+  const handleExampleChange = (e) => {
+    const selectedName = e.target.value;
+    if (!selectedName) {
+      handleSetExample(-1);
+      return;
+    }
+
+    const example = examples.find(ex => ex.name === selectedName);
+    if (example) {
+      const index = examples.indexOf(example);
+      handleSetExample(index);
+    }
+  };
+
   return (
     <div className="w-full">
       <label
@@ -18,24 +53,33 @@ const ApiExampleSelector = ({
       <div className="relative flex w-full gap-2">
         <div className="relative flex h-12 w-full">
           <Select
-            onChange={(e) => handleSetExample(e.target.value)}
-            value={selectedExample}
+            onChange={handleExampleChange}
+            value={currentExample?.name || ''}
             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',
               '*:text-black dark:text-white'
             )}
           >
-            <option value={-1}>-</option>
-            <optgroup label="Solana Mainnet">
-              {examples.map((example, index) => {
-                return (
-                  <option key={index} value={index}>
+            <option value="">-</option>
+            {devnetExamples.length > 0 && (
+              <optgroup label="Solana Devnet">
+                {devnetExamples.map((example) => (
+                  <option key={example.name} value={example.name}>
                     {example.name}
                   </option>
-                )
-              })}
-            </optgroup>
+                ))}
+              </optgroup>
+            )}
+            {mainnetExamples.length > 0 && (
+              <optgroup label="Solana Mainnet">
+                {mainnetExamples.map((example) => (
+                  <option key={example.name} value={example.name}>
+                    {example.name}
+                  </option>
+                ))}
+              </optgroup>
+            )}
           </Select>
           <ChevronDownIcon
             className="group pointer-events-none absolute right-2.5 top-4 my-auto size-4 fill-black/60 dark:fill-white"
@@ -51,7 +95,7 @@ const ApiExampleSelector = ({
         </button>
       </div>
     </div>
-  )
-}
+  );
+};
 
-export default ApiExampleSelector
+export default ApiExampleSelector;

src/components/products/das-api/index.js

@@ -1,8 +1,5 @@
 import {
-  changelogSection,
-  documentationSection,
-  recipesSection,
-  referencesSection,
+  documentationSection
 } from '@/shared/sections'
 import { TableCellsIcon } from '@heroicons/react/24/solid'
 import { Hero } from './Hero'
@@ -39,10 +36,10 @@ export const das = {
             { title: 'Get Asset Proof', href: '/das-api/methods/get-asset-proof' },
             { title: 'Get Asset Proofs', href: '/das-api/methods/get-asset-proofs' },
             { title: 'Get Asset Signatures', href: '/das-api/methods/get-asset-signatures' },
-            { title: 'Get Asset By Authority', href: '/das-api/methods/get-asset-by-authority' },
-            { title: 'Get Asset By Creator', href: '/das-api/methods/get-asset-by-creator' },
-            { title: 'Get Asset By Group', href: '/das-api/methods/get-asset-by-group' },
-            { title: 'Get Asset By Owner', href: '/das-api/methods/get-asset-by-owner' },
+            { title: 'Get Assets By Authority', href: '/das-api/methods/get-assets-by-authority' },
+            { title: 'Get Assets By Creator', href: '/das-api/methods/get-assets-by-creator' },
+            { title: 'Get Assets By Group', href: '/das-api/methods/get-assets-by-group' },
+            { title: 'Get Assets By Owner', href: '/das-api/methods/get-assets-by-owner' },
             { title: 'Search Asset', href: '/das-api/methods/search-assets' },
           ],
         },

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

@@ -84,6 +84,46 @@ const getAsset = {
         },
       },
     },
+    {
+      name: 'Metaplex NFT',
+      description: 'Get an asset by its ID',
+      chain: 'solanaDevnet',
+      body: {
+        params: {
+          id: '5fkyv7J5Jf8SaTVnE94A9oVeGBbhcEh9W3nP4cXUCQb8',
+        },
+      },
+    },
+    {
+      name: 'Metaplex pNFT',
+      description: 'Get an asset by its ID',
+      chain: 'solanaDevnet',
+      body: {
+        params: {
+          id: 'D7n1eLnUJSaNfp5qmEwh2E98w3m7Eg9Hfq9n1JLggDVp',
+        },
+      },
+    },
+    {
+      name: 'Metaplex cNFT V1',
+      description: 'Get an asset by its ID',
+      chain: 'solanaDevnet',
+      body: {
+        params: {
+          id: 'E1hi4uEdfe9gai3Y1Vg5eSA8A2oxotVUWv5LtVJXxxpv',
+        },
+      },
+    },
+    {
+      name: 'Metaplex Core Asset',
+      description: 'Get an asset by its ID',
+      chain: 'solanaDevnet',
+      body: {
+        params: {
+          id: 'G9pSgJrghwBMHuxYC4iHMkm3BnDuPvkLMtz9h3u7YzF5',
+        },
+      },
+    },
   ],
   exampleResponse : {
     "jsonrpc": "2.0",

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

@@ -12,7 +12,7 @@ const getAssetProof = {
     ],
     examples: [
       {
-        name: 'Saga Monkes #6233 (cNFT)',
+        name: 'Saga Monkes #6233 (cNFT V1)',
         chain: 'solanaMainnet',
         description: 'Get an asset by its ID',
         body: {
@@ -21,6 +21,16 @@ const getAssetProof = {
           },
         },
       },
+      {
+        name: 'Metaplex Test (cNFT V1)',
+        chain: 'solanaDevnet',
+        description: 'Get an asset by its ID',
+        body: {
+          params: {
+            id: 'E1hi4uEdfe9gai3Y1Vg5eSA8A2oxotVUWv5LtVJXxxpv',
+          },
+        },
+      },
     ],
     exampleResponse: {
       "jsonrpc": "2.0",

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

@@ -1,7 +1,7 @@
 const getSignaturesForAsset = {
   description:
     'Get the proof of a compressed Digital Asset NFT (cNFT) by its ID',
-  method: 'getSignaturesForAsset',
+  method: 'getAssetSignatures',
   params: [
     {
       name: 'id',
@@ -47,6 +47,16 @@ const getSignaturesForAsset = {
         },
       },
     },
+    {
+      name: 'Metaplex Test (cNFT V1)',
+      chain: 'solanaDevnet',
+      description: 'Get an asset by its ID',
+      body: {
+        params: {
+          id: 'E1hi4uEdfe9gai3Y1Vg5eSA8A2oxotVUWv5LtVJXxxpv',
+        },
+      },
+    },
   ],
   exampleResponse: {
     "jsonrpc": "2.0",