cartesi/rollups-explorer | Build 8646114439 | apps/web/src/components/layout/shell.tsx | Coveralls

1

"use client";

1✔

2

import {

1✔

3

    AppShell,

1✔

4

    Burger,

1✔

5

    Button,

1✔

6

    Collapse,

1✔

7

    Group,

1✔

8

    Modal,

1✔

9

    NavLink,

1✔

10

    Stack,

1✔

11

    Switch,

1✔

12

    useMantineColorScheme,

1✔

13

    useMantineTheme,

1✔

14

} from "@mantine/core";

1✔

15

import { useDisclosure, useMediaQuery } from "@mantine/hooks";

1✔

16

import { ConnectButton } from "@rainbow-me/rainbowkit";

1✔

17

import Link from "next/link";

1✔

18

import { FC, ReactNode } from "react";

1✔

19

import {

1✔

20

    TbAdjustmentsHorizontal,

1✔

21

    TbApps,

1✔

22

    TbArrowsDownUp,

1✔

23

    TbChevronDown,

1✔

24

    TbChevronUp,

1✔

25

    TbHome,

1✔

26

    TbInbox,

1✔

27

    TbMoonStars,

1✔

28

    TbPlugConnected,

1✔

29

    TbSun,

1✔

30

} from "react-icons/tb";

1✔

31

import { useAccount } from "wagmi";

1✔

32

import CartesiLogo from "../../components/cartesiLogo";

1✔

33

import Footer from "../../components/layout/footer";

1✔

34

import SendTransaction from "../../components/sendTransaction";

1✔

35

1✔

36

const Shell: FC<{ children: ReactNode }> = ({ children }) => {

1✔

37

    const [opened, { toggle }] = useDisclosure();

15✔

38

    const [settingsOpened, { toggle: toggleSettings }] = useDisclosure(false);

15✔

39

    const [

15✔

40

        transaction,

15✔

41

15✔

42

            open: openTransaction,

15✔

43

            close: closeTransaction,

15✔

44

            toggle: toggleTransaction,

15✔

45

},

15✔

46

    ] = useDisclosure(false);

15✔

47

    const theme = useMantineTheme();

15✔

48

    const showWalletNavbar = useMediaQuery(

15✔

49

        `(min-width:${theme.breakpoints.sm})`,

15✔

50

);

15✔

51

    const showWalletSidebar = useMediaQuery(`(max-width:${767}px)`);

15✔

52

    const hideBalanceViewport = useMediaQuery(

15✔

53

        `(min-width:${theme.breakpoints.sm}) and (max-width:${50}em)`,

15✔

54

);

15✔

55

    const { isConnected } = useAccount();

15✔

56

    const { colorScheme, toggleColorScheme } = useMantineColorScheme();

15✔

58

15✔

59

    return (

15✔

60

        <AppShell

15✔

61

            header={themeDefaultProps.header}

15✔

62

            navbar={{

15✔

63

                ...themeDefaultProps?.navbar,

15✔

64

                width: 180,

15✔

65

                collapsed: {

15✔

66

                    mobile: !opened,

15✔

67

},

15✔

68

}}

15✔

69

            padding="md"

15✔

70

15✔

71

            <Modal

15✔

72

                opened={transaction}

15✔

73

                onClose={closeTransaction}

15✔

74

                title="Send Transaction"

15✔

75

15✔

76

                <SendTransaction />

15✔

77

            </Modal>

15✔

78

            <AppShell.Header data-testid="header">

15✔

79

                <Group h="100%" px="md">

15✔

80

                    <Burger

15✔

81

                        opened={opened}

15✔

82

                        onClick={toggle}

15✔

83

                        hiddenFrom="sm"

15✔

84

                        size="sm"

15✔

85

/>

15✔

86

                    <Group justify="space-between" style={{ flex: 1 }}>

15✔

87

                        <Link href="/">

15✔

88

                            <CartesiLogo height={40} />

15✔

89

                        </Link>

15✔

90

                        <Group ml={{ lg: "xl" }} gap="md">

15✔

91

                            <Button

15✔

92

                                variant="subtle"

15✔

93

                                leftSection={<TbArrowsDownUp />}

15✔

94

                                onClick={openTransaction}

15✔

95

                                disabled={!isConnected}

15✔

96

                                visibleFrom="sm"

15✔

97

                                data-testid="transaction-button"

15✔

98

15✔

99

                                Send Transaction

15✔

100

                            </Button>

15✔

105

)}

