8413655092

Committed 25 Mar 2024 01:18AM CUT 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

89.93

/packages/ui/src/TransactionProgress.tsx

"use client";
import {
    Center,
    Code,
    Collapse,
    Group,
    Progress,
    Stack,
    Text,
    useMantineTheme,
} from "@mantine/core";
import { useDisclosure } from "@mantine/hooks";
import { FC } from "react";
import {
    TbCheck,
    TbChevronDown,
    TbChevronUp,
    TbExclamationCircle,
} from "react-icons/tb";
import { BaseError } from "viem";
import { TransactionStageStatus } from "./TransactionStatus";

export type TransactionProgressProps = {
    prepare: TransactionStageStatus;
    execute: TransactionStageStatus;
    wait: TransactionStageStatus;
    confirmationMessage?: string;
    defaultErrorMessage?: string;
};

const getShortErrorMessage = (error: Error | null): string | undefined => {
    if (error != null) {
        if (error instanceof BaseError) {
            return error.shortMessage;
        }
        if (error.cause instanceof BaseError) {
            return error.cause.shortMessage;
        }
        const be = error as BaseError;
        return be.shortMessage;
    }
    return undefined;
};

const getErrorMessage = (error: Error | null): string | undefined => {
    if (error != null) {
        return error.message;
    }
    return undefined;
};

export const TransactionProgress: FC<TransactionProgressProps> = ({
    prepare,
    execute,
    wait,
    confirmationMessage,
    defaultErrorMessage,
}) => {
    const theme = useMantineTheme();
    const successColor = theme.colors.teal[5];
    const errorColor = theme.colors.red[5];

    // customizable confirmation message
    confirmationMessage = confirmationMessage || "Transaction confirmed";

    // customizable default error message
    defaultErrorMessage = defaultErrorMessage || "Transaction failed";

    const [showError, { toggle: toggleError }] = useDisclosure(false);
    const isSuccess = wait.status == "success";
    const isError = !!prepare.error || !!execute.error || !!wait.error;
    const isMining = wait.status == "loading";
    const shortErrorMessage =
        getShortErrorMessage(prepare.error) ||
        getShortErrorMessage(execute.error) ||
        getShortErrorMessage(wait.error);
    const errorMessage =
        getErrorMessage(prepare.error) ||
        getErrorMessage(execute.error) ||
        getErrorMessage(wait.error);
    const isLoading = execute.status == "loading";

    return (
        <Stack gap={5}>
            <Center>
                {isLoading && <Text size="xs">Check wallet...</Text>}
                {isMining && <Text size="xs">Waiting for confirmation...</Text>}
                {isSuccess && (
                    <Group gap={5}>
                        <TbCheck color={successColor} />
                        <Text size="xs" c={successColor}>
                            {confirmationMessage}
                        </Text>
                    </Group>
                )}
                {isError && (
                    <Group gap={5}>
                        <TbExclamationCircle color={errorColor} />
                        <Text size="xs" c={errorColor}>
                            {shortErrorMessage || defaultErrorMessage}
                        </Text>
                        {errorMessage &&
                            (showError ? (
                                <TbChevronUp
                                    color={errorColor}
                                    onClick={toggleError}
                                />
                            ) : (
                                <TbChevronDown
                                    color={errorColor}
                                    onClick={toggleError}
                                />
                            ))}
                    </Group>
                )}
            </Center>
            <Collapse in={showError}>
                <Code block variant="transparent" c={errorColor}>
                    {errorMessage}
                </Code>
            </Collapse>
            {(isLoading || isMining) && (
                <Progress value={100} striped animated size="sm" />
            )}
            {isSuccess && (
                <Progress value={100} size="sm" color={successColor} />
            )}
            {isError && <Progress value={100} size="sm" color={errorColor} />}
        </Stack>
    );
};

