From 5bf23e92b3e39dcac33ae2d5471e78bc2c7118eb Mon Sep 17 00:00:00 2001
From: Gabito1451 <obiagaziegabriel@gmail.com>
Date: Fri, 24 Jan 2025 12:35:08 +0100
Subject: [PATCH] fixes

---
 .../report-button/ReportBugButton.css         |   2 +-
 .../report-modal/ReportBugModal.css           |  38 +++++-
 .../report-modal/ReportBugModal.jsx           | 123 +++++++++++++-----
 frontend/src/hooks/useAddDeposit.js           |   2 +-
 frontend/src/index.js                         |   8 +-
 5 files changed, 128 insertions(+), 45 deletions(-)

diff --git a/frontend/src/components/report-button/ReportBugButton.css b/frontend/src/components/report-button/ReportBugButton.css
index 44159e2da..998fdbb78 100644
--- a/frontend/src/components/report-button/ReportBugButton.css
+++ b/frontend/src/components/report-button/ReportBugButton.css
@@ -30,7 +30,7 @@
     font-family: Open Sans;
     font-size: 16px;
     font-weight: 400;
-    padding-top: 13px;
+    margin-top: 13px;
 
 
 
diff --git a/frontend/src/components/report-modal/ReportBugModal.css b/frontend/src/components/report-modal/ReportBugModal.css
index 2699dbde7..fccf7601f 100644
--- a/frontend/src/components/report-modal/ReportBugModal.css
+++ b/frontend/src/components/report-modal/ReportBugModal.css
@@ -11,16 +11,20 @@
     z-index: 10100;
     background-repeat: no-repeat;
     background-size: contain;
+    padding: 100px 100px;
 
 }
 
 .report-bug-form {
-    width: 500px;
+    width: 100%;
+    max-width: 642px;
     background-color: #120721;
+    border-radius: 2px;
 }
 
 
-.modal-content h2 {
+
+.modal-content h3 {
 
     font-family: Open Sans;
     font-size: 16px;
@@ -29,7 +33,9 @@
     text-align: center;
     text-underline-position: from-font;
     text-decoration-skip-ink: none;
-    color: #798795
+    color: #798795;
+    padding-bottom: 5px;
+    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
 }
 
 .line {
@@ -55,6 +61,7 @@
     text-align: center;
     text-underline-position: from-font;
     text-decoration-skip-ink: none;
+    padding: 5px 0px;
     color: #f0f0f0
 }
 
@@ -67,17 +74,26 @@
 .bug-textarea {
     width: 100%;
     min-height: 135px;
-    background-color: #22153a;
-    border: 1px solid rgba(255, 255, 255, 0.1);
+    background-color: #120721;
+    border: 1px solid #22153a;
     border-radius: 8px;
     padding: 12px;
     color: white;
     margin-bottom: 24px;
-    resize: vertical;
+    resize: none;
+    outline: none;
 }
 
 .bug-textarea::placeholder {
-    color: rgba(255, 255, 255, 0.4);
+    color: #f0f0f0;
+    font-family: Open Sans;
+    font-size: 14px;
+    font-weight: 400;
+    line-height: 24px;
+    text-align: left;
+    text-underline-position: from-font;
+    text-decoration-skip-ink: none;
+
 }
 
 .dev-group-link {
@@ -86,6 +102,13 @@
     gap: 8px;
     color: rgba(255, 255, 255, 0.6);
     cursor: pointer;
+    font-family: Open Sans;
+    font-size: 14px;
+    font-weight: 400;
+
+
+
+
     margin-bottom: 24px;
 }
 
@@ -103,4 +126,5 @@
     margin-top: 20px;
     display: flex;
     gap: 16px;
+    justify-content: center;
 }
