Skip to content

improve debug struct UI #726

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.

Sign up for GitHub

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

Merged
technophile-04 merged 9 commits into from
Feb 15, 2024
Merged

improve debug struct UI #726

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
9 commits
Select commit Hold shift + click to select a range
33e956b
Fix padding on fields in the debug page
carletex Feb 14, 2024
756883d
Style the accordions
carletex Feb 14, 2024
20fdca9
Better spacing on inputs / labels.
carletex Feb 15, 2024
5cc91e8
Better formatting on Tuple index
carletex Feb 15, 2024
9c9e56e
Better color for struct titles
carletex Feb 15, 2024
eddae5d
Show label on value wei
carletex Feb 15, 2024
8c22695
Align padding with inputs
carletex Feb 15, 2024
091bc67
+ / - Button color
carletex Feb 15, 2024
7c766d0
nitpick: use bg-base-300 for badge (better contrast in darkmode)
technophile-04 Feb 15, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
4 changes: 2 additions & 2 deletions packages/nextjs/app/debug/_components/contract/ContractInput.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -73,8 +73,8 @@ export const ContractInput = ({ setForm, form, stateObjectKey, paramType }: Cont
};

return (
<div className="flex flex-col gap-1 w-full pl-2">
<div className="flex items-center">
<div className="flex flex-col gap-1.5 w-full">
<div className="flex items-center ml-2">
{paramType.name && <span className="text-xs font-medium mr-2 leading-none">{paramType.name}</span>}
<span className="block text-xs font-extralight leading-none">{paramType.type}</span>
</div>
Expand Down
6 changes: 3 additions & 3 deletions packages/nextjs/app/debug/_components/contract/Tuple.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -27,12 +27,12 @@ export const Tuple = ({ abiTupleParameter, setParentForm, parentStateObjectKey }

return (
<div>
<div className="collapse collapse-arrow">
<div className="collapse collapse-arrow bg-base-200 pl-4 py-1.5 border-2 border-secondary">
<input type="checkbox" className="min-h-fit peer" />
<div className="collapse-title p-0 min-h-fit peer-checked:mb-2">
<div className="collapse-title p-0 min-h-fit peer-checked:mb-2 text-primary-content/50">
<p className="m-0 p-0 text-[1rem]">{abiTupleParameter.internalType}</p>
</div>
<div className="ml-3 flex-col space-y-4 border-secondary/80 border-l-2 pl-2 collapse-content">
<div className="ml-3 flex-col space-y-4 border-secondary/80 border-l-2 pl-4 collapse-content">
{abiTupleParameter?.components?.map((param, index) => {
const key = getFunctionInputKey(abiTupleParameter.name || "tuple", param, index);
return <ContractInput setForm={setForm} form={form} key={key} stateObjectKey={key} paramType={param} />;
Expand Down
14 changes: 7 additions & 7 deletions packages/nextjs/app/debug/_components/contract/TupleArray.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -97,17 +97,17 @@ export const TupleArray = ({ abiTupleParameter, setParentForm, parentStateObject

return (
<div>
<div className="collapse collapse-arrow">
<div className="collapse collapse-arrow bg-base-200 pl-4 py-1.5 border-2 border-secondary">
<input type="checkbox" className="min-h-fit peer" />
<div className="collapse-title p-0 min-h-fit peer-checked:mb-1">
<div className="collapse-title p-0 min-h-fit peer-checked:mb-1 text-primary-content/50">
<p className="m-0 text-[1rem]">{abiTupleParameter.internalType}</p>
</div>
<div className="ml-3 flex-col space-y-2 border-secondary/70 border-l-2 pl-2 collapse-content">
<div className="ml-3 flex-col space-y-2 border-secondary/70 border-l-2 pl-4 collapse-content">
{additionalInputs.map((additionalInput, additionalIndex) => (
<div key={additionalIndex} className="space-y-1">
<p className="m-0 ml-2 text-[0.95rem]">
<span className="badge bg-base-300 badge-sm">
{depth > 1 ? `${additionalIndex}` : `tuple[${additionalIndex}]`}
</p>
</span>
<div className="space-y-4">
{additionalInput.map((param, index) => {
const key = getFunctionInputKey(
Expand All @@ -123,11 +123,11 @@ export const TupleArray = ({ abiTupleParameter, setParentForm, parentStateObject
</div>
))}
<div className="flex space-x-2">
<button className="btn btn-sm" onClick={addInput}>
<button className="btn btn-sm btn-secondary" onClick={addInput}>
+
</button>
{additionalInputs.length > 0 && (
<button className="btn btn-sm" onClick={removeInput}>
<button className="btn btn-sm btn-secondary" onClick={removeInput}>
-
</button>
)}
Expand Down
22 changes: 14 additions & 8 deletions packages/nextjs/app/debug/_components/contract/WriteOnlyFunctionForm.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -100,14 +100,20 @@ export const WriteOnlyFunctionForm = ({
</p>
{inputs}
{abiFunction.stateMutability === "payable" ? (
<IntegerInput
value={txValue}
onChange={updatedTxValue => {
setDisplayedTxResult(undefined);
setTxValue(updatedTxValue);
}}
placeholder="value (wei)"
/>
<div className="flex flex-col gap-1.5 w-full">
<div className="flex items-center ml-2">
<span className="text-xs font-medium mr-2 leading-none">payable value</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}
<div className="flex justify-between gap-2">
{!zeroInputs && (
Expand Down