1	"use client";	1✔
2	import {	1✔
3	Center,	1✔
4	Code,	1✔
5	Collapse,	1✔
6	Group,	1✔
7	Progress,	1✔
8	Stack,	1✔
9	Text,	1✔
10	useMantineTheme,	1✔
11	} from "@mantine/core";	1✔
12	import { useDisclosure } from "@mantine/hooks";	1✔
13	import { FC } from "react";	1✔
14	import {	1✔
15	TbCheck,	1✔
16	TbChevronDown,	1✔
17	TbChevronUp,	1✔
18	TbExclamationCircle,	1✔
19	} from "react-icons/tb";	1✔
20	import { BaseError } from "viem";	1✔
21	import { TransactionStageStatus } from "./TransactionStatus";	1✔
22		1✔
23	export type TransactionProgressProps = {	1✔
24	prepare: TransactionStageStatus;	1✔
25	execute: TransactionStageStatus;	1✔
26	wait: TransactionStageStatus;	1✔
27	confirmationMessage?: string;	1✔
28	defaultErrorMessage?: string;	1✔
29	};	1✔
30		1✔
31	const getShortErrorMessage = (error: Error \| null): string \| undefined => {	1✔
32	if (error != null) {	906✔
33	if (error instanceof BaseError) {	4!
34	return error.shortMessage;	×
35	}	×
36	if (error.cause instanceof BaseError) {	4!
37	return error.cause.shortMessage;	×
38	}	×
39	const be = error as BaseError;	4✔
40	return be.shortMessage;	4✔
41	}	4✔
42	return undefined;	902✔
43	};	902✔
44		1✔
45	const getErrorMessage = (error: Error \| null): string \| undefined => {	1✔
46	if (error != null) {	906✔
47	return error.message;	4✔
48	}	4✔
49	return undefined;	902✔
50	};	902✔
51		1✔
52	export const TransactionProgress: FC<TransactionProgressProps> = ({	1✔
53	prepare,	302✔
54	execute,	302✔
55	wait,	302✔
56	confirmationMessage,	302✔
57	defaultErrorMessage,	302✔
58	}) => {	302✔
59	const theme = useMantineTheme();	302✔
60	const successColor = theme.colors.teal[5];	302✔
61	const errorColor = theme.colors.red[5];	302✔
62		302✔
63	// customizable confirmation message	302✔
64	confirmationMessage = confirmationMessage \|\| "Transaction confirmed";	302✔
65		302✔
66	// customizable default error message	302✔
67	defaultErrorMessage = defaultErrorMessage \|\| "Transaction failed";	302✔
68		302✔
69	const [showError, { toggle: toggleError }] = useDisclosure(false);	302✔
70	const isSuccess = wait.status == "success";	302✔
71	const isError = !!prepare.error \|\| !!execute.error \|\| !!wait.error;	302✔
72	const isMining = wait.status == "loading";	302✔
73	const shortErrorMessage =	302✔
74	getShortErrorMessage(prepare.error) \|\|	302✔
75	getShortErrorMessage(execute.error) \|\|	302✔
76	getShortErrorMessage(wait.error);	302✔
77	const errorMessage =	302✔
78	getErrorMessage(prepare.error) \|\|	302✔
79	getErrorMessage(execute.error) \|\|	302✔
80	getErrorMessage(wait.error);	302✔
81	const isLoading = execute.status == "loading";	302✔
82		302✔
83	return (	302✔
84	<Stack gap={5}>	302✔
85	<Center>	302✔
86	{isLoading && <Text size="xs">Check wallet...</Text>}	302!
87	{isMining && <Text size="xs">Waiting for confirmation...</Text>}	302!
88	{isSuccess && (	302✔
89	<Group gap={5}>	127✔
90	<TbCheck color={successColor} />	127✔
91	<Text size="xs" c={successColor}>	127✔
92	{confirmationMessage}	127✔
93	</Text>	127✔
94	</Group>	127✔
95	)}	302✔
96	{isError && (	302✔
97	<Group gap={5}>	4✔
98	<TbExclamationCircle color={errorColor} />	4✔
99	<Text size="xs" c={errorColor}>	4✔
100	{shortErrorMessage \|\| defaultErrorMessage}	4✔
101	</Text>	4✔
102	{errorMessage &&	4✔
103	(showError ? (	4!
104	<TbChevronUp	×
105	color={errorColor}	×
106	onClick={toggleError}	×
107	/>	×
108	) : (	4✔
109	<TbChevronDown	4✔
110	color={errorColor}	4✔
111	onClick={toggleError}	4✔
112	/>	4✔
113	))}	4✔
114	</Group>	4✔
115	)}	302✔
116	</Center>	302✔
117	<Collapse in={showError}>	302✔
118	<Code block variant="transparent" c={errorColor}>	302✔
119	{errorMessage}	302✔
120	</Code>	302✔
121	</Collapse>	302✔
122	{(isLoading \|\| isMining) && (	302!
123	<Progress value={100} striped animated size="sm" />	×
124	)}	302✔
125	{isSuccess && (	302✔
126	<Progress value={100} size="sm" color={successColor} />	127✔
127	)}	302✔
128	{isError && <Progress value={100} size="sm" color={errorColor} />}	302✔
129	</Stack>	302✔
130	);	302✔
131	};	302✔

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