cartesi/rollups-explorer | Build 8829449862 | 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✔

57

        keepTransitions: true,

15✔

58

});

15✔

60

15✔

61

    return (

15✔

62

        <AppShell

15✔

63

            header={themeDefaultProps.header}

15✔

64

            navbar={{

15✔

65

                ...themeDefaultProps?.navbar,

15✔

66

                width: 180,

15✔

67

                collapsed: {

15✔

68

                    mobile: !opened,

15✔

69

},

15✔

70

}}

15✔

71

            padding="md"

15✔

72

15✔

73

            <Modal

15✔

74

                opened={transaction}

15✔

75

                onClose={closeTransaction}

15✔

76

                title="Send Transaction"

15✔

77

15✔

78

                <SendTransaction />

15✔

79

            </Modal>

15✔

80

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

15✔

81

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

15✔

82

                    <Burger

15✔

83

                        opened={opened}

15✔

84

                        onClick={toggle}

15✔

85

                        hiddenFrom="sm"

15✔

86

                        size="sm"

15✔

87

/>

15✔

88

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

15✔

89

                        <Link href="/">

15✔

90

                            <CartesiLogo height={40} />

15✔

91

                        </Link>

15✔

92

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

15✔

93

                            <Button

15✔

94

                                variant="subtle"

15✔

95

                                leftSection={<TbArrowsDownUp />}

15✔

96

                                onClick={openTransaction}

15✔

97

                                disabled={!isConnected}

15✔

98

                                visibleFrom="sm"

15✔

99

                                data-testid="transaction-button"

15✔

100

15✔

101

                                Send Transaction

15✔

102

                            </Button>

15✔

107

)}

15✔

108

                            <Switch

15✔

109

                                checked={colorScheme === "dark"}

15✔

110

                                onChange={() => toggleColorScheme()}

15✔

111

                                size="md"

15✔

