8962206712

Committed 06 May 2024 12:17AM CUT coverage: 95.125% (-0.1%) from 95.257%

Build # 8962206712

Build Type

push

github

Committed by

web-flow

Commit Message

Feat: Application summary page access (#176)

Run Details

536 of 658 branches covered (81.46%)

Branch coverage included in aggregate %.

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

8 existing lines in 2 files now uncovered.

7191 of 7465 relevant lines covered (96.33%)

21.16 hits per line

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

86.78

/apps/web/src/components/applications/latestInputsTable.tsx

"use client";
import { Badge, Box, Button, Group, Loader, Table, Text } from "@mantine/core";
import type { Address as AddressType } from "abitype/dist/types/abi";
import prettyMilliseconds from "pretty-ms";
import { FC, useCallback, useState } from "react";
import Address from "../address";
import { getAddress } from "viem";
import { erc20PortalAddress, etherPortalAddress } from "@cartesi/rollups-wagmi";
import { MethodResolver } from "../inputs/inputRow";
import { InputItemFragment } from "../../graphql/explorer/operations";
import { TbArrowRight } from "react-icons/tb";

export interface Entry {
    appId: AddressType;
    timestamp: number;
    href: string;
}

export interface LatestInputsTableProps {
    inputs: InputItemFragment[];
    fetching: boolean;
    totalCount: number;
}

const etherDepositResolver: MethodResolver = (input) =>
    getAddress(input.msgSender) === etherPortalAddress && "depositEther";

const erc20PortalResolver: MethodResolver = (input) =>
    getAddress(input.msgSender) === erc20PortalAddress && "depositERC20Tokens";

const resolvers: MethodResolver[] = [etherDepositResolver, erc20PortalResolver];
const methodResolver: MethodResolver = (input) => {
    for (const resolver of resolvers) {
        const method = resolver(input);
        if (method) return method;
    }
    return undefined;
};

const LatestInputsTable: FC<LatestInputsTableProps> = ({
    inputs,
    fetching,
    totalCount,
}) => {
    const [timeType, setTimeType] = useState("age");

    const onChangeTimeColumnType = useCallback(() => {
        setTimeType((timeType) => (timeType === "age" ? "timestamp" : "age"));
    }, []);

    return (
        <Table>
            <Table.Thead>
                <Table.Tr>
                    <Table.Th>From</Table.Th>
                    <Table.Th>Method</Table.Th>
                    <Table.Th>
                        <Button
                            variant="transparent"
                            px={0}
                            onClick={onChangeTimeColumnType}
                        >
                            {timeType === "age" ? "Age" : "Timestamp (UTC)"}
                        </Button>
                    </Table.Th>
                </Table.Tr>
            </Table.Thead>
            <Table.Tbody>
                {fetching ? (
                    <Table.Tr>
                        <Table.Td align="center" colSpan={2}>
                            <Loader data-testid="inputs-table-spinner" />
                        </Table.Td>
                    </Table.Tr>
                ) : (
                    totalCount === 0 && (
                        <Table.Tr>
                            <Table.Td colSpan={3} align="center" fw={700}>
                                No inputs
                            </Table.Td>
                        </Table.Tr>
                    )
                )}
                {inputs.map((input) => (
                    <Table.Tr key={`${input.application}-${input.timestamp}`}>
                        <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={
                                                input.msgSender as AddressType
                                            }
                                            icon
                                            shorten
                                        />
                                    </Group>
                                ) : (
                                    <Address
                                        value={input.msgSender as AddressType}
                                        icon
                                        shorten
                                    />
                                )}
                            </Box>
                        </Table.Td>
                        <Table.Td>
                            <Badge
                                variant="default"
                                style={{ textTransform: "none" }}
                            >
                                {methodResolver(input) ?? "?"}
                            </Badge>
                        </Table.Td>
                        <Table.Td>
                            <Text>
                                {timeType === "age"
                                    ? `${prettyMilliseconds(
                                          Date.now() - input.timestamp * 1000,
                                          {
                                              unitCount: 2,
                                              secondsDecimalDigits: 0,
                                              verbose: true,
                                          },
                                      )} ago`
                                    : new Date(
                                          input.timestamp * 1000,
                                      ).toISOString()}
                            </Text>
                        </Table.Td>
                    </Table.Tr>
                ))}
            </Table.Tbody>
        </Table>
    );
};

export default LatestInputsTable;

