Epic: sidebar improvements (#4442)

* Feat(Sidebar): Add pinned safes list to sidebar and accounts page [SW-304] (#4412)

* feat: allow pinning and unpinning accounts

* feat: allow pinning multichain safes

* fix: pinning of multichain safes

* feat: simplify all accounts list

* feat: load safe info when safelist item is scrolled into view

* feat: remove safes when unpinning if they werent added before being pinned

* fix: pinning behaviour of multichain safes

* fix: multichain sub itemstyles

* feat: add empty state for pinned list

* fix: lint errors

* fix: show threshold for counterfactual safes

* fix: mobile layout

* restore loading balances for safes

* fix: subaccount item layout, and app crashing on unpin

* feat: expand all accounts if there are no pinned safes

* fix: flickering when loading all safes

* fix: account for default threshold and owner numbers

* reduce transition animation duration for pinning and unpinning safes

* reduce space between chains and balance

* Feat(sidebar): sort safes by name and recently used [SW-307] (#4458)

* Feat: add option to sort by recently visited and by name

* tests: add new properties to unit tests

* fix: make order by preference persist

* feat: sort sub account items by name and recently visited

* refactor: fix incorrect variable names and remove console log

* Feat(sidebar): filter safes by search query [SW-305] (#4484)

* feat: filter safes by search query

* feat: display current order by option. fix text colors

* feat: search by adddress name and chain name

* fix: use ignoreLocation to match the final address characters when searching

* add tracking event for search

* fix: cypress tests

* Feat(sidebar): Add tracking events for search, sorting, and pinning/unpinning safes [SW-308] (#4500)

* track the number of pined safes on the accounts page

* feat: track pinning, unpinning, and sorting

* fix: separate watchlist and pined safes for tracking

* fix: remove wallet from dependency array

* Update src/components/welcome/MyAccounts/useTrackedSafesCount.ts

Co-authored-by: Usame Algan <[email protected]>

* fix: lint

---------

Co-authored-by: Usame Algan <[email protected]>

* Refactor(Sidebar): use feature directory structure for MyAccounts (#4508)

* refactor: move myAccounts to features

* fix:align  queue and status chips with address for large screens

* remove commented code

* fix: chip styles

* fix(sidebar):  fix designs for data widget and empty/disconnected state [SW-507] (#4509)

* fix: add connect wallet button and empty state

* fix: datawidget styles

* Fix(Sidebar): Include sub safe in search results [SW-305] (#4527)

* fix: CF chip dark mode color

* include multichain sub safe names in search

* fix: queue chips being cut off

* Fix: rm Remove option

* Refactor: pinned = added safes [SW-304] (#4552)

* Refactor: pinned = added safes

* Rm Watchlist word

* Fix duplicate cf safes

---------

Co-authored-by: Usame Algan <[email protected]>
Co-authored-by: katspaugh <[email protected]>
Co-authored-by: katspaugh <[email protected]>

cypress/e2e/pages/sidebar.pages.js

@@ -26,13 +26,12 @@ export const safeItemOptionsRemoveBtn = '[data-testid="remove-btn"]'
 export const safeItemOptionsAddChainBtn = '[data-testid="add-chain-btn"]'
 const nameInput = '[data-testid="name-input"]'
 const saveBtn = '[data-testid="save-btn"]'
-const cancelBtn = '[data-testid="cancel-btn"]'
 const deleteBtn = '[data-testid="delete-btn"]'
 const readOnlyVisibility = '[data-testid="read-only-visibility"]'
 const currencySection = '[data-testid="currency-section"]'
 const missingSignatureInfo = '[data-testid="missing-signature-info"]'
 const queuedTxInfo = '[data-testid="queued-tx-info"]'
-const showMoreBtn = '[data-testid="show-more-btn" ]'
+const expandSafesList = '[data-testid="expand-safes-list" ]'
 export const importBtn = '[data-testid="import-btn"]'
 export const pendingActivationIcon = '[data-testid="pending-activation-icon"]'
 const safeItemMenuIcon = '[data-testid="MoreVertIcon"]'
@@ -54,7 +53,6 @@ export const addedNetworkOption = 'li[role="option"]'
 const modalAddNetworkName = '[data-testid="added-network"]'
 const networkSeperator = 'div[role="separator"]'
 export const addNetworkTooltip = '[data-testid="add-network-tooltip"]'
-const networkOptionNetworkSwitch = 'span[data-track="overview: Add new network"] > li'
 export const importBtnStr = 'Import'
 export const exportBtnStr = 'Export'
 export const undeployedSafe = 'Undeployed Sepolia'
@@ -112,10 +110,9 @@ export function clickOnSidebarImportBtn() {
 
 export function showAllSafes() {
   cy.get('body').then(($body) => {
-    if ($body.find(showMoreBtn).length > 0) {
-      cy.get(showMoreBtn).click()
+    if ($body.find(expandSafesList).length > 0) {
+      cy.get(expandSafesList).click()
       cy.wait(500)
-      showAllSafes()
     }
   })
 }
@@ -467,7 +464,7 @@ export function checkNetworksInRange(expectedString, expectedCount, direction =
 
   return cy
     .get(startSelector)
-    [traversalMethod](endSelector, 'li')
+  [traversalMethod](endSelector, 'li')
     .then((liElements) => {
       expect(liElements.length).to.equal(expectedCount)
       const optionTexts = [...liElements].map((li) => li.innerText)

src/components/common/NetworkSelector/index.tsx

@@ -28,7 +28,7 @@ import { useChainId } from '@/hooks/useChainId'
 import { type ReactElement, useCallback, useMemo, useState } from 'react'
 import { OVERVIEW_EVENTS, OVERVIEW_LABELS, trackEvent } from '@/services/analytics'
 
-import { useAllSafesGrouped } from '@/components/welcome/MyAccounts/useAllSafesGrouped'
+import { useAllSafesGrouped } from '@/features/myAccounts/hooks/useAllSafesGrouped'
 import useSafeAddress from '@/hooks/useSafeAddress'
 import { sameAddress } from '@/utils/addresses'
 import uniq from 'lodash/uniq'

src/components/new-safe/create/steps/ReviewStep/index.tsx

@@ -42,7 +42,7 @@ import { useRouter } from 'next/router'
 import { useMemo, useState } from 'react'
 import ChainIndicator from '@/components/common/ChainIndicator'
 import NetworkWarning from '../../NetworkWarning'
-import useAllSafes from '@/components/welcome/MyAccounts/useAllSafes'
+import useAllSafes from '@/features/myAccounts/hooks/useAllSafes'
 import { uniq } from 'lodash'
 import { selectRpc } from '@/store/settingsSlice'
 import { AppRoutes } from '@/config/routes'
@@ -521,7 +521,7 @@ const ReviewStep = ({ data, onSubmit, onBack, setStep }: StepRenderProps<NewSafe
             size="stretched"
             disabled={isDisabled}
           >
-            {isCreating ? <CircularProgress size={18} /> : 'Create Account'}
+            {isCreating ? <CircularProgress size={18} /> : 'Create account'}
           </Button>
         </Box>
       </Box>

src/components/new-safe/load/index.tsx

@@ -68,7 +68,7 @@ const LoadSafe = ({ initialData }: { initialData?: TxStepperProps<LoadSafeFormDa
               pb: 2,
             }}
           >
-            Add Safe Account to watchlist
+            Add existing Safe Account
           </Typography>
         </Grid>
         <Grid

src/components/settings/PushNotifications/GlobalPushNotifications.tsx

@@ -36,7 +36,7 @@ import type { PushNotificationPreferences } from '@/services/push-notifications/
 import CheckWallet from '@/components/common/CheckWallet'
 
 import css from './styles.module.css'
-import useAllOwnedSafes from '@/components/welcome/MyAccounts/useAllOwnedSafes'
+import useAllOwnedSafes from '@/features/myAccounts/hooks/useAllOwnedSafes'
 import useWallet from '@/hooks/wallets/useWallet'
 import { selectAllAddedSafes, type AddedSafesState } from '@/store/addedSafesSlice'
 

src/components/sidebar/SafeListContextMenu/index.tsx

@@ -8,8 +8,6 @@ import ListItemText from '@mui/material/ListItemText'
 
 import EntryDialog from '@/components/address-book/EntryDialog'
 import SafeListRemoveDialog from '@/components/sidebar/SafeListRemoveDialog'
-import { useAppSelector } from '@/store'
-import { selectAddedSafes } from '@/store/addedSafesSlice'
 import EditIcon from '@/public/images/common/edit.svg'
 import DeleteIcon from '@/public/images/common/delete.svg'
 import PlusIcon from '@/public/images/common/plus.svg'
@@ -35,15 +33,15 @@ const SafeListContextMenu = ({
   chainId,
   addNetwork,
   rename,
+  undeployedSafe,
 }: {
   name: string
   address: string
   chainId: string
   addNetwork: boolean
   rename: boolean
+  undeployedSafe: boolean
 }): ReactElement => {
-  const addedSafes = useAppSelector((state) => selectAddedSafes(state, chainId))
-  const isAdded = !!addedSafes?.[address]
   const addressBook = useAddressBook()
   const hasName = address in addressBook
 
@@ -89,7 +87,7 @@ const SafeListContextMenu = ({
           </MenuItem>
         )}
 
-        {isAdded && (
+        {undeployedSafe && (
           <MenuItem onClick={handleOpenModal(ModalType.REMOVE, OVERVIEW_EVENTS.REMOVE_FROM_WATCHLIST)}>
             <ListItemIcon>
               <SvgIcon component={DeleteIcon} inheritViewBox fontSize="small" color="error" />

src/components/sidebar/SafeListRemoveDialog/index.tsx

@@ -40,7 +40,7 @@ const SafeListRemoveDialog = ({
     <ModalDialog open onClose={handleClose} dialogTitle="Delete entry">
       <DialogContent sx={{ p: '24px !important' }}>
         <Typography>
-          Are you sure you want to remove <b>{safe}</b> from your Watchlist?
+          Are you sure you want to remove the <b>{safe}</b> account?
         </Typography>
       </DialogContent>
 

src/components/sidebar/Sidebar/index.tsx

@@ -10,7 +10,7 @@ import IndexingStatus from '@/components/sidebar/IndexingStatus'
 
 import css from './styles.module.css'
 import { trackEvent, OVERVIEW_EVENTS } from '@/services/analytics'
-import MyAccounts from '@/components/welcome/MyAccounts'
+import MyAccounts from '@/features/myAccounts'
 
 const Sidebar = (): ReactElement => {
   const [isDrawerOpen, setIsDrawerOpen] = useState<boolean>(false)
@@ -60,7 +60,7 @@ const Sidebar = (): ReactElement => {
       </div>
       <Drawer variant="temporary" anchor="left" open={isDrawerOpen} onClose={onDrawerToggle}>
         <div className={css.drawer}>
-          <MyAccounts onLinkClick={closeDrawer}></MyAccounts>
+          <MyAccounts onLinkClick={closeDrawer} isSidebar></MyAccounts>
         </div>
       </Drawer>
     </div>

src/components/sidebar/Sidebar/styles.module.css

@@ -21,7 +21,7 @@
 }
 
 .drawer {
-  width: 480px;
+  width: 550px;
   max-width: 90vw;
   padding-top: var(--header-height);
   border-right: 1px solid var(--color-border-light);

src/components/sidebar/WatchlistAddButton/index.tsx

@@ -43,7 +43,7 @@ const WatchlistAddButton = () => {
             disableElevation
             sx={{ py: 1.3, px: 1 }}
           >
-            Remove from watchlist
+            Remove account
           </Button>
         </Track>
       ) : (
@@ -58,7 +58,7 @@ const WatchlistAddButton = () => {
             sx={{ py: 1.3 }}
             startIcon={<VisibilityOutlined sx={{ verticalAlign: 'middle', marginRight: 1 }} />}
           >
-            Add to watchlist
+            Add read-only
           </Button>
         </Track>
       )}