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