9371603080

Committed 04 Jun 2024 05:31PM UTC coverage: 93.796% (-0.3%) from 94.097%

Build # 9371603080

Build Type

Pull #198

github

Committed by

nevendyulgerov

Commit Message

feat(app/web): Add query for input status

Pull Request Pull Request #198: #186 Add input completion status

Run Details

759 of 894 branches covered (84.9%)

Branch coverage included in aggregate %.

51 of 83 new or added lines in 2 files covered. (61.45%)

13 existing lines in 2 files now uncovered.

8433 of 8906 relevant lines covered (94.69%)

55.19 hits per line

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

78.17

/apps/web/src/components/inputs/inputRow.tsx

"use client";
import {
    ActionIcon,
    Badge,
    Box,
    Collapse,
    Group,
    Paper,
    Table,
    Text,
    Tooltip,
} from "@mantine/core";
import { useDisclosure } from "@mantine/hooks";
import prettyMilliseconds from "pretty-ms";
import React, { FC, useMemo } from "react";
import { TbArrowRight, TbFileText, TbQuestionMark, TbX } from "react-icons/tb";
import { Address as AddressType, formatUnits } from "viem";
import { InputItemFragment } from "../../graphql/explorer/operations";
import Address from "../address";
import InputDetailsView from "./inputDetailsView";
import { methodResolver } from "../../lib/methodResolver";
import { useConnectionConfig } from "../../providers/connectionConfig/hooks";
import { useQuery } from "urql";
import {
    InputStatusDocument,
    InputStatusQuery,
    InputStatusQueryVariables,
} from "../../graphql/rollups/operations";
import { Connection } from "../../providers/connectionConfig/types";

export type InputRowProps = {
    input: InputItemFragment;
    timeType: string;
    keepDataColVisible: boolean;
};

interface InputStatusBadgeProps {
    graphqlUrl: string;
    index: number;
}

const InputStatusBadge: FC<InputStatusBadgeProps> = ({ graphqlUrl, index }) => {
    const [result] = useQuery<InputStatusQuery, InputStatusQueryVariables>({
        context: useMemo(
            () => ({
                url: graphqlUrl,
                requestPolicy: "network-only",
            }),
            [graphqlUrl],
        ),
        query: InputStatusDocument,
        variables: {
            index,
        },
    });

    return (
        <>
            {result.fetching ? (
                "Loading..."
            ) : result.data?.input.status ? (
                <Badge variant="default" style={{ textTransform: "none" }}>
                    {result.data.input.status}
                </Badge>
            ) : (
                "N/A"
            )}
        </>
    );
};

