updating @ethui/form

ethui · May 7, 2024 · 8e9071b · 8e9071b
1 parent 60ded08
commit 8e9071b
Show file tree

Hide file tree

Showing 5 changed files with 93 additions and 480 deletions.
diff --git a/bun.lockb b/bun.lockb
diff --git a/package.json b/package.json
@@ -9,7 +9,8 @@
     "lint": "next lint"
   },
   "dependencies": {
-    "@ethui/form": "0.0.6",
+    "@ethui/form": "file:../app/packages/form",
+    "@fontsource/roboto-mono": "^5.0.18",
     "@headlessui/react": "^1.7.17",
     "@heroicons/react": "^2.0.18",
     "@mui/icons-material": "^5.15.15",

diff --git a/src/app/globals.css b/src/app/globals.css
@@ -1,6 +1,7 @@
 @tailwind base;
 @tailwind components;
 @tailwind utilities;
+@import "@fontsource/roboto-mono";
 
 body {
 }
diff --git a/src/app/packages/form/page.tsx b/src/app/packages/form/page.tsx
@@ -1,7 +1,7 @@
 "use client";
 
 import Image from "next/image";
-import { AbiForm } from "@ethui/form";
+import { AbiForm, type AbiFunction, Debug } from "@ethui/form";
 import {
   Box,
   Container,
@@ -11,11 +11,36 @@ import {
   TextField,
   Typography,
 } from "@mui/material";
-import { useState } from "react";
+import { useCallback, useState } from "react";
 
 function App() {
   const [item, setItem] = useState<string>(
-    "function transfer(uint256[] amount)",
+    "function transfer(string[] amount)",
+  );
+
+  const [parsedItem, setParsedItem] = useState<AbiFunction | undefined>();
+  const [value, setValue] = useState<bigint | undefined>();
+  const [data, setData] = useState<`0x${string}` | undefined>();
+  const [args, setArgs] = useState<any[] | undefined>();
+
+  const onChange = useCallback(
+    ({
+      item,
+      value,
+      data,
+      args,
+    }: {
+      item?: AbiFunction;
+      value?: bigint;
+      data?: `0x${string}`;
+      args?: any[];
+    }) => {
+      setParsedItem(item);
+      setArgs(args);
+      setData(data);
+      setValue(value);
+    },
+    [],
   );
 
   return (
@@ -52,7 +77,34 @@ function App() {
                 onChange={(e) => setItem(e.target.value)}
               />
               <Box sx={{ mt: 2 }}>
-                <AbiForm abiItem={item} debug={false} preview={true} />
+                <Grid container>
+                  <Grid item xs={12} md={4}>
+                    <AbiForm abiItem={item} debug={false} onChange={onChange} />
+                  </Grid>
+                  <Grid item xs={12} md={8}>
+                    <Paper sx={{ width: "100%", height: "100%" }}>
+                      <Stack spacing={1} sx={{ p: 2 }}>
+                        {parsedItem &&
+                          args &&
+                          parsedItem.inputs.map((input, i) => (
+                            <div key={i}>
+                              <Typography fontWeight="bold">
+                                {input.name || i.toString()}:
+                              </Typography>
+                              <Debug value={args[i]} />
+                            </div>
+                          ))}
+                        <Typography fontWeight="bold">calldata:</Typography>
+                        <Typography
+                          fontFamily="monospace"
+                          sx={{ overflowWrap: "break-word" }}
+                        >
+                          {data}
+                        </Typography>
+                      </Stack>
+                    </Paper>
+                  </Grid>
+                </Grid>
               </Box>
             </Paper>
           </Stack>