11943333351

Committed 20 Nov 2024 11:09PM UTC coverage: 86.535% (-0.07%) from 86.605%

Build # 11943333351

Build Type

push

github

Committed by

brunomenezes

Commit Message

chore(ci): Set the Preview endpoint when available in the CI settings.

Run Details

1276 of 1529 branches covered (83.45%)

Branch coverage included in aggregate %.

9077 of 10435 relevant lines covered (86.99%)

44.89 hits per line

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

95.93

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

"use client";

import { SummaryCard } from "@cartesi/rollups-explorer-ui";
import {
    Button,
    Card,
    Flex,
    Grid,
    Group,
    Skeleton,
    Stack,
    Text,
    useMantineTheme,
} from "@mantine/core";
import { useMediaQuery } from "@mantine/hooks";
import Link from "next/link";
import { FC } from "react";
import { TbInbox } from "react-icons/tb";
import { Address } from "viem";
import { useInputsConnectionQuery } from "../../graphql/explorer/hooks/queries";
import { InputOrderByInput, RollupVersion } from "../../graphql/explorer/types";
import getConfiguredChainId from "../../lib/getConfiguredChain";
import { useConnectionConfig } from "../../providers/connectionConfig/hooks";
import ConnectionSummary from "../connection/connectionSummary";
import LatestInputsTable from "./latestInputsTable";

const SummarySkeletonCard = () => (
    <Card shadow="xs" w="100%">
        <Skeleton animate={false} height={20} circle mb={18} />
        <Skeleton animate={false} height={8} radius="xl" />
        <Skeleton animate={false} height={8} mt={6} radius="xl" />
        <Skeleton animate={false} height={8} mt={6} width="70%" radius="xl" />
    </Card>
);

export type ApplicationSummaryProps = {
    appAddress: string;
    appVersion: RollupVersion;
};

const ApplicationSummary: FC<ApplicationSummaryProps> = ({
    appAddress,
    appVersion,
}) => {
    const chainId = getConfiguredChainId();
    const [{ data, fetching }] = useInputsConnectionQuery({
        variables: {
            orderBy: InputOrderByInput.TimestampDesc,
            limit: 6,
            where: {
                application: {
                    address_eq: appAddress.toLowerCase(),
                    rollupVersion_eq: appVersion,
                    chain: {
                        id_eq: chainId,
                    },
                },
            },
        },
    });
    const inputs = data?.inputsConnection.edges.map((edge) => edge.node) ?? [];
    const inputsTotalCount = data?.inputsConnection.totalCount ?? 0;

    const { getConnection, hasConnection, showConnectionModal } =
        useConnectionConfig();
    const connection = getConnection(appAddress as Address);
    const isAppConnected = hasConnection(appAddress as Address);
    const theme = useMantineTheme();
    const isSmallDevice = useMediaQuery(`(max-width:${theme.breakpoints.sm})`);

    return (
        <Stack>
            <Grid gutter="sm">
                <Grid.Col span={{ base: 12, sm: 6, md: 3 }} mb="sm">
                    <SummaryCard
                        title="Inputs"
                        value={data?.inputsConnection?.totalCount ?? 0}
                        icon={TbInbox}
                    />
                </Grid.Col>

                {isAppConnected ? (
                    <ConnectionSummary url={connection?.url as string} />
                ) : (
                    <Grid.Col
                        span={{ base: 12, sm: 6, md: 9 }}
                        mb="sm"
                        data-testid="skeleton"
                    >
                        <Flex m={0} p={0} gap="sm" w="100%">
                            <SummarySkeletonCard />
                            <SummarySkeletonCard />
                            <SummarySkeletonCard />
                        </Flex>
                    </Grid.Col>
                )}

                {!isAppConnected && (
                    <Flex justify="center" w="100%" mb="1.5rem">
                        <Button
                            variant="light"
                            radius="md"
                            tt="uppercase"
                            mx={6}
                            fullWidth={isSmallDevice}
                            data-testid="add-connection"
                            onClick={() =>
                                showConnectionModal(appAddress as Address)
                            }
                        >
                            Add connection
                        </Button>
                    </Flex>
                )}

                <Card w="100%" h="100%" mt="md" mx={6}>
                    <Group gap={5} align="center">
                        <TbInbox size={20} />
                        <Text c="dimmed" lh={1}>
                            Latest inputs
                        </Text>
                    </Group>

                    <Group gap={5}>
                        <LatestInputsTable
                            inputs={inputs}
                            fetching={fetching}
                            totalCount={inputsTotalCount}
                        />
                    </Group>

                    {inputsTotalCount > 0 && (
                        <Group gap={5} mt="auto">
                            <Button
                                component={Link}
                                href={`/applications/${appAddress}/${appVersion}/inputs`}
                                variant="light"
                                fullWidth={isSmallDevice}
                                mt="md"
                                mx="auto"
                                radius="md"
                                tt="uppercase"
                            >
                                View inputs
                            </Button>
                        </Group>
                    )}
                </Card>
            </Grid>
        </Stack>
    );
};

export default ApplicationSummary;

