Synthetixio · noisekit · Jul 14, 2022 · Jul 14, 2022 · Jul 18, 2022
diff --git a/.gitignore b/.gitignore
@@ -44,7 +44,7 @@ tests/e2e/videos
 
 coverage
 tsconfig.tsbuildinfo
-
+dist
 
 .yarn/*
 !.yarn/patches

diff --git a/components/GlobalLoader/GlobalLoader.tsx b/components/GlobalLoader/GlobalLoader.tsx
@@ -18,13 +18,13 @@ export function GlobalLoader() {
 		>
 			<defs>
 				<linearGradient x1="8.042%" y1="0%" x2="65.682%" y2="23.865%" id="a">
-					<stop stop-color={Colors.blueHover} stop-opacity="0" offset="0%" />
-					<stop stop-color={Colors.blueHover} stop-opacity=".631" offset="63.146%" />
-					<stop stop-color={Colors.blueHover} offset="100%" />
+					<stop stopColor={Colors.blueHover} stopOpacity="0" offset="0%" />
+					<stop stopColor={Colors.blueHover} stopOpacity=".631" offset="63.146%" />
+					<stop stopColor={Colors.blueHover} offset="100%" />
 				</linearGradient>
 			</defs>
-			<g transform="translate(1 1)" fill="none" fill-rule="evenodd">
-				<path d="M36 18c0-9.94-8.06-18-18-18" stroke="url(#a)" stroke-width="2">
+			<g transform="translate(1 1)" fill="none" fillRule="evenodd">
+				<path d="M36 18c0-9.94-8.06-18-18-18" stroke="url(#a)" strokeWidth="2">
 					<animateTransform
 						attributeName="transform"
 						type="rotate"

diff --git a/content/LoansPage.tsx b/content/LoansPage.tsx
@@ -1,8 +1,7 @@
-import { useEffect, FC } from 'react';
+import { FC } from 'react';
 import Head from 'next/head';
 import styled from 'styled-components';
 import { useTranslation } from 'react-i18next';
-import { useRouter } from 'next/router';
 
 import StatBox from 'components/StatBox';
 import { LineSpacer } from 'styles/common';
@@ -23,20 +22,13 @@ type LoansPageProps = {};
 
 const LoansPage: FC<LoansPageProps> = () => {
 	const { t } = useTranslation();
-	const router = useRouter();
 
 	const walletAddress = useRecoilValue(walletAddressState);
 
 	const { stakedCollateralValue, debtBalance } = useStakingCalculations();
 	const { selectedPriceCurrency, getPriceAtCurrentRate } = useSelectedPriceCurrency();
 	const { stakingAPR } = useUserStakingData(walletAddress);
 
-	useEffect(() => {
-		if (router.asPath === '/loans') {
-			router.push('/loans/new');
-		}
-	}, [router, router.asPath, router.push]);
-
 	return (
 		<>
 			<Head>

diff --git a/index.html b/index.html
@@ -0,0 +1,13 @@
+<!DOCTYPE html>
+<html lang="en">
+	<head>
+		<meta charset="UTF-8" />
+		<meta content="initial-scale=1, width=device-width" name="viewport" />
+		<meta content="ie=edge" http-equiv="X-UA-Compatible" />
+		<link href="./public/images/favicon.ico" rel="icon" />
+		<title>No NEXT</title>
+	</head>
+	<body>
+		<div id="app"></div>
+	</body>
+</html>
diff --git a/index.ts b/index.ts
@@ -0,0 +1,12 @@
+// @ts-nocheck
+
+import { bootstrap } from './no-next/bootstrap';
+
+bootstrap();
+
+if (module.hot) {
+	module.hot.accept();
+	module.hot.dispose(() => {
+		// do nothing
+	});
+}
diff --git a/no-next/App.tsx b/no-next/App.tsx
@@ -0,0 +1,129 @@
+import React from 'react';
+import { useEffect } from 'react';
+import Head from 'next/head';
+import { RecoilRoot } from 'recoil';
+import { useTranslation } from 'react-i18next';
+import { ThemeProvider } from 'styled-components';
+
+import WithAppContainers from 'containers';
+import theme from 'styles/theme';
+import Layout from 'sections/shared/Layout';
+import { MediaContextProvider } from 'styles/media';
+import { QueryClient, QueryClientProvider } from 'react-query';
+import { ReactQueryDevtools } from 'react-query/devtools';
+import { DEFAULT_REQUEST_REFRESH_INTERVAL } from 'constants/defaults';
+
+import { SynthetixQueryContextProvider, createQueryContext } from '@synthetixio/queries';
+
+import SystemStatus from 'sections/shared/SystemStatus';
+
+import '../i18n';
+import Connector from 'containers/Connector';
+
+import Routes from './Routes';
+
+const queryClient = new QueryClient({
+	defaultOptions: {
+		queries: {
+			refetchInterval: DEFAULT_REQUEST_REFRESH_INTERVAL,
+			refetchOnWindowFocus: false,
+		},
+	},
+});
+
+function InnerApp() {
+	const { provider, signer, network, L1DefaultProvider } = Connector.useContainer();
+
+	useEffect(() => {
+		try {
+			document.querySelector('#global-loader')?.remove();
+		} catch (_e) {}
+	}, []);
+
+	return (
+		<>
+			<SynthetixQueryContextProvider
+				value={
+					provider && network?.id
+						? createQueryContext({
+								provider: provider,
+								signer: signer || undefined,
+								networkId: network.id,
+						  })
+						: createQueryContext({
+								networkId: 1,
+								provider: L1DefaultProvider,
+						  })
+				}
+			>
+				<Layout>
+					<SystemStatus>
+						<Routes />
+					</SystemStatus>
+				</Layout>
+				<ReactQueryDevtools />
+			</SynthetixQueryContextProvider>
+		</>
+	);
+}
+
+function App() {
+	const { t } = useTranslation();
+
+	return (
+		<>
+			<Head>
+				<meta charSet="utf-8" />
+				<meta name="viewport" content="width=device-width, initial-scale=1" />
+				<meta name="description" content={t('meta.description')} />
+				{/* open graph */}
+				<meta property="og:url" content="https://staking.synthetix.io/" />
+				<meta property="og:type" content="website" />
+				<meta property="og:title" content={t('meta.og.title')} />
+				<meta property="og:description" content={t('meta.description')} />
+				<meta property="og:image" content="/images/staking-facebook.jpg" />
+				<meta property="og:image:alt" content={t('meta.og.title')} />
+				<meta property="og:site_name" content={t('meta.og.site-name')} />
+				{/* twitter */}
+				<meta name="twitter:card" content="summary_large_image" />
+				<meta name="twitter:site" content="@synthetix_io" />
+				<meta name="twitter:creator" content="@synthetix_io" />
+				<meta name="twitter:image" content="/images/staking-twitter.jpg" />
+				<meta name="twitter:url" content="https://staking.synthetix.io" />
+				<link rel="icon" href="/images/favicon.ico" />
+
+				{/* matomo */}
+				<script
+					dangerouslySetInnerHTML={{
+						__html: `
+					  var _paq = window._paq = window._paq || [];
+					  /* tracker methods like "setCustomDimension" should be called before "trackPageView" */
+					  _paq.push(['trackPageView']);
+					  _paq.push(['enableLinkTracking']);
+					  (function() {
+					    var u="https://analytics.synthetix.io/";
+					    _paq.push(['setTrackerUrl', u+'matomo.php']);
+					    _paq.push(['setSiteId', '3']);
+					    var d=document, g=d.createElement('script'), s=d.getElementsByTagName('script')[0];
+					    g.async=true; g.src=u+'matomo.js'; s.parentNode.insertBefore(g,s);
+					  })();
+				`,
+					}}
+				/>
+			</Head>
+			<ThemeProvider theme={theme}>
+				<RecoilRoot>
+					<QueryClientProvider client={queryClient} contextSharing={true}>
+						<WithAppContainers>
+							<MediaContextProvider>
+								<InnerApp />
+							</MediaContextProvider>
+						</WithAppContainers>
+					</QueryClientProvider>
+				</RecoilRoot>
+			</ThemeProvider>
+		</>
+	);
+}
+
+export default App;
diff --git a/no-next/Routes.tsx b/no-next/Routes.tsx
@@ -0,0 +1,51 @@
+import { BrowserRouter, Navigate, Route, Routes } from 'react-router-dom';
+
+import { safeLazy } from '@synthetixio/safe-import';
+import AppLayout from '../sections/shared/Layout/AppLayout';
+
+const DashboardPage = safeLazy(
+	() => import(/* webpackChunkName: "dashboard" */ 'content/DashboardPage')
+);
+const SynthsPage = safeLazy(() => import(/* webpackChunkName: "synths" */ 'content/SynthsPage'));
+
+const StakingPage = safeLazy(() => import(/* webpackChunkName: "staking" */ 'content/StakingPage'));
+
+const LoansPage = safeLazy(() => import(/* webpackChunkName: "loans" */ 'content/LoansPage'));
+const NotFound = safeLazy(() => import(/* webpackChunkName: "404" */ '../pages/404'));
+
+function Page(props) {
+	return <pre style={{ padding: '50px' }}>{JSON.stringify(props, null, 2)}</pre>;
+}
+
+export default function AppRoutes() {
+	return (
+		<BrowserRouter>
+			<AppLayout>
+				<Routes>
+					<Route path="/loans" element={<Navigate to="/loans/new" replace={true} />} />
+					<Route path="/escrow" element={<Navigate to="/loans/rewards" replace={true} />} />
+
+					<Route path="/" element={<DashboardPage />} />
+					<Route path="/staking" element={<StakingPage />}>
+						<Route path="/staking/:action" element={<StakingPage />} />
+					</Route>
+					<Route path="/loans" element={<LoansPage />} />
+					<Route path="/synths" element={<SynthsPage />} />
+
+					<Route path="/gov" element={<Page />} />
+					<Route path="/earn" element={<Page />} />
+					<Route path="/debt" element={<Page />} />
+					<Route path="/l2" element={<Page />} />
+					<Route path="/escrow" element={<Page />} />
+					<Route path="/escrow/rewards" element={<Page />} />
+					<Route path="/escrow/ico" element={<Page />} />
+					<Route path="/history" element={<Page />} />
+					<Route path="/delegate" element={<Page />} />
+					<Route path="/merge-accounts" element={<Page />} />
+
+					<Route path="*" element={<NotFound />} />
+				</Routes>
+			</AppLayout>
+		</BrowserRouter>
+	);
+}
diff --git a/no-next/app.css b/no-next/app.css
@@ -0,0 +1,94 @@
+* {
+	box-sizing: border-box;
+}
+
+body {
+	font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
+	-webkit-font-smoothing: antialiased;
+	-moz-osx-font-smoothing: grayscale;
+	text-rendering: optimizeSpeed;
+	margin: 0;
+	min-height: 100vh;
+	position: relative;
+	scroll-behavior: smooth;
+	padding-bottom: 50px;
+}
+
+ul {
+	list-style: none;
+	padding: 0;
+	margin: 0;
+}
+
+input[type='number'] {
+	-moz-appearance: textfield;
+}
+
+input::-webkit-outer-spin-button,
+input::-webkit-inner-spin-button {
+	-webkit-appearance: none;
+}
+
+/* Inter */
+
+@font-face {
+	font-family: 'Inter';
+	font-style: normal;
+	font-weight: 400;
+	font-display: swap;
+	src: local('Inter'), url('../public/fonts/Inter-Regular.woff2') format('woff2');
+}
+
+@font-face {
+	font-family: 'Inter Semi Bold';
+	font-style: normal;
+	font-weight: 600;
+	font-display: swap;
+	src: local('Inter Semi Bold'), url('../public/fonts/Inter-SemiBold.woff2') format('woff2');
+}
+
+@font-face {
+	font-family: 'Inter Bold';
+	font-style: normal;
+	font-weight: 700;
+	font-display: swap;
+	src: local('Inter Bold'), url('../public/fonts/Inter-Bold.woff2') format('woff2');
+}
+
+/* GT America */
+
+@font-face {
+	font-family: 'GT America Mono';
+	font-style: normal;
+	font-display: swap;
+	font-weight: 700;
+	src: local('GT America Mono'), url('../public/fonts/GT-America-Mono-Bold.woff2') format('woff2');
+}
+
+@font-face {
+	font-family: 'GT America Condensed-Medium';
+	font-style: normal;
+	font-display: swap;
+	font-weight: 500;
+	src: local('GT America Condensed-Medium'),
+		url('../public/fonts/GT-America-Condensed-Medium.woff2') format('woff2');
+}
+
+@font-face {
+	font-family: 'GT America Condensed-Bold';
+	font-display: swap;
+	font-style: normal;
+	font-weight: 700;
+	font-stretch: condensed;
+	src: local('GT America Condensed-Bold'),
+		url('../public/fonts/GT-America-Condensed-Bold.woff2') format('woff2');
+}
+
+@font-face {
+	font-family: 'GT America Extended Bold';
+	font-style: normal;
+	font-display: swap;
+	font-weight: 700;
+	src: local('GT America Extended Bold'),
+		url('../public/fonts/GT-America-Extended-Bold.woff2') format('woff2');
+}
diff --git a/no-next/bootstrap.tsx b/no-next/bootstrap.tsx
@@ -0,0 +1,22 @@
+import * as React from 'react';
+import { Suspense } from 'react';
+import ReactDOM from 'react-dom';
+import { safeLazy } from '@synthetixio/safe-import';
+import GlobalLoader from 'components/GlobalLoader';
+
+import '@reach/dialog/styles.css';
+import 'tippy.js/dist/tippy.css';
+import './app.css';
+
+const App = safeLazy(() => import(/* webpackChunkName: "app" */ './App'));
+
+export async function bootstrap() {
+	ReactDOM.render(
+		<React.StrictMode>
+			<Suspense fallback={<GlobalLoader />}>
+				<App />
+			</Suspense>
+		</React.StrictMode>,
+		document.querySelector('#app')
+	);
+}
diff --git a/no-next/next-link.tsx b/no-next/next-link.tsx
@@ -0,0 +1,5 @@
+import { Link } from 'react-router-dom';
+
+export default function NoNextLink({ href, ...props }) {
+	return <Link to={href} {...props} />;
+}
-Original file line number
+Diff line change
@@ Expand Up / @@ -44,7 +44,7 @@ tests/e2e/videos @@
     coverage
     tsconfig.tsbuildinfo
+    dist
     .yarn/*
     !.yarn/patches
@@ Expand Down @@