Merge 0934bcc into 8d2831c

.github/workflows/deploy.yml

@@ -20,7 +20,6 @@ env:
   REACT_APP_WS_PORT: ${{ secrets.REACT_APP_WS_PORT }}
   REACT_APP_WS_URL: ${{ secrets.REACT_APP_WS_URL }}
   REACT_CURRENT_ENVIRONMENT: ${{ secrets.REACT_CURRENT_ENVIRONMENT }}
-  REACT_OAUTH_URL: ${{ secrets.REACT_OAUTH_URL }}
 
 jobs:
   deploy:

index.html

@@ -6,9 +6,8 @@
     <base href="/" />
     <link
       rel="icon"
-      type="image/png"
-      sizes="96x96"
-      href="./favicon-deriv.png"
+      type="image/svg+xml"
+      href="favicon.svg"
     />
     <title>Trade Rise Fall</title>
   </head>

package.json

@@ -3,7 +3,7 @@
   "private": true,
   "version": "1.0.0",
   "scripts": {
-    "dev": "rsbuild dev --open",
+    "dev": "rsbuild dev --port 5173 --open",
     "build": "rsbuild build",
     "preview": "rsbuild preview"
   },
@@ -13,6 +13,7 @@
     "@deriv/deriv-charts": "^2.8.0",
     "@deriv/quill-icons": "^2.2.2",
     "@rsbuild/plugin-sass": "^1.1.2",
+    "axios": "^1.7.9",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
     "react-router-dom": "^7.1.1"

rsbuild.config.ts

@@ -33,6 +33,13 @@ export default defineConfig({
   output: {
     assetPrefix: "/",
     copy: [
+      {
+        from: "public",
+        to: ".",
+        globOptions: {
+          dot: true,
+        },
+      },
       {
         from: "node_modules/@deriv/deriv-charts/dist/*",
         to: "js/smartcharts/[name][ext]",
@@ -56,9 +63,10 @@ export default defineConfig({
   },
   html: {
     template: "./index.html",
+    inject: "body",
   },
   server: {
-    port: 8443,
+    port: 5173,
     compress: true,
   },
   dev: {

src/App.tsx

@@ -1,83 +1,43 @@
-import React, { Suspense, useEffect } from "react";
-import {
-  BrowserRouter,
-  Routes,
-  Route,
-  useLocation,
-  useNavigate,
-} from "react-router-dom";
+import React, { Suspense } from "react";
+import { BrowserRouter, Routes, Route, Navigate } from "react-router-dom";
 import { ThemeProvider } from "@deriv-com/quill-ui";
 import { observer } from "mobx-react-lite";
 import LoadingSpinner from "./components/LoadingSpinner/LoadingSpinner";
 import Header from "./components/Header/Header";
-import ProtectedRoute from "./components/ProtectedRoute/ProtectedRoute";
 import ErrorBoundary from "./components/ErrorBoundary/ErrorBoundary";
-import { authStore } from "./stores/AuthStore";
-import { authService } from "./services/auth.service";
 
+// Lazy load components for better performance
 const Homepage = React.lazy(() => import("./pages/homepage"));
 const DerivTrading = React.lazy(() => import("./pages/trading"));
 const NotFoundPage = React.lazy(() => import("./pages/404"));
+const LoginPage = React.lazy(() => import("./pages/login"));
 
-const AuthHandler: React.FC = observer(() => {
-  const location = useLocation();
-  const navigate = useNavigate();
+// Separate component for the loading fallback
+const LoadingFallback = () => (
+  <div style={{ height: '100vh', display: 'flex', justifyContent: 'center', alignItems: 'center' }}>
+    <LoadingSpinner />
+  </div>
+);
 
-  useEffect(() => {
-    const params = new URLSearchParams(location.search);
-    const token = params.get("token1");
-
-    if (token) {
-      authStore.handleAuthCallback(token).then((success) => {
-        // Clear the token from URL
-        const cleanUrl = window.location.pathname;
-        window.history.replaceState({}, document.title, cleanUrl);
-
-        if (success) {
-          navigate("/dashboard");
-        } else {
-          navigate("/");
-        }
-      });
-    }
-  }, [location, navigate]);
-
-  return null;
-});
-
-const AppContent: React.FC = () => {
+const AppContent = () => {
   return (
-    <Suspense fallback={<LoadingSpinner />}>
-      <AuthHandler />
+    <Suspense fallback={<LoadingFallback />}>
       <Header />
       <Routes>
+        {/* Public routes */}
+        <Route path="/login" element={<LoginPage />} />
         <Route path="/" element={<Homepage />} />
         <Route path="/dashboard" element={<DerivTrading />} />
-        <Route path="*" element={<NotFoundPage />} />
+
+        {/* Handle 404 and invalid routes */}
+        <Route path="/404" element={<NotFoundPage />} />
+        <Route path="*" element={<Navigate to="/404" replace />} />
       </Routes>
     </Suspense>
   );
 };
 
 const App: React.FC = observer(() => {
-  const [isInitialized, setIsInitialized] = React.useState(false);
-
-  useEffect(() => {
-    // Initialize auth store
-    authStore.initialize().then(() => {
-      setIsInitialized(true);
-    });
-
-    return () => {
-      // Cleanup auth service when app unmounts
-      authService.cleanup();
-    };
-  }, []);
-
-  if (!isInitialized) {
-    return <LoadingSpinner />;
-  }
-
   return (
     <ErrorBoundary>
       <ThemeProvider theme="light" persistent>

src/api/endpoints.ts

@@ -0,0 +1,46 @@
+import { apiRequest } from '../middleware/middleware';
+import { balanceStore } from '../stores/BalanceStore';
+import { LoginCredentials, LoginResponse, BalanceResponse } from '../types/api.types';
+import { authService } from '../services/auth.service';
+
+// Auth endpoints
+export const authEndpoints = {
+    login: async (credentials: LoginCredentials): Promise<LoginResponse> => {
+        const response = await apiRequest<LoginResponse>({
+            url: '/login',
+            method: 'POST',
+            data: credentials
+        });
+
+        if (!response.token) {
+            throw new Error('No token received');
+        }
+
+        // Store the token
+        authService.setToken(response.token);
+
+        return response;
+    }
+};
+
+// Balance endpoints
+export const balanceEndpoints = {
+    fetchBalance: async (): Promise<BalanceResponse> => {
+        try {
+            const response = await apiRequest<BalanceResponse>({
+                url: '/balance',
+                method: 'GET'
+            });
+
+            // Update balance store with the response
+            if (response) {
+                balanceStore.setBalance(response.balance, response.currency);
+            }
+
+            return response;
+        } catch (error) {
+            console.error('Error fetching balance:', error);
+            throw error;
+        }
+    }
+};