chore: restructure App

client/src/App.tsx

@@ -1,47 +1,16 @@
-import "./index.css";
-import { Routes as Router, Route, Navigate } from "react-router-dom";
-import { Setup } from "src/pages/Setup";
-import { Swap } from "src/pages/Swap";
-import { Assets } from "src/pages/Assets";
-import { Pages } from "src/types/pages";
-import { Pool } from "src/pages/Pool";
-import { MintToken } from "src/pages/MintToken";
-import { RequireWallet } from "./components/RequireWallet";
-import { MainLayout } from "./layouts/MainLayout";
-import { RemoveLiquidity } from "./pages/RemoveLiquidity";
+import { BrowserRouter } from "react-router-dom";
+import { WalletProvider } from "src/context/WalletContext";
 
-function App() {
+import AppRoutes from "./AppRoutes";
+
+const { PUBLIC_URL } = process.env;
+
+export default function App() {
   return (
-    <Router>
-      <Route element={<MainLayout />}>
-        <Route
-          path="*"
-          element={<RequireWallet children={<Navigate to={Pages.assets} />} />}
-        />
-        <Route path={Pages.setup} element={<Setup />} />
-        <Route
-          path={Pages.assets}
-          element={<RequireWallet children={<Assets />} />}
-        />
-        <Route
-          path={Pages.swap}
-          element={<RequireWallet children={<Swap />} />}
-        />
-        <Route
-          path={Pages.pool}
-          element={<RequireWallet children={<Pool />} />}
-        />
-        <Route
-          path={Pages.mintToken}
-          element={<RequireWallet children={<MintToken />} />}
-        />
-        <Route
-          path={Pages.removeLiquidity}
-          element={<RequireWallet children={<RemoveLiquidity />} />}
-        />
-      </Route>
-    </Router>
+    <BrowserRouter basename={PUBLIC_URL}>
+      <WalletProvider>
+        <AppRoutes />
+      </WalletProvider>
+    </BrowserRouter>
   );
 }
-
-export default App;

client/src/AppRoutes.tsx

@@ -0,0 +1,44 @@
+import { Routes, Route, Navigate } from "react-router-dom";
+import { Setup } from "src/pages/Setup";
+import { Swap } from "src/pages/Swap";
+import { Assets } from "src/pages/Assets";
+import { Pages } from "src/types/pages";
+import { Pool } from "src/pages/Pool";
+import { MintToken } from "src/pages/MintToken";
+import { RequireWallet } from "./components/RequireWallet";
+import { MainLayout } from "./layouts/MainLayout";
+import { RemoveLiquidity } from "./pages/RemoveLiquidity";
+
+export default function AppRoutes() {
+  return (
+    <Routes>
+      <Route element={<MainLayout />}>
+        <Route
+          path="*"
+          element={<RequireWallet children={<Navigate to={Pages.assets} />} />}
+        />
+        <Route path={Pages.setup} element={<Setup />} />
+        <Route
+          path={Pages.assets}
+          element={<RequireWallet children={<Assets />} />}
+        />
+        <Route
+          path={Pages.swap}
+          element={<RequireWallet children={<Swap />} />}
+        />
+        <Route
+          path={Pages.pool}
+          element={<RequireWallet children={<Pool />} />}
+        />
+        <Route
+          path={Pages.mintToken}
+          element={<RequireWallet children={<MintToken />} />}
+        />
+        <Route
+          path={Pages.removeLiquidity}
+          element={<RequireWallet children={<RemoveLiquidity />} />}
+        />
+      </Route>
+    </Routes>
+  );
+}

client/src/index.tsx

@@ -1,22 +1,15 @@
+import "./index.css";
+
 import React from "react";
 import ReactDOM from "react-dom/client";
-import "./index.css";
 import App from "./App";
 import reportWebVitals from "./reportWebVitals";
-import { BrowserRouter } from "react-router-dom";
-import { WalletProvider } from "src/context/WalletContext";
-
-const { PUBLIC_URL } = process.env;
 
 const container = document.getElementById("root");
 const root = ReactDOM.createRoot(container!);
 root.render(
   <React.StrictMode>
-    <BrowserRouter basename={PUBLIC_URL}>
-      <WalletProvider>
-        <App />
-      </WalletProvider>
-    </BrowserRouter>
+    <App />
   </React.StrictMode>
 );