8327931569

Committed 18 Mar 2024 02:03PM UTC coverage: 94.681% (-0.3%) from 94.937%

Build # 8327931569

Build Type

Pull #140

github

Committed by

nevendyulgerov

Commit Message

chore: Attempt to mitigate issue with building the docker image

Pull Request Pull Request #140: #130 Upgrade rainbowkit wagmi viem packages

Run Details

461 of 567 branches covered (81.31%)

Branch coverage included in aggregate %.

190 of 211 new or added lines in 10 files covered. (90.05%)

7 existing lines in 1 file now uncovered.

6375 of 6653 relevant lines covered (95.82%)

15.88 hits per line

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

86.33

/packages/ui/src/ERC721DepositForm.tsx

import {
    erc721Abi,
    erc721PortalAddress,
    useWriteErc721Approve,
    useSimulateErc721Approve,
    useWriteErc721PortalDepositErc721Token,
    useSimulateErc721PortalDepositErc721Token,
} from "@cartesi/rollups-wagmi";
import {
    Alert,
    Autocomplete,
    Button,
    Collapse,
    Flex,
    Group,
    Loader,
    Select,
    Stack,
    Text,
    TextInput,
    Textarea,
} from "@mantine/core";
import { useForm } from "@mantine/form";
import { useDisclosure } from "@mantine/hooks";
import { FC, useCallback, useEffect, useMemo, useRef, useState } from "react";
import {
    TbAlertCircle,
    TbCheck,
    TbChevronDown,
    TbChevronUp,
    TbPigMoney,
} from "react-icons/tb";
import {
    BaseError,
    Hex,
    getAddress,
    isAddress,
    isHex,
    zeroAddress,
    Address,
} from "viem";
import {
    useAccount,
    useReadContracts,
    useWaitForTransactionReceipt,
} from "wagmi";
import { TransactionProgress } from "./TransactionProgress";
import {
    TransactionStageStatus,
    TransactionWaitStatus,
} from "./TransactionStatus";
import useWatchQueryOnBlockChange from "./hooks/useWatchQueryOnBlockChange";

const erc721AbiEnumerable = [
    ...erc721Abi,
    {
        stateMutability: "view",
        type: "function",
        inputs: [
            {
                name: "owner",
                type: "address",
            },
            {
                name: "index",
                type: "uint256",
            },
        ],
        name: "tokenOfOwnerByIndex",
        outputs: [
            {
                name: "tokenId",
                type: "uint256",
            },
        ],
    },
] as const;

export const transactionButtonState = (
    prepare: TransactionWaitStatus,
    execute: TransactionStageStatus,
    wait: TransactionWaitStatus,
    disableOnSuccess: boolean = true,
) => {
    const loading =
        prepare.fetchStatus === "fetching" ||
        execute.status === "pending" ||
        wait.fetchStatus === "fetching";

    const disabled =
        prepare.error !== null ||
        (disableOnSuccess && wait.status === "success");

    return { loading, disabled };
};

export const useTokensOfOwnerByIndex = (
    erc721ContractAddress: Address,
    ownerAddress: Address,
    depositedTokens: bigint[] = [],
) => {
    const [index, setIndex] = useState(0);
    const [tokenIds, setTokenIds] = useState<bigint[]>([]);
    const [fetching, setFetching] = useState(true);
    const lastErc721ContractAddress = useRef(erc721ContractAddress);
    const lastOwnerAddress = useRef(ownerAddress);
    const erc721 = useReadContracts({
        contracts: [
            {
                abi: erc721AbiEnumerable,
                address: erc721ContractAddress,
                functionName: "tokenOfOwnerByIndex",
                args: [ownerAddress!, BigInt(index)],
            },
        ],
        query: {
            enabled:
                erc721ContractAddress?.toString() !== "" &&
                ownerAddress?.toString() !== "",
        },
    });

    useWatchQueryOnBlockChange(erc721.queryKey);

    const tokenOfOwnerByIndex = erc721.data?.[0];

    const onChange = useCallback(() => {
        const isExisting =
            erc721ContractAddress === lastErc721ContractAddress.current &&
            ownerAddress === lastOwnerAddress.current;

        lastErc721ContractAddress.current = erc721ContractAddress;
        lastOwnerAddress.current = ownerAddress;

        if (tokenOfOwnerByIndex?.status === "success") {
            setTokenIds((prevTokenIds) =>
                isExisting
                    ? [...prevTokenIds, tokenOfOwnerByIndex.result as bigint]
                    : [tokenOfOwnerByIndex.result as bigint],
            );
            setIndex((prevIndex) => (isExisting ? prevIndex + 1 : 1));
            setFetching(true);
        } else {
            setTokenIds((prevTokenIds) => (isExisting ? prevTokenIds : []));
            setIndex((prevIndex) => (isExisting ? prevIndex : 0));
            setFetching(false);
        }
    }, [tokenOfOwnerByIndex, erc721ContractAddress, ownerAddress]);

    useEffect(() => {
        onChange();
    }, [onChange]);

    return useMemo(
        () => ({
            tokenIds: [...tokenIds]
                .filter((tokenId) => !depositedTokens.includes(tokenId))
                .sort(),
            fetching,
        }),
        [tokenIds, fetching, depositedTokens],
    );
};

