Merge pull request #327 from sablier-labs/refactor/envio-testing-column

feat: EnvioEndpointTable

Author: PaulRBerg

docs/api/airdrops/02-airdrops-endpoints.mdx

@@ -7,6 +7,7 @@ title: "Endpoints"
 import DeprecatedSubgraphs from "@site/docs/snippets/DeprecatedSubgraphs.mdx";
 import EnvioEndpoints from "@site/docs/snippets/EnvioEndpoints.mdx";
 import TheGraphEndpoints from "@site/docs/snippets/TheGraphEndpoints.mdx";
+import EnvioEndpointTable from "@site/src/components/molecules/EnvioEndpointTable";
 import LinkPreview from "@site/src/components/molecules/LinkPreview";
 
 # Airdrops Endpoints
@@ -48,9 +49,7 @@ new [Lockup](/api/lockup/overview) streams.
 
 ### Endpoints
 
-| Chain      | Endpoint                                          |
-| ---------- | ------------------------------------------------- |
-| All Chains | https://indexer.hyperindex.xyz/508d217/v1/graphql |
+<EnvioEndpointTable protocolId="508d217" />
 
 <EnvioEndpoints />
 

docs/api/flow/02-flow-endpoints.mdx

@@ -7,6 +7,7 @@ title: "Endpoints"
 import DeprecatedSubgraphs from "@site/docs/snippets/DeprecatedSubgraphs.mdx";
 import EnvioEndpoints from "@site/docs/snippets/EnvioEndpoints.mdx";
 import TheGraphEndpoints from "@site/docs/snippets/TheGraphEndpoints.mdx";
+import EnvioEndpointTable from "@site/src/components/molecules/EnvioEndpointTable";
 import LinkPreview from "@site/src/components/molecules/LinkPreview";
 
 # Flow Endpoints
@@ -27,9 +28,7 @@ creating, depositing, or voiding Flow streams.
 
 ### Endpoints
 
-| Chain      | Endpoint                                          |
-| ---------- | ------------------------------------------------- |
-| All Chains | https://indexer.hyperindex.xyz/3b4ea6b/v1/graphql |
+<EnvioEndpointTable protocolId="3b4ea6b" />
 
 <EnvioEndpoints />
 

docs/api/lockup/02-lockup-endpoints.mdx

@@ -7,6 +7,7 @@ title: "Endpoints"
 import DeprecatedSubgraphs from "@site/docs/snippets/DeprecatedSubgraphs.mdx";
 import EnvioEndpoints from "@site/docs/snippets/EnvioEndpoints.mdx";
 import TheGraphEndpoints from "@site/docs/snippets/TheGraphEndpoints.mdx";
+import EnvioEndpointTable from "@site/src/components/molecules/EnvioEndpointTable";
 import LinkPreview from "@site/src/components/molecules/LinkPreview";
 
 # Lockup Endpoints
@@ -27,9 +28,7 @@ creating, withdrawing, or transferring Lockup streams.
 
 ### Endpoints
 
-| Chain      | Endpoint                                          |
-| ---------- | ------------------------------------------------- |
-| All Chains | https://indexer.hyperindex.xyz/53b7e25/v1/graphql |
+<EnvioEndpointTable protocolId="53b7e25" />
 
 <EnvioEndpoints />
 

docs/snippets/EnvioEndpoints.mdx

@@ -1,9 +1,6 @@
 "All Chains" means most of the chains supported by Sablier, e.g., Ethereum Mainnet, Optimism, Polygon. The full list can
 be found [here](https://github.com/sablier-labs/indexers/blob/main/packages/constants/src).
 
-The endpoint is meant to be plugged into a query client. Use
-[Hasura's online explorer](https://cloud.hasura.io/public/graphiql?) to view the entities and query API.
-
 :::tip Unified Endpoint
 
 As you can see, Envio offers a single API endpoint that aggregates data across all chains. This approach differs from

src/components/molecules/EnvioEndpointTable.tsx

@@ -0,0 +1,39 @@
+import React from "react";
+import Link from "@docusaurus/Link";
+
+interface Props {
+  protocolId: string;
+}
+
+const EnvioEndpointTable: React.FC<Props> = ({ protocolId }) => {
+  // Generate the Envio endpoint URL
+  const endpoint = `https://indexer.hyperindex.xyz/${protocolId}/v1/graphql`;
+
+  // Construct the testing URL
+  const testingUrl = `https://cloud.hasura.io/public/graphiql?endpoint=https%3A%2F%2Findexer.hyperindex.xyz%2F${protocolId}%2Fv1%2Fgraphql`;
+
+  return (
+    <table>
+      <thead>
+        <tr>
+          <th>Chain</th>
+          <th>Endpoint</th>
+          <th>Testing</th>
+        </tr>
+      </thead>
+      <tbody>
+        <tr>
+          <td>All Chains</td>
+          <td>
+            <Link to={endpoint}>{endpoint}</Link>
+          </td>
+          <td>
+            <Link to={testingUrl}>Hasura GraphiQL</Link>
+          </td>
+        </tr>
+      </tbody>
+    </table>
+  );
+};
+
+export default EnvioEndpointTable;