fix(orders-table): display allowance warning in Safe (#5207)

* fix(orders-table): display allowance warning in Safe * refactor: check order allowance sufficiency taking permit into account * chore: fix lint * fix: check permit amount only if order was never filled * fix: parse permit with try/catch --------- Co-authored-by: Anxo Rodriguez <[email protected]>
cowprotocol · Dec 17, 2024 · 21e8c57 · 21e8c57
1 parent 25d906c
commit 21e8c57
Show file tree

Hide file tree

Showing 15 changed files with 70 additions and 241 deletions.
diff --git a/...odules/ordersTable/containers/OrdersTableWidget/hooks/useGetOrdersToCheckPendingPermit.ts b/...odules/ordersTable/containers/OrdersTableWidget/hooks/useGetOrdersToCheckPendingPermit.ts
diff --git a/apps/cowswap-frontend/src/modules/ordersTable/containers/OrdersTableWidget/index.tsx b/apps/cowswap-frontend/src/modules/ordersTable/containers/OrdersTableWidget/index.tsx
@@ -12,7 +12,7 @@ import { Order } from 'legacy/state/orders/actions'
 import { useInjectedWidgetParams } from 'modules/injectedWidget'
 import { pendingOrdersPricesAtom } from 'modules/orders/state/pendingOrdersPricesAtom'
 import { useGetSpotPrice } from 'modules/orders/state/spotPricesAtom'
-import { PendingPermitUpdater, useGetOrdersPermitStatus } from 'modules/permit'
+import { BalancesAndAllowances } from 'modules/tokens'
 
 import { useCancelOrder } from 'common/hooks/useCancelOrder'
 import { useCategorizeRecentActivity } from 'common/hooks/useCategorizeRecentActivity'
@@ -21,12 +21,10 @@ import { useNavigate } from 'common/hooks/useNavigate'
 import { CancellableOrder } from 'common/utils/isOrderCancellable'
 import { ParsedOrder } from 'utils/orderUtils/parseOrder'
 
-import { useGetOrdersToCheckPendingPermit } from './hooks/useGetOrdersToCheckPendingPermit'
 import { OrdersTableList, useOrdersTableList } from './hooks/useOrdersTableList'
 import { useOrdersTableTokenApprove } from './hooks/useOrdersTableTokenApprove'
 import { useValidatePageUrlParams } from './hooks/useValidatePageUrlParams'
 
-import { BalancesAndAllowances } from '../../../tokens'
 import { OPEN_TAB, ORDERS_TABLE_TABS } from '../../const/tabs'
 import { OrdersTableContainer } from '../../pure/OrdersTableContainer'
 import { OrderActions } from '../../pure/OrdersTableContainer/types'
@@ -81,7 +79,6 @@ export function OrdersTableWidget({
   const getSpotPrice = useGetSpotPrice()
   const selectReceiptOrder = useSelectReceiptOrder()
   const isSafeViaWc = useIsSafeViaWc()
-  const ordersPermitStatus = useGetOrdersPermitStatus()
   const injectedWidgetParams = useInjectedWidgetParams()
 
   const { currentTabId, currentPageNumber } = useMemo(() => {
@@ -163,11 +160,8 @@ export function OrdersTableWidget({
 
   useValidatePageUrlParams(orders.length, currentTabId, currentPageNumber)
 
-  const ordersToCheckPendingPermit = useGetOrdersToCheckPendingPermit(ordersList, chainId, balancesAndAllowances)
-
   return (
     <>
-      <PendingPermitUpdater orders={ordersToCheckPendingPermit} />
       <ContentWrapper>
         {children}
         <OrdersTableContainer
@@ -187,7 +181,6 @@ export function OrdersTableWidget({
           allowsOffchainSigning={allowsOffchainSigning}
           orderType={orderType}
           pendingActivities={pendingActivity}
-          ordersPermitStatus={ordersPermitStatus}
           injectedWidgetParams={injectedWidgetParams}
         >
           {isOpenOrdersTab && orders.length && <MultipleCancellationMenu pendingOrders={tableItemsToOrders(orders)} />}

diff --git a/apps/cowswap-frontend/src/modules/ordersTable/pure/OrdersTableContainer/OrderRow/index.tsx b/apps/cowswap-frontend/src/modules/ordersTable/pure/OrdersTableContainer/OrderRow/index.tsx
@@ -143,7 +143,6 @@ export interface OrderRowProps {
   orderParams: OrderParams
   onClick: Command
   orderActions: OrderActions
-  hasValidPendingPermit?: boolean | undefined
   children?: JSX.Element
 }
 
@@ -160,7 +159,6 @@ export function OrderRow({
   prices,
   spotPrice,
   children,
-  hasValidPendingPermit,
 }: OrderRowProps) {
   const { buyAmount, rateInfoParams, hasEnoughAllowance, hasEnoughBalance, chainId } = orderParams
   const { creationTime, expirationTime, status } = order
@@ -173,10 +171,10 @@ export function OrderRow({
   }, [orderActions, order])
   const alternativeOrderModalContext = useMemo(
     () => orderActions.getAlternativeOrderModalContext(order),
-    [order, orderActions]
+    [order, orderActions],
   )
 
-  const withAllowanceWarning = hasEnoughAllowance === false && hasValidPendingPermit === false
+  const withAllowanceWarning = hasEnoughAllowance === false
   const withWarning =
     (hasEnoughBalance === false || withAllowanceWarning) &&
     // show the warning only for pending and scheduled orders
@@ -401,7 +399,7 @@ export function OrderRow({
 function usePricesDifference(
   prices: OrderRowProps['prices'],
   spotPrice: OrderRowProps['spotPrice'],
-  isInverted: boolean
+  isInverted: boolean,
 ): PriceDifference {
   const { estimatedExecutionPrice } = prices || {}
 
@@ -415,13 +413,13 @@ function usePricesDifference(
  */
 function useFeeAmountDifference(
   { inputCurrencyAmount }: OrderRowProps['orderParams']['rateInfoParams'],
-  prices: OrderRowProps['prices']
+  prices: OrderRowProps['prices'],
 ): Percent | undefined {
   const { feeAmount } = prices || {}
 
   return useSafeMemo(
     () => calculatePercentageInRelationToReference({ value: feeAmount, reference: inputCurrencyAmount }),
-    [feeAmount, inputCurrencyAmount]
+    [feeAmount, inputCurrencyAmount],
   )
 }
 

diff --git a/apps/cowswap-frontend/src/modules/ordersTable/pure/OrdersTableContainer/OrdersTable.tsx b/apps/cowswap-frontend/src/modules/ordersTable/pure/OrdersTableContainer/OrdersTable.tsx
@@ -13,7 +13,6 @@ import styled from 'styled-components/macro'
 
 import { PendingOrdersPrices } from 'modules/orders/state/pendingOrdersPricesAtom'
 import { SpotPricesKeyParams } from 'modules/orders/state/spotPricesAtom'
-import { OrdersPermitStatus } from 'modules/permit'
 import { BalancesAndAllowances } from 'modules/tokens'
 
 import { ordersTableFeatures } from 'common/constants/featureFlags'
@@ -200,7 +199,6 @@ export interface OrdersTableProps {
   balancesAndAllowances: BalancesAndAllowances
   getSpotPrice: (params: SpotPricesKeyParams) => Price<Currency, Currency> | null
   orderActions: OrderActions
-  ordersPermitStatus: OrdersPermitStatus
 }
 
 export function OrdersTable({
@@ -214,7 +212,6 @@ export function OrdersTable({
   getSpotPrice,
   orderActions,
   currentPageNumber,
-  ordersPermitStatus,
 }: OrdersTableProps) {
   const buildOrdersTableUrl = useGetBuildOrdersTableUrl()
   const [isRateInverted, setIsRateInverted] = useState(false)
@@ -234,11 +231,14 @@ export function OrdersTable({
   const selectedOrdersMap = useMemo(() => {
     if (!selectedOrders) return {}
 
-    return selectedOrders.reduce((acc, val) => {
-      acc[val.id] = true
+    return selectedOrders.reduce(
+      (acc, val) => {
+        acc[val.id] = true
 
-      return acc
-    }, {} as { [key: string]: true })
+        return acc
+      },
+      {} as { [key: string]: true },
+    )
   }, [selectedOrders])
 
   // Explainer banner for orders
@@ -258,7 +258,7 @@ export function OrdersTable({
 
   const cancellableOrders = useMemo(
     () => ordersPage.filter((item) => isOrderOffChainCancellable(getParsedOrderFromTableItem(item))),
-    [ordersPage]
+    [ordersPage],
   )
 
   const allOrdersSelected = useMemo(() => {
@@ -294,7 +294,7 @@ export function OrdersTable({
                     type="checkbox"
                     onChange={(event) =>
                       orderActions.toggleOrdersForCancellation(
-                        event.target.checked ? tableItemsToOrders(ordersPage) : []
+                        event.target.checked ? tableItemsToOrders(ordersPage) : [],
                       )
                     }
                   />
@@ -408,8 +408,6 @@ export function OrdersTable({
 
                 const orderParams = getOrderParams(chainId, balancesAndAllowances, order)
 
-                const hasValidPendingPermit = ordersPermitStatus[order.id]
-
                 return (
                   <OrderRow
                     key={order.id}
@@ -423,7 +421,6 @@ export function OrdersTable({
                     isRateInverted={isRateInverted}
                     orderActions={orderActions}
                     onClick={() => orderActions.selectReceiptOrder(order)}
-                    hasValidPendingPermit={hasValidPendingPermit}
                   />
                 )
               } else {

diff --git a/apps/cowswap-frontend/src/modules/ordersTable/pure/OrdersTableContainer/index.cosmos.tsx b/apps/cowswap-frontend/src/modules/ordersTable/pure/OrdersTableContainer/index.cosmos.tsx
@@ -74,7 +74,6 @@ export default (
     getSpotPrice={() => null}
     orderActions={orderActions}
     orderType={TabOrderTypes.LIMIT}
-    ordersPermitStatus={{}}
     injectedWidgetParams={{}}
   />
 )
diff --git a/apps/cowswap-frontend/src/modules/ordersTable/pure/OrdersTableContainer/index.tsx b/apps/cowswap-frontend/src/modules/ordersTable/pure/OrdersTableContainer/index.tsx
@@ -197,7 +197,6 @@ export function OrdersTableContainer({
   children,
   orderType,
   pendingActivities,
-  ordersPermitStatus,
   injectedWidgetParams,
 }: OrdersProps) {
   const content = () => {
@@ -275,7 +274,6 @@ export function OrdersTableContainer({
         balancesAndAllowances={balancesAndAllowances}
         getSpotPrice={getSpotPrice}
         orderActions={orderActions}
-        ordersPermitStatus={ordersPermitStatus}
       />
     )
   }

diff --git a/apps/cowswap-frontend/src/modules/ordersTable/utils/getOrderParams.ts b/apps/cowswap-frontend/src/modules/ordersTable/utils/getOrderParams.ts
@@ -6,6 +6,7 @@ import { Currency, CurrencyAmount, Percent, Token } from '@uniswap/sdk-core'
 import { BalancesAndAllowances } from 'modules/tokens'
 
 import { RateInfoParams } from 'common/pure/RateInfo'
+import { getOrderPermitAmount } from 'utils/orderUtils/getOrderPermitAmount'
 import { ParsedOrder } from 'utils/orderUtils/parseOrder'
 
 export interface OrderParams {
@@ -22,10 +23,12 @@ const PERCENTAGE_FOR_PARTIAL_FILLS = new Percent(5, 10000) // 0.05%
 export function getOrderParams(
   chainId: SupportedChainId,
   balancesAndAllowances: BalancesAndAllowances,
-  order: ParsedOrder
+  order: ParsedOrder,
 ): OrderParams {
+  const isOrderAtLeastOnceFilled = order.executionData.filledAmount.gt(0)
   const sellAmount = CurrencyAmount.fromRawAmount(order.inputToken, order.sellAmount)
   const buyAmount = CurrencyAmount.fromRawAmount(order.outputToken, order.buyAmount)
+  const permitAmount = getOrderPermitAmount(chainId, order) || undefined
 
   const rateInfoParams: RateInfoParams = {
     chainId,
@@ -43,7 +46,8 @@ export function getOrderParams(
     partiallyFillable: order.partiallyFillable,
     sellAmount,
     balance,
-    allowance,
+    // If the order has been filled at least once, we should not consider the permit amount
+    allowance: isOrderAtLeastOnceFilled ? getBiggerAmount(allowance, permitAmount) : allowance,
   })
 
   return {
@@ -73,3 +77,10 @@ function _hasEnoughBalanceAndAllowance(params: {
 
   return { hasEnoughBalance, hasEnoughAllowance }
 }
+
+function getBiggerAmount(a: BigNumber | undefined, b: BigNumber | undefined): BigNumber | undefined {
+  if (!a) return b
+  if (!b) return a
+
+  return a.gt(b) ? a : b
+}
diff --git a/apps/cowswap-frontend/src/modules/permit/hooks/useCheckHasValidPendingPermit.ts b/apps/cowswap-frontend/src/modules/permit/hooks/useCheckHasValidPendingPermit.ts