updated packages, fixed select styling, added more example responses

package.json

@@ -11,35 +11,35 @@
   },
   "browserslist": "defaults, not ie <= 11",
   "dependencies": {
-    "@docsearch/react": "^3.2.1",
-    "@headlessui/react": "^1.7.13",
-    "@heroicons/react": "^2.0.18",
+    "@docsearch/react": "^3.8.0",
+    "@headlessui/react": "2.2.0",
+    "@heroicons/react": "^2.2.0",
     "@hotjar/browser": "^1.0.9",
     "@markdoc/markdoc": "0.3.0",
     "@markdoc/next.js": "0.2.3",
-    "@sindresorhus/slugify": "^2.1.0",
-    "@tailwindcss/typography": "^0.5.7",
-    "autoprefixer": "^10.4.12",
+    "@sindresorhus/slugify": "^2.2.1",
+    "@tailwindcss/typography": "^0.5.15",
+    "autoprefixer": "^10.4.20",
     "clsx": "^1.2.1",
-    "focus-visible": "^5.2.0",
+    "focus-visible": "^5.2.1",
     "html-to-image": "^1.11.11",
     "lightense-images": "^1.0.17",
-    "next": "13.3.0",
+    "next": "13.4.7",
     "postcss-focus-visible": "^6.0.4",
     "postcss-import": "^14.1.0",
     "prism-react-renderer": "^1.3.5",
     "prismjs": "^1.29.0",
     "react": "18.2.0",
     "react-dom": "18.2.0",
-    "reactflow": "^11.7.2",
-    "tailwindcss": "^3.3.0"
+    "reactflow": "^11.11.4",
+    "tailwindcss": "^3.4.16"
   },
   "devDependencies": {
     "eslint": "8.26.0",
     "eslint-config-next": "13.0.2",
-    "prettier": "^2.8.7",
-    "prettier-plugin-tailwindcss": "^0.2.6",
-    "sharp": "^0.32.0"
+    "prettier": "^2.8.8",
+    "prettier-plugin-tailwindcss": "^0.2.8",
+    "sharp": "^0.32.6"
   },
   "packageManager": "pnpm@9.1.4+sha512.9df9cf27c91715646c7d675d1c9c8e41f6fce88246f1318c1aa6a1ed1aeb3c4f032fcdf4ba63cc69c4fe6d634279176b5358727d8f2cc1e65b65f43ce2f8bfb0"
 }

src/components/apiComponents/apiParams.jsx

@@ -1,5 +1,8 @@
+import { Select } from '@headlessui/react'
+import { ChevronDownIcon } from '@heroicons/react/20/solid'
 import { TrashIcon } from '@heroicons/react/24/outline'
 import { PlusIcon } from '@heroicons/react/24/solid'
+import clsx from 'clsx'
 import { PluginsIcon } from '../icons/dual-tone/PluginsIcon'
 
 // Recursive component for rendering nested parameters
@@ -89,58 +92,80 @@ const ParamRenderer = ({ param, subValue, setParam, path = [], value }) => {
 
     case 'boolean':
       content = (
-        <select
+        <div className="relative flex h-10 w-full">
+        <Select
           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"
+          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'
+          )}
         >
           {!param.required && <option value={''} />}
           <option value="true">true</option>
           <option value="false">false</option>
-        </select>
+        </Select>
+        <ChevronDownIcon
+            className="group pointer-events-none absolute right-2.5 top-3 my-auto size-4 fill-black/60 dark:fill-white"
+            aria-hidden="true"
+          />
+        </div>
       )
       break
     case 'option':
       content = (
-        <select
-          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, index) => {
-            return (
-              <option key={index} value={choice}>
-                {choice}
-              </option>
-            )
-          })}
-        </select>
+        <div className="relative flex h-10 w-full">
+          <Select
+            onChange={(e) => setParam(path, e.target.value)}
+            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'
+            )}
+          >
+            {!param.required && <option value={''} />}
+            {param.value.map((choice, index) => {
+              return (
+                <option key={index} value={choice}>
+                  {choice}
+                </option>
+              )
+            })}
+          </Select>
+          <ChevronDownIcon
+            className="group pointer-events-none absolute right-2.5 top-3 my-auto size-4 fill-black/60 dark:fill-white"
+            aria-hidden="true"
+          />
+        </div>
       )
       break
