feat(limit): add recreate button to limit order receipt

apps/cowswap-frontend/src/modules/ordersTable/containers/OrdersReceiptModal/hooks.ts

@@ -1,10 +1,15 @@
-import { useSetAtom, useAtomValue } from 'jotai'
-import { useCallback } from 'react'
+import { useAtomValue, useSetAtom } from 'jotai'
+import { useCallback, useMemo } from 'react'
 
-import { updateReceiptAtom, receiptAtom } from 'modules/ordersTable/state/orderReceiptAtom'
+import { Command } from '@cowprotocol/types'
 
+import { isPending } from 'common/hooks/useCategorizeRecentActivity'
+import { useSetAlternativeOrder } from 'common/state/alternativeOrder'
+import { getUiOrderType, UiOrderType } from 'utils/orderUtils/getUiOrderType'
 import { ParsedOrder } from 'utils/orderUtils/parseOrder'
 
+import { receiptAtom, updateReceiptAtom } from '../../state/orderReceiptAtom'
+
 export function useCloseReceiptModal() {
   const updateReceiptState = useSetAtom(updateReceiptAtom)
   return useCallback(() => updateReceiptState({ order: null }), [updateReceiptState])
@@ -20,3 +25,15 @@ export function useSelectedOrder(): ParsedOrder | null {
 
   return order
 }
+
+export function useGetShowRecreateModal(order: ParsedOrder | null): Command | null {
+  const setOrderToRecreate = useSetAlternativeOrder()
+
+  return useMemo(
+    () =>
+      !order || isPending(order) || getUiOrderType(order) !== UiOrderType.LIMIT
+        ? null
+        : () => setOrderToRecreate(order),
+    [order, setOrderToRecreate]
+  )
+}

apps/cowswap-frontend/src/modules/ordersTable/containers/OrdersReceiptModal/index.tsx

@@ -9,7 +9,7 @@ import { useTwapOrderByChildId, useTwapOrderById } from 'modules/twap'
 
 import { calculatePrice } from 'utils/orderUtils/calculatePrice'
 
-import { useCloseReceiptModal, useSelectedOrder } from './hooks'
+import { useCloseReceiptModal, useGetShowRecreateModal, useSelectedOrder } from './hooks'
 
 import { ReceiptModal } from '../../pure/ReceiptModal'
 
@@ -29,6 +29,8 @@ export function OrdersReceiptModal(props: OrdersReceiptModalProps) {
   const twapOrder = twapOrderById || twapOrderByChildId
   const isTwapPartOrder = !!twapOrderByChildId
 
+  const showRecreateModal = useGetShowRecreateModal(order)
+
   if (!chainId || !order) {
     return null
   }
@@ -74,6 +76,7 @@ export function OrdersReceiptModal(props: OrdersReceiptModalProps) {
       isTwapPartOrder={isTwapPartOrder}
       isOpen={!!order}
       onDismiss={closeReceiptModal}
+      showRecreateModal={showRecreateModal}
     />
   )
 }

apps/cowswap-frontend/src/modules/ordersTable/pure/ReceiptModal/index.tsx

@@ -33,6 +33,7 @@ import { PriceField } from './PriceField'
 import { StatusField } from './StatusField'
 import * as styledEl from './styled'
 import { SurplusField } from './SurplusField'
+
 interface ReceiptProps {
   isOpen: boolean
   order: ParsedOrder
@@ -46,6 +47,7 @@ interface ReceiptProps {
   limitPrice: Fraction | null
   executionPrice: Fraction | null
   estimatedExecutionPrice: Fraction | null
+  showRecreateModal: Command | null
 }
 
 const FILLED_COMMON_TOOLTIP = 'How much of the order has been filled.'
@@ -97,6 +99,7 @@ export function ReceiptModal({
   executionPrice,
   estimatedExecutionPrice,
   receiverEnsName,
+  showRecreateModal,
 }: ReceiptProps) {
   // Check if Custom Recipient Warning Banner should be visible
   const isCustomRecipientWarningBannerVisible = !useIsReceiverWalletBannerHidden(order.id)
@@ -123,6 +126,7 @@ export function ReceiptModal({
       <styledEl.Wrapper>
         <styledEl.Header>
           <styledEl.Title>Order Receipt</styledEl.Title>
+          {showRecreateModal && <button onClick={showRecreateModal}>Recreate</button>}
           <CloseIcon onClick={() => onDismiss()} />
         </styledEl.Header>