add back loadedViaUrl flag (#2337)

* add back `loadedViaUrl` flag

* implicitly set `loadedViaUrl` to `false` when adding a safe via form or setting its name from Settings

* exclude safes whose `loadedViaUrl` flag is `true`

* hide "Remove Safe" button for safes `loadedViaUrl`

* add `loadedViaUrl` flag to mocked safe

src/logic/safe/store/actions/fetchSafe.ts

@@ -20,7 +20,8 @@ import { buildSafeOwners, extractRemoteSafeInfo } from './utils'
  */
 export const buildSafe = async (safeAddress: string): Promise<SafeRecordProps> => {
   const address = checksumAddress(safeAddress)
-  const safeInfo: Partial<SafeRecordProps> = { address }
+  // setting `loadedViaUrl` to false, as `buildSafe` is called on safe Load or Open flows
+  const safeInfo: Partial<SafeRecordProps> = { address, loadedViaUrl: false }
 
   const [remote, localSafeInfo] = await allSettled<[SafeInfo | null, SafeRecordProps | undefined | null]>(
     getSafeInfo(safeAddress),

src/logic/safe/store/models/safe.ts

@@ -36,6 +36,7 @@ export type SafeRecordProps = {
   currentVersion: string
   needsUpdate: boolean
   featuresEnabled: Array<FEATURES>
+  loadedViaUrl: boolean
 }
 
 const makeSafe = Record<SafeRecordProps>({
@@ -52,6 +53,7 @@ const makeSafe = Record<SafeRecordProps>({
   currentVersion: '',
   needsUpdate: false,
   featuresEnabled: [],
+  loadedViaUrl: true,
 })
 
 export type SafeRecord = RecordOf<SafeRecordProps>

src/logic/safe/store/selectors/index.ts

@@ -32,6 +32,7 @@ export const safesListWithAddressBookNameSelector = createSelector(
     const addressBook = addressBookMap?.[chainId]
 
     return safesList
+      .filter((safeRecord) => !safeRecord.loadedViaUrl)
       .map((safeRecord) => {
         const safe = safeRecord.toObject()
         const name = addressBook?.[safe.address]?.name

src/logic/safe/utils/__tests__/shouldSafeStoreBeUpdated.test.ts

@@ -38,6 +38,7 @@ const getMockedOldSafe = ({
     needsUpdate: needsUpdate || false,
     featuresEnabled: featuresEnabled || [],
     totalFiatBalance: '110',
+    loadedViaUrl: false,
   }
 }
 

src/routes/safe/components/Settings/SafeDetails/index.tsx

@@ -73,8 +73,8 @@ const SafeDetails = (): ReactElement => {
 
   const handleSubmit = (values) => {
     dispatch(addressBookAddOrUpdate(makeAddressBookEntry({ address: safeAddress, name: values.safeName })))
-    // used to trigger safe middleware and persist safe to localStorage
+    // setting `loadedViaUrl` to `false` as setting a safe's name is considered to intentionally add the safe
-    dispatch(updateSafe({ address: safeAddress }))
+    dispatch(updateSafe({ address: safeAddress, loadedViaUrl: false }))
 
     const notification = getNotificationsFromTxType(TX_NOTIFICATION_TYPES.SAFE_NAME_CHANGE_TX)
     dispatch(enqueueSnackbar(enhanceSnackbarForAction(notification.afterExecution.noMoreConfirmationsNeeded)))

src/routes/safe/components/Settings/index.tsx

@@ -25,7 +25,11 @@ import Img from 'src/components/layout/Img'
 import Paragraph from 'src/components/layout/Paragraph'
 import Row from 'src/components/layout/Row'
 import Span from 'src/components/layout/Span'
-import { safeNeedsUpdateSelector, safeOwnersWithAddressBookDataSelector } from 'src/logic/safe/store/selectors'
+import {
+  safeNeedsUpdateSelector,
+  safeOwnersWithAddressBookDataSelector,
+  safeSelector,
+} from 'src/logic/safe/store/selectors'
 import { grantedSelector } from 'src/routes/safe/container/selector'
 
 export const OWNERS_SETTINGS_TAB_TEST_ID = 'owner-settings-tab'
@@ -45,6 +49,7 @@ const Settings: React.FC = () => {
   const owners = useSelector((state) => safeOwnersWithAddressBookDataSelector(state, chainId))
   const needsUpdate = useSelector(safeNeedsUpdateSelector)
   const granted = useSelector(grantedSelector)
+  const safe = useSelector(safeSelector)
 
   const handleChange = (menuOptionIndex) => () => {
     setState((prevState) => ({ ...prevState, menuOptionIndex }))
@@ -67,11 +72,15 @@ const Settings: React.FC = () => {
   ) : (
     <>
       <Row className={classes.message}>
-        <ButtonLink className={classes.removeSafeBtn} color="error" onClick={onShow('RemoveSafe')} size="lg">
+        {!safe?.loadedViaUrl && (
-          <Span className={classes.links}>Remove Safe</Span>
+          <>
-          <Img alt="Trash Icon" className={classes.removeSafeIcon} src={RemoveSafeIcon} />
+            <ButtonLink className={classes.removeSafeBtn} color="error" onClick={onShow('RemoveSafe')} size="lg">
-        </ButtonLink>
+              <Span className={classes.links}>Remove Safe</Span>
-        <RemoveSafeModal isOpen={showRemoveSafe} onClose={onHide('RemoveSafe')} />
+              <Img alt="Trash Icon" className={classes.removeSafeIcon} src={RemoveSafeIcon} />
+            </ButtonLink>
+            <RemoveSafeModal isOpen={showRemoveSafe} onClose={onHide('RemoveSafe')} />
+          </>
+        )}
       </Row>
       <Block className={classes.root}>
         <Col className={classes.menuWrapper} layout="column">