fix(STK-258): Bar showing complete on the first order (#196)

* fix: update the computations to check the order progress bar
* fix: check if the stack has remaining funds as an edge case cover

packages/app/components/OrdersProgressBar.tsx

@@ -1,15 +1,23 @@
-import { StackOrderProps, totalStackOrdersDone } from "@/models/stack-order";
+import {
+  stackHasRemainingFunds,
+  StackOrderProps,
+  totalStackOrdersDone,
+} from "@/models/stack-order";
 import React, { useRef, useEffect } from "react";
 
+const FULL_BAR_WIDTH = 100;
+
 export const OrdersProgressBar = ({ stackOrder }: StackOrderProps) => {
   const progressBarRef = useRef<HTMLDivElement>(null);
-  const totalOrders = totalStackOrdersDone(stackOrder)
-    ? totalStackOrdersDone(stackOrder)
-    : stackOrder.orderSlots.length;
+  const totalOrders = stackOrder.orderSlots.length
+    ? stackOrder.orderSlots.length
+    : 1;
 
   useEffect(() => {
     if (progressBarRef.current) {
-      const width = (100 * totalStackOrdersDone(stackOrder)) / totalOrders;
+      const width = stackHasRemainingFunds(stackOrder)
+        ? (FULL_BAR_WIDTH * totalStackOrdersDone(stackOrder)) / totalOrders
+        : FULL_BAR_WIDTH;
       progressBarRef.current.style.width = `${width}%`;
     }
   }, [stackOrder, totalOrders]);

packages/app/models/stack-order/stack-order.ts

@@ -63,7 +63,7 @@ export const totalStacked = (order: StackOrder) =>
     );
   }, 0) ?? 0;
 
-const stackHasRemainingFunds = (stackOrder: StackOrder) =>
+export const stackHasRemainingFunds = (stackOrder: StackOrder) =>
   totalFundsUsed(stackOrder) > stacklyFee(stackOrder) &&
   stackRemainingFunds(stackOrder) > stacklyFee(stackOrder);