fixed expiry function and the way it renders on UI in human-readable …

packages/site/src/pages/SignedOrderScreen/SignedOrderScreen.tsx

@@ -3,6 +3,7 @@ import { IoMdOpen } from 'react-icons/io';
 import { SwapButton } from '../../components';
 // import { compressFullOrderURL } from '../../utils/compressFullOrderERC20';
 import { useSwapStore } from '../../stores';
+import { convertExpiryToHumanReadableFormat } from '../../utils/convertExpiryToHumanReadableFormat';
 import {
   ActionButtonsBox,
   FromToTokenBox,
@@ -34,6 +35,8 @@ export const SignedOrderScreen = () => {
   //   }
   // };
 
+  const expirationDate = convertExpiryToHumanReadableFormat(expiry);
+
   return (
     <SignedOrderScreenContainer>
       <StyledH3>Order</StyledH3>
@@ -93,7 +96,15 @@ export const SignedOrderScreen = () => {
         <HorizontalBox>
           <VerbSpan>For: {takerAddress ?? 'Anyone'}</VerbSpan>
         </HorizontalBox>
-        <HorizontalBox>Expires in {expiry}</HorizontalBox>
+        <HorizontalBox>
+          {expirationDate ? (
+            <>
+              <VerbSpan>Expires in </VerbSpan>&nbsp; {expirationDate}
+            </>
+          ) : (
+            <VerbSpan>Expired</VerbSpan>
+          )}
+        </HorizontalBox>
       </SpecifiedTakerAndExpiryBox>
       <HorizontalBox>
         <VerbSpan>

packages/site/src/pages/SignedOrderScreen/SignedOrderScreenStyles.ts

@@ -66,7 +66,7 @@ export const SpecifiedTakerAndExpiryBox = styled.div`
   justify-content: space-between;
   width: 100%;
   background: #13203c;
-  border: #34425c solid 1.5px;
+  border: #34425c solid 1px;
   border-radius: 12px;
   padding: 1rem;
 `;

packages/site/src/pages/SwapWidget/SwapWidget.tsx

@@ -51,6 +51,7 @@ export const SwapWidget = () => {
     setTakerAddress,
     setDurationLength,
     setDurationUnits,
+    setExpiry,
   } = useSwapStore();
 
   // Handle token selection from modal
@@ -109,6 +110,7 @@ export const SwapWidget = () => {
                 onTextChange={(value) => {
                   if (!Number.isNaN(value)) {
                     setDurationLength(value);
+                    setExpiry(value, durationUnits);
                   }
                 }}
               />
@@ -119,9 +121,10 @@ export const SwapWidget = () => {
                 placeholder="HOURS"
                 value={durationUnits}
                 items={hoursItems}
-                onSelectChange={(value: string) =>
-                  setDurationUnits(value as DurationUnits)
-                }
+                onSelectChange={(value: string) => {
+                  setDurationUnits(value as DurationUnits);
+                  setExpiry(durationLength, value as DurationUnits);
+                }}
               />
             </SelectWrapper>
           </HeaderInputContainer>

packages/site/src/utils/convertExpiryToHumanReadableFormat.ts

@@ -0,0 +1,26 @@
+export const convertExpiryToHumanReadableFormat = (
+  expiry: number,
+): string | undefined => {
+  const currentTimestamp = Math.floor(Date.now() / 1000);
+  const remainingTimeInSeconds = expiry - currentTimestamp;
+
+  if (remainingTimeInSeconds <= 0) {
+    return undefined;
+  }
+
+  const minutes = Math.floor(remainingTimeInSeconds / 60) % 60;
+  const hours = Math.floor(remainingTimeInSeconds / (60 * 60)) % 24;
+  const days = Math.floor(remainingTimeInSeconds / (60 * 60 * 24));
+
+  if (remainingTimeInSeconds < 60 * 60) {
+    return `${minutes} Min`;
+  }
+  if (remainingTimeInSeconds < 60 * 60 * 24) {
+    return `${hours} Hour${hours === 1 ? '' : 's'}${
+      minutes > 0 ? ` ${minutes} Min${minutes === 1 ? '' : 's'}` : ''
+    }`;
+  }
+  return `${days} Day${days === 1 ? '' : 's'}${
+    hours > 0 ? ` ${hours} Hour${hours === 1 ? '' : 's'}` : ''
+  }`;
+};