feat: [ListV2] Update price and duration dropdowns (#5925)

* add custom option and style market dropdown

* working dropdown for price

* hide dropdown on mobile

* update duration dropdown

* themed opacity hover

---------
Co-authored-by: Charles Bachmeier <charlie@genie.xyz>

src/nft/components/profile/list/Dropdown.tsx

+import Column from 'components/Column'
+import Row from 'components/Row'
+import { DropDownOption } from 'nft/types'
+import { Check } from 'react-feather'
+import styled, { useTheme } from 'styled-components/macro'
+import { ThemedText } from 'theme'
+
+const DropdownWrapper = styled(Column)<{ $width: number }>`
+  gap: 4px;
+  background: ${({ theme }) => theme.backgroundSurface};
+  padding: 8px;
+  width: ${({ $width }) => $width}px;
+  border-radius: 12px;
+  box-shadow: ${({ theme }) => theme.deepShadow};
+  border: 1px solid ${({ theme }) => theme.backgroundOutline};
+`
+
+const DropdownRow = styled(Row)`
+  justify-content: space-between;
+  padding: 8px;
+  cursor: pointer;
+  border-radius: 12px;
+
+  &:hover {
+    background: ${({ theme }) => theme.backgroundInteractive};
+  }
+`
+
+interface DropdownArgs {
+  dropDownOptions: DropDownOption[]
+  width: number
+}
+
+export const Dropdown = ({ dropDownOptions, width }: DropdownArgs) => {
+  const theme = useTheme()
+  return (
+    <DropdownWrapper $width={width}>
+      {dropDownOptions.map((option) => (
+        <DropdownRow key={option.displayText} onClick={option.onClick}>
+          <ThemedText.BodyPrimary lineHeight="24px">{option.displayText}</ThemedText.BodyPrimary>
+          {option.isSelected && <Check height={20} width={20} color={theme.accentAction} />}
+        </DropdownRow>
+      ))}
+    </DropdownWrapper>
+  )
+}

src/nft/components/profile/list/MarketplaceRow.tsx

@@ -135,7 +135,7 @@ export const MarketplaceRow = ({
     if (globalPriceMethod === SetPriceMethod.FLOOR_PRICE) {
       setListPrice(asset?.floorPrice)
       setGlobalPrice(asset.floorPrice)
-    } else if (globalPriceMethod === SetPriceMethod.PREV_LISTING) {
+    } else if (globalPriceMethod === SetPriceMethod.LAST_PRICE) {
       setListPrice(asset.lastPrice)
       setGlobalPrice(asset.lastPrice)
     } else if (globalPriceMethod === SetPriceMethod.SAME_PRICE)

src/nft/components/profile/list/NFTListingsGrid.tsx

 import { Trans } from '@lingui/macro'
 // eslint-disable-next-line no-restricted-imports
-import { t } from '@lingui/macro'
 import Column from 'components/Column'
 import Row from 'components/Row'
-import { SortDropdown } from 'nft/components/common/SortDropdown'
+import { useOnClickOutside } from 'hooks/useOnClickOutside'
 import { useSellAsset } from 'nft/hooks'
 import { DropDownOption, ListingMarket } from 'nft/types'
-import { useMemo, useState } from 'react'
+import { useMemo, useReducer, useRef, useState } from 'react'
+import { ChevronDown } from 'react-feather'
 import styled, { css } from 'styled-components/macro'
 import { BREAKPOINTS } from 'theme'
 
+import { Dropdown } from './Dropdown'
 import { NFTListRow } from './NFTListRow'
 
 const TableHeader = styled.div`
@@ -28,11 +29,7 @@ const TableHeader = styled.div`
 `
 
 const NFTHeader = styled.div`
-  flex: 2;
-
-  @media screen and (min-width: ${BREAKPOINTS.md}px) {
-    flex: 1.5;
-  }
+  flex: 1.5;
 `
 
 const PriceHeaders = styled(Row)`
@@ -52,8 +49,52 @@ const PriceInfoHeader = styled.div`
   }
 `
 
-const DropdownWrapper = styled.div`
+const DropdownAndHeaderWrapper = styled(Row)`
   flex: 2;
+  gap: 4px;
+`
+
+const DropdownPromptContainer = styled(Column)`
+  position: relative;
+  @media screen and (max-width: ${BREAKPOINTS.sm}px) {
+    display: none;
+  }
+`
+
+const DropdownPrompt = styled(Row)`
+  gap: 4px;
+  background-color: ${({ theme }) => theme.backgroundInteractive};
+  cursor: pointer;
+  font-weight: 600;
+  font-size: 12px;
+  line-height: 16px;
+  border-radius: 4px;
+  padding: 2px 6px;
+  width: min-content;
+  white-space: nowrap;
+  color: ${({ theme }) => theme.textPrimary};
+
+  &:hover {
+    opacity: ${({ theme }) => theme.opacity.hover};
+  }
+`
+
+const DropdownChevron = styled(ChevronDown)<{ isOpen: boolean }>`
+  height: 16px;
+  width: 16px;
+  color: ${({ theme }) => theme.textSecondary};
+  transform: ${({ isOpen }) => isOpen && 'rotate(180deg)'};
+  transition: ${({
+    theme: {
+      transition: { duration, timing },
+    },
+  }) => `transform ${duration.fast} ${timing.ease}`};
+`
+
+const DropdownContainer = styled.div`
+  position: absolute;
+  top: 36px;
+  right: 0px;
 `
 
 const FeeUserReceivesSharedStyles = css`
@@ -86,32 +127,74 @@ const RowDivider = styled.hr`
 export enum SetPriceMethod {
   SAME_PRICE,
   FLOOR_PRICE,
-  PREV_LISTING,
+  LAST_PRICE,
+  CUSTOM,
 }
 
 export const NFTListingsGrid = ({ selectedMarkets }: { selectedMarkets: ListingMarket[] }) => {
   const sellAssets = useSellAsset((state) => state.sellAssets)
-  const [globalPriceMethod, setGlobalPriceMethod] = useState<SetPriceMethod>()
+  const [globalPriceMethod, setGlobalPriceMethod] = useState(SetPriceMethod.CUSTOM)
   const [globalPrice, setGlobalPrice] = useState<number>()
+  const [showDropdown, toggleShowDropdown] = useReducer((s) => !s, false)
+  const dropdownRef = useRef<HTMLDivElement>(null)
+  useOnClickOutside(dropdownRef, showDropdown ? toggleShowDropdown : undefined)
 
   const priceDropdownOptions: DropDownOption[] = useMemo(
     () => [
       {
-        displayText: 'Same price',
-        onClick: () => setGlobalPriceMethod(SetPriceMethod.SAME_PRICE),
+        displayText: 'Custom',
+        isSelected: globalPriceMethod === SetPriceMethod.CUSTOM,
+        onClick: () => {
+          setGlobalPriceMethod(SetPriceMethod.CUSTOM)
+          toggleShowDropdown()
+        },
       },
       {
         displayText: 'Floor price',
-        onClick: () => setGlobalPriceMethod(SetPriceMethod.FLOOR_PRICE),
+        isSelected: globalPriceMethod === SetPriceMethod.FLOOR_PRICE,
+        onClick: () => {
+          setGlobalPriceMethod(SetPriceMethod.FLOOR_PRICE)
+          toggleShowDropdown()
+        },
       },
       {
-        displayText: 'Prev. listing',
-        onClick: () => setGlobalPriceMethod(SetPriceMethod.PREV_LISTING),
+        displayText: 'Last price',
+        isSelected: globalPriceMethod === SetPriceMethod.LAST_PRICE,
+        onClick: () => {
+          setGlobalPriceMethod(SetPriceMethod.LAST_PRICE)
+          toggleShowDropdown()
+        },
+      },
+      {
+        displayText: 'Same price',
+        isSelected: globalPriceMethod === SetPriceMethod.SAME_PRICE,
+        onClick: () => {
+          setGlobalPriceMethod(SetPriceMethod.SAME_PRICE)
+          toggleShowDropdown()
+        },
       },
     ],
-    []
+    [globalPriceMethod]
   )
 
+  let prompt
+  switch (globalPriceMethod) {
+    case SetPriceMethod.CUSTOM:
+      prompt = <Trans>Custom</Trans>
+      break
+    case SetPriceMethod.FLOOR_PRICE:
+      prompt = <Trans>Floor price</Trans>
+      break
+    case SetPriceMethod.LAST_PRICE:
+      prompt = <Trans>Last Price</Trans>
+      break
+    case SetPriceMethod.SAME_PRICE:
+      prompt = <Trans>Same Price</Trans>
+      break
+    default:
+      break
+  }
+
   return (
     <Column>
       <TableHeader>
@@ -126,9 +209,19 @@ export const NFTListingsGrid = ({ selectedMarkets }: { selectedMarkets: ListingM
             <Trans>Last</Trans>
           </PriceInfoHeader>
 
-          <DropdownWrapper>
-            <SortDropdown dropDownOptions={priceDropdownOptions} mini miniPrompt={t`Set price by`} />
-          </DropdownWrapper>
+          <DropdownAndHeaderWrapper ref={dropdownRef}>
+            <Trans>Price</Trans>
+            <DropdownPromptContainer>
+              <DropdownPrompt onClick={toggleShowDropdown}>
+                {prompt} <DropdownChevron isOpen={showDropdown} />
+              </DropdownPrompt>
+              {showDropdown && (
+                <DropdownContainer>
+                  <Dropdown dropDownOptions={priceDropdownOptions} width={200} />
+                </DropdownContainer>
+              )}
+            </DropdownPromptContainer>
+          </DropdownAndHeaderWrapper>
 
           <FeeHeader>
             <Trans>Fees</Trans>

src/nft/components/profile/list/SelectMarketplacesDropdown.tsx

@@ -79,10 +79,10 @@ const HeaderButtonWrap = styled(Row)`
   border-radius: 12px;
   width: 180px;
   justify-content: space-between;
-  background: ${({ theme }) => theme.backgroundModule};
+  background: ${({ theme }) => theme.backgroundInteractive};
   cursor: pointer;
   &:hover {
-    background-color: ${({ theme }) => theme.backgroundInteractive};
+    opacity: ${({ theme }) => theme.opacity.hover};
   }
   @media screen and (min-width: ${SMALL_MEDIA_BREAKPOINT}) {
     width: 220px;
@@ -124,7 +124,7 @@ const ModalWrapper = styled.div`
 
 const DropdownWrapper = styled(Column)<{ isOpen: boolean }>`
   padding: 16px 0px;
-  background-color: ${({ theme }) => theme.backgroundModule};
+  background-color: ${({ theme }) => theme.backgroundSurface};
   display: ${({ isOpen }) => (isOpen ? 'flex' : 'none')};
   position: absolute;
   top: 52px;

src/nft/components/profile/list/SetDurationModal.tsx

+import { Plural } from '@lingui/macro'
+import { useOnClickOutside } from 'hooks/useOnClickOutside'
 import ms from 'ms.macro'
-import { SortDropdown } from 'nft/components/common/SortDropdown'
 import { Column, Row } from 'nft/components/Flex'
 import { NumericInput } from 'nft/components/layout/Input'
-import { bodySmall, buttonTextMedium, caption } from 'nft/css/common.css'
+import { bodySmall, caption } from 'nft/css/common.css'
 import { useSellAsset } from 'nft/hooks'
 import { DropDownOption } from 'nft/types'
-import { pluralize } from 'nft/utils/roundAndPluralize'
-import { useEffect, useMemo, useState } from 'react'
-import { AlertTriangle } from 'react-feather'
+import { useEffect, useMemo, useReducer, useRef, useState } from 'react'
+import { AlertTriangle, ChevronDown } from 'react-feather'
 import styled from 'styled-components/macro'
-import { ThemedText } from 'theme'
+import { Z_INDEX } from 'theme/zIndex'
+
+import { Dropdown } from './Dropdown'
 
 const ModalWrapper = styled(Column)`
   gap: 4px;
@@ -25,17 +27,41 @@ const InputWrapper = styled(Row)<{ isInvalid: boolean }>`
   border-color: ${({ isInvalid, theme }) => (isInvalid ? theme.accentCritical : theme.backgroundOutline)};
 `
 
-const DropdownWrapper = styled(ThemedText.BodyPrimary)`
+const DropdownPrompt = styled(Row)`
+  gap: 4px;
+  background-color: ${({ theme }) => theme.backgroundInteractive};
   cursor: pointer;
-  display: flex;
-  justify-content: flex-end;
-  height: min-content;
-  width: 80px;
+  font-weight: 600;
+  font-size: 12px;
+  line-height: 16px;
+  border-radius: 8px;
+  padding: 6px 4px 6px 8px;
+  width: min-content;
+  white-space: nowrap;
+  color: ${({ theme }) => theme.textPrimary};
+
   &:hover {
-    background-color: ${({ theme }) => theme.backgroundInteractive};
+    opacity: ${({ theme }) => theme.opacity.hover};
   }
-  border-radius: 12px;
-  padding: 8px;
+`
+
+const DropdownChevron = styled(ChevronDown)<{ isOpen: boolean }>`
+  height: 16px;
+  width: 16px;
+  color: ${({ theme }) => theme.textSecondary};
+  transform: ${({ isOpen }) => isOpen && 'rotate(180deg)'};
+  transition: ${({
+    theme: {
+      transition: { duration, timing },
+    },
+  }) => `transform ${duration.fast} ${timing.ease}`};
+`
+
+const DropdownContainer = styled.div`
+  position: absolute;
+  top: 48px;
+  right: 0px;
+  z-index: ${Z_INDEX.dropdown};
 `
 
 const ErrorMessage = styled(Row)`
@@ -65,39 +91,73 @@ enum ErrorState {
 
 export const SetDurationModal = () => {
   const [duration, setDuration] = useState(Duration.day)
-  const [displayDuration, setDisplayDuration] = useState(Duration.day)
   const [amount, setAmount] = useState('7')
   const [errorState, setErrorState] = useState(ErrorState.valid)
   const setGlobalExpiration = useSellAsset((state) => state.setGlobalExpiration)
+  const [showDropdown, toggleShowDropdown] = useReducer((s) => !s, false)
+  const durationDropdownRef = useRef<HTMLDivElement>(null)
+  useOnClickOutside(durationDropdownRef, showDropdown ? toggleShowDropdown : undefined)
+
   const setCustomExpiration = (event: React.ChangeEvent<HTMLInputElement>) => {
     setAmount(event.target.value.length ? event.target.value : '')
-    setDuration(displayDuration)
-  }
-  const selectDuration = (duration: Duration) => {
-    setDuration(duration)
-    setDisplayDuration(duration)
   }
+
   const durationOptions: DropDownOption[] = useMemo(
     () => [
       {
-        displayText: 'Hours',
-        onClick: () => selectDuration(Duration.hour),
+        displayText: 'hours',
+        isSelected: duration === Duration.hour,
+        onClick: () => {
+          setDuration(Duration.hour)
+          toggleShowDropdown()
+        },
       },
       {
-        displayText: 'Days',
-        onClick: () => selectDuration(Duration.day),
+        displayText: 'days',
+        isSelected: duration === Duration.day,
+        onClick: () => {
+          setDuration(Duration.day)
+          toggleShowDropdown()
+        },
       },
       {
-        displayText: 'Weeks',
-        onClick: () => selectDuration(Duration.week),
+        displayText: 'weeks',
+        isSelected: duration === Duration.week,
+        onClick: () => {
+          setDuration(Duration.week)
+          toggleShowDropdown()
+        },
       },
       {
-        displayText: 'Months',
-        onClick: () => selectDuration(Duration.month),
+        displayText: 'months',
+        isSelected: duration === Duration.month,
+        onClick: () => {
+          setDuration(Duration.month)
+          toggleShowDropdown()
+        },
       },
     ],
-    []
+    [duration]
   )
+
+  let prompt
+  switch (duration) {
+    case Duration.hour:
+      prompt = <Plural value={amount} _1="hour" other="hours" />
+      break
+    case Duration.day:
+      prompt = <Plural value={amount} _1="day" other="days" />
+      break
+    case Duration.week:
+      prompt = <Plural value={amount} _1="week" other="weeks" />
+      break
+    case Duration.month:
+      prompt = <Plural value={amount} _1="month" other="months" />
+      break
+    default:
+      break
+  }
+
   useEffect(() => {
     const expiration = convertDurationToExpiration(parseFloat(amount), duration)
 
@@ -108,7 +168,7 @@ export const SetDurationModal = () => {
   }, [amount, duration, setGlobalExpiration])
 
   return (
-    <ModalWrapper>
+    <ModalWrapper ref={durationDropdownRef}>
       <InputWrapper isInvalid={errorState !== ErrorState.valid}>
         <NumericInput
           as="input"
@@ -124,15 +184,14 @@ export const SetDurationModal = () => {
           onChange={setCustomExpiration}
           flexShrink="0"
         />
-        <DropdownWrapper className={buttonTextMedium}>
-          <SortDropdown
-            dropDownOptions={durationOptions}
-            mini
-            miniPrompt={displayDuration + (displayDuration === duration ? pluralize(parseFloat(amount)) : 's')}
-            left={38}
-            top={38}
-          />
-        </DropdownWrapper>
+        <DropdownPrompt onClick={toggleShowDropdown}>
+          {prompt} <DropdownChevron isOpen={showDropdown} />
+        </DropdownPrompt>
+        {showDropdown && (
+          <DropdownContainer>
+            <Dropdown dropDownOptions={durationOptions} width={125} />
+          </DropdownContainer>
+        )}
       </InputWrapper>
       {errorState !== ErrorState.valid && (
         <ErrorMessage className={caption}>

src/nft/types/common/common.ts

@@ -171,6 +171,7 @@ export interface DropDownOption {
   reverseIndex?: number
   reverseOnClick?: () => void
   sortBy?: SortBy
+  isSelected?: boolean
 }
 
 export enum DetailsOrigin {