Skip to content

Commit 7141a6a

Browse files
tarrencevtarrencev
committed
Enhance calldata render
1 parent dbbe035 commit 7141a6a

File tree

3 files changed

+389
-14
lines changed

3 files changed

+389
-14
lines changed

‎packages/keychain/src/components/transaction/CallCard.stories.tsx

+197
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,197 @@
1+
import type { Meta, StoryObj } from "@storybook/react";
2+
import { CallCard } from "./CallCard";
3+
import { constants } from "starknet";
4+
import Controller from "@/utils/controller";
5+
6+
const meta = {
7+
component: CallCard,
8+
title: "Transaction/CallCard",
9+
parameters: {
10+
layout: "centered",
11+
connection: {
12+
controller: {
13+
chainId: () => constants.StarknetChainId.SN_SEPOLIA as string,
14+
} as Partial<Controller>,
15+
},
16+
},
17+
argTypes: {
18+
address: { control: "text" },
19+
title: { control: "text" },
20+
call: { control: "object" },
21+
},
22+
} satisfies Meta<typeof CallCard>;
23+
24+
export default meta;
25+
26+
type Story = StoryObj<typeof meta>;
27+
28+
export const SimpleCalldata: Story = {
29+
args: {
30+
address:
31+
"0x049d36570d4e46f48e99674bd3fcc84644ddd6b96f7c741b1562b82f9e004dc7",
32+
title: "Transfer",
33+
call: {
34+
contractAddress:
35+
"0x049d36570d4e46f48e99674bd3fcc84644ddd6b96f7c741b1562b82f9e004dc7",
36+
entrypoint: "transfer",
37+
calldata: [
38+
"0x01a4c2b0de3539887fe46b8886c0a5cff850fc7930e33681e253ca8b356d5ff9",
39+
"1000000000000000000",
40+
"0",
41+
],
42+
},
43+
},
44+
};
45+
46+
export const ObjectCalldata: Story = {
47+
args: {
48+
address:
49+
"0x049d36570d4e46f48e99674bd3fcc84644ddd6b96f7c741b1562b82f9e004dc7",
50+
title: "Swap",
51+
call: {
52+
contractAddress:
53+
"0x049d36570d4e46f48e99674bd3fcc84644ddd6b96f7c741b1562b82f9e004dc7",
54+
entrypoint: "swap_exact_tokens_for_tokens",
55+
calldata: {
56+
amountIn: "1000000000000000000",
57+
amountOutMin: "950000000000000000",
58+
path: [
59+
"0x049d36570d4e46f48e99674bd3fcc84644ddd6b96f7c741b1562b82f9e004dc7",
60+
"0x01a4c2b0de3539887fe46b8886c0a5cff850fc7930e33681e253ca8b356d5ff9",
61+
],
62+
to: "0x01a4c2b0de3539887fe46b8886c0a5cff850fc7930e33681e253ca8b356d5ff9",
63+
deadline: "1714503698",
64+
},
65+
},
66+
},
67+
};
68+
69+
export const ComplexTypes: Story = {
70+
args: {
71+
address:
72+
"0x049d36570d4e46f48e99674bd3fcc84644ddd6b96f7c741b1562b82f9e004dc7",
73+
title: "Complex Transaction",
74+
call: {
75+
contractAddress:
76+
"0x049d36570d4e46f48e99674bd3fcc84644ddd6b96f7c741b1562b82f9e004dc7",
77+
entrypoint: "execute_batch",
78+
calldata: {
79+
transactions: [
80+
{
81+
to: "0x049d36570d4e46f48e99674bd3fcc84644ddd6b96f7c741b1562b82f9e004dc7",
82+
selector: "transfer",
83+
data: [
84+
"0x01a4c2b0de3539887fe46b8886c0a5cff850fc7930e33681e253ca8b356d5ff9",
85+
"1000000000000000000",
86+
"0",
87+
],
88+
},
89+
{
90+
to: "0x01a4c2b0de3539887fe46b8886c0a5cff850fc7930e33681e253ca8b356d5ff9",
91+
selector: "approve",
92+
data: [
93+
"0x049d36570d4e46f48e99674bd3fcc84644ddd6b96f7c741b1562b82f9e004dc7",
94+
"2000000000000000000",
95+
],
96+
},
97+
],
98+
nonce: "123456",
99+
},
100+
},
101+
},
102+
};
103+
104+
export const WithUint256: Story = {
105+
args: {
106+
address:
107+
"0x049d36570d4e46f48e99674bd3fcc84644ddd6b96f7c741b1562b82f9e004dc7",
108+
title: "With Uint256",
109+
call: {
110+
contractAddress:
111+
"0x049d36570d4e46f48e99674bd3fcc84644ddd6b96f7c741b1562b82f9e004dc7",
112+
entrypoint: "deposit",
113+
calldata: {
114+
amount: { low: "1000000000000000000", high: "0" },
115+
recipient:
116+
"0x01a4c2b0de3539887fe46b8886c0a5cff850fc7930e33681e253ca8b356d5ff9",
117+
},
118+
},
119+
},
120+
};
121+
122+
export const WithEnum: Story = {
123+
args: {
124+
address:
125+
"0x049d36570d4e46f48e99674bd3fcc84644ddd6b96f7c741b1562b82f9e004dc7",
126+
title: "With Enum",
127+
call: {
128+
contractAddress:
129+
"0x049d36570d4e46f48e99674bd3fcc84644ddd6b96f7c741b1562b82f9e004dc7",
130+
entrypoint: "set_status",
131+
calldata: {
132+
status: { variant: "Active", value: true },
133+
user: "0x01a4c2b0de3539887fe46b8886c0a5cff850fc7930e33681e253ca8b356d5ff9",
134+
},
135+
},
136+
},
137+
};
138+
139+
export const NestedObjects: Story = {
140+
args: {
141+
address:
142+
"0x049d36570d4e46f48e99674bd3fcc84644ddd6b96f7c741b1562b82f9e004dc7",
143+
title: "Nested Objects",
144+
call: {
145+
contractAddress:
146+
"0x049d36570d4e46f48e99674bd3fcc84644ddd6b96f7c741b1562b82f9e004dc7",
147+
entrypoint: "create_order",
148+
calldata: {
149+
order: {
150+
id: "12345",
151+
details: {
152+
price: { low: "1000000000000000000", high: "0" },
153+
quantity: "5",
154+
metadata: {
155+
name: "Product XYZ",
156+
description: "A high-quality product",
157+
tags: ["premium", "limited", "exclusive"],
158+
},
159+
},
160+
buyer:
161+
"0x01a4c2b0de3539887fe46b8886c0a5cff850fc7930e33681e253ca8b356d5ff9",
162+
seller:
163+
"0x049d36570d4e46f48e99674bd3fcc84644ddd6b96f7c741b1562b82f9e004dc7",
164+
status: { variant: "Pending", value: null },
165+
},
166+
timestamp: "1714503698",
167+
},
168+
},
169+
},
170+
};
171+
172+
export const LongArrays: Story = {
173+
args: {
174+
address:
175+
"0x049d36570d4e46f48e99674bd3fcc84644ddd6b96f7c741b1562b82f9e004dc7",
176+
title: "Long Arrays",
177+
call: {
178+
contractAddress:
179+
"0x049d36570d4e46f48e99674bd3fcc84644ddd6b96f7c741b1562b82f9e004dc7",
180+
entrypoint: "batch_transfer",
181+
calldata: [
182+
"10", // Number of recipients
183+
"0x01a4c2b0de3539887fe46b8886c0a5cff850fc7930e33681e253ca8b356d5ff9",
184+
"0x02a4c2b0de3539887fe46b8886c0a5cff850fc7930e33681e253ca8b356d5ff9",
185+
"0x03a4c2b0de3539887fe46b8886c0a5cff850fc7930e33681e253ca8b356d5ff9",
186+
"0x04a4c2b0de3539887fe46b8886c0a5cff850fc7930e33681e253ca8b356d5ff9",
187+
"0x05a4c2b0de3539887fe46b8886c0a5cff850fc7930e33681e253ca8b356d5ff9",
188+
"0x06a4c2b0de3539887fe46b8886c0a5cff850fc7930e33681e253ca8b356d5ff9",
189+
"0x07a4c2b0de3539887fe46b8886c0a5cff850fc7930e33681e253ca8b356d5ff9",
190+
"0x08a4c2b0de3539887fe46b8886c0a5cff850fc7930e33681e253ca8b356d5ff9",
191+
"0x09a4c2b0de3539887fe46b8886c0a5cff850fc7930e33681e253ca8b356d5ff9",
192+
"0x10a4c2b0de3539887fe46b8886c0a5cff850fc7930e33681e253ca8b356d5ff9",
193+
"1000000000000000000", // Amount for each recipient
194+
],
195+
},
196+
},
197+
};

0 commit comments

Comments
 (0)