cleanengine-fe/src/app/root.tsx at 0787dc0091e7c9a79c3060530ee7bfa65fa8ef0b · CleanEngine/cleanengine-fe · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
import {
	Links,
	Meta,
	Outlet,
	Scripts,
	ScrollRestoration,
	isRouteErrorResponse,
} from 'react-router';
import { ToastContainer } from 'react-toastify/unstyled';
import 'react-toastify/ReactToastify.css';
import type { Route } from './+types/root';

import './app.css';
import { Slide } from 'react-toastify';
import useTradeNotification from '~/features/trade/hooks/useTradeNotification';
import StompProvider from './provider/StompProvider';
import UserIdProvider from './provider/UserInfoProvider';

export const links: Route.LinksFunction = () => [
	{ rel: 'preconnect', href: 'https://fonts.googleapis.com' },
	{
		rel: 'preconnect',
		href: 'https://fonts.gstatic.com',
		crossOrigin: 'anonymous',
	},
	{
		rel: 'stylesheet',
		href: 'https://fonts.googleapis.com/css2?family=Inter:ital,opsz,wght@0,14..32,100..900;1,14..32,100..900&display=swap',
	},
	{
		rel: 'manifest',
		href: '/site.webmanifest',
	},
	{
		rel: 'apple-touch-icon',
		href: '/apple-touch-icon.png',
		sizes: '180x180',
	},
	{
		rel: 'icon',
		href: '/favicon-16x16.png',
		type: 'image/png',
		sizes: '16x16',
	},
	{
		rel: 'icon',
		href: '/favicon-32x32.png',
		type: 'image/png',
		sizes: '32x32',
	},
];

export function meta() {
	return [
		{
			title: 'Invest Future',
		},
	];
}

export function Layout({ children }: { children: React.ReactNode }) {
	return (
		<html lang="en">
			<head>
				<meta charSet="utf-8" />
				<meta name="viewport" content="width=device-width, initial-scale=1" />
				<Meta />
				<Links />
			</head>
			<body className="h-dvh font-display">
				{children}
				<ScrollRestoration />
				<Scripts />
			</body>
		</html>
	);
}

function TradeNotificationHandler() {
	useTradeNotification();
	return null;
}

export default function App() {
	return (
		<UserIdProvider>
			<StompProvider
				brokerURL={`${import.meta.env.VITE_STOMP_URL}/api/coin/min`}
			>
				<Outlet />
				<ToastContainer
					position="top-center"
					autoClose={5000}
					hideProgressBar={false}
					newestOnTop={false}
					closeOnClick={false}
					rtl={false}
					pauseOnFocusLoss
					draggable
					pauseOnHover
					theme="light"
					transition={Slide}
					stacked
				/>
			</StompProvider>
		</UserIdProvider>
	);
}

export function ErrorBoundary({ error }: Route.ErrorBoundaryProps) {
	let message = 'Oops!';
	let details = 'An unexpected error occurred.';
	let stack: string | undefined;

	if (isRouteErrorResponse(error)) {
		message = error.status === 404 ? '404' : 'Error';
		details =
			error.status === 404
				? 'The requested page could not be found.'
				: error.statusText || details;
	} else if (import.meta.env.DEV && error && error instanceof Error) {
		details = error.message;
		stack = error.stack;
	}

	return (
		<main className="container mx-auto p-4 pt-16">
			<h1>{message}</h1>
			<p>{details}</p>
			{stack && (
				<pre className="w-full overflow-x-auto p-4">
					<code>{stack}</code>
				</pre>
			)}
		</main>
	);
}