Merge pull request #1543 from UniverseXYZ/dev-marketplace-v1.0.1

Hot fixes release -> Dev marketplace v1.0.1
UniverseXYZ · Apr 4, 2022 · 2582a70 · 2582a70
2 parents 3735089 + ac5e31d
commit 2582a70
Show file tree

Hide file tree

Showing 23 changed files with 87 additions and 59 deletions.
diff --git a/.github/workflows/alpha.yaml b/.github/workflows/alpha.yaml
@@ -43,7 +43,7 @@ jobs:
     - name: Build
       run: npm run build
       env:
-        REACT_APP_API_BASE_URL: "https://api.universe.xyz"
+        REACT_APP_API_BASE_URL: "https://alpha.api.universe.xyz"
         REACT_APP_NETWORK_CHAIN_ID: "1"
         REACT_APP_NETWORK_NAME: "Mainnet"
         REACT_APP_BATCH_MINTING_CHUNK_SIZE: "40"
@@ -57,8 +57,8 @@ jobs:
         REACT_APP_ETHERSCAN_URL: "https://etherscan.io"
         REACT_APP_UNIVERSE_ERC_721_ADDRESS: "0xb67e6711c3bb2aa968be26703de20152d4948b38"
         REACT_APP_UNIVERSE_ERC_721_FACTORY_ADDRESS: "0x67aacc69f369846733e55a1f767e961743f58978"
-        REACT_APP_DATASCRAPER_BACKEND: "https://datascraper-api.universe.xyz"
-        REACT_APP_MARKETPLACE_BACKEND: "https://marketplace-api.universe.xyz"
+        REACT_APP_DATASCRAPER_BACKEND: "https://alpha.datascraper-api.universe.xyz"
+        REACT_APP_MARKETPLACE_BACKEND: "https://alpha.marketplace-api.universe.xyz"
         REACT_APP_MARKETPLACE_CONTRACT: "0xB720279a6fc982721771427aA3B6B3a135f81dE3"
         REACT_APP_ROYALTY_REGISTRY_CONTRACT: "0x2A9647901684caaeC6f026eEc0b1355195313cB5"
         REACT_APP_FACEBOOK_APP_ID: "1384895125302127"

diff --git a/.github/workflows/dev.yaml b/.github/workflows/dev.yaml
@@ -2,7 +2,7 @@ name: Dev Environment
 on:
   push:
     branches:
-    - features/marketplace-v2
+    - dev-marketplace-v*
 
 jobs:
   build:

diff --git a/src/app/components/date-time-picker/DateTimePicker.tsx b/src/app/components/date-time-picker/DateTimePicker.tsx
@@ -70,12 +70,13 @@ export const DateTimePicker = ({ value, onChange, onOpen, onClose, minDate, vali
       handleClose();
     }
   });