1	"use client";	1✔
2	import { Badge, Box, Button, Group, Loader, Table, Text } from "@mantine/core";	1✔
3	import type { Address as AddressType } from "abitype/dist/types/abi";	1✔
4	import prettyMilliseconds from "pretty-ms";	1✔
5	import { FC, useCallback, useState } from "react";	1✔
6	import Address from "../address";	1✔
7	import { getAddress } from "viem";	1✔
8	import { erc20PortalAddress, etherPortalAddress } from "@cartesi/rollups-wagmi";	1✔
9	import { MethodResolver } from "../inputs/inputRow";	1✔
10	import { InputItemFragment } from "../../graphql/explorer/operations";	1✔
11	import { TbArrowRight } from "react-icons/tb";	1✔
12		1✔
13	export interface Entry {	1✔
14	appId: AddressType;	1✔
15	timestamp: number;	1✔
16	href: string;	1✔
17	}	1✔
18		1✔
19	export interface LatestInputsTableProps {	1✔
20	inputs: InputItemFragment[];	1✔
21	fetching: boolean;	1✔
22	totalCount: number;	1✔
23	}	1✔
24		1✔
25	const etherDepositResolver: MethodResolver = (input) =>	1✔
26	getAddress(input.msgSender) === etherPortalAddress && "depositEther";	115!
27		1✔
28	const erc20PortalResolver: MethodResolver = (input) =>	1✔
29	getAddress(input.msgSender) === erc20PortalAddress && "depositERC20Tokens";	115!
30		1✔
31	const resolvers: MethodResolver[] = [etherDepositResolver, erc20PortalResolver];	1✔
32	const methodResolver: MethodResolver = (input) => {	1✔
33	for (const resolver of resolvers) {	115✔
34	const method = resolver(input);	230✔
35	if (method) return method;	230!
36	}	230✔
37	return undefined;	115✔
38	};	115✔
39		1✔
40	const LatestInputsTable: FC<LatestInputsTableProps> = ({	1✔
41	inputs,	26✔
42	fetching,	26✔
43	totalCount,	26✔
44	}) => {	26✔
45	const [timeType, setTimeType] = useState("age");	26✔
46		26✔
47	const onChangeTimeColumnType = useCallback(() => {	26✔
48	setTimeType((timeType) => (timeType === "age" ? "timestamp" : "age"));	2!
49	}, []);	26✔
50		26✔
51	return (	26✔
52	<Table>	26✔
53	<Table.Thead>	26✔
54	<Table.Tr>	26✔
55	<Table.Th>From</Table.Th>	26✔
56	<Table.Th>Method</Table.Th>	26✔
57	<Table.Th>	26✔
58	<Button	26✔
59	variant="transparent"	26✔
60	px={0}	26✔
61	onClick={onChangeTimeColumnType}	26✔
62	>	26✔
63	{timeType === "age" ? "Age" : "Timestamp (UTC)"}	26✔
64	</Button>	26✔
65	</Table.Th>	26✔
66	</Table.Tr>	26✔
67	</Table.Thead>	26✔
68	<Table.Tbody>	26✔
69	{fetching ? (	26✔
70	<Table.Tr>	1✔
71	<Table.Td align="center" colSpan={2}>	1✔
72	<Loader data-testid="inputs-table-spinner" />	1✔
73	</Table.Td>	1✔
74	</Table.Tr>	1✔
75	) : (	25✔
76	totalCount === 0 && (	25✔
77	<Table.Tr>	1✔
78	<Table.Td colSpan={3} align="center" fw={700}>	1✔
79	No inputs	1✔
80	</Table.Td>	1✔
81	</Table.Tr>	1✔
82	)	26✔
83	)}	26✔
84	{inputs.map((input) => (	26✔
85	<Table.Tr key={`${input.application}-${input.timestamp}`}>	115✔
86	<Table.Td>	115✔
87	<Box	115✔
88	display="flex"	115✔
89	w="max-content"	115✔
90	style={{	115✔
91	alignItems: "center",	115✔
92	justifyContent: "center",	115✔
93	}}	115✔
94	>	115✔
95	{input.erc20Deposit ? (	115!
96	<Group>	×
97	<Address	×
98	value={	×
99	input.erc20Deposit	×
100	.from as AddressType	×
101	}	×
102	icon	×
103	shorten	×
104	/>	×
105	<TbArrowRight />	×
106	<Address	×
107	value={	×
108	input.msgSender as AddressType	×
109	}	×
110	icon	×
111	shorten	×
112	/>	×
113	</Group>	×
114	) : (	115✔
115	<Address	115✔
116	value={input.msgSender as AddressType}	115✔
117	icon	115✔
118	shorten	115✔
119	/>	115✔
120	)}	115✔
121	</Box>	115✔
122	</Table.Td>	115✔
123	<Table.Td>	115✔
124	<Badge	115✔
125	variant="default"	115✔
126	style={{ textTransform: "none" }}	115✔
127	>	115✔
128	{methodResolver(input) ?? "?"}	115✔
129	</Badge>	115✔
130	</Table.Td>	115✔
131	<Table.Td>	115✔
132	<Text>	115✔
133	{timeType === "age"	115✔
134	? `${prettyMilliseconds(	113✔
135	Date.now() - input.timestamp * 1000,	113✔
136	{	113✔
137	unitCount: 2,	113✔
138	secondsDecimalDigits: 0,	113✔
139	verbose: true,	113✔
140	},	113✔
141	)} ago`	113✔
142	: new Date(	2✔
143	input.timestamp * 1000,	2✔
144	).toISOString()}	2✔
145	</Text>	115✔
146	</Table.Td>	115✔
147	</Table.Tr>	115✔
148	))}	26✔
149	</Table.Tbody>	26✔
150	</Table>	26✔
151	);	26✔
152	};	26✔
153		1✔
154	export default LatestInputsTable;	1✔

cartesi / rollups-explorer / 8962206712

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