diff --git a/src/components/MultiSelectActions.tsx b/src/components/MultiSelectActions.tsx index b7168cc90..194ccd13a 100644 --- a/src/components/MultiSelectActions.tsx +++ b/src/components/MultiSelectActions.tsx @@ -7,11 +7,13 @@ import { useWalletState } from '@/state'; import { t } from '@lingui/core/macro'; import { Trans } from '@lingui/react/macro'; import { + CheckCheck, ChevronDown, Flame, HandCoins, SendIcon, UserRoundPlus, + X, } from 'lucide-react'; import { useEffect, useState } from 'react'; import { useNavigate } from 'react-router-dom'; @@ -36,6 +38,8 @@ export interface MultiSelectActionsProps { nfts?: NftRecord[]; thumbnails?: Record; onConfirm: () => void; + onSelectAll?: () => void; + onClearSelection?: () => void; } export function MultiSelectActions({ @@ -43,6 +47,8 @@ export function MultiSelectActions({ nfts: propNfts, thumbnails: propThumbnails, onConfirm, + onSelectAll, + onClearSelection, }: MultiSelectActionsProps) { const walletState = useWalletState(); const [offerState, setOfferState] = useOfferStateWithDefault(); @@ -181,17 +187,70 @@ export function MultiSelectActions({ return ( <>
- + {selectedCount} selected + {(onSelectAll || onClearSelection) && ( + + + + + + + {onSelectAll && ( + { + e.stopPropagation(); + onSelectAll(); + }} + aria-label={t`Select all NFTs on this page`} + > + + )} + {onClearSelection && ( + { + e.stopPropagation(); + onClearSelection(); + }} + aria-label={t`Clear selection`} + > + + )} + + + + )}