9385410901

Committed 05 Jun 2024 01:53PM UTC coverage: 94.145% (+0.05%) from 94.097%

Build # 9385410901

Build Type

Pull #198

github

Committed by

nevendyulgerov

Commit Message

fix: Fix failing docker build

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

Run Details

768 of 902 branches covered (85.14%)

Branch coverage included in aggregate %.

95 of 95 new or added lines in 3 files covered. (100.0%)

13 existing lines in 2 files now uncovered.

8478 of 8919 relevant lines covered (95.06%)

55.25 hits per line

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

89.77

/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 } 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 { Connection } from "../../providers/connectionConfig/types";
import ConnectionInputStatusBadge from "../connection/connectionInputStatusBadge";

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

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) ? (
                        <ConnectionInputStatusBadge
                            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}
                                data-testid="show-connection-modal"
                                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 } 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 { Connection } from "../../providers/connectionConfig/types";	1✔
24	import ConnectionInputStatusBadge from "../connection/connectionInputStatusBadge";	1✔
25		1✔
26	export type InputRowProps = {	1✔
27	input: InputItemFragment;	1✔
28	timeType: string;	1✔
29	keepDataColVisible: boolean;	1✔
30	};	1✔
31		1✔
32	const InputRow: FC<InputRowProps> = ({	1✔
33	input,	10✔
34	timeType,	10✔
35	keepDataColVisible,	10✔
36	}) => {	10✔
37	const [opened, { toggle }] = useDisclosure(false);	10✔
38	const from = input.msgSender as AddressType;	10✔
39	const to = input.application.id as AddressType;	10✔
40	const { getConnection, hasConnection, showConnectionModal } =	10✔
41	useConnectionConfig();	10✔
42		10✔
43	const erc20Deposit = (input: InputItemFragment) =>	10✔
44	input.erc20Deposit ? (	10!
45	<Text size="xs">	×
46	{formatUnits(	×
47	input.erc20Deposit.amount,	×
48	input.erc20Deposit.token.decimals,	×
49	)}{" "}	×
50	{input.erc20Deposit.token.symbol}	×
51	</Text>	×
52	) : (	10✔
53	<></>	10✔
54	);	10✔
55		10✔
56	const method = (	10✔
57	<Badge variant="default" style={{ textTransform: "none" }}>	10✔
58	{methodResolver(input) ?? "?"}	10✔
59	</Badge>	10✔
60	);	10✔
61	return (	10✔
62	<>	10✔
63	<Table.Tr>	10✔
64	<Table.Td>	10✔
65	<Box	10✔
66	display="flex"	10✔
67	w="max-content"	10✔
68	style={{	10✔
69	alignItems: "center",	10✔
70	justifyContent: "center",	10✔
71	}}	10✔
72	>	10✔
73	{input.erc20Deposit ? (	10!
UNCOV 74	<Group>	×
75	<Address	×
76	value={	×
77	input.erc20Deposit.from as AddressType	×
78	}	×
79	icon	×
80	shorten	×
81	/>	×
82	<TbArrowRight />	×
83	<Address value={from} icon shorten />	×
84	</Group>	×
85	) : (	10✔
86	<Address value={from} icon shorten />	10✔
87	)}	10✔
88	</Box>	10✔
89	</Table.Td>	10✔
90	<Table.Td>	10✔
91	<Box	10✔
92	display="flex"	10✔
93	w="max-content"	10✔
94	style={{	10✔
95	alignItems: "center",	10✔
96	justifyContent: "center",	10✔
97	}}	10✔
98	>	10✔
99	<Group justify="right">	10✔
100	{erc20Deposit(input)}	10✔
101	<TbArrowRight />	10✔
102	</Group>	10✔
103	</Box>	10✔
104	</Table.Td>	10✔
105	<Table.Td>	10✔
106	<Box	10✔
107	display="flex"	10✔
108	w="max-content"	10✔
109	style={{	10✔
110	alignItems: "center",	10✔
111	justifyContent: "center",	10✔
112	}}	10✔
113	>	10✔
114	<Address	10✔
115	value={to}	10✔
116	icon	10✔
117	href={`/applications/${to}/inputs`}	10✔
118	shorten	10✔
119	/>	10✔
120	</Box>	10✔
121	</Table.Td>	10✔
122	<Table.Td>{method}</Table.Td>	10✔
123	<Table.Td>	10✔
124	<Text>{input.index}</Text>	10✔
125	</Table.Td>	10✔
126	<Table.Td>	10✔
127	{hasConnection(to) ? (	10✔
128	<ConnectionInputStatusBadge	8✔
129	graphqlUrl={(getConnection(to) as Connection).url}	8✔
130	index={input.index}	8✔
131	/>	8✔
132	) : (	2✔
133	<Tooltip label="Click to add a connection and inspect the input status.">	2✔
134	<ActionIcon	2✔
135	size="xs"	2✔
136	radius={50}	2✔
137	ml={4}	2✔
138	data-testid="show-connection-modal"	2✔
139	onClick={() => showConnectionModal(to)}	2✔
140	>	2✔
141	<TbQuestionMark />	2✔
142	</ActionIcon>	2✔
143	</Tooltip>	2✔
144	)}	10✔
145	</Table.Td>	10✔
146	<Table.Td>	10✔
147	<Box	10✔
148	display="flex"	10✔
149	w="max-content"	10✔
150	style={{	10✔
151	alignItems: "center",	10✔
152	justifyContent: "center",	10✔
153	}}	10✔
154	>	10✔
155	<Text>	10✔
156	{timeType === "age"	10✔
157	? `${prettyMilliseconds(	8✔
158	Date.now() - input.timestamp * 1000,	8✔
159	{	8✔
160	unitCount: 2,	8✔
161	secondsDecimalDigits: 0,	8✔
162	verbose: true,	8✔
163	},	8✔
164	)} ago`	8✔
165	: new Date(	2✔
166	input.timestamp * 1000,	2✔
167	).toISOString()}	2✔
168	</Text>	10✔
169	</Box>	10✔
170	</Table.Td>	10✔
171	<Table.Td	10✔
172	pos={keepDataColVisible ? "initial" : "sticky"}	10✔
173	top={0}	10✔
174	right={0}	10✔
175	p={0}	10✔
176	>	10✔
177	<Paper	10✔
178	shadow={keepDataColVisible ? undefined : "xl"}	10✔
179	radius={0}	10✔
180	p="var(--table-vertical-spacing) var(--table-horizontal-spacing, var(--mantine-spacing-xs))"	10✔
181	>	10✔
182	<ActionIcon variant="default" onClick={toggle}>	10✔
183	{opened ? <TbX /> : <TbFileText />}	10!
184	</ActionIcon>	10✔
185	</Paper>	10✔
186	</Table.Td>	10✔
187	</Table.Tr>	10✔
188	<Table.Tr></Table.Tr>	10✔
189	<Table.Tr>	10✔
190	<Table.Td colSpan={8} p={0}>	10✔
191	<Collapse in={opened}>	10✔
192	{opened && <InputDetailsView input={input} />}	10!
193	</Collapse>	10✔
194	</Table.Td>	10✔
195	</Table.Tr>	10✔
196	</>	10✔
197	);	10✔
198	};	10✔
199		1✔
200	export default InputRow;	1✔

cartesi / rollups-explorer / 9385410901

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