Show address on filter list account hover

tahowallet · Dec 19, 2023 · a39f262 · a39f262
1 parent 2a15b7b
commit a39f262
Show file tree

Hide file tree

Showing 2 changed files with 60 additions and 17 deletions.
diff --git a/ui/components/NFTs/Filters/FilterList.tsx b/ui/components/NFTs/Filters/FilterList.tsx
@@ -1,12 +1,13 @@
 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"
 
 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<HTMLDivElement, FilterListProps>(
  (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<string | null>(null)
+
+ const handleMouseOver = (id: string) => {
+ setIsMouseOver(true)
+ setMouseOverId(id)
+ }
+
+ const handleMouseLeave = () => {
+ setIsMouseOver(false)
+ setMouseOverId(null)
+ }
+
  return (
  <div ref={ref} className="filter_list" data-testid={testid}>
  {filters.length > 0 ? (
  <>
- {filters.map((item) => (
- <SharedSkeletonLoader
- key={item.id}
- isLoaded={isLoaded}
- height={HEIGHT}
- >
- <SharedToggleItem
- label={item.name}
- thumbnailURL={item?.thumbnailURL}
- checked={item.isEnabled}
- onChange={(toggleValue) =>
- onChange({ ...item, isEnabled: toggleValue })
- }
- />
- </SharedSkeletonLoader>
- ))}
+ {filters.map((item) =>
+ isAccountFilter ? (
+ <SharedSkeletonLoader
+ key={item.id}
+ isLoaded={isLoaded}
+ height={HEIGHT}
+ >
+ <div
+ onMouseOver={() => handleMouseOver(item.id)}
+ onMouseLeave={handleMouseLeave}
+ onFocus={() => handleMouseOver(item.id)}
+ >
+ <SharedToggleItem
+ label={
+ isMouseOver && mouseOverId === item.id
+ ? item.id
+ : item.name
+ }
+ thumbnailURL={item?.thumbnailURL}
+ checked={item.isEnabled}
+ onChange={(toggleValue) =>
+ onChange({ ...item, isEnabled: toggleValue })
+ }
+ />
+ </div>
+ </SharedSkeletonLoader>
+ ) : (
+ <SharedSkeletonLoader
+ key={item.id}
+ isLoaded={isLoaded}
+ height={HEIGHT}
+ >
+ <SharedToggleItem
+ label={isMouseOver ? item.id : item.name}
+ thumbnailURL={item?.thumbnailURL}
+ checked={item.isEnabled}
+ onChange={(toggleValue) =>
+ onChange({ ...item, isEnabled: toggleValue })
+ }
+ />
+ </SharedSkeletonLoader>
+ ),
+ )}
  </>
  ) : (
  emptyMessage && (

diff --git a/ui/components/NFTs/Filters/NFTsFilters.tsx b/ui/components/NFTs/Filters/NFTsFilters.tsx
@@ -128,6 +128,7 @@ export default function NFTsFilters(): ReactElement {
  <span className="filter_title">{t("accountsTitle")}</span>
  <FilterList
  filters={filters.accounts}
+ isAccountFilter
  onChange={handleUpdateAccountFilter}
  testid="nft_account_filters"
  />