1	"use client";	1✔
2
3	import { SummaryCard } from "@cartesi/rollups-explorer-ui";	1✔
4	import {
5	Button,
6	Card,
7	Flex,
8	Grid,
9	Group,
10	Skeleton,
11	Stack,
12	Text,
13	useMantineTheme,
14	} from "@mantine/core";	1✔
15	import { useMediaQuery } from "@mantine/hooks";	1✔
16	import Link from "next/link";	1✔
17	import { FC } from "react";
18	import { TbInbox } from "react-icons/tb";	1✔
19	import { Address } from "viem";
20	import { useInputsConnectionQuery } from "../../graphql/explorer/hooks/queries";	1✔
21	import { InputOrderByInput, RollupVersion } from "../../graphql/explorer/types";	1✔
22	import getConfiguredChainId from "../../lib/getConfiguredChain";	1✔
23	import { useConnectionConfig } from "../../providers/connectionConfig/hooks";	1✔
24	import ConnectionSummary from "../connection/connectionSummary";	1✔
25	import LatestInputsTable from "./latestInputsTable";	1✔
26
27	const SummarySkeletonCard = () => (	1✔
28	<Card shadow="xs" w="100%">	54✔
29	<Skeleton animate={false} height={20} circle mb={18} />	54✔
30	<Skeleton animate={false} height={8} radius="xl" />	54✔
31	<Skeleton animate={false} height={8} mt={6} radius="xl" />	54✔
32	<Skeleton animate={false} height={8} mt={6} width="70%" radius="xl" />	54✔
33	</Card>	54✔
34	);
35
36	export type ApplicationSummaryProps = {
37	appAddress: string;
38	appVersion: RollupVersion;
39	};
40
41	const ApplicationSummary: FC<ApplicationSummaryProps> = ({	1✔
42	appAddress,	18✔
43	appVersion,	18✔
44	}) => {	18✔
45	const chainId = getConfiguredChainId();	18✔
46	const [{ data, fetching }] = useInputsConnectionQuery({	18✔
47	variables: {	18✔
48	orderBy: InputOrderByInput.TimestampDesc,	18✔
49	limit: 6,	18✔
50	where: {	18✔
51	application: {	18✔
52	address_eq: appAddress.toLowerCase(),	18✔
53	rollupVersion_eq: appVersion,	18✔
54	chain: {	18✔
55	id_eq: chainId,	18✔
56	},	18✔
57	},	18✔
58	},	18✔
59	},	18✔
60	});	18✔
61	const inputs = data?.inputsConnection.edges.map((edge) => edge.node) ?? [];	18!
62	const inputsTotalCount = data?.inputsConnection.totalCount ?? 0;	18!
63
64	const { getConnection, hasConnection, showConnectionModal } =	18✔
65	useConnectionConfig();	18✔
66	const connection = getConnection(appAddress as Address);	18✔
67	const isAppConnected = hasConnection(appAddress as Address);	18✔
68	const theme = useMantineTheme();	18✔
69	const isSmallDevice = useMediaQuery(`(max-width:${theme.breakpoints.sm})`);	18✔
70
71	return (	18✔
72	<Stack>	18✔
73	<Grid gutter="sm">	18✔
74	<Grid.Col span={{ base: 12, sm: 6, md: 3 }} mb="sm">	18✔
75	<SummaryCard	18✔
76	title="Inputs"	18✔
77	value={data?.inputsConnection?.totalCount ?? 0}	18!
78	icon={TbInbox}	18✔
79	/>	18✔
80	</Grid.Col>	18✔
81
82	{isAppConnected ? (	18!
83	<ConnectionSummary url={connection?.url as string} />	×
84	) : (
85	<Grid.Col	18✔
86	span={{ base: 12, sm: 6, md: 9 }}	18✔
87	mb="sm"	18✔
88	data-testid="skeleton"	18✔
89	>
90	<Flex m={0} p={0} gap="sm" w="100%">	18✔
91	<SummarySkeletonCard />	18✔
92	<SummarySkeletonCard />	18✔
93	<SummarySkeletonCard />	18✔
94	</Flex>	18✔
95	</Grid.Col>	18✔
96	)}
97
98	{!isAppConnected && (	18✔
99	<Flex justify="center" w="100%" mb="1.5rem">	18✔
100	<Button	18✔
101	variant="light"	18✔
102	radius="md"	18✔
103	tt="uppercase"	18✔
104	mx={6}	18✔
105	fullWidth={isSmallDevice}	18✔
106	data-testid="add-connection"	18✔
107	onClick={() =>	18✔
108	showConnectionModal(appAddress as Address)	1✔
109	}
110	>	18✔
111	Add connection
112	</Button>	18✔
113	</Flex>	18✔
114	)}
115
116	<Card w="100%" h="100%" mt="md" mx={6}>	18✔
117	<Group gap={5} align="center">	18✔
118	<TbInbox size={20} />	18✔
119	<Text c="dimmed" lh={1}>	18✔
120	Latest inputs
121	</Text>	18✔
122	</Group>	18✔
123
124	<Group gap={5}>	18✔
125	<LatestInputsTable	18✔
126	inputs={inputs}	18✔
127	fetching={fetching}	18✔
128	totalCount={inputsTotalCount}	18✔
129	/>	18✔
130	</Group>	18✔
131
132	{inputsTotalCount > 0 && (	18✔
133	<Group gap={5} mt="auto">	18✔
134	<Button	18✔
135	component={Link}	18✔
136	href={`/applications/${appAddress}/${appVersion}/inputs`}	18✔
137	variant="light"	18✔
138	fullWidth={isSmallDevice}	18✔
139	mt="md"	18✔
140	mx="auto"	18✔
141	radius="md"	18✔
142	tt="uppercase"	18✔
143	>	18✔
144	View inputs
145	</Button>	18✔
146	</Group>	18✔
147	)}
148	</Card>	18✔
149	</Grid>	18✔
150	</Stack>	18✔
151	);
152	};	18✔
153
154	export default ApplicationSummary;	1✔

cartesi / rollups-explorer / 11943333351

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