-
+  const hours = new Date().getHours();
+  const minutes = new Date().getMinutes();
   const handleOpen = useCallback(() => {
     formik.setValues({
       date: value,
-      hours: value ? value?.getHours().toString().padStart(2, '0') : `0${new Date().getHours()}`.slice(-2),
-      minutes: value ? value?.getMinutes().toString().padStart(2, '0') : `0${new Date().getMinutes() + 1}`.slice(-2),
+      hours: value ? value?.getHours().toString().padStart(2, '0') : minutes === 59 ? `0${hours + 1}`.slice(-2) : `0${hours}`.slice(-2),
+      minutes: value ? value?.getMinutes().toString().padStart(2, '0') : minutes === 59 ? '00' : `0${minutes + 1}`.slice(-2),
     });
     openDisclosure();
     onOpen && onOpen();
@@ -116,7 +117,7 @@ export const DateTimePicker = ({ value, onChange, onOpen, onClose, minDate, vali
     if(value.length > 2) return;
     formik.handleChange(event)
   }
-
+  console.log(formik.values.minutes, formik.values.hours);
   return (
     <>
       <Button

diff --git a/src/app/components/filters/collections-filter/CollectionsFilter.tsx b/src/app/components/filters/collections-filter/CollectionsFilter.tsx
@@ -56,7 +56,7 @@ export const CollectionsFilter = (props: ICollectionsFilterProps) => {
       return items;
     }
 
-    return [...items].filter(collection => collection.name.toLowerCase().includes(searchValue));
+    return [...items].filter(collection => collection.name?.toLowerCase().includes(searchValue));
   }, [items, searchValue]);
 
   return (

diff --git a/...p/modules/account/pages/my-nfts-page/components/search-filters/search-filters.context.tsx b/...p/modules/account/pages/my-nfts-page/components/search-filters/search-filters.context.tsx
@@ -1,8 +1,7 @@
 import { FC, createContext, useContext, useState, useEffect, ReactNode } from 'react';
 import { useFormik, FormikProps} from 'formik';
 import { useInfiniteQuery, useQuery, InfiniteData, useQueryClient } from 'react-query';
-import { utils } from 'ethers';
-import { useMedia } from 'react-use';
+import { ethers, utils } from 'ethers';
 
 // API Calls & Interfaces
 import { getUserNFTsApi, IGetUserNFTsProps } from '../../../../../../api';
@@ -30,9 +29,6 @@ import {
 // Constants
 const PER_PAGE = 12;
 import { getTokenAddressByTicker } from '../../../../../../constants';
-import { breakpoints } from '../../../../../../theme/constants';
-import { R } from '../../../../../nft/pages/nft-page/components/nft-asset-audio/hooks';
-import { RLP } from 'ethers/lib/utils';
 
 // Interfaces
 interface INFTsResult {
@@ -385,7 +381,7 @@ const FiltersContextProvider = (props: IFiltersProviderProps) => {
 
       queryClient.setQueryData(nftKeys.nftInfo({collectionAddress: NFT._collectionAddress || "", tokenId: NFT.tokenId}), NFT)
 
-      const key = `${NFT._collectionAddress?.toLowerCase()}:${NFT.tokenId}`;
+      const key = `${NFT._collectionAddress}:${NFT.tokenId}`;
 
       acc[key] = NFT;
 
@@ -398,11 +394,13 @@ const FiltersContextProvider = (props: IFiltersProviderProps) => {
       switch (order.make.assetType.assetClass) {
         case 'ERC721':
           const assetType = order.make.assetType as IERC721AssetType;
-          if (NFTsMapKeys.includes(`${assetType.contract}:${assetType.tokenId}`)) {
+				const checkedAddress = ethers.utils.getAddress(assetType.contract);
+
+          if (NFTsMapKeys.includes(`${checkedAddress}:${assetType.tokenId}`)) {
             acc.push({
               order,
-              NFTs: nftsMap[`${assetType.contract}:${assetType.tokenId}`]
-                ? [nftsMap[`${assetType.contract}:${assetType.tokenId}`]]
+              NFTs: nftsMap[`${checkedAddress}:${assetType.tokenId}`]
+                ? [nftsMap[`${checkedAddress}:${assetType.tokenId}`]]
                 : []
             })
           }

diff --git a/src/app/modules/account/pages/my-nfts-page/components/tab-wallet/WalletTab.tsx b/src/app/modules/account/pages/my-nfts-page/components/tab-wallet/WalletTab.tsx
@@ -118,6 +118,7 @@ export const WalletTab = ({ getTotalNfts }: IWalletTabProps) => {
                                 order: orderData,
                               }) => (
                                 <NFTItemContentWithPrice
+                                  collectionAddress={NFT._collectionAddress}
                                   name={NFT.name}
                                   collection={collection}
                                   creator={creator || undefined}
@@ -182,6 +183,7 @@ export const WalletTab = ({ getTotalNfts }: IWalletTabProps) => {
                             order,
                           }) => (
                             <NFTItemContentWithPrice
+                              collectionAddress={NFT._collectionAddress}
                               name={NFT.name}
                               collection={collection}
                               creator={creator || undefined}

diff --git a/src/app/modules/account/pages/user-profile-page/UserProfilePage.tsx b/src/app/modules/account/pages/user-profile-page/UserProfilePage.tsx
@@ -1,19 +1,20 @@
 import { useTitle } from 'react-use';
-import React, { useState } from 'react';
+import  { useState } from 'react';
 import { useParams } from 'react-router-dom';
 import { useQuery } from 'react-query';
 import Skeleton from 'react-loading-skeleton';
 
-import NotFound from '../../../../../components/notFound/NotFound';
 import ArtistDetails from '../../../../../components/artist/ArtistDetails';
 import { getArtistApi } from '../../../../api';
-import { Box, Container, Tab, TabList, TabPanel, TabPanels, Tabs } from '@chakra-ui/react';
+import { Box, Tab, TabList, TabPanel, TabPanels, Tabs } from '@chakra-ui/react';
 import { ArtistNFTsTab } from './components';
 import { TabLabel } from '../../../../components';
 import FiltersContextProvider from '../../../account/pages/my-nfts-page/components/search-filters/search-filters.context';
+import { ethers } from 'ethers';
 
 export const UserProfilePage = () => {
 
+  // artistUsername could be either a string or a user address
   const { artistUsername } = useParams<{ artistUsername: string; }>();
 
   const [artist, setArtist] = useState<any>();
@@ -29,16 +30,20 @@ export const UserProfilePage = () => {
         setArtist(data.artist);
         setArtistAddress(data.address)
       },
+      onError: () => {
+        try {
+          const checked = ethers.utils.getAddress(artistUsername);
+          setArtistAddress(checked);
+        } catch (e) {
+          console.log(e);
+        }
+      },
       refetchOnMount: 'always'
     },
   );
 
   useTitle(`Universe Minting - Artist - ${artist?.name}`, { restoreOnUnmount: true });
 
-  if (isError) {
-    return (<NotFound />);
-  }
-
   let content = (
     <div className="artist__details__section">
       <div style={{ marginTop: 60, marginBottom: 60 }} className="artist__page">
@@ -69,7 +74,7 @@ export const UserProfilePage = () => {
     </div>
   );
 
-    if (artist) {
+    if (!isLoading) {
       content = (
         <div className="artist__page">
           <Box sx={{ 'img': { display: 'inline' } }}>
@@ -91,9 +96,9 @@ export const UserProfilePage = () => {
               </TabPanel>
             </TabPanels>
           </Tabs>
-          {artist && artist.personalLogo && (
+          {artist && artist?.personalLogo && (
             <div className="artist__personal__logo">
-              <img src={artist.personalLogo} alt="Artist personal logo" />
+              <img src={artist?.personalLogo} alt="Artist personal logo" />
             </div>
           )}
         </div>

diff --git a/src/app/modules/account/pages/user-profile-page/components/artist-nfts-tab/ArtistNFTsTab.tsx b/src/app/modules/account/pages/user-profile-page/components/artist-nfts-tab/ArtistNFTsTab.tsx
@@ -113,6 +113,7 @@ export const ArtistNFTsTab = ({ artistAddress, onTotalLoad }: IArtistNFTsTabProp
                                 order: orderData,
                               }) => (
                                 <NFTItemContentWithPrice
+                                  collectionAddress={NFT._collectionAddress}
                                   name={NFT.name}
                                   collection={collection}
                                   creator={creator || undefined}
@@ -122,7 +123,7 @@ export const ArtistNFTsTab = ({ artistAddress, onTotalLoad }: IArtistNFTsTabProp
                                   bestOfferPriceToken={bestOfferPriceToken || undefined}
                                   lastOfferPrice={lastOfferPrice || 0}
                                   lastOfferPriceToken={lastOfferPriceToken || undefined}
-                                /> 
+                                />
                               )}
                             />
                           );
@@ -177,6 +178,7 @@ export const ArtistNFTsTab = ({ artistAddress, onTotalLoad }: IArtistNFTsTabProp
                             order,
                           }) => (
                             <NFTItemContentWithPrice
+                              collectionAddress={NFT._collectionAddress}
                               name={NFT.name}
                               collection={collection}
                               creator={creator || undefined}

diff --git a/src/app/modules/marketplace/mocks/filter-collections.ts b/src/app/modules/marketplace/mocks/filter-collections.ts
@@ -42,4 +42,5 @@ export const FilterCollectionsItems = [
   {id: 41, address: "0xCa7cA7BcC765F77339bE2d648BA53ce9c8a262bD", name: "Tubby Cats", image:"https://lh3.googleusercontent.com/XHZY9623keDQqFSDHKqOdcjD99Y7N82K1egYRM2Mm1Z-Jxn5myrkKiC5NBktWKStVtTzDzwELy9dNpzTWJTIkLsdMIxUHI86jduQ=s130"},
   {id: 42, address: "0x1a2F71468F656E97c2F86541E57189F59951efe7", name: "CryptoMories", image:"https://lh3.googleusercontent.com/vb1frYDXLe4AHtDQORgr1O1EODOkq31xePpKvgsN3uE5wopK0M8rBYECcDbvTkOpx5Y-9x1TQIP61ae4wI9lq9qwe-wdSUsXywlw=s130"},
   {id: 43, address: "0x0f468766CC936E059a6f4cC8c9826F8958B67Ce2", name: "The Coldest Drop: Subjects", image:"https://lh3.googleusercontent.com/3exmVN-FNqchr-fVZhGpNIPuAdgZZSaChGtD1wGrLWEWcsGPPbSE3Nsyl39WEMAZeYcdLg3Y06KQiUJjpncs7afgwzIU7eH4ohaqVQ=s130"},
+  {id: 44, address: "0x79FCDEF22feeD20eDDacbB2587640e45491b757f", name: "Mfer", image:"https://lh3.googleusercontent.com/J2iIgy5_gmA8IS6sXGKGZeFVZwhldQylk7w7fLepTE9S7ICPCn_dlo8kypX8Ju0N6wvLVOKsbP_7bNGd8cpKmWhFQmqMXOC8q2sOdqw=s130"},
   ];
diff --git a/src/app/modules/nft/api/get-history-api.ts b/src/app/modules/nft/api/get-history-api.ts
@@ -65,6 +65,7 @@ export const GetHistoryApi = async (collectionAddress: string, tokenId: string):
           createdAt: order.createdAt,
           side: OrderSide.BUY,
           status: OrderStatus.CREATED,
+          modified: true
         }
         orderHistory.push(listingOrder);
         order.createdAt = order.updatedAt;
@@ -74,6 +75,7 @@ export const GetHistoryApi = async (collectionAddress: string, tokenId: string):
           createdAt: order.createdAt,
           side: OrderSide.SELL,
           status: OrderStatus.CREATED,
+          modified: true
         }
         orderHistory.push(listingOrder);
         order.createdAt = order.updatedAt;

diff --git a/src/app/modules/nft/api/new-get-nft.api.ts b/src/app/modules/nft/api/new-get-nft.api.ts
@@ -111,7 +111,7 @@ export const GetUserApi = async (address: string) => {
     },
   });
 
-  return data ? mapBackendUser(data) : undefined;
+  return data ? mapBackendUser(data) : { address: address };
 };
 
 /**

diff --git a/src/app/modules/nft/components/nft-item/NftItem.tsx b/src/app/modules/nft/components/nft-item/NftItem.tsx
@@ -1,8 +1,7 @@
 import { Box, LinkBox, LinkOverlay, Text } from '@chakra-ui/react';
-import React, { useMemo, useRef, useState } from 'react';
+import React, { useMemo, useState } from 'react';
 import { useQuery } from 'react-query';
 import { Link } from 'react-router-dom';
-import { useHoverDirty } from 'react-use';
 import { utils } from 'ethers';
 
 import { ICollection, IERC721AssetType, INFT, IUser, IOrder } from '../../types';
@@ -12,9 +11,7 @@ import * as styles from './styles';
 import { NFTRelationType } from '../../enums';
 import { GetActiveListingApi, GetBestAndLastOffer, GetCollectionApi, GetNFT2Api, GetUserApi } from '../../api';
 import { TokenTicker } from '../../../../enums';
-import { getTokenByAddress, TOKENS_MAP } from '../../../../constants';
-import { NFTCheckoutPopup } from '../../pages/nft-page/components';
-import { shortenEthereumAddress } from '../../../../../utils/helpers/format';
+import { getTokenByAddress } from '../../../../constants';
 import { collectionKeys, nftKeys, orderKeys, userKeys } from '../../../../utils/query-keys';
 import { OrderSide, OrderStatus } from '../../../marketplace/enums';
 
@@ -156,13 +153,8 @@ export const NftItem = (
     return [bestOfferPriceT, bestOfferP, lastOfferPriceT, lastOfferP]
   }, [orderData]);
 
-  const ref = useRef(null);
-
-  const isHover = useHoverDirty(ref);
-
   return (
     <ItemWrapper
-      ref={ref}
       isBundle={NFT && NFT.numberOfEditions > 1}
       isSelected={isSelected}
       selectedLabel={selectedLabel}
@@ -213,7 +205,7 @@ export const NftItem = (
                 isLoadingCreator,
                 isLoadingOwner,
               }) : (
-                <NFTItemAsset NFT={NFT} orderEnd={orderEnd || orderData?.end || 0} isHover={isHover} />
+                <NFTItemAsset NFT={NFT} orderEnd={orderEnd || orderData?.end || 0}/>
               )
             }
           </Box>

diff --git a/src/app/modules/nft/components/nft-item/components/nft-item-asset/NFTItemAsset.tsx b/src/app/modules/nft/components/nft-item/components/nft-item-asset/NFTItemAsset.tsx
@@ -10,19 +10,19 @@ import * as styles from './styles';
 import { NFTItemAuctionCountdown } from '..';
 import { NFTItemAssetType } from './components';
 import { NFTAssetBroken } from '../../../../pages/nft-page/components/nft-asset-broken';
-import { getArtworkType, getArtworkTypeByUrl } from '../../../../../../helpers';
+import { getArtworkTypeByUrl } from '../../../../../../helpers';
 import { Loading } from '../../../../../../components';
 
 interface INFTItemAssetProps {
   NFT: INFT;
   renderAssetLabel?: ((NFT: INFT) => React.ReactNode) | null;
   orderEnd?: number;
-  isHover?: boolean;
 }
 export const NFTItemAsset = (props: INFTItemAssetProps) => {
-  const { NFT, renderAssetLabel, orderEnd, isHover } = props;
+  const { NFT, renderAssetLabel, orderEnd } = props;
 
   const [ref, { width }] = useMeasure<HTMLDivElement>();
+  const [isHover, setIsHover] = useState(false);
 
   const isImage = isNFTAssetImage(NFT.artworkTypes);
   const isVideo = isNFTAssetVideo(NFT.artworkTypes);
@@ -40,14 +40,29 @@ export const NFTItemAsset = (props: INFTItemAssetProps) => {
   const imageState = useImage({ src: isImage ? NFT.thumbnailUrl : undefined });
 
   return (
-    <Box ref={ref} pos={'relative'}>
+    <Box 
+      ref={ref} 
+      pos={'relative'} 
+      onMouseEnter={() => {
+        setIsHover(true);
+      }} 
+      onMouseLeave={() => {
+        setIsHover(false);
+      }}
+    >
       {NFT.artworkTypes && NFT.artworkTypes.length && !showError ? 
         <Box {...styles.AssetStyle(width)}>
           {isVideo &&
             <>
               {isImagePreview
                 ? <Image src={isHover && gifUrl ? gifUrl : previewUrl} onError={() => setShowError(true)} alt={NFT.name}  />
-                : <video src={NFT.videoUrl || NFT.thumbnailUrl} onError={() => setShowError(true)} />}
+                : <video 
+                    src={NFT.videoUrl || NFT.thumbnailUrl} 
+                    onError={() => setShowError(true)}
+                    onMouseOver={(event: any) => event.target.play()}
+                    onMouseOut={(event: any) => event.target.pause()}
+                    muted
+                  />}
             </>
            || isImage && (
              <Image

diff --git a/...ft/components/nft-item/components/nft-item-content-with-price/NFTItemContentWithPrice.tsx b/...ft/components/nft-item/components/nft-item-content-with-price/NFTItemContentWithPrice.tsx
@@ -3,7 +3,7 @@ import React, { useMemo } from 'react';
 
 import { NFTItemRelation } from '../nft-item-relation';
 import { NFTRelationType, OrderAssetClass } from '../../../../enums';
-import { ICollection, IERC20AssetType, IOrder, IUser } from '../../../../types';
+import { ICollection, IERC20AssetType, IOrder, IUser, INFT } from '../../../../types';
 import { TokenTicker } from '../../../../../../enums';
 import { TokenIcon } from '../../../../../../components';
 import { getTokenByAddress, TOKENS_MAP } from '../../../../../../constants';
@@ -12,6 +12,7 @@ import { shortenEthereumAddress } from '../../../../../../../utils/helpers/forma
 import * as style from './NFTItemContentWithPrice.styles';
 
 export interface INFTItemContentWithPriceProps {
+  collectionAddress?: string;
   name: string;
   creator?: IUser;
   collection?: ICollection;
@@ -25,6 +26,7 @@ export interface INFTItemContentWithPriceProps {
 
 export const NFTItemContentWithPrice = (
   {
+    collectionAddress,
     name,
     creator,
     collection,
@@ -102,8 +104,8 @@ export const NFTItemContentWithPrice = (
             <NFTItemRelation
               type={NFTRelationType.COLLECTION}
               image={collection.coverUrl ?? ''}
-              value={collection.name ?? ''}
-              linkParam={collection.address ?? ''}
+              value={(collection.name || collectionAddress) ?? ''}
+              linkParam={(collection.address || collectionAddress) ?? ''}
             />
           )}
           {owner && (

diff --git a/src/app/modules/nft/components/nft-menu/styles/list.style.ts b/src/app/modules/nft/components/nft-menu/styles/list.style.ts
@@ -4,4 +4,5 @@ export const ListStyle: MenuListProps = {
   borderRadius: '12px',
   boxShadow: '0px 10px 36px rgba(136, 120, 172, 0.14)',
   padding: '8px',
+  zIndex: '1000'
 };
-Original file line number
+Diff line change
@@ Expand Up / @@ -2,7 +2,7 @@ name: Dev Environment @@
     on:
       push:
         branches:
-        - features/marketplace-v2
+        - dev-marketplace-v*
     jobs:
       build:
@@ Expand Down @@