9656272020

Committed 25 Jun 2024 04:06AM CUT coverage: 94.098% (+0.001%) from 94.097%

Build # 9656272020

Build Type

Pull #187

github

Committed by

brunomenezes

Commit Message

feat(e2e): Add fixture to intercept graphql calls for rollups graphql api by Operation name.

Trust on nodes running makes the e2e tests brittle. Therefore, any call to a Rollups graphQL API will get a mocked response for better control.

Pull Request Pull Request #187: #183 Add e2e tests for inputs page

Run Details

759 of 893 branches covered (84.99%)

Branch coverage included in aggregate %.

1 of 1 new or added line in 1 file covered. (100.0%)

8408 of 8849 relevant lines covered (95.02%)

55.53 hits per line

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

83.33

/apps/web/src/components/sendTransaction.tsx

"use client";
import {
    DepositFormSuccessData,
    ERC1155DepositForm,
    ERC20DepositForm,
    ERC721DepositForm,
    EtherDepositForm,
    RawInputForm,
} from "@cartesi/rollups-explorer-ui";
import { Select } from "@mantine/core";
import { useDebouncedValue } from "@mantine/hooks";
import { notifications } from "@mantine/notifications";
import { FC, useCallback, useState } from "react";
import { useSearchApplications } from "../hooks/useSearchApplications";
import { useSearchMultiTokens } from "../hooks/useSearchMultiTokens";
import { useSearchTokens } from "../hooks/useSearchTokens";
import { BlockExplorerLink } from "./BlockExplorerLink";

export type DepositType =
    | "ether"
    | "erc20"
    | "erc721"
    | "erc1155"
    | "erc1155Batch"
    | "relay"
    | "input";

interface DepositProps {
    initialDepositType?: DepositType;
}

const DEBOUNCE_TIME = 400 as const;

const SendTransaction: FC<DepositProps> = ({
    initialDepositType = "ether",
}) => {
    const [depositType, setDepositType] =
        useState<DepositType>(initialDepositType);
    const [applicationId, setApplicationId] = useState<string>("");
    const [multiTokenId, setMultiTokenId] = useState<string>("");
    const [tokenId, setTokenId] = useState<string>("");
    const [debouncedApplicationId] = useDebouncedValue(
        applicationId,
        DEBOUNCE_TIME,
    );
    const [debouncedTokenId] = useDebouncedValue(tokenId, DEBOUNCE_TIME);
    const [debouncedMultiTokenId] = useDebouncedValue(
        multiTokenId,
        DEBOUNCE_TIME,
    );
    const { applications, fetching } = useSearchApplications({
        address: debouncedApplicationId,
    });
    const { tokens } = useSearchTokens({
        address: debouncedTokenId,
    });
    const { multiTokens } = useSearchMultiTokens({
        address: debouncedMultiTokenId,
    });

    const onDepositErc721 = useCallback(() => {
        notifications.show({
            message: "Token was deposited successfully",
            color: "green",
            withBorder: true,
        });
    }, []);

    const onSuccess = useCallback(
        ({ receipt, type }: DepositFormSuccessData) => {
            const message = receipt?.transactionHash
                ? {
                      message: (
                          <BlockExplorerLink
                              value={receipt.transactionHash.toString()}
                              type="tx"
                          />
                      ),
                      title: `${type} transfer completed`,
                  }
                : { message: `${type} transfer completed.` };

            notifications.show({
                withCloseButton: true,
                autoClose: false,
                color: "green",
                ...message,
            });

            setMultiTokenId("");
            setApplicationId("");
        },
        [],
    );

    return (
        <>
            <Select
                label="Type"
                placeholder="Select deposit type"
                mb={16}
                allowDeselect={false}
                data={[
                    {
                        group: "Deposit",
                        items: [
                            { value: "ether", label: "Ether Deposit" },
                            { value: "erc20", label: "ERC-20 Deposit" },
                            { value: "erc721", label: "ERC-721 Deposit" },
                            { value: "erc1155", label: "ERC-1155 Deposit" },
                            {
                                value: "erc1155Batch",
                                label: "ERC-1155 Batch Deposit",
                            },
                        ],
                    },
                    {
                        group: "Other",
                        items: [{ value: "input", label: "Raw Input" }],
                    },
                ]}
                value={depositType}
                onChange={(nextValue) => {
                    setDepositType(nextValue as DepositType);
                    setApplicationId("");
                }}
            />

            {depositType === "ether" ? (
                <EtherDepositForm
                    applications={applications}
                    isLoadingApplications={fetching}
                    onSearchApplications={setApplicationId}
                />
            ) : depositType === "erc20" ? (
                <ERC20DepositForm
                    tokens={tokens}
                    applications={applications}
                    isLoadingApplications={fetching}
                    onSearchApplications={setApplicationId}
                    onSearchTokens={setTokenId}
                />
            ) : depositType === "erc721" ? (
                <ERC721DepositForm
                    applications={applications}
                    isLoadingApplications={fetching}
                    onSearchApplications={setApplicationId}
                    onDeposit={onDepositErc721}
                />
            ) : depositType === "input" ? (
                <RawInputForm
                    applications={applications}
                    isLoadingApplications={fetching}
                    onSearchApplications={setApplicationId}
                />
            ) : depositType === "erc1155" ? (
                <ERC1155DepositForm
                    mode="single"
                    tokens={multiTokens}
                    applications={applications}
                    isLoadingApplications={fetching}
                    onSearchApplications={setApplicationId}
                    onSearchTokens={setMultiTokenId}
                    onSuccess={onSuccess}
                />
            ) : depositType === "erc1155Batch" ? (
                <ERC1155DepositForm
                    mode="batch"
                    tokens={multiTokens}
                    applications={applications}
                    isLoadingApplications={fetching}
                    onSearchApplications={setApplicationId}
                    onSearchTokens={setMultiTokenId}
                    onSuccess={onSuccess}
                />
            ) : null}
        </>
    );
};
export default SendTransaction;

