Explore Endpoints: Accounts Params view + template rendering setup

src/app/(sidebar)/explore-endpoints/layout.tsx

@@ -2,7 +2,7 @@
 
 import React from "react";
 import { LayoutSidebarContent } from "@/components/layout/LayoutSidebarContent";
-import { Routes } from "@/constants/routes";
+import { EXPLORE_ENDPOINTS_PAGES_HORIZON } from "@/constants/exploreEndpointsPages";
 
 export default function ExploreEndpointsTemplate({
   children,
@@ -12,280 +12,8 @@ export default function ExploreEndpointsTemplate({
   return (
     // TODO: add saved endpoints
     // TODO: add RPC endpoints
-    <LayoutSidebarContent sidebar={[horizon_endpoints]}>
+    <LayoutSidebarContent sidebar={[EXPLORE_ENDPOINTS_PAGES_HORIZON]}>
       {children}
     </LayoutSidebarContent>
   );
 }
-
-const horizon_endpoints = {
-  instruction: "Horizon Endpoints",
-  navItems: [
-    {
-      route: Routes.EXPLORE_ENDPOINTS_ACCOUNTS,
-      label: "Accounts",
-      nestedItems: [
-        {
-          route: Routes.EXPLORE_ENDPOINTS_ACCOUNTS,
-          label: "All Accounts",
-        },
-        {
-          route: Routes.EXPLORE_ENDPOINTS_ACCOUNTS_SINGLE,
-          label: "Single Account",
-        },
-      ],
-    },
-    {
-      route: Routes.EXPLORE_ENDPOINTS_ASSETS,
-      label: "Assets",
-      nestedItems: [
-        {
-          route: Routes.EXPLORE_ENDPOINTS_ASSETS,
-          label: "All Assets",
-        },
-      ],
-    },
-    {
-      route: Routes.EXPLORE_ENDPOINTS_CLAIMABLE_BALANCES,
-      label: "Claimable Balances",
-      nestedItems: [
-        {
-          route: Routes.EXPLORE_ENDPOINTS_CLAIMABLE_BALANCES,
-          label: "All Claimable Balances",
-        },
-        {
-          route: Routes.EXPLORE_ENDPOINTS_CLAIMABLE_BALANCES_SINGLE,
-          label: "Single Claimable Balance",
-        },
-      ],
-    },
-    {
-      route: Routes.EXPLORE_ENDPOINTS_EFFECTS,
-      label: "Effects",
-      nestedItems: [
-        {
-          route: Routes.EXPLORE_ENDPOINTS_EFFECTS,
-          label: "All Effects",
-        },
-        {
-          route: Routes.EXPLORE_ENDPOINTS_EFFECTS_ACCOUNT,
-          label: "Effects for Account",
-        },
-        {
-          route: Routes.EXPLORE_ENDPOINTS_EFFECTS_LEDGER,
-          label: "Effects for Ledger",
-        },
-        {
-          route: Routes.EXPLORE_ENDPOINTS_EFFECTS_LIQUIDITY_POOL,
-          label: "Effects for Liquidity Pool",
-        },
-        {
-          route: Routes.EXPLORE_ENDPOINTS_EFFECTS_OPERATION,
-          label: "Effects for Operation",
-        },
-        {
-          route: Routes.EXPLORE_ENDPOINTS_EFFECTS_TRANSACTION,
-          label: "Effects for Transaction",
-        },
-      ],
-    },
-    {
-      route: Routes.EXPLORE_ENDPOINTS_FEE_STATS,
-      label: "Fee Stats",
-      nestedItems: [
-        {
-          route: Routes.EXPLORE_ENDPOINTS_FEE_STATS,
-          label: "All Fee Stats",
-        },
-      ],
-    },
-    {
-      route: Routes.EXPLORE_ENDPOINTS_LEDGERS,
-      label: "Ledgers",
-      nestedItems: [
-        {
-          route: Routes.EXPLORE_ENDPOINTS_LEDGERS,
-          label: "All Ledgers",
-        },
-        {
-          route: Routes.EXPLORE_ENDPOINTS_LEDGERS_SINGLE,
-          label: "Single Ledger",
-        },
-      ],
-    },
-    {
-      route: Routes.EXPLORE_ENDPOINTS_LIQUIDITY_POOLS,
-      label: "Liquidity Pools",
-      nestedItems: [
-        {
-          route: Routes.EXPLORE_ENDPOINTS_LIQUIDITY_POOLS,
-          label: "All Liquidity Pools",
-        },
-        {
-          route: Routes.EXPLORE_ENDPOINTS_LIQUIDITY_POOLS_SINGLE,
-          label: "Single Liquidity Pool",
-        },
-      ],
-    },
-    {
-      route: Routes.EXPLORE_ENDPOINTS_OFFERS,
-      label: "Offers",
-      nestedItems: [
-        {
-          route: Routes.EXPLORE_ENDPOINTS_OFFERS,
-          label: "All Offers",
-        },
-        {
-          route: Routes.EXPLORE_ENDPOINTS_OFFERS_SINGLE,
-          label: "Single Offer",
-        },
-        {
-          route: Routes.EXPLORE_ENDPOINTS_OFFERS_ACCOUNT,
-          label: "Offers for Account",
-        },
-      ],
-    },
-    {
-      route: Routes.EXPLORE_ENDPOINTS_OPERATIONS,
-      label: "Operations",
-      nestedItems: [
-        {
-          route: Routes.EXPLORE_ENDPOINTS_OPERATIONS,
-          label: "All Operations",
-        },
-        {
-          route: Routes.EXPLORE_ENDPOINTS_OPERATIONS_SINGLE,
-          label: "Single Operation",
-        },
-        {
-          route: Routes.EXPLORE_ENDPOINTS_OPERATIONS_ACCOUNT,
-          label: "Operations for Account",
-        },
-        {
-          route: Routes.EXPLORE_ENDPOINTS_OPERATIONS_LEDGER,
-          label: "Operations for Ledger",
-        },
-        {
-          route: Routes.EXPLORE_ENDPOINTS_OPERATIONS_LIQUIDITY_POOL,
-          label: "Operations for Liquidity Pool",
-        },
-        {
-          route: Routes.EXPLORE_ENDPOINTS_OPERATIONS_TRANSACTION,
-          label: "Operations for Transaction",
-        },
-      ],
-    },
-    {
-      route: Routes.EXPLORE_ENDPOINTS_ORDER_BOOK_DETAILS,
-      label: "Order Book",
-      nestedItems: [
-        {
-          route: Routes.EXPLORE_ENDPOINTS_ORDER_BOOK_DETAILS,
-          label: "Details",
-        },
-      ],
-    },
-    {
-      route: Routes.EXPLORE_ENDPOINTS_PATHS_PAYMENT,
-      label: "Paths",
-      nestedItems: [
-        {
-          route: Routes.EXPLORE_ENDPOINTS_PATHS_PAYMENT,
-          label: "Find Payment Paths",
-        },
-        {
-          route: Routes.EXPLORE_ENDPOINTS_PATHS_STRICT_RECEIVE,
-          label: "Find Strict Receive Payment Paths",
-        },
-        {
-          route: Routes.EXPLORE_ENDPOINTS_PATHS_STRICT_SEND,
-          label: "Find Strict Send Payment Paths",
-        },
-      ],
-    },
-    {
-      route: Routes.EXPLORE_ENDPOINTS_PAYMENTS,
-      label: "Payments",
-      nestedItems: [
-        {
-          route: Routes.EXPLORE_ENDPOINTS_PAYMENTS,
-          label: "All Payments",
-        },
-        {
-          route: Routes.EXPLORE_ENDPOINTS_PAYMENTS_ACCOUNT,
-          label: "Payments for Account",
-        },
-        {
-          route: Routes.EXPLORE_ENDPOINTS_PAYMENTS_LEDGER,
-          label: "Payments for Ledger",
-        },
-        {
-          route: Routes.EXPLORE_ENDPOINTS_PAYMENTS_TRANSACTION,
-          label: "Payments for Transaction",
-        },
-      ],
-    },
-    {
-      route: Routes.EXPLORE_ENDPOINTS_TRADE_AGGREGATIONS,
-      label: "Trade Aggregations",
-      nestedItems: [
-        {
-          route: Routes.EXPLORE_ENDPOINTS_TRADE_AGGREGATIONS,
-          label: "All Trade Aggregations",
-        },
-      ],
-    },
-    {
-      route: Routes.EXPLORE_ENDPOINTS_TRADES,
-      label: "Trades",
-      nestedItems: [
-        {
-          route: Routes.EXPLORE_ENDPOINTS_TRADES,
-          label: "All Trades",
-        },
-        {
-          route: Routes.EXPLORE_ENDPOINTS_TRADES_ACCOUNT,
-          label: "Trades for Account",
-        },
-        {
-          route: Routes.EXPLORE_ENDPOINTS_TRADES_LIQUIDITY_POOL,
-          label: "Trades for Liquidity Pool",
-        },
-        {
-          route: Routes.EXPLORE_ENDPOINTS_TRADES_OFFER,
-          label: "Trades for Offer",
-        },
-      ],
-    },
-    {
-      route: Routes.EXPLORE_ENDPOINTS_TRANSACTIONS,
-      label: "Transactions",
-      nestedItems: [
-        {
-          route: Routes.EXPLORE_ENDPOINTS_TRANSACTIONS,
-          label: "All Transactions",
-        },
-        {
-          route: Routes.EXPLORE_ENDPOINTS_TRANSACTIONS_SINGLE,
-          label: "Single Transaction",
-        },
-        {
-          route: Routes.EXPLORE_ENDPOINTS_TRANSACTIONS_POST,
-          label: "Post Transaction",
-        },
-        {
-          route: Routes.EXPLORE_ENDPOINTS_TRANSACTIONS_ACCOUNT,
-          label: "Transactions for Account",
-        },
-        {
-          route: Routes.EXPLORE_ENDPOINTS_TRANSACTIONS_LEDGER,
-          label: "Transactions for Ledger",
-        },
-        {
-          route: Routes.EXPLORE_ENDPOINTS_TRANSACTIONS_LIQUIDITY_POOL,
-          label: "Transactions for Liquidity Pool",
-        },
-      ],
-    },
-  ],
-};

src/app/page.tsx

@@ -24,31 +24,34 @@ export default function Introduction() {
     },
     {
       id: "tools",
-      title: "Tools",
+      title: "Developer Tools",
       description:
-        "Tools for reading and interacting with Soroban smart contracts on the Stellar Network",
+        "Tools, like the Stellar CLI, for reading and interacting with smart contracts on the Stellar Network",
       buttonLabel: "See tools",
       buttonIcon: undefined,
       buttonAction: () => router.push(Routes.SOROBAN_CONTRACT_EXPLORER),
     },
     {
-      id: "soroban-rpc",
-      title: "Learn about the Soroban RPC",
-      description: "Learn about the Soroban RPC, a RPC gateway to Stellar",
+      id: "stellar-rpc",
+      title: "Stellar RPC",
+      description: "Learn about the Stellar RPC, a RPC gateway to Stellar",
       buttonLabel: "Go to docs",
       buttonIcon: <Icon.LinkExternal01 />,
       buttonAction: () =>
-        window.open("https://soroban.stellar.org/docs/reference/rpc", "_blank"),
+        window.open(
+          "https://developers.stellar.org/network/soroban-rpc",
+          "_blank",
+        ),
     },
     {
       id: "horizon",
-      title: "Learn about Horizon",
+      title: "Horizon",
       description:
         "Learn about the Horizon for interacting with the Stellar network",
       buttonLabel: "Go to docs",
       buttonIcon: <Icon.LinkExternal01 />,
       buttonAction: () =>
-        window.open("https://developers.stellar.org/api/horizon", "_blank"),
+        window.open("https://developers.stellar.org/network/horizon", "_blank"),
     },
   ];
 
@@ -62,7 +65,7 @@ export default function Introduction() {
 
           <Text size="sm" as="p">
             The Stellar Laboratory is a set of tools that enables people to try
-            out and learn about the Stellar network. The laboratory can{" "}
+            out and learn about the Stellar network. The Laboratory can{" "}
             <NextLink href={Routes.BUILD_TRANSACTION} sds-variant="primary">
               build transactions
             </NextLink>
@@ -74,7 +77,8 @@ export default function Introduction() {
             <NextLink href={Routes.SUBMIT_TRANSACTION} sds-variant="primary">
               submit them to the network
             </NextLink>
-            . It can also make requests to any of the Horizon endpoints.
+            . It can also make requests to RPC and Horizon endpoints. You can
+            save your transactions and runbooks for future use.
           </Text>
 
           <Text size="sm" as="p">

src/components/ExpandBox/styles.scss

@@ -1,7 +1,7 @@
 .ExpandBox {
   display: grid;
   grid-template-rows: 0fr;
-  transition: grid-template-rows 200ms ease-out;
+  transition: grid-template-rows 100ms ease-out;
 
   &[data-is-expanded="true"] {
     grid-template-rows: 1fr;