Update stake preview (#106)

* update stake preview * Fix stake amount * Fix stake bugs --------- Co-authored-by: lq0-github <[email protected]>
burrowHQ · Oct 24, 2024 · c6dbcb7 · c6dbcb7
1 parent 4254b40
commit c6dbcb7
Show file tree

Hide file tree

Showing 2 changed files with 17 additions and 10 deletions.
diff --git a/screens/Staking/index.tsx b/screens/Staking/index.tsx
@@ -115,7 +115,7 @@ const Staking = () => {
                   <CustomButton
                     onClick={() => setModal({ name: "staking" })}
                     className="w-full"
-                    disabled={!total}
+                    // disabled={!total}
                   >
                     Stake
                   </CustomButton>

diff --git a/screens/Staking/modalStaking.tsx b/screens/Staking/modalStaking.tsx
@@ -45,7 +45,7 @@ const ModalStaking = ({ isOpen, onClose }) => {
   const selectedMonths = stakingTimestamp ? Math.round(unstakeDate.diffNow().as("months")) : months;
   const invalidAmount = +amount > +total;
   const invalidMonths = months === maxMonth ? false : months < selectedMonths;
-  const disabledStake = !amount || invalidAmount || invalidMonths;
+  const disabledStake = !amount || invalidAmount || invalidMonths || Number(amount) === 0;
   const { avgStakeSupplyAPY, avgStakeBorrowAPY, avgStakeNetAPY, totalTokenNetMap } =
     useStakeRewardApy();
   const [, , multiplier] = useAppSelector(getAccountBoostRatioData);
@@ -56,30 +56,37 @@ const ModalStaking = ({ isOpen, onClose }) => {
     .replace(/(?!^)-/g, "")
     .replace(/^0+(\d)/gm, "$1");
 
-  const sliderValue = Math.round((amount * 100) / Number(total)) || 0;
+  const sliderValue = useMemo(() => {
+    if (Number(amount) > Number(total)) {
+      return 100;
+    }
+    return Math.round((Number(amount) * 100) / Number(total)) || 0;
+  }, [amount, total]);
 
   const handleMaxClick = () => {
     trackMaxStaking({ total: totalToken });
     setAmount(totalToken);
   };
   const handleInputChange = (e) => {
-    let { value } = e?.target || {};
+    const { value } = e?.target || {};
     const numRegex = /^([0-9]*\.?[0-9]*$)/;
     if (!numRegex.test(value)) {
       e.preventDefault();
       return;
     }
-    if (Number(value) > Number(total)) {
-      value = total;
-    }
     setAmount(value);
   };
 
   const handleRangeSliderChange = (percent) => {
-    if (Number(percent) >= 99.7) {
+    if (Number(total) === 0) {
+      setAmount("0");
+    } else if (percent >= 100) {
+      setAmount(totalToken);
+    } else if (Number(percent) >= 99.7) {
       setAmount(totalToken);
     } else {
-      setAmount((Number(total) * percent) / 100);
+      const calculatedAmount = (Number(total) * percent) / 100;
+      setAmount(Number(calculatedAmount) === 0 ? "0" : calculatedAmount);
     }
   };
 
@@ -208,7 +215,7 @@ const ModalStaking = ({ isOpen, onClose }) => {
           isLoading={loadingStake}
           className="w-full mt-2 mb-4"
         >
-          Stake
+          {Number(amount) > Number(total) ? "Insufficient Balance" : "Stake"}
         </CustomButton>
 
         <div className="text-primary h5 mb-4 text-center">