feat: purchasing through bag (#4696)

* feat: purchasing assets from bag

* better state management for bag

* fix: comineItemsWithTxRoute.ts

* fixed purchasing assets in review

src/nft/components/bag/BagFooter.tsx

@@ -18,8 +18,7 @@ interface BagFooterProps {
   totalEthPrice: BigNumber
   totalUsdPrice: number | undefined
   bagStatus: BagStatus
-  setBagStatus: (status: BagStatus) => void
-  fetchReview: () => void
+  fetchAssets: () => void
   assetsAreInReview: boolean
 }
 
@@ -37,8 +36,7 @@ export const BagFooter = ({
   totalEthPrice,
   totalUsdPrice,
   bagStatus,
-  setBagStatus,
-  fetchReview,
+  fetchAssets,
   assetsAreInReview,
 }: BagFooterProps) => {
   const toggleWalletModal = useToggleWalletModal()
@@ -86,10 +84,8 @@ export const BagFooter = ({
           onClick={() => {
             if (!isConnected) {
               toggleWalletModal()
-            } else if (bagStatus === BagStatus.ADDING_TO_BAG) {
-              fetchReview()
-            } else if (bagStatus === BagStatus.CONFIRM_REVIEW || bagStatus === BagStatus.WARNING) {
-              setBagStatus(BagStatus.FETCHING_FINAL_ROUTE)
+            } else {
+              fetchAssets()
             }
           }}
         >

src/nft/hooks/index.ts

@@ -10,6 +10,8 @@ export * from './useSearchHistory'
 export * from './useSelectAsset'
 export * from './useSellAsset'
 export * from './useSellPageState'
+export * from './useSendTransaction'
 export * from './useSweep'
+export * from './useTransactionResponse'
 export * from './useWalletBalance'
 export * from './useWalletCollections'

src/nft/hooks/useTransactionResponse.ts

+import create from 'zustand'
+import { devtools } from 'zustand/middleware'
+
+import { TxResponse } from '../types'
+
+type TransactionResponseValue = TxResponse | undefined
+
+type TransactionResponseState = {
+  transactionResponse: TransactionResponseValue
+  setTransactionResponse: (txResponse: TransactionResponseValue) => void
+}
+
+export const useTransactionResponse = create<TransactionResponseState>()(
+  devtools(
+    (set) => ({
+      transactionResponse: undefined,
+      setTransactionResponse: (txResponse) =>
+        set(() => ({
+          transactionResponse: txResponse,
+        })),
+    }),
+    { name: 'useTransactionResponse' }
+  )
+)

src/nft/utils/calcPoolPrice.ts

 import { BigNumber } from '@ethersproject/bignumber'
-import { BagItem, GenieAsset, Markets, UpdatedGenieAsset } from 'nft/types'
+import { BagItem, BagItemStatus, GenieAsset, Markets, UpdatedGenieAsset } from 'nft/types'
 
 export const calcPoolPrice = (asset: GenieAsset, position = 0) => {
   let amountToBuy: BigNumber = BigNumber.from(0)
@@ -58,6 +58,9 @@ export const recalculateBagUsingPooledAssets = (uncheckedItemsInBag: BagItem[])
   if (
     !uncheckedItemsInBag.some(
       (item) => item.asset.marketplace === Markets.NFTX || item.asset.marketplace === Markets.NFT20
+    ) ||
+    uncheckedItemsInBag.every(
+      (item) => item.status === BagItemStatus.REVIEWED || item.status === BagItemStatus.REVIEWING_PRICE_CHANGE
     )
   )
     return uncheckedItemsInBag

src/nft/utils/txRoute/combineItemsWithTxRoute.ts

-import { BuyItem, GenieAsset, PriceInfo, RoutingItem, UpdatedGenieAsset } from '../../types'
+import { BuyItem, GenieAsset, PriceInfo, RoutingItem, UpdatedGenieAsset } from 'nft/types'
+import { formatWeiToDecimal } from 'nft/utils/currency'
 
 const isTheSame = (item: GenieAsset, routeAsset: BuyItem | PriceInfo) => {
   // if route asset has id, match by id
@@ -13,7 +14,14 @@ const isTheSame = (item: GenieAsset, routeAsset: BuyItem | PriceInfo) => {
   }
 }
 
-export const combineBuyItemsWithTxRoute = (items: GenieAsset[], txRoute?: RoutingItem[]): UpdatedGenieAsset[] => {
+const isPriceDiff = (oldPrice: string, newPrice: string) => {
+  return formatWeiToDecimal(oldPrice) !== formatWeiToDecimal(newPrice)
+}
+
+export const combineBuyItemsWithTxRoute = (
+  items: UpdatedGenieAsset[],
+  txRoute?: RoutingItem[]
+): UpdatedGenieAsset[] => {
   return items.map((item) => {
     const route = txRoute && txRoute.find((r) => r.action === 'Buy' && isTheSame(item, r.assetOut))
 
@@ -25,8 +33,14 @@ export const combineBuyItemsWithTxRoute = (items: GenieAsset[], txRoute?: Routin
       }
     }
 
+    const newPriceInfo = item.updatedPriceInfo ? item.updatedPriceInfo : item.priceInfo
+
     // if the price changed
-    if (route && 'priceInfo' in route.assetOut && item.priceInfo.basePrice !== route.assetOut.priceInfo.basePrice) {
+    if (
+      route &&
+      'priceInfo' in route.assetOut &&
+      isPriceDiff(newPriceInfo.basePrice, route.assetOut.priceInfo.basePrice)
+    ) {
       return {
         ...item,
         updatedPriceInfo: route.assetOut.priceInfo,
@@ -35,6 +49,8 @@ export const combineBuyItemsWithTxRoute = (items: GenieAsset[], txRoute?: Routin
 
     return {
       ...item,
+      priceInfo: newPriceInfo,
+      updatedPriceInfo: undefined,
       orderSource: route && 'orderSource' in route.assetOut ? route.assetOut.orderSource : undefined,
     }
   })