Merge branch 'main' into o/noun-210-spike-fix-exports

@filter/ClearFilters.tsx

@@ -1,9 +1,11 @@
+import { Button, NounButtonProps } from 'components/Button'
+
 import { useCollectionFilters } from '@filter'
-import { Button, ButtonProps, Flex } from '@zoralabs/zord'
+import { Flex } from '@zoralabs/zord'
 
 import { ActiveFilterCounter } from './ActiveFilterCounter'
 
-export function ClearFilters({ ...props }: ButtonProps) {
+export function ClearFilters({ ...props }: NounButtonProps) {
   const {
     filterStore: { clearFilters, hasFilters },
   } = useCollectionFilters()

@filter/FilterCollectionListItem.tsx

@@ -1,9 +1,11 @@
+import { Button } from 'components/Button'
+
 import { useMemo } from 'react'
 
 import { isAddressMatch, shortenAddress } from '@shared'
 import { numberFormatter } from '@shared'
 import { Zorb } from '@zora-brand'
-import { Box, Button, Flex, Stack, Text, mixins } from '@zoralabs/zord'
+import { Box, Flex, Stack, Text, mixins } from '@zoralabs/zord'
 
 import {
   collectionBlock,

@filter/FilterPriceRange.tsx

@@ -1,6 +1,8 @@
+import { Button } from 'components/Button'
+
 import { useCollectionFilters } from '@filter/providers'
 import { ETH_CURRENCY_SHIM } from '@shared'
-import { Accordion, Box, Button, Stack } from '@zoralabs/zord'
+import { Accordion, Box, Stack } from '@zoralabs/zord'
 
 import { filterOptionsWrapper } from './CollectionsFilter.css'
 import { PriceRangeSelector } from './PriceRangeSelector'

@filter/FilterPropertySelect.tsx

@@ -1,7 +1,9 @@
+import { Button } from 'components/Button'
+
 import { useCallback, useMemo } from 'react'
 
 import { CollectionAttributeValue } from '@zoralabs/zdk/dist/queries/queries-sdk'
-import { Button, Checkbox, Paragraph } from '@zoralabs/zord'
+import { Checkbox, Paragraph } from '@zoralabs/zord'
 
 import { filterPropertySelect } from './CollectionsFilter.css'
 import { useCollectionFilters } from './providers/CollectionFilterProvider'

@filter/FilterSidebar.tsx

@@ -1,11 +1,13 @@
+import { Button } from 'components/Button'
+
 import { useRef, useState } from 'react'
 
 import { useCollectionFilters } from '@filter/providers'
 import { marketStatusOptions, mediaTypeOptions, ownerStatusOptions } from '@filter/state'
 import { Modal, ModalContent, useModal } from '@modal'
 import { useScrollPosition } from '@n8tb1t/use-scroll-position'
 import { useWindowWidth } from '@shared'
-import { Box, Button, Flex, Heading, Icon, Stack } from '@zoralabs/zord'
+import { Box, Flex, Heading, Icon, Stack } from '@zoralabs/zord'
 
 import { ClearFilters } from './ClearFilters'
 import {
@@ -110,8 +112,6 @@ export function FilterSidebar() {
         {useCollectionSearch && !contractAddress ? <CollectionsFilterList /> : null}
         {useSidebarClearButton ? (
           <ClearFilters
-            mt="x2"
-            borderRadius="curved"
             w="100%"
             display={{
               '@initial': 'none',

@filter/MobileFiltersFooter.tsx

@@ -1,12 +1,14 @@
+import { Button } from 'components/Button'
+
 import { useCollectionFilters } from '@filter/providers/CollectionFilterProvider'
-import { Button, Grid } from '@zoralabs/zord'
+import { Grid } from '@zoralabs/zord'
 
 import { ClearFilters } from './ClearFilters'
 import { mobileFiltersFooter } from './CollectionsFilter.css'
 
 export function MobileFiltersFooter() {
   const {
-    filterStore: { showFilters, toggleShowFilters, hasFilters },
+    filterStore: { showFilters, toggleShowFilters },
   } = useCollectionFilters()
 
   if (!showFilters) {
@@ -15,10 +17,8 @@ export function MobileFiltersFooter() {
 
   return (
     <Grid className={[mobileFiltersFooter, 'zora-mobileFilterFooter']}>
-      <ClearFilters borderRadius="curved" />
-      <Button onClick={toggleShowFilters} borderRadius="curved">
-        Done
-      </Button>
+      <ClearFilters />
+      <Button onClick={toggleShowFilters}>Done</Button>
     </Grid>
   )
 }

@filter/SelectedFilters.tsx

@@ -1,3 +1,5 @@
+import { Button } from 'components/Button'
+
 import { useCallback, useMemo } from 'react'
 
 import { FILTER_HEADER_HEIGHT } from '@filter/constants'
@@ -10,7 +12,7 @@ import {
   SelectOption,
   Status,
 } from '@filter/typings'
-import { Button, Flex } from '@zoralabs/zord'
+import { Flex } from '@zoralabs/zord'
 
 import { textButton, textSmall } from './CollectionsFilter.css'
 import { FilterOptionButton } from './FilterOptionButton'

@filter/SortDropdown.tsx

@@ -1,6 +1,6 @@
 import { useCallback, useEffect, useMemo, useRef, useState } from 'react'
 
-import { useClickOutside, useKeyPress } from '@shared'
+import { useClickOutside, useKeyPress } from '@shared/hooks'
 import { Button, Icon, PopUp, Stack, Text } from '@zoralabs/zord'
 
 import { activityButton } from './CollectionsFilter.css'

@filter/hooks/useTokensQuery.ts

@@ -16,7 +16,7 @@ import {
   TokensQueryInput,
 } from '@zoralabs/zdk/dist/queries/queries-sdk'
 
-const PAGE_SIZE = 24
+const PAGE_SIZE = 12 // must be divisible by 2,3,4 to ensure grid stays intact
 
 export interface UseTokenQueryProps {
   contractAllowList?: string[] | undefined
@@ -26,6 +26,7 @@ export interface UseTokenQueryProps {
   sort?: TokenSortInput
   filter?: TokensQueryFilter
   where?: TokensQueryInput
+  initialPageSize?: number
 }
 
 type GetNFTReturnType = {

@filter/providers/CollectionFilterProvider.tsx

@@ -75,7 +75,7 @@ export function CollectionFilterProvider({
     handleLoadMore,
   } = useTokensQuery({
     contractAllowList,
-    contractAddress: contractAddress ? contractAddress : undefined,
+    contractAddress: contractAddress ?? undefined,
     ownerAddress,
     initialData: initialPage,
     sort: sortMethodToSortParams(
@@ -90,22 +90,28 @@ export function CollectionFilterProvider({
     },
   })
 
-  // - Allows us to adjust the options available to users when sorting (eg. no sorting by price when there are no prices!)
-  const tokensHaveActiveMarkets = useMemo(
+  const tokensWithActiveMarkets = useMemo(
     () =>
       items.filter((token) =>
         token.markets?.map((mkt) =>
           [MARKET_INFO_STATUSES.ACTIVE, MARKET_INFO_STATUSES.PENDING].includes(mkt.status)
         )
-      ).length > 0,
+      ),
     [items]
   )
 
+  // - Allows us to adjust the options available to users when sorting (eg. no sorting by price when there are no prices!)
+  const tokensHaveActiveMarkets = useMemo(
+    () => tokensWithActiveMarkets.length > 0,
+    [tokensWithActiveMarkets]
+  )
+
   return (
     <CollectionFilterContext.Provider
       value={{
         filterStore,
         items,
+        // items: tokensWithoutActiveMarkets,
         isValidating,
         isReachingEnd,
         isEmpty,

@market/components/ContractInteractionStatus.tsx

@@ -1,15 +1,8 @@
+import { Button } from 'components/Button'
+
 import { ModalTitleAndDescription } from '@market/components'
 import { ETHERSCAN_BASE_URL, formatCryptoVal, shortenTxHash } from '@shared'
-import {
-  Box,
-  Button,
-  Flex,
-  Label,
-  Paragraph,
-  Separator,
-  Stack,
-  Text,
-} from '@zoralabs/zord'
+import { Box, Flex, Label, Paragraph, Separator, Stack, Text } from '@zoralabs/zord'
 
 interface ContractInteractionStatusProps {
   title: string

@market/components/ERC721ContractApprovalForm.tsx

@@ -1,9 +1,11 @@
+import { Button } from 'components/Button'
+
 import { useCallback, useEffect, useState } from 'react'
 
 import { ModalTitleAndDescription, TransactionSubmitButton } from '@market/components'
 import { useERC721TokenApproval } from '@market/hooks'
 import { PrintError, useContractTransaction } from '@shared'
-import { Box, Button, Grid, Paragraph, Text } from '@zoralabs/zord'
+import { Box, Grid, Paragraph, Stack, Text } from '@zoralabs/zord'
 
 interface ContractApprovalFormProps {
   title: string
@@ -51,7 +53,7 @@ export function ERC721ContractApprovalForm({
   }, [approved, onApproval])
 
   return (
-    <Box>
+    <Stack gap="x4">
       <Box>
         <ModalTitleAndDescription title={title} description={approvalCopy} mb="x2" />
         <a
@@ -67,7 +69,7 @@ export function ERC721ContractApprovalForm({
           </Paragraph>
         </a>
       </Box>
-      {error && <PrintError errorMessage={error} mb="x4" />}
+      {error && <PrintError errorMessage={error} />}
       <Grid style={{ gridTemplateColumns: '1fr 1fr' }} gap="x2">
         <Button disabled={txInProgress} variant="secondary" w="100%" onClick={onBack}>
           Go back
@@ -81,6 +83,6 @@ export function ERC721ContractApprovalForm({
           {buttonCopy}
         </TransactionSubmitButton>
       </Grid>
-    </Box>
+    </Stack>
   )
 }

@market/components/FillV3AskModal.tsx

@@ -1,10 +1,12 @@
-import { Box, Flex, Stack, FlexProps, Button, Heading, Label } from '@zoralabs/zord'
+import { Button } from 'components/Button'
+
+import { FillV3AskWizard, NFTOwner } from '@market/components'
+import { useRelevantMarket } from '@market/hooks'
+import { ModalComposition, useModal } from '@modal'
+import { lightFont, useIsOwner } from '@shared'
 import { MARKET_INFO_STATUSES } from '@zoralabs/nft-hooks/dist/types/NFTInterface'
 import { NFTObject } from '@zoralabs/nft-hooks/dist/types/NFTInterface'
-import { lightFont, useIsOwner } from '@shared'
-import { ModalComposition, useModal } from '@modal'
-import { useRelevantMarket } from '@market/hooks'
-import { FillV3AskWizard, NFTOwner } from '@market/components'
+import { Box, Flex, FlexProps, Heading, Label, Stack } from '@zoralabs/zord'
 
 export interface FillV3AskModalProps extends FlexProps {
   nftObj: NFTObject
@@ -22,7 +24,7 @@ export function FillV3AskModal({ nftObj, ...props }: FillV3AskModalProps) {
   }
 
   return (
-    <Stack flex="1">
+    <Stack flex={1}>
       {ask && ask.status === MARKET_INFO_STATUSES.ACTIVE ? (
         <Flex
           id="v3-ask-active"
@@ -43,13 +45,9 @@ export function FillV3AskModal({ nftObj, ...props }: FillV3AskModalProps) {
           {!isOwner ? (
             <ModalComposition
               modalName={`buy-${nft.contract.address}-${nft.tokenId}`}
+              modalBehaviorRequiresAuth={true}
               trigger={
-                <Button
-                  as="span"
-                  size="md"
-                  borderRadius="curved"
-                  className="zora-market-cardMarketTrigger"
-                >
+                <Button as="span" size="md" className="zora-market-cardMarketTrigger">
                   Buy
                 </Button>
               }
@@ -66,12 +64,7 @@ export function FillV3AskModal({ nftObj, ...props }: FillV3AskModalProps) {
                       nftObj={nftObj}
                       onClose={requestClose}
                       cancelButton={
-                        <Button
-                          onClick={requestClose}
-                          w="100%"
-                          variant="secondary"
-                          borderRadius="curved"
-                        >
+                        <Button onClick={requestClose} w="100%" variant="secondary">
                           Cancel
                         </Button>
                       }
@@ -81,7 +74,7 @@ export function FillV3AskModal({ nftObj, ...props }: FillV3AskModalProps) {
               }
             />
           ) : (
-            <Button disabled borderRadius="curved" size="md" variant="outline">
+            <Button disabled size="md" variant="outline">
               On Sale
             </Button>
           )}

@market/components/FillV3AskWizard.tsx

@@ -1,15 +1,16 @@
 import { useCallback, useMemo, useState } from 'react'
+
 import { AddressZero } from '@ethersproject/constants'
-import { Box, Separator, Grid } from '@zoralabs/zord'
-import { PrintError, useContractTransaction, useAuth, isAddressMatch } from '@shared'
 import {
-  TransactionSubmitButton,
   ContractInteractionStatus,
-  NFTSummary,
   MODAL_TYPES,
+  NFTSummary,
+  TransactionSubmitButton,
 } from '@market/components'
 import { useContractContext } from '@market/providers'
 import * as Sentry from '@sentry/react'
+import { PrintError, isAddressMatch, useAuth, useContractTransaction } from '@shared'
+import { Box, Grid, Separator } from '@zoralabs/zord'
 
 export type FillV3AskWizardProps = {
   tokenId: string
@@ -41,7 +42,7 @@ export function FillV3AskWizard({
 
   const hasSufficientFunds = useMemo(
     () => walletBalance?.value.gte(askPrice),
-    [askPrice, walletBalance, walletBalance?.value]
+    [askPrice, walletBalance?.value]
   )
 
   const [wizardStep, setWizardStep] = useState<FillV3AskWizardStep>('ReviewDetails')

@market/components/ListV3AskWizard.tsx

@@ -1,15 +1,18 @@
+import { Button } from 'components/Button'
+
 import { useCallback, useState } from 'react'
-import { Stack, Button, Paragraph } from '@zoralabs/zord'
+
 import {
+  ContractInteractionStatus,
   ERC721ContractApprovalForm,
   ListV3AskForm,
-  V3ApprovalForm,
-  ContractInteractionStatus,
-  NFTSummary,
   MODAL_TYPES,
+  NFTSummary,
+  V3ApprovalForm,
 } from '@market/components'
-import { ASKS_V11_ADDRESS, ERC721_TRANSFER_HELPER_ADDRESS } from '@shared'
 import { useERC721TokenApproval, useZoraV3ModuleApproval } from '@market/hooks'
+import { ASKS_V11_ADDRESS, ERC721_TRANSFER_HELPER_ADDRESS } from '@shared'
+import { Paragraph, Stack } from '@zoralabs/zord'
 
 type ListNFTStep =
   | 'CheckApprovals'

@market/components/NFTOwner.tsx

@@ -1,5 +1,6 @@
-import { Stack, Label } from '@zoralabs/zord'
 import { lightFont } from '@shared'
+import { Label, Stack } from '@zoralabs/zord'
+
 import { AddressWithLink } from './AddressWithLink'
 
 export function NFTOwner({
@@ -18,7 +19,7 @@ export function NFTOwner({
     <Stack
       align={align === 'left' ? 'flex-start' : 'flex-end'}
       justify="space-between"
-      flex="1"
+      flex={1}
     >
       <Label size="lg" align={align} className={lightFont} color="text3">
         Owned by

@market/components/NFTSummary.tsx

@@ -1,9 +1,10 @@
 import { useMemo } from 'react'
-import { useNFT } from '@zoralabs/nft-hooks'
-import { Flex, Stack } from '@zoralabs/zord'
+
 import { FillV3AskInfo, ModalTitleAndDescription } from '@market/components'
-import { useAuth, useTitleWithFallback } from '@shared'
 import { CollectionThumbnail } from '@media/CollectionThumbnail'
+import { useAuth, useTitleWithFallback } from '@shared/hooks'
+import { useNFT } from '@zoralabs/nft-hooks'
+import { Flex, Stack } from '@zoralabs/zord'
 
 export enum MODAL_TYPES {
   list = 'list',