[Spam tokens] manually hide tokens (#1377)

Tokens can be manually hidden on the assets page: - "Hide token" IconButton in action column of AssetTable - "Hide tokens" Button to enter "hide token menu" which lets users select multiple tokens to hide / unhide Hidden tokens will have an effect on: - displayed total balance of Safes - displayed tokens in Asset table - displayed tokens in dialogs: Send Funds, New Spending limit - number of assets in dashboard / overview Co-authored-by: Usame Algan <usame@safe.global>
safe-global · Jan 9, 2023 · a1c0502 · a1c0502
1 parent d40fef8
commit a1c0502
Show file tree

Hide file tree

Showing 27 changed files with 1,515 additions and 220 deletions.
diff --git a/src/components/address-book/AddressBookTable/index.tsx b/src/components/address-book/AddressBookTable/index.tsx
@@ -82,50 +82,52 @@ const AddressBookTable = () => {
   }, [addressBookEntries, searchQuery])
 
   const rows = filteredEntries.map(([address, name]) => ({
-    name: {
-      rawValue: name,
-      content: name,
-    },
-    address: {
-      rawValue: address,
-      content: <EthHashInfo address={address} showName={false} shortAddress={false} hasExplorer showCopyButton />,
-    },
-    actions: {
-      rawValue: '',
-      sticky: true,
-      content: (
-        <div className={tableCss.actions}>
-          <Track {...ADDRESS_BOOK_EVENTS.EDIT_ENTRY}>
-            <Tooltip title="Edit entry" placement="top">
-              <IconButton onClick={() => handleOpenModalWithValues(ModalType.ENTRY, address, name)} size="small">
-                <SvgIcon component={EditIcon} inheritViewBox color="border" fontSize="small" />
-              </IconButton>
-            </Tooltip>
-          </Track>
-
-          <Track {...ADDRESS_BOOK_EVENTS.DELETE_ENTRY}>
-            <Tooltip title="Delete entry" placement="top">
-              <IconButton onClick={() => handleOpenModalWithValues(ModalType.REMOVE, address, name)} size="small">
-                <SvgIcon component={DeleteIcon} inheritViewBox color="error" fontSize="small" />
-              </IconButton>
-            </Tooltip>
-          </Track>
-
-          {isGranted && (
-            <Track {...ADDRESS_BOOK_EVENTS.SEND}>
-              <Button
-                variant="contained"
-                color="primary"
-                size="small"
-                onClick={() => setSelectedAddress(address)}
-                className={css.sendButton}
-              >
-                Send
-              </Button>
+    cells: {
+      name: {
+        rawValue: name,
+        content: name,
+      },
+      address: {
+        rawValue: address,
+        content: <EthHashInfo address={address} showName={false} shortAddress={false} hasExplorer showCopyButton />,
+      },
+      actions: {
+        rawValue: '',
+        sticky: true,
+        content: (
+          <div className={tableCss.actions}>
+            <Track {...ADDRESS_BOOK_EVENTS.EDIT_ENTRY}>
+              <Tooltip title="Edit entry" placement="top">
+                <IconButton onClick={() => handleOpenModalWithValues(ModalType.ENTRY, address, name)} size="small">
+                  <SvgIcon component={EditIcon} inheritViewBox color="border" fontSize="small" />
+                </IconButton>
+              </Tooltip>
             </Track>
-          )}
-        </div>
-      ),
+
+            <Track {...ADDRESS_BOOK_EVENTS.DELETE_ENTRY}>
+              <Tooltip title="Delete entry" placement="top">
+                <IconButton onClick={() => handleOpenModalWithValues(ModalType.REMOVE, address, name)} size="small">
+                  <SvgIcon component={DeleteIcon} inheritViewBox color="error" fontSize="small" />
+                </IconButton>
+              </Tooltip>
+            </Track>
+
+            {isGranted && (
+              <Track {...ADDRESS_BOOK_EVENTS.SEND}>
+                <Button
+                  variant="contained"
+                  color="primary"
+                  size="small"
+                  onClick={() => setSelectedAddress(address)}
+                  className={css.sendButton}
+                >
+                  Send
+                </Button>
+              </Track>
+            )}
+          </div>
+        ),
+      },
     },
   }))
 

diff --git a/src/components/balances/AssetsHeader/index.tsx b/src/components/balances/AssetsHeader/index.tsx
@@ -1,20 +1,21 @@
 import { Box } from '@mui/material'
-import type { ReactElement } from 'react'
+import type { ReactElement, ReactNode } from 'react'
 
 import NavTabs from '@/components/common/NavTabs'
 import PageHeader from '@/components/common/PageHeader'
-import CurrencySelect from '@/components/balances/CurrencySelect'
 import { balancesNavItems } from '@/components/sidebar/SidebarNavigation/config'
 
-const AssetsHeader = ({ currencySelect = false }: { currencySelect?: boolean }): ReactElement => {
+const AssetsHeader = ({ children }: { children?: ReactNode }): ReactElement => {
   return (
     <PageHeader
       title="Assets"
       action={
-        <Box display="flex" justifyContent="space-between" alignItems="center">
-          <NavTabs tabs={balancesNavItems} />
-          {currencySelect && <CurrencySelect />}
-        </Box>
+        <>
+          <Box display="flex" justifyContent="space-between" alignItems="center">
+            <NavTabs tabs={balancesNavItems} />
+            {children}
+          </Box>
+        </>
       }
     />
   )