fix: setting up a single buy state (#5206)

* setting up a single buy state

src/nft/components/collection/CollectionAsset.tsx

@@ -51,14 +51,13 @@ export const CollectionAsset = ({
   const setBagExpanded = useBag((state) => state.setBagExpanded)
   const trace = useTrace({ page: PageName.NFT_COLLECTION_PAGE })
 
-  const { erc1155TokenQuantity, isSelected } = useMemo(() => {
+  const { isSelected } = useMemo(() => {
     const matchingItems = itemsInBag.filter(
       (item) => asset.tokenId === item.asset.tokenId && asset.address === item.asset.address
     )
-    const erc1155TokenQuantity = matchingItems.filter((x) => x.asset.tokenType === TokenType.ERC1155).length
+
     const isSelected = matchingItems.length > 0
     return {
-      erc1155TokenQuantity,
       isSelected,
     }
   }, [asset, itemsInBag])
@@ -137,9 +136,6 @@ export const CollectionAsset = ({
             showInline
           />
         </StyledContainer>
-        {asset.tokenType === TokenType.ERC1155 && erc1155TokenQuantity > 0 && (
-          <Card.Erc1155Controls quantity={erc1155TokenQuantity.toString()} />
-        )}
         {asset.rarity && provider && (
           <Card.Ranking
             rarity={asset.rarity}

src/nft/components/details/AssetPriceDetails.tsx

@@ -2,9 +2,9 @@ import { useWeb3React } from '@web3-react/core'
 import { OpacityHoverState } from 'components/Common'
 import { useNftBalanceQuery } from 'graphql/data/nft/NftBalance'
 import useCopyClipboard from 'hooks/useCopyClipboard'
-import { CancelListingIcon, MinusIcon, PlusIcon } from 'nft/components/icons'
+import { CancelListingIcon } from 'nft/components/icons'
 import { useBag, useProfilePageState, useSellAsset } from 'nft/hooks'
-import { CollectionInfoForAsset, GenieAsset, ProfilePageStateType, TokenType, WalletAsset } from 'nft/types'
+import { CollectionInfoForAsset, GenieAsset, ProfilePageStateType, WalletAsset } from 'nft/types'
 import { ethNumberStandardFormatter, formatEthPrice, getMarketplaceIcon, timeLeft, useUsdPrice } from 'nft/utils'
 import { shortenAddress } from 'nft/utils/address'
 import { useMemo } from 'react'
@@ -100,43 +100,10 @@ const BuyNowButtonContainer = styled.div`
   position: relative;
 `
 
-const Erc1155BuyNowButton = styled.div`
-  display: grid;
-  grid-template-columns: 1fr 1fr 1fr;
-  width: 100%;
-  background-color: ${({ theme }) => theme.backgroundSurface};
-  border: ${({ theme }) => `1px solid ${theme.backgroundOutline}`};
-  border-radius: 12px;
-  margin-top: 12px;
-  text-align: center;
-  cursor: pointer;
-  justify-content: space-between;
-  overflow-x: hidden;
-`
 const Tertiary = styled(ThemedText.BodySecondary)`
   color: ${({ theme }) => theme.textTertiary};
 `
 
-const Erc1155BuyNowText = styled.div`
-  display: flex;
-  width: 100%;
-  padding: 10px 12px;
-  justify-content: center;
-  cursor: default;
-`
-
-const Erc1155ChangeButton = styled(Erc1155BuyNowText)<{ remove: boolean }>`
-  background-color: ${({ theme, remove }) => (remove ? theme.accentFailureSoft : theme.accentActionSoft)};
-  color: ${({ theme, remove }) => (remove ? theme.accentFailure : theme.accentAction)};
-  cursor: pointer;
-
-  ${hoverState}
-
-  &:hover::after {
-    border-radius: 0px;
-  }
-`
-
 const UploadLink = styled.a`
   color: ${({ theme }) => theme.textSecondary};
   cursor: pointer;
@@ -291,14 +258,10 @@ export const AssetPriceDetails = ({ asset, collection }: AssetPriceDetailsProps)
   const bagExpanded = useBag((s) => s.bagExpanded)
 
   const USDPrice = useUsdPrice(asset)
-  const isErc1555 = asset.tokenType === TokenType.ERC1155
   const [, setCopied] = useCopyClipboard()
 
-  const { quantity, assetInBag } = useMemo(() => {
+  const { assetInBag } = useMemo(() => {
     return {
-      quantity: itemsInBag.filter(
-        (x) => x.asset.tokenType === 'ERC1155' && x.asset.tokenId === asset.tokenId && x.asset.address === asset.address
-      ).length,
       assetInBag: itemsInBag.some(
         (item) => asset.tokenId === item.asset.tokenId && asset.address === item.asset.address
       ),
@@ -353,47 +316,27 @@ export const AssetPriceDetails = ({ asset, collection }: AssetPriceDetailsProps)
               </ThemedText.BodySecondary>
             )}
           </PriceRow>
-          {expirationDate && <Tertiary fontSize="14px">Sale ends: {timeLeft(expirationDate)}</Tertiary>}
+          {expirationDate && expirationDate > new Date() && (
+            <Tertiary fontSize="14px">Sale ends: {timeLeft(expirationDate)}</Tertiary>
+          )}
           <div>
-            {!isErc1555 || !assetInBag ? (
-              <BuyNowButtonContainer>
-                <BuyNowButton
-                  assetInBag={assetInBag}
-                  margin={true}
-                  useAccentColor={true}
-                  onClick={() => {
-                    assetInBag ? removeAssetsFromBag([asset]) : addAssetsToBag([asset])
-                    if (!assetInBag && !isErc1555 && !bagExpanded) {
-                      toggleBag()
-                    }
-                  }}
-                >
-                  <SubHeader color="white" lineHeight="20px">
-                    <span>{assetInBag ? 'Remove' : 'Buy Now'}</span>
-                  </SubHeader>
-                </BuyNowButton>
-              </BuyNowButtonContainer>
-            ) : (
-              <Erc1155BuyNowButton>
-                <BuyNowButtonContainer>
-                  <Erc1155ChangeButton remove={true} onClick={() => removeAssetsFromBag([asset])}>
-                    <MinusIcon width="20px" height="20px" />
-                  </Erc1155ChangeButton>
-                </BuyNowButtonContainer>
-
-                <BuyNowButtonContainer>
-                  <Erc1155BuyNowText>
-                    <ThemedText.SubHeader lineHeight="20px">{quantity}</ThemedText.SubHeader>
-                  </Erc1155BuyNowText>
-                </BuyNowButtonContainer>
-
-                <BuyNowButtonContainer>
-                  <Erc1155ChangeButton remove={false} onClick={() => addAssetsToBag([asset])}>
-                    <PlusIcon width="20px" height="20px" />
-                  </Erc1155ChangeButton>
-                </BuyNowButtonContainer>
-              </Erc1155BuyNowButton>
-            )}
+            <BuyNowButtonContainer>
+              <BuyNowButton
+                assetInBag={assetInBag}
+                margin={true}
+                useAccentColor={true}
+                onClick={() => {
+                  assetInBag ? removeAssetsFromBag([asset]) : addAssetsToBag([asset])
+                  if (!assetInBag && !bagExpanded) {
+                    toggleBag()
+                  }
+                }}
+              >
+                <SubHeader color="white" lineHeight="20px">
+                  <span>{assetInBag ? 'Remove' : 'Buy Now'}</span>
+                </SubHeader>
+              </BuyNowButton>
+            </BuyNowButtonContainer>
           </div>
         </BestPriceContainer>
       ) : (