Speed up marketplace (#1517)

* fix(nft-query): don't query collection where unnecessary * add collection admin to yaml files * remove collection call from more from collection api call Co-authored-by: vikinatora <[email protected]> Co-authored-by: Stanislav Trenev <[email protected]>
UniverseXYZ · Mar 25, 2022 · 3735089 · 3735089
1 parent af15ee2
commit 3735089
Show file tree

Hide file tree

Showing 23 changed files with 72 additions and 43 deletions.
diff --git a/.env b/.env
@@ -21,3 +21,4 @@ REACT_APP_MARKETPLACE_CONTRACT=0xe441c394F917D5a90019C76897458257801ce132
 REACT_APP_ROYALTY_REGISTRY_CONTRACT=0x58e1A04dC9d4655234f8eEc8071fC60093113648
 REACT_APP_FACEBOOK_APP_ID=1384895125302127
 REACT_APP_CAPTCHA_ID=6LcuWmseAAAAABfw8I5CXKUisFT3yT90uexc8Bc0
+REACT_APP_COLLECTION_EDITOR=0x6FB3946CCc1a4b04FE49ce3e591C15f496C73881
diff --git a/.github/workflows/alpha.yaml b/.github/workflows/alpha.yaml
@@ -63,6 +63,7 @@ jobs:
         REACT_APP_ROYALTY_REGISTRY_CONTRACT: "0x2A9647901684caaeC6f026eEc0b1355195313cB5"
         REACT_APP_FACEBOOK_APP_ID: "1384895125302127"
         REACT_APP_CAPTCHA_ID: "6LcuWmseAAAAABfw8I5CXKUisFT3yT90uexc8Bc0"
+        REACT_APP_COLLECTION_EDITOR: "0x5473580406D12E1cBD4c00B77e158FfF0CE9424e"
 
     - name: Save artifacts
       uses: actions/upload-artifact@v2

diff --git a/.github/workflows/dev.yaml b/.github/workflows/dev.yaml
@@ -63,7 +63,7 @@ jobs:
         REACT_APP_ROYALTY_REGISTRY_CONTRACT: "0x58e1A04dC9d4655234f8eEc8071fC60093113648"
         REACT_APP_FACEBOOK_APP_ID: "1384895125302127"
         REACT_APP_CAPTCHA_ID: "6LcuWmseAAAAABfw8I5CXKUisFT3yT90uexc8Bc0"
-
+        REACT_APP_COLLECTION_EDITOR: "0x5473580406D12E1cBD4c00B77e158FfF0CE9424e"
 
     - name: Save artifacts
       uses: actions/upload-artifact@v2

diff --git a/.github/workflows/prod.yaml b/.github/workflows/prod.yaml
@@ -63,6 +63,7 @@ jobs:
         REACT_APP_ROYALTY_REGISTRY_CONTRACT: "0x2A9647901684caaeC6f026eEc0b1355195313cB5"
         REACT_APP_FACEBOOK_APP_ID: "1384895125302127"
         REACT_APP_CAPTCHA_ID: "6LcuWmseAAAAABfw8I5CXKUisFT3yT90uexc8Bc0"
+        REACT_APP_COLLECTION_EDITOR: "0x5473580406D12E1cBD4c00B77e158FfF0CE9424e"
 
     - name: Save artifacts
       uses: actions/upload-artifact@v2

diff --git a/src/App.js b/src/App.js
@@ -144,7 +144,8 @@ const App = () => {
   const { showLoading, closeLoading, loadingTitle, loadingBody, transactions } =
     useLoadingPopupContext();
 
-  const { NFT, NFTs, order, isOpen, onClose, closeCheckout } = useNftCheckoutPopupContext();
+  const { NFT, collection, NFTs, order, isOpen, onClose, closeCheckout } =
+    useNftCheckoutPopupContext();
 
   useEffect(() => {
     window.scrollTo(0, 0);
@@ -183,6 +184,7 @@ const App = () => {
                               {NFT?.tokenId && order?.id && (
                                 <NFTCheckoutPopup
                                   NFT={NFT}
+                                  collection={collection}
                                   NFTs={NFTs}
                                   order={order}
                                   isOpen={isOpen}

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
@@ -385,7 +385,7 @@ const FiltersContextProvider = (props: IFiltersProviderProps) => {
 
       queryClient.setQueryData(nftKeys.nftInfo({collectionAddress: NFT._collectionAddress || "", tokenId: NFT.tokenId}), NFT)
 
-      const key = `${NFT.collection?.address}:${NFT.tokenId}`;
+      const key = `${NFT._collectionAddress?.toLowerCase()}:${NFT.tokenId}`;
 
       acc[key] = NFT;
 

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
@@ -105,7 +105,7 @@ export const WalletTab = ({ getTotalNfts }: IWalletTabProps) => {
                               order={order}
                               key={order.id}
                               NFT={NFTs[0]}
-                              collection={`${NFTs[0].collection?.address}`}
+                              collection={`${NFTs[0]._collectionAddress}`}
                               renderContent={({
                                 NFT,
                                 collection,

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
@@ -99,7 +99,7 @@ export const ArtistNFTsTab = ({ artistAddress, onTotalLoad }: IArtistNFTsTabProp
                               order={order}
                               key={order.id}
                               NFT={NFTs[0]}
-                              collection={`${NFTs[0].collection?.address}`}
+                              collection={`${NFTs[0]._collectionAddress}`}
                               orderEnd={order.end}
                               renderContent={({
                                 NFT,

diff --git a/src/app/modules/marketplace/pages/browse-nfts-page/BrowseNFTsPage.tsx b/src/app/modules/marketplace/pages/browse-nfts-page/BrowseNFTsPage.tsx
@@ -220,14 +220,14 @@ export const BrowseNFTsPage = () => {
           case 'ERC721':
             const assetType = order.make.assetType as IERC721AssetType;
             queryClient.setQueryData(orderKeys.listing({collectionAddress: assetType.contract, tokenId: assetType.tokenId.toString()}), order);
-            NFTsRequests.push(GetNFT2Api(assetType.contract, assetType.tokenId))
+            NFTsRequests.push(GetNFT2Api(assetType.contract, assetType.tokenId, false))
             break;
           case 'ERC721_BUNDLE':
             const assetTypeBundle = order.make.assetType as IERC721BundleAssetType;
             for (let i = 0; i < assetTypeBundle.contracts.length; i++) {
               for (const tokenId of assetTypeBundle.tokenIds[i]) {
                 queryClient.setQueryData(orderKeys.listing({collectionAddress: assetTypeBundle.contracts[i], tokenId: tokenId.toString()}), order);
-                NFTsRequests.push(GetNFT2Api(assetTypeBundle.contracts[i], tokenId))
+                NFTsRequests.push(GetNFT2Api(assetTypeBundle.contracts[i], tokenId, false))
               }
             }
             break;
@@ -241,7 +241,7 @@ export const BrowseNFTsPage = () => {
 
         const NFT: INFT = response.value;
         //TODO: set query cache to this specific nft(nftKeys.info)
-        const key = `${NFT.collection?.address}:${NFT.tokenId}`;
+        const key = `${NFT._collectionAddress?.toLowerCase()}:${NFT.tokenId}`;
 
         queryClient.setQueryData(nftKeys.nftInfo({collectionAddress: NFT._collectionAddress || "", tokenId: NFT.tokenId}), NFT)
 
@@ -452,7 +452,7 @@ export const BrowseNFTsPage = () => {
                         order={order}
                         key={order.id}
                         NFT={NFTs[0]}
-                        collection={`${NFTs[0].collection?.address}`}
+                        collection={`${NFTs[0]._collectionAddress}`}
                         orderEnd={order.end}
                         renderContent={({ NFT, collection, creator, owner, bestOfferPrice, bestOfferPriceToken, lastOfferPrice, lastOfferPriceToken, order: orderData }) => (
                           <NFTItemContentWithPrice

diff --git a/src/app/modules/marketplace/pages/sell-page/SellPage.tsx b/src/app/modules/marketplace/pages/sell-page/SellPage.tsx
@@ -90,7 +90,10 @@ export const SellPage = () => {
 
   const { data: nft } = useQuery(
     nftKeys.nftInfo({collectionAddress: params.collectionAddress, tokenId: params.tokenId}),
-    () => GetNFT2Api(params.collectionAddress, params.tokenId)
+    () => GetNFT2Api(params.collectionAddress, params.tokenId),
+    {
+      onSuccess: (data) => console.log(data)
+    }
   );
 
   const getSaltMutation = useMutation(GetSaltApi);

diff --git a/src/app/modules/nft/api/new-get-nft.api.ts b/src/app/modules/nft/api/new-get-nft.api.ts
@@ -67,27 +67,33 @@ interface IGetNFTResponse {
   sentForMediaAt: string;
 }
 
-export const GetNFT2Api = async (collectionAddress: string, tokenId: string | number) => {
+export const GetNFT2Api = async (collectionAddress: string, tokenId: string | number, fetchCollection = true) => {
   const url = `${process.env.REACT_APP_DATASCRAPER_BACKEND}/v1/tokens/${ethers.utils.getAddress(collectionAddress)}/${tokenId}`;
 
-  const [{ data }, collectionData] = await Promise.all([
+  if (fetchCollection) {
+    const [{ data }, collectionData] = await Promise.all([
+      axios.get<INFTBackendType>(url),
+      GetCollectionApi(collectionAddress)
+    ])
+
+    return mapNft(data, collectionData);
+  }
+
+  const [{ data }] = await Promise.all([
     axios.get<INFTBackendType>(url),
-    GetCollectionApi(collectionAddress)
   ])
 
-  return mapNft(data, collectionData);
+  return mapNft(data, undefined);
+
 };
 
 export const GetMoreFromCollectionApi = async (collectionAddress: string, tokenId: string) => {
   try {
     const url = `${process.env.REACT_APP_DATASCRAPER_BACKEND}/v1/collections/${collectionAddress}/more`;
 
-    const [{ data }, collectionData] = await Promise.all([
-      axios.get<INFTBackendType[]>(url, {params: { excludeTokenId: tokenId, maxCount: 4 }}),
-      GetCollectionApi(collectionAddress)
-    ])
+    const { data } = await axios.get<INFTBackendType[]>(url, {params: { excludeTokenId: tokenId, maxCount: 4 }})
 
-    const NFT = data.map((nft: INFTBackendType) => mapNft(nft, collectionData));
+    const NFT = data.map((nft: INFTBackendType) => mapNft(nft, undefined));
 
     return NFT;
   } catch (e) {

diff --git a/src/app/modules/nft/components/nft-item/NftItem.tsx b/src/app/modules/nft/components/nft-item/NftItem.tsx
@@ -16,7 +16,6 @@ import { getTokenByAddress, TOKENS_MAP } from '../../../../constants';
 import { NFTCheckoutPopup } from '../../pages/nft-page/components';
 import { shortenEthereumAddress } from '../../../../../utils/helpers/format';
 import { collectionKeys, nftKeys, orderKeys, userKeys } from '../../../../utils/query-keys';
-import { useNftCheckoutPopupContext } from '../../../../providers/NFTCheckoutProvider';
 import { OrderSide, OrderStatus } from '../../../marketplace/enums';
 
 type IRenderFuncProps = {
@@ -84,7 +83,7 @@ export const NftItem = (
   // Get NFT Info Query
   const { data: NFT, isLoading: isLoadingNFT } = useQuery(
     nftKeys.nftInfo({collectionAddress: _NFT._collectionAddress || '', tokenId: _NFT.tokenId || ""}),
-    () => GetNFT2Api(_NFT._collectionAddress || "", _NFT.tokenId),
+    () => GetNFT2Api(_NFT._collectionAddress || "", _NFT.tokenId, false),
     {
       enabled: !!_NFT._collectionAddress && !!_NFT.tokenId,
       retry: false,
@@ -280,6 +279,7 @@ export const NftItem = (
                   setIsCheckoutPopupOpened={setIsCheckoutPopupOpened}
                   showBuyNowButton={showBuyNowButton && (orderData || order) && (orderData || order)?.side === OrderSide.SELL && (orderData || order)?.status === OrderStatus.CREATED ? true : false}
                   NFT={NFT as INFT}
+                  collection={collection}
                   order={(order || orderData) as IOrder}
                 />
               )

diff --git a/src/app/modules/nft/components/nft-item/components/nft-item-footer/NFTItemFooter.tsx b/src/app/modules/nft/components/nft-item/components/nft-item-footer/NFTItemFooter.tsx
@@ -1,7 +1,7 @@
 import { Box, BoxProps, Flex } from '@chakra-ui/react';
 import React from 'react';
 
-import { INFT, IOrder, NFTStandard } from '../../../../types';
+import { ICollection, INFT, IOrder, NFTStandard } from '../../../../types';
 import { NFTLike } from '../nft-like';
 import * as styles from './styles';
 import {
@@ -15,6 +15,7 @@ import { useAuthContext } from '../../../../../../../contexts/AuthContext';
 import { useNftCheckoutPopupContext } from '../../../../../../providers/NFTCheckoutProvider';
 interface INFTItemFooterProps extends BoxProps {
   NFT?: INFT;
+  collection?: ICollection;
   order?: any;
   isCheckoutPopupOpened?: boolean;
   showBuyNowButton?: boolean;
@@ -24,6 +25,7 @@ interface INFTItemFooterProps extends BoxProps {
 export const NFTItemFooter = (
   {
     NFT,
+    collection,
     order,
     children,
     isCheckoutPopupOpened,
@@ -34,7 +36,7 @@ export const NFTItemFooter = (
 ) => {
   const showLikes = false;
   const { address, isAuthenticated } = useAuthContext() as any;
-  const {setNFT, setIsOpen, setOrder, setOnClose} = useNftCheckoutPopupContext();
+  const {setNFT, setCollection, setIsOpen, setOrder, setOnClose} = useNftCheckoutPopupContext();
 
 
   const handleCheckoutModal = (event: React.MouseEvent<Element, MouseEvent>) => {
@@ -44,10 +46,12 @@ export const NFTItemFooter = (
       setIsOpen(false);
       setOrder({} as IOrder);
       setNFT({} as INFT);
+      setCollection({} as ICollection);
     } else {
       setIsOpen(true);
       setOrder(order || {} as IOrder);
       setNFT(NFT || {} as INFT)
+      setCollection(collection as ICollection);
     }
   }
 

diff --git a/src/app/modules/nft/pages/bundle-page/BundlePage.tsx b/src/app/modules/nft/pages/bundle-page/BundlePage.tsx
@@ -62,8 +62,8 @@ export const BundlePageContent = () => {
   const [offerForAccept, setOfferForAccept] = useState<IOrder | null>(null);
 
   const handleClickViewCollection = useCallback(() => {
-    if (moreFromCollection && moreFromCollection[0].collection) {
-      router.push(`/collection/${moreFromCollection[0].collection.address}`);
+    if (moreFromCollection && moreFromCollection[0]._collectionAddress) {
+      router.push(`/collection/${moreFromCollection[0]._collectionAddress}`);
     }
   }, [moreFromCollection]);
 
@@ -146,7 +146,7 @@ export const BundlePageContent = () => {
             }}>
               <Heading {...styles2.NameStyle}>{(order.make.assetType as IERC721BundleAssetType).bundleName}</Heading>
               <Box>
-                <BundleMenu collectionAddress={uniqNFTs[selectedNFTIdx].collection?.address} tokenId={uniqNFTs[selectedNFTIdx].tokenId}/>
+                <BundleMenu collectionAddress={uniqNFTs[selectedNFTIdx]._collectionAddress} tokenId={uniqNFTs[selectedNFTIdx].tokenId}/>
               </Box>
             </Flex>
 
@@ -206,7 +206,7 @@ export const BundlePageContent = () => {
               }}
               spacing={'20px'}
             >
-              {moreFromCollection.map((NFT) => (<NftItem key={NFT.id} NFT={NFT} collection={`${NFT.collection?.address}`} />))}
+              {moreFromCollection.map((NFT) => (<NftItem key={NFT.id} NFT={NFT} collection={`${NFT._collectionAddress}`} />))}
             </SimpleGrid>
           </Container>
           <Button {...styles.MoreNFTsButtonStyle} onClick={handleClickViewCollection}>View collection</Button>

diff --git a/src/app/modules/nft/pages/bundle-page/components/tab-nfts/TabNFTs.tsx b/src/app/modules/nft/pages/bundle-page/components/tab-nfts/TabNFTs.tsx
@@ -32,7 +32,7 @@ export const TabNFTs = ({ NFTs: _NFTs }: ITabNFTsProps) => {
       {Object.keys(NFTs).map((key, i) => {
         const NFT = NFTs[key][0];
         return (
-          <Box key={i} {...styles.ItemStyle} onClick={() => handleNFTClick(NFT.collection?.address, NFT.tokenId)}>
+          <Box key={i} {...styles.ItemStyle} onClick={() => handleNFTClick(NFT._collectionAddress, NFT.tokenId)}>
             {isNFTAssetImage(NFT.artworkTypes) && <Image src={NFT.thumbnailUrl} /> ||
              isNFTAssetVideo(NFT.artworkTypes) && <video src={NFT.thumbnailUrl} /> ||
              isNFTAssetAudio(NFT.artworkTypes) && <Image src={AudioNFTPreviewImage} />}

diff --git a/src/app/modules/nft/pages/collection-page/components/collection-info/CollectionInfo.tsx b/src/app/modules/nft/pages/collection-page/components/collection-info/CollectionInfo.tsx
@@ -198,7 +198,7 @@ export const CollectionInfo = () => {
                       twitterLink=""
                     />
                     <Box>
-                      {isAuthenticated && address?.toLowerCase() === collectionOwner && ( //
+                      {isAuthenticated && (address?.toLowerCase() === collectionOwner || process.env.REACT_APP_COLLECTION_EDITOR?.toLowerCase() === address) && ( //
                         <Button className="light-button" onClick={handleEdit}>
                           <span style={{ marginRight: '5px'}}>Edit</span>
                           <EditIcon />
@@ -261,7 +261,7 @@ export const CollectionInfo = () => {
                                       order={order}
                                       key={order.id}
                                       NFT={NFTs[0]}
-                                      collection={`${NFTs[0].collection?.address}`}
+                                      collection={`${NFTs[0]._collectionAddress}`}
                                       orderEnd={order.end}
                                       renderContent={({ NFT, collection, creator, owner, bestOfferPrice, bestOfferPriceToken, lastOfferPrice, lastOfferPriceToken, order: orderData }) => (
                                         <NFTItemContentWithPrice

diff --git a/src/app/modules/nft/pages/nft-page/NFTPage.context.tsx b/src/app/modules/nft/pages/nft-page/NFTPage.context.tsx
@@ -35,7 +35,7 @@ const NFTPageProvider: FC = ({ children }) => {
   // NFT Data query
   const { data: NFT, isLoading: isLoadingNFT } = useQuery(
     nftKeys.nftInfo({collectionAddress, tokenId}),
-    () => GetNFT2Api(collectionAddress, tokenId),
+    () => GetNFT2Api(collectionAddress, tokenId, false),
     {
       enabled: !!collectionAddress && !!tokenId,
       onSuccess: (NFT) => console.log('NFT', NFT) 

diff --git a/src/app/modules/nft/pages/nft-page/components/nft-buy-section/NFTBuySection.tsx b/src/app/modules/nft/pages/nft-page/components/nft-buy-section/NFTBuySection.tsx
@@ -9,7 +9,7 @@ import ClockIcon from '../../../../../../../assets/images/clock.svg';
 import { useDateCountdown } from '../../../../../../hooks';
 import * as styles from './styles';
 import { HighestBid } from './components';
-import { IERC20AssetType, IERC721AssetType, INFT, IOrder, IUser } from '../../../../types';
+import { ICollection, IERC20AssetType, IERC721AssetType, INFT, IOrder, IUser } from '../../../../types';
 import { NFTCheckoutPopup } from '../nft-checkout-popup';
 import { NFTPlaceABidPopup } from '../nft-place-a-bid-popup';
 import { NFTMakeAnOfferPopup } from '../nft-make-an-offer-popup';
@@ -24,6 +24,7 @@ import { getRoyaltiesFromRegistry } from '../../../../../../../utils/marketplace
 import { HighestOffer } from './components/highest-offer';
 import { isEmpty } from '../../../../../../../utils/helpers';
 import { useNftCheckoutPopupContext } from '../../../../../../providers/NFTCheckoutProvider';
+import { useNFTPageData } from '../../NFTPage.context';
 
 interface INFTBuySectionProps {
   NFT?: INFT;
@@ -43,7 +44,8 @@ export const NFTBuySection = ({ NFT, owner, NFTs, order, highestOffer, onMeasure
 
   const [state, setState] = useState<BuyNFTSectionState>();
 
-  const { setIsOpen, setNFT, setOrder } = useNftCheckoutPopupContext();
+  const { setIsOpen, setNFT, setCollection, setOrder } = useNftCheckoutPopupContext();
+  const { collection } = useNFTPageData();
 
   const updateSectionState = useCallback(async () => {
     if (!isAuthenticated) {
@@ -120,6 +122,7 @@ export const NFTBuySection = ({ NFT, owner, NFTs, order, highestOffer, onMeasure
         setIsOpen(true);
         setOrder(order || {} as IOrder);
         setNFT(NFT || {} as INFT);
+        setCollection(collection || {} as ICollection);
       }} disabled={!canCheckoutOrder} style={{"width": "100%"}}>
         Buy for {listingPrice && listingPrice.length > 7 ? `${listingPrice.substring(0, 5)}...` : listingPrice} {getTokenByAddress((order?.take.assetType as IERC20AssetType).contract).ticker}
       </Button>

diff --git a/src/app/modules/nft/pages/nft-page/components/nft-checkout-popup/NFTCheckoutPopup.tsx b/src/app/modules/nft/pages/nft-page/components/nft-checkout-popup/NFTCheckoutPopup.tsx
@@ -30,7 +30,7 @@ import { Checkbox, InputShadow, Loading, TokenIcon } from '../../../../../../com
 import { NFTType } from './components';
 import { CheckoutState } from './enums';
 import * as styles from './styles';
-import { IERC20AssetType, IERC721AssetType, INFT, IOrder } from '../../../../types';
+import { ICollection, IERC20AssetType, IERC721AssetType, INFT, IOrder } from '../../../../types';
 import { isNFTAssetAudio, isNFTAssetImage, isNFTAssetVideo } from '../../../../helpers';
 import { getTokenByAddress, TOKENS_MAP } from '../../../../../../constants';
 import { TokenTicker } from '../../../../../../enums';
@@ -51,13 +51,14 @@ const { contracts: contractsData } = Contracts[process.env.REACT_APP_NETWORK_CHA
 
 interface INFTCheckoutPopupProps {
   NFT?: INFT;
+  collection?: ICollection;
   NFTs?: INFT[];
   order: IOrder;
   isOpen: boolean;
   onClose: () => void;
 }
 
-export const NFTCheckoutPopup = ({ NFT, NFTs, order, isOpen, onClose }: INFTCheckoutPopupProps) => {
+export const NFTCheckoutPopup = ({ NFT, collection, NFTs, order, isOpen, onClose }: INFTCheckoutPopupProps) => {
   const router = useHistory();
 
   const { address, signer, web3Provider } = useAuthContext() as any;
@@ -191,7 +192,7 @@ export const NFTCheckoutPopup = ({ NFT, NFTs, order, isOpen, onClose }: INFTChec
         const collectionAddress = NFT?._collectionAddress || '';
 
         // Fetch order api until a diffrent response is returned
-        const newNft = await GetNFT2Api(collectionAddress, tokenId);
+        const newNft = await GetNFT2Api(collectionAddress, tokenId, false);
 
         // Change query information about order
         if (NFT?._ownerAddress?.toLowerCase() !== newNft._ownerAddress?.toLowerCase()) {
@@ -334,7 +335,7 @@ export const NFTCheckoutPopup = ({ NFT, NFTs, order, isOpen, onClose }: INFTChec
                     <Box flex={1} p={'20px'}>
                       <Text>{NFT?.name}</Text>
                       <Text {...styles.CollectionNameStyle}>
-                        {NFT?.collection?.name || shortenEthereumAddress(NFT?._collectionAddress)}
+                        {collection?.name || shortenEthereumAddress(NFT?._collectionAddress)}
                       </Text>
                     <Box {...styles.PriceContainerStyle}>
                       <Text fontSize={'14px'}>