Feat: include recently visited safes in import and export data [SW-59…

…4] (#4630)

* feat: include last visited safes in import/export data

* fix: prevent unecessary requests when wallet is undefined and retry with backoff when gateway returns 503

* use empty object as default for AllOwnedSafes type

* Add visited safes to import and export previews

src/components/settings/DataManagement/FileListCard.tsx

@@ -14,6 +14,7 @@ import type { UndeployedSafesState } from '@/features/counterfactual/store/undep
 import type { ChainInfo } from '@safe-global/safe-gateway-typescript-sdk'
 
 import css from './styles.module.css'
+import type { VisitedSafesState } from '@/store/visitedSafesSlice'
 
 const getItemSecondaryText = (
   chains: ChainInfo[],
@@ -53,6 +54,7 @@ type Data = {
   settings?: SettingsState
   safeApps?: SafeAppsState
   undeployedSafes?: UndeployedSafesState
+  visitedSafes?: VisitedSafesState
   error?: string
 }
 
@@ -68,6 +70,7 @@ const getItems = ({
   settings,
   safeApps,
   undeployedSafes,
+  visitedSafes,
   error,
   chains,
   showPreview = false,
@@ -120,6 +123,18 @@ const getItems = ({
     items.push(settingsPreview)
   }
 
+  if (visitedSafes) {
+    const visitedSafesPreview: ListItemTextProps = {
+      primary: (
+        <>
+          <b>Visited Safe Accounts history</b>
+        </>
+      ),
+    }
+
+    items.push(visitedSafesPreview)
+  }
+
   const hasBookmarkedSafeApps = Object.values(safeApps || {}).some((chainId) => chainId.pinned?.length > 0)
   if (hasBookmarkedSafeApps) {
     const safeAppsPreview: ListItemTextProps = {
@@ -160,6 +175,7 @@ export const FileListCard = ({
   settings,
   safeApps,
   undeployedSafes,
+  visitedSafes,
   error,
   showPreview = false,
   ...cardHeaderProps
@@ -170,6 +186,7 @@ export const FileListCard = ({
     addressBook,
     settings,
     safeApps,
+    visitedSafes,
     undeployedSafes,
     error,
     chains: chains.configs,

src/components/settings/DataManagement/ImportDialog.tsx

@@ -14,6 +14,7 @@ import { useGlobalImportJsonParser } from '@/components/settings/DataManagement/
 import FileIcon from '@/public/images/settings/data/file.svg'
 import { ImportFileUpload } from '@/components/settings/DataManagement/ImportFileUpload'
 import { showNotification } from '@/store/notificationsSlice'
+import { visitedSafesSlice } from '@/store/visitedSafesSlice'
 
 import css from './styles.module.css'
 
@@ -31,10 +32,11 @@ export const ImportDialog = ({
   setJsonData: Dispatch<SetStateAction<string | undefined>>
 }): ReactElement => {
   const dispatch = useAppDispatch()
-  const { addedSafes, addressBook, addressBookEntriesCount, settings, safeApps, undeployedSafes, error } =
+  const { addedSafes, addressBook, addressBookEntriesCount, settings, safeApps, undeployedSafes, visitedSafes, error } =
     useGlobalImportJsonParser(jsonData)
 
-  const isDisabled = (!addedSafes && !addressBook && !settings && !safeApps) || !!error
+  const isDisabled =
+    (!addedSafes && !addressBook && !settings && !safeApps && !undeployedSafes && !visitedSafes) || !!error
 
   const handleClose = () => {
     setFileName(undefined)
@@ -73,6 +75,11 @@ export const ImportDialog = ({
       trackEvent(SETTINGS_EVENTS.DATA.IMPORT_UNDEPLOYED_SAFES)
     }
 
+    if (visitedSafes) {
+      dispatch(visitedSafesSlice.actions.setVisitedSafes(visitedSafes))
+      trackEvent(SETTINGS_EVENTS.DATA.IMPORT_VISITED_SAFES)
+    }
+
     dispatch(
       showNotification({
         variant: 'success',
@@ -110,6 +117,7 @@ export const ImportDialog = ({
               addressBook={addressBook}
               settings={settings}
               safeApps={safeApps}
+              visitedSafes={visitedSafes}
               undeployedSafes={undeployedSafes}
               error={error}
               showPreview

src/components/settings/DataManagement/index.tsx

@@ -13,6 +13,7 @@ import { ImportFileUpload } from '@/components/settings/DataManagement/ImportFil
 import { ImportDialog } from '@/components/settings/DataManagement/ImportDialog'
 import { SAFE_EXPORT_VERSION } from '@/components/settings/DataManagement/useGlobalImportFileParser'
 import { FileListCard } from '@/components/settings/DataManagement/FileListCard'
+import { selectAllVisitedSafes, visitedSafesSlice } from '@/store/visitedSafesSlice'
 
 import css from './styles.module.css'
 import Track from '@/components/common/Track'
@@ -31,6 +32,7 @@ export const exportAppData = () => {
     [settingsSlice.name]: setting,
     [safeAppsSlice.name]: safeApps,
     [undeployedSafesSlice.name]: undeployedSafes,
+    [visitedSafesSlice.name]: visitedSafes,
   } = getPersistedState()
 
   // Ensure they are under the same name as the slice
@@ -40,9 +42,10 @@ export const exportAppData = () => {
     [settingsSlice.name]: setting,
     [safeAppsSlice.name]: safeApps,
     [undeployedSafesSlice.name]: undeployedSafes,
+    [visitedSafesSlice.name]: visitedSafes,
   }
 
-  const data = JSON.stringify({ version: SAFE_EXPORT_VERSION.V2, data: exportData })
+  const data = JSON.stringify({ version: SAFE_EXPORT_VERSION.V3, data: exportData })
 
   const blob = new Blob([data], { type: 'text/json' })
   const link = document.createElement('a')
@@ -61,6 +64,7 @@ const DataManagement = () => {
   const addedSafes = useAppSelector(selectAllAddedSafes)
   const addressBook = useAppSelector(selectAllAddressBooks)
   const settings = useAppSelector(selectSettings)
+  const visitedSafes = useAppSelector(selectAllVisitedSafes)
   const safeApps = useAppSelector(selectSafeApps)
   const undeployedSafes = useAppSelector(selectUndeployedSafes)
 
@@ -99,6 +103,7 @@ const DataManagement = () => {
               addedSafes={addedSafes}
               addressBook={addressBook}
               settings={settings}
+              visitedSafes={visitedSafes}
               safeApps={safeApps}
               undeployedSafes={undeployedSafes}
             />

src/components/settings/DataManagement/useGlobalImportFileParser.ts

@@ -10,10 +10,12 @@ import type { SettingsState } from '@/store/settingsSlice'
 import type { UndeployedSafesState } from '@/features/counterfactual/store/undeployedSafesSlice'
 
 import { useMemo } from 'react'
+import type { VisitedSafesState } from '@/store/visitedSafesSlice'
 
 export const enum SAFE_EXPORT_VERSION {
   V1 = '1.0',
   V2 = '2.0',
+  V3 = '3.0',
 }
 
 export enum ImportErrors {
@@ -59,6 +61,13 @@ export const _filterValidAbEntries = (ab?: AddressBookState): AddressBookState |
  *  - safeApps
  *  - settings
  *
+ * 3.0:
+ *  - address book
+ *  - added Safes
+ *  - safeApps
+ *  - settings
+ *  - visited Safes
+ *
  * @param jsonData
  * @returns data to import and some insights about it
  */
@@ -69,6 +78,7 @@ type Data = {
   settings?: SettingsState
   safeApps?: SafeAppsState
   undeployedSafes?: UndeployedSafesState
+  visitedSafes?: VisitedSafesState
   error?: ImportErrors
   addressBookEntriesCount: number
   addedSafesCount: number
@@ -84,6 +94,7 @@ export const useGlobalImportJsonParser = (jsonData: string | undefined): Data =>
       settings: undefined,
       safeApps: undefined,
       undeployedSafes: undefined,
+      visitedSafes: undefined,
     }
 
     if (!jsonData) {
@@ -124,6 +135,17 @@ export const useGlobalImportJsonParser = (jsonData: string | undefined): Data =>
         break
       }
 
+      case SAFE_EXPORT_VERSION.V3: {
+        data.addressBook = _filterValidAbEntries(parsedFile.data.addressBook)
+        data.addedSafes = parsedFile.data.addedSafes
+        data.settings = parsedFile.data.settings
+        data.safeApps = parsedFile.data.safeApps
+        data.undeployedSafes = parsedFile.data.undeployedSafes
+        data.visitedSafes = parsedFile.data.visitedSafes
+
+        break
+      }
+
       default: {
         data.error = ImportErrors.INVALID_VERSION
       }

src/features/myAccounts/hooks/useAllOwnedSafes.ts

@@ -19,7 +19,7 @@ const useAllOwnedSafes = (address: string): AsyncResult<AllOwnedSafes> => {
     }
   }, [data, setCache])
 
-  return [cache, asError(error), isLoading]
+  return address ? [cache, asError(error), isLoading] : [{}, undefined, false]
 }
 
 export default useAllOwnedSafes

src/services/analytics/events/settings.ts

@@ -129,6 +129,10 @@ export const SETTINGS_EVENTS = {
       action: 'Imported counterfactual safes via Import all',
       category: SETTINGS_CATEGORY,
     },
+    IMPORT_VISITED_SAFES: {
+      action: 'Imported visited safes via Import all',
+      category: SETTINGS_CATEGORY,
+    },
   },
   ENV_VARIABLES: {
     SAVE: {

src/store/api/gateway/index.ts

@@ -1,6 +1,5 @@
 import { proposerEndpoints } from '@/store/api/gateway/proposers'
 import { createApi, fakeBaseQuery } from '@reduxjs/toolkit/query/react'
-
 import {
   type AllOwnedSafes,
   getAllOwnedSafes,

src/store/visitedSafesSlice.ts

@@ -24,6 +24,10 @@ export const visitedSafesSlice = createSlice({
       state[chainId] ??= {}
       state[chainId][address] = { lastVisited }
     },
+    setVisitedSafes: (_, { payload }: PayloadAction<VisitedSafesState>) => {
+      // We must return as we are overwriting the entire state
+      return payload
+    },
   },
 })