Pie bar error handling fixes (#102)

* fix ordering of PieBar * fix decimal places of stakingAmount in StakingModal, so all balance-input comparisons work * fixed border of PieBar if no tokens staked * fix order of PieBar
airswap · Oct 5, 2023 · b86857f · b86857f
1 parent 62d2721
commit b86857f
Show file tree

Hide file tree

Showing 4 changed files with 31 additions and 29 deletions.
diff --git a/src/features/common/utils/formatNumber.ts b/src/features/common/utils/formatNumber.ts
@@ -14,6 +14,7 @@ export const formatNumber = (
   } else {
     _number = number;
   }
+
   return _number.toLocaleString(window.navigator.language, {
     minimumFractionDigits: 0,
     maximumFractionDigits: 2,

diff --git a/src/features/staking/PieBar.tsx b/src/features/staking/PieBar.tsx
@@ -9,37 +9,37 @@ export const PieBar = () => {
   const { unstakableSastBalanceRaw, sAstBalanceRaw, astBalanceRaw } =
     useTokenBalances();
 
-  const stakable = formatNumber(astBalanceRaw, 4) || 0;
+  const unstaked = formatNumber(astBalanceRaw, 4) || 0;
   const staked = formatNumber(sAstBalanceRaw, 4) || 0;
   const unstakable = formatNumber(unstakableSastBalanceRaw, 4) || 0;
 
-  const { unstakablePercent, stakedPercent, stakablePercent } =
+  const { unstakablePercent, stakedPercent, unstakedPercent } =
     calculateTokenProportions({
       unstakable: Number(unstakableSastBalanceRaw) / 10 ** 4,
       staked: Number(sAstBalanceRaw) / 10 ** 4,
-      stakable: Number(astBalanceRaw) / 10 ** 4,
+      unstaked: Number(astBalanceRaw) / 10 ** 4,
     });
 
-  const zeroBalance = !unstakablePercent && !stakedPercent && !stakablePercent;
+  const zeroBalance = !unstakablePercent && !stakedPercent && !unstakedPercent;
 
   const stakableData = [
     {
-      color: "text-gray-500",
+      color: "text-blue-500",
       bg: null,
-      var: stakable,
-      text: "stakable",
+      var: unstakable,
+      text: "unstakable",
     },
     {
-      color: "text-blue-500",
-      bg: null,
+      color: "transparent",
+      bg: "checkered-blue",
       var: staked,
       text: "staked",
     },
     {
-      color: "transparent",
-      bg: "checkered-blue",
-      var: unstakable,
-      text: "unstakable",
+      color: "text-gray-500",
+      bg: null,
+      var: unstaked,
+      text: "Not staked",
     },
   ];
 
@@ -64,26 +64,27 @@ export const PieBar = () => {
     <div className="flex w-full flex-col my-6 gap-4">
       <div className="m-auto flex h-2 mb-2 w-full flex-row rounded-full">
         <div
-          style={{ flexBasis: `${stakablePercent}%` }}
+          style={{ flexBasis: `${unstakablePercent}%` }}
           className={twJoin(
-            "bg-gray-500",
+            "bg-airswap-blue",
             zeroBalance
               ? "min-w-full rounded-full"
               : "min-w-[3px] rounded-l-full",
+            unstakablePercent &&
+              !stakedPercent &&
+              !unstakablePercent &&
+              "rounded-full",
           )}
         />
         <div
           style={{ flexBasis: `${stakedPercent}%` }}
-          className={twJoin(
-            "bg-airswap-blue",
-            stakablePercent && "min-w-[3px]",
-          )}
+          className={twJoin("checkered-blue", stakedPercent && "min-w-[3px]")}
         />
         <div
-          style={{ flexBasis: `${unstakablePercent}%` }}
+          style={{ flexBasis: `${unstakedPercent}%` }}
           className={twJoin(
-            "checkered-blue",
-            unstakablePercent && "min-w-[3px] rounded-r-full",
+            "bg-gray-500",
+            unstakedPercent && "min-w-[3px] rounded-r-full",
           )}
         />
       </div>

diff --git a/src/features/staking/StakingModal.tsx b/src/features/staking/StakingModal.tsx
@@ -22,7 +22,7 @@ export const StakingModal = () => {
 
   const formReturn = useForm();
   const { getValues } = formReturn;
-  const stakingAmount = getValues().stakingAmount;
+  const stakingAmount = getValues().stakingAmount * 10 ** 4;
 
   const isSupportedChain = useIsSupportedChain();
   const { switchNetwork } = useSwitchNetwork();

diff --git a/src/features/staking/utils/calculateTokenProportions.ts b/src/features/staking/utils/calculateTokenProportions.ts
@@ -1,31 +1,31 @@
 type PercentObject = {
   unstakablePercent: number;
   stakedPercent: number;
-  stakablePercent: number;
+  unstakedPercent: number;
 };
 
 export const calculateTokenProportions = ({
   unstakable,
   staked,
-  stakable,
+  unstaked,
 }: {
   unstakable: number;
   staked: number;
-  stakable: number;
+  unstaked: number;
 }): PercentObject => {
-  const totalBalance = unstakable + staked + stakable;
+  const totalBalance = unstakable + staked + unstaked;
 
   if (totalBalance === 0) {
     return {
       unstakablePercent: 0,
       stakedPercent: 0,
-      stakablePercent: 0,
+      unstakedPercent: 0,
     };
   }
 
   return {
     unstakablePercent: (unstakable / totalBalance) * 100,
     stakedPercent: (staked / totalBalance) * 100,
-    stakablePercent: (stakable / totalBalance) * 100,
+    unstakedPercent: (unstaked / totalBalance) * 100,
   };
 };