chore: updating purchasable markets from activity (#6443)

* updating purchasable markets from activity

* renaming

* adding trans + refactor

* snapshot test

* removing snapshot test and only matchin test

* deleting snap

src/nft/components/collection/ActivityCells.test.tsx

+import { TEST_NFT_ACTIVITY_EVENT } from 'test-utils/constants'
+import { render, screen } from 'test-utils/render'
+
+import { BuyCell } from './ActivityCells'
+
+// TODO: add snapshot matching test when VE works with snapshot testing
+describe('BuyCell', () => {
+  it('renders add to bag button', async () => {
+    render(
+      <BuyCell
+        event={TEST_NFT_ACTIVITY_EVENT}
+        collectionName="Azuki"
+        selectAsset={() => undefined}
+        removeAsset={() => undefined}
+        itemsInBag={[]}
+        cartExpanded={false}
+        toggleCart={() => undefined}
+        isMobile={false}
+        ethPriceInUSD={0}
+      />
+    )
+    expect(await screen.findByText(/Add to Bag/i)).toBeInTheDocument()
+  })
+})

src/nft/components/collection/ActivityCells.tsx

+import { Trans } from '@lingui/macro'
 import { sendAnalyticsEvent, useTrace } from '@uniswap/analytics'
 import { InterfacePageName, NFTEventName } from '@uniswap/analytics-events'
 import { ChainId } from '@uniswap/smart-order-router'
 import { MouseoverTooltip } from 'components/Tooltip'
-import { NftActivityType, OrderStatus } from 'graphql/data/__generated__/types-and-hooks'
+import { NftActivityType, NftMarketplace, OrderStatus } from 'graphql/data/__generated__/types-and-hooks'
 import { Box } from 'nft/components/Box'
 import { Column, Row } from 'nft/components/Flex'
 import {
@@ -29,7 +30,7 @@ import { buildActivityAsset } from 'nft/utils/buildActivityAsset'
 import { formatEth } from 'nft/utils/currency'
 import { getTimeDifference } from 'nft/utils/date'
 import { putCommas } from 'nft/utils/putCommas'
-import { MouseEvent, useMemo, useState } from 'react'
+import { MouseEvent, ReactNode, useMemo, useState } from 'react'
 import styled from 'styled-components/macro'
 import { ExternalLink } from 'theme'
 import { ExplorerDataType, getExplorerLink } from 'utils/getExplorerLink'
@@ -57,18 +58,31 @@ const AddressLink = styled(ExternalLink)`
   }
 `
 
-const formatListingStatus = (status: OrderStatus): string => {
+const isPurchasableOrder = (orderStatus?: OrderStatus, marketplace?: string): boolean => {
+  if (!marketplace || !orderStatus) return false
+  const purchasableMarkets = Object.keys(NftMarketplace).map((market) => market.toLowerCase())
+
+  const validOrder = orderStatus === OrderStatus.Valid
+  const isPurchasableMarket = purchasableMarkets.includes(marketplace.toLowerCase())
+  return validOrder && isPurchasableMarket
+}
+
+const formatListingStatus = (status: OrderStatus, orderIsPurchasable: boolean, isSelected: boolean): ReactNode => {
+  if (orderIsPurchasable) {
+    return isSelected ? <Trans>Remove</Trans> : <Trans>Add to bag</Trans>
+  }
+
   switch (status) {
     case OrderStatus.Executed:
-      return 'Sold'
+      return <Trans>Sold</Trans>
     case OrderStatus.Cancelled:
-      return 'Cancelled'
+      return <Trans>Cancelled</Trans>
     case OrderStatus.Expired:
-      return 'Expired'
+      return <Trans>Expired</Trans>
     case OrderStatus.Valid:
-      return 'Add to Bag'
+      return <Trans>Unavailable</Trans>
     default:
-      return ''
+      return null
   }
 }
 
@@ -103,6 +117,7 @@ export const BuyCell = ({
     return itemsInBag.some((item) => asset.tokenId === item.asset.tokenId && asset.address === item.asset.address)
   }, [asset, itemsInBag])
 
+  const orderIsPurchasable = isPurchasableOrder(event.orderStatus, event.marketplace)
   const trace = useTrace({ page: InterfacePageName.NFT_COLLECTION_PAGE })
   const eventProperties = {
     collection_address: asset.address,
@@ -116,20 +131,16 @@ export const BuyCell = ({
       {event.eventType === NftActivityType.Listing && event.orderStatus ? (
         <Box
           as="button"
-          className={event.orderStatus === OrderStatus.Valid && isSelected ? styles.removeCell : styles.buyCell}
+          className={orderIsPurchasable && isSelected ? styles.removeCell : styles.buyCell}
           onClick={(e: MouseEvent) => {
             e.preventDefault()
             isSelected ? removeAsset([asset]) : selectAsset([asset])
             !isSelected && !cartExpanded && !isMobile && toggleCart()
             !isSelected && sendAnalyticsEvent(NFTEventName.NFT_BUY_ADDED, { eventProperties })
           }}
-          disabled={event.orderStatus !== OrderStatus.Valid}
+          disabled={!orderIsPurchasable}
         >
-          {event.orderStatus === OrderStatus.Valid ? (
-            <>{`${isSelected ? 'Remove' : 'Add to bag'}`}</>
-          ) : (
-            <>{`${formatListingStatus(event.orderStatus)}`}</>
-          )}
+          {formatListingStatus(event.orderStatus, orderIsPurchasable, isSelected)}
         </Box>
       ) : (
         '-'

src/test-utils/constants.ts

 import { CurrencyAmount, Percent, Token, TradeType } from '@uniswap/sdk-core'
 import { V3Route } from '@uniswap/smart-order-router'
 import { FeeAmount, Pool } from '@uniswap/v3-sdk'
-import { NftStandard } from 'graphql/data/__generated__/types-and-hooks'
+import { NftActivityType, NftStandard, OrderStatus } from 'graphql/data/__generated__/types-and-hooks'
 import JSBI from 'jsbi'
-import { GenieAsset, Markets, WalletAsset } from 'nft/types'
+import { ActivityEvent, GenieAsset, Markets, WalletAsset } from 'nft/types'
 import { InterfaceTrade } from 'state/routing/types'
 
 export const TEST_TOKEN_1 = new Token(1, '0x0000000000000000000000000000000000000001', 18, 'ABC', 'Abc')
@@ -125,3 +125,32 @@ export const TEST_NFT_WALLET_ASSET: WalletAsset = {
   date_acquired: '1682024661',
   sellOrders: [],
 }
+
+export const TEST_NFT_ACTIVITY_EVENT: ActivityEvent = {
+  collectionAddress: '0xed5af388653567af2f388e6224dc7c4b3241c544',
+  tokenId: '5674',
+  tokenMetadata: {
+    name: 'Azuki #5674',
+    imageUrl:
+      'https://cdn.center.app/1/0xED5AF388653567Af2F388E6224dC7C4b3241C544/5674/b2e5cb241d4a28bb3688ff6ae12f2d60c9850721f35f5104b5c42b31511e8a42.png',
+    smallImageUrl: 'https://i.seadn.io/gcs/files/e2dabe8f353ed6354f5a1927e3d8bd64.png?w=500&auto=format',
+    metadataUrl: 'ipfs://QmZcH4YvBVVRJtdn4RdbaqgspFU8gH6P9vomDpBVpAL3u4/5674',
+    rarity: {
+      source: 'RARITY_SNIPER',
+      rank: 9412,
+      score: 2778,
+    },
+    suspiciousFlag: false,
+    standard: NftStandard.Erc721,
+  },
+  eventType: NftActivityType.Listing,
+  marketplace: 'OPENSEA',
+  fromAddress: '0xbf9fda32692b25c6083cbe48399ef019b62f0712',
+  toAddress: undefined,
+  transactionHash: undefined,
+  price: '15.2',
+  orderStatus: OrderStatus.Valid,
+  quantity: 1,
+  url: 'https://opensea.io/assets/0xed5af388653567af2f388e6224dc7c4b3241c544/5674',
+  eventTimestamp: 1682444662,
+}