export interface ERC721DepositFormProps {
    applications: string[];
    isLoadingApplications: boolean;
    onSearchApplications: (applicationId: string) => void;
    onDeposit: () => void;
}

export const ERC721DepositForm: FC<ERC721DepositFormProps> = (props) => {
    const {
        applications,
        isLoadingApplications,
        onSearchApplications,
        onDeposit,
    } = props;
    const [advanced, { toggle: toggleAdvanced }] = useDisclosure(false);
    const { address } = useAccount();
    const [depositedTokens, setDepositedTokens] = useState<bigint[]>([]);

    const form = useForm({
        validateInputOnBlur: true,
        initialValues: {
            application: "",
            erc721Address: "",
            tokenId: "",
            baseLayerData: "0x",
            execLayerData: "0x",
        },
        validate: {
            application: (value) =>
                value !== "" && isAddress(value) ? null : "Invalid application",
            erc721Address: (value) =>
                value !== "" ? null : "Invalid ERC-721 address",
            tokenId: (value) =>
                value !== "" && Number(value) > 0 ? null : "Invalid token ID",
            baseLayerData: (value) =>
                isHex(value) ? null : "Invalid hex string",
            execLayerData: (value) =>
                isHex(value) ? null : "Invalid hex string",
        },
        transformValues: (values) => ({
            address: isAddress(values.application)
                ? getAddress(values.application)
                : zeroAddress,
            erc721Address: isAddress(values.erc721Address)
                ? getAddress(values.erc721Address)
                : zeroAddress,
            erc721ContractAddress: isAddress(values.erc721Address)
                ? getAddress(values.erc721Address)
                : undefined,
            tokenIdBigInt:
                values.tokenId !== "" ? BigInt(values.tokenId) : undefined,
            baseLayerData: values.baseLayerData
                ? (values.baseLayerData as Hex)
                : "0x",
            execLayerData: values.execLayerData
                ? (values.execLayerData as Hex)
                : "0x",
        }),
    });

    const {
        address: applicationAddress,
        erc721Address,
        erc721ContractAddress,
        baseLayerData,
        execLayerData,
        tokenIdBigInt,
    } = form.getTransformedValues();

    const erc721Contract = {
        abi: erc721Abi,
        address: erc721ContractAddress,
    };
    const erc721 = useReadContracts({
        contracts: [
            { ...erc721Contract, functionName: "symbol" },
            { ...erc721Contract, functionName: "balanceOf", args: [address!] },
        ],
    });

    useWatchQueryOnBlockChange(erc721.queryKey);

    const symbol = (erc721.data?.[0].result as string | undefined) ?? "";
    const balance = erc721.data?.[1].result as bigint | undefined;
    const erc721Errors = erc721.data
        ? erc721.data
              .filter((d) => d.error instanceof Error)
              .map((d) => (d.error as BaseError).shortMessage)
        : [];
    const hasPositiveBalance = balance !== undefined && balance > 0;

    // prepare approve transaction
    const approvePrepare = useSimulateErc721Approve({
        address: erc721Address,
        args: [erc721PortalAddress, tokenIdBigInt!],
        query: {
            enabled: tokenIdBigInt !== undefined && hasPositiveBalance,
        },
    });
    const approve = useWriteErc721Approve();
    const approveWait = useWaitForTransactionReceipt({
        hash: approve.data,
    });

    // prepare deposit transaction
    const depositPrepare = useSimulateErc721PortalDepositErc721Token({
        args: [
            erc721Address,
            applicationAddress,
            tokenIdBigInt!,
            baseLayerData,
            execLayerData,
        ],
        query: {
            enabled:
                tokenIdBigInt !== undefined &&
                hasPositiveBalance &&
                !form.errors.erc721Address &&
                !form.errors.application &&
                isHex(baseLayerData) &&
                isHex(execLayerData) &&
                approveWait.status === "success",
        },
    });
    const deposit = useWriteErc721PortalDepositErc721Token();
    const depositWait = useWaitForTransactionReceipt({
        hash: deposit.data,
    });
    const needApproval = tokenIdBigInt !== undefined;
    const canDeposit =
        hasPositiveBalance && tokenIdBigInt !== undefined && tokenIdBigInt > 0;

    const tokensOfOwnerByIndex = useTokensOfOwnerByIndex(
        erc721ContractAddress!,
        address!,
        depositedTokens,
    );

    const { disabled: approveDisabled, loading: approveLoading } =
        transactionButtonState(approvePrepare, approve, approveWait, true);
    const { disabled: depositDisabled, loading: depositLoading } =
        transactionButtonState(depositPrepare, deposit, depositWait, true);
    const isDepositDisabled =
        depositDisabled ||
        !canDeposit ||
        !form.isValid() ||
        approveWait.status !== "success";
    const isApproveDisabled =
        approveDisabled || !needApproval || !isDepositDisabled;

    useEffect(() => {
        if (tokensOfOwnerByIndex.tokenIds.length === 0) {
            form.setFieldValue("tokenId", "");
        }
        // eslint-disable-next-line react-hooks/exhaustive-deps
    }, [tokensOfOwnerByIndex]);

    useEffect(() => {
        if (depositWait.isSuccess) {
            setDepositedTokens((tokens) => [
                ...tokens,
                tokenIdBigInt as bigint,
            ]);
            form.reset();
            approve.reset();
            deposit.reset();
            onDeposit();
            onSearchApplications("");
        }
        // eslint-disable-next-line react-hooks/exhaustive-deps
    }, [depositWait.isSuccess, tokenIdBigInt, onDeposit, onSearchApplications]);

    return (
        <form data-testid="erc721-deposit-form">
            <Stack>
                <Autocomplete
                    label="Application"
                    description="The application smart contract address"
                    placeholder="0x"
                    data={applications}
                    withAsterisk
                    data-testid="application"
                    rightSection={isLoadingApplications && <Loader size="xs" />}
                    {...form.getInputProps("application")}
                    onChange={(nextValue) => {
                        form.setFieldValue("application", nextValue);
                        onSearchApplications(nextValue);
                    }}
                />

                {!form.errors.application &&
                    applicationAddress !== zeroAddress &&
                    !applications.some(
                        (a) =>
                            a.toLowerCase() ===
                            applicationAddress.toLowerCase(),
                    ) && (
                        <Alert
                            variant="light"
                            color="yellow"
                            icon={<TbAlertCircle />}
                        >
                            This is a deposit to an undeployed application.
                        </Alert>
                    )}

                <TextInput
                    label="ERC-721"
                    description="The ERC-721 smart contract address"
                    placeholder="0x"
                    withAsterisk
                    data-testid="erc721Address"
                    rightSection={erc721.isLoading && <Loader size="xs" />}
                    {...form.getInputProps("erc721Address")}
                    error={erc721Errors[0] || form.errors.erc721Address}
                />
                <Collapse in={erc721.isSuccess && erc721Errors.length == 0}>
                    <Stack>
                        {tokensOfOwnerByIndex.tokenIds.length > 0 ? (
                            <Select
                                label="Token ID"
                                description="Token ID to deposit"
                                placeholder="Token ID"
                                withAsterisk
                                data-testid="token-id-select"
                                data={tokensOfOwnerByIndex.tokenIds.map(
                                    (tokenId) => ({
                                        value: String(tokenId),
                                        label: String(tokenId),
                                    }),
                                )}
                                onChange={(nextValue) => {
                                    form.setFieldValue(
                                        "tokenId",
                                        nextValue ?? "",
                                    );
                                    approve.reset();
                                    deposit.reset();
                                }}
                            />
                        ) : (
                            <TextInput
                                label="Token ID"
                                description="Token ID to deposit"
                                placeholder="Token ID"
                                withAsterisk
                                data-testid="token-id-input"
                                disabled={!hasPositiveBalance}
                                {...form.getInputProps("tokenId")}
                            />
                        )}

                        <Flex
                            mt="-sm"
                            justify={"space-between"}
                            direction={"row"}
                        >
                            <Flex rowGap={6} c="dark.2">
                                <Text id="token-balance" fz="xs" mx={4}>
                                    Balance: {Number(balance)} {symbol}
                                </Text>
                            </Flex>
                        </Flex>
                    </Stack>
                </Collapse>
                <Collapse in={advanced}>
                    <Textarea
                        label="Base data"
                        description="Base execution layer data handled by the application"
                        mb={16}
                        {...form.getInputProps("baseLayerData")}
                    />

                    <Textarea
                        label="Extra data"
                        description="Extra execution layer data handled by the application"
                        {...form.getInputProps("execLayerData")}
                    />
                </Collapse>
                <Collapse in={approve.isPending || approveWait.isLoading}>
                    <TransactionProgress
                        prepare={approvePrepare}
                        execute={approve}
                        wait={approveWait}
                        confirmationMessage="Approve transaction confirmed"
                    />
                </Collapse>
                <Collapse in={!deposit.isIdle && !isDepositDisabled}>
                    <TransactionProgress
                        prepare={depositPrepare}
                        execute={deposit}
                        wait={depositWait}
                    />
                </Collapse>
                <Group justify="right">
                    <Button
                        leftSection={
                            advanced ? <TbChevronUp /> : <TbChevronDown />
                        }
                        size="xs"
                        visibleFrom="sm"
                        variant="transparent"
                        onClick={toggleAdvanced}
                    >
                        Advanced
                    </Button>
                    <Button
                        variant="filled"
                        disabled={isApproveDisabled}
                        leftSection={<TbCheck />}
                        loading={approveLoading}
                        onClick={() =>
                            approve.writeContract(approvePrepare.data!.request)
                        }
                    >
                        Approve
                    </Button>
                    <Button
                        variant="filled"
                        disabled={isDepositDisabled}
                        leftSection={<TbPigMoney />}
                        loading={depositLoading}
                        onClick={() =>
                            deposit.writeContract(depositPrepare.data!.request)
                        }
                    >
                        Deposit
                    </Button>
                </Group>
            </Stack>
        </form>
    );
};

