feat: on stacks created show starts in X minutes our X hours (#116)

* feat: on stacks created show starts in X minutes our X hours if is less then 24h away.

* fix: convert pluralize to arrow function

* update: replace logic with formatDistanceToNow from date-fns

packages/app/components/StacksTable.tsx

@@ -1,6 +1,7 @@
 "use client";
 
 import { PropsWithChildren, useState } from "react";
+import { formatDistanceToNow } from "date-fns";
 import {
   BodyText,
   Button,
@@ -20,10 +21,7 @@ import {
   orderPairSymbolsText,
   totalOrderSlotsDone,
 } from "@/models/order";
-import {
-  formatTimestampToDate,
-  formatTimestampToDateWithSuffix,
-} from "@/utils/datetime";
+import { formatTimestampToDate } from "@/utils/datetime";
 import {
   StackOrder,
   StackOrderProps,
@@ -154,23 +152,32 @@ const CellWrapper = ({ children }: PropsWithChildren) => (
 );
 
 const OrdersProgressText = ({ stackOrder }: StackOrderProps) => {
-  if (stackOrder.cancelledAt)
+  if (stackOrder.cancelledAt) {
     return (
       <BodyText className="text-em-low">
         Cancelled at {formatTimestampToDate(stackOrder.cancelledAt)}
       </BodyText>
     );
+  }
+
+  if (totalOrderSlotsDone(stackOrder) !== 0) {
+    return (
+      <>
+        <BodyText className="text-em-high">
+          {totalStackOrdersDone(stackOrder).toString()}
+        </BodyText>
+        <BodyText className="text-em-low">{`/ ${stackOrder.orderSlots.length} orders`}</BodyText>
+      </>
+    );
+  }
 
-  return totalOrderSlotsDone(stackOrder) === 0 ? (
+  const firtTimeSlot = Number(stackOrder.orderSlots[0]);
+  const date = new Date(firtTimeSlot * 1000); // Convert seconds to milliseconds
+  const distanceToNow = formatDistanceToNow(date, { addSuffix: true });
+
+  return (
     <BodyText className="text-primary-700">
-      Starts on {formatTimestampToDateWithSuffix(stackOrder.orderSlots[0])}
+      {`Starts ${distanceToNow}`}
     </BodyText>
-  ) : (
-    <>
-      <BodyText className="text-em-high">
-        {totalStackOrdersDone(stackOrder).toString()}
-      </BodyText>
-      <BodyText className="text-em-low">{`/ ${stackOrder.orderSlots.length} orders`}</BodyText>
-    </>
   );
 };