fix: hide stacks details if the end date is equal or less than the st…

…art date
SwaprHQ · Jul 29, 2024 · 906be49 · 906be49
1 parent 6f5dfa5
commit 906be49
Showing 1 changed file with 51 additions and 47 deletions.
diff --git a/packages/app/components/stackbox/Stackbox.tsx b/packages/app/components/stackbox/Stackbox.tsx
@@ -506,53 +506,57 @@ export const Stackbox = () => {
             </div>
           </div>
         </div>
-        {fromToken && toToken && tokenAmount && parseFloat(tokenAmount) > 0 && (
-          <div
-            className={cx(
-              "p-2 text-center bg-surface-25 text-em-low rounded-xl",
-              {
-                "!bg-primary-50 flex items-center justify-between pr-3":
-                  isStrategySelected,
-              }
-            )}
-          >
-            {isStrategySelected ? (
-              <>
-                <div className="flex">
-                  <Icon className="mr-2" name="sparkles" size={14} />
-                  <StackDetailsTileText
-                    amountPerOrder={amountPerOrder}
-                    frequency={
-                      FREQUENCY_OPTIONS[frequency as FREQUENCY_OPTIONS]
-                    }
-                    toTokenSymbol={toToken.symbol}
-                    fromTokenSymbol={fromToken.symbol}
-                    timeLength={formatDistance(endDateTime, startDateTime)}
-                  />
-                </div>
-                <Button
-                  className="text-primary-800"
-                  onClick={() => {
-                    deselectStrategy();
-                    resetFormValues(chainId);
-                  }}
-                  size="xs"
-                  variant="caption"
-                >
-                  <CaptionText>Reset stack</CaptionText>
-                </Button>
-              </>
-            ) : (
-              <StackDetailsTileText
-                amountPerOrder={amountPerOrder}
-                frequency={FREQUENCY_OPTIONS[frequency as FREQUENCY_OPTIONS]}
-                toTokenSymbol={toToken.symbol}
-                fromTokenSymbol={fromToken.symbol}
-                timeLength={formatDistance(endDateTime, startDateTime)}
-              />
-            )}
-          </div>
-        )}
+        {fromToken &&
+          toToken &&
+          tokenAmount &&
+          parseFloat(tokenAmount) > 0 &&
+          endDateTime > startDateTime && (
+            <div
+              className={cx(
+                "p-2 text-center bg-surface-25 text-em-low rounded-xl",
+                {
+                  "!bg-primary-50 flex items-center justify-between pr-3":
+                    isStrategySelected,
+                }
+              )}
+            >
+              {isStrategySelected ? (
+                <>
+                  <div className="flex">
+                    <Icon className="mr-2" name="sparkles" size={14} />
+                    <StackDetailsTileText
+                      amountPerOrder={amountPerOrder}
+                      frequency={
+                        FREQUENCY_OPTIONS[frequency as FREQUENCY_OPTIONS]
+                      }
+                      toTokenSymbol={toToken.symbol}
+                      fromTokenSymbol={fromToken.symbol}
+                      timeLength={formatDistance(endDateTime, startDateTime)}
+                    />
+                  </div>
+                  <Button
+                    className="text-primary-800"
+                    onClick={() => {
+                      deselectStrategy();
+                      resetFormValues(chainId);
+                    }}
+                    size="xs"
+                    variant="caption"
+                  >
+                    <CaptionText>Reset stack</CaptionText>
+                  </Button>
+                </>
+              ) : (
+                <StackDetailsTileText
+                  amountPerOrder={amountPerOrder}
+                  frequency={FREQUENCY_OPTIONS[frequency as FREQUENCY_OPTIONS]}
+                  toTokenSymbol={toToken.symbol}
+                  fromTokenSymbol={fromToken.symbol}
+                  timeLength={formatDistance(endDateTime, startDateTime)}
+                />
+              )}
+            </div>
+          )}
         {address ? (
           <Button
             width="full"