1	import {	1✔
2	erc721Abi,	1✔
3	erc721PortalAddress,	1✔
4	useWriteErc721Approve,	1✔
5	useSimulateErc721Approve,	1✔
6	useWriteErc721PortalDepositErc721Token,	1✔
7	useSimulateErc721PortalDepositErc721Token,	1✔
8	} from "@cartesi/rollups-wagmi";	1✔
9	import {	1✔
10	Alert,	1✔
11	Autocomplete,	1✔
12	Button,	1✔
13	Collapse,	1✔
14	Flex,	1✔
15	Group,	1✔
16	Loader,	1✔
17	Select,	1✔
18	Stack,	1✔
19	Text,	1✔
20	TextInput,	1✔
21	Textarea,	1✔
22	} from "@mantine/core";	1✔
23	import { useForm } from "@mantine/form";	1✔
24	import { useDisclosure } from "@mantine/hooks";	1✔
25	import { FC, useCallback, useEffect, useMemo, useRef, useState } from "react";	1✔
26	import {	1✔
27	TbAlertCircle,	1✔
28	TbCheck,	1✔
29	TbChevronDown,	1✔
30	TbChevronUp,	1✔
31	TbPigMoney,	1✔
32	} from "react-icons/tb";	1✔
33	import {	1✔
34	BaseError,	1✔
35	Hex,	1✔
36	getAddress,	1✔
37	isAddress,	1✔
38	isHex,	1✔
39	zeroAddress,	1✔
40	Address,	1✔
41	} from "viem";	1✔
42	import {	1✔
43	useAccount,	1✔
44	useReadContracts,	1✔
45	useWaitForTransactionReceipt,	1✔
46	} from "wagmi";	1✔
47	import { TransactionProgress } from "./TransactionProgress";	1✔
48	import {	1✔
49	TransactionStageStatus,	1✔
50	TransactionWaitStatus,	1✔
51	} from "./TransactionStatus";	1✔
52	import useWatchQueryOnBlockChange from "./hooks/useWatchQueryOnBlockChange";	1✔
53		1✔
54	const erc721AbiEnumerable = [	1✔
55	...erc721Abi,	1✔
56	{	1✔
57	stateMutability: "view",	1✔
58	type: "function",	1✔
59	inputs: [	1✔
60	{	1✔
61	name: "owner",	1✔
62	type: "address",	1✔
63	},	1✔
64	{	1✔
65	name: "index",	1✔
66	type: "uint256",	1✔
67	},	1✔
68	],	1✔
69	name: "tokenOfOwnerByIndex",	1✔
70	outputs: [	1✔
71	{	1✔
72	name: "tokenId",	1✔
73	type: "uint256",	1✔
74	},	1✔
75	],	1✔
76	},	1✔
77	] as const;	1✔
78		1✔
79	export const transactionButtonState = (	1✔
80	prepare: TransactionWaitStatus,	72✔
81	execute: TransactionStageStatus,	72✔
82	wait: TransactionWaitStatus,	72✔
83	disableOnSuccess: boolean = true,	72✔
84	) => {	72✔
85	const loading =	72✔
86	prepare.fetchStatus === "fetching" \|\|	72✔
87	execute.status === "pending" \|\|	72✔
88	wait.fetchStatus === "fetching";	72✔
89		72✔
90	const disabled =	72✔
91	prepare.error !== null \|\|	72!
NEW 92	(disableOnSuccess && wait.status === "success");	×
93		72✔
94	return { loading, disabled };	72✔
95	};	72✔
96		1✔
97	export const useTokensOfOwnerByIndex = (	1✔
98	erc721ContractAddress: Address,	56✔
99	ownerAddress: Address,	56✔
100	depositedTokens: bigint[] = [],	56✔
101	) => {	56✔
102	const [index, setIndex] = useState(0);	56✔
103	const [tokenIds, setTokenIds] = useState<bigint[]>([]);	56✔
104	const [fetching, setFetching] = useState(true);	56✔
105	const lastErc721ContractAddress = useRef(erc721ContractAddress);	56✔
106	const lastOwnerAddress = useRef(ownerAddress);	56✔
107	const erc721 = useReadContracts({	56✔
108	contracts: [	56✔
109	{	56✔
110	abi: erc721AbiEnumerable,	56✔
111	address: erc721ContractAddress,	56✔
112	functionName: "tokenOfOwnerByIndex",	56✔
113	args: [ownerAddress!, BigInt(index)],	56✔
114	},	56✔
115	],	56✔
116	query: {	56✔
117	enabled:	56✔
118	erc721ContractAddress?.toString() !== "" &&	56✔
119	ownerAddress?.toString() !== "",	56✔
120	},	56✔
121	});	56✔
122		56✔
123	useWatchQueryOnBlockChange(erc721.queryKey);	56✔
124		56✔
125	const tokenOfOwnerByIndex = erc721.data?.[0];	56✔
126		56✔
127	const onChange = useCallback(() => {	56✔
128	const isExisting =	29✔
129	erc721ContractAddress === lastErc721ContractAddress.current &&	29✔
130	ownerAddress === lastOwnerAddress.current;	29✔
131		29✔
132	lastErc721ContractAddress.current = erc721ContractAddress;	29✔
133	lastOwnerAddress.current = ownerAddress;	29✔
134		29✔
135	if (tokenOfOwnerByIndex?.status === "success") {	29✔
136	setTokenIds((prevTokenIds) =>	10✔
137	isExisting	10✔
138	? [...prevTokenIds, tokenOfOwnerByIndex.result as bigint]	10!
139	: [tokenOfOwnerByIndex.result as bigint],	×
140	);	10✔
141	setIndex((prevIndex) => (isExisting ? prevIndex + 1 : 1));	10!
142	setFetching(true);	10✔
143	} else {	29✔
144	setTokenIds((prevTokenIds) => (isExisting ? prevTokenIds : []));	19!
145	setIndex((prevIndex) => (isExisting ? prevIndex : 0));	19!
146	setFetching(false);	19✔
147	}	19✔
148	}, [tokenOfOwnerByIndex, erc721ContractAddress, ownerAddress]);	56✔
149		56✔
150	useEffect(() => {	56✔
151	onChange();	29✔
152	}, [onChange]);	56✔
153		56✔
154	return useMemo(	56✔
155	() => ({	56✔
156	tokenIds: [...tokenIds]	45✔
157	.filter((tokenId) => !depositedTokens.includes(tokenId))	45✔
158	.sort(),	45✔
159	fetching,	45✔
160	}),	45✔
161	[tokenIds, fetching, depositedTokens],	56✔
162	);	56✔
163	};	56✔
164		1✔
165	export interface ERC721DepositFormProps {	1✔
166	applications: string[];	1✔
167	isLoadingApplications: boolean;	1✔
168	onSearchApplications: (applicationId: string) => void;	1✔
169	onDeposit: () => void;	1✔
170	}	1✔
171		1✔
172	export const ERC721DepositForm: FC<ERC721DepositFormProps> = (props) => {	1✔
173	const {	36✔
174	applications,	36✔
175	isLoadingApplications,	36✔
176	onSearchApplications,	36✔
177	onDeposit,	36✔
178	} = props;	36✔
179	const [advanced, { toggle: toggleAdvanced }] = useDisclosure(false);	36✔
180	const { address } = useAccount();	36✔
181	const [depositedTokens, setDepositedTokens] = useState<bigint[]>([]);	36✔
182		36✔
183	const form = useForm({	36✔
184	validateInputOnBlur: true,	36✔
185	initialValues: {	36✔
186	application: "",	36✔
187	erc721Address: "",	36✔
188	tokenId: "",	36✔
189	baseLayerData: "0x",	36✔
190	execLayerData: "0x",	36✔
191	},	36✔
192	validate: {	36✔
193	application: (value) =>	36✔
194	value !== "" && isAddress(value) ? null : "Invalid application",	×
195	erc721Address: (value) =>	36✔
196	value !== "" ? null : "Invalid ERC-721 address",	×
197	tokenId: (value) =>	36✔
198	value !== "" && Number(value) > 0 ? null : "Invalid token ID",	×
199	baseLayerData: (value) =>	36✔
200	isHex(value) ? null : "Invalid hex string",	×
201	execLayerData: (value) =>	36✔
202	isHex(value) ? null : "Invalid hex string",	×
203	},	36✔
204	transformValues: (values) => ({	36✔
205	address: isAddress(values.application)	36!
206	? getAddress(values.application)	×
207	: zeroAddress,	36✔
208	erc721Address: isAddress(values.erc721Address)	36!
209	? getAddress(values.erc721Address)	×
210	: zeroAddress,	36✔
211	erc721ContractAddress: isAddress(values.erc721Address)	36!
212	? getAddress(values.erc721Address)	×
213	: undefined,	36✔
214	tokenIdBigInt:	36✔
215	values.tokenId !== "" ? BigInt(values.tokenId) : undefined,	36!
216	baseLayerData: values.baseLayerData	36✔
217	? (values.baseLayerData as Hex)	36!
218	: "0x",	×
219	execLayerData: values.execLayerData	36✔
220	? (values.execLayerData as Hex)	36!
221	: "0x",	×
222	}),	36✔
223	});	36✔
224		36✔
225	const {	36✔
226	address: applicationAddress,	36✔
227	erc721Address,	36✔
228	erc721ContractAddress,	36✔
229	baseLayerData,	36✔
230	execLayerData,	36✔
231	tokenIdBigInt,	36✔
232	} = form.getTransformedValues();	36✔
233		36✔
234	const erc721Contract = {	36✔
235	abi: erc721Abi,	36✔
236	address: erc721ContractAddress,	36✔
237	};	36✔
238	const erc721 = useReadContracts({	36✔
239	contracts: [	36✔
240	{ ...erc721Contract, functionName: "symbol" },	36✔
241	{ ...erc721Contract, functionName: "balanceOf", args: [address!] },	36✔
242	],	36✔
243	});	36✔
244		36✔
245	useWatchQueryOnBlockChange(erc721.queryKey);	36✔
246		36✔
247	const symbol = (erc721.data?.[0].result as string \| undefined) ?? "";	36✔
248	const balance = erc721.data?.[1].result as bigint \| undefined;	36✔
249	const erc721Errors = erc721.data	36✔
250	? erc721.data	36✔
251	.filter((d) => d.error instanceof Error)	36✔
252	.map((d) => (d.error as BaseError).shortMessage)	36!
253	: [];	×
254	const hasPositiveBalance = balance !== undefined && balance > 0;	36✔
255		36✔
256	// prepare approve transaction	36✔
257	const approvePrepare = useSimulateErc721Approve({	36✔
258	address: erc721Address,	36✔
259	args: [erc721PortalAddress, tokenIdBigInt!],	36✔
260	query: {	36✔
261	enabled: tokenIdBigInt !== undefined && hasPositiveBalance,	36!
262	},	36✔
263	});	36✔
264	const approve = useWriteErc721Approve();	36✔
265	const approveWait = useWaitForTransactionReceipt({	36✔
266	hash: approve.data,	36✔
267	});	36✔
268		36✔
269	// prepare deposit transaction	36✔
270	const depositPrepare = useSimulateErc721PortalDepositErc721Token({	36✔
271	args: [	36✔
272	erc721Address,	36✔
273	applicationAddress,	36✔
274	tokenIdBigInt!,	36✔
275	baseLayerData,	36✔
276	execLayerData,	36✔
277	],	36✔
278	query: {	36✔
279	enabled:	36✔
280	tokenIdBigInt !== undefined &&	36!
NEW 281	hasPositiveBalance &&	×
NEW 282	!form.errors.erc721Address &&	×
NEW 283	!form.errors.application &&	×
NEW 284	isHex(baseLayerData) &&	×
NEW 285	isHex(execLayerData) &&	×
NEW 286	approveWait.status === "success",	×
287	},	36✔
288	});	36✔
289	const deposit = useWriteErc721PortalDepositErc721Token();	36✔
290	const depositWait = useWaitForTransactionReceipt({	36✔
291	hash: deposit.data,	36✔
292	});	36✔
293	const needApproval = tokenIdBigInt !== undefined;	36✔
294	const canDeposit =	36✔
295	hasPositiveBalance && tokenIdBigInt !== undefined && tokenIdBigInt > 0;	36!
296		36✔
297	const tokensOfOwnerByIndex = useTokensOfOwnerByIndex(	36✔
298	erc721ContractAddress!,	36✔
299	address!,	36✔
300	depositedTokens,	36✔
301	);	36✔
302		36✔
303	const { disabled: approveDisabled, loading: approveLoading } =	36✔
304	transactionButtonState(approvePrepare, approve, approveWait, true);	36✔
305	const { disabled: depositDisabled, loading: depositLoading } =	36✔
306	transactionButtonState(depositPrepare, deposit, depositWait, true);	36✔
307	const isDepositDisabled =	36✔
308	depositDisabled \|\|	36!
309	!canDeposit \|\|	×
310	!form.isValid() \|\|	×
311	approveWait.status !== "success";	×
312	const isApproveDisabled =	36✔
313	approveDisabled \|\| !needApproval \|\| !isDepositDisabled;	36!
314		36✔
315	useEffect(() => {	36✔
316	if (tokensOfOwnerByIndex.tokenIds.length === 0) {	25✔
317	form.setFieldValue("tokenId", "");	21✔
318	}	21✔
319	// eslint-disable-next-line react-hooks/exhaustive-deps	25✔
320	}, [tokensOfOwnerByIndex]);	36✔
321		36✔
322	useEffect(() => {	36✔
323	if (depositWait.isSuccess) {	11✔
324	setDepositedTokens((tokens) => [	2✔
325	...tokens,	2✔
326	tokenIdBigInt as bigint,	2✔
327	]);	2✔
328	form.reset();	2✔
329	approve.reset();	2✔
330	deposit.reset();	2✔
331	onDeposit();	2✔
332	onSearchApplications("");	2✔
333	}	2✔
334	// eslint-disable-next-line react-hooks/exhaustive-deps	11✔
335	}, [depositWait.isSuccess, tokenIdBigInt, onDeposit, onSearchApplications]);	36✔
336		36✔
337	return (	36✔
338	<form data-testid="erc721-deposit-form">	36✔
339	<Stack>	36✔
340	<Autocomplete	36✔
341	label="Application"	36✔
342	description="The application smart contract address"	36✔
343	placeholder="0x"	36✔
344	data={applications}	36✔
345	withAsterisk	36✔
346	data-testid="application"	36✔
347	rightSection={isLoadingApplications && <Loader size="xs" />}	36!
348	{...form.getInputProps("application")}	36✔
349	onChange={(nextValue) => {	36✔
350	form.setFieldValue("application", nextValue);	×
351	onSearchApplications(nextValue);	×
352	}}	×
353	/>	36✔
354		36✔
355	{!form.errors.application &&	36✔
356	applicationAddress !== zeroAddress &&	36!
357	!applications.some(	×
358	(a) =>	×
359	a.toLowerCase() ===	×
360	applicationAddress.toLowerCase(),	×
361	) && (	×
362	<Alert	×
363	variant="light"	×
364	color="yellow"	×
365	icon={<TbAlertCircle />}	×
366	>	×
367	This is a deposit to an undeployed application.	×
368	</Alert>	×
369	)}	36✔
370		36✔
371	<TextInput	36✔
372	label="ERC-721"	36✔
373	description="The ERC-721 smart contract address"	36✔
374	placeholder="0x"	36✔
375	withAsterisk	36✔
376	data-testid="erc721Address"	36✔
377	rightSection={erc721.isLoading && <Loader size="xs" />}	36!
378	{...form.getInputProps("erc721Address")}	36✔
379	error={erc721Errors[0] \|\| form.errors.erc721Address}	36✔
380	/>	36✔
381	<Collapse in={erc721.isSuccess && erc721Errors.length == 0}>	36✔
382	<Stack>	36✔
383	{tokensOfOwnerByIndex.tokenIds.length > 0 ? (	36✔
384	<Select	4✔
385	label="Token ID"	4✔
386	description="Token ID to deposit"	4✔
387	placeholder="Token ID"	4✔
388	withAsterisk	4✔
389	data-testid="token-id-select"	4✔
390	data={tokensOfOwnerByIndex.tokenIds.map(	4✔
391	(tokenId) => ({	4✔
392	value: String(tokenId),	9✔
393	label: String(tokenId),	9✔
394	}),	9✔
395	)}	4✔
396	onChange={(nextValue) => {	4✔
397	form.setFieldValue(	×
398	"tokenId",	×
399	nextValue ?? "",	×
400	);	×
401	approve.reset();	×
402	deposit.reset();	×
403	}}	×
404	/>	4✔
405	) : (	32✔
406	<TextInput	32✔
407	label="Token ID"	32✔
408	description="Token ID to deposit"	32✔
409	placeholder="Token ID"	32✔
410	withAsterisk	32✔
411	data-testid="token-id-input"	32✔
412	disabled={!hasPositiveBalance}	32✔
413	{...form.getInputProps("tokenId")}	32✔
414	/>	32✔
415	)}	36✔
416		36✔
417	<Flex	36✔
418	mt="-sm"	36✔
419	justify={"space-between"}	36✔
420	direction={"row"}	36✔
421	>	36✔
422	<Flex rowGap={6} c="dark.2">	36✔
423	<Text id="token-balance" fz="xs" mx={4}>	36✔
424	Balance: {Number(balance)} {symbol}	36✔
425	</Text>	36✔
426	</Flex>	36✔
427	</Flex>	36✔
428	</Stack>	36✔
429	</Collapse>	36✔
430	<Collapse in={advanced}>	36✔
431	<Textarea	36✔
432	label="Base data"	36✔
433	description="Base execution layer data handled by the application"	36✔
434	mb={16}	36✔
435	{...form.getInputProps("baseLayerData")}	36✔
436	/>	36✔
437		36✔
438	<Textarea	36✔
439	label="Extra data"	36✔
440	description="Extra execution layer data handled by the application"	36✔
441	{...form.getInputProps("execLayerData")}	36✔
442	/>	36✔
443	</Collapse>	36✔
444	<Collapse in={approve.isPending \|\| approveWait.isLoading}>	36✔
445	<TransactionProgress	36✔
446	prepare={approvePrepare}	36✔
447	execute={approve}	36✔
448	wait={approveWait}	36✔
449	confirmationMessage="Approve transaction confirmed"	36✔
450	/>	36✔
451	</Collapse>	36✔
452	<Collapse in={!deposit.isIdle && !isDepositDisabled}>	36✔
453	<TransactionProgress	36✔
454	prepare={depositPrepare}	36✔
455	execute={deposit}	36✔
456	wait={depositWait}	36✔
457	/>	36✔
458	</Collapse>	36✔
459	<Group justify="right">	36✔
460	<Button	36✔
461	leftSection={	36✔
462	advanced ? <TbChevronUp /> : <TbChevronDown />	36!
463	}	36✔
464	size="xs"	36✔
465	visibleFrom="sm"	36✔
466	variant="transparent"	36✔
467	onClick={toggleAdvanced}	36✔
468	>	36✔
469	Advanced	36✔
470	</Button>	36✔
471	<Button	36✔
472	variant="filled"	36✔
473	disabled={isApproveDisabled}	36✔
474	leftSection={<TbCheck />}	36✔
475	loading={approveLoading}	36✔
476	onClick={() =>	36✔
NEW 477	approve.writeContract(approvePrepare.data!.request)	×
478	}	36✔
479	>	36✔
480	Approve	36✔
481	</Button>	36✔
482	<Button	36✔
483	variant="filled"	36✔
484	disabled={isDepositDisabled}	36✔
485	leftSection={<TbPigMoney />}	36✔
486	loading={depositLoading}	36✔
487	onClick={() =>	36✔
NEW 488	deposit.writeContract(depositPrepare.data!.request)	×
489	}	36✔
490	>	36✔
491	Deposit	36✔
492	</Button>	36✔
493	</Group>	36✔
494	</Stack>	36✔
495	</form>	36✔
496	);	36✔
497	};	36✔

cartesi / rollups-explorer / 8327931569

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