const InputRow: FC<InputRowProps> = ({
    input,
    timeType,
    keepDataColVisible,
}) => {
    const [opened, { toggle }] = useDisclosure(false);
    const from = input.msgSender as AddressType;
    const to = input.application.id as AddressType;
    const { getConnection, hasConnection, showConnectionModal } =
        useConnectionConfig();

    const erc20Deposit = (input: InputItemFragment) =>
        input.erc20Deposit ? (
            <Text size="xs">
                {formatUnits(
                    input.erc20Deposit.amount,
                    input.erc20Deposit.token.decimals,
                )}{" "}
                {input.erc20Deposit.token.symbol}
            </Text>
        ) : (
            <></>
        );

    const method = (
        <Badge variant="default" style={{ textTransform: "none" }}>
            {methodResolver(input) ?? "?"}
        </Badge>
    );
    return (
        <>
            <Table.Tr>
                <Table.Td>
                    <Box
                        display="flex"
                        w="max-content"
                        style={{
                            alignItems: "center",
                            justifyContent: "center",
                        }}
                    >
                        {input.erc20Deposit ? (
                            <Group>
                                <Address
                                    value={
                                        input.erc20Deposit.from as AddressType
                                    }
                                    icon
                                    shorten
                                />
                                <TbArrowRight />
                                <Address value={from} icon shorten />
                            </Group>
                        ) : (
                            <Address value={from} icon shorten />
                        )}
                    </Box>
                </Table.Td>
                <Table.Td>
                    <Box
                        display="flex"
                        w="max-content"
                        style={{
                            alignItems: "center",
                            justifyContent: "center",
                        }}
                    >
                        <Group justify="right">
                            {erc20Deposit(input)}
                            <TbArrowRight />
                        </Group>
                    </Box>
                </Table.Td>
                <Table.Td>
                    <Box
                        display="flex"
                        w="max-content"
                        style={{
                            alignItems: "center",
                            justifyContent: "center",
                        }}
                    >
                        <Address
                            value={to}
                            icon
                            href={`/applications/${to}/inputs`}
                            shorten
                        />
                    </Box>
                </Table.Td>
                <Table.Td>{method}</Table.Td>
                <Table.Td>
                    <Text>{input.index}</Text>
                </Table.Td>
                <Table.Td>
                    {hasConnection(to) ? (
                        <InputStatusBadge
                            graphqlUrl={(getConnection(to) as Connection).url}
                            index={input.index}
                        />
                    ) : (
                        <Tooltip label="Click to add a connection and inspect the input status.">
                            <ActionIcon
                                size="xs"
                                radius={50}
                                ml={4}
                                onClick={() => showConnectionModal(to)}
                            >
                                <TbQuestionMark />
                            </ActionIcon>
                        </Tooltip>
                    )}
                </Table.Td>
                <Table.Td>
                    <Box
                        display="flex"
                        w="max-content"
                        style={{
                            alignItems: "center",
                            justifyContent: "center",
                        }}
                    >
                        <Text>
                            {timeType === "age"
                                ? `${prettyMilliseconds(
                                      Date.now() - input.timestamp * 1000,
                                      {
                                          unitCount: 2,
                                          secondsDecimalDigits: 0,
                                          verbose: true,
                                      },
                                  )} ago`
                                : new Date(
                                      input.timestamp * 1000,
                                  ).toISOString()}
                        </Text>
                    </Box>
                </Table.Td>
                <Table.Td
                    pos={keepDataColVisible ? "initial" : "sticky"}
                    top={0}
                    right={0}
                    p={0}
                >
                    <Paper
                        shadow={keepDataColVisible ? undefined : "xl"}
                        radius={0}
                        p="var(--table-vertical-spacing) var(--table-horizontal-spacing, var(--mantine-spacing-xs))"
                    >
                        <ActionIcon variant="default" onClick={toggle}>
                            {opened ? <TbX /> : <TbFileText />}
                        </ActionIcon>
                    </Paper>
                </Table.Td>
            </Table.Tr>
            <Table.Tr></Table.Tr>
            <Table.Tr>
                <Table.Td colSpan={8} p={0}>
                    <Collapse in={opened}>
                        {opened && <InputDetailsView input={input} />}
                    </Collapse>
                </Table.Td>
            </Table.Tr>
        </>
    );
};

export default InputRow;