15✔

106

                            <Switch

15✔

107

                                checked={colorScheme === "dark"}

15✔

108

                                onChange={() => toggleColorScheme()}

15✔

109

                                size="md"

15✔

110

                                onLabel={

15✔

111

                                    <TbSun color={theme.white} size="1rem" />

15✔

112

15✔

113

                                offLabel={

15✔

114

                                    <TbMoonStars

15✔

115

                                        color={theme.colors.gray[6]}

15✔

116

                                        size="1rem"

15✔

117

/>

15✔

118

15✔

119

/>

15✔

120

                        </Group>

15✔

121

                    </Group>

15✔

122

                </Group>

15✔

123

            </AppShell.Header>

15✔

124

            <AppShell.Navbar py="md" px={4} data-testid="navbar">

15✔

125

                <Stack px={13}>

15✔

126

                    <NavLink

15✔

127

                        component={Link}

15✔

128

                        label="Home"

15✔

129

                        href="/"

15✔

130

                        leftSection={<TbHome />}

15✔

131

                        onClick={toggle}

15✔

132

                        data-testid="home-link"

15✔

133

/>

15✔

134

15✔

135

                    <NavLink

15✔

136

                        component={Link}

15✔

137

                        label="Applications"

15✔

138

                        onClick={toggle}

15✔

139

                        href="/applications"

15✔

140

                        leftSection={<TbApps />}

15✔

141

                        data-testid="applications-link"

15✔

142

/>

15✔

143

15✔

144

                    <NavLink

15✔

145

                        component={Link}

15✔

146

                        label="Inputs"

15✔

147

                        onClick={toggle}

15✔

148

                        href="/inputs"

15✔

149

                        leftSection={<TbInbox />}

15✔

150

                        data-testid="inputs-link"

15✔

151

/>

15✔

152

15✔

153

                    <NavLink

15✔

154

                        label="Send Transaction"

15✔

155

                        leftSection={<TbArrowsDownUp />}

15✔

156

                        disabled={!isConnected}

15✔

157

                        onClick={toggleTransaction}

15✔

158

                        hiddenFrom="sm"

15✔

159

/>

15✔

160

15✔

161

                    <NavLink

15✔

162

                        label="Settings"

15✔

163

                        leftSection={<TbAdjustmentsHorizontal />}

15✔

164

                        rightSection={

15✔

165

                            settingsOpened ? (

15✔

166

                                <TbChevronUp size={theme.other.iconSize} />

1✔

167

                            ) : (

14✔

168

                                <TbChevronDown size={theme.other.iconSize} />

14✔

169

15✔

170

15✔

171

                        onClick={toggleSettings}

15✔

172

                        data-testid="settings-link"

15✔

173

/>

15✔

174

15✔

175

                    <Collapse in={settingsOpened}>

15✔

176

                        <NavLink

15✔

177

                            component={Link}

15✔

178

                            label="Connections"

15✔

179

                            leftSection={<TbPlugConnected />}

15✔

180

                            href="/connections"

15✔

181

                            data-testid="connections-link"

15✔

182

/>

15✔

183

                    </Collapse>

15✔

184

15✔

186

                </Stack>

15✔

187

            </AppShell.Navbar>

15✔

188

            <AppShell.Main>{children}</AppShell.Main>

15✔

189

            <Footer />

15✔

190

        </AppShell>

15✔

191

);

15✔

192

};

15✔

193

export default Shell;

1✔

cartesi / rollups-explorer / 8646114439

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

1	"use client";	1✔
2	import {	1✔
3	AppShell,	1✔
4	Burger,	1✔
5	Button,	1✔
6	Collapse,	1✔
7	Group,	1✔
8	Modal,	1✔
9	NavLink,	1✔
10	Stack,	1✔
11	Switch,	1✔
12	useMantineColorScheme,	1✔
13	useMantineTheme,	1✔
14	} from "@mantine/core";	1✔
15	import { useDisclosure, useMediaQuery } from "@mantine/hooks";	1✔
16	import { ConnectButton } from "@rainbow-me/rainbowkit";	1✔
17	import Link from "next/link";	1✔
18	import { FC, ReactNode } from "react";	1✔
19	import {	1✔
20	TbAdjustmentsHorizontal,	1✔
21	TbApps,	1✔
22	TbArrowsDownUp,	1✔
23	TbChevronDown,	1✔
24	TbChevronUp,	1✔
25	TbHome,	1✔
26	TbInbox,	1✔
27	TbMoonStars,	1✔
28	TbPlugConnected,	1✔
29	TbSun,	1✔
30	} from "react-icons/tb";	1✔
31	import { useAccount } from "wagmi";	1✔
32	import CartesiLogo from "../../components/cartesiLogo";	1✔
33	import Footer from "../../components/layout/footer";	1✔
34	import SendTransaction from "../../components/sendTransaction";	1✔
35		1✔
36	const Shell: FC<{ children: ReactNode }> = ({ children }) => {	1✔
37	const [opened, { toggle }] = useDisclosure();	15✔
38	const [settingsOpened, { toggle: toggleSettings }] = useDisclosure(false);	15✔
39	const [	15✔
40	transaction,	15✔
41	{	15✔
42	open: openTransaction,	15✔
43	close: closeTransaction,	15✔
44	toggle: toggleTransaction,	15✔
45	},	15✔
46	] = useDisclosure(false);	15✔
47	const theme = useMantineTheme();	15✔
48	const showWalletNavbar = useMediaQuery(	15✔
49	`(min-width:${theme.breakpoints.sm})`,	15✔
50	);	15✔
51	const showWalletSidebar = useMediaQuery(`(max-width:${767}px)`);	15✔
52	const hideBalanceViewport = useMediaQuery(	15✔
53	`(min-width:${theme.breakpoints.sm}) and (max-width:${50}em)`,	15✔
54	);	15✔
55	const { isConnected } = useAccount();	15✔
56	const { colorScheme, toggleColorScheme } = useMantineColorScheme();	15✔
57	const themeDefaultProps = theme.components?.AppShell?.defaultProps ?? {};	15!
58		15✔
59	return (	15✔
60	<AppShell	15✔
61	header={themeDefaultProps.header}	15✔
62	navbar={{	15✔
63	...themeDefaultProps?.navbar,	15✔
64	width: 180,	15✔
65	collapsed: {	15✔
66	mobile: !opened,	15✔
67	},	15✔
68	}}	15✔
69	padding="md"	15✔
70	>	15✔
71	<Modal	15✔
72	opened={transaction}	15✔
73	onClose={closeTransaction}	15✔
74	title="Send Transaction"	15✔
75	>	15✔
76	<SendTransaction />	15✔
77	</Modal>	15✔
78	<AppShell.Header data-testid="header">	15✔
79	<Group h="100%" px="md">	15✔
80	<Burger	15✔
81	opened={opened}	15✔
82	onClick={toggle}	15✔
83	hiddenFrom="sm"	15✔
84	size="sm"	15✔
85	/>	15✔
86	<Group justify="space-between" style={{ flex: 1 }}>	15✔
87	<Link href="/">	15✔
88	<CartesiLogo height={40} />	15✔
89	</Link>	15✔
90	<Group ml={{ lg: "xl" }} gap="md">	15✔
91	<Button	15✔
92	variant="subtle"	15✔
93	leftSection={<TbArrowsDownUp />}	15✔
94	onClick={openTransaction}	15✔
95	disabled={!isConnected}	15✔
96	visibleFrom="sm"	15✔
97	data-testid="transaction-button"	15✔
98	>	15✔
99	Send Transaction	15✔
100	</Button>	15✔
101	{showWalletNavbar && (	15!
102	<ConnectButton	×
UNCOV 103	showBalance={!hideBalanceViewport}	×
UNCOV 104	/>	×
105	)}	15✔
106	<Switch	15✔
107	checked={colorScheme === "dark"}	15✔
108	onChange={() => toggleColorScheme()}	15✔
109	size="md"	15✔
110	onLabel={	15✔
111	<TbSun color={theme.white} size="1rem" />	15✔
112	}	15✔
113	offLabel={	15✔
114	<TbMoonStars	15✔
115	color={theme.colors.gray[6]}	15✔
116	size="1rem"	15✔
117	/>	15✔
118	}	15✔
119	/>	15✔
120	</Group>	15✔
121	</Group>	15✔
122	</Group>	15✔
123	</AppShell.Header>	15✔
124	<AppShell.Navbar py="md" px={4} data-testid="navbar">	15✔
125	<Stack px={13}>	15✔
126	<NavLink	15✔
127	component={Link}	15✔
128	label="Home"	15✔
129	href="/"	15✔
130	leftSection={<TbHome />}	15✔
131	onClick={toggle}	15✔
132	data-testid="home-link"	15✔
133	/>	15✔
134		15✔
135	<NavLink	15✔
136	component={Link}	15✔
137	label="Applications"	15✔
138	onClick={toggle}	15✔
139	href="/applications"	15✔
140	leftSection={<TbApps />}	15✔
141	data-testid="applications-link"	15✔
142	/>	15✔
143		15✔
144	<NavLink	15✔
145	component={Link}	15✔
146	label="Inputs"	15✔
147	onClick={toggle}	15✔
148	href="/inputs"	15✔
149	leftSection={<TbInbox />}	15✔
150	data-testid="inputs-link"	15✔
151	/>	15✔
152		15✔
153	<NavLink	15✔
154	label="Send Transaction"	15✔
155	leftSection={<TbArrowsDownUp />}	15✔
156	disabled={!isConnected}	15✔
157	onClick={toggleTransaction}	15✔
158	hiddenFrom="sm"	15✔
159	/>	15✔
160		15✔
161	<NavLink	15✔
162	label="Settings"	15✔
163	leftSection={<TbAdjustmentsHorizontal />}	15✔
164	rightSection={	15✔
165	settingsOpened ? (	15✔
166	<TbChevronUp size={theme.other.iconSize} />	1✔
167	) : (	14✔
168	<TbChevronDown size={theme.other.iconSize} />	14✔
169	)	15✔
170	}	15✔
171	onClick={toggleSettings}	15✔
172	data-testid="settings-link"	15✔
173	/>	15✔
174		15✔
175	<Collapse in={settingsOpened}>	15✔
176	<NavLink	15✔
177	component={Link}	15✔
178	label="Connections"	15✔
179	leftSection={<TbPlugConnected />}	15✔
180	href="/connections"	15✔
181	data-testid="connections-link"	15✔
182	/>	15✔
183	</Collapse>	15✔
184		15✔
185	{showWalletSidebar && <ConnectButton showBalance />}	15!
186	</Stack>	15✔
187	</AppShell.Navbar>	15✔
188	<AppShell.Main>{children}</AppShell.Main>	15✔
189	<Footer />	15✔
190	</AppShell>	15✔
191	);	15✔
192	};	15✔
193	export default Shell;	1✔

cartesi / rollups-explorer / 8646114439

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