Skip to content

Commit 0d35304

Browse files
MananTankMananTank
committed
Insight Dashboard
1 parent a7d0ecb commit 0d35304

File tree

13 files changed

+1010
-134
lines changed

13 files changed

+1010
-134
lines changed

‎apps/dashboard/src/@/components/ui/code/CodeBlockContainer.tsx‎

Lines changed: 5 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -11,6 +11,7 @@ export function CodeBlockContainer(props: {
1111
children: React.ReactNode;
1212
className?: string;
1313
scrollableClassName?: string;
14+
scrollableContainerClassName?: string;
1415
copyButtonClassName?: string;
1516
}) {
1617
const { hasCopied, onCopy } = useClipboard(props.codeToCopy);
@@ -24,7 +25,10 @@ export function CodeBlockContainer(props: {
2425
>
2526
<ScrollShadow
2627
scrollableClassName={cn("p-4", props.scrollableClassName)}
27-
className="text-xs md:text-sm [&_*]:leading-relaxed"
28+
className={cn(
29+
"text-xs md:text-sm [&_*]:leading-relaxed",
30+
props.scrollableContainerClassName,
31+
)}
2832
shadowColor="hsl(var(--muted))"
2933
>
3034
{props.children}

‎apps/dashboard/src/@/components/ui/code/RenderCode.tsx‎

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -6,13 +6,15 @@ export function RenderCode(props: {
66
className?: string;
77
scrollableClassName?: string;
88
copyButtonClassName?: string;
9+
scrollableContainerClassName?: string;
910
}) {
1011
return (
1112
<CodeBlockContainer
1213
codeToCopy={props.code}
1314
className={props.className}
1415
copyButtonClassName={props.copyButtonClassName}
1516
scrollableClassName={props.scrollableClassName}
17+
scrollableContainerClassName={props.scrollableContainerClassName}
1618
>
1719
<div
1820
// biome-ignore lint/security/noDangerouslySetInnerHtml: we know what we're doing here

‎apps/dashboard/src/@/components/ui/code/code.client.tsx‎

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -12,6 +12,7 @@ export type CodeProps = {
1212
scrollableClassName?: string;
1313
keepPreviousDataOnCodeChange?: boolean;
1414
copyButtonClassName?: string;
15+
scrollableContainerClassName?: string;
1516
};
1617

1718
export const CodeClient: React.FC<CodeProps> = ({
@@ -21,6 +22,7 @@ export const CodeClient: React.FC<CodeProps> = ({
2122
scrollableClassName,
2223
keepPreviousDataOnCodeChange = false,
2324
copyButtonClassName,
25+
scrollableContainerClassName,
2426
}) => {
2527
const codeQuery = useQuery({
2628
queryKey: ["html", code],
@@ -38,6 +40,7 @@ export const CodeClient: React.FC<CodeProps> = ({
3840
className={className}
3941
scrollableClassName={scrollableClassName}
4042
copyButtonClassName={copyButtonClassName}
43+
scrollableContainerClassName={scrollableContainerClassName}
4144
/>
4245
);
4346
}
@@ -49,6 +52,7 @@ export const CodeClient: React.FC<CodeProps> = ({
4952
className={className}
5053
scrollableClassName={scrollableClassName}
5154
copyButtonClassName={copyButtonClassName}
55+
scrollableContainerClassName={scrollableContainerClassName}
5256
/>
5357
);
5458
};

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

Lines changed: 1 addition & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -10,9 +10,7 @@ function isPrettierSupportedLang(lang: BundledLanguage) {
1010
lang === "ts" ||
1111
lang === "tsx" ||
1212
lang === "javascript" ||
13-
lang === "typescript" ||
14-
lang === "css" ||
15-
lang === "json"
13+
lang === "typescript"
1614
);
1715
}
1816

‎apps/dashboard/src/@/components/ui/code/plaintext-code.tsx‎

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -7,13 +7,15 @@ export function PlainTextCodeBlock(props: {
77
className?: string;
88
scrollableClassName?: string;
99
codeClassName?: string;
10+
scrollableContainerClassName?: string;
1011
}) {
1112
return (
1213
<CodeBlockContainer
1314
codeToCopy={props.code}
1415
className={props.className}
1516
copyButtonClassName={props.copyButtonClassName}
1617
scrollableClassName={props.scrollableClassName}
18+
scrollableContainerClassName={props.scrollableContainerClassName}
1719
>
1820
<code className={cn("block whitespace-pre", props.codeClassName)}>
1921
{props.code}

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

Lines changed: 224 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,224 @@
1+
import type { Meta, StoryObj } from "@storybook/react";
2+
import { useMutation } from "@tanstack/react-query";
3+
import { useState } from "react";
4+
import { mobileViewport } from "../../../../../../stories/utils";
5+
import { BluePrintPlaygroundUI } from "./BluePrintPlayground";
6+
import type { BluePrintMetadata } from "./utils";
7+
8+
const meta = {
9+
title: "Insight/BluePrintPlayground",
10+
component: Story,
11+
parameters: {
12+
nextjs: {
13+
appDirectory: true,
14+
},
15+
},
16+
} satisfies Meta<typeof Story>;
17+
18+
export default meta;
19+
type Story = StoryObj<typeof meta>;
20+
21+
export const Desktop: Story = {
22+
args: {
23+
metadata: getBlueprintMetadata().transactionsMetadata,
24+
},
25+
};
26+
27+
export const Mobile: Story = {
28+
args: {
29+
metadata: getBlueprintMetadata().transactionsMetadata,
30+
},
31+
parameters: {
32+
viewport: mobileViewport("iphone14"),
33+
},
34+
};
35+
36+
function Story() {
37+
return (
38+
<div className="flex flex-col gap-10">
39+
<Variant metadata={getBlueprintMetadata().transactionsMetadata} />
40+
<Variant metadata={getBlueprintMetadata().eventsMetadata} />
41+
<Variant metadata={getBlueprintMetadata().tokensMetadata} />
42+
</div>
43+
);
44+
}
45+
46+
function Variant(props: {
47+
metadata: BluePrintMetadata;
48+
}) {
49+
const [response, setResponse] = useState<string | undefined>(undefined);
50+
const mutation = useMutation({
51+
mutationFn: async () => {
52+
await new Promise((resolve) => setTimeout(resolve, 1000));
53+
54+
const dummyResponse = {
55+
data: {
56+
title: "This is a dummy response",
57+
content: crypto.getRandomValues(new Uint8Array(100)),
58+
},
59+
};
60+
61+
return JSON.stringify(dummyResponse, null, 2);
62+
},
63+
});
64+
return (
65+
<div className="flex min-h-[800px] flex-col">
66+
<BluePrintPlaygroundUI
67+
metadata={props.metadata}
68+
backLink="/"
69+
isPending={mutation.isPending}
70+
onRun={async () => {
71+
const res = await mutation.mutateAsync();
72+
setResponse(res);
73+
}}
74+
response={response}
75+
clientId="68665db28327c771c9a1bd5fc4580a0a"
76+
/>
77+
</div>
78+
);
79+
}
80+
81+
function getBlueprintMetadata() {
82+
const transactionsMetadata: BluePrintMetadata = {
83+
domain: "https://{chainId}.insight.thirdweb.com",
84+
path: "/v1/{clientId}/transactions",
85+
parameters: [
86+
{
87+
name: "chainId",
88+
in: "path",
89+
required: true,
90+
description: "Chain ID",
91+
type: "string",
92+
},
93+
{
94+
name: "filter",
95+
in: "query",
96+
description: "Filter parameters",
97+
type: "string",
98+
},
99+
{
100+
name: "group_by",
101+
in: "query",
102+
description: "Field to group results by",
103+
type: "string",
104+
},
105+
{
106+
name: "sort_by",
107+
in: "query",
108+
description: "Field to sort results by",
109+
type: "string",
110+
},
111+
{
112+
name: "sort_order",
113+
in: "query",
114+
description: "Sort order (asc or desc)",
115+
type: "string",
116+
},
117+
{
118+
name: "page",
119+
in: "query",
120+
description: "Page number for pagination",
121+
type: "integer",
122+
},
123+
{
124+
name: "limit",
125+
in: "query",
126+
description: "Number of items per page",
127+
type: "integer",
128+
},
129+
{
130+
name: "aggregate",
131+
in: "query",
132+
description: "List of aggregate functions to apply",
133+
type: "array",
134+
},
135+
],
136+
title: "Transactions",
137+
description: "Retrieve all transactions across all contracts",
138+
};
139+
140+
const eventsMetadata: BluePrintMetadata = {
141+
domain: "https://{chainId}.insight.thirdweb.com",
142+
path: "/v1/{clientId}/events",
143+
parameters: [
144+
{
145+
name: "chainId",
146+
in: "path",
147+
required: true,
148+
description: "Chain ID",
149+
type: "string",
150+
},
151+
{
152+
name: "filter",
153+
in: "query",
154+
description: "Filter parameters",
155+
type: "string",
156+
},
157+
{
158+
name: "group_by",
159+
in: "query",
160+
description: "Field to group results by",
161+
type: "string",
162+
},
163+
{
164+
name: "sort_by",
165+
in: "query",
166+
description: "Field to sort results by",
167+
type: "string",
168+
},
169+
{
170+
name: "sort_order",
171+
in: "query",
172+
description: "Sort order (asc or desc)",
173+
type: "string",
174+
},
175+
{
176+
name: "page",
177+
in: "query",
178+
description: "Page number for pagination",
179+
type: "integer",
180+
},
181+
{
182+
name: "limit",
183+
in: "query",
184+
description: "Number of items per page",
185+
type: "integer",
186+
},
187+
{
188+
name: "aggregate",
189+
in: "query",
190+
description: "List of aggregate functions to apply",
191+
type: "array",
192+
},
193+
],
194+
title: "Events",
195+
description: "Retrieve all logs across all contracts",
196+
};
197+
198+
const tokensMetadata: BluePrintMetadata = {
199+
domain: "https://{chainId}.insight.thirdweb.com",
200+
path: "/v1/{clientId}/tokens/erc20/:ownerAddress",
201+
parameters: [
202+
{
203+
name: "ownerAddress",
204+
in: "path",
205+
required: true,
206+
type: "string",
207+
},
208+
{
209+
name: "clientId",
210+
in: "path",
211+
required: false,
212+
type: "string",
213+
},
214+
],
215+
title: "Tokens",
216+
description: "Retrieve tokens balances for a given owner address",
217+
};
218+
219+
return {
220+
transactionsMetadata,
221+
eventsMetadata,
222+
tokensMetadata,
223+
};
224+
}

0 commit comments

Comments
 (0)