Insight Dashboard

Author: MananTank

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

@@ -0,0 +1,185 @@
+import type { Meta, StoryObj } from "@storybook/react";
+import { mobileViewport } from "../../../../../../stories/utils";
+import { BluePrintPlayground } 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;
+}) {
+  return (
+    <div className="flex min-h-[800px] flex-col">
+      <BluePrintPlayground metadata={props.metadata} backLink="/" />
+    </div>
+  );
+}
+
+function getBlueprintMetadata() {
+  const transactionsMetadata: BluePrintMetadata = {
+    domain: "https://{chainId}.insight.thirdweb.com",
+    path: "/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: "/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: "/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,
+  };
+}