14397356153

Committed 11 Apr 2025 06:51AM UTC coverage: 87.199% (+1.9%) from 85.294%

Build # 14397356153

Build Type

Pull #269

github

Committed by

brunomenezes

Commit Message

chore: Update explorer Dockerfile instructions, rename .env.sunodo to .env.cartesi.

Pull Request Pull Request #269: Feat: Support rollups v2

Run Details

1615 of 1880 branches covered (85.9%)

Branch coverage included in aggregate %.

2631 of 2762 new or added lines in 45 files covered. (95.26%)

3 existing lines in 2 files now uncovered.

11028 of 12619 relevant lines covered (87.39%)

59.09 hits per line

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

84.1

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

"use client";
import {
    AddressRelayForm,
    ERC1155DepositForm,
    ERC20DepositForm,
    ERC721DepositForm,
    EtherDepositForm,
    GenericInputForm,
    GenericInputFormSpecification,
    TransactionFormSuccessData,
    type RollupVersion as RollupVersionUI,
} 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 { RollupVersion } from "../graphql/explorer/types";
import { useSearchApplications } from "../hooks/useSearchApplications";
import { useSearchMultiTokens } from "../hooks/useSearchMultiTokens";
import { useSearchTokens } from "../hooks/useSearchTokens";
import getConfiguredChainId from "../lib/getConfiguredChain";
import { BlockExplorerLink } from "./BlockExplorerLink";
import { useSpecification } from "./specification/hooks/useSpecification";
import { JSON_ABI } from "./specification/types";

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

interface DepositProps {
    initialDepositType?: DepositType;
}

const DEBOUNCE_TIME = 400 as const;

type ApplicationSearchableParams = {
    address: string;
    rollupVersion?: RollupVersion;
};

const SendTransaction: FC<DepositProps> = ({
    initialDepositType = "ether",
}) => {
    const [depositType, setDepositType] =
        useState<DepositType>(initialDepositType);
    const [applicationSearchableParams, setApplicationSearchableParams] =
        useState<ApplicationSearchableParams>({ address: "" });

    const [multiTokenId, setMultiTokenId] = useState<string>("");
    const [tokenId, setTokenId] = useState<string>("");

    const [debouncedApplicationSearchableParams] = useDebouncedValue(
        applicationSearchableParams,
        DEBOUNCE_TIME,
    );

    const [debouncedTokenId] = useDebouncedValue(tokenId, DEBOUNCE_TIME);
    const [debouncedMultiTokenId] = useDebouncedValue(
        multiTokenId,
        DEBOUNCE_TIME,
    );

    const chainId = getConfiguredChainId();
    const { applications, fetching } = useSearchApplications({
        address: debouncedApplicationSearchableParams.address,
        rollupVersion: debouncedApplicationSearchableParams.rollupVersion,
        chainId,
    });

    const { tokens } = useSearchTokens({
        address: debouncedTokenId,
        chainId,
    });
    const { multiTokens } = useSearchMultiTokens({
        address: debouncedMultiTokenId,
        chainId,
    });
    const { listSpecifications } = useSpecification();
    const specifications =
        listSpecifications()?.filter((s) => s.mode === JSON_ABI) ?? [];

    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("");
            setApplicationSearchableParams({ address: "" });
        },
        [],
    );

    const updateApplicationSearchParams = useCallback(
        (address: string, rollupVersion?: RollupVersionUI) =>
            setApplicationSearchableParams({
                address,
                rollupVersion: rollupVersion as RollupVersion,
            }),
        [],
    );

    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: "Generic Input" }],
                    },
                ]}
                value={depositType}
                onChange={(nextValue) => {
                    setDepositType(nextValue as DepositType);
                    setApplicationSearchableParams({ address: "" });
                }}
            />

            {depositType === "ether" ? (
                <EtherDepositForm
                    applications={applications}
                    isLoadingApplications={fetching}
                    onSearchApplications={updateApplicationSearchParams}
                    onSuccess={onSuccess}
                />
            ) : depositType === "erc20" ? (
                <ERC20DepositForm
                    tokens={tokens}
                    applications={applications}
                    isLoadingApplications={fetching}
                    onSearchApplications={updateApplicationSearchParams}
                    onSearchTokens={setTokenId}
                    onSuccess={onSuccess}
                />
            ) : depositType === "erc721" ? (
                <ERC721DepositForm
                    applications={applications}
                    isLoadingApplications={fetching}
                    onSearchApplications={updateApplicationSearchParams}
                    onSuccess={onSuccess}
                />
            ) : depositType === "input" ? (
                <GenericInputForm
                    applications={applications}
                    specifications={
                        specifications as GenericInputFormSpecification[]
                    }
                    isLoadingApplications={fetching}
                    onSearchApplications={updateApplicationSearchParams}
                    onSuccess={onSuccess}
                />
            ) : depositType === "erc1155" ? (
                <ERC1155DepositForm
                    mode="single"
                    tokens={multiTokens}
                    applications={applications}
                    isLoadingApplications={fetching}
                    onSearchApplications={updateApplicationSearchParams}
                    onSearchTokens={setMultiTokenId}
                    onSuccess={onSuccess}
                />
            ) : depositType === "erc1155Batch" ? (
                <ERC1155DepositForm
                    mode="batch"
                    tokens={multiTokens}
                    applications={applications}
                    isLoadingApplications={fetching}
                    onSearchApplications={updateApplicationSearchParams}
                    onSearchTokens={setMultiTokenId}
                    onSuccess={onSuccess}
                />
            ) : depositType === "relay" ? (
                <AddressRelayForm
                    applications={applications}
                    isLoadingApplications={fetching}
                    onSearchApplications={updateApplicationSearchParams}
                    onSuccess={onSuccess}
                />
            ) : null}
        </>
    );
};
export default SendTransaction;

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

cartesi / rollups-explorer / 14397356153

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