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(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);