112

                                onLabel={

15✔

113

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

15✔

114

15✔

115

                                offLabel={

15✔

116

                                    <TbMoonStars

15✔

117

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

15✔

118

                                        size="1rem"

15✔

119

/>

15✔

120

15✔

121

/>

15✔

122

                        </Group>

15✔

123

                    </Group>

15✔

124

                </Group>

15✔

125

            </AppShell.Header>

15✔

126

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

15✔

127

                <Stack px={13}>

15✔

128

                    <NavLink

15✔

129

                        component={Link}

15✔

130

                        label="Home"

15✔

131

                        href="/"

15✔

132

                        leftSection={<TbHome />}

15✔

133

                        onClick={toggle}

15✔

134

                        data-testid="home-link"

15✔

135

/>

15✔

136

15✔

137

                    <NavLink

15✔

138

                        component={Link}

15✔

139

                        label="Applications"

15✔

140

                        onClick={toggle}

15✔

141

                        href="/applications"

15✔

142

                        leftSection={<TbApps />}

15✔

143

                        data-testid="applications-link"

15✔

144

/>

15✔

145

15✔

146

                    <NavLink

15✔

147

                        component={Link}

15✔

148

                        label="Inputs"

15✔

149

                        onClick={toggle}

15✔

150

                        href="/inputs"

15✔

151

                        leftSection={<TbInbox />}

15✔

152

                        data-testid="inputs-link"

15✔

153

/>

15✔

154

15✔

155

                    <NavLink

15✔

156

                        label="Send Transaction"

15✔

157

                        leftSection={<TbArrowsDownUp />}

15✔

158

                        disabled={!isConnected}

15✔

159

                        onClick={toggleTransaction}

15✔

160

                        hiddenFrom="sm"

15✔

161

/>

15✔

162

15✔

163

                    <NavLink

15✔

164

                        label="Settings"

15✔

165

                        leftSection={<TbAdjustmentsHorizontal />}

15✔

166

                        rightSection={

15✔

167

                            settingsOpened ? (

15✔

168

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

1✔

169

                            ) : (

14✔

170

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

14✔

171

15✔

172

15✔

173

                        onClick={toggleSettings}

15✔

174

                        data-testid="settings-link"

15✔

175

/>

15✔

176

15✔

177

                    <Collapse in={settingsOpened}>

15✔

178

                        <NavLink

15✔

179

                            component={Link}

15✔

180

                            label="Connections"

15✔

181

                            leftSection={<TbPlugConnected />}

15✔

182

                            href="/connections"

15✔

183

                            data-testid="connections-link"

15✔

184

/>

15✔

185

                    </Collapse>

15✔

186

15✔

188

                </Stack>

15✔

189

            </AppShell.Navbar>

15✔

190

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

15✔

191

            <Footer />

15✔

192

        </AppShell>

15✔

193

);

15✔

194

};

15✔

195

export default Shell;

1✔

cartesi / rollups-explorer / 8829449862

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	keepTransitions: true,	15✔
58	});	15✔
59	const themeDefaultProps = theme.components?.AppShell?.defaultProps ?? {};	15!
60		15✔
61	return (	15✔
62	<AppShell	15✔
63	header={themeDefaultProps.header}	15✔
64	navbar={{	15✔
65	...themeDefaultProps?.navbar,	15✔
66	width: 180,	15✔
67	collapsed: {	15✔
68	mobile: !opened,	15✔
69	},	15✔
70	}}	15✔
71	padding="md"	15✔
72	>	15✔
73	<Modal	15✔
74	opened={transaction}	15✔
75	onClose={closeTransaction}	15✔
76	title="Send Transaction"	15✔
77	>	15✔
78	<SendTransaction />	15✔
79	</Modal>	15✔
80	<AppShell.Header data-testid="header">	15✔
81	<Group h="100%" px="md">	15✔
82	<Burger	15✔
83	opened={opened}	15✔
84	onClick={toggle}	15✔
85	hiddenFrom="sm"	15✔
86	size="sm"	15✔
87	/>	15✔
88	<Group justify="space-between" style={{ flex: 1 }}>	15✔
89	<Link href="/">	15✔
90	<CartesiLogo height={40} />	15✔
91	</Link>	15✔
92	<Group ml={{ lg: "xl" }} gap="md">	15✔
93	<Button	15✔
94	variant="subtle"	15✔
95	leftSection={<TbArrowsDownUp />}	15✔
96	onClick={openTransaction}	15✔
97	disabled={!isConnected}	15✔
98	visibleFrom="sm"	15✔
99	data-testid="transaction-button"	15✔
100	>	15✔
101	Send Transaction	15✔
102	</Button>	15✔
103	{showWalletNavbar && (	15!
UNCOV 104	<ConnectButton	×
UNCOV 105	showBalance={!hideBalanceViewport}	×
UNCOV 106	/>	×
107	)}	15✔
108	<Switch	15✔
109	checked={colorScheme === "dark"}	15✔
110	onChange={() => toggleColorScheme()}	15✔
111	size="md"	15✔
112	onLabel={	15✔
113	<TbSun color={theme.white} size="1rem" />	15✔
114	}	15✔
115	offLabel={	15✔
116	<TbMoonStars	15✔
117	color={theme.colors.gray[6]}	15✔
118	size="1rem"	15✔
119	/>	15✔
120	}	15✔
121	/>	15✔
122	</Group>	15✔
123	</Group>	15✔
124	</Group>	15✔
125	</AppShell.Header>	15✔
126	<AppShell.Navbar py="md" px={4} data-testid="navbar">	15✔
127	<Stack px={13}>	15✔
128	<NavLink	15✔
129	component={Link}	15✔
130	label="Home"	15✔
131	href="/"	15✔
132	leftSection={<TbHome />}	15✔
133	onClick={toggle}	15✔
134	data-testid="home-link"	15✔
135	/>	15✔
136		15✔
137	<NavLink	15✔
138	component={Link}	15✔
139	label="Applications"	15✔
140	onClick={toggle}	15✔
141	href="/applications"	15✔
142	leftSection={<TbApps />}	15✔
143	data-testid="applications-link"	15✔
144	/>	15✔
145		15✔
146	<NavLink	15✔
147	component={Link}	15✔
148	label="Inputs"	15✔
149	onClick={toggle}	15✔
150	href="/inputs"	15✔
151	leftSection={<TbInbox />}	15✔
152	data-testid="inputs-link"	15✔
153	/>	15✔
154		15✔
155	<NavLink	15✔
156	label="Send Transaction"	15✔
157	leftSection={<TbArrowsDownUp />}	15✔
158	disabled={!isConnected}	15✔
159	onClick={toggleTransaction}	15✔
160	hiddenFrom="sm"	15✔
161	/>	15✔
162		15✔
163	<NavLink	15✔
164	label="Settings"	15✔
165	leftSection={<TbAdjustmentsHorizontal />}	15✔
166	rightSection={	15✔
167	settingsOpened ? (	15✔
168	<TbChevronUp size={theme.other.iconSize} />	1✔
169	) : (	14✔
170	<TbChevronDown size={theme.other.iconSize} />	14✔
171	)	15✔
172	}	15✔
173	onClick={toggleSettings}	15✔
174	data-testid="settings-link"	15✔
175	/>	15✔
176		15✔
177	<Collapse in={settingsOpened}>	15✔
178	<NavLink	15✔
179	component={Link}	15✔
180	label="Connections"	15✔
181	leftSection={<TbPlugConnected />}	15✔
182	href="/connections"	15✔
183	data-testid="connections-link"	15✔
184	/>	15✔
185	</Collapse>	15✔
186		15✔
187	{showWalletSidebar && <ConnectButton showBalance />}	15!
188	</Stack>	15✔
189	</AppShell.Navbar>	15✔
190	<AppShell.Main>{children}</AppShell.Main>	15✔
191	<Footer />	15✔
192	</AppShell>	15✔
193	);	15✔
194	};	15✔
195	export default Shell;	1✔

cartesi / rollups-explorer / 8829449862

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