9300959022

Committed 30 May 2024 10:22AM UTC coverage: 94.082% (-0.001%) from 94.083%

Build # 9300959022

Build Type

push

github

Committed by

brunomenezes

Commit Message

feature: Add dapp-address-relay support.

Run Details

776 of 913 branches covered (84.99%)

Branch coverage included in aggregate %.

150 of 151 new or added lines in 2 files covered. (99.34%)

13 existing lines in 1 file now uncovered.

8540 of 8989 relevant lines covered (95.01%)

55.01 hits per line

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

81.07

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

"use client";
import {
    AddressRelayForm,
    ERC1155DepositForm,
    ERC20DepositForm,
    ERC721DepositForm,
    EtherDepositForm,
    RawInputForm,
    TransactionFormSuccessData,
} 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 }: TransactionFormSuccessData) => {
            const message = receipt?.transactionHash
                ? {
                      message: (
                          <BlockExplorerLink
                              value={receipt.transactionHash.toString()}
                              type="tx"
                          />
                      ),
                      title: `${type} transaction completed`,
                  }
                : { message: `${type} transaction completed.` };

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

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

    return (
        <>
            <Select
                label="Type"
                placeholder="Select transaction 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: "Relay",
                        items: [
                            { value: "relay", label: "Application Address" },
                        ],
                    },
                    {
                        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}
                />
            ) : depositType === "relay" ? (
                <AddressRelayForm
                    applications={applications}
                    isLoadingApplications={fetching}
                    onSearchApplications={setApplicationId}
                    onSuccess={onSuccess}
                />
            ) : null}
        </>
    );
};
export default SendTransaction;

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

cartesi / rollups-explorer / 9300959022

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