10559884974

Committed 26 Aug 2024 12:37PM CUT coverage: 93.391% (-0.4%) from 93.766%

Build # 10559884974

Build Type

Pull #232

github

Committed by

nevendyulgerov

Commit Message

fix(apps/web): Temporary disable swc minification

Pull Request Pull Request #232: #229 Add import and export for specifications

Run Details

1210 of 1432 branches covered (84.5%)

Branch coverage included in aggregate %.

487 of 570 new or added lines in 8 files covered. (85.44%)

50 existing lines in 10 files now uncovered.

12864 of 13638 relevant lines covered (94.32%)

45.58 hits per line

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

98.24

/packages/ui/src/RawInputForm.tsx

import {
    useSimulateInputBoxAddInput,
    useWriteInputBoxAddInput,
} from "@cartesi/rollups-wagmi";
import {
    Alert,
    Autocomplete,
    Button,
    Collapse,
    Group,
    Loader,
    SegmentedControl,
    Stack,
    Textarea,
} from "@mantine/core";
import { useForm } from "@mantine/form";
import { FC, useCallback, useEffect, useState } from "react";
import { TbAlertCircle, TbCheck } from "react-icons/tb";
import {
    BaseError,
    getAddress,
    Hex,
    isAddress,
    isHex,
    stringToHex,
    zeroAddress,
} from "viem";
import { useWaitForTransactionReceipt } from "wagmi";
import { TransactionProgress } from "./TransactionProgress";
import useUndeployedApplication from "./hooks/useUndeployedApplication";

type Format = "hex" | "utf";

export interface RawInputFormProps {
    applications: string[];
    isLoadingApplications: boolean;
    onSearchApplications: (applicationId: string) => void;
}

export const RawInputForm: FC<RawInputFormProps> = (props) => {
    const { applications, isLoadingApplications, onSearchApplications } = props;
    const form = useForm({
        validateInputOnBlur: true,
        initialValues: {
            application: "",
            rawInput: "0x",
            stringInput: "",
        },
        validate: {
            application: (value) =>
                value !== "" && isAddress(value) ? null : "Invalid application",
            rawInput: (value) => (isHex(value) ? null : "Invalid hex string"),
        },
        transformValues: (values) => ({
            address: isAddress(values.application)
                ? getAddress(values.application)
                : zeroAddress,
            rawInput: values.rawInput as Hex,
        }),
    });
    const { address, rawInput } = form.getTransformedValues();
    const prepare = useSimulateInputBoxAddInput({
        args: [address, rawInput],
        query: {
            enabled: form.isValid(),
        },
    });

    const execute = useWriteInputBoxAddInput();
    const wait = useWaitForTransactionReceipt({
        hash: execute.data,
    });
    const loading = execute.isPending || wait.isLoading;
    const canSubmit = form.isValid() && prepare.error === null;
    const isUndeployedApp = useUndeployedApplication(address, applications);
    const [format, setFormat] = useState<Format>("hex");

    const onChangeFormat = useCallback((format: string | null) => {
        setFormat(format as Format);
    }, []);

    useEffect(() => {
        if (wait.isSuccess) {
            form.reset();
            onSearchApplications("");
        }
        // eslint-disable-next-line react-hooks/exhaustive-deps
    }, [wait.isSuccess, onSearchApplications]);

    return (
        <form data-testid="raw-input-form">
            <Stack>
                <Autocomplete
                    label="Application"
                    description="The application smart contract address"
                    placeholder="0x"
                    data={applications}
                    withAsterisk
                    rightSection={
                        (prepare.isLoading || isLoadingApplications) && (
                            <Loader size="xs" />
                        )
                    }
                    {...form.getInputProps("application")}
                    error={
                        form.errors.application ||
                        (prepare.error as BaseError)?.shortMessage
                    }
                    onChange={(nextValue) => {
                        form.setFieldValue("application", nextValue);
                        onSearchApplications(nextValue);
                    }}
                />

                {!form.errors.application && isUndeployedApp && (
                    <Alert
                        variant="light"
                        color="yellow"
                        icon={<TbAlertCircle />}
                    >
                        This is an undeployed application.
                    </Alert>
                )}

                <SegmentedControl
                    value={format}
                    onChange={onChangeFormat}
                    data={[
                        { label: "Hex", value: "hex" },
                        { label: "String to Hex", value: "utf" },
                    ]}
                />

                {format === "hex" ? (
                    <Textarea
                        label="Raw input"
                        description="Raw input for the application"
                        withAsterisk
                        {...form.getInputProps("rawInput")}
                    />
                ) : (
                    <>
                        <Textarea
                            label="String input"
                            description="String input for the application"
                            mb={16}
                            {...form.getInputProps("stringInput")}
                            onChange={(event) => {
                                const nextValue = event.target.value;
                                form.setFieldValue("stringInput", nextValue);

                                form.setFieldValue(
                                    "rawInput",
                                    stringToHex(nextValue),
                                );
                            }}
                        />

                        <Textarea
                            label="Hex value"
                            description="Encoded hex value for the application"
                            readOnly
                            {...form.getInputProps("rawInput")}
                        />
                    </>
                )}

                <Collapse
                    in={
                        execute.isPending ||
                        wait.isLoading ||
                        execute.isSuccess ||
                        execute.isError
                    }
                >
                    <TransactionProgress
                        prepare={prepare}
                        execute={execute}
                        wait={wait}
                        confirmationMessage="Raw input sent successfully!"
                        defaultErrorMessage={execute.error?.message}
                    />
                </Collapse>

                <Group justify="right">
                    <Button
                        variant="filled"
                        disabled={!canSubmit}
                        leftSection={<TbCheck />}
                        loading={loading}
                        onClick={() =>
                            execute.writeContract(prepare.data!.request)
                        }
                    >
                        Send
                    </Button>
                </Group>
            </Stack>
        </form>
    );
};

