From c6509eb5ca526aedff477b38d2b1a73c22d4bf61 Mon Sep 17 00:00:00 2001
From: Agustin Pane <agustin.pane@gmail.com>
Date: Thu, 17 Dec 2020 10:43:10 -0300
Subject: [PATCH 01/11] Avoid displaying notification for non updated owner

---
 .../ManageOwners/EditOwnerModal/index.tsx     | 19 +++++++++----------
 .../Settings/ManageOwners/index.tsx           |  2 +-
 2 files changed, 10 insertions(+), 11 deletions(-)

diff --git a/src/routes/safe/components/Settings/ManageOwners/EditOwnerModal/index.tsx b/src/routes/safe/components/Settings/ManageOwners/EditOwnerModal/index.tsx
index 26157c4b2d..a36354782e 100644
--- a/src/routes/safe/components/Settings/ManageOwners/EditOwnerModal/index.tsx
+++ b/src/routes/safe/components/Settings/ManageOwners/EditOwnerModal/index.tsx
@@ -40,17 +40,18 @@ type OwnProps = {
   selectedOwnerName: string
 }
 
-const EditOwnerComponent = ({ isOpen, onClose, ownerAddress, selectedOwnerName }: OwnProps): React.ReactElement => {
+export const EditOwnerModal = ({ isOpen, onClose, ownerAddress, selectedOwnerName }: OwnProps): React.ReactElement => {
   const classes = useStyles()
   const dispatch = useDispatch()
-  const safeAddress = useSelector(safeParamAddressFromStateSelector) as string
-  const handleSubmit = (values) => {
-    const { ownerName } = values
-
-    dispatch(editSafeOwner({ safeAddress, ownerAddress, ownerName }))
-    dispatch(addOrUpdateAddressBookEntry(makeAddressBookEntry({ address: ownerAddress, name: ownerName })))
-    dispatch(enqueueSnackbar(NOTIFICATIONS.OWNER_NAME_CHANGE_EXECUTED_MSG))
+  const safeAddress = useSelector(safeParamAddressFromStateSelector)
 
+  const handleSubmit = ({ ownerName }: { ownerName: string }): void => {
+    // Update the value only if the ownerName really changed
+    if (ownerName !== selectedOwnerName) {
+      dispatch(editSafeOwner({ safeAddress, ownerAddress, ownerName }))
+      dispatch(addOrUpdateAddressBookEntry(makeAddressBookEntry({ address: ownerAddress, name: ownerName })))
+      dispatch(enqueueSnackbar(NOTIFICATIONS.OWNER_NAME_CHANGE_EXECUTED_MSG))
+    }
     onClose()
   }
 
@@ -120,5 +121,3 @@ const EditOwnerComponent = ({ isOpen, onClose, ownerAddress, selectedOwnerName }
     </Modal>
   )
 }
-
-export default EditOwnerComponent
diff --git a/src/routes/safe/components/Settings/ManageOwners/index.tsx b/src/routes/safe/components/Settings/ManageOwners/index.tsx
index be55767adb..df255ca53e 100644
--- a/src/routes/safe/components/Settings/ManageOwners/index.tsx
+++ b/src/routes/safe/components/Settings/ManageOwners/index.tsx
@@ -9,7 +9,7 @@ import { List } from 'immutable'
 import RemoveOwnerIcon from '../assets/icons/bin.svg'
 
 import AddOwnerModal from './AddOwnerModal'
-import EditOwnerModal from './EditOwnerModal'
+import { EditOwnerModal } from './EditOwnerModal'
 import OwnerAddressTableCell from './OwnerAddressTableCell'
 import RemoveOwnerModal from './RemoveOwnerModal'
 import ReplaceOwnerModal from './ReplaceOwnerModal'

From 90c8f87574118989aea7fbe501a8e05adf5118a5 Mon Sep 17 00:00:00 2001
From: Agustin Pane <agustin.pane@gmail.com>
Date: Thu, 17 Dec 2020 13:04:26 -0300
Subject: [PATCH 02/11] Remove old selector usage on welcome page

---
 .../welcome/components/{Layout.tsx => index.tsx}     | 10 +++++-----
 src/routes/welcome/container/index.tsx               | 12 ++++--------
 src/routes/welcome/container/selector.ts             |  7 -------
 3 files changed, 9 insertions(+), 20 deletions(-)
 rename src/routes/welcome/components/{Layout.tsx => index.tsx} (94%)
 delete mode 100644 src/routes/welcome/container/selector.ts

diff --git a/src/routes/welcome/components/Layout.tsx b/src/routes/welcome/components/index.tsx
similarity index 94%
rename from src/routes/welcome/components/Layout.tsx
rename to src/routes/welcome/components/index.tsx
index 84d2b652e9..4407421c3d 100644
--- a/src/routes/welcome/components/Layout.tsx
+++ b/src/routes/welcome/components/index.tsx
@@ -16,6 +16,8 @@ import Link from 'src/components/layout/Link'
 import Block from 'src/components/layout/Block'
 import { LOAD_ADDRESS, OPEN_ADDRESS } from 'src/routes/routes'
 import { onConnectButtonClick } from 'src/components/ConnectButton'
+import { useSelector } from 'react-redux'
+import { providerNameSelector } from 'src/logic/wallets/store/selectors'
 
 const Wrapper = styled.div`
   display: flex;
@@ -67,10 +69,10 @@ const StyledButtonLink = styled(ButtonLink)`
 
 type Props = {
   isOldMultisigMigration?: boolean
-  provider: any
 }
 
-const Welcome = ({ isOldMultisigMigration, provider }: Props): React.ReactElement => {
+export const WelcomeLayout = ({ isOldMultisigMigration }: Props): React.ReactElement => {
+  const provider = useSelector(providerNameSelector)
   return (
     <Block>
       {/* Title */}
@@ -125,7 +127,7 @@ const Welcome = ({ isOldMultisigMigration, provider }: Props): React.ReactElemen
               color="primary"
               variant="contained"
               onClick={onConnectButtonClick}
-              disabled={provider}
+              disabled={!!provider}
               data-testid="connect-btn"
             >
               <Text size="xl" color="white">
@@ -187,5 +189,3 @@ const Welcome = ({ isOldMultisigMigration, provider }: Props): React.ReactElemen
     </Block>
   )
 }
-
-export default Welcome
diff --git a/src/routes/welcome/container/index.tsx b/src/routes/welcome/container/index.tsx
index ba090dee8c..5bde9ea063 100644
--- a/src/routes/welcome/container/index.tsx
+++ b/src/routes/welcome/container/index.tsx
@@ -1,16 +1,12 @@
 import * as React from 'react'
-import { connect } from 'react-redux'
-
-import Layout from '../components/Layout'
-
-import selector from './selector'
+import { WelcomeLayout } from 'src/routes/welcome/components/index'
 
 import Page from 'src/components/layout/Page'
 
-const Welcome = ({ provider }) => (
+const Welcome = (): React.ReactElement => (
   <Page align="center">
-    <Layout provider={provider} />
+    <WelcomeLayout />
   </Page>
 )
 
-export default connect(selector)(Welcome)
+export default Welcome
diff --git a/src/routes/welcome/container/selector.ts b/src/routes/welcome/container/selector.ts
deleted file mode 100644
index bc2d05cee2..0000000000
--- a/src/routes/welcome/container/selector.ts
+++ /dev/null
@@ -1,7 +0,0 @@
-import { createStructuredSelector } from 'reselect'
-
-import { providerNameSelector } from 'src/logic/wallets/store/selectors'
-
-export default createStructuredSelector({
-  provider: providerNameSelector,
-})

From bf95fab6397b80a81a3c9ffc9ab85736421864be Mon Sep 17 00:00:00 2001
From: Agustin Pane <agustin.pane@gmail.com>
Date: Thu, 17 Dec 2020 13:08:48 -0300
Subject: [PATCH 03/11] Remove provider props on WelcomeLayout Fix removing
 safe behaviour

---
 src/routes/open/components/Layout.tsx         |  4 +--
 .../Settings/RemoveSafeModal/index.tsx        | 28 +++++++++++--------
 2 files changed, 19 insertions(+), 13 deletions(-)

diff --git a/src/routes/open/components/Layout.tsx b/src/routes/open/components/Layout.tsx
index 45385f05e4..2bce38460e 100644
--- a/src/routes/open/components/Layout.tsx
+++ b/src/routes/open/components/Layout.tsx
@@ -17,7 +17,7 @@ import {
   getOwnerAddressBy,
   getOwnerNameBy,
 } from 'src/routes/open/components/fields'
-import Welcome from 'src/routes/welcome/components/Layout'
+import { WelcomeLayout } from 'src/routes/welcome/components/index'
 import { history } from 'src/store'
 import { secondary, sm } from 'src/theme/variables'
 import { networkSelector, providerNameSelector, userAccountSelector } from 'src/logic/wallets/store/selectors'
@@ -138,7 +138,7 @@ export const Layout = (props: LayoutProps): React.ReactElement => {
           </Stepper>
         </Block>
       ) : (
-        <Welcome isOldMultisigMigration provider={provider} />
+        <WelcomeLayout isOldMultisigMigration />
       )}
     </>
   )
diff --git a/src/routes/safe/components/Settings/RemoveSafeModal/index.tsx b/src/routes/safe/components/Settings/RemoveSafeModal/index.tsx
index 5524ecd31d..d944115a74 100644
--- a/src/routes/safe/components/Settings/RemoveSafeModal/index.tsx
+++ b/src/routes/safe/components/Settings/RemoveSafeModal/index.tsx
@@ -21,6 +21,7 @@ import Row from 'src/components/layout/Row'
 import removeSafe from 'src/logic/safe/store/actions/removeSafe'
 import { safeNameSelector, safeParamAddressFromStateSelector } from 'src/logic/safe/store/selectors'
 import { md, secondary } from 'src/theme/variables'
+import { WELCOME_ADDRESS } from 'src/routes/routes'
 
 const openIconStyle = {
   height: md,
@@ -29,14 +30,27 @@ const openIconStyle = {
 
 const useStyles = makeStyles(styles)
 
-const RemoveSafeComponent = ({ isOpen, onClose }) => {
+type RemoveSafeModalProps = {
+  isOpen: boolean
+  onClose: () => void
+}
+
+export const RemoveSafeModal = ({ isOpen, onClose }: RemoveSafeModalProps): React.ReactElement => {
   const classes = useStyles()
-  const safeAddress = useSelector(safeParamAddressFromStateSelector) as string
+  const safeAddress = useSelector(safeParamAddressFromStateSelector)
   const safeName = useSelector(safeNameSelector)
   const dispatch = useDispatch()
   const explorerInfo = getExplorerInfo(safeAddress)
   const { url } = explorerInfo()
 
+  const onRemoveSafeHandler = () => {
+    dispatch(removeSafe(safeAddress))
+    onClose()
+    // using native redirect in order to avoid problems in several components
+    // trying to access references of the removed safe.
+    window.location.href = `/#/${WELCOME_ADDRESS}`
+  }
+
   return (
     <Modal
       description="Remove the selected Safe"
@@ -91,13 +105,7 @@ const RemoveSafeComponent = ({ isOpen, onClose }) => {
         <Button
           className={classes.buttonRemove}
           minWidth={140}
-          onClick={() => {
-            dispatch(removeSafe(safeAddress))
-            onClose()
-            // using native redirect in order to avoid problems in several components
-            // trying to access references of the removed safe.
-            window.location.href = '/app/'
-          }}
+          onClick={onRemoveSafeHandler}
           type="submit"
           variant="contained"
         >
@@ -107,5 +115,3 @@ const RemoveSafeComponent = ({ isOpen, onClose }) => {
     </Modal>
   )
 }
-
-export const RemoveSafeModal = RemoveSafeComponent

From 552687d5b6587a151bbf823455c7e37c8ea23266 Mon Sep 17 00:00:00 2001
From: Agustin Pane <agustin.pane@gmail.com>
Date: Thu, 17 Dec 2020 15:42:15 -0300
Subject: [PATCH 04/11] Fix missing undefined property check on
 cancelThresholdReached

---
 .../safe/components/Transactions/TxsTable/ExpandedTx/index.tsx  | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/routes/safe/components/Transactions/TxsTable/ExpandedTx/index.tsx b/src/routes/safe/components/Transactions/TxsTable/ExpandedTx/index.tsx
index 22e8de7e2e..bf7e097766 100644
--- a/src/routes/safe/components/Transactions/TxsTable/ExpandedTx/index.tsx
+++ b/src/routes/safe/components/Transactions/TxsTable/ExpandedTx/index.tsx
@@ -107,7 +107,7 @@ const ExpandedSafeTx = ({ cancelTx, tx }: ExpandedSafeTxProps): ReactElement =>
 
   const thresholdReached = !isIncomingTx && threshold <= tx.confirmations.size
   const canExecute = !isIncomingTx && nonce === tx.nonce
-  const cancelThresholdReached = !!cancelTx && threshold <= cancelTx.confirmations.size
+  const cancelThresholdReached = !!cancelTx && threshold <= cancelTx.confirmations?.size
   const canExecuteCancel = nonce === tx.nonce
 
   const openRejectModal = () => {

From 9ec45fbfa62e4f759907ef251d9dc43a7794b343 Mon Sep 17 00:00:00 2001
From: Agustin Pane <agustin.pane@gmail.com>
Date: Thu, 17 Dec 2020 15:42:38 -0300
Subject: [PATCH 05/11] Removes the default safe when removing the safe marked
 as default

---
 src/logic/safe/store/reducer/safe.ts | 9 ++++++++-
 1 file changed, 8 insertions(+), 1 deletion(-)

diff --git a/src/logic/safe/store/reducer/safe.ts b/src/logic/safe/store/reducer/safe.ts
index 5381b38a79..b5997f68f9 100644
--- a/src/logic/safe/store/reducer/safe.ts
+++ b/src/logic/safe/store/reducer/safe.ts
@@ -126,7 +126,14 @@ export default handleActions(
     [REMOVE_SAFE]: (state: SafeReducerMap, action) => {
       const safeAddress = action.payload
 
-      return state.deleteIn(['safes', safeAddress])
+      const currentDefaultSafe = state.get('defaultSafe')
+
+      let newState = state.deleteIn(['safes', safeAddress])
+      if (sameAddress(safeAddress, currentDefaultSafe)) {
+        newState = newState.set('defaultSafe', DEFAULT_SAFE_INITIAL_STATE)
+      }
+
+      return newState
     },
     [ADD_SAFE_OWNER]: (state: SafeReducerMap, action) => {
       const { ownerAddress, ownerName, safeAddress } = action.payload

From d21240b22078ef01d9212eea376ab54d5f6e5b79 Mon Sep 17 00:00:00 2001
From: Agustin Pane <agustin.pane@gmail.com>
Date: Mon, 4 Jan 2021 10:52:31 -0300
Subject: [PATCH 06/11] Remove index

---
 src/routes/welcome/container/index.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/routes/welcome/container/index.tsx b/src/routes/welcome/container/index.tsx
index 5bde9ea063..ca5e152eb8 100644
--- a/src/routes/welcome/container/index.tsx
+++ b/src/routes/welcome/container/index.tsx
@@ -1,5 +1,5 @@
 import * as React from 'react'
-import { WelcomeLayout } from 'src/routes/welcome/components/index'
+import { WelcomeLayout } from 'src/routes/welcome/components'
 
 import Page from 'src/components/layout/Page'
 

From 06cfab68049627feacd5b5771dae753a78e0cf7f Mon Sep 17 00:00:00 2001
From: Agustin Pane <agustin.pane@gmail.com>
Date: Mon, 4 Jan 2021 10:54:34 -0300
Subject: [PATCH 07/11] Change react import

---
 src/routes/welcome/container/index.tsx | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/src/routes/welcome/container/index.tsx b/src/routes/welcome/container/index.tsx
index ca5e152eb8..be5874feb4 100644
--- a/src/routes/welcome/container/index.tsx
+++ b/src/routes/welcome/container/index.tsx
@@ -1,9 +1,9 @@
-import * as React from 'react'
+import React, { ReactElement } from 'react'
 import { WelcomeLayout } from 'src/routes/welcome/components'
 
 import Page from 'src/components/layout/Page'
 
-const Welcome = (): React.ReactElement => (
+const Welcome = (): ReactElement => (
   <Page align="center">
     <WelcomeLayout />
   </Page>

From a9f877c604c3af2706fafe7e5adf5f48c2859e52 Mon Sep 17 00:00:00 2001
From: Agustin Pane <agustin.pane@gmail.com>
Date: Mon, 4 Jan 2021 11:39:38 -0300
Subject: [PATCH 08/11] Fix relative path for relocate url

---
 src/routes/safe/components/Settings/RemoveSafeModal/index.tsx | 3 ++-
 1 file changed, 2 insertions(+), 1 deletion(-)

diff --git a/src/routes/safe/components/Settings/RemoveSafeModal/index.tsx b/src/routes/safe/components/Settings/RemoveSafeModal/index.tsx
index d944115a74..309d1df65b 100644
--- a/src/routes/safe/components/Settings/RemoveSafeModal/index.tsx
+++ b/src/routes/safe/components/Settings/RemoveSafeModal/index.tsx
@@ -48,7 +48,8 @@ export const RemoveSafeModal = ({ isOpen, onClose }: RemoveSafeModalProps): Reac
     onClose()
     // using native redirect in order to avoid problems in several components
     // trying to access references of the removed safe.
-    window.location.href = `/#/${WELCOME_ADDRESS}`
+    const relativePath = window.location.href.split('/#/')[0]
+    window.location.href = `${relativePath}/#/${WELCOME_ADDRESS}`
   }
 
   return (

From d965dde14168cf420d306e05cd54b0575d9a3170 Mon Sep 17 00:00:00 2001
From: Agustin Pane <agustin.pane@gmail.com>
Date: Thu, 7 Jan 2021 13:09:02 -0300
Subject: [PATCH 09/11] Adds removeLocalSafe action Uses removeLocalSafe on
 onRemoveSafeHandler also removes default safe

---
 .../safe/store/actions/removeLocalSafe.ts     | 11 +++++++++++
 .../Settings/RemoveSafeModal/index.tsx        | 19 +++++++++++++++----
 2 files changed, 26 insertions(+), 4 deletions(-)
 create mode 100644 src/logic/safe/store/actions/removeLocalSafe.ts

diff --git a/src/logic/safe/store/actions/removeLocalSafe.ts b/src/logic/safe/store/actions/removeLocalSafe.ts
new file mode 100644
index 0000000000..64bd42847d
--- /dev/null
+++ b/src/logic/safe/store/actions/removeLocalSafe.ts
@@ -0,0 +1,11 @@
+import { Action, Dispatch } from 'redux'
+import { loadStoredSafes } from 'src/logic/safe/utils'
+import removeSafe from 'src/logic/safe/store/actions/removeSafe'
+
+export const removeLocalSafe = (safeAddress: string) => async (dispatch: Dispatch): Promise<Action | void> => {
+  const storedSafes = await loadStoredSafes()
+  if (storedSafes) {
+    delete storedSafes[safeAddress]
+  }
+  dispatch(removeSafe(safeAddress))
+}
diff --git a/src/routes/safe/components/Settings/RemoveSafeModal/index.tsx b/src/routes/safe/components/Settings/RemoveSafeModal/index.tsx
index 309d1df65b..4d2f8b728a 100644
--- a/src/routes/safe/components/Settings/RemoveSafeModal/index.tsx
+++ b/src/routes/safe/components/Settings/RemoveSafeModal/index.tsx
@@ -18,10 +18,16 @@ import Hairline from 'src/components/layout/Hairline'
 import Link from 'src/components/layout/Link'
 import Paragraph from 'src/components/layout/Paragraph'
 import Row from 'src/components/layout/Row'
-import removeSafe from 'src/logic/safe/store/actions/removeSafe'
-import { safeNameSelector, safeParamAddressFromStateSelector } from 'src/logic/safe/store/selectors'
+import {
+  defaultSafeSelector,
+  safeNameSelector,
+  safeParamAddressFromStateSelector,
+} from 'src/logic/safe/store/selectors'
 import { md, secondary } from 'src/theme/variables'
 import { WELCOME_ADDRESS } from 'src/routes/routes'
+import { removeLocalSafe } from 'src/logic/safe/store/actions/removeLocalSafe'
+import { sameAddress } from 'src/logic/wallets/ethAddresses'
+import { saveDefaultSafe } from 'src/logic/safe/utils'
 
 const openIconStyle = {
   height: md,
@@ -39,12 +45,17 @@ export const RemoveSafeModal = ({ isOpen, onClose }: RemoveSafeModalProps): Reac
   const classes = useStyles()
   const safeAddress = useSelector(safeParamAddressFromStateSelector)
   const safeName = useSelector(safeNameSelector)
+  const defaultSafe = useSelector(defaultSafeSelector)
   const dispatch = useDispatch()
   const explorerInfo = getExplorerInfo(safeAddress)
   const { url } = explorerInfo()
 
-  const onRemoveSafeHandler = () => {
-    dispatch(removeSafe(safeAddress))
+  const onRemoveSafeHandler = async () => {
+    await dispatch(removeLocalSafe(safeAddress))
+    if (sameAddress(safeAddress, defaultSafe)) {
+      await saveDefaultSafe('')
+    }
+
     onClose()
     // using native redirect in order to avoid problems in several components
     // trying to access references of the removed safe.

From 62e8a087c9981d45c77b07471cb8f923afb12f32 Mon Sep 17 00:00:00 2001
From: Agustin Pane <agustin.pane@gmail.com>
Date: Thu, 7 Jan 2021 13:11:20 -0300
Subject: [PATCH 10/11] Refactor SafeListSidebar uses redux-hooks approach

---
 src/components/App/index.tsx                  |  6 ++--
 .../{AddresWrapper.tsx => AddressWrapper.tsx} | 13 ++++++---
 .../SafeListSidebar/SafeList/index.tsx        | 10 ++-----
 src/components/SafeListSidebar/index.tsx      | 28 ++++++++-----------
 4 files changed, 27 insertions(+), 30 deletions(-)
 rename src/components/SafeListSidebar/SafeList/{AddresWrapper.tsx => AddressWrapper.tsx} (85%)

diff --git a/src/components/App/index.tsx b/src/components/App/index.tsx
index 8b50ae681f..fa9b73f54b 100644
--- a/src/components/App/index.tsx
+++ b/src/components/App/index.tsx
@@ -11,7 +11,7 @@ import ErrorIcon from 'src/assets/icons/error.svg'
 import InfoIcon from 'src/assets/icons/info.svg'
 
 import AppLayout from 'src/components/AppLayout'
-import SafeListSidebarProvider, { SafeListSidebarContext } from 'src/components/SafeListSidebar'
+import { SafeListSidebar, SafeListSidebarContext } from 'src/components/SafeListSidebar'
 import CookiesBanner from 'src/components/CookiesBanner'
 import Notifier from 'src/components/Notifier'
 import Backdrop from 'src/components/layout/Backdrop'
@@ -159,9 +159,9 @@ const App: React.FC = ({ children }) => {
 }
 
 const WrapperAppWithSidebar: React.FC = ({ children }) => (
-  <SafeListSidebarProvider>
+  <SafeListSidebar>
     <App>{children}</App>
-  </SafeListSidebarProvider>
+  </SafeListSidebar>
 )
 
 export default WrapperAppWithSidebar
diff --git a/src/components/SafeListSidebar/SafeList/AddresWrapper.tsx b/src/components/SafeListSidebar/SafeList/AddressWrapper.tsx
similarity index 85%
rename from src/components/SafeListSidebar/SafeList/AddresWrapper.tsx
rename to src/components/SafeListSidebar/SafeList/AddressWrapper.tsx
index 8bf621a3df..f21874aa3e 100644
--- a/src/components/SafeListSidebar/SafeList/AddresWrapper.tsx
+++ b/src/components/SafeListSidebar/SafeList/AddressWrapper.tsx
@@ -6,9 +6,10 @@ import { sameAddress } from 'src/logic/wallets/ethAddresses'
 import DefaultBadge from './DefaultBadge'
 import { SafeRecordProps } from 'src/logic/safe/store/models/safe'
 import { DefaultSafe } from 'src/routes/safe/store/reducer/types/safe'
-import { SetDefaultSafe } from 'src/logic/safe/store/actions/setDefaultSafe'
+import setDefaultSafe from 'src/logic/safe/store/actions/setDefaultSafe'
 import { makeStyles } from '@material-ui/core/styles'
 import { getNetworkInfo } from 'src/config'
+import { useDispatch } from 'react-redux'
 
 const StyledButtonLink = styled(ButtonLink)`
   visibility: hidden;
@@ -46,14 +47,18 @@ const useStyles = makeStyles({
 type Props = {
   safe: SafeRecordProps
   defaultSafe: DefaultSafe
-  setDefaultSafe: SetDefaultSafe
 }
 
 const { nativeCoin } = getNetworkInfo()
 
 export const AddressWrapper = (props: Props): React.ReactElement => {
   const classes = useStyles()
-  const { safe, defaultSafe, setDefaultSafe } = props
+  const { safe, defaultSafe } = props
+  const dispatch = useDispatch()
+
+  const setDefaultSafeAction = (safeAddress: string) => {
+    dispatch(setDefaultSafe(safeAddress))
+  }
 
   return (
     <div className={classes.wrapper}>
@@ -68,7 +73,7 @@ export const AddressWrapper = (props: Props): React.ReactElement => {
             className="safeListMakeDefaultButton"
             textSize="sm"
             onClick={() => {
-              setDefaultSafe(safe.address)
+              setDefaultSafeAction(safe.address)
             }}
             color="primary"
           >
diff --git a/src/components/SafeListSidebar/SafeList/index.tsx b/src/components/SafeListSidebar/SafeList/index.tsx
index 57b60238da..3a664d56a2 100644
--- a/src/components/SafeListSidebar/SafeList/index.tsx
+++ b/src/components/SafeListSidebar/SafeList/index.tsx
@@ -6,12 +6,11 @@ import * as React from 'react'
 import styled from 'styled-components'
 import { SafeRecord } from 'src/logic/safe/store/models/safe'
 import { DefaultSafe } from 'src/routes/safe/store/reducer/types/safe'
-import { SetDefaultSafe } from 'src/logic/safe/store/actions/setDefaultSafe'
 import Hairline from 'src/components/layout/Hairline'
 import Link from 'src/components/layout/Link'
 import { sameAddress } from 'src/logic/wallets/ethAddresses'
 import { SAFELIST_ADDRESS } from 'src/routes/routes'
-import { AddressWrapper } from './AddresWrapper'
+import { AddressWrapper } from 'src/components/SafeListSidebar/SafeList/AddressWrapper'
 export const SIDEBAR_SAFELIST_ROW_TESTID = 'SIDEBAR_SAFELIST_ROW_TESTID'
 
 const StyledIcon = styled(Icon)`
@@ -46,10 +45,9 @@ type Props = {
   defaultSafe: DefaultSafe
   safes: SafeRecord[]
   onSafeClick: () => void
-  setDefaultSafe: SetDefaultSafe
 }
 
-const SafeList = ({ currentSafe, defaultSafe, onSafeClick, safes, setDefaultSafe }: Props): React.ReactElement => {
+export const SafeList = ({ currentSafe, defaultSafe, onSafeClick, safes }: Props): React.ReactElement => {
   const classes = useStyles()
 
   return (
@@ -67,7 +65,7 @@ const SafeList = ({ currentSafe, defaultSafe, onSafeClick, safes, setDefaultSafe
               ) : (
                 <div className={classes.noIcon}>placeholder</div>
               )}
-              <AddressWrapper safe={safe} defaultSafe={defaultSafe} setDefaultSafe={setDefaultSafe} />
+              <AddressWrapper safe={safe} defaultSafe={defaultSafe} />
             </ListItem>
           </Link>
           <Hairline />
@@ -76,5 +74,3 @@ const SafeList = ({ currentSafe, defaultSafe, onSafeClick, safes, setDefaultSafe
     </MuiList>
   )
 }
-
-export default SafeList
diff --git a/src/components/SafeListSidebar/index.tsx b/src/components/SafeListSidebar/index.tsx
index 8aeeb77b3f..9846f170c0 100644
--- a/src/components/SafeListSidebar/index.tsx
+++ b/src/components/SafeListSidebar/index.tsx
@@ -1,10 +1,10 @@
-import React, { useEffect, useMemo, useState } from 'react'
+import React, { useEffect, useMemo, useState, ReactElement } from 'react'
 import Drawer from '@material-ui/core/Drawer'
 import SearchIcon from '@material-ui/icons/Search'
 import SearchBar from 'material-ui-search-bar'
-import { connect } from 'react-redux'
+import { useSelector } from 'react-redux'
 
-import SafeList from './SafeList'
+import { SafeList } from './SafeList'
 import { sortedSafeListSelector } from './selectors'
 import useSidebarStyles from './style'
 
@@ -15,11 +15,9 @@ import Hairline from 'src/components/layout/Hairline'
 import Link from 'src/components/layout/Link'
 import Row from 'src/components/layout/Row'
 import { WELCOME_ADDRESS } from 'src/routes/routes'
-import setDefaultSafe from 'src/logic/safe/store/actions/setDefaultSafe'
 import { useAnalytics, SAFE_NAVIGATION_EVENT } from 'src/utils/googleAnalytics'
 
 import { defaultSafeSelector, safeParamAddressFromStateSelector } from 'src/logic/safe/store/selectors'
-import { AppReduxState } from 'src/store'
 
 export const SafeListSidebarContext = React.createContext({
   isOpen: false,
@@ -34,9 +32,17 @@ const filterBy = (filter, safes) =>
       safe.name.toLowerCase().includes(filter.toLowerCase()),
   )
 
-const SafeListSidebar = ({ children, currentSafe, defaultSafe, safes, setDefaultSafeAction }) => {
+type Props = {
+  children: ReactElement
+}
+
+export const SafeListSidebar = ({ children }: Props): ReactElement => {
   const [isOpen, setIsOpen] = useState(false)
   const [filter, setFilter] = useState('')
+  const safes = useSelector(sortedSafeListSelector)
+  const defaultSafe = useSelector(defaultSafeSelector)
+  const currentSafe = useSelector(safeParamAddressFromStateSelector)
+
   const classes = useSidebarStyles()
   const { trackEvent } = useAnalytics()
 
@@ -118,19 +124,9 @@ const SafeListSidebar = ({ children, currentSafe, defaultSafe, safes, setDefault
           defaultSafe={defaultSafe}
           onSafeClick={toggleSidebar}
           safes={filteredSafes}
-          setDefaultSafe={setDefaultSafeAction}
         />
       </Drawer>
       {children}
     </SafeListSidebarContext.Provider>
   )
 }
-
-export default connect(
-  (state: AppReduxState) => ({
-    safes: sortedSafeListSelector(state),
-    defaultSafe: defaultSafeSelector(state),
-    currentSafe: safeParamAddressFromStateSelector(state),
-  }),
-  { setDefaultSafeAction: setDefaultSafe },
-)(SafeListSidebar)

From 60ba8665f8314b5e0956f9e33e934c5a2181258a Mon Sep 17 00:00:00 2001
From: Agustin Pane <agustin.pane@gmail.com>
Date: Thu, 7 Jan 2021 14:32:24 -0300
Subject: [PATCH 11/11] Disabled save button when the owner name input is
 pristine

---
 .../ManageOwners/EditOwnerModal/index.tsx     | 92 ++++++++++---------
 1 file changed, 48 insertions(+), 44 deletions(-)

diff --git a/src/routes/safe/components/Settings/ManageOwners/EditOwnerModal/index.tsx b/src/routes/safe/components/Settings/ManageOwners/EditOwnerModal/index.tsx
index a36354782e..914da3c25c 100644
--- a/src/routes/safe/components/Settings/ManageOwners/EditOwnerModal/index.tsx
+++ b/src/routes/safe/components/Settings/ManageOwners/EditOwnerModal/index.tsx
@@ -72,51 +72,55 @@ export const EditOwnerModal = ({ isOpen, onClose, ownerAddress, selectedOwnerNam
         </IconButton>
       </Row>
       <Hairline />
-      <GnoForm onSubmit={handleSubmit}>
-        {() => (
-          <>
-            <Block className={classes.container}>
-              <Row margin="md">
-                <Field
-                  component={TextField}
-                  initialValue={selectedOwnerName}
-                  name="ownerName"
-                  placeholder="Owner name*"
-                  testId={RENAME_OWNER_INPUT_TEST_ID}
-                  text="Owner name*"
-                  type="text"
-                  validate={composeValidators(required, minMaxLength(1, 50))}
-                />
+      <GnoForm onSubmit={handleSubmit} subscription={{ pristine: true }}>
+        {(...args) => {
+          const pristine = args[2].pristine
+          return (
+            <>
+              <Block className={classes.container}>
+                <Row margin="md">
+                  <Field
+                    component={TextField}
+                    initialValue={selectedOwnerName}
+                    name="ownerName"
+                    placeholder="Owner name*"
+                    testId={RENAME_OWNER_INPUT_TEST_ID}
+                    text="Owner name*"
+                    type="text"
+                    validate={composeValidators(required, minMaxLength(1, 50))}
+                  />
+                </Row>
+                <Row>
+                  <Block justify="center">
+                    <Identicon address={ownerAddress} diameter={32} />
+                    <Paragraph color="disabled" noMargin size="md" style={{ marginLeft: sm, marginRight: sm }}>
+                      {ownerAddress}
+                    </Paragraph>
+                    <CopyBtn content={ownerAddress} />
+                    <ExplorerButton explorerUrl={getExplorerInfo(ownerAddress)} />
+                  </Block>
+                </Row>
+              </Block>
+              <Hairline />
+              <Row align="center" className={classes.buttonRow}>
+                <Button minHeight={42} minWidth={140} onClick={onClose}>
+                  Cancel
+                </Button>
+                <Button
+                  color="primary"
+                  minHeight={42}
+                  minWidth={140}
+                  testId={SAVE_OWNER_CHANGES_BTN_TEST_ID}
+                  type="submit"
+                  variant="contained"
+                  disabled={pristine}
+                >
+                  Save
+                </Button>
               </Row>
-              <Row>
-                <Block justify="center">
-                  <Identicon address={ownerAddress} diameter={32} />
-                  <Paragraph color="disabled" noMargin size="md" style={{ marginLeft: sm, marginRight: sm }}>
-                    {ownerAddress}
-                  </Paragraph>
-                  <CopyBtn content={ownerAddress} />
-                  <ExplorerButton explorerUrl={getExplorerInfo(ownerAddress)} />
-                </Block>
-              </Row>
-            </Block>
-            <Hairline />
-            <Row align="center" className={classes.buttonRow}>
-              <Button minHeight={42} minWidth={140} onClick={onClose}>
-                Cancel
-              </Button>
-              <Button
-                color="primary"
-                minHeight={42}
-                minWidth={140}
-                testId={SAVE_OWNER_CHANGES_BTN_TEST_ID}
-                type="submit"
-                variant="contained"
-              >
-                Save
-              </Button>
-            </Row>
-          </>
-        )}
+            </>
+          )
+        }}
       </GnoForm>
     </Modal>
   )