Merge branch 'main' of https://github.com/Akshola00/spotnet

djeck1432 · Dec 18, 2024 · 396e6d6 · 396e6d6
2 parents d13e5c6 + 26e87fb
commit 396e6d6
Show file tree

Hide file tree

Showing 34 changed files with 1,245 additions and 6,139 deletions.
diff --git a/frontend/public/dashboardmobile.png b/frontend/public/dashboardmobile.png
diff --git a/frontend/src/App.jsx b/frontend/src/App.jsx
@@ -9,7 +9,7 @@ import Login from 'pages/Login';
 import Form from 'pages/forms/Form';
 import { createPortal } from 'react-dom';
 import { logout } from 'services/wallet';
-import { saveTelegramUser, getTelegramUserWalletId } from 'services/telegram';
+import { getTelegramUserWalletId } from 'services/telegram';
 import Documentation from 'pages/spotnet/documentation/Documentation';
 import Withdraw from 'pages/vault/withdraw/Withdraw';
 import { useWalletStore } from 'stores/useWalletStore';
@@ -20,10 +20,11 @@ import { ActionModal } from 'components/ui/ActionModal';
 import Stake from 'pages/vault/stake/Stake';
 import { TELEGRAM_BOT_LINK } from 'utils/constants';
 import { useCheckMobile } from 'hooks/useCheckMobile';
