Show wallet address after hovering on wallet name

ui/components/NFTs/Filters/FilterList.tsx

@@ -1,12 +1,15 @@
 import { Filter } from "@tallyho/tally-background/redux-slices/nfts"
-import React from "react"
+import React, { useCallback } from "react"
+import { setSnackbarMessage } from "@tallyho/tally-background/redux-slices/ui"
+import { useDispatch } from "react-redux"
 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,12 +20,23 @@
  (props: FilterListProps, ref) => {
  const {
  filters,
+ isAccountFilter = false,
  isLoaded = true,
  onChange,
  emptyMessage,
  testid = "nft_filters_list",
  } = props
 
+ const dispatch = useDispatch()
+
+ const copyAddress = useCallback(
+ (address: string) => {
+ navigator.clipboard.writeText(address)
+ dispatch(setSnackbarMessage("Address copied to clipboard"))
+ },
+ [dispatch],
+ )
+
  return (
  <div ref={ref} className="filter_list" data-testid={testid}>
  {filters.length > 0 ? (
@@ -33,14 +47,31 @@
  isLoaded={isLoaded}
  height={HEIGHT}
  >
- <SharedToggleItem
- label={item.name}
- thumbnailURL={item?.thumbnailURL}
- checked={item.isEnabled}
- onChange={(toggleValue) =>
- onChange({ ...item, isEnabled: toggleValue })
- }
- />
+ {isAccountFilter ? (
+ <button
+ type="button"
+ onClick={() => copyAddress(item.id)}
+ title={`Copy to clipboard:\n${item.id}`}
+ >
+ <SharedToggleItem
+ label={item.name}
+ thumbnailURL={item?.thumbnailURL}
+ checked={item.isEnabled}
+ onChange={(toggleValue) =>
+ onChange({ ...item, isEnabled: toggleValue })
+ }
+ />
+ </button>
+ ) : (
+ <SharedToggleItem
+ label={item.name}
+ thumbnailURL={item?.thumbnailURL}
+ checked={item.isEnabled}
+ onChange={(toggleValue) =>
+ onChange({ ...item, isEnabled: toggleValue })
+ }
+ />
+ )}
  </SharedSkeletonLoader>
  ))}
  </>

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"
  />