8506673409

Committed 01 Apr 2024 10:00AM UTC coverage: 95.567% (+0.06%) from 95.504%

Build # 8506673409

Build Type

Pull #140

github

Committed by

nevendyulgerov

Commit Message

chore(apps/web): Make the transports config more explicit

Pull Request Pull Request #140: #130 Upgrade rainbowkit, wagmi, viem, and @sunodo/wagmi-plugin-hardhat-deploy packages

Run Details

500 of 601 branches covered (83.19%)

Branch coverage included in aggregate %.

215 of 225 new or added lines in 14 files covered. (95.56%)

3 existing lines in 2 files now uncovered.

6441 of 6662 relevant lines covered (96.68%)

20.28 hits per line

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

97.81

/packages/ui/src/RawInputForm.tsx

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

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

export const RawInputForm: FC<RawInputFormProps> = (props) => {
    const { applications, isLoadingApplications, onSearchApplications } = props;
    const addresses = useMemo(
        () => applications.map(getAddress),
        [applications],
    );
    const form = useForm({
        validateInputOnBlur: true,
        initialValues: {
            application: "",
            rawInput: "0x",
        },
        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;

    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 &&
                    address !== zeroAddress &&
                    !addresses.includes(address) && (
                        <Alert
                            variant="light"
                            color="yellow"
                            icon={<TbAlertCircle />}
                        >
                            This is an undeployed application.
                        </Alert>
                    )}

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

cartesi / rollups-explorer / 8506673409

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