Merge branch 'main' into feat/add-dashboard

docker-compose.yaml

@@ -5,32 +5,28 @@ networks:
     driver: bridge
 
 services:
-  backend:
-    build: .
-    restart: always
-    volumes:
-      - ./web_app/static/:/app/static/
-      - ./entrypoint.sh:/app/entrypoint.sh
-    env_file:
-      - .env
-    expose:
-      - "8000"
-    networks:
-      - app_network
-
   nginx:
-    restart: unless-stopped
-    image: nginx
+    build: ./frontend
     container_name: nginx
+    restart: unless-stopped
     ports:
       - "80:80"
       - "443:443"
     volumes:
-      - ./web_app/static/:/app/static/
       - ./certs/spotnet.xyz.chain.crt:/etc/nginx/spotnet.xyz.chain.crt:ro
       - ./certs/spotnet.xyz.key:/etc/nginx/spotnet.xyz.key:ro
-      - ./spotnet.conf:/etc/nginx/conf.d/spotnet.conf
     depends_on:
       - backend
     networks:
       - app_network
+  backend:
+    build: .
+    restart: always
+    volumes:
+      - ./entrypoint.sh:/app/entrypoint.sh
+    env_file:
+      - .env
+    expose:
+      - "8000"
+    networks:
+      - app_network

entrypoint.sh

@@ -1,8 +1,5 @@
 #!/bin/bash
 
 echo "Starting the server ..."
-#exec "$@"
-#
-#source /app/venv/bin/activate
-#
+
 uvicorn web_app.api.main:app --host 0.0.0.0 --port 8000

frontend/Dockerfile

@@ -0,0 +1,22 @@
+# Dockerfile.nginx
+
+# Stage 1: Build the React app
+FROM node:20-alpine AS build
+
+WORKDIR /app
+COPY . /app
+
+RUN yarn
+RUN yarn build
+
+# Stage 2: Set up Nginx to serve the built app
+FROM nginx:alpine
+
+COPY --from=build /app/build /usr/share/nginx/html
+
+RUN rm /etc/nginx/conf.d/default.conf
+COPY spotnet.conf /etc/nginx/conf.d
+
+EXPOSE 80
+CMD ["nginx", "-g", "daemon off;"]
+

spotnet.conf → frontend/spotnet.conf

@@ -1,4 +1,4 @@
-upstream web_app {
+upstream backend_app {
     server backend:8000;
 }
 
@@ -20,22 +20,31 @@ server {
     access_log /var/log/nginx/access.log;
     error_log /var/log/nginx/error.log;
 
-    location /static/ {
-        alias /app/static/;
+     location / {
+        root   /usr/share/nginx/html;
+        index  index.html index.htm;
+        try_files $uri $uri/ /index.html;
     }
 
-    location / {
-        proxy_pass http://web_app;
+    location = /50x.html {
+        root   /usr/share/nginx/html;
+    }
+
+    # Proxy requests to FastAPI backend API
+    location /api/ {
+        proxy_pass http://backend_app;
         proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
         proxy_set_header Host $host;
         proxy_set_header X-Forwarded-Proto $scheme;
         proxy_redirect off;
     }
+
 }
 
 server {
     listen 80;
     server_name spotnet.xyz;
 
+    # Redirect all HTTP traffic to HTTPS
     return 301 https://$host$request_uri;
-}
+}

frontend/src/App.jsx

@@ -6,6 +6,7 @@ import Footer from './components/Footer';
 import SpotnetApp from './pages/spotnet/spotnet_app/SpotnetApp';
 import Login from "./pages/Login";
 import { connectWallet, logout } from './utils/wallet';
+import Home from "./pages/spotnet/home/Home";
 
 function App() {
   const [walletId, setWalletId] = useState(localStorage.getItem('wallet_id'));
@@ -41,19 +42,15 @@ function App() {
     <Router>
       <div className="App">
         <Header walletId={walletId} onConnectWallet={handleConnectWallet} onLogout={handleLogout} />
+        <Home walletId={walletId} onConnectWallet={handleConnectWallet} onLogout={handleLogout} />
         <main className="container" style={{ flex: 1 }}>
           {error && <div className="alert alert-danger">{error}</div>}
           <Routes>
             <Route index element={<SpotnetApp />}/>
-            <Route
-              path="/login"
-              element={walletId ? <Navigate to="/" /> : <Login onConnectWallet={handleConnectWallet} />}
+            <Route path="/login" element={walletId ? <Navigate to="/" /> : <Login onConnectWallet={handleConnectWallet} />}
             />
             <Route path="/dashboard" element={<Dashboard />} />
-            {/* <Route
-              path="/dashboard"
-              element={walletId ? <Dashboard /> : <Navigate to="/login" />}
-            /> */}
+            {/* <Route path="/dashboard" element={walletId ? <Dashboard /> : <Navigate to="/login" />}/> */}
           </Routes>
         </main>
         <Footer />

frontend/src/components/header/Header.jsx

@@ -20,14 +20,14 @@ function Header({ walletId, onConnectWallet, onLogout }) {
                           <div className='wallet-id'>
                               {`${walletId.slice(0, 4)}...${walletId.slice(-4)}`}
                           </div>
-                          <button
+                          <button className='gradient-button'
                               onClick={onLogout}
                           >
                               Log Out
                           </button>
                       </div>
                   ) : (
-                      <button
+                      <button className='gradient-button'
                           onClick={onConnectWallet}
                       >
                           <span>Connect Wallet</span>

frontend/src/components/header/header.css

@@ -70,7 +70,7 @@ nav {
     color: var(--blue-color);
 }
 
-.wallet-section button{
+.gradient-button{
     background: transparent;
     border-radius: 8px;
     height: 52px;

frontend/src/pages/spotnet/about/about.css

@@ -239,4 +239,5 @@
         max-width: 280px;
         margin-bottom: 20px;
     }
-}
+}
+