1	"use client";	1✔
2	import {	1✔
3	ActionIcon,	1✔
4	Badge,	1✔
5	Box,	1✔
6	Collapse,	1✔
7	Group,	1✔
8	Paper,	1✔
9	Table,	1✔
10	Text,	1✔
11	Tooltip,	1✔
12	} from "@mantine/core";	1✔
13	import { useDisclosure } from "@mantine/hooks";	1✔
14	import prettyMilliseconds from "pretty-ms";	1✔
15	import React, { FC, useMemo } from "react";	1✔
16	import { TbArrowRight, TbFileText, TbQuestionMark, TbX } from "react-icons/tb";	1✔
17	import { Address as AddressType, formatUnits } from "viem";	1✔
18	import { InputItemFragment } from "../../graphql/explorer/operations";	1✔
19	import Address from "../address";	1✔
20	import InputDetailsView from "./inputDetailsView";	1✔
21	import { methodResolver } from "../../lib/methodResolver";	1✔
22	import { useConnectionConfig } from "../../providers/connectionConfig/hooks";	1✔
23	import { useQuery } from "urql";	1✔
24	import {	1✔
25	InputStatusDocument,	1✔
26	InputStatusQuery,	1✔
27	InputStatusQueryVariables,	1✔
28	} from "../../graphql/rollups/operations";	1✔
29	import { Connection } from "../../providers/connectionConfig/types";	1✔
30		1✔
31	export type InputRowProps = {	1✔
32	input: InputItemFragment;	1✔
33	timeType: string;	1✔
34	keepDataColVisible: boolean;	1✔
35	};	1✔
36		1✔
37	interface InputStatusBadgeProps {	1✔
38	graphqlUrl: string;	1✔
39	index: number;	1✔
40	}	1✔
41		1✔
42	const InputStatusBadge: FC<InputStatusBadgeProps> = ({ graphqlUrl, index }) => {	1✔
NEW 43	const [result] = useQuery<InputStatusQuery, InputStatusQueryVariables>({	×
NEW 44	context: useMemo(	×
NEW 45	() => ({	×
NEW 46	url: graphqlUrl,	×
NEW 47	requestPolicy: "network-only",	×
NEW 48	}),	×
NEW 49	[graphqlUrl],	×
NEW 50	),	×
NEW 51	query: InputStatusDocument,	×
NEW 52	variables: {	×
NEW 53	index,	×
NEW 54	},	×
NEW 55	});	×
NEW 56		×
NEW 57	return (	×
NEW 58	<>	×
NEW 59	{result.fetching ? (	×
NEW 60	"Loading..."	×
NEW 61	) : result.data?.input.status ? (	×
NEW 62	<Badge variant="default" style={{ textTransform: "none" }}>	×
NEW 63	{result.data.input.status}	×
NEW 64	</Badge>	×
NEW 65	) : (	×
NEW 66	"N/A"	×
NEW 67	)}	×
NEW 68	</>	×
NEW 69	);	×
NEW 70	};	×
71		1✔
72	const InputRow: FC<InputRowProps> = ({	1✔
73	input,	6✔
74	timeType,	6✔
75	keepDataColVisible,	6✔
76	}) => {	6✔
77	const [opened, { toggle }] = useDisclosure(false);	6✔
78	const from = input.msgSender as AddressType;	6✔
79	const to = input.application.id as AddressType;	6✔
80	const { getConnection, hasConnection, showConnectionModal } =	6✔
81	useConnectionConfig();	6✔
82		6✔
83	const erc20Deposit = (input: InputItemFragment) =>	6✔
84	input.erc20Deposit ? (	6!
85	<Text size="xs">	×
86	{formatUnits(	×
87	input.erc20Deposit.amount,	×
88	input.erc20Deposit.token.decimals,	×
89	)}{" "}	×
90	{input.erc20Deposit.token.symbol}	×
91	</Text>	×
92	) : (	6✔
93	<></>	6✔
94	);	6✔
95		6✔
96	const method = (	6✔
97	<Badge variant="default" style={{ textTransform: "none" }}>	6✔
98	{methodResolver(input) ?? "?"}	6✔
99	</Badge>	6✔
100	);	6✔
101	return (	6✔
102	<>	6✔
103	<Table.Tr>	6✔
104	<Table.Td>	6✔
105	<Box	6✔
106	display="flex"	6✔
107	w="max-content"	6✔
108	style={{	6✔
109	alignItems: "center",	6✔
110	justifyContent: "center",	6✔
111	}}	6✔
112	>	6✔
113	{input.erc20Deposit ? (	6!
UNCOV 114	<Group>	×
115	<Address	×
116	value={	×
117	input.erc20Deposit.from as AddressType	×
118	}	×
119	icon	×
120	shorten	×
121	/>	×
122	<TbArrowRight />	×
123	<Address value={from} icon shorten />	×
124	</Group>	×
125	) : (	6✔
126	<Address value={from} icon shorten />	6✔
127	)}	6✔
128	</Box>	6✔
129	</Table.Td>	6✔
130	<Table.Td>	6✔
131	<Box	6✔
132	display="flex"	6✔
133	w="max-content"	6✔
134	style={{	6✔
135	alignItems: "center",	6✔
136	justifyContent: "center",	6✔
137	}}	6✔
138	>	6✔
139	<Group justify="right">	6✔
140	{erc20Deposit(input)}	6✔
141	<TbArrowRight />	6✔
142	</Group>	6✔
143	</Box>	6✔
144	</Table.Td>	6✔
145	<Table.Td>	6✔
146	<Box	6✔
147	display="flex"	6✔
148	w="max-content"	6✔
149	style={{	6✔
150	alignItems: "center",	6✔
151	justifyContent: "center",	6✔
152	}}	6✔
153	>	6✔
154	<Address	6✔
155	value={to}	6✔
156	icon	6✔
157	href={`/applications/${to}/inputs`}	6✔
158	shorten	6✔
159	/>	6✔
160	</Box>	6✔
161	</Table.Td>	6✔
162	<Table.Td>{method}</Table.Td>	6✔
163	<Table.Td>	6✔
164	<Text>{input.index}</Text>	6✔
165	</Table.Td>	6✔
166	<Table.Td>	6✔
167	{hasConnection(to) ? (	6!
NEW 168	<InputStatusBadge	×
NEW 169	graphqlUrl={(getConnection(to) as Connection).url}	×
NEW 170	index={input.index}	×
NEW 171	/>	×
172	) : (	6✔
173	<Tooltip label="Click to add a connection and inspect the input status.">	6✔
174	<ActionIcon	6✔
175	size="xs"	6✔
176	radius={50}	6✔
177	ml={4}	6✔
178	onClick={() => showConnectionModal(to)}	6✔
179	>	6✔
180	<TbQuestionMark />	6✔
181	</ActionIcon>	6✔
182	</Tooltip>	6✔
183	)}	6✔
184	</Table.Td>	6✔
185	<Table.Td>	6✔
186	<Box	6✔
187	display="flex"	6✔
188	w="max-content"	6✔
189	style={{	6✔
190	alignItems: "center",	6✔
191	justifyContent: "center",	6✔
192	}}	6✔
193	>	6✔
194	<Text>	6✔
195	{timeType === "age"	6✔
196	? `${prettyMilliseconds(	4✔
197	Date.now() - input.timestamp * 1000,	4✔
198	{	4✔
199	unitCount: 2,	4✔
200	secondsDecimalDigits: 0,	4✔
201	verbose: true,	4✔
202	},	4✔
203	)} ago`	4✔
204	: new Date(	2✔
205	input.timestamp * 1000,	2✔
206	).toISOString()}	2✔
207	</Text>	6✔
208	</Box>	6✔
209	</Table.Td>	6✔
210	<Table.Td	6✔
211	pos={keepDataColVisible ? "initial" : "sticky"}	6✔
212	top={0}	6✔
213	right={0}	6✔
214	p={0}	6✔
215	>	6✔
216	<Paper	6✔
217	shadow={keepDataColVisible ? undefined : "xl"}	6✔
218	radius={0}	6✔
219	p="var(--table-vertical-spacing) var(--table-horizontal-spacing, var(--mantine-spacing-xs))"	6✔
220	>	6✔
221	<ActionIcon variant="default" onClick={toggle}>	6✔
222	{opened ? <TbX /> : <TbFileText />}	6!
223	</ActionIcon>	6✔
224	</Paper>	6✔
225	</Table.Td>	6✔
226	</Table.Tr>	6✔
227	<Table.Tr></Table.Tr>	6✔
228	<Table.Tr>	6✔
229	<Table.Td colSpan={8} p={0}>	6✔
230	<Collapse in={opened}>	6✔
231	{opened && <InputDetailsView input={input} />}	6!
232	</Collapse>	6✔
233	</Table.Td>	6✔
234	</Table.Tr>	6✔
235	</>	6✔
236	);	6✔
237	};	6✔
238		1✔
239	export default InputRow;	1✔

cartesi / rollups-explorer / 9371603080

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