8733108086

Committed 18 Apr 2024 05:58AM UTC coverage: 94.371% (-1.2%) from 95.576%

Build # 8733108086

Build Type

Pull #143

github

Committed by

brunomenezes

Commit Message

fix: Remove query-key from deps-array to avoid loop of query invalidations.

Pull Request Pull Request #143: Feature: ERC-1155 Transfers

Run Details

713 of 825 branches covered (86.42%)

Branch coverage included in aggregate %.

1954 of 2096 new or added lines in 17 files covered. (93.23%)

1 existing line in 1 file now uncovered.

7166 of 7524 relevant lines covered (95.24%)

62.47 hits per line

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

82.32

/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 { useDebouncedState, 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 SendTransaction: FC<DepositProps> = ({
    initialDepositType = "ether",
}) => {
    const [depositType, setDepositType] =
        useState<DepositType>(initialDepositType);
    const [applicationId, setApplicationId] = useState<string>("");
    const [tokenId, setTokenId] = useState<string>("");
    const [debouncedApplicationId] = useDebouncedValue(applicationId, 400);
    const [debouncedTokenId] = useDebouncedValue(tokenId, 400);
    const [multiTokenId, setMultiTokenId] = useDebouncedState("", 400);
    const { applications, fetching } = useSearchApplications({
        address: debouncedApplicationId,
    });
    const { tokens } = useSearchTokens({
        address: debouncedTokenId,
    });
    const { multiTokens } = useSearchMultiTokens({ address: multiTokenId });

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

cartesi / rollups-explorer / 8733108086

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