From f0118ad4aa9f76ed5077cdb81e84e37ef094f332 Mon Sep 17 00:00:00 2001
From: Rorry <lil.rorry@gmail.com>
Date: Wed, 7 Aug 2024 17:22:36 +0200
Subject: [PATCH] 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  | 18 +++++++++++++-----
 packages/app/models/stack-order/stack-order.ts |  2 +-
 2 files changed, 14 insertions(+), 6 deletions(-)

diff --git a/packages/app/components/OrdersProgressBar.tsx b/packages/app/components/OrdersProgressBar.tsx
index 9e4785b6..b36d40b6 100644
--- a/packages/app/components/OrdersProgressBar.tsx
+++ b/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]);
diff --git a/packages/app/models/stack-order/stack-order.ts b/packages/app/models/stack-order/stack-order.ts
index 6bb65fe7..e90350ac 100644
--- a/packages/app/models/stack-order/stack-order.ts
+++ b/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);