setDefaultSafe action

src/components/Sidebar/SafeList.jsx

@@ -9,6 +9,7 @@ import ListItemText from '@material-ui/core/ListItemText'
 import Link from '~/components/layout/Link'
 import Hairline from '~/components/layout/Hairline'
 import Paragraph from '~/components/layout/Paragraph'
+import ButtonLink from '~/components/layout/ButtonLink'
 import Identicon from '~/components/Identicon'
 import {
   mediumFontSize, sm, secondary, primary,
@@ -20,6 +21,7 @@ import { SAFELIST_ADDRESS } from '~/routes/routes'
 type SafeListProps = {
   safes: List<Safe>,
   onSafeClick: Function,
+  setDefaultSafe: Function,
 }
 
 const useStyles = makeStyles({
@@ -39,7 +41,7 @@ const useStyles = makeStyles({
   },
 })
 
-const SafeList = ({ safes, onSafeClick }: SafeListProps) => {
+const SafeList = ({ safes, onSafeClick, setDefaultSafe }: SafeListProps) => {
   const classes = useStyles()
 
   return (
@@ -59,9 +61,16 @@ const SafeList = ({ safes, onSafeClick }: SafeListProps) => {
               <Paragraph size="lg" color="primary">
                 {safe.ethBalance}
                 {' '}
-                ETH
+ETH
               </Paragraph>
-              Make default
+              <ButtonLink
+                size="sm"
+                onClick={() => {
+                  setDefaultSafe(safe.address)
+                }}
+              >
+                Make default
+              </ButtonLink>
             </ListItem>
           </Link>
           <Hairline />

src/components/Sidebar/index.jsx

@@ -14,6 +14,7 @@ import Hairline from '~/components/layout/Hairline'
 import Row from '~/components/layout/Row'
 import { type Safe } from '~/routes/safe/store/models/safe'
 import { safesListSelector } from '~/routes/safeList/store/selectors'
+import setDefaultSafe from '~/routes/safe/store/actions/setDefaultSafe'
 import useSidebarStyles from './style'
 import SafeList from './SafeList'
 import { WELCOME_ADDRESS } from '~/routes/routes'
@@ -33,6 +34,7 @@ export const SidebarContext = React.createContext<TSidebarContext>({
 type SidebarProps = {
   children: React.Node,
   safes: List<Safe>,
+  setDefaultSafeAction: Function,
 }
 
 const filterBy = (filter: string, safes: List<Safe>): List<Safe> => safes.filter(
@@ -41,7 +43,7 @@ const filterBy = (filter: string, safes: List<Safe>): List<Safe> => safes.filter
       || safe.name.toLowerCase().includes(filter.toLowerCase()),
 )
 
-const Sidebar = ({ children, safes }: SidebarProps) => {
+const Sidebar = ({ children, safes, setDefaultSafeAction }: SidebarProps) => {
   const [isOpen, setIsOpen] = useState<boolean>(false)
   const [filter, setFilter] = useState<string>('')
   const classes = useSidebarStyles()
@@ -110,7 +112,7 @@ const Sidebar = ({ children, safes }: SidebarProps) => {
             <Spacer />
           </Row>
           <Hairline />
-          <SafeList safes={filteredSafes} onSafeClick={toggleSidebar} />
+          <SafeList safes={filteredSafes} onSafeClick={toggleSidebar} setDefaultSafe={setDefaultSafeAction} />
         </Drawer>
       </ClickAwayListener>
       {children}
@@ -121,5 +123,5 @@ const Sidebar = ({ children, safes }: SidebarProps) => {
 export default connect<Object, Object, ?Function, ?Object>(
   // $FlowFixMe
   (state) => ({ safes: safesListSelector(state) }),
-  null,
+  { setDefaultSafeAction: setDefaultSafe },
 )(Sidebar)

src/routes/safeList/store/selectors/index.js

@@ -5,6 +5,8 @@ import { type GlobalState } from '~/store/index'
 import { type Safe } from '~/routes/safe/store/models/safe'
 import { SAFE_REDUCER_ID } from '~/routes/safe/store/reducer/safe'
 
+const safesStateSelector = (state: GlobalState): Map<string, *> => state[SAFE_REDUCER_ID]
+
 export const safesMapSelector = (state: GlobalState): Map<string, Safe> => state[SAFE_REDUCER_ID].get('safes')
 
 export const safesListSelector: Selector<GlobalState, {}, List<Safe>> = createSelector(
@@ -16,3 +18,8 @@ export const safesCountSelector: Selector<GlobalState, {}, number> = createSelec
   safesMapSelector,
   (safes: Map<string, Safe>): number => safes.size,
 )
+
+export const defaultSafeSelector: Selector<GlobalState, {}, string> = createSelector(
+  safesStateSelector,
+  (safeState: Map<string, *>): string => safeState.get('defaultSafe'),
+)