-
Notifications
You must be signed in to change notification settings - Fork 797
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
improve debug struct UI #726
Conversation
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
looks much better!
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Small changes but big visual improvement! 🙌🔥
Left a couple of nitpick comments to save some future sleep problems haha. Feel free to ignore 👌
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Tysm !! Love this, it looks soo much better now!!
Agree with all the review comments from Pablo 🙌
As Shiv mentioned, maybe it's a good idea to have a label on the value input too.
Maybe something like this :
Its just so that people can easily review while sending final transaction and don't loose what that last input is
We can update :
scaffold-eth-2/packages/nextjs/app/debug/_components/contract/WriteOnlyFunctionForm.tsx
Line 102 in a5eedbd
{abiFunction.stateMutability === "payable" ? ( |
With this :
{abiFunction.stateMutability === "payable" ? (
<div className="flex flex-col gap-1 w-full">
<div className="flex items-center">
<span className="text-xs font-medium mr-2 leading-none">value to send</span>
<span className="block text-xs font-extralight leading-none">wei</span>
</div>
<IntegerInput
value={txValue}
onChange={updatedTxValue => {
setDisplayedTxResult(undefined);
setTxValue(updatedTxValue);
}}
placeholder="value (wei)"
/>
</div>
) : null}
Thanks all for the review! Appreciate the nitpicking @Pabl0cks Since we are at it, fixed a few little things:
|
It just get better and better, love it !! Really sorry, just pushed a very small nitpick 7c766d0, doesn't change any thing on light just affects the badge color in dark mode :
Didn't change + / - btn color to But incase if we don't like we can always update / iterate in future PR, Tysm !! |
Good job! We got a GREAT debug struct UI now 🚀🚀 |
* Add Optimism Sepolia config (#711) * Use arbitrumSepolia instead of Goerli (#716) * up rainbowkit version to 1.3.5 (#719) * removing lock file * use next-themes to handle theme and update usehooks-ts (#707) * Feat: Better complex struct inputs (#702) * improve debug struct UI (#726) * add basic example to show connected address (#721) --------- Co-authored-by: winnsterx <46658657+winnsterx@users.noreply.github.com> Co-authored-by: Shiv Bhonde | shivbhonde.eth <shivbhonde04@gmail.com> Co-authored-by: Carlos Sánchez <oceanrdn@gmail.com>
First iteration on #725
1. Fix padding
This odd padding won't let me sleep haha (also making sure the inner structs padding looks good too)
![304829304-0d18fc28-b681-48f1-bf40-1f7644d62207](https://private-user-images.githubusercontent.com/2486142/304837800-f92354ea-417a-491b-8b77-d1a4cb001a96.png?jwt=eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJpc3MiOiJnaXRodWIuY29tIiwiYXVkIjoicmF3LmdpdGh1YnVzZXJjb250ZW50LmNvbSIsImtleSI6ImtleTUiLCJleHAiOjE3MjUzNDUxODAsIm5iZiI6MTcyNTM0NDg4MCwicGF0aCI6Ii8yNDg2MTQyLzMwNDgzNzgwMC1mOTIzNTRlYS00MTdhLTQ5MWItOGI3Ny1kMWE0Y2IwMDFhOTYucG5nP1gtQW16LUFsZ29yaXRobT1BV1M0LUhNQUMtU0hBMjU2JlgtQW16LUNyZWRlbnRpYWw9QUtJQVZDT0RZTFNBNTNQUUs0WkElMkYyMDI0MDkwMyUyRnVzLWVhc3QtMSUyRnMzJTJGYXdzNF9yZXF1ZXN0JlgtQW16LURhdGU9MjAyNDA5MDNUMDYyODAwWiZYLUFtei1FeHBpcmVzPTMwMCZYLUFtei1TaWduYXR1cmU9ZmNmNjcyMTU4ZmNhNjdiODA1NTUxNWQyN2QwZjYyMTI5YTU5ZjNhM2Q1MjM0OTkyYjQ1OTMwNDhlYmI3YjBjOCZYLUFtei1TaWduZWRIZWFkZXJzPWhvc3QmYWN0b3JfaWQ9MCZrZXlfaWQ9MCZyZXBvX2lkPTAifQ.NP4TUhoO2Vqwhof9GXZWEo6uLF0Ii-18OYwJKuSUOh4)
Now:
![image](https://private-user-images.githubusercontent.com/2486142/304837992-4569fd88-8047-447b-8558-53442d47e349.png?jwt=eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJpc3MiOiJnaXRodWIuY29tIiwiYXVkIjoicmF3LmdpdGh1YnVzZXJjb250ZW50LmNvbSIsImtleSI6ImtleTUiLCJleHAiOjE3MjUzNDUxODAsIm5iZiI6MTcyNTM0NDg4MCwicGF0aCI6Ii8yNDg2MTQyLzMwNDgzNzk5Mi00NTY5ZmQ4OC04MDQ3LTQ0N2ItODU1OC01MzQ0MmQ0N2UzNDkucG5nP1gtQW16LUFsZ29yaXRobT1BV1M0LUhNQUMtU0hBMjU2JlgtQW16LUNyZWRlbnRpYWw9QUtJQVZDT0RZTFNBNTNQUUs0WkElMkYyMDI0MDkwMyUyRnVzLWVhc3QtMSUyRnMzJTJGYXdzNF9yZXF1ZXN0JlgtQW16LURhdGU9MjAyNDA5MDNUMDYyODAwWiZYLUFtei1FeHBpcmVzPTMwMCZYLUFtei1TaWduYXR1cmU9NTQwMWZkN2IxMjliNDEwNGRkMmIzYTZlMWJkNjRlYTdjMjkwNmU0NWIwYmFlZTc3YzUyMGRiZWM5ZTVlODc4YSZYLUFtei1TaWduZWRIZWFkZXJzPWhvc3QmYWN0b3JfaWQ9MCZrZXlfaWQ9MCZyZXBvX2lkPTAifQ._zBMjxy6v3Pu4sRFAkVFrKaGw7HlvCwx8Kx1zb05-UE)
As Shiv mentioned, maybe it's a good idea to have a label on the value input too.
Fix accordion style
In the current version, the text felt a bit "lost"
![304828797-4416cf52-a63f-4030-b983-49025fac8f5e](https://private-user-images.githubusercontent.com/2486142/304837333-2f3ca58b-4141-4a74-99cc-5f3da5b108f9.png?jwt=eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJpc3MiOiJnaXRodWIuY29tIiwiYXVkIjoicmF3LmdpdGh1YnVzZXJjb250ZW50LmNvbSIsImtleSI6ImtleTUiLCJleHAiOjE3MjUzNDUxODAsIm5iZiI6MTcyNTM0NDg4MCwicGF0aCI6Ii8yNDg2MTQyLzMwNDgzNzMzMy0yZjNjYTU4Yi00MTQxLTRhNzQtOTljYy01ZjNkYTViMTA4ZjkucG5nP1gtQW16LUFsZ29yaXRobT1BV1M0LUhNQUMtU0hBMjU2JlgtQW16LUNyZWRlbnRpYWw9QUtJQVZDT0RZTFNBNTNQUUs0WkElMkYyMDI0MDkwMyUyRnVzLWVhc3QtMSUyRnMzJTJGYXdzNF9yZXF1ZXN0JlgtQW16LURhdGU9MjAyNDA5MDNUMDYyODAwWiZYLUFtei1FeHBpcmVzPTMwMCZYLUFtei1TaWduYXR1cmU9ZDYwYTBmZmNkN2Q0YWY4NWNmZTU2NTk3MzJiOTI0ZjQyYTRlYjI4N2EzZjU3ZWZkMDMyMjk3YTk2YzAzMjllMSZYLUFtei1TaWduZWRIZWFkZXJzPWhvc3QmYWN0b3JfaWQ9MCZrZXlfaWQ9MCZyZXBvX2lkPTAifQ.EP6gb3PWS8t-EFjrFjEb6mbEfi8qKcYFvpbmP3-k6Es)
Made a couple of tweaks:
We can add more stuff here, or keep iterating in another PR.