v1.3.2 (#193)

* Add new tokens (#188) - add new cow token logo - add shutter and olas to gnosis tokenlist * fix(STK-255): My Stacks breaks for some one time orders (#189) * fix: add safeguards to check if the active order has orderSlots * fix: make 1 slot orders cancellable under correct scenarios * fix: update confirmation stack logic to handle a minimum date of now + 10 mins (#190) * fix(STK-253): My Stacks displaying NaN (#191) * fix: use the start date to compute the 'Next Order' for orders with no slots * fix: if there's no executed buy amount, return 0 to compute the avg buy price * fix: hide stacks details if the end date is equal or less than the start date (#192) --------- Co-authored-by: Rorry <[email protected]>
SwaprHQ · Jul 30, 2024 · 7a94330 · 7a94330
1 parent 1cac477
commit 7a94330
Show file tree

Hide file tree

Showing 9 changed files with 97 additions and 59 deletions.
diff --git a/packages/app/components/StacksTable.tsx b/packages/app/components/StacksTable.tsx
@@ -195,12 +195,14 @@ const OrdersProgressText = ({ stackOrder }: StackOrderProps) => {
         <BodyText className="text-em-high">
           {totalStackOrdersDone(stackOrder).toString()}
         </BodyText>
-        <BodyText className="text-em-low">{`/ ${stackOrder.orderSlots.length} orders`}</BodyText>
+        <BodyText className="text-em-low">{`/ ${
+          stackOrder.orderSlots.length || stackOrder.cowOrders.length
+        } orders`}</BodyText>
       </>
     );
   }
 
-  const firtTimeSlot = Number(stackOrder.orderSlots[0]);
+  const firtTimeSlot = Number(stackOrder.orderSlots[0] ?? stackOrder.startTime);
   const date = new Date(firtTimeSlot * 1000); // Convert seconds to milliseconds
   const distanceToNow = formatDistanceToNow(date, { addSuffix: true });
 

diff --git a/packages/app/components/stack-modal/StackFrequencyAndDates.tsx b/packages/app/components/stack-modal/StackFrequencyAndDates.tsx
@@ -25,8 +25,11 @@ const StackDetail = ({
 
 export const StackFrequencyAndDates = ({ stackOrder }: StackOrderProps) => {
   const orderSlots = stackOrder.orderSlots;
-  const firstSlot = orderSlots[0];
-  const lastSlot = orderSlots[orderSlots.length - 1];
+  const hasSlots = Boolean(orderSlots.length);
+  const firstSlot = hasSlots ? orderSlots[0] : stackOrder.startTime;
+  const lastSlot = hasSlots
+    ? orderSlots[orderSlots.length - 1]
+    : stackOrder.endTime;
   const nextSlot = orderSlots[totalOrderSlotsDone(stackOrder)];
 
   return (
@@ -47,7 +50,7 @@ export const StackFrequencyAndDates = ({ stackOrder }: StackOrderProps) => {
           ? "Finished with funds"
           : stackOrder.cancelledAt
           ? "Cancelled"
-          : formatTimestampToDateWithTime(nextSlot)}
+          : formatTimestampToDateWithTime(hasSlots ? nextSlot : firstSlot)}
       </StackDetail>
     </div>
   );

diff --git a/packages/app/components/stackbox/Stackbox.tsx b/packages/app/components/stackbox/Stackbox.tsx
@@ -105,7 +105,7 @@ export const Stackbox = () => {
 
   const [showTokenAmountError, setShowTokenAmountError] = useState(false);
   const [showPastEndDateError, setShowPastEndDateError] = useState(false);
-  const [isPastStartDate, setIsPastStartDate] = useState(false);
+  const [isNearStartDate, setIsNearStartDate] = useState(false);
   const [showFromTokenError, setShowFromTokenError] = useState(false);
   const [showToTokenError, setShowToTokenError] = useState(false);
   const [showInsufficentBalanceError, setShowInsufficentBalanceError] =
@@ -199,11 +199,11 @@ export const Stackbox = () => {
     const startDate = startDateTime.getTime();
     const endDate = endDateTime.getTime();
     const isEndTimeBeforeStartTime = endDate <= startDate;
-    const isStartTimeInThePast = startDate <= Date.now();
+    const isStartTimeNearNow = startDate <= getDateNowPlus10Mins();
     const isTokenAmountZero = tokenAmount === "0";
 
     setShowPastEndDateError(isEndTimeBeforeStartTime);
-    setIsPastStartDate(isStartTimeInThePast);
+    setIsNearStartDate(isStartTimeNearNow);
 
     if (!fromToken || !toToken) {
       if (!fromToken) setShowFromTokenError(true);
@@ -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"
@@ -585,7 +589,7 @@ export const Stackbox = () => {
           amount={tokenAmount}
           frequency={frequency}
           startTime={
-            isPastStartDate ? new Date(getDateNowPlus10Mins()) : startDateTime
+            isNearStartDate ? new Date(getDateNowPlus10Mins()) : startDateTime
           }
           endTime={endDateTime}
           isOpen={isModalOpen(ModalId.CONFIRM_STACK)}

diff --git a/packages/app/models/order/order.ts b/packages/app/models/order/order.ts
@@ -3,14 +3,27 @@ import { currentTimestampInSeconds } from "@/utils/datetime";
 import { Order } from "@stackly/sdk";
 
 export const totalOrderSlotsDone = (order: Order) => {
+  /**
+   * An order that doesn't have slots happens when we have a 1 slot order
+   * that has start and end date in a timeframe equal or less than 60'.
+   * As it's not possible to use the slot timestamp, we use the start time
+   * for this 1 slot order.
+   */
+  if (!order.orderSlots.length)
+    return order.startTime < currentTimestampInSeconds ? 1 : 0;
+
   return order.orderSlots.reduce((count, orderTimestamp) => {
     if (Number(orderTimestamp) < currentTimestampInSeconds) return ++count;
     return count;
   }, 0);
 };
 
-export const allOrderSlotsDone = (order: Order) =>
-  totalOrderSlotsDone(order) === order.orderSlots.length;
+export const allOrderSlotsDone = (order: Order) => {
+  const orderSlotsLength = order.orderSlots.length;
+  if (!orderSlotsLength) return totalOrderSlotsDone(order) === 1;
+
+  return totalOrderSlotsDone(order) === orderSlotsLength;
+};
 
 export const totalFundsAmount = (order: Order) => {
   const total =

diff --git a/packages/app/models/stack-order/stack-order.ts b/packages/app/models/stack-order/stack-order.ts
@@ -41,7 +41,7 @@ export const calculateStackAveragePrice = (order: StackOrder) => {
     );
   });
   const averagePrice = totalExecutedSellAmount / totalExecutedBuyAmount;
-  return averagePrice;
+  return totalExecutedBuyAmount ? averagePrice : 0;
 };
 
 export const totalFundsUsed = (order: StackOrder) => {

diff --git a/packages/app/public/assets/blockchains/gnosis/tokenlist.json b/packages/app/public/assets/blockchains/gnosis/tokenlist.json
@@ -86,5 +86,21 @@
     "decimals": 6,
     "logoURI": "/assets/images/tokens/usdc.png",
     "chainId": 100
+  },
+  {
+    "address": "0xcE11e14225575945b8E6Dc0D4F2dD4C570f79d9f",
+    "name": "Autonolas",
+    "symbol": "OLAS",
+    "decimals": 18,
+    "logoURI": "/assets/images/tokens/olas.png",
+    "chainId": 100
+  },
+  {
+    "address": "0x8CCd277Cc638E7e17F8100cE583cBcEf42007Dca",
+    "name": "Shutter Token",
+    "symbol": "SHU",
+    "decimals": 18,
+    "logoURI": "/assets/images/tokens/shutter.png",
+    "chainId": 100
   }
 ]
diff --git a/packages/app/public/assets/images/tokens/cow.png b/packages/app/public/assets/images/tokens/cow.png
diff --git a/packages/app/public/assets/images/tokens/olas.png b/packages/app/public/assets/images/tokens/olas.png
diff --git a/packages/app/public/assets/images/tokens/shutter.png b/packages/app/public/assets/images/tokens/shutter.png