From acc9965455cf5f6cd26af73db1339352dcf164b1 Mon Sep 17 00:00:00 2001
From: 1nonlypiece <jagadeeshftw@gmail.com>
Date: Sat, 21 Dec 2024 13:42:29 +0530
Subject: [PATCH] feat(frontend): Address review comments part 3

---
 .../components/BalanceCards/BalanceCards.jsx  | 25 +++++++++++----
 .../components/BalanceCards/balanceCards.css  | 10 ++++--
 frontend/src/hooks/useWithdrawAll.js          |  4 ++-
 frontend/src/pages/forms/Form.jsx             | 11 +------
 .../dashboard/withdraw-all/WithdrawAll.jsx    | 32 +++++++++----------
 frontend/src/pages/vault/stake/Stake.jsx      | 12 +------
 6 files changed, 47 insertions(+), 47 deletions(-)

diff --git a/frontend/src/components/BalanceCards/BalanceCards.jsx b/frontend/src/components/BalanceCards/BalanceCards.jsx
index 4d3f3722..bbbacceb 100644
--- a/frontend/src/components/BalanceCards/BalanceCards.jsx
+++ b/frontend/src/components/BalanceCards/BalanceCards.jsx
@@ -1,10 +1,13 @@
-import React, { useEffect } from 'react';
+import React, { useEffect, useState } from 'react';
 import { useMatchMedia } from 'hooks/useMatchMedia';
 import { getBalances } from '../../services/wallet';
 import { useWalletStore } from 'stores/useWalletStore';
-import "./balanceCards.css";
+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 BalanceCards = () => {
   const { walletId } = useWalletStore();
 
   const isMobile = useMatchMedia('(max-width: 768px)');
@@ -13,6 +16,13 @@ const BalanceCards = ({ balances, setBalances }) => {
     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">
@@ -23,7 +33,9 @@ const BalanceCards = ({ balances, setBalances }) => {
                 <label htmlFor="icon" className="balance-title">
                   <span className="token-icon">{balance.icon}</span>
                 </label>
-                <label htmlFor={balance.title}>{balance.title} Balance</label>
+                <label htmlFor={balance.title}>
+                  <span className="balance-text">{balance.title} Balance</span>
+                </label>
               </div>
               <label htmlFor={balance.title}>{balance.balance}</label>
             </div>
@@ -32,9 +44,10 @@ const BalanceCards = ({ balances, setBalances }) => {
               <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>
+              <label htmlFor={balance.title}>
+              <span className="balance-amount">{balance.balance}</span>
+              </label>
             </div>
           )
         )}
diff --git a/frontend/src/components/BalanceCards/balanceCards.css b/frontend/src/components/BalanceCards/balanceCards.css
index c34714a1..edbe7901 100644
--- a/frontend/src/components/BalanceCards/balanceCards.css
+++ b/frontend/src/components/BalanceCards/balanceCards.css
@@ -73,6 +73,11 @@
 .balance-text {
     color: #83919F;
 }
+
+.balance-amount {
+  font-weight: 600;
+}
+
 .token-icon {
     display: flex;
     align-items: center;
@@ -103,7 +108,7 @@
     
     .balance-item {
         height: fit-content;
-        padding: 16px 24px;
+        padding: 16px 8px;
         display: flex;
         flex-direction: column;
         align-items: center;
@@ -149,4 +154,5 @@
         z-index: 1;
     }
 
-}
\ No newline at end of file
+}
+
diff --git a/frontend/src/hooks/useWithdrawAll.js b/frontend/src/hooks/useWithdrawAll.js
index 693d5975..abe17845 100644
--- a/frontend/src/hooks/useWithdrawAll.js
+++ b/frontend/src/hooks/useWithdrawAll.js
@@ -5,6 +5,7 @@ import { notify } from "components/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}`);
         },
@@ -17,7 +18,8 @@ const useWithdrawAll = () => {
     });
 
     return {
-        withdrawAll: mutation.mutate
+        withdrawAll: mutation.mutate,
+        isLoading: mutation.isPending,
     };
 };
 
diff --git a/frontend/src/pages/forms/Form.jsx b/frontend/src/pages/forms/Form.jsx
index 3c0199ca..d4ae2c92 100644
--- a/frontend/src/pages/forms/Form.jsx
+++ b/frontend/src/pages/forms/Form.jsx
@@ -1,7 +1,4 @@
 import React, { useState } from 'react';
-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/BalanceCards';
 import MultiplierSelector from 'components/MultiplierSelector';
@@ -46,12 +43,6 @@ const Form = () => {
     }
   };
 
