11826960107

Committed 13 Nov 2024 10:31PM CUT coverage: 85.956% (-0.6%) from 86.605%

Build # 11826960107

Build Type

Pull #256

github

Committed by

nevendyulgerov

Commit Message

test(apps/web): Tweak layout for tuple inputs

Pull Request Pull Request #256: #251 Add ABI encoding for raw input form

Run Details

1368 of 1630 branches covered (83.93%)

Branch coverage included in aggregate %.

793 of 984 new or added lines in 13 files covered. (80.59%)

9465 of 10973 relevant lines covered (86.26%)

47.16 hits per line

Source File
Press 'n' to go to next uncovered line, 'b' for previous

89.92

/packages/ui/src/GenericInputForm/AbiFunctionName.tsx

import { useFormContext } from "./context";
import { Alert, Combobox, Input, InputBase, useCombobox } from "@mantine/core";
import { AbiFunction } from "viem";
import { useCallback } from "react";
import { FunctionSignature } from "./FunctionSignature";
import { TbAlertCircle } from "react-icons/tb";
import { generateInitialValues } from "./utils";
import { AbiInputParam } from "./types";
import { isArray } from "ramda-adjunct";

export const AbiFunctionName = () => {
    const form = useFormContext();
    const { abiMethod, abiFunction, selectedSpecification, specificationMode } =
        form.getTransformedValues();
    const combobox = useCombobox({
        onDropdownClose: () => combobox.resetSelectedOption(),
    });
    const specificationFunctions = (
        (selectedSpecification?.abi as AbiFunction[]) ?? []
    ).filter((item) => item.type === "function");

    const onChangeAbiFunctionName = useCallback(
        (abiFunctionName: string) => {
            combobox.closeDropdown();

            form.setFieldValue("abiFunctionName", abiFunctionName);

            const nextAbiFunction = (
                (selectedSpecification?.abi as AbiFunction[]) ?? []
            ).find((abiFunction) => abiFunction.name === abiFunctionName);

            if (nextAbiFunction) {
                const emptyFunctionParams: AbiInputParam[] = [];
                (nextAbiFunction.inputs as AbiInputParam[]).forEach((input) => {
                    generateInitialValues(input, emptyFunctionParams);
                });

                const prevAbiFunctionParams =
                    form.getInputProps("abiFunctionParams");

                if (isArray(prevAbiFunctionParams.value)) {
                    prevAbiFunctionParams.value.forEach((_, index) => {
                        form.setFieldError(
                            `abiFunctionParams.${index}.value`,
                            null,
                        );
                    });
                }

                form.setFieldValue("abiFunctionParams", emptyFunctionParams);
            }
        },
        [combobox, form, selectedSpecification],
    );

    return (
        <>
            {(abiMethod === "existing" || specificationMode === "json_abi") &&
                selectedSpecification && (
                    <>
                        {specificationFunctions.length > 0 ? (
                            <Combobox
                                store={combobox}
                                onOptionSubmit={onChangeAbiFunctionName}
                            >
                                <Combobox.Target>
                                    <InputBase
                                        component="button"
                                        type="button"
                                        pointer
                                        label="ABI Function"
                                        description="Available ABI functions"
                                        rightSection={<Combobox.Chevron />}
                                        rightSectionPointerEvents="none"
                                        withAsterisk
                                        {...form.getInputProps(
                                            "abiFunctionName",
                                        )}
                                        onClick={() =>
                                            combobox.toggleDropdown()
                                        }
                                    >
                                        {abiFunction ? (
                                            <FunctionSignature
                                                abiFunction={abiFunction}
                                            />
                                        ) : (
                                            <Input.Placeholder>
                                                Select function
                                            </Input.Placeholder>
                                        )}
                                    </InputBase>
                                </Combobox.Target>

                                <Combobox.Dropdown>
                                    <Combobox.Options>
                                        {specificationFunctions.map(
                                            (abiFunction) => {
                                                const params =
                                                    abiFunction.inputs
                                                        .map(
                                                            (input) =>
                                                                `${input.type} ${input.name}`,
                                                        )
                                                        .join(", ");

                                                return (
                                                    <Combobox.Option
                                                        key={`${abiFunction.name}-${params}`}
                                                        value={abiFunction.name}
                                                    >
                                                        <FunctionSignature
                                                            abiFunction={
                                                                abiFunction
                                                            }
                                                        />
                                                    </Combobox.Option>
                                                );
                                            },
                                        )}
                                    </Combobox.Options>
                                </Combobox.Dropdown>
                            </Combobox>
                        ) : (
                            <Alert
                                variant="light"
                                color="blue"
                                icon={<TbAlertCircle />}
                                data-testid="no-functions-alert"
                            >
                                No ABI functions available for this
                                specification.
                            </Alert>
                        )}
                    </>
                )}
        </>
    );
};

