Merge branch 'main' into feat/update-background-image

frontend/src/App.jsx

@@ -20,6 +20,7 @@ import Stake from './pages/stake/Stake';
 import { TELEGRAM_BOT_LINK } from './utils/constants';
 import { useCheckMobile } from './hooks/useCheckMobile';
 import PositionHistory from './pages/position-history/PositionHistory';
+import WithdrawAll from 'pages/spotnet/dashboard/withdraw-all/WithdrawAll';
 
 function App() {
   const { setWalletId, removeWalletId } = useWalletStore();
@@ -101,6 +102,7 @@ function App() {
           <Route path="/documentation" element={<Documentation />} />
           <Route path="/position-history" element={<PositionHistory />} />
           <Route path="/stake" element={<Stake />} />
+          <Route path="/dashboard/withdraw-all" element={<WithdrawAll />} />
         </Routes>
       </main>
       <Footer />

frontend/src/components/layout/wallet-section/WalletSection.jsx

@@ -1,5 +1,5 @@
 import React, { useState, useEffect, useRef } from 'react';
-import { Button } from 'components/ui/button';
+import { Button } from 'components/ui/Button';
 import { useWalletStore } from '../../../stores/useWalletStore';
 
 const WalletSection = ({ onConnectWallet, onLogout }) => {

frontend/src/components/ui/action-modal/ActionModal.jsx

@@ -1,6 +1,6 @@
 import React from 'react';
 import './actionModal.css';
-import { Button } from '../button';
+import { Button } from '../Button';
 import useLockBodyScroll from 'hooks/useLockBodyScroll';
 const ActionModal = ({
   isOpen,

frontend/src/components/ui/balance-cards/BalanceCards.jsx

@@ -1,63 +1,59 @@
-import React, { useEffect } from 'react';
+import React, { useEffect, useState } from 'react';
 import { useMatchMedia } from 'hooks/useMatchMedia';
 import { getBalances } from '../../../services/wallet';
-import useScrollTracker from 'hooks/useScrollTracker';
-import PaginationDots from '../pagination-dots/PaginationDots';
 import { useWalletStore } from 'stores/useWalletStore';
+import { ReactComponent as ETH } from '../../../assets/icons/ethereum.svg';
+import { ReactComponent as USDC } from '../../../assets/icons/borrow_usdc.svg';
+import { ReactComponent as STRK } from '../../../assets/icons/strk.svg';
+import './balanceCards.css';
 
-const BalanceCards = ({balances, setBalances}) => {
-    const { walletId } = useWalletStore();
+const BalanceCards = () => {
+  const { walletId } = useWalletStore();
 
-
   const isMobile = useMatchMedia('(max-width: 768px)');
-  const { scrollRef, activeIndex, setActiveIndex } = useScrollTracker();
-
-  const handleDotClick = (index) => {
-    setActiveIndex(index);
-    const balanceContainer = scrollRef.current;
-    const containerWidth = balanceContainer.offsetWidth;
-    const scrollAmount = index * containerWidth;
-
-    balanceContainer.scrollTo({ left: scrollAmount, behavior: "smooth" });
-  };
-
 
   useEffect(() => {
     getBalances(walletId, setBalances);
   }, [walletId]);
 
+  const [balances, setBalances] = useState([
+    { icon: <ETH />, title: 'ETH', balance: '0.00' },
+    { icon: <USDC />, title: 'USDC', balance: '0.00' },
+    { icon: <STRK />, title: 'STRK', balance: '0.00' },
+  ]);
+
+
   return (
-    <div className='balance-card'>
-    <div className="balance-container" ref={scrollRef}>
-      {balances.map((balance) =>
-        isMobile ? (
-          <div className="balance-item" key={balance.title}>
-            <div className="title-container">
-              <label htmlFor="icon" className="balance-title">
-              <span className="token-icon">{balance.icon}</span>
+    <div className="balance-card">
+      <div className="balance-container">
+        {balances.map((balance) =>
+          isMobile ? (
+            <div className="balance-item" key={balance.title}>
+              <div className="title-container">
+                <label htmlFor="icon" className="balance-title">
+                  <span className="token-icon">{balance.icon}</span>
+                </label>
+                <label htmlFor={balance.title}>
+                  <span className="balance-text">{balance.title} Balance</span>
+                </label>
+              </div>
+              <label htmlFor={balance.title}>{balance.balance}</label>
+            </div>
+          ) : (
+            <div className="balance-item" key={balance.title}>
+              <label htmlFor={balance.title} className={'balance-title'}>
+                <span className="token-icon blend">{balance.icon}</span>
+                <span className="balance-text">{balance.title} Balance</span>
+              </label>
+              <label htmlFor={balance.title}>
+              <span className="balance-amount">{balance.balance}</span>
               </label>
-              <label htmlFor={balance.title}>{balance.title} Balance</label>
             </div>
-              <label htmlFor={balance.title}>{balance.balance}</label>
-          </div>
-        ) : (
-          <div className="balance-item" key={balance.title}>
-            <label htmlFor={balance.title} className={'balance-title'}>
-            <span className="token-icon blend">{balance.icon}</span>
-              {balance.title} Balance
-            </label>
-            <label htmlFor={balance.title}>{balance.balance}</label>
-          </div>
-        )
-      )}
-    </div>
-      <PaginationDots
-          balances={balances}
-          activeIndex={activeIndex}
-          onDotClick={handleDotClick}
-        />
+          )
+        )}
       </div>
+    </div>
   );
 };
 
-export default BalanceCards;
+export default BalanceCards;

frontend/src/components/ui/balance-cards/balanceCards.css

@@ -0,0 +1,157 @@
+.balance-card {
+    max-width: 100%;
+    margin-top: 20px;
+}
+
+.balance-container {
+  display: flex;
+  justify-content: space-between;
+  max-width: 100%;
+  gap: 16px;
+}
+
+.balance-item {
+    display: flex;
+    flex-direction: column;
+    width: 198px;
+    height: 101px;
+    align-items: center;
+    border-radius: 8px;
+    border: 1px solid var(--light-purple);
+    justify-content: center;
+    background-color: var(--dark-purple);
+    padding: 16px 24px;
+}
+
+.balance-item label:nth-child(1) {
+  font-size: 14px;
+  color: var(--secondary);
+  display: flex;
+  gap: 4px;
+}
+
+.balance-item label:nth-child(2) {
+  font-size: 24px;
+  color: var(--secondary);
+  line-height: 32.68px;
+}
+
+.balance-title {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+}
+
+.balance-title span {
+  font-size: 14px;
+}
+
+.balance-title .balance-icon-wrapper {
+  background-color: #201338;
+  border-radius: 12px;
+  display: block;
+  width: 24px;
+  height: 24px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  margin-right: 10px;
+  margin-bottom: 0;
+}
+
+.balance-title svg {
+  height: 18px;
+  width: 18px;
+  height: 18px;
+  width: 18px;
+}
+
+.balance-title.blend svg {
+  filter: grayscale(1);
+}
+
+.balance-text {
+    color: #83919F;
+}
+
+.balance-amount {
+  font-weight: 600;
+}
+
+.token-icon {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    padding: 5px;
+    border-radius: 2000px;
+    background-color: hsla(261, 49%, 15%, 1);
+}
+
+
+/* Responsiveness */
+/* Mobile */
+@media (max-width: 768px) {
+
+    .balance-container {
+        flex-direction: row;
+        justify-content: flex-start;
+        gap: 1rem;
+        align-items: center;
+        margin-bottom: 0;
+        overflow-x: auto;
+        scroll-snap-type: x mandatory;
+        gap: 20px;
+        max-width: 100%;
+        scrollbar-width: none;
+        -ms-overflow-style: none;
+    }
+
+    .balance-item {
+        height: fit-content;
+        padding: 16px 8px;
+        display: flex;
+        flex-direction: column;
+        align-items: center;
+        margin-right: 0;
+        border-radius: 16px;
+    }
+
+    .balance-item:first-child {
+      margin-left: 20px;
+    }
+
+    .balance-item:last-child {
+      margin-right: 20px;
+    }
+
+    .balance-item .balance-title {
+      font-size: 1rem;
+      display: flex;
+      align-items: center;
+    }
+
+    .balance-item .title-container + label:nth-of-type(1) {
+      font-size: 20px;
+      font-weight: 600;
+    }
+
+    .balance-item label:nth-child(2) {
+      color: var(--secondary);
+      font-size: 14px;
+    }
+
+    .title-container {
+      display: flex;
+      flex-direction: row;
+      align-items: center;
+      justify-content: center;
+      width: max-content;
+    }
+
+    .token-icon {
+        margin-right: 5px;
+        position: relative;
+        z-index: 1;
+    }
+
+}

frontend/src/globals.css

@@ -67,6 +67,9 @@
   --light-dark-background: #130713;
   --text-gray: #798795;
   --modal-border: #170f2e;
+  --warning-colour:#BDC000;
+  --warning-colour-alt: #272A0A;
+  --warning-text-colour: #F0F0F0;
 }
 
 body {

frontend/src/hooks/useWithdrawAll.js

@@ -0,0 +1,26 @@
+import { useMutation } from "@tanstack/react-query";
+import { axiosInstance } from "utils/axios";
+import { notify } from "components/layout/notifier/Notifier";
+
+const useWithdrawAll = () => {
+    const mutation = useMutation({
+        mutationFn: async (walletId) => {
+            await new Promise((resolve) => setTimeout(resolve, 5000));
+            if (!walletId) throw new Error("Wallet ID is required.");
+            await axiosInstance.get(`/api/withdraw-all?wallet_id=${walletId}`);
+        },
+        onSuccess: () => {
+            notify("Withdraw All operation completed successfully!", "success");
+        },
+        onError: (error) => {
+            notify(error?.message || "Failed to complete the Withdraw All operation.", "error");
+        },
+    });
+
+    return {
+        withdrawAll: mutation.mutate,
+        isLoading: mutation.isPending,
+    };
+};
+
+export default useWithdrawAll;

frontend/src/pages/dashboard/Dashboard.jsx

@@ -8,7 +8,7 @@ import { ReactComponent as TelegramIcon } from '../../assets/icons/telegram_dash
 import Spinner from '../../components/ui/spinner/Spinner';
 import useDashboardData from '../../hooks/useDashboardData';
 import { useClosePosition, useCheckPosition } from '../../hooks/useClosePosition';
-import Button from 'components/ui/button/Button';
+import Button from 'components/ui/Button/Button';
 import { useWalletStore } from '../../stores/useWalletStore';
 import { ActionModal } from '../../components/ui/action-modal';
 import useTelegramNotification from '../../hooks/useTelegramNotification';