feat: use widget deadline on twap form

cowprotocol · Oct 15, 2024 · 095b155 · 095b155
1 parent 38ef085
commit 095b155
Show file tree

Hide file tree

Showing 2 changed files with 77 additions and 13 deletions.
diff --git a/apps/cowswap-frontend/src/modules/twap/containers/TwapFormWidget/index.tsx b/apps/cowswap-frontend/src/modules/twap/containers/TwapFormWidget/index.tsx
@@ -3,9 +3,11 @@ import { useEffect, useLayoutEffect, useMemo, useState } from 'react'
 
 import { renderTooltip } from '@cowprotocol/ui'
 import { useWalletInfo } from '@cowprotocol/wallet'
+import { TradeType } from '@cowprotocol/widget-lib'
 
 import { useAdvancedOrdersDerivedState } from 'modules/advancedOrders'
 import { openAdvancedOrdersTabAnalytics, twapWalletCompatibilityAnalytics } from 'modules/analytics'
+import { useInjectedWidgetDeadline } from 'modules/injectedWidget'
 import { useReceiveAmountInfo } from 'modules/trade'
 import { useIsWrapOrUnwrap } from 'modules/trade/hooks/useIsWrapOrUnwrap'
 import { useTradeState } from 'modules/trade/hooks/useTradeState'
@@ -21,7 +23,14 @@ import { useRateInfoParams } from 'common/hooks/useRateInfoParams'
 import * as styledEl from './styled'
 import { LABELS_TOOLTIPS } from './tooltips'
 
-import { DEFAULT_NUM_OF_PARTS, DEFAULT_TWAP_SLIPPAGE, MAX_TWAP_SLIPPAGE, ORDER_DEADLINES } from '../../const'
+import {
+  DEFAULT_NUM_OF_PARTS,
+  DEFAULT_TWAP_SLIPPAGE,
+  MAX_PART_TIME,
+  MAX_TWAP_SLIPPAGE,
+  MINIMUM_PART_TIME,
+  ORDER_DEADLINES,
+} from '../../const'
 import {
   useFallbackHandlerVerification,
   useIsFallbackHandlerCompatible,
@@ -65,9 +74,43 @@ export function TwapFormWidget() {
 
   const limitPriceAfterSlippage = usePrice(
     receiveAmountInfo?.afterSlippage.sellAmount,
-    receiveAmountInfo?.afterSlippage.buyAmount
+    receiveAmountInfo?.afterSlippage.buyAmount,
   )
 
+  const widgetDeadline = useInjectedWidgetDeadline(TradeType.ADVANCED)
+
+  useEffect(() => {
+    if (widgetDeadline) {
+      // Ensure min part duration
+      const minDuration = Math.floor(MINIMUM_PART_TIME / 60) * 2 // it must have at least 2 parts
+
+      const maxDuration = Math.floor(MAX_PART_TIME / 60) * numberOfPartsValue
+
+      let minutes = widgetDeadline
+      if (widgetDeadline < minDuration) {
+        minutes = minDuration
+      } else if (widgetDeadline > maxDuration) {
+        minutes = maxDuration
+      }
+
+      console.log(
+        `fuck:twap deadline`,
+        widgetDeadline,
+        minDuration,
+        maxDuration,
+        minutes,
+        new Date(widgetDeadline * 60 * 1000 + Date.now()),
+      )
+
+      updateSettingsState({
+        customDeadline: { hours: 0, minutes },
+        isCustomDeadline: true,
+      })
+    }
+  }, [widgetDeadline, updateSettingsState, numberOfPartsValue])
+
+  const isDeadlineDisabled = !!widgetDeadline
+
   const deadlineState = {
     deadline,
     customDeadline,
@@ -166,8 +209,9 @@ export function TwapFormWidget() {
       <styledEl.Row>
         <DeadlineSelector
           deadline={deadlineState}
+          isDeadlineDisabled={isDeadlineDisabled}
           items={ORDER_DEADLINES}
-          setDeadline={(value) => updateSettingsState(value)}
+          setDeadline={updateSettingsState}
           label={LABELS_TOOLTIPS.totalDuration.label}
           tooltip={renderTooltip(LABELS_TOOLTIPS.totalDuration.tooltip, {
             parts: numberOfPartsValue,

diff --git a/apps/cowswap-frontend/src/modules/twap/pure/DeadlineSelector/index.tsx b/apps/cowswap-frontend/src/modules/twap/pure/DeadlineSelector/index.tsx
@@ -1,7 +1,6 @@
 import React, { useCallback, useMemo, useState } from 'react'
 
-import { UI } from '@cowprotocol/ui'
-import { renderTooltip } from '@cowprotocol/ui'
+import { renderTooltip, UI } from '@cowprotocol/ui'
 
 import styled from 'styled-components/macro'
 
@@ -10,14 +9,17 @@ import { Content } from 'modules/trade/pure/TradeWidgetField/styled'
 import { LabelTooltip } from 'modules/twap'
 import { customDeadlineToSeconds, deadlinePartsDisplay } from 'modules/twap/utils/deadlinePartsDisplay'
 
+import { TradeWidgetField } from '../../../trade/pure/TradeWidgetField'
 import { defaultCustomDeadline, TwapOrdersDeadline } from '../../state/twapOrdersSettingsAtom'
 import { CustomDeadlineSelector } from '../CustomDeadlineSelector'
 
 interface DeadlineSelectorProps {
   items: TradeSelectItem[]
   deadline: TwapOrdersDeadline
+  isDeadlineDisabled: boolean
   label: LabelTooltip['label']
   tooltip: LabelTooltip['tooltip']
+
   setDeadline(value: TwapOrdersDeadline): void
 }
 
@@ -48,10 +50,22 @@ const StyledTradeSelect = styled(TradeSelect)`
   }
 `
 
+const StyledTradeField = styled(TradeWidgetField)`
+  ${Content} {
+    width: 100%;
+    color: inherit;
+  }
+
+  ${Content} > div {
+    width: 100%;
+  }
+`
+
 export function DeadlineSelector(props: DeadlineSelectorProps) {
   const {
     items,
     deadline: { deadline, customDeadline, isCustomDeadline },
+    isDeadlineDisabled,
     label,
     tooltip,
     setDeadline,
@@ -74,7 +88,7 @@ export function DeadlineSelector(props: DeadlineSelectorProps) {
         })
       }
     },
-    [setIsCustomModalOpen, setDeadline]
+    [setIsCustomModalOpen, setDeadline],
   )
 
   const activeLabel = useMemo(() => {
@@ -87,13 +101,19 @@ export function DeadlineSelector(props: DeadlineSelectorProps) {
 
   return (
     <>
-      <StyledTradeSelect
-        label={label}
-        tooltip={renderTooltip(tooltip)}
-        items={itemsWithCustom}
-        activeLabel={activeLabel}
-        onSelect={onSelect}
-      />
+      {isDeadlineDisabled ? (
+        <StyledTradeField label={label} tooltip={renderTooltip(tooltip)}>
+          <div>{activeLabel}</div>
+        </StyledTradeField>
+      ) : (
+        <StyledTradeSelect
+          label={label}
+          tooltip={renderTooltip(tooltip)}
+          items={itemsWithCustom}
+          activeLabel={activeLabel}
+          onSelect={onSelect}
+        />
+      )}
       <CustomDeadlineSelector
         selectCustomDeadline={(value) => setDeadline({ isCustomDeadline: true, customDeadline: value, deadline: 0 })}
         customDeadline={customDeadline}