Skip to content

Commit 502c729

Browse files
tarrencevtarrencev
committed
Enhance calldata render
1 parent dbbe035 commit 502c729

File tree

3 files changed

+454
-19
lines changed

3 files changed

+454
-19
lines changed

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

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

0 commit comments

Comments
 (0)