\ No newline at end of file
diff --git a/frontend/src/components/report-modal/ReportBugModal.jsx b/frontend/src/components/report-modal/ReportBugModal.jsx
index 9c41ce373..f0c72a66f 100644
--- a/frontend/src/components/report-modal/ReportBugModal.jsx
+++ b/frontend/src/components/report-modal/ReportBugModal.jsx
@@ -1,49 +1,108 @@
-import React from "react"
-import "./ReportBugModal.css"
-import telegramIcon from "../../assets/icons/telegram.svg"
-import bg from "../../assets/images/background-form.png"
-import { Button } from "components/ui/custom-button/Button"
-
+import React, { useState } from "react";
+import "./ReportBugModal.css";
+import telegramIcon from "../../assets/icons/telegram.svg";
+import bg from "../../assets/images/background-form.png";
+import { Button } from "components/ui/custom-button/Button";
+import { useWalletStore } from "../../stores/useWalletStore";
+import { useMutation } from "@tanstack/react-query";
+import { generateTelegramLink } from "services/telegram";
+import { axiosInstance } from "utils/axios";
+import { notify } from "components/layout/notifier/Notifier";
 
 export function ReportBugModal({ onClose }) {
+    const { walletId } = useWalletStore();
+    const [bugDescription, setBugDescription] = useState("");
+
+    const mutation = useMutation({
+        mutationFn: async () => {
+            if (!window?.Telegram?.WebApp?.initData?.user?.id) {
+                const { subscription_link } = await generateTelegramLink(walletId);
+                window.open(subscription_link, "_blank");
+                return;
+            }
+            // Send bug report
+            return await axiosInstance.post(`/api/save-bug-report`, {
+                telegram_id: window?.Telegram?.WebApp?.initData?.user?.id,
+                wallet_id: walletId,
+                bug_description: bugDescription,
+            });
+        },
+        onSuccess: () => {
+            notify("Report sent successfully!");
+        },
+        onError: (error) => {
+            notify(error.response?.data?.message || "Report failed!", "error");
+        },
+    });
+
     const handleSubmit = (e) => {
-        e.preventDefault()
-        onClose()
-    }
+        e.preventDefault();
+        if (!bugDescription.trim()) {
+            notify("Bug description cannot be empty!", "error");
+            return;
+        }
+        mutation.mutate();
+        onClose();
+    };
 
     return (
-        <div onClick={onClose} style={{ backgroundImage: `url(${bg})`, backgroundSize: 'contain' }} className="modal-overlay">
-            <form className="report-bug-form" onClick={(e) => {
-                e.stopPropagation();
-            }} onSubmit={handleSubmit} >
+        <div
+            onClick={onClose}
+            style={{ backgroundImage: `url(${bg})`, backgroundSize: "contain" }}
+            className="modal-overlay"
+        >
+            <form
+                className="report-bug-form"
+                onClick={(e) => e.stopPropagation()}
+                onSubmit={handleSubmit}
+            >
                 <div className="modal-content">
-                    <h2 >Report Bug</h2>
-
-
-                    <p>Please describe the bug you've encountered</p>
-                    <textarea placeholder="The bug I'm experiencing..." className="bug-textarea" />
-
-                    <a className="dev-group-link" href="https://t.me/spotnet_dev">
-
-                        <img src={telegramIcon} alt="telegram-icon" className="telegram-icon" />
+                    <h3>Report Bug</h3>
+                    <p className="modal-paragraph-text">
+                        Please describe the bug you've encountered
+                    </p>
+                    <textarea
+                        value={bugDescription}
+                        onChange={(e) => setBugDescription(e.target.value)}
+                        placeholder="The bug I'm experiencing..."
+                        className="bug-textarea"
+                        required
+                    />
+                    <a
+                        className="dev-group-link"
+                        href="https://t.me/spotnet_dev"
+                        target="_blank"
+                        rel="noopener noreferrer"
+                    >
+                        <img
+                            src={telegramIcon}
+                            alt="telegram-icon"
+                            className="telegram-icon"
+                        />
                         Ask in our Dev group
                     </a>
                 </div>
                 <div className="button-group">
-                    <Button variant="secondary" type="button" className="cancel-button" onClick={(e) => {
-                        e.stopPropagation();
-                        onClose();
-                    }}>
+                    <Button
+                        variant="secondary"
+                        type="button"
+                        className="cancel-button"
+                        onClick={(e) => {
+                            e.stopPropagation();
+                            onClose();
+                        }}
+                    >
                         Cancel
                     </Button>
-                    <Button variant="primary" type="submit" className="submit-button">
-                        Send Report
+                    <Button
+                        variant="primary"
+                        type="submit"
+                        className="submit-button"
+                    >
+                        {mutation.isLoading ? "Sending..." : "Send Report"}
                     </Button>
                 </div>
-
-
             </form>
         </div>
-
-    )
+    );
 }
diff --git a/frontend/src/hooks/useAddDeposit.js b/frontend/src/hooks/useAddDeposit.js
index fa693432c..02b2c40d5 100644
--- a/frontend/src/hooks/useAddDeposit.js
+++ b/frontend/src/hooks/useAddDeposit.js
@@ -16,7 +16,7 @@ export const useAddDeposit = () => {
       const { data: contractAddress } = await axiosInstance.get(`/api/get-user-contract?wallet_id=${walletId}`);
 
       // Prepare extra deposit data
-      const {data: prepare_data} = await axiosInstance.get(`/api/get-add-deposit-data/${positionId}`, {
+      const { data: prepare_data } = await axiosInstance.get(`/api/get-add-deposit-data/${positionId}`, {
         params: {
           amount: amount,
           token_symbol: tokenSymbol
diff --git a/frontend/src/index.js b/frontend/src/index.js
index 7350d95c2..f5c72434a 100644
--- a/frontend/src/index.js
+++ b/frontend/src/index.js
@@ -11,12 +11,12 @@ const queryClient = new QueryClient();
 const root = ReactDOM.createRoot(document.getElementById('root'));
 
 root.render(
-  <ModalProvider>
-    <QueryClientProvider client={queryClient}>
+  <QueryClientProvider client={queryClient}>
+    <ModalProvider>
       <Router>
         <App />
       </Router>
       <ReactQueryDevtools initialIsOpen={false} />
-    </QueryClientProvider>
-  </ModalProvider>
+    </ModalProvider>
+  </QueryClientProvider>
 );