feat(routing): use hash

public/service-worker.js

@@ -13,9 +13,6 @@ registerRoute(
   ({ url }) => url.origin === 'https://open.er-api.com',
   new StaleWhileRevalidate({
     cacheName: 'exchange-rates-cache',
-    plugins: [
-      // Optionally, add expiration or other plugins
-    ],
   })
 );
 

src/App.js

@@ -1,5 +1,5 @@
 import React, { useEffect } from 'react';
-import { BrowserRouter as Router, Routes, Route } from 'react-router-dom';
+import { HashRouter as Router, Routes, Route } from 'react-router-dom';
 import Home from './pages/Home';
 import Transactions from './pages/Transactions';
 import Participants from './pages/Participants';
@@ -16,13 +16,13 @@ function App() {
   }, [dispatch]);
 
   return (
-    <Router basename="/pay-as-we-go">
+    <Router hashType="noslash">
       <Navbar />
       <Routes>
-        <Route path="/" element={<Home />} />
-        <Route path="/transactions" element={<Transactions />} />
-        <Route path="/participants" element={<Participants />} />
-        <Route path="/balance" element={<Balance />} />
+        <Route path="" element={<Home />} />
+        <Route path="transactions" element={<Transactions />} />
+        <Route path="participants" element={<Participants />} />
+        <Route path="balance" element={<Balance />} />
       </Routes>
     </Router>
   );

src/components/Navbar.js

@@ -1,21 +1,35 @@
 import React from 'react';
-import { AppBar, Toolbar, Typography, Button, IconButton, Drawer, List, ListItem, ListItemText, Select, MenuItem, useTheme, useMediaQuery } from '@mui/material';
+import {
+  AppBar,
+  Toolbar,
+  Typography,
+  Button,
+  IconButton,
+  Drawer,
+  List,
+  ListItem,
+  ListItemText,
+  Select,
+  MenuItem,
+  useTheme,
+  useMediaQuery
+} from '@mui/material';
 import MenuIcon from '@mui/icons-material/Menu';
 import { Link } from 'react-router-dom';
 import { useDispatch, useSelector } from 'react-redux';
 import { setSelectedCurrency } from '../redux/slices/currencySlice';
 import useOnlineStatus from '../hooks/useOnlineStatus';
-import CircleIcon from '@mui/icons-material/Circle'; // Icon for status indicator
+import CircleIcon from '@mui/icons-material/Circle';
 import { green, red } from '@mui/material/colors';
-import './Navbar.css'; // Ensure you have appropriate styles
+import './Navbar.css';
 
 function Navbar() {
   const theme = useTheme();
   const isMobile = useMediaQuery(theme.breakpoints.down('sm'));
   const [drawerOpen, setDrawerOpen] = React.useState(false);
   const dispatch = useDispatch();
   const { availableCurrencies, selectedCurrency } = useSelector((state) => state.currency);
-  const isOnline = useOnlineStatus(); // Get online status
+  const isOnline = useOnlineStatus();
 
   const handleDrawerToggle = () => {
     setDrawerOpen(!drawerOpen);
@@ -26,10 +40,10 @@ function Navbar() {
   };
 
   const menuItems = [
-    { text: 'Home', path: '/' },
-    { text: 'Participants', path: '/participants' },
-    { text: 'Transactions', path: '/transactions' },
-    { text: 'Balance', path: '/balance' },
+    { text: 'Home', path: '' },
+    { text: 'Participants', path: 'participants' },
+    { text: 'Transactions', path: 'transactions' },
+    { text: 'Balance', path: 'balance' },
   ];
 
   const drawer = (