-      case 'arrayKeyValuePair':
+    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] : ''}
-        />
+          <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

src/components/apiComponents/endPointSelector.jsx

@@ -1,3 +1,6 @@
+import { Select } from '@headlessui/react'
+import { ChevronDownIcon } from '@heroicons/react/20/solid'
+import clsx from 'clsx'
 import { act, useState } from 'react'
 
 const endPoints = {
@@ -48,18 +51,29 @@ const EndPointSelector = ({ setActiveEndpoint }) => {
       >
         End Point
       </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) => handleSelectEndpoint(e)}
-      >
-        {Object.entries(endPoints).map(([key, value]) => (
-          <option key={key} value={value.uri}>
-            {value.name}
-          </option>
-        ))}
-      </select>
+      <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)}
+        >
+          {Object.entries(endPoints).map(([key, value]) => (
+            <option key={key} value={value.uri}>
+              {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>
       {isCustom && (
         <input
           type="text"

src/components/apiComponents/exampleSelector.jsx

@@ -1,37 +1,59 @@
-const ApiExampleSelector = ({ examples, selectedExample, handleSetExample }) => {
+import { Select } from '@headlessui/react'
+import { ChevronDownIcon } from '@heroicons/react/20/solid'
+import clsx from 'clsx'
 
-return <div className="w-full">
-<label
-  className="mb-3 text-sm font-medium text-gray-800 dark:text-neutral-400"
-  htmlFor="endPoint"
->
-  Loaded Example
-</label>
-<div className="flex w-full gap-2">
-  <select
-    onChange={(e) => handleSetExample(e.target.value)}
-    value={selectedExample}
-    className="block w-full 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"
-  >
-    <option value={-1}>-</option>
-    <optgroup label="Solana Mainnet">
-    {examples.map((example, index) => {
-      return (
-        <option key={index} value={index}>
-          {example.name}
-        </option>
-      )
-    })}
-    </optgroup>
-  </select>
-  <button
-    onClick={() => handleSetExample(-1)}
-    className="block 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"
-  >
-    Clear
-  </button>
-</div>
-</div>
+const ApiExampleSelector = ({
+  examples,
+  selectedExample,
+  handleSetExample,
+}) => {
+  return (
+    <div className="w-full">
+      <label
+        className="mb-3 text-sm font-medium text-gray-800 dark:text-neutral-400"
+        htmlFor="endPoint"
+      >
+        Loaded Example
+      </label>
+      <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}
+            // className="block w-full 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"
+            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'
+            )}
+          >
+            <option value={-1}>-</option>
+            <optgroup label="Solana Mainnet">
+              {examples.map((example, index) => {
+                return (
+                  <option key={index} value={index}>
+                    {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"
+            aria-hidden="true"
+          />
+        </div>
+
+        <button
+          onClick={() => handleSetExample(-1)}
+          className="block rounded-lg border border-gray-200 px-4 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"
+        >
+          Clear
+        </button>
+      </div>
+    </div>
+  )
 }
 
-export default ApiExampleSelector
+export default ApiExampleSelector

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

@@ -11,6 +11,347 @@ const getAssetBatch = {
       placeHolder: "Asset Public Key"
     },
   ],
+  exampleResponse: {
+    "jsonrpc": "2.0",
+    "result": [
+      {
+        "interface": "MplCoreAsset",
+        "id": "5avjMVza8SuMhgTfzEGNWJskDELMCQk9juAAc8zeQoNa",
+        "content": {
+          "$schema": "https://schema.metaplex.com/nft1.0.json",
+          "json_uri": "https://arweave.net/2xl-wNjCDAnCEtPbtUZRlXypSP6boMVTt5On8F7NPoc",
+          "files": [
+            {
+              "uri": "https://arweave.net/2LmjJyHmQY0OFoWg3cx2cTlV-fSIMGVMiPUFgLSv4Lk",
+              "mime": "image/png"
+            }
+          ],
+          "metadata": {
+            "attributes": [
+              {
+                "trait_type": "rarity",
+                "value": "Legendary"
+              },
+              {
+                "trait_type": "used",
+                "value": "false"
+              },
+              {
+                "trait_type": "signed",
+                "value": "false"
+              }
+            ],
+            "description": "A young girl narrowly escaped an evil space pirate and is rescued by a team of mercenaries. Together, their discovery will unlock the secrets of the galaxy - and lead to an adventure that threatens life as they know it!",
+            "name": "Galactic Geckos EP 1 #985",
+            "symbol": ""
+          },
+          "links": {
+            "image": "https://arweave.net/2LmjJyHmQY0OFoWg3cx2cTlV-fSIMGVMiPUFgLSv4Lk",
+            "external_url": "https://dreader.app"
+          }
+        },
+        "authorities": [
+          {
+            "address": "FXj8W4m33SgLB5ZAg35g8wsqFTvywc6fmJTXzoQQhrVf",
+            "scopes": [
+              "full"
+            ]
+          }
+        ],
+        "compression": {
+          "eligible": false,
+          "compressed": false,
+          "data_hash": "",
+          "creator_hash": "",
+          "asset_hash": "",
+          "tree": "",
+          "seq": 0,
+          "leaf_id": 0
+        },
+        "grouping": [
+          {
+            "group_key": "collection",
+            "group_value": "8J1w2Khc79x5itJkpfc1HDcSLseY84R9dbKmJHQH5brD",
+            "verified": true
+          }
+        ],
+        "royalty": {
+          "royalty_model": "creators",
+          "target": null,
+          "percent": 0,
+          "basis_points": 0,
+          "primary_sale_happened": false,
+          "locked": false
+        },
+        "creators": [],
+        "ownership": {
+          "frozen": false,
+          "delegated": false,
+          "delegate": null,
+          "ownership_model": "single",
+          "owner": "7aLBCrbn4jDNSxLLJYRRnKbkqA5cuaeaAzn74xS7eKPD"
+        },
+        "supply": null,
+        "mutable": true,
+        "burnt": false,
+        "lamports": 3525360,
+        "executable": false,
+        "rent_epoch": 18446744073709552000,
+        "plugins": {},
+        "mpl_core_info": {
+          "plugins_json_version": 1
+        },
+        "external_plugins": []
+      },
+      {
+        "interface": "V1_NFT",
+        "id": "H6GDZujkpEcxbpDgEbSbNFxNtSi3RBJPJC5GZCvzagaP",
+        "content": {
+          "$schema": "https://schema.metaplex.com/nft1.0.json",
+          "json_uri": "https://shdw-drive.genesysgo.net/5HXhJs7ScMnUEZPxmr1f4EMzwTVEhfV1TEXLW7qacMis/6233.json",
+          "files": [
+            {
+              "uri": "https://shdw-drive.genesysgo.net/5HXhJs7ScMnUEZPxmr1f4EMzwTVEhfV1TEXLW7qacMis/6233.png",
+              "mime": "image/png"
+            }
+          ],
+          "metadata": {
+            "attributes": [
+              {
+                "trait_type": "Background",
+                "value": "Saga"
+              },
+              {
+                "trait_type": "Fur",
+                "value": "Mocha"
+              },
+              {
+                "trait_type": "Clothing",
+                "value": "Band Hoodie"
+              },
+              {
+                "trait_type": "Mouth",
+                "value": "Beaming"
+              },
+              {
+                "trait_type": "Head",
+                "value": "Mullet Gang"
+              },
+              {
+                "trait_type": "Eyes",
+                "value": "Wayfarers"
+              }
+            ],
+            "description": "Saga Monkes is an exclusive generative art collection airdropped to Saga Genesis Token holders. Learn more at https://SagaMonkes.com",
+            "name": "MONKE #6233",
+            "symbol": "MONKE",
+            "token_standard": "NonFungible"
+          },
+          "links": {
+            "image": "https://shdw-drive.genesysgo.net/5HXhJs7ScMnUEZPxmr1f4EMzwTVEhfV1TEXLW7qacMis/6233.png"
+          }
+        },
+        "authorities": [
+          {
+            "address": "4JdzLtiv96HEnpmpyN7ZdkupvZpZfSFRV6im7HUnsEXT",
+            "scopes": [
+              "full"
+            ]
+          }
+        ],
+        "compression": {
+          "eligible": false,
+          "compressed": true,
+          "data_hash": "2iY1CPYktGQHQbuNkkvonEryMvnoaJiUjLnufHJotron",
+          "creator_hash": "Ep5RkW26Mcyk4njkeL3mnH3EUHoaPktuSYWJajMnSCoR",
+          "asset_hash": "8uKWwYxK7imdvHSPthAVJhidAh5EwuvahdW3BpMYXaz8",
+          "tree": "2uH9TkmYkAKGrK7EPnd4Y7JVYswpQ2aED9deMn8QoYVy",
+          "seq": 102852,
+          "leaf_id": 6201
+        },
+        "grouping": [
+          {
+            "group_key": "collection",
+            "group_value": "GokAiStXz2Kqbxwz2oqzfEXuUhE7aXySmBGEP7uejKXF",
+            "verified": true
+          }
+        ],
+        "royalty": {
+          "royalty_model": "creators",
+          "target": null,
+          "percent": 0.069,
+          "basis_points": 690,
+          "primary_sale_happened": false,
+          "locked": false
+        },
+        "creators": [
+          {
+            "address": "8McVhmNjsYSkwQ34QXJb2ADgLWERcHcpqxSzRZUCRZfQ",
+            "share": 40,
+            "verified": false
+          },
+          {
+            "address": "niFtyPVUnA4dd3gaoajiwmX1keTsTi4k626szinHE5Z",
+            "share": 40,
+            "verified": false
+          },
+          {
+            "address": "KRTv1iR6dH7FuPoW51BQ9hU9UTtibYwZTEA3Fjg4RYy",
+            "share": 15,
+            "verified": false
+          },
+          {
+            "address": "6jYqTEtDgkr1v4DtU4QDUmg1cAf4o1GSsQDGt9X8EfPG",
+            "share": 5,
+            "verified": false
+          }
+        ],
+        "ownership": {
+          "frozen": false,
+          "delegated": false,
+          "delegate": null,
+          "ownership_model": "single",
+          "owner": "DJT1uEFuseGT8GBu8trBU9ocLHXXrRvCRSk3QKn7Xac4"
+        },
+        "supply": {
+          "print_max_supply": 0,
+          "print_current_supply": 0,
+          "edition_nonce": 0
+        },
+        "mutable": true,
+        "burnt": false
+      },
+      {
+        "interface": "ProgrammableNFT",
+        "id": "G3nEdTzAvPvSuj2Z5oSSiMN42NayQDZvkC3usMrnGaTi",
+        "content": {
+          "$schema": "https://schema.metaplex.com/nft1.0.json",
+          "json_uri": "https://madlads.s3.us-west-2.amazonaws.com/json/4221.json",
+          "files": [
+            {
+              "uri": "https://madlads.s3.us-west-2.amazonaws.com/images/4221.png",
+              "mime": "image/png"
+            },
+            {
+              "uri": "https://arweave.net/qJ5B6fx5hEt4P7XbicbJQRyTcbyLaV-OQNA1KjzdqOQ/4221.png",
+              "mime": "image/png"
+            }
+          ],
+          "metadata": {
+            "attributes": [
+              {
+                "trait_type": "Gender",
+                "value": "Female"
+              },
+              {
+                "trait_type": "Type",
+                "value": "Light"
+              },
+              {
+                "trait_type": "Expression",
+                "value": "Mad"
+              },
+              {
+                "trait_type": "Hair",
+                "value": "Lovelace"
+              },
+              {
+                "trait_type": "Eyes",
+                "value": "Blue"
+              },
+              {
+                "trait_type": "Mouth",
+                "value": "Red"
+              },
+              {
+                "trait_type": "Clothing",
+                "value": "Luxe"
+              },
+              {
+                "trait_type": "Background",
+                "value": "White"
+              }
+            ],
+            "description": "Fock it.",
+            "name": "Mad Lads #4221",
+            "symbol": "MAD",
+            "token_standard": "ProgrammableNonFungible"
+          },
+          "links": {
+            "image": "https://madlads.s3.us-west-2.amazonaws.com/images/4221.png",
+            "external_url": "https://madlads.com"
+          }
+        },
+        "authorities": [
+          {
+            "address": "2RtGg6fsFiiF1EQzHqbd66AhW7R5bWeQGpTbv2UMkCdW",
+            "scopes": [
+              "full"
+            ]
+          }
+        ],
+        "compression": {
+          "eligible": false,
+          "compressed": false,
+          "data_hash": "",
+          "creator_hash": "",
+          "asset_hash": "",
+          "tree": "",
+          "seq": 0,
+          "leaf_id": 0
+        },
+        "grouping": [
+          {
+            "group_key": "collection",
+            "group_value": "J1S9H3QjnRtBbbuD4HjPV6RpRhwuk4zKbxsnCHuTgh9w",
+            "verified": true
+          }
+        ],
+        "royalty": {
+          "royalty_model": "creators",
+          "target": null,
+          "percent": 0.042,
+          "basis_points": 420,
+          "primary_sale_happened": true,
+          "locked": false
+        },
+        "creators": [
+          {
+            "address": "5XvhfmRjwXkGp3jHGmaKpqeerNYjkuZZBYLVQYdeVcRv",
+            "share": 0,
+            "verified": true
+          },
+          {
+            "address": "2RtGg6fsFiiF1EQzHqbd66AhW7R5bWeQGpTbv2UMkCdW",
+            "share": 100,
+            "verified": true
+          }
+        ],
+        "ownership": {
+          "frozen": true,
+          "delegated": false,
+          "delegate": null,
+          "ownership_model": "single",
+          "owner": "1BWutmTvYPwDtmw9abTkS4Ssr8no61spGAvW1X6NDix"
+        },
+        "supply": null,
+        "mutable": true,
+        "burnt": false,
+        "lamports": 5616720,
+        "executable": false,
+        "metadata_owner": "metaqbxxUerdq28cj1RbAWkYQm3ybzjb6a8bt518x1s",
+        "rent_epoch": 18446744073709552000,
+        "token_info": {
+          "supply": 1,
+          "decimals": 0,
+          "token_program": "TokenkegQfeZyiNwAJbNbGKPFXCWuBvf9Ss623VQ5DA",
+          "mint_authority": "2ntsS4TKHPXHRGf7e95ocJFRmuhCdSHD8do232a8xx96",
+          "freeze_authority": "2ntsS4TKHPXHRGf7e95ocJFRmuhCdSHD8do232a8xx96"
+        }
+      }
+    ],
+    "id": "1"
+  }
 }
 
 export default getAssetBatch

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

@@ -22,6 +22,32 @@ const getAssetProof = {
         },
       },
     ],
+    exampleResponse: {
+      "jsonrpc": "2.0",
+      "result": {
+        "root": "55bo42a5Vz9pKsuXybLBDDijfL15aZ8yo4YvCKivsswm",
+        "proof": [
+          "Wo8BxWavZxJkNYQvDf98kesxX4Yket1PRdLna4hNXxc",
+          "9i9ZcT1KLf9sqx7TzT9AkkAkxAE4yfrWjcuGGrAtpJde",
+          "Bco6o8YsbVvL5RJeRX9gBwvVr3B1xCtSkFAbbsNwFWvW",
+          "7vSEygK2aWtjPC11gNLGzdXdATG3B8DwdZqtcpzJNKjB",
+          "5QxNqt6Ekv5bQaPxgn4cnmqYPpRjg4FHjofXrGvN35L5",
+          "BYebt3P7jCHgTdPvdyJ4DzbeoKj3VEGs6Wv7g9tzWBHK",
+          "AWk4KY6f7wmcdWuhgSk1jQxEm8GeYA7aRFw6CoLKGtc5",
+          "BMkbYSoj6t2VFGHP5oDi1YKTRqKm6DAeyKSNJq3BpeKD",
+          "DeD9EasMhdyZB6Lsgp5xfwxFkhf66tScSH4X3eEuNmKR",
+          "9XeVtw7o4TJZoqjSvJuv8fGjX33n6BWprSogmEjckb9A",
+          "DBmErTVKEMHEsHcc3M7tDNQKGWerVd3a3ihXwq3JSt7R",
+          "6VTjVoMRMgxE7SCmTeyNEguzetfBsCtoSD6Zt27Q68m5",
+          "6LMPcGLfMVJz3mGdh9NPUxRsnNLdqMMptEzpFNP8mRFm",
+          "DaDD5eZcLV2Cev4yLTc3zeqNyMXDAoR7jLjfGC4smQE8"
+        ],
+        "node_index": 22585,
+        "leaf": "8uKWwYxK7imdvHSPthAVJhidAh5EwuvahdW3BpMYXaz8",
+        "tree_id": "2uH9TkmYkAKGrK7EPnd4Y7JVYswpQ2aED9deMn8QoYVy"
+      },
+      "id": "1"
+    }
   }
   
   export default getAssetProof

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

@@ -47,6 +47,122 @@ const getSignaturesForAsset = {
       },
     },
   ],
+  exampleResponse: {
+    "jsonrpc": "2.0",
+    "result": {
+      "total": 26,
+      "limit": 1000,
+      "before": "102852",
+      "after": "6202",
+      "items": [
+        [
+          "ku1YghMvsszXcLSGCHTCqZcDh1tRaJV9NmYysgW8xJFBnbHsaGmXrLZWNpW84btE5LFT2ugEibBnHFqR7Ga1dEW",
+          "Transfer"
+        ],
+        [
+          "2cjTJnmHeGj54d2CKhxbYyzu4iwGSSd4BdvxMEWkBZ59wx4GMNz9qwBETjdnc799h6nexctbtAKEUHwnSWWPynHP",
+          "Transfer"
+        ],
+        [
+          "5VYXhQ1hCmAbYxhXppCDAA2mcstGSp9n5f2aY3RH2ZjSdsVhNVGy99f2Mcnc1qLgGS99gvGCgVXnhwzALszeUEzg",
+          "Transfer"
+        ],
+        [
+          "65uJ7B2Za5iEbnC3EuqD5FSZzr6pSmAFAc9kQGEcKqvXuZmtgzzKksBgDSfcA6RdGyBKNLquYq6vRBVx77v7ACK8",
+          "Transfer"
+        ],
+        [
+          "35QGhF8HZ9jJdGKbF4wCJ7dWYeDJAq6sGdo5jDWfnf9z5QJiobS7fu4ZYEk4FmNMvxk6Q3B2Mzz4dUahhzQXi4jp",
+          "UpdateMetadata"
+        ],
+        [
+          "3acoPpA8r6fFvgouphrX8AZs4YycHzSHbZG455DABWaMQTG72nRTgh1Ngvr9bTShaokyx6uH4WpwhdyEPTd61uLY",
+          "Transfer"
+        ],
+        [
+          "3ybYGksQYM289onorCzpGb2iVykH76UQ6iLWuEDkom2pkW4bNZ9Z3tLWEPiMZaHHQkEshz3Szy1L3sSYAHNUuZTw",
+          "Transfer"
+        ],
+        [
+          "3W1fGLVeHqr5o8KFAyV53uUHQGjbi4EWkmukT6peZFXScReu35M1TRiUdqGYxcUCE8nUMHtWro6KZF7Fp5scUDUL",
+          "Transfer"
+        ],
+        [
+          "65pT3upbbd9fFqLDkVGU4Txe92xvCPntr32cBsqFG8UAcSTY1EoZT7v39ZKXmP6iLGdDn14iHnzzt9woc8Rg55Ps",
+          "Transfer"
+        ],
+        [
+          "5YfJqdyGfDeFEtvrXVgJgp78ZktjCCPG3oHtoDgwvhwP1jHYspdQcVWn8YaNsDo3978McgF7NHpBzG8fiGM9pAUB",
+          "Transfer"
+        ],
+        [
+          "5Hkc9E1RcW7joxj6VCCRAV91mrkKbaUjTLNPTTdXKxNCKGPvTcJNkg6rBk3yQHczc3DKzMHvXyARKXW8iDTkUijU",
+          "Transfer"
+        ],
+        [
+          "iuMcrfwQs6DZmYXhdjHMEAbSxBEqe3TZRjxbTH21QncsdvGJxbahVpfuPQsqRCsjx9WZrPQUVVTEk3abR6RPV9x",
+          "Transfer"
+        ],
+        [
+          "5sWWSAN3XTdaER9zSGf4duBWWXdRjnW6emjBsNmntBFxcw1EqRva64X6ouACc9fupCJAa6VVj6tHFxtPZkaMLnzt",
+          "Transfer"
+        ],
+        [
+          "ML3D7hHyYv29uki13o53sbQwnkV2qADJxocEEqPXT5GS2H612MKbLBXEv31QUAQxXn5EHpUmnqmoumS7ju4sduv",
+          "Transfer"
+        ],
+        [
+          "88JcrzFgGgSB3JvzAE9V1Rw158M7tY3HaG8vAfRE55yR3ZNFjMFbNFayAT3BzC56YK9mP31oTH6yMfn948cEHZt",
+          "Transfer"
+        ],
+        [
+          "2NBrzfVKWDnvm7mdAZ7VC5FxfXM2pgAZtAFthkYtDPL6Wbh8XvKkTQUiWUrhz7DD4NH7RzDxEmRaDFLoFWwQRK6k",
+          "Transfer"
+        ],
+        [
+          "NvbTkDe4GAvMXW9yud9GDmzhrLKVBypJkHpveN99s41ieuWrPHnZcwqbL5zUaXGESWx6YmVdgyyPrbt5fA1dTxg",
+          "Transfer"
+        ],
+        [
+          "21fMgxF7AYsDuJ7qAsDZwkPzE5MKHEtTxihfPp2Df4jMCSVN89ihsL5BpDepkTdWA35RkwS95YyN5sg6xopDTyku",
+          "Transfer"
+        ],
+        [
+          "2BGd8CSCXr8TbCjzZ9wDANErggZnBKRVkwJJsFS8mGjphenF8ubo25pCXug77ejomtjxy3PAJegLMhd9nC9kQyRs",
+          "Transfer"
+        ],
+        [
+          "idmLXJSXBqk4GyxXGG7Jt3kN7iocuzS9S9WFLAyh7hMqQXEDoMe9dQEx4ZduPA5vyXgVC4e8pNBsxoHQEridZ9Z",
+          "Transfer"
+        ],
+        [
+          "2cPinwrSXqkcnc1a2f8jqH9HwtGjVaFoGUFgX5ngs9ReQkf762SjwtWSr38Z6Mw42yPk1iNp4rxmVZ5AHbWRDjzp",
+          "Transfer"
+        ],
+        [
+          "5EG6nGd19D7w8iKTZW3j4LrGcPL25Vb8DgC1ow3eSxRc6pt5zjhjVKmUqMmzJhzbWF6CnyfU3eE9uUdj74hP7pBX",
+          "Transfer"
+        ],
+        [
+          "4CGNUpVBBb5GxkJ5wjfBYMzFBCzJYmDxLKrycqyTcXKigU1zyifTbUze7qwoYngQmGRsoeUSTgzTH3fC5hMwqMXL",
+          "Transfer"
+        ],
+        [
+          "pT7iNQXjdSpnLWFT3FWgpjjUZpDxqXGcdV6zuom3AoRhT1XHxggCQPaVNnwZDHo2xyrqi6CJ6atQDyA9zdZgqeA",
+          "Transfer"
+        ],
+        [
+          "3rG9cE8SZ3g9yVxjbBwtJoP91cxAe5NMjKLTrocqfz4ThLB5DUWmHKSUiaWHKMiYYwsLuFCuaL7yWLYSRT946fAh",
+          "Transfer"
+        ],
+        [
+          "3mCjD5iVXMaV2YwmKxUzHVu3WkGggzEa23BVwdu2Nx5Ef7gwzXQSnspZZrtu8xVbddm1LJsjuaenGbtapFeDQXZL",
+          "MintToCollectionV1"
+        ]
+      ]
+    },
+    "id": "1"
+  }
 }
 
 export default getSignaturesForAsset

src/styles/extra.css

@@ -1,29 +1,32 @@
 .dropShadowLight {
-    -webkit-box-shadow: 11px 11px 22px -3px rgba(255, 255, 255, 0.212); 
-box-shadow: 11px 11px 22px -3px rgba(255, 255, 255, 0.212);
+  -webkit-box-shadow: 11px 11px 22px -3px rgba(255, 255, 255, 0.212);
+  box-shadow: 11px 11px 22px -3px rgba(255, 255, 255, 0.212);
 }
 
 .gradientTextHeader {
-    background: linear-gradient(0.25turn, #cf4fb4, #6186b1, #39ce95);
-    -webkit-background-clip: text;
-    -webkit-text-fill-color: transparent;
-    background-clip: text;
-  }
+  background: linear-gradient(0.25turn, #cf4fb4, #6186b1, #39ce95);
+  -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;
-    }
+.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);
-        }
-        } 
+@keyframes rotation {
+  0% {
+    transform: rotate(0deg);
+  }
+  100% {
+    transform: rotate(360deg);
+  }
+}
+select::-ms-expand {
+  display: none;
+}