Merge pull request #1415 from UniverseXYZ/ivostoynovski/sc-2229

listings tab, empty lists (properties, offers, listings) component reused

src/app/modules/marketplace/enums/OrderSide.ts

@@ -0,0 +1,4 @@
+export enum OrderSide {
+  BUY,
+  SELL,
+}

src/app/modules/marketplace/enums/OrderStatus.ts

@@ -0,0 +1,7 @@
+export enum OrderStatus {
+  CREATED,
+  PARTIALFILLED,
+  FILLED,
+  CANCELLED,
+  STALE,
+}

src/app/modules/marketplace/enums/index.ts

@@ -0,0 +1,2 @@
+export * from "./OrderSide";
+export * from "./OrderStatus";

src/app/modules/marketplace/pages/sell-page/SellPage.tsx

@@ -75,6 +75,7 @@ export const SellPage = () => {
       queryClient.refetchQueries(orderKeys.browseAny)
 
       queryClient.invalidateQueries(orderKeys.listing({ collectionAddress: params.collectionAddress.toLowerCase(), tokenId: params.tokenId }));
+      queryClient.invalidateQueries(orderKeys.history({ collectionAddress: params.collectionAddress.toLowerCase(), tokenId: params.tokenId }));
       queryClient.prefetchQuery(orderKeys.listing({ collectionAddress: params.collectionAddress.toLowerCase(), tokenId: params.tokenId }), async () => {
         const result = await GetActiveListingApi(params.collectionAddress.toLowerCase(), params.tokenId);
         return result;

src/app/modules/nft/components/nft-item/NftItem.tsx

@@ -17,6 +17,7 @@ import { NFTCheckoutPopup } from '../../pages/nft-page/components';
 import { shortenEthereumAddress } from '../../../../../utils/helpers/format';
 import { nftKeys, orderKeys, userKeys } from '../../../../utils/query-keys';
 import { useNftCheckoutPopupContext } from '../../../../providers/NFTCheckoutProvider';
+import { OrderSide, OrderStatus } from '../../../marketplace/enums';
 
 type IRenderFuncProps = {
   NFT: INFT;
@@ -266,7 +267,7 @@ export const NftItem = (
                 <NFTItemFooter
                   isCheckoutPopupOpened={isCheckoutPopupOpened}
                   setIsCheckoutPopupOpened={setIsCheckoutPopupOpened}
-                  showBuyNowButton={showBuyNowButton && (orderData || order) && (orderData || order)?.side === 1 && (orderData || order)?.status === 0 ? true : false}
+                  showBuyNowButton={showBuyNowButton && (orderData || order) && (orderData || order)?.side === OrderSide.SELL && (orderData || order)?.status === OrderStatus.CREATED ? true : false}
                   NFT={NFT as INFT}
                   order={(order || orderData) as IOrder}
                 />

src/app/modules/nft/pages/nft-page/components/nft-buy-section/NFTBuySection.tsx

@@ -245,7 +245,6 @@ export const NFTBuySection = ({ NFT, owner, NFTs, order, highestOffer, onMeasure
         order={order}
         isOpen={isCancelListingPopupOpened}
         onClose={() => setIsCancelListingPopupOpened(false)}
-        handleCancel={() => setIsCancelListingPopupOpened(false)}
       />
       <NFTChangeListingPricePopup
         nft={NFT}

src/app/modules/nft/pages/nft-page/components/nft-cancel-listing-popup/NFTCancelListingPopup.tsx

@@ -30,12 +30,11 @@ interface INFTCancelListingPopupProps {
   order?: IOrder;
   isOpen: boolean;
   onClose: () => void;
-  handleCancel: () => void;
 }
 
 const INDEXING_TAKING_TOO_LONG = "Receving the event from the blockchain is taking longer than expected. Please be patient.";
 
-export const NFTCancelListingPopup = ({ order, isOpen, onClose, handleCancel }: INFTCancelListingPopupProps) => {
+export const NFTCancelListingPopup = ({ order, isOpen, onClose }: INFTCancelListingPopupProps) => {
 
   const { signer } = useAuthContext();
   const { setShowLoading, setLoadingTitle, setLoadingBody, closeLoading, setTransactions } = useLoadingPopupContext();
@@ -108,10 +107,11 @@ export const NFTCancelListingPopup = ({ order, isOpen, onClose, handleCancel }:
       // Change query information about order
       if (!newOrder?.id || order.id !== newOrder.id) {
         clearInterval(indexInterval);
+
+        queryClient.invalidateQueries(orderKeys.history({tokenId, collectionAddress}));
         queryClient.setQueryData(orderKeys.listing({tokenId, collectionAddress}), newOrder || undefined);
         queryClient.refetchQueries(orderKeys.browseAny)
         closeLoading();
-        handleCancel();
       }
 
       if (fetchCount === 3) {
@@ -121,7 +121,7 @@ export const NFTCancelListingPopup = ({ order, isOpen, onClose, handleCancel }:
     }, 4000);
 
     setOrderInterval(indexInterval);
-  }, [contract, order, onClose, handleCancel]);
+  }, [contract, order, onClose]);
 
   return (
     <Modal isOpen={isOpen} onClose={onClose} isCentered>

src/app/modules/nft/pages/nft-page/components/nft-change-listing-price-popup/NFTChangeListingPricePopup.tsx

@@ -22,7 +22,7 @@ import {
 import axios from 'axios';
 import { BigNumber, ethers } from 'ethers';
 import React, { useEffect, useMemo, useRef, useState } from 'react';
-import { useMutation } from 'react-query';
+import { useMutation, useQueryClient } from 'react-query';
 import { useFormik } from 'formik';
 import * as Yup from 'yup';
 
@@ -39,6 +39,7 @@ import { useAuthContext } from '../../../../../../../contexts/AuthContext';
 import { useErrorContext } from '../../../../../../../contexts/ErrorContext';
 import { sign } from '../../../../../../helpers';
 import { NFTCancelListingPopup } from '..';
+import { nftKeys, orderKeys } from '../../../../../../utils/query-keys';
 
 export enum ChangeListingPriceState {
   FORM,
@@ -62,8 +63,9 @@ export const NFTChangeListingPricePopup = ({ nft, order, isOpen, onClose, }: INF
   const tokensBtnRef = useRef<HTMLButtonElement>(null);
 
   const [state, setState] = useState<ChangeListingPriceState>(ChangeListingPriceState.FORM);
+  const queryClient = useQueryClient();
   const [isCancelListingPopupOpened, setIsCancelListingPopupOpened] = useState(false);
-  const [isMarkedForCancel, setIsMarkedForCancel] = useState(true);
+  const [oldOrder, setOldOrder] = useState<IOrder>();
 
   const tokens = useMemo(() => TOKENS, []);
 
@@ -87,14 +89,18 @@ export const NFTChangeListingPricePopup = ({ nft, order, isOpen, onClose, }: INF
     validationSchema: NFTChangeListingPriceValidationSchema,
     onSubmit: async (value) => {
       try {
-        if(nft == undefined || order == undefined) {
+
+        if(nft == undefined) {
           return;
         }
-        if (BigNumber.from(ethers.utils.parseUnits(`${value.amount}`,`${TOKENS_MAP[value.token as TokenTicker].decimals}`)).gt(BigNumber.from(order.take.value)) && isMarkedForCancel) {
-          setIsCancelListingPopupOpened(true);
-        } else {
+
+        if (!order) {
           updateListing(value);
+        } else {
+          setOldOrder(order);
+          setIsCancelListingPopupOpened(true);
         }
+
       } catch (e) {
         setShowError(true);        
       }
@@ -103,9 +109,11 @@ export const NFTChangeListingPricePopup = ({ nft, order, isOpen, onClose, }: INF
 
   const updateListing = async (value: any) => {
     try {
-      if(nft == undefined || order == undefined) {
+
+      if (nft == undefined || oldOrder == undefined) {
         return;
       }
+
       setState(ChangeListingPriceState.PROCESSING);
       const network = await web3Provider.getNetwork();
       const address = await signer.getAddress();
@@ -125,14 +133,14 @@ export const NFTChangeListingPricePopup = ({ nft, order, isOpen, onClose, }: INF
 
       const orderData: IEncodeOrderApiData = {
         salt: salt,
-        maker: order.maker,
+        maker: oldOrder.maker,
         make: make,
-        taker: order.taker,
-        take: order.take,
-        type: order.type,
-        start: order.start,
-        end: order.end,
-        data: order.data,
+        taker: oldOrder.taker,
+        take: oldOrder.take,
+        type: oldOrder.type,
+        start: oldOrder.start,
+        end: oldOrder.end,
+        data: oldOrder.data,
       };
       const newToken = TOKENS_MAP[value.token as TokenTicker];
 
@@ -144,6 +152,9 @@ export const NFTChangeListingPricePopup = ({ nft, order, isOpen, onClose, }: INF
       if (newToken.ticker !== TokenTicker.ETH) {
         const tokenAddress = getTokenAddressByTicker(newToken.ticker)
         orderData.take.assetType.contract = tokenAddress;
+      } else {
+        // ETH order must never have contract address
+        delete orderData.take.assetType.contract;
       }
 
       const { data: encodedOrder } = (await encodeOrderMutation.mutateAsync(orderData as IEncodeOrderApiData));
@@ -157,7 +168,21 @@ export const NFTChangeListingPricePopup = ({ nft, order, isOpen, onClose, }: INF
       );
 
       const createOrderResponse = (await createOrderMutation.mutateAsync({ ...orderData, signature })).data;
-
+
+      const tokenIdCollectionPair = {
+        collectionAddress: orderData.make.assetType.contract || "",
+        tokenId: orderData.make.assetType.tokenId || ""
+      }
+
+      queryClient.setQueryData(orderKeys.listing(tokenIdCollectionPair), createOrderResponse)
+      queryClient.invalidateQueries(orderKeys.history(tokenIdCollectionPair));
+
+      //TODO: Invalidate browse marketplace page if order has been loaded
+      queryClient.refetchQueries(orderKeys.browseAny);
+
+      // Invalidate my nfts query in order to see the new nft
+      queryClient.refetchQueries(nftKeys.userNfts(address));
+
       setState(ChangeListingPriceState.SUCCESS)
     } catch(e) {
       setShowError(true);        
@@ -282,7 +307,6 @@ export const NFTChangeListingPricePopup = ({ nft, order, isOpen, onClose, }: INF
         order={order}
         isOpen={isCancelListingPopupOpened}
         onClose={() => setIsCancelListingPopupOpened(false)}
-        handleCancel={() => setIsMarkedForCancel(false)}
       />
     </Modal>
   );