1	import { useFormContext } from "./context";	1✔
2	import { Alert, Combobox, Input, InputBase, useCombobox } from "@mantine/core";	1✔
3	import { AbiFunction } from "viem";
4	import { useCallback } from "react";	1✔
5	import { FunctionSignature } from "./FunctionSignature";	1✔
6	import { TbAlertCircle } from "react-icons/tb";	1✔
7	import { generateInitialValues } from "./utils";	1✔
8	import { AbiInputParam } from "./types";
9	import { isArray } from "ramda-adjunct";	1✔
10
11	export const AbiFunctionName = () => {	1✔
12	const form = useFormContext();	65✔
13	const { abiMethod, abiFunction, selectedSpecification, specificationMode } =	65✔
14	form.getTransformedValues();	65✔
15	const combobox = useCombobox({	65✔
16	onDropdownClose: () => combobox.resetSelectedOption(),	65✔
17	});	65✔
18	const specificationFunctions = (	65✔
19	(selectedSpecification?.abi as AbiFunction[]) ?? []	65✔
20	).filter((item) => item.type === "function");	65✔
21
22	const onChangeAbiFunctionName = useCallback(	65✔
23	(abiFunctionName: string) => {	65✔
24	combobox.closeDropdown();	4✔
25
26	form.setFieldValue("abiFunctionName", abiFunctionName);	4✔
27
28	const nextAbiFunction = (	4✔
29	(selectedSpecification?.abi as AbiFunction[]) ?? []	4!
30	).find((abiFunction) => abiFunction.name === abiFunctionName);	4✔
31
32	if (nextAbiFunction) {	4✔
33	const emptyFunctionParams: AbiInputParam[] = [];	4✔
34	(nextAbiFunction.inputs as AbiInputParam[]).forEach((input) => {	4✔
35	generateInitialValues(input, emptyFunctionParams);	8✔
36	});	4✔
37
38	const prevAbiFunctionParams =	4✔
39	form.getInputProps("abiFunctionParams");	4✔
40
41	if (isArray(prevAbiFunctionParams.value)) {	4✔
42	prevAbiFunctionParams.value.forEach((_, index) => {	4✔
NEW 43	form.setFieldError(	×
NEW 44	`abiFunctionParams.${index}.value`,	×
NEW 45	null,	×
NEW 46	);	×
47	});	4✔
48	}	4✔
49
50	form.setFieldValue("abiFunctionParams", emptyFunctionParams);	4✔
51	}	4✔
52	},	4✔
53	[combobox, form, selectedSpecification],	65✔
54	);	65✔
55
56	return (	65✔
57	<>	65✔
58	{(abiMethod === "existing" \|\| specificationMode === "json_abi") &&	65✔
59	selectedSpecification && (	48✔
60	<>	32✔
61	{specificationFunctions.length > 0 ? (	32✔
62	<Combobox	32✔
63	store={combobox}	32✔
64	onOptionSubmit={onChangeAbiFunctionName}	32✔
65	>
66	<Combobox.Target>	32✔
67	<InputBase	32✔
68	component="button"	32✔
69	type="button"	32✔
70	pointer	32✔
71	label="ABI Function"	32✔
72	description="Available ABI functions"	32✔
73	rightSection={<Combobox.Chevron />}	32✔
74	rightSectionPointerEvents="none"	32✔
75	withAsterisk	32✔
76	{...form.getInputProps(	32✔
77	"abiFunctionName",	32✔
78	)}	32✔
79	onClick={() =>	32✔
80	combobox.toggleDropdown()	6✔
81	}
82	>
83	{abiFunction ? (	32✔
84	<FunctionSignature	20✔
85	abiFunction={abiFunction}	20✔
86	/>	20✔
87	) : (
88	<Input.Placeholder>	12✔
89	Select function
90	</Input.Placeholder>	12✔
91	)}
92	</InputBase>	32✔
93	</Combobox.Target>	32✔
94
95	<Combobox.Dropdown>	32✔
96	<Combobox.Options>	32✔
97	{specificationFunctions.map(	32✔
98	(abiFunction) => {	32✔
99	const params =	32✔
100	abiFunction.inputs	32✔
101	.map(	32✔
102	(input) =>	32✔
103	`${input.type} ${input.name}`,	64✔
104	)	32✔
105	.join(", ");	32✔
106
107	return (	32✔
108	<Combobox.Option	32✔
109	key={`${abiFunction.name}-${params}`}	32✔
110	value={abiFunction.name}	32✔
111	>
112	<FunctionSignature	32✔
113	abiFunction={	32✔
114	abiFunction	32✔
115	}
116	/>	32✔
117	</Combobox.Option>	32✔
118	);
119	},	32✔
120	)}	32✔
121	</Combobox.Options>	32✔
122	</Combobox.Dropdown>	32✔
123	</Combobox>	32!
124	) : (
NEW 125	<Alert	×
NEW 126	variant="light"	×
NEW 127	color="blue"	×
NEW 128	icon={<TbAlertCircle />}	×
NEW 129	data-testid="no-functions-alert"	×
NEW 130	>	×
131	No ABI functions available for this
132	specification.
NEW 133	</Alert>	×
134	)}
135	</>	32✔
136	)}
137	</>	65✔
138	);
139	};	65✔

cartesi / rollups-explorer / 11826960107

Source File Press 'n' to go to next uncovered line, 'b' for previous

Source File
Press 'n' to go to next uncovered line, 'b' for previous