1	"use client";	1✔
2	import {	1✔
3	DepositFormSuccessData,	1✔
4	ERC1155DepositForm,	1✔
5	ERC20DepositForm,	1✔
6	ERC721DepositForm,	1✔
7	EtherDepositForm,	1✔
8	RawInputForm,	1✔
9	} from "@cartesi/rollups-explorer-ui";	1✔
10	import { Select } from "@mantine/core";	1✔
11	import { useDebouncedValue } from "@mantine/hooks";	1✔
12	import { notifications } from "@mantine/notifications";	1✔
13	import { FC, useCallback, useState } from "react";	1✔
14	import { useSearchApplications } from "../hooks/useSearchApplications";	1✔
15	import { useSearchMultiTokens } from "../hooks/useSearchMultiTokens";	1✔
16	import { useSearchTokens } from "../hooks/useSearchTokens";	1✔
17	import { BlockExplorerLink } from "./BlockExplorerLink";	1✔
18		1✔
19	export type DepositType =	1✔
20	\| "ether"	1✔
21	\| "erc20"	1✔
22	\| "erc721"	1✔
23	\| "erc1155"	1✔
24	\| "erc1155Batch"	1✔
25	\| "relay"	1✔
26	\| "input";	1✔
27		1✔
28	interface DepositProps {	1✔
29	initialDepositType?: DepositType;	1✔
30	}	1✔
31		1✔
32	const DEBOUNCE_TIME = 400 as const;	1✔
33		1✔
34	const SendTransaction: FC<DepositProps> = ({	1✔
35	initialDepositType = "ether",	14✔
36	}) => {	14✔
37	const [depositType, setDepositType] =	14✔
38	useState<DepositType>(initialDepositType);	14✔
39	const [applicationId, setApplicationId] = useState<string>("");	14✔
40	const [multiTokenId, setMultiTokenId] = useState<string>("");	14✔
41	const [tokenId, setTokenId] = useState<string>("");	14✔
42	const [debouncedApplicationId] = useDebouncedValue(	14✔
43	applicationId,	14✔
44	DEBOUNCE_TIME,	14✔
45	);	14✔
46	const [debouncedTokenId] = useDebouncedValue(tokenId, DEBOUNCE_TIME);	14✔
47	const [debouncedMultiTokenId] = useDebouncedValue(	14✔
48	multiTokenId,	14✔
49	DEBOUNCE_TIME,	14✔
50	);	14✔
51	const { applications, fetching } = useSearchApplications({	14✔
52	address: debouncedApplicationId,	14✔
53	});	14✔
54	const { tokens } = useSearchTokens({	14✔
55	address: debouncedTokenId,	14✔
56	});	14✔
57	const { multiTokens } = useSearchMultiTokens({	14✔
58	address: debouncedMultiTokenId,	14✔
59	});	14✔
60		14✔
61	const onDepositErc721 = useCallback(() => {	14✔
62	notifications.show({	×
63	message: "Token was deposited successfully",	×
64	color: "green",	×
65	withBorder: true,	×
66	});	×
67	}, []);	14✔
68		14✔
69	const onSuccess = useCallback(	14✔
70	({ receipt, type }: DepositFormSuccessData) => {	14✔
71	const message = receipt?.transactionHash	×
72	? {	×
73	message: (	×
74	<BlockExplorerLink	×
75	value={receipt.transactionHash.toString()}	×
76	type="tx"	×
77	/>	×
78	),	×
79	title: `${type} transfer completed`,	×
80	}	×
81	: { message: `${type} transfer completed.` };	×
82		×
83	notifications.show({	×
84	withCloseButton: true,	×
85	autoClose: false,	×
86	color: "green",	×
87	...message,	×
88	});	×
89		×
90	setMultiTokenId("");	×
91	setApplicationId("");	×
92	},	×
93	[],	14✔
94	);	14✔
95		14✔
96	return (	14✔
97	<>	14✔
98	<Select	14✔
99	label="Type"	14✔
100	placeholder="Select deposit type"	14✔
101	mb={16}	14✔
102	allowDeselect={false}	14✔
103	data={[	14✔
104	{	14✔
105	group: "Deposit",	14✔
106	items: [	14✔
107	{ value: "ether", label: "Ether Deposit" },	14✔
108	{ value: "erc20", label: "ERC-20 Deposit" },	14✔
109	{ value: "erc721", label: "ERC-721 Deposit" },	14✔
110	{ value: "erc1155", label: "ERC-1155 Deposit" },	14✔
111	{	14✔
112	value: "erc1155Batch",	14✔
113	label: "ERC-1155 Batch Deposit",	14✔
114	},	14✔
115	],	14✔
116	},	14✔
117	{	14✔
118	group: "Other",	14✔
119	items: [{ value: "input", label: "Raw Input" }],	14✔
120	},	14✔
121	]}	14✔
122	value={depositType}	14✔
123	onChange={(nextValue) => {	14✔
124	setDepositType(nextValue as DepositType);	×
125	setApplicationId("");	×
126	}}	×
127	/>	14✔
128		14✔
129	{depositType === "ether" ? (	14✔
130	<EtherDepositForm	1✔
131	applications={applications}	1✔
132	isLoadingApplications={fetching}	1✔
133	onSearchApplications={setApplicationId}	1✔
134	/>	1✔
135	) : depositType === "erc20" ? (	13✔
136	<ERC20DepositForm	9✔
137	tokens={tokens}	9✔
138	applications={applications}	9✔
139	isLoadingApplications={fetching}	9✔
140	onSearchApplications={setApplicationId}	9✔
141	onSearchTokens={setTokenId}	9✔
142	/>	9✔
143	) : depositType === "erc721" ? (	4✔
144	<ERC721DepositForm	1✔
145	applications={applications}	1✔
146	isLoadingApplications={fetching}	1✔
147	onSearchApplications={setApplicationId}	1✔
148	onDeposit={onDepositErc721}	1✔
149	/>	1✔
150	) : depositType === "input" ? (	3✔
151	<RawInputForm	1✔
152	applications={applications}	1✔
153	isLoadingApplications={fetching}	1✔
154	onSearchApplications={setApplicationId}	1✔
155	/>	1✔
156	) : depositType === "erc1155" ? (	2✔
157	<ERC1155DepositForm	1✔
158	mode="single"	1✔
159	tokens={multiTokens}	1✔
160	applications={applications}	1✔
161	isLoadingApplications={fetching}	1✔
162	onSearchApplications={setApplicationId}	1✔
163	onSearchTokens={setMultiTokenId}	1✔
164	onSuccess={onSuccess}	1✔
165	/>	1✔
166	) : depositType === "erc1155Batch" ? (	1✔
167	<ERC1155DepositForm	1✔
168	mode="batch"	1✔
169	tokens={multiTokens}	1✔
170	applications={applications}	1✔
171	isLoadingApplications={fetching}	1✔
172	onSearchApplications={setApplicationId}	1✔
173	onSearchTokens={setMultiTokenId}	1✔
174	onSuccess={onSuccess}	1✔
175	/>	1!
176	) : null}	×
177	</>	14✔
178	);	14✔
179	};	14✔
180	export default SendTransaction;	1✔

cartesi / rollups-explorer / 9656272020

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