Merge pull request #204 from rairprotocol/201-resale-offer

201 - resale offer errors
rairprotocol · Sep 18, 2024 · 3320b44 · 3320b44
2 parents c7ed5b3 + fae7cdf
commit 3320b44
Show file tree

Hide file tree

Showing 23 changed files with 404 additions and 524 deletions.
diff --git a/rair-front/src/App.tsx b/rair-front/src/App.tsx
@@ -27,7 +27,6 @@ import MockUpPage from './components/MockUpPage/MockUpPage';
 import { NftDataCommonLink } from './components/MockUpPage/NftList/NftData/NftDataCommonLink';
 import NftDataExternalLink from './components/MockUpPage/NftList/NftData/NftDataExternalLink';
 import MenuNavigation from './components/Navigation/Menu';
-import MyItems from './components/nft/myItems';
 import RairProduct from './components/nft/rairCollection';
 import Token from './components/nft/Token';
 import NotFound from './components/NotFound/NotFound';
@@ -597,19 +596,6 @@ function App() {
                       />
                     )
                   },
-                  {
-                    path: '/profile/my-items',
-                    content: (
-                      <MyItems
-                        {...{
-                          setIsSplashPage,
-                          setTabIndexItems,
-                          tabIndexItems
-                        }}
-                      />
-                    ),
-                    requirement: isLoggedIn
-                  },
                   {
                     path: '/:userAddress',
                     content: <UserProfilePage />

diff --git a/rair-front/src/components/MockUpPage/NftList/NftData/NftDataCommonLink.tsx b/rair-front/src/components/MockUpPage/NftList/NftData/NftDataCommonLink.tsx
@@ -59,9 +59,12 @@ const NftDataCommonLinkComponent: React.FC<INftDataCommonLinkComponent> = ({
 
   const dispatch = useAppDispatch();
   const { currentUserAddress } = useAppSelector((store) => store.web3);
-  const { currentCollection, currentCollectionStatus } = useAppSelector(
-    (state) => state.tokens
-  );
+  const {
+    currentCollection,
+    currentCollectionMetadata,
+    currentCollectionStatus,
+    currentCollectionMetadataStatus
+  } = useAppSelector((state) => state.tokens);
 
   const navigate = useNavigate();
   const params = useParams<TParamsNftDataCommonLink>();
@@ -77,13 +80,21 @@ const NftDataCommonLinkComponent: React.FC<INftDataCommonLinkComponent> = ({
 
   const getAllProduct = useCallback(
     async (fromToken: string, toToken: string, attributes: any) => {
-      if (!product || currentCollectionStatus === dataStatuses.Loading) {
+      if (
+        !product ||
+        currentCollectionStatus === dataStatuses.Loading ||
+        currentCollectionMetadataStatus === dataStatuses.Loading
+      ) {
         return;
       }
 
       const tokensFlag = window.location.href.includes('/tokens') && tokenId;
 
-      if (tokensFlag && currentCollection[tokenId]) {
+      if (
+        tokensFlag &&
+        contract === currentCollectionMetadata?.contractAddress &&
+        currentCollection[tokenId]
+      ) {
         return;
       }
 
@@ -107,7 +118,9 @@ const NftDataCommonLinkComponent: React.FC<INftDataCommonLinkComponent> = ({
       dispatch,
       blockchain,
       contract,
-      currentCollectionStatus
+      currentCollectionStatus,
+      currentCollectionMetadata,
+      currentCollectionMetadataStatus
     ]
   );
 
@@ -256,7 +269,7 @@ const NftDataCommonLinkComponent: React.FC<INftDataCommonLinkComponent> = ({
       }
       getAllProduct(tokenStart.toString(), tokenEnd.toString(), undefined);
     }
-  }, [tokenId]);
+  }, [setTokenNumber, tokenId, tokenNumber]);
 
   useEffect(() => {
     getParticularOffer();

diff --git a/rair-front/src/components/MockUpPage/NftList/NftData/SellButton.tsx b/rair-front/src/components/MockUpPage/NftList/NftData/SellButton.tsx
@@ -1,5 +1,4 @@
 import { FC, memo, useCallback } from 'react';
-import { useParams } from 'react-router';
 import { NavLink } from 'react-router-dom';
 import { parseEther } from 'ethers';
 import { Hex } from 'viem';
@@ -28,18 +27,19 @@ const SellButton: FC<ISellButton> = ({
 }) => {
   const { contractCreator, diamondMarketplaceInstance } = useContracts();
   const { currentUserAddress } = useAppSelector((store) => store.web3);
-  const { currentCollection } = useAppSelector((store) => store.tokens);
-
-  let { blockchain, contract, tokenId } = useParams();
+  const { currentCollection, currentCollectionMetadata } = useAppSelector(
+    (store) => store.tokens
+  );
 
   const xMIN = Number(0.0001);
   const yMAX = item?.contract?.blockchain === '0x1' ? 10 : 10000.0;
 
-  if (!blockchain && !contract && !tokenId) {
-    blockchain = item.contract.blockchain;
-    contract = item.contract.contractAddress;
-    tokenId = item.uniqueIndexInContract;
-  }
+  const blockchain =
+    item?.contract?.blockchain || currentCollectionMetadata?.blockchain;
+  const contract =
+    item?.contract?.contractAddress ||
+    currentCollectionMetadata?.contractAddress;
+  const tokenId = item?.uniqueIndexInContract;
 
   const reactSwal = useSwal();
   const { web3TxHandler, web3Switch, correctBlockchain } = useWeb3Tx();
@@ -53,8 +53,10 @@ const SellButton: FC<ISellButton> = ({
       web3Switch(blockchain as Hex);
       return;
     }
-    const tokenInformation =
-      item || (selectedToken && currentCollection?.[selectedToken]);
+    const tokenInformation = item || {
+      ...(selectedToken && currentCollection?.[selectedToken]),
+      contract: currentCollectionMetadata
+    };
     if (
       !contractCreator ||
       !sellingPrice ||
@@ -93,8 +95,8 @@ const SellButton: FC<ISellButton> = ({
           'setApprovalForAll',
           [await diamondMarketplaceInstance.getAddress(), true],
           {
-            intendedBlockchain: item.contract.blockchain,
-            sponsored: tokenInformation.range.sponsored
+            intendedBlockchain: tokenInformation.contract.blockchain,
+            sponsored: tokenInformation.offer.sponsored
           }
         ))
       ) {
@@ -140,14 +142,14 @@ const SellButton: FC<ISellButton> = ({
           nodeAddress // Node address
         ],
         {
-          intendedBlockchain: item.contract.blockchain,
-          sponsored: tokenInformation.range.sponsored
+          intendedBlockchain: tokenInformation.contract.blockchain,
+          sponsored: tokenInformation.offer.sponsored
         }
       )
     ) {
       response = { success: true };
     }
-    if (response.success) {
+    if (response?.success) {
       reactSwal.fire({
         title: 'Success',
         html: `Users will be able to purchase your NFT on the marketplace`,
@@ -173,7 +175,8 @@ const SellButton: FC<ISellButton> = ({
     selectedToken,
     nodeAddress,
     getBlockchainData,
-    databaseResales
+    databaseResales,
+    currentCollectionMetadata
   ]);
 
   const openInputField = useCallback(() => {

diff --git a/rair-front/src/components/MockUpPage/NftList/NftData/SerialNumberBuySell.tsx b/rair-front/src/components/MockUpPage/NftList/NftData/SerialNumberBuySell.tsx
@@ -21,6 +21,7 @@ import { store } from '../../../../redux/store';
 import { reloadTokenData } from '../../../../redux/tokenSlice';
 import { rFetch } from '../../../../utils/rFetch';
 import { ContractType } from '../../../adminViews/adminView.types';
+import LoadingComponent from '../../../common/LoadingComponent';
 import ResaleModal from '../../../nft/PersonalProfile/PersonalProfileMyNftTab/ResaleModal/ResaleModal';
 import defaultImage from '../../../UserProfileSettings/images/defaultUserPictures.png';
 import { ImageLazy } from '../../ImageLazy/ImageLazy';
@@ -304,35 +305,33 @@ const SerialNumberBuySell: React.FC<ISerialNumberBuySell> = ({
         currentCollection &&
         currentCollection[selectedToken]?.isMinted === true
       ) {
-        const ownerData = currentCollection[selectedToken]?.ownerData;
+        const tokenData = currentCollection[selectedToken];
         return (
           <div className="container-sell-button-user">
             Owned by{' '}
             <div className="block-user-creator">
               <ImageLazy
-                src={ownerData?.avatar ? ownerData.avatar : defaultImage}
+                src={
+                  tokenData.ownerData?.avatar
+                    ? tokenData.ownerData.avatar
+                    : defaultImage
+                }
                 alt="User Avatar"
               />
               {selectedToken && (
-                <NavLink
-                  to={`/${currentCollection[selectedToken]?.ownerAddress}`}>
+                <NavLink to={`/${tokenData?.ownerAddress}`}>
                   <h5>
-                    {(ownerData &&
-                    ownerData.nickName &&
-                    ownerData.nickName.length > 20
-                      ? ownerData.nickName.slice(0, 5) +
+                    {(tokenData.ownerData &&
+                    tokenData.ownerData.nickName &&
+                    tokenData.ownerData.nickName.length > 20
+                      ? tokenData.ownerData.nickName.slice(0, 5) +
                         '...' +
-                        ownerData.nickName.slice(length - 4)
-                      : ownerData && ownerData.nickName) ||
-                      (currentCollection[selectedToken]?.ownerAddress &&
-                        currentCollection[selectedToken]?.ownerAddress.slice(
-                          0,
-                          4
-                        ) +
+                        tokenData.ownerData.nickName.slice(length - 4)
+                      : tokenData.ownerData && tokenData.ownerData.nickName) ||
+                      (tokenData?.ownerAddress &&
+                        tokenData?.ownerAddress.slice(0, 4) +
                           '...' +
-                          currentCollection[selectedToken]?.ownerAddress.slice(
-                            length - 4
-                          ))}
+                          tokenData?.ownerAddress.slice(length - 4))}
                   </h5>
                 </NavLink>
               )}
@@ -369,8 +368,7 @@ const SerialNumberBuySell: React.FC<ISerialNumberBuySell> = ({
     // Blockchain is correct and offer exists
     if (
       selectedToken &&
-      currentCollection &&
-      !currentCollection[selectedToken]?.isMinted &&
+      !currentCollection?.[selectedToken]?.isMinted &&
       offerData
     ) {
       const rawPrice = BigInt(offerData?.price ? offerData?.price : 0);
@@ -409,11 +407,7 @@ const SerialNumberBuySell: React.FC<ISerialNumberBuySell> = ({
         </>
       );
       // Token is minted
-    } else if (
-      selectedToken &&
-      currentCollection &&
-      currentCollection[selectedToken]?.isMinted
-    ) {
+    } else if (selectedToken && currentCollection?.[selectedToken]?.isMinted) {
       if (resaleData) {
         const price =
           numberTooBigThreshold >= resaleData.price
@@ -441,6 +435,10 @@ const SerialNumberBuySell: React.FC<ISerialNumberBuySell> = ({
           </>
         );
       }
+
+      if (!selectedToken) {
+        return;
+      }
       // Current user is owner of the token
       if (
         currentCollection[selectedToken].ownerAddress ===
@@ -454,33 +452,33 @@ const SerialNumberBuySell: React.FC<ISerialNumberBuySell> = ({
         );
         // User is not owner and resale data exists
       } else {
-        const firstData = Object.values(currentCollection)[0];
+        const tokenData = currentCollection[selectedToken];
         return (
           <div className="container-sell-button-user">
             Owned by{' '}
             <div className="block-user-creator">
               <ImageLazy
                 src={
-                  firstData.ownerData?.avatar
-                    ? firstData.ownerData.avatar
+                  tokenData.ownerData?.avatar
+                    ? tokenData.ownerData.avatar
                     : defaultImage
                 }
                 alt="User Avatar"
               />
-              {firstData && (
-                <NavLink to={`/${firstData?.ownerAddress}`}>
+              {tokenData && (
+                <NavLink to={`/${tokenData?.ownerAddress}`}>
                   <h5>
-                    {(firstData.ownerData &&
-                    firstData.ownerData.nickName &&
-                    firstData.ownerData.nickName.length > 20
-                      ? firstData.ownerData.nickName.slice(0, 5) +
+                    {(tokenData.ownerData &&
+                    tokenData.ownerData.nickName &&
+                    tokenData.ownerData.nickName.length > 20
+                      ? tokenData.ownerData.nickName.slice(0, 5) +
                         '....' +
-                        firstData.ownerData.nickName.slice(length - 4)
-                      : firstData.ownerData && firstData.ownerData.nickName) ||
-                      (firstData.ownerAddress &&
-                        firstData.ownerAddress.slice(0, 4) +
+                        tokenData.ownerData.nickName.slice(length - 4)
+                      : tokenData.ownerData && tokenData.ownerData.nickName) ||
+                      (tokenData.ownerAddress &&
+                        tokenData.ownerAddress.slice(0, 4) +
                           '....' +
-                          firstData.ownerAddress.slice(length - 4))}
+                          tokenData.ownerAddress.slice(length - 4))}
                   </h5>
                 </NavLink>
               )}
@@ -489,23 +487,28 @@ const SerialNumberBuySell: React.FC<ISerialNumberBuySell> = ({
         );
       }
     }
-    // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [
     blockchain,
+    currentUserAddress,
     correctBlockchain,
-    selectedToken,
     currentCollection,
     offerData,
+    selectedToken,
     web3Switch,
     numberTooBigThreshold,
     contractData,
     buyContract,
-    currentUserAddress,
+    getBlockchainData,
+    exchangeRates,
     resaleData,
     resalePurchase,
     getResaleData
   ]);
 
+  if (!selectedToken) {
+    return <LoadingComponent />;
+  }
+
   return (
     <div className="main-tab">
       <div className="main-tab-description-serial-number">

diff --git a/rair-front/src/components/MockUpPage/mockupPage.types.ts b/rair-front/src/components/MockUpPage/mockupPage.types.ts
@@ -2,7 +2,11 @@ import { Hex } from 'viem';
 
 import { TMetadataType, TProducts } from '../../axios.responseTypes';
 import { CollectionTokens } from '../../redux/tokenSlice';
-import { CatalogVideoItem, tokenNumberData } from '../../types/commonTypes';
+import {
+  CatalogVideoItem,
+  NftItemToken,
+  tokenNumberData
+} from '../../types/commonTypes';
 import { TokenMetadata, User } from '../../types/databaseTypes';
 import { TOfferType } from '../marketplace/marketplace.types';
 
@@ -108,7 +112,7 @@ export interface ISerialNumberBuySell {
   selectedToken: string | undefined;
   setSelectedToken: (tokenId: string | undefined) => void;
   offerData: TOfferType | undefined;
-  tokenDataForResale?: CollectionTokens;
+  tokenDataForResale?: NftItemToken | CollectionTokens;
   serialNumberData: Array<tokenNumberData>;
 }
 export interface ISellButton {