8413655092

Committed 25 Mar 2024 01:18AM UTC coverage: 95.504% (+0.002%) from 95.502%

Build # 8413655092

Build Type

push

github

Committed by

web-flow

Commit Message

Fix Page Input No Result Display and Query Missing on Refresh (#139)

Run Details

494 of 599 branches covered (82.47%)

Branch coverage included in aggregate %.

10 of 10 new or added lines in 4 files covered. (100.0%)

6388 of 6607 relevant lines covered (96.69%)

20.33 hits per line

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

91.45

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

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

export type DepositType =
    | "ether"
    | "erc20"
    | "erc721"
    | "erc1155"
    | "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 { applications, fetching } = useSearchApplications({
        address: debouncedApplicationId,
    });
    const { tokens } = useSearchTokens({
        address: debouncedTokenId,
    });

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

    return (
        <>
            <Select
                label="Type"
                placeholder="Select deposit type"
                mb={16}
                data={[
                    {
                        group: "Deposit",
                        items: [
                            { value: "ether", label: "Ether Deposit" },
                            { value: "erc20", label: "ERC-20 Deposit" },
                            { value: "erc721", label: "ERC-721 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}
                />
            ) : null}
        </>
    );
};
export default SendTransaction;

1	"use client";	1✔
2	import {	1✔
3	ERC20DepositForm,	1✔
4	ERC721DepositForm,	1✔
5	EtherDepositForm,	1✔
6	RawInputForm,	1✔
7	} from "@cartesi/rollups-explorer-ui";	1✔
8	import { Select } from "@mantine/core";	1✔
9	import { useDebouncedValue } from "@mantine/hooks";	1✔
10	import { FC, useCallback, useState } from "react";	1✔
11	import { useSearchApplications } from "../hooks/useSearchApplications";	1✔
12	import { useSearchTokens } from "../hooks/useSearchTokens";	1✔
13	import { notifications } from "@mantine/notifications";	1✔
14		1✔
15	export type DepositType =	1✔
16	\| "ether"	1✔
17	\| "erc20"	1✔
18	\| "erc721"	1✔
19	\| "erc1155"	1✔
20	\| "relay"	1✔
21	\| "input";	1✔
22		1✔
23	interface DepositProps {	1✔
24	initialDepositType?: DepositType;	1✔
25	}	1✔
26		1✔
27	const SendTransaction: FC<DepositProps> = ({	1✔
28	initialDepositType = "ether",	13✔
29	}) => {	13✔
30	const [depositType, setDepositType] =	13✔
31	useState<DepositType>(initialDepositType);	13✔
32	const [applicationId, setApplicationId] = useState<string>("");	13✔
33	const [tokenId, setTokenId] = useState<string>("");	13✔
34	const [debouncedApplicationId] = useDebouncedValue(applicationId, 400);	13✔
35	const [debouncedTokenId] = useDebouncedValue(tokenId, 400);	13✔
36	const { applications, fetching } = useSearchApplications({	13✔
37	address: debouncedApplicationId,	13✔
38	});	13✔
39	const { tokens } = useSearchTokens({	13✔
40	address: debouncedTokenId,	13✔
41	});	13✔
42		13✔
43	const onDepositErc721 = useCallback(() => {	13✔
44	notifications.show({	×
45	message: "Token was deposited successfully",	×
46	color: "green",	×
47	withBorder: true,	×
48	});	×
49	}, []);	13✔
50		13✔
51	return (	13✔
52	<>	13✔
53	<Select	13✔
54	label="Type"	13✔
55	placeholder="Select deposit type"	13✔
56	mb={16}	13✔
57	data={[	13✔
58	{	13✔
59	group: "Deposit",	13✔
60	items: [	13✔
61	{ value: "ether", label: "Ether Deposit" },	13✔
62	{ value: "erc20", label: "ERC-20 Deposit" },	13✔
63	{ value: "erc721", label: "ERC-721 Deposit" },	13✔
64	],	13✔
65	},	13✔
66	{	13✔
67	group: "Other",	13✔
68	items: [{ value: "input", label: "Raw Input" }],	13✔
69	},	13✔
70	]}	13✔
71	value={depositType}	13✔
72	onChange={(nextValue) => {	13✔
73	setDepositType(nextValue as DepositType);	×
74	setApplicationId("");	×
75	}}	×
76	/>	13✔
77		13✔
78	{depositType === "ether" ? (	13✔
79	<EtherDepositForm	2✔
80	applications={applications}	2✔
81	isLoadingApplications={fetching}	2✔
82	onSearchApplications={setApplicationId}	2✔
83	/>	2✔
84	) : depositType === "erc20" ? (	11✔
85	<ERC20DepositForm	4✔
86	tokens={tokens}	4✔
87	applications={applications}	4✔
88	isLoadingApplications={fetching}	4✔
89	onSearchApplications={setApplicationId}	4✔
90	onSearchTokens={setTokenId}	4✔
91	/>	4✔
92	) : depositType === "erc721" ? (	7✔
93	<ERC721DepositForm	1✔
94	applications={applications}	1✔
95	isLoadingApplications={fetching}	1✔
96	onSearchApplications={setApplicationId}	1✔
97	onDeposit={onDepositErc721}	1✔
98	/>	1✔
99	) : depositType === "input" ? (	6✔
100	<RawInputForm	6✔
101	applications={applications}	6✔
102	isLoadingApplications={fetching}	6✔
103	onSearchApplications={setApplicationId}	6✔
104	/>	6!
105	) : null}	×
106	</>	13✔
107	);	13✔
108	};	13✔
109	export default SendTransaction;	1✔

cartesi / rollups-explorer / 8413655092

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