1	import {	1✔
2	useSimulateInputBoxAddInput,	1✔
3	useWriteInputBoxAddInput,	1✔
4	} from "@cartesi/rollups-wagmi";	1✔
5	import {	1✔
6	Alert,	1✔
7	Autocomplete,	1✔
8	Button,	1✔
9	Collapse,	1✔
10	Group,	1✔
11	Loader,	1✔
12	SegmentedControl,	1✔
13	Stack,	1✔
14	Textarea,	1✔
15	} from "@mantine/core";	1✔
16	import { useForm } from "@mantine/form";	1✔
17	import { FC, useCallback, useEffect, useState } from "react";	1✔
18	import { TbAlertCircle, TbCheck } from "react-icons/tb";	1✔
19	import {	1✔
20	BaseError,	1✔
21	getAddress,	1✔
22	Hex,	1✔
23	isAddress,	1✔
24	isHex,	1✔
25	stringToHex,	1✔
26	zeroAddress,	1✔
27	} from "viem";	1✔
28	import { useWaitForTransactionReceipt } from "wagmi";	1✔
29	import { TransactionProgress } from "./TransactionProgress";	1✔
30	import useUndeployedApplication from "./hooks/useUndeployedApplication";	1✔
31		1✔
32	type Format = "hex" \| "utf";	1✔
33		1✔
34	export interface RawInputFormProps {	1✔
35	applications: string[];	1✔
36	isLoadingApplications: boolean;	1✔
37	onSearchApplications: (applicationId: string) => void;	1✔
38	}	1✔
39		1✔
40	export const RawInputForm: FC<RawInputFormProps> = (props) => {	1✔
41	const { applications, isLoadingApplications, onSearchApplications } = props;	50✔
42	const form = useForm({	50✔
43	validateInputOnBlur: true,	50✔
44	initialValues: {	50✔
45	application: "",	50✔
46	rawInput: "0x",	50✔
47	stringInput: "",	50✔
48	},	50✔
49	validate: {	50✔
50	application: (value) =>	50✔
51	value !== "" && isAddress(value) ? null : "Invalid application",	101✔
52	rawInput: (value) => (isHex(value) ? null : "Invalid hex string"),	50✔
53	},	50✔
54	transformValues: (values) => ({	50✔
55	address: isAddress(values.application)	49✔
56	? getAddress(values.application)	7✔
57	: zeroAddress,	42✔
58	rawInput: values.rawInput as Hex,	49✔
59	}),	49✔
60	});	50✔
61	const { address, rawInput } = form.getTransformedValues();	50✔
62	const prepare = useSimulateInputBoxAddInput({	50✔
63	args: [address, rawInput],	50✔
64	query: {	50✔
65	enabled: form.isValid(),	50✔
66	},	50✔
67	});	50✔
68		50✔
69	const execute = useWriteInputBoxAddInput();	50✔
70	const wait = useWaitForTransactionReceipt({	50✔
71	hash: execute.data,	50✔
72	});	50✔
73	const loading = execute.isPending \|\| wait.isLoading;	50✔
74	const canSubmit = form.isValid() && prepare.error === null;	50✔
75	const isUndeployedApp = useUndeployedApplication(address, applications);	50✔
76	const [format, setFormat] = useState<Format>("hex");	50✔
77		50✔
78	const onChangeFormat = useCallback((format: string \| null) => {	50✔
79	setFormat(format as Format);	2✔
80	}, []);	50✔
81		50✔
82	useEffect(() => {	50✔
83	if (wait.isSuccess) {	21✔
84	form.reset();	10✔
85	onSearchApplications("");	10✔
86	}	10✔
87	// eslint-disable-next-line react-hooks/exhaustive-deps	21✔
88	}, [wait.isSuccess, onSearchApplications]);	50✔
89		50✔
90	return (	50✔
91	<form data-testid="raw-input-form">	50✔
92	<Stack>	50✔
93	<Autocomplete	50✔
94	label="Application"	50✔
95	description="The application smart contract address"	50✔
96	placeholder="0x"	50✔
97	data={applications}	50✔
98	withAsterisk	50✔
99	rightSection={	50✔
100	(prepare.isLoading \|\| isLoadingApplications) && (	50!
UNCOV 101	<Loader size="xs" />	×
102	)	50✔
103	}	50✔
104	{...form.getInputProps("application")}	50✔
105	error={	50✔
106	form.errors.application \|\|	50✔
107	(prepare.error as BaseError)?.shortMessage	49!
108	}	50✔
109	onChange={(nextValue) => {	50✔
110	form.setFieldValue("application", nextValue);	7✔
111	onSearchApplications(nextValue);	7✔
112	}}	7✔
113	/>	50✔
114		50✔
115	{!form.errors.application && isUndeployedApp && (	50✔
116	<Alert	1✔
117	variant="light"	1✔
118	color="yellow"	1✔
119	icon={<TbAlertCircle />}	1✔
120	>	1✔
121	This is an undeployed application.	1✔
122	</Alert>	1✔
123	)}	50✔
124		50✔
125	<SegmentedControl	50✔
126	value={format}	50✔
127	onChange={onChangeFormat}	50✔
128	data={[	50✔
129	{ label: "Hex", value: "hex" },	50✔
130	{ label: "String to Hex", value: "utf" },	50✔
131	]}	50✔
132	/>	50✔
133		50✔
134	{format === "hex" ? (	50✔
135	<Textarea	47✔
136	label="Raw input"	47✔
137	description="Raw input for the application"	47✔
138	withAsterisk	47✔
139	{...form.getInputProps("rawInput")}	47✔
140	/>	47✔
141	) : (	3✔
142	<>	3✔
143	<Textarea	3✔
144	label="String input"	3✔
145	description="String input for the application"	3✔
146	mb={16}	3✔
147	{...form.getInputProps("stringInput")}	3✔
148	onChange={(event) => {	3✔
149	const nextValue = event.target.value;	1✔
150	form.setFieldValue("stringInput", nextValue);	1✔
151		1✔
152	form.setFieldValue(	1✔
153	"rawInput",	1✔
154	stringToHex(nextValue),	1✔
155	);	1✔
156	}}	1✔
157	/>	3✔
158		3✔
159	<Textarea	3✔
160	label="Hex value"	3✔
161	description="Encoded hex value for the application"	3✔
162	readOnly	3✔
163	{...form.getInputProps("rawInput")}	3✔
164	/>	3✔
165	</>	3✔
166	)}	50✔
167		50✔
168	<Collapse	50✔
169	in={	50✔
170	execute.isPending \|\|	50✔
171	wait.isLoading \|\|	50✔
172	execute.isSuccess \|\|	50✔
173	execute.isError	50✔
174	}	50✔
175	>	50✔
176	<TransactionProgress	50✔
177	prepare={prepare}	50✔
178	execute={execute}	50✔
179	wait={wait}	50✔
180	confirmationMessage="Raw input sent successfully!"	50✔
181	defaultErrorMessage={execute.error?.message}	50!
182	/>	50✔
183	</Collapse>	50✔
184		50✔
185	<Group justify="right">	50✔
186	<Button	50✔
187	variant="filled"	50✔
188	disabled={!canSubmit}	50✔
189	leftSection={<TbCheck />}	50✔
190	loading={loading}	50✔
191	onClick={() =>	50✔
192	execute.writeContract(prepare.data!.request)	1✔
193	}	50✔
194	>	50✔
195	Send	50✔
196	</Button>	50✔
197	</Group>	50✔
198	</Stack>	50✔
199	</form>	50✔
200	);	50✔
201	};	50✔

cartesi / rollups-explorer / 10559884974

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