Configure production environment variables and router basename

- Add configurable REACT_APP_BASENAME for flexible deployment paths
- Update BrowserRouter to use environment variable for basename
- Fix wallet auth to use config.walletBaseURL instead of hardcoded URLs
- Remove .env.production from tracking and add .env.production.example
- Reset .env.development to localhost URLs for development

Author: Maphikza

.env.development

@@ -2,6 +2,7 @@ REACT_APP_BASE_URL=http://localhost:9002
 REACT_APP_WALLET_BASE_URL=http://localhost:9003
 REACT_APP_ASSETS_BUCKET=http://localhost
 REACT_APP_DEMO_MODE=false
+REACT_APP_BASENAME=
 
 # More info https://create-react-app.dev/docs/advanced-configuration
 ESLINT_NO_DEV_ERRORS=true

.env.production

@@ -0,0 +1,23 @@
+# Production Environment Configuration Example
+# Copy this file to .env.production and update with your actual values
+
+# API Base URLs - Update these to your actual backend URLs
+REACT_APP_BASE_URL=https://your-domain.com/panel
+REACT_APP_WALLET_BASE_URL=https://your-domain.com/wallet
+
+# Asset serving configuration
+REACT_APP_ASSETS_BUCKET=https://your-domain.com
+
+# Demo mode (set to true for demo, false for production)
+REACT_APP_DEMO_MODE=false
+
+# Router basename - where your React app will be served from
+# Use empty string for root path, or /admin, /dashboard, etc.
+REACT_APP_BASENAME=/front
+
+# Public URL for static assets - should match REACT_APP_BASENAME
+PUBLIC_URL=/front
+
+# More info https://create-react-app.dev/docs/advanced-configuration
+ESLINT_NO_DEV_ERRORS=true
+TSC_COMPILE_ON_ERROR=true

.env.production.example

@@ -22,6 +22,7 @@
 .env.development.local
 .env.test.local
 .env.production.local
+.env.production
 
 npm-debug.log*
 yarn-debug.log*

.gitignore

@@ -143,7 +143,7 @@ const LogoutFallback = withLoading(Logout);
 
 export const AppRouter: React.FC = () => {
   return (
-    <BrowserRouter>
+    <BrowserRouter basename={process.env.REACT_APP_BASENAME || undefined}>
       <Routes>
         {/* Public routes */}
         <Route path="/auth" element={<AuthLayoutFallback>{/* children if any */}</AuthLayoutFallback>}>

src/components/router/AppRouter.tsx

@@ -43,7 +43,7 @@ const useWalletAuth = () => {
       const npub = await window.nostr.getPublicKey();
 
       // Fetch the challenge from the server
-      const challengeResponse = await fetch('http://localhost:9003/challenge', { method: 'GET' });
+      const challengeResponse = await fetch(`${config.walletBaseURL}/challenge`, { method: 'GET' });
 
       // Check if the response is valid JSON
       if (!challengeResponse.ok) {
@@ -64,7 +64,7 @@ const useWalletAuth = () => {
       });
 
       // Send the signed challenge to the backend for verification
-      const verifyResponse = await fetch('http://localhost:9003/verify', {
+      const verifyResponse = await fetch(`${config.walletBaseURL}/verify`, {
         method: 'POST',
         headers: { 'Content-Type': 'application/json' },
         body: JSON.stringify({