fix: fixing pwat routing edge case (#5987)

* feat: implementing graphql endpoint

* changing from hook to function call

* initial gql routing works

* feat: initial pwatRouting setup

* sending correct amount

* removing console

* it is working

* sufficient balance

* 0 if no inputCurrency

* removing value to send if erc20

* removing console

* permit2 optional flag

* removing not necessary stuff

* mobile fixes

* overlay needs to be here

* changing swap amount to pool reserves

* refactoring routing logic

* no route found button state

* better price loading for insufficient liquidity

* refactoring graphql routing code

* overflow

* initial comments

* resetting bag status on input currency change

* locking

* done

* remove helper text for eth

* fix: pay with any token routing bug

* reordering button

* zindex

* price updated

* keeping debounce

src/nft/components/bag/Bag.tsx

@@ -66,7 +66,7 @@ const BagContainer = styled.div<{ raiseZIndex: boolean; isProfilePage: boolean }
   border-radius: 16px;
   box-shadow: ${({ theme }) => theme.shallowShadow};
   z-index: ${({ raiseZIndex, isProfilePage }) =>
-    raiseZIndex ? (isProfilePage ? Z_INDEX.modalOverTooltip : Z_INDEX.modalBackdrop) : 3};
+    raiseZIndex ? (isProfilePage ? Z_INDEX.modalOverTooltip : Z_INDEX.modalBackdrop + 2) : 3};
 
   @media only screen and (max-width: ${({ theme }) => `${theme.breakpoint.sm}px`}) {
     right: 0px;
@@ -232,7 +232,8 @@ const Bag = () => {
 
             const { route, routeResponse } = buildRouteResponse(data.nftRoute, !!tokenTradeInput)
 
-            const updatedAssets = combineBuyItemsWithTxRoute(itemsToBuy, route)
+            const { hasPriceAdjustment, updatedAssets } = combineBuyItemsWithTxRoute(itemsToBuy, route)
+            const shouldRefetchCalldata = hasPriceAdjustment && !!tokenTradeInput
 
             const fetchedPriceChangedAssets = updatedAssets
               .filter((asset) => asset.updatedPriceInfo)
@@ -266,9 +267,13 @@ const Bag = () => {
 
             if (hasAssets) {
               if (!shouldReview) {
-                purchaseAssets(routeResponse)
-                setBagStatus(BagStatus.CONFIRMING_IN_WALLET)
-                shouldLock = true
+                if (shouldRefetchCalldata) {
+                  setBagStatus(BagStatus.CONFIRM_QUOTE)
+                } else {
+                  purchaseAssets(routeResponse)
+                  setBagStatus(BagStatus.CONFIRMING_IN_WALLET)
+                  shouldLock = true
+                }
               } else if (!hasAssetsInReview) setBagStatus(BagStatus.CONFIRM_REVIEW)
               else {
                 setBagStatus(BagStatus.IN_REVIEW)
@@ -289,7 +294,7 @@ const Bag = () => {
           })
         )
 
-        const updatedAssets = combineBuyItemsWithTxRoute(itemsToBuy, routeData.route)
+        const { updatedAssets } = combineBuyItemsWithTxRoute(itemsToBuy, routeData.route)
 
         const fetchedPriceChangedAssets = updatedAssets
           .filter((asset) => asset.updatedPriceInfo)
@@ -405,12 +410,7 @@ const Bag = () => {
               {isProfilePage ? <ProfileBagContent /> : <BagContent />}
             </Column>
             {hasAssetsToShow && !isProfilePage && (
-              <BagFooter
-                totalEthPrice={totalEthPrice}
-                bagStatus={bagStatus}
-                fetchAssets={fetchAssets}
-                eventProperties={eventProperties}
-              />
+              <BagFooter totalEthPrice={totalEthPrice} fetchAssets={fetchAssets} eventProperties={eventProperties} />
             )}
             {isSellingAssets && isProfilePage && (
               <Box

src/nft/components/modals/Overlay.css.ts

@@ -16,6 +16,6 @@ export const overlay = style([
   {
     opacity: 0.72,
     overflow: 'hidden',
-    zIndex: Z_INDEX.modalBackdrop - 1,
+    zIndex: Z_INDEX.modalBackdrop + 1,
   },
 ])

src/nft/hooks/useSendTransaction.ts

@@ -143,7 +143,7 @@ const findNFTsPurchased = (
     )
   })
 
-  return combineBuyItemsWithTxRoute(transferredItems, txRoute)
+  return combineBuyItemsWithTxRoute(transferredItems, txRoute).updatedAssets
 }
 
 const findNFTsNotPurchased = (toBuy: GenieAsset[], nftsPurchased: UpdatedGenieAsset[]) => {

src/nft/types/checkout/checkout.ts

@@ -96,4 +96,5 @@ export enum BagStatus {
   FETCHING_FINAL_ROUTE = 'Fetching final route',
   CONFIRMING_IN_WALLET = 'Confirming in wallet',
   PROCESSING_TRANSACTION = 'Processing',
+  CONFIRM_QUOTE = 'Confirm quote',
 }

src/nft/utils/txRoute/combineItemsWithTxRoute.ts

@@ -19,8 +19,11 @@ const isTheSame = (item: GenieAsset, routeAsset: BuyItem | PriceInfo) => {
   }
 }
 
-const isPriceDiff = (oldPrice: string, newPrice: string) => {
-  return formatWeiToDecimal(oldPrice) !== formatWeiToDecimal(newPrice)
+const getPriceDiff = (oldPrice: string, newPrice: string): { hasPriceDiff: boolean; hasVisiblePriceDiff: boolean } => {
+  const hasPriceDiff = oldPrice !== newPrice
+  const hasVisiblePriceDiff = formatWeiToDecimal(oldPrice) !== formatWeiToDecimal(newPrice)
+
+  return { hasPriceDiff, hasVisiblePriceDiff }
 }
 
 const isAveragePriceOfPooledAssets = (
@@ -28,7 +31,7 @@ const isAveragePriceOfPooledAssets = (
   numberOfAssetsInPool: number,
   expectedPrice: string
 ): boolean => {
-  return !isPriceDiff(calcAvgGroupPoolPrice(asset, numberOfAssetsInPool), expectedPrice)
+  return !getPriceDiff(calcAvgGroupPoolPrice(asset, numberOfAssetsInPool), expectedPrice).hasVisiblePriceDiff
 }
 
 const isAveragedPrice = (
@@ -74,11 +77,11 @@ const itemInRouteAndSamePool = (
 export const combineBuyItemsWithTxRoute = (
   items: UpdatedGenieAsset[],
   txRoute?: RoutingItem[]
-): UpdatedGenieAsset[] => {
-  return items.map((item) => {
+): { hasPriceAdjustment: boolean; updatedAssets: UpdatedGenieAsset[] } => {
+  let hasPriceAdjustment = false
+  const updatedAssets = items.map((item) => {
     const route = getRouteForItem(item, txRoute)
 
-    // if the item is not found in txRoute, it means it's no longer for sale
     if (txRoute && !route) {
       return {
         ...item,
@@ -86,15 +89,21 @@ export const combineBuyItemsWithTxRoute = (
       }
     }
 
-    const newPriceInfo = item.updatedPriceInfo ? item.updatedPriceInfo : item.priceInfo
+    let newPriceInfo = item.updatedPriceInfo ? item.updatedPriceInfo : item.priceInfo
 
-    // if the price changed
     if (route && 'priceInfo' in route.assetOut) {
-      if (isPriceDiff(newPriceInfo.basePrice, route.assetOut.priceInfo.basePrice)) {
+      const { hasPriceDiff, hasVisiblePriceDiff } = getPriceDiff(
+        newPriceInfo.basePrice,
+        route.assetOut.priceInfo.basePrice
+      )
+
+      newPriceInfo = route.assetOut.priceInfo
+      hasPriceAdjustment = hasPriceDiff
+      if (hasVisiblePriceDiff) {
         if (!isAveragedPrice(item, items, route, txRoute)) {
           return {
             ...item,
-            updatedPriceInfo: route.assetOut.priceInfo,
+            updatedPriceInfo: newPriceInfo,
           }
         }
       }
@@ -107,4 +116,6 @@ export const combineBuyItemsWithTxRoute = (
       orderSource: route && 'orderSource' in route.assetOut ? route.assetOut.orderSource : undefined,
     }
   })
+
+  return { hasPriceAdjustment, updatedAssets }
 }