-  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' },
-  ]);
-
   const handleSubmit = async (e) => {
     e.preventDefault();
 
@@ -91,7 +82,7 @@ const Form = () => {
 
   return (
     <div className="form-content-wrapper">
-      <BalanceCards balances={balances} setBalances={setBalances} walletId={walletId} />
+      <BalanceCards />
       {successful && createPortal(<CongratulationsModal />, document.body)}
       {isClosePositionOpen && (
         <ActionModal
diff --git a/frontend/src/pages/spotnet/dashboard/withdraw-all/WithdrawAll.jsx b/frontend/src/pages/spotnet/dashboard/withdraw-all/WithdrawAll.jsx
index c8c44aba..13e02855 100644
--- a/frontend/src/pages/spotnet/dashboard/withdraw-all/WithdrawAll.jsx
+++ b/frontend/src/pages/spotnet/dashboard/withdraw-all/WithdrawAll.jsx
@@ -1,8 +1,5 @@
-import React, { useState } from 'react';
+import React from 'react';
 import BalanceCards from 'components/BalanceCards/BalanceCards';
-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 './withdraw_all.css';
 import { useWalletStore } from 'stores/useWalletStore';
 import Button from 'components/ui/Button/Button';
@@ -10,13 +7,8 @@ import useWithdrawAll from 'hooks/useWithdrawAll';
 
 const WithdrawAll = () => {
   const { walletId } = useWalletStore();
-  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' },
-  ]);
 
-  const { withdrawAll } = useWithdrawAll();
+  const { withdrawAll, isLoading } = useWithdrawAll();
   const handleWithdrawAll = () => {
     withdrawAll(walletId);
   };
@@ -24,19 +16,25 @@ const WithdrawAll = () => {
   return (
     <div className="withdrawall-wrapper">
       <div className="withdrawall-container">
-        <BalanceCards balances={balances} setBalances={setBalances} walletId={walletId} />
+        <BalanceCards />
         <div className="withdrawall-content">
-          
-        <div className="withdrawall-title">
-          <h1>Please take special note</h1>
-        </div>
+          <div className="withdrawall-title">
+            <h1>Please take special note</h1>
+          </div>
 
           <div className="withdrawall-info-card">
             Clicking on the `Withdraw All` button means you are agreeing to close all positions and get all tokens
             transferred to your wallet.
           </div>
-          <Button className="withdrawall-btn" variant="secondary" size="lg" type="button" onClick={handleWithdrawAll}>
-            Withdraw All
+          <Button
+            className="withdrawall-btn"
+            variant="secondary"
+            size="lg"
+            type="button"
+            onClick={handleWithdrawAll}
+            disabled={isLoading}
+          >
+            {isLoading ? 'Processing...' : 'Withdraw All'}
           </Button>
         </div>
       </div>
diff --git a/frontend/src/pages/vault/stake/Stake.jsx b/frontend/src/pages/vault/stake/Stake.jsx
index 330f00fe..23b625c6 100644
--- a/frontend/src/pages/vault/stake/Stake.jsx
+++ b/frontend/src/pages/vault/stake/Stake.jsx
@@ -1,8 +1,4 @@
 import React, { useState } from 'react';
-import { ReactComponent as ETH } from '../../../assets/icons/ethereum.svg';
-import { ReactComponent as USDC } from '../../../assets/icons/borrow_usdc.svg';
-import { ReactComponent as DAI } from '../../../assets/icons/dai.svg';
-import { ReactComponent as STTRK } from '../../../assets/icons/strk.svg';
 import MetricCard from 'components/StakeCard/MetricCard';
 import STRK from '../../../assets/icons/strk.svg';
 import USDCc from '../../../assets/icons/apy_icon.svg';
@@ -17,12 +13,6 @@ function Stake() {
   const [amount, setAmount] = useState('0');
   const [showDrop, setShowDrop] = useState(false);
 
-  const [balances, setBalances] = useState([
-    { icon: <STTRK />, title: 'STRK', balance: '0.046731' },
-    { icon: <USDC />, title: 'APY', balance: '0.046731' },
-    { icon: <ETH />, title: 'ETH', balance: '0.046731' },
-    { icon: <DAI />, title: 'DAI', balance: '0.046731' },
-  ]);
   const networks = [{ name: 'Starknet', image: STRK }];
   const handleChange = (network) => {
     setSelectedNetwork(network.name);
@@ -49,7 +39,7 @@ function Stake() {
               </div>
             </div>
             <div className="mobile-screen-balance">
-              <BalanceCards balances={balances} setBalances={setBalances} walletId={null} />
+              <BalanceCards />
             </div>
           </div>
           <div className="form">