diff --git a/ui/components/NFTs/Filters/FilterList.tsx b/ui/components/NFTs/Filters/FilterList.tsx index d225b56ae..4a8b7939e 100644 --- a/ui/components/NFTs/Filters/FilterList.tsx +++ b/ui/components/NFTs/Filters/FilterList.tsx @@ -1,5 +1,5 @@ import { Filter } from "@tallyho/tally-background/redux-slices/nfts" -import React from "react" +import React, { useState } from "react" import SharedSkeletonLoader from "../../Shared/SharedSkeletonLoader" import SharedToggleItem from "../../Shared/SharedToggleItem" @@ -7,6 +7,7 @@ const HEIGHT = 40 type FilterListProps = { filters: Filter[] + isAccountFilter?: boolean onChange: (filter: Filter) => void isLoaded?: boolean emptyMessage?: string @@ -17,32 +18,73 @@ const FilterList = React.forwardRef( (props: FilterListProps, ref) => { const { filters, + isAccountFilter = false, isLoaded = true, onChange, emptyMessage, testid = "nft_filters_list", } = props + const [isMouseOver, setIsMouseOver] = useState(false) + const [mouseOverId, setMouseOverId] = useState(null) + + const handleMouseOver = (id: string) => { + setIsMouseOver(true) + setMouseOverId(id) + } + + const handleMouseLeave = () => { + setIsMouseOver(false) + setMouseOverId(null) + } + return (
{filters.length > 0 ? ( <> - {filters.map((item) => ( - - - onChange({ ...item, isEnabled: toggleValue }) - } - /> - - ))} + {filters.map((item) => + isAccountFilter ? ( + +
handleMouseOver(item.id)} + onMouseLeave={handleMouseLeave} + onFocus={() => handleMouseOver(item.id)} + > + + onChange({ ...item, isEnabled: toggleValue }) + } + /> +
+
+ ) : ( + + + onChange({ ...item, isEnabled: toggleValue }) + } + /> + + ), + )} ) : ( emptyMessage && ( diff --git a/ui/components/NFTs/Filters/NFTsFilters.tsx b/ui/components/NFTs/Filters/NFTsFilters.tsx index 8df301f45..be9b215d8 100644 --- a/ui/components/NFTs/Filters/NFTsFilters.tsx +++ b/ui/components/NFTs/Filters/NFTsFilters.tsx @@ -128,6 +128,7 @@ export default function NFTsFilters(): ReactElement { {t("accountsTitle")}