+import { notifyError } from 'utils/notification';
+
 
 function App() {
   const { walletId, setWalletId, removeWalletId } = useWalletStore();
-  const [tgUser, setTgUser] = useState(JSON.parse(localStorage.getItem('tg_user')));
   const [showModal, setShowModal] = useState(false);
   const navigate = useNavigate();
   const [isMobileRestrictionModalOpen, setisMobileRestrictionModalOpen] = useState(true);
@@ -32,30 +33,7 @@ function App() {
   const disableDesktopOnMobile = process.env.REACT_APP_DISABLE_DESKTOP_ON_MOBILE !== 'false';
 
   const connectWalletMutation = useConnectWallet(setWalletId);
-  useEffect(() => {
-    if (tgUser) {
-      saveTelegramUser(tgUser, walletId)
-        .then(() => console.log('Telegram user saved successfully'))
-        .catch((error) => console.error('Error saving Telegram user:', error));
-    }
-  }, [walletId, tgUser]);
 
-  useEffect(() => {
-    if (!tgUser) {
-      localStorage.removeItem('tg_user');
-      return;
-    }
-    if (!walletId) {
-      getTelegramUserWalletId(tgUser)
-        .then((fetchedWalletId) => {
-          if (fetchedWalletId) {
-            setWalletId(fetchedWalletId);
-          }
-        })
-        .catch((error) => console.error('Error fetching wallet ID:', error));
-      localStorage.setItem('tg_user', JSON.stringify(tgUser));
-    }
-  }, [tgUser, walletId, setWalletId]);
 
   const handleConnectWallet = () => {
     connectWalletMutation.mutate();
@@ -76,6 +54,7 @@ function App() {
     setShowModal(false);
   };
 
+
   const handleisMobileRestrictionModalClose = () => {
     setisMobileRestrictionModalOpen(false);
   };
@@ -84,6 +63,20 @@ function App() {
     window.open(TELEGRAM_BOT_LINK, '_blank');
   };
 
+  useEffect(() => {
+    if (window.Telegram?.WebApp?.initData) {
+      getTelegramUserWalletId(window.Telegram.WebApp.initDataUnsafe.user.id).then((linked_wallet_id) => {
+        setWalletId(linked_wallet_id);
+        window.Telegram.WebApp.ready();
+      }).catch((error) => {
+        console.error('Error getting Telegram user wallet ID:', error);
+        notifyError('Error loading wallet');
+        window.Telegram.WebApp.ready();
+      });
+    }
+  }, [window.Telegram?.WebApp?.initDataUnsafe]);
+
+
   return (
     <div className="App">
       <Notifier />
@@ -101,19 +94,17 @@ function App() {
           document.body
         )}
       <Header
-        tgUser={tgUser}
-        setTgUser={setTgUser}
         onConnectWallet={handleConnectWallet}
         onLogout={handleLogoutModal}
       />
       <main>
         <Routes>
           <Route index element={<SpotnetApp onConnectWallet={handleConnectWallet} onLogout={handleLogout} />} />
-          <Route
+          <Route  
             path="/login"
             element={walletId ? <Navigate to="/" /> : <Login onConnectWallet={handleConnectWallet} />}
           />
-          <Route path="/dashboard" element={<Dashboard telegramId={tgUser} />} />
+          <Route path="/dashboard" element={<Dashboard telegramId={window?.Telegram?.WebApp?.initData?.user?.id} />} />
           <Route path="/withdraw" element={<Withdraw />} />
           <Route path="/overview" element={<OverviewPage />} />
           <Route path="/form" element={<Form />} />

diff --git a/frontend/src/components/Card/Card.jsx b/frontend/src/components/Card/Card.jsx
@@ -0,0 +1,27 @@
+import './card.css';
+
+function Card({ label, icon, value = '', cardData = [] }) {
+  return (
+    <div className="card">
+      <div className="card-header">
+        {icon}
+        <span className="label">{label}</span>
+      </div>
+      <div className="card-value">
+        {cardData.length > 0 ? (
+          <>
+            <span className="currency-symbol">$</span>
+            <span className="top-card-value">
+              {' '}
+              {cardData[1]?.balance ? Number(cardData[1].balance).toFixed(8) : '0.00'}
+            </span>
+          </>
+        ) : (
+          <span className="top-card-value">{value}</span>
+        )}
+      </div>
+    </div>
+  );
+}
+
+export default Card;
diff --git a/frontend/src/components/Card/card.css b/frontend/src/components/Card/card.css
@@ -0,0 +1,107 @@
+.card {
+  width: 309px;
+  height: 101px;
+  background: var(--dark-background);
+  border: 1px solid var(--light-purple);
+  border-radius: 900px;
+  padding-top: 4px;
+  padding-right: 24px;
+  padding-left: 24px;
+  text-align: center;
+}
+
+.top-card-value {
+  font-size: 24px;
+}
+.card-header {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  border: none;
+  color: var(--second-primary);
+}
+.currency-symbol {
+  margin-right: 4px;
+  font-size: inherit;
+  color: inherit;
+}
+
+.label {
+  font-size: 14px;
+  font-weight: 600;
+}
+
+.card-value {
+  font-size: 24px;
+  font-weight: 600;
+  height: fit-content;
+  color: var(--second-primary);
+}
+
+@media (max-width: 768px) {
+  .card {
+    height: 90px;
+    padding: 8px 2px 14px 2px;
+    border-radius: 14px;
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+    align-items: center;
+  }
+
+  .card-header {
+    padding: 0;
+  }
+
+  .card-header .label {
+    font-size: 14px;
+    font-weight: 400;
+  }
+
+  .currency-symbol {
+    font-size: 18px;
+  }
+
+  .top-card-value {
+    font-size: 18px;
+  }
+}
+
+@media (max-width: 550px) {
+  .card {
+    background: var(--deep-purple);
+  }
+}
+
+@media (max-width: 480px) {
+  .top-card-value {
+    font-size: 16px;
+  }
+  .currency-symbol {
+    font-size: 16px;
+  }
+  .card {
+    width: 167px;
+    padding: 16px 0px;
+  }
+}
+
+@media (max-width: 400px) {
+  .card {
+    width: 167px;
+    padding: 16px 0px;
+    display: flex;
+    flex-direction: column;
+    justify-content: space-between;
+  }
+  .top-card-value {
+    font-size: 14px;
+  }
+}
+
+@media (max-width: 320px) {
+  .card {
+    width: 167px;
+    padding: 10px 0px;
+  }
+}
diff --git a/frontend/src/components/Footer/footer.css b/frontend/src/components/Footer/footer.css
@@ -6,6 +6,7 @@
   align-items: center;
   justify-content: space-between;
   position: relative;
+  z-index: 15;
 }
 
 .footer-text p {

diff --git a/frontend/src/components/MetricCard/metricCard.css b/frontend/src/components/MetricCard/metricCard.css
@@ -2,40 +2,67 @@
   width: 309px;
   background: var(--header-button-bg);
   border: var(--midnight-purple-border);
-  border-radius: 900px;
+  border-radius: 8px;
   display: flex;
   flex-direction: column;
   justify-content: center;
   align-items: center;
   gap: 4px;
+  padding: 24px;
 }
 
-.card-header {
+.card-header .label{
   font-size: 14px;
   line-height: 19px;
   font-weight: 600;
 }
 
+.card-value .metric-card-value{
+  font-size: 24px;
+  line-height: 32px;
+  font-weight: 600;
+}
+
+
+
 @media (max-width: 768px) {
   .metric-card {
     width: 100%; /* Full width on mobile */
-    border-radius: 16px; /* Adjust border radius for mobile */
-    padding: 16px 24px;
+    border-radius: 10px; /* Adjust border radius for mobile */
+    /* padding: 16px 24px; */
   }
 }
 
-@media (max-width: 640px) {
+@media (max-width: 678px) {
   .metric-card {
     width: 100%; /* Ensure full width on smaller screens */
+    /* padding: 24px 2px; */
   }
 
-  .card-header .label {
-    font-size: 12px;
-    line-height: 16px;
+  .card-value .metric-card-value {
+    font-size: 21px;
+    /* line-height: 21px; */
   }
+}
 
-  .card-value .metric-card-value {
-    font-size: 20px;
-    line-height: 27px;
+@media (max-width: 480px) {
+  .metric-card {
+    padding: 0 2px;
   }
+
+  .card-header .label {
+    font-size: 12px;
+   line-height: 16px; 
+ }
+
+ .card-value .metric-card-value {
+  font-size: 16px;
+  line-height: 21px;
+}
+}
+
+@media (max-width: 426px) {
+
+
+
 }
diff --git a/frontend/src/components/borrow/Borrow.jsx b/frontend/src/components/borrow/Borrow.jsx
@@ -0,0 +1,26 @@
+import React from "react"
+import './borrow.css'
+import { ReactComponent as BorrowIcon } from 'assets/icons/borrow_dynamic.svg';
+
+function Borrow({data}){
+    return (
+        <div className="tab-content">
+                <div className="balance-info">
+                  <div className="currency-info">
+                    {React.createElement(data[1]?.currencyIcon || BorrowIcon, {
+                      className: 'icon',
+                    })}
+                    <span className="currency-name">{data[1]?.currencyName || 'N/A'}</span>
+                  </div>
+                  <span>
+                    <span className="balance-label">Balance: </span>
+                    <span className="balance-value">
+                      {data[1]?.balance ? Number(data[1].balance).toFixed(8) : '0.00'}
+                    </span>
+                  </span>
+                </div>
+              </div>
+    )
+}
+
+export default Borrow