Merge pull request #235 from Ibinola/feat/notification-window

(wip)feat: add notification window

frontend/src/App.jsx

@@ -107,7 +107,7 @@ function App() {
             path="/login"
             element={walletId ? <Navigate to="/" /> : <Login onConnectWallet={handleConnectWallet} />}
           />
-          <Route path="/dashboard" element={<Dashboard walletId={walletId} />} />
+          <Route path="/dashboard" element={<Dashboard walletId={walletId} telegramId={tgUser} />} />
           <Route path="/form" element={<Form walletId={walletId} setWalletId={setWalletId} />} />
         </Routes>
       </main>

frontend/src/components/TelegramNotificationModal/TelegramNotificationModal.jsx

@@ -0,0 +1,48 @@
+import React from 'react';
+import './telegramNotificationModal.css';
+import useTelegramNotification from 'hooks/useTelegramNotification';
+import { Notifier } from 'components/Notifier/Notifier';
+
+const TelegramNotificationModal = ({ onClose, telegramId, walletId }) => {
+  const { subscribe, isLoading } = useTelegramNotification();
+
+  const handleSubscribe = () => {
+    subscribe({ telegramId, walletId });
+  };
+
+  return (
+    <div className="notification-overlay">
+      <Notifier />
+      <div className="notification-backdrop" onClick={onClose} />
+      <div className="notification-wrapper">
+        <div className="notification-box">
+          <div className="notification-content">
+            <div className="notification-title">Telegram Notification</div>
+            <h2>
+              Do you want to enable telegram <br />
+              notification bot?
+            </h2>
+            <p>
+              This will allow you to receive quick notifications on your telegram line in realtime. You can disable this
+              setting anytime.
+            </p>
+          </div>
+          <div className="notification-actions">
+            <button onClick={onClose} className="notification-btn notification-cancel-btn" disabled={isLoading}>
+              Cancel
+            </button>
+            <button
+              onClick={handleSubscribe}
+              className="notification-btn notification-confirm-btn"
+              disabled={isLoading}
+            >
+              {isLoading ? 'Subscribing...' : 'Yes, Sure'}
+            </button>
+          </div>
+        </div>
+      </div>
+    </div>
+  );
+};
+
+export default TelegramNotificationModal;

frontend/src/components/TelegramNotificationModal/telegramNotificationModal.css

@@ -0,0 +1,163 @@
+.notification-overlay {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  position: fixed;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  background: var(--spinner-bgn);
+  z-index: 9999;
+}
+
+.notification-backdrop {
+  position: absolute;
+  top: 0;
+  left: 0;
+  right: 0;
+  bottom: 0;
+}
+
+.notification-wrapper {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  max-width: 800px;
+  width: 90%;
+  box-shadow: var(--primary-color);
+  overflow: hidden;
+}
+
+.notification-box {
+  border-radius: 16px;
+  max-width: 642px;
+  width: 100%;
+  display: flex;
+  flex-direction: column;
+  gap: 24px;
+  text-align: center;
+}
+
+.notification-content {
+  text-align: center;
+  padding: 24px;
+  border: var(--nav-divider-bg) 1px solid;
+  background-color: var(--header-button-bg);
+  border-radius: 48px;
+}
+
+.notification-title {
+  color: var(--primary);
+  text-align: center;
+  font-size: 16px;
+  padding-bottom: 10px;
+  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
+  margin-bottom: 24px;
+}
+
+.notification-content h2 {
+  color: var(--primary);
+  font-size: 24px;
+  font-weight: 500;
+  margin-bottom: 16px;
+  line-height: 1.3;
+}
+
+.notification-content p {
+  color: var(--second-primary);
+  font-size: 16px;
+  line-height: 1.5;
+  max-width: 380px;
+  margin: 0 auto;
+}
+
+.notification-actions {
+  display: flex;
+  gap: 16px;
+}
+
+.notification-btn {
+  flex: 1;
+  padding: 20px 16px;
+  border-radius: 40px;
+  font-size: 16px;
+  font-weight: bold;
+  background-color: var(--plain-button-bg);
+  cursor: pointer;
+}
+
+.notification-cancel-btn {
+  color: var(--primary);
+  position: relative;
+  border: none;
+}
+
+.notification-cancel-btn::before {
+  content: '';
+  position: absolute;
+  top: 0;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  border-radius: 40px;
+  padding: 1px;
+  background: var(--button-gradient);
+  mask:
+    linear-gradient(#fff 0 0) content-box,
+    linear-gradient(#fff 0 0);
+  -webkit-mask:
+    linear-gradient(#fff 0 0) content-box,
+    linear-gradient(#fff 0 0);
+  -webkit-mask-composite: xor;
+  mask-composite: exclude;
+}
+
+.notification-confirm-btn {
+  color: var(--primary);
+  background: var(--second-gradient);
+  border: none;
+}
+
+/* Mobile Styles */
+@media screen and (max-width: 768px) {
+  .notification-wrapper {
+    max-width: 390px;
+    width: 100%;
+    padding: 20px;
+  }
+
+  .notification-title {
+    font-size: 14px;
+    padding-bottom: 8px;
+    margin-bottom: 16px;
+  }
+
+  .notification-content h2 {
+    font-size: 16px;
+    margin-bottom: 12px;
+  }
+
+  .notification-content p {
+    font-size: 14px;
+    max-width: 320px;
+  }
+
+  .notification-actions {
+    gap: 8px;
+  }
+
+  .notification-btn {
+    padding: 20px 8px;
+    border-radius: 16px;
+    font-size: 14px;
+  }
+
+  .notification-cancel-btn::before {
+    border-radius: 16px;
+  }
+
+  .notification-confirm-btn {
+    font-size: 14px;
+  }
+}

frontend/src/hooks/useTelegramNotification.js

@@ -0,0 +1,23 @@
+import { useMutation } from "@tanstack/react-query";
+import { subscribeToNotification } from "services/telegram";
+import { notifyError, notifySuccess } from "utils/notification";
+
+const useTelegramNotification = () => {
+    const mutation = useMutation({
+        mutationFn: ({ telegramId, walletId }) =>
+            subscribeToNotification(telegramId, walletId),
+        onSuccess: () => {
+            notifySuccess("Subscribed to notifications successfully!");
+        },
+        onError: (error) => {
+            notifyError(error?.message || "Failed to subscribe. Please try again.");
+        },
+    });
+
+    return {
+        subscribe: mutation.mutate,
+        isLoading: mutation.isPending,
+    };
+};
+
+export default useTelegramNotification;

frontend/src/pages/spotnet/dashboard/Dashboard.jsx

@@ -9,12 +9,23 @@ import { ReactComponent as BorrowIcon } from "assets/icons/borrow_dynamic.svg";
 import { ReactComponent as TelegramIcon } from "assets/icons/telegram_dashboard.svg";
 import { TrendingDown, TrendingUp } from "lucide-react";
 import Spinner from "components/spinner/Spinner";
+import TelegramNotificationModal from "components/TelegramNotificationModal/TelegramNotificationModal";
 import { ZETH_ADDRESS } from "utils/constants";
 import useDashboardData from "hooks/useDashboardData";
 import { useClosePosition } from "hooks/useClosePosition";
 
-export default function Component({ walletId }) {
+export default function Component({ walletId, telegramId }) {
   const [isCollateralActive, setIsCollateralActive] = useState(true);
+  const [showModal, setShowModal] = useState(false);
+
+  const handleOpen = () => {
+    setShowModal(true); 
+  };
+
+  const handleClose = () => {
+    setShowModal(false); 
+  };
+
   const { data, isLoading } = useDashboardData(walletId);
   const { mutate: closePositionEvent, isLoading: isClosing, error: closePositionError } = useClosePosition(walletId);
 
@@ -231,10 +242,18 @@ export default function Component({ walletId }) {
             {isClosing ? "Closing..." : "Redeem"}
           </button>
           {closePositionError && <div>Error: {closePositionError.message}</div>}
-          <button className="telegram-button">
+          <button className="telegram-button" onClick={handleOpen}>
             <TelegramIcon className="tab-icon" />
             Enable telegram notification bot
           </button>
+          {showModal && (
+          <TelegramNotificationModal 
+            telegramId={telegramId?.id}
+            walletId={walletId}
+            onClose={handleClose}
+          />
+          )
+          }
         </div>
       </div>
     </div>

frontend/src/services/telegram.js

@@ -28,4 +28,18 @@ export const getTelegramUserWalletId = async (tg_user) => {
     console.error('Error getting wallet ID for Telegram user:', error);
     throw error;
   }
-};
+};
+
+export const subscribeToNotification = async (telegram_id, wallet_id) => {
+  try {
+    const response = await axiosInstance.post("/api/subscribe-to-notification", {
+      telegram_id: telegram_id,
+      wallet_id: wallet_id,
+    });
+
+    return response.data;
+  } catch (error) {
+    console.error("Error subscribing to notifications:", error);
+    throw error;
+  }
+}