feat(frontend): add WithdrawAll component and route

frontend/src/App.jsx

@@ -21,6 +21,7 @@ import Stake from 'pages/vault/stake/Stake';
 import { TELEGRAM_BOT_LINK } from 'utils/constants';
 import { useCheckMobile } from 'hooks/useCheckMobile';
 import PositionHistory from 'pages/spotnet/position_history/PositionHistory';
+import WithdrawAll from 'pages/spotnet/dashboard/withdraw-all/WithdrawAll';
 
 
 function App() {
@@ -109,6 +110,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/BalanceCards/BalanceCards.jsx

@@ -0,0 +1,46 @@
+import React, { useEffect } from 'react';
+import { useMatchMedia } from 'hooks/useMatchMedia';
+import { getBalances } from '../../services/wallet';
+import { useWalletStore } from 'stores/useWalletStore';
+import "./balanceCards.css";
+
+const BalanceCards = ({ balances, setBalances }) => {
+  const { walletId } = useWalletStore();
+
+  const isMobile = useMatchMedia('(max-width: 768px)');
+
+  useEffect(() => {
+    getBalances(walletId, setBalances);
+  }, [walletId]);
+
+  return (
+    <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}>{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>
+                <span className="balance-text">{balance.title} Balance</span>
+
+              </label>
+              <label htmlFor={balance.title}>{balance.balance}</label>
+            </div>
+          )
+        )}
+      </div>
+    </div>
+  );
+};
+
+export default BalanceCards;

frontend/src/components/BalanceCards/balanceCards.css

@@ -0,0 +1,152 @@
+.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;
+}
+.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 24px;
+        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,24 @@
+import { useMutation } from "@tanstack/react-query";
+import { axiosInstance } from "utils/axios";
+import { notify } from "components/Notifier/Notifier";
+
+const useWithdrawAll = () => {
+    const mutation = useMutation({
+        mutationFn: async (walletId) => {
+            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
+    };
+};
+
+export default useWithdrawAll;

frontend/src/pages/forms/Form.jsx

@@ -3,7 +3,7 @@ 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 TokenSelector from 'components/TokenSelector';
-import BalanceCards from 'components/BalanceCards';
+import BalanceCards from 'components/BalanceCards/BalanceCards';
 import MultiplierSelector from 'components/MultiplierSelector';
 import { handleTransaction } from 'services/transaction';
 import Spinner from 'components/spinner/Spinner';