Insight Dashboard

Author: MananTank

apps/dashboard/src/@/components/ui/code/getCodeHtml.tsx

@@ -10,9 +10,7 @@ function isPrettierSupportedLang(lang: BundledLanguage) {
     lang === "ts" ||
     lang === "tsx" ||
     lang === "javascript" ||
-    lang === "typescript" ||
-    lang === "css" ||
-    lang === "json"
+    lang === "typescript"
   );
 }
 

apps/dashboard/src/app/team/[team_slug]/[project_slug]/insight/[blueprint_slug]/BluePrintPlayground.stories.tsx

@@ -0,0 +1,211 @@
+import type { Meta, StoryObj } from "@storybook/react";
+import { useMutation } from "@tanstack/react-query";
+import { useState } from "react";
+import { mobileViewport } from "../../../../../../stories/utils";
+import { BluePrintPlaygroundUI } from "./BluePrintPlayground";
+import type { BluePrintMetadata } from "./utils";
+
+const meta = {
+  title: "Insight/BluePrintPlayground",
+  component: Story,
+  parameters: {
+    nextjs: {
+      appDirectory: true,
+    },
+  },
+} satisfies Meta<typeof Story>;
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+export const Desktop: Story = {
+  args: {
+    metadata: getBlueprintMetadata().transactionsMetadata,
+  },
+};
+
+export const Mobile: Story = {
+  args: {
+    metadata: getBlueprintMetadata().transactionsMetadata,
+  },
+  parameters: {
+    viewport: mobileViewport("iphone14"),
+  },
+};
+
+function Story() {
+  return (
+    <div className="flex flex-col gap-10">
+      <Variant metadata={getBlueprintMetadata().transactionsMetadata} />
+      <Variant metadata={getBlueprintMetadata().eventsMetadata} />
+      <Variant metadata={getBlueprintMetadata().tokensMetadata} />
+    </div>
+  );
+}
+
+function Variant(props: {
+  metadata: BluePrintMetadata;
+}) {
+  const [response, setResponse] = useState<string | undefined>(undefined);
+  const mutation = useMutation({
+    mutationFn: async () => {
+      await new Promise((resolve) => setTimeout(resolve, 1000));
+
+      const dummyResponse = {
+        data: {
+          title: "This is a dummy response",
+          content: crypto.getRandomValues(new Uint8Array(10)),
+        },
+      };
+
+      return JSON.stringify(dummyResponse, null, 2);
+    },
+  });
+  return (
+    <div className="flex min-h-[800px] flex-col">
+      <BluePrintPlaygroundUI
+        metadata={props.metadata}
+        backLink="/"
+        isPending={mutation.isPending}
+        onRunClick={async () => {
+          const res = await mutation.mutateAsync();
+          setResponse(res);
+        }}
+        response={response}
+      />
+    </div>
+  );
+}
+
+function getBlueprintMetadata() {
+  const transactionsMetadata: BluePrintMetadata = {
+    domain: "https://{chainId}.insight.thirdweb.com",
+    path: "/{clientId}/transactions",
+    parameters: [
+      {
+        description: "Chain ID",
+        name: "chainId",
+        in: "path",
+        required: true,
+      },
+      {
+        description: "Filter parameters",
+        name: "filter",
+        in: "query",
+      },
+      {
+        description: "Field to group results by",
+        name: "group_by",
+        in: "query",
+      },
+      {
+        description: "Field to sort results by",
+        name: "sort_by",
+        in: "query",
+      },
+      {
+        description: "Sort order (asc or desc)",
+        name: "sort_order",
+        in: "query",
+      },
+      {
+        description: "Page number for pagination",
+        name: "page",
+        in: "query",
+      },
+      {
+        description: "Number of items per page",
+        name: "limit",
+        in: "query",
+      },
+      {
+        description: "List of aggregate functions to apply",
+        name: "aggregate",
+        in: "query",
+      },
+    ],
+    title: "Transactions",
+    description: "Retrieve all transactions across all contracts",
+  };
+
+  const eventsMetadata: BluePrintMetadata = {
+    domain: "https://{chainId}.insight.thirdweb.com",
+    path: "/{clientId}/events",
+    parameters: [
+      {
+        description: "Chain ID",
+        name: "chainId",
+        in: "path",
+        required: true,
+      },
+      {
+        description: "Filter parameters",
+        name: "filter",
+        in: "query",
+      },
+      {
+        description: "Field to group results by",
+        name: "group_by",
+        in: "query",
+      },
+      {
+        description: "Field to sort results by",
+        name: "sort_by",
+        in: "query",
+      },
+      {
+        description: "Sort order (asc or desc)",
+        name: "sort_order",
+        in: "query",
+      },
+      {
+        description: "Page number for pagination",
+        name: "page",
+        in: "query",
+      },
+      {
+        description: "Number of items per page",
+        name: "limit",
+        in: "query",
+      },
+      {
+        description: "List of aggregate functions to apply",
+        name: "aggregate",
+        in: "query",
+      },
+    ],
+    title: "Events",
+    description: "Retrieve all logs across all contracts",
+  };
+
+  const tokensMetadata: BluePrintMetadata = {
+    domain: "https://{chainId}.insight.thirdweb.com",
+    path: "/v1/{clientId}/tokens/erc20/:ownerAddress",
+    parameters: [
+      {
+        name: "chainId",
+        in: "path",
+        required: true,
+        description: "Chain ID",
+      },
+      {
+        required: true,
+        name: "ownerAddress",
+        in: "path",
+      },
+      {
+        required: false,
+        name: "clientId",
+        in: "path",
+      },
+    ],
+    title: "Tokens",
+    description: "Retrieve tokens balances for a given owner address",
+  };
+
+  return {
+    transactionsMetadata,
+    eventsMetadata,
+    tokensMetadata,
+  };
+}