Fixed the fee calculation on frontend withdraw

app/app/page.tsx

@@ -197,6 +197,7 @@ export default function AppPage() {
                     {tab === "withdraw" && (
                       <WithdrawForm
                         userShares={userShares}
+                        userDeposits={userDeposits}
                         onSuccess={handleRefresh}
                         isConnected={isConnected}
                       />

components/Withdraw/WithdrawForm.tsx

@@ -8,12 +8,14 @@
 
 interface WithdrawFormProps {
   userShares: bigint | null;
+  userDeposits: bigint | null;
   onSuccess: () => void;
   isConnected: boolean;
 }
 
 export const WithdrawForm = ({
   userShares,
+  userDeposits,
   onSuccess,
   isConnected,
 }: WithdrawFormProps) => {
@@ -29,8 +31,12 @@
       if (withdrawPreview !== null) setWithdrawPreview(null);
       return;
     }
-    const shares = parseUnits(withdrawAmt, USDC_DECIMALS);
-    previewByShares(shares).then(setWithdrawPreview);
+    try {
+      const shares = parseUnits(withdrawAmt, USDC_DECIMALS);
+      previewByShares(shares).then(setWithdrawPreview);
+    } catch (e) {
+      // Handle invalid input gracefully
+    }
   }, [withdrawAmt, isConnected, previewByShares, withdrawPreview]);
 
   const handleWithdraw = async () => {
@@ -51,6 +57,27 @@
         })
       : "0.00";
 
+  // Calculate yield accurately based on principal proportion
+  const getYieldInfo = () => {
+    if (!withdrawPreview || !withdrawAmt || !userShares || !userDeposits) return { yield: 0, fee: 0 };
+
+    const sharesToWithdraw = parseUnits(withdrawAmt, USDC_DECIMALS);
+    const grossAssets = parseFloat(formatUnits(withdrawPreview, USDC_DECIMALS));
+
+    // Proportional principal calculation
+    // principalForShares = (sharesToWithdraw / totalShares) * totalDeposits
+    const totalShares = parseFloat(formatUnits(userShares, USDC_DECIMALS));
+    const totalDeposits = parseFloat(formatUnits(userDeposits, USDC_DECIMALS));
+
+    const principalForShares = (parseFloat(withdrawAmt) / totalShares) * totalDeposits;
+    const yieldAmount = Math.max(0, grossAssets - principalForShares);
+    const feeAmount = yieldAmount * 0.05;
+
+    return { yield: yieldAmount, fee: feeAmount };
+  };
+
+  const { yield: calcYield, fee: calcFee } = getYieldInfo();
+
   const labelCls = "text-[var(--text-muted)] text-sm";
   const valueCls = "font-mono font-bold text-sm text-[var(--text-primary)]";
   const infoRow = "flex justify-between items-center py-2";
@@ -108,25 +135,17 @@
           <div className={infoRow}>
             <span className={labelCls}>Yield earned</span>
             <span className={`${valueCls} text-teal`}>
-              {withdrawPreview !== null && withdrawAmt
-                ? `+${(
-                    parseFloat(formatUnits(withdrawPreview, USDC_DECIMALS)) -
-                    parseFloat(withdrawAmt)
-                  ).toLocaleString(undefined, { minimumFractionDigits: 2, maximumFractionDigits: 6 })}`
+              {calcYield > 0
+                ? `+${calcYield.toLocaleString(undefined, { minimumFractionDigits: 2, maximumFractionDigits: 6 })}`
                 : "—"}{" "}
               USDC
             </span>
           </div>
           <div className={infoRow}>
             <span className={labelCls}>Fee (5% of yield)</span>
             <span className={`${valueCls} text-danger`}>
-              −
-              {withdrawPreview !== null && withdrawAmt
-                ? (
-                    (parseFloat(formatUnits(withdrawPreview, USDC_DECIMALS)) -
-                      parseFloat(withdrawAmt)) *
-                    0.05
-                  ).toLocaleString(undefined, { minimumFractionDigits: 2, maximumFractionDigits: 6 })
+              {calcFee > 0
+                ? `−${calcFee.toLocaleString(undefined, { minimumFractionDigits: 2, maximumFractionDigits: 6 })}`
                 : "—"}{" "}
               USDC
             </span>