feat: Collection Activity mobile fixes (#5073)

src/nft/components/collection/Activity.css.ts

@@ -29,7 +29,7 @@ export const eventRow = style([
   baseRow,
   sprinkles({
     paddingY: '12',
-    paddingX: '16',
+    paddingX: { sm: '4', md: '16' },
     color: 'textPrimary',
     cursor: 'pointer',
     borderWidth: '1px',

src/nft/components/collection/Activity.tsx

@@ -156,11 +156,19 @@ export const Activity = ({ contractAddress, rarityVerified, collectionName, chai
           >
             {events.map((event, i) => (
               <Box as="a" href={baseHref(event)} className={styles.eventRow} key={i}>
-                <ItemCell event={event} rarityVerified={rarityVerified} collectionName={collectionName} />
+                <ItemCell
+                  event={event}
+                  rarityVerified={rarityVerified}
+                  collectionName={collectionName}
+                  eventTimestamp={event.eventTimestamp}
+                  isMobile={isMobile}
+                />
                 <EventCell
                   eventType={event.eventType}
                   eventTimestamp={event.eventTimestamp}
                   eventTransactionHash={event.transactionHash}
+                  price={event.price}
+                  isMobile={isMobile}
                 />
                 <PriceCell marketplace={event.marketplace} price={event.price} />
                 <AddressCell address={event.fromAddress} chainId={chainId} />

src/nft/components/collection/ActivityCells.tsx

@@ -204,6 +204,8 @@ interface EventCellProps {
   eventType: ActivityEventType
   eventTimestamp?: number
   eventTransactionHash?: string
+  price?: string
+  isMobile: boolean
 }
 
 const renderEventIcon = (eventType: ActivityEventType) => {
@@ -241,19 +243,21 @@ const eventColors = (eventType: ActivityEventType) => {
   return activityEvents[eventType] as 'gold' | 'green' | 'violet' | 'accentFailure'
 }
 
-export const EventCell = ({ eventType, eventTimestamp, eventTransactionHash }: EventCellProps) => {
+export const EventCell = ({ eventType, eventTimestamp, eventTransactionHash, price, isMobile }: EventCellProps) => {
+  const formattedPrice = useMemo(() => (price ? putCommas(formatEthPrice(price))?.toString() : null), [price])
   return (
     <Column height="full" justifyContent="center" gap="4">
       <Row className={styles.eventDetail} color={eventColors(eventType)}>
         {renderEventIcon(eventType)}
         {ActivityEventTypeDisplay[eventType]}
       </Row>
-      {eventTimestamp && isValidDate(eventTimestamp) && (
+      {eventTimestamp && isValidDate(eventTimestamp) && !isMobile && (
         <Row className={styles.eventTime}>
           {getTimeDifference(eventTimestamp.toString())}
           {eventTransactionHash && <ExternalLinkIcon transactionHash={eventTransactionHash} />}
         </Row>
       )}
+      {isMobile && price && <Row fontSize="16" fontWeight="normal" color="textPrimary">{`${formattedPrice} ETH`}</Row>}
     </Column>
   )
 }
@@ -262,6 +266,8 @@ interface ItemCellProps {
   event: ActivityEvent
   rarityVerified: boolean
   collectionName: string
+  isMobile: boolean
+  eventTimestamp?: number
 }
 
 const NoContentContainer = () => (
@@ -335,7 +341,7 @@ const getItemImage = (tokenMetadata?: TokenMetadata): string | undefined => {
   return tokenMetadata?.smallImageUrl || tokenMetadata?.imageUrl
 }
 
-export const ItemCell = ({ event, rarityVerified, collectionName }: ItemCellProps) => {
+export const ItemCell = ({ event, rarityVerified, collectionName, eventTimestamp, isMobile }: ItemCellProps) => {
   const [loaded, setLoaded] = useState(false)
   const [noContent, setNoContent] = useState(!getItemImage(event.tokenMetadata))
 
@@ -359,13 +365,14 @@ export const ItemCell = ({ event, rarityVerified, collectionName }: ItemCellProp
       )}
       <Column height="full" justifyContent="center" overflow="hidden" whiteSpace="nowrap" marginRight="24">
         <Box className={styles.detailsName}>{event.tokenMetadata?.name || event.tokenId}</Box>
-        {event.tokenMetadata?.rarity && (
+        {event.tokenMetadata?.rarity && !isMobile && (
           <Ranking
             rarity={event.tokenMetadata?.rarity}
             rarityVerified={rarityVerified}
             collectionName={collectionName}
           />
         )}
+        {isMobile && eventTimestamp && isValidDate(eventTimestamp) && getTimeDifference(eventTimestamp.toString())}
       </Column>
     </Row>
   )

src/nft/types/collection/collection.ts

@@ -48,10 +48,10 @@ export enum ActivityEventType {
 }
 
 export enum ActivityEventTypeDisplay {
-  'LISTING' = 'Listing',
-  'SALE' = 'Sale',
-  'TRANSFER' = 'Transfer',
-  'CANCEL_LISTING' = 'Cancel',
+  'LISTING' = 'Listed',
+  'SALE' = 'Sold',
+  'TRANSFER' = 'Transferred',
+  'CANCEL_LISTING' = 'Cancelled',
 }
 
 export enum OrderStatus {