default badges

src/components/Sidebar/SafeList/DefaultBadge.jsx

@@ -0,0 +1,36 @@
+// @flow
+import * as React from 'react'
+import { makeStyles } from '@material-ui/core/styles'
+import Img from '~/components/layout/Img'
+import Block from '~/components/layout/Block'
+import Paragraph from '~/components/layout/Paragraph'
+import { primary, sm } from '~/theme/variables'
+import StarIcon from './assets/star.svg'
+
+const useStyles = makeStyles({
+  container: {
+    background: primary,
+    padding: '5px',
+    boxSizing: 'border-box',
+    width: '73px',
+    justifyContent: 'space-around',
+    marginLeft: sm,
+    color: '#fff',
+    borderRadius: '3px',
+  },
+})
+
+const DefaultBadge = () => {
+  const classes = useStyles()
+
+  return (
+    <Block align="left" className={classes.container}>
+      <Img src={StarIcon} alt="Star Icon" />
+      <Paragraph noMargin size="xs">
+        default
+      </Paragraph>
+    </Block>
+  )
+}
+
+export default DefaultBadge

src/components/Sidebar/SafeList/assets/star.svg

@@ -0,0 +1,3 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="12" height="12" viewBox="0 0 12 12">
+    <path fill="#FFF" fill-rule="nonzero" d="M6 0L3.852 3.336 0 4.344l2.52 3.084-.228 3.972L6 9.954 9.708 11.4 9.48 7.428 12 4.344 8.148 3.336 6 0zM4.428 4.8c.372 0 .672.3.672.678 0 .371-.3.672-.672.672a.672.672 0 0 1-.678-.672c0-.378.3-.678.678-.678zm3.15 0c.372 0 .672.3.672.678 0 .371-.3.672-.672.672a.672.672 0 0 1-.678-.672c0-.378.3-.678.678-.678zM4.2 7.5h3.6a1.95 1.95 0 0 1-3.6 0z"/>
+</svg>

src/components/Sidebar/SafeList/index.jsx

@@ -14,14 +14,16 @@ import Identicon from '~/components/Identicon'
 import {
   mediumFontSize, sm, secondary, primary,
 } from '~/theme/variables'
-import { shortVersionOf } from '~/logic/wallets/ethAddresses'
+import { shortVersionOf, sameAddress } from '~/logic/wallets/ethAddresses'
 import { type Safe } from '~/routes/safe/store/models/safe'
 import { SAFELIST_ADDRESS } from '~/routes/routes'
+import DefaultBadge from './DefaultBadge'
 
 type SafeListProps = {
   safes: List<Safe>,
   onSafeClick: Function,
   setDefaultSafe: Function,
+  defaultSafe: string,
 }
 
 const useStyles = makeStyles({
@@ -39,9 +41,15 @@ const useStyles = makeStyles({
     color: primary,
     fontSize: mediumFontSize,
   },
+  makeDefaultBtn: {
+    padding: 0,
+    marginLeft: sm,
+  },
 })
 
-const SafeList = ({ safes, onSafeClick, setDefaultSafe }: SafeListProps) => {
+const SafeList = ({
+  safes, onSafeClick, setDefaultSafe, defaultSafe,
+}: SafeListProps) => {
   const classes = useStyles()
 
   return (
@@ -63,14 +71,22 @@ const SafeList = ({ safes, onSafeClick, setDefaultSafe }: SafeListProps) => {
                 {' '}
 ETH
               </Paragraph>
-              <ButtonLink
+              {sameAddress(defaultSafe, safe.address) ? (
-                size="sm"
+                <DefaultBadge />
-                onClick={() => {
+              ) : (
-                  setDefaultSafe(safe.address)
+                <ButtonLink
-                }}
+                  className={classes.makeDefaultBtn}
-              >
+                  size="sm"
-                Make default
+                  onClick={(e) => {
-              </ButtonLink>
+                    e.preventDefault()
+                    e.stopPropagation()
+
+                    setDefaultSafe(safe.address)
+                  }}
+                >
+                  Make default
+                </ButtonLink>
+              )}
             </ListItem>
           </Link>
           <Hairline />

src/components/Sidebar/index.jsx

@@ -13,7 +13,7 @@ import Spacer from '~/components/Spacer'
 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 { safesListSelector, defaultSafeSelector } from '~/routes/safeList/store/selectors'
 import setDefaultSafe from '~/routes/safe/store/actions/setDefaultSafe'
 import useSidebarStyles from './style'
 import SafeList from './SafeList'
@@ -35,6 +35,7 @@ type SidebarProps = {
   children: React.Node,
   safes: List<Safe>,
   setDefaultSafeAction: Function,
+  defaultSafe: string,
 }
 
 const filterBy = (filter: string, safes: List<Safe>): List<Safe> => safes.filter(
@@ -43,7 +44,9 @@ const filterBy = (filter: string, safes: List<Safe>): List<Safe> => safes.filter
       || safe.name.toLowerCase().includes(filter.toLowerCase()),
 )
 
-const Sidebar = ({ children, safes, setDefaultSafeAction }: SidebarProps) => {
+const Sidebar = ({
+  children, safes, setDefaultSafeAction, defaultSafe,
+}: SidebarProps) => {
   const [isOpen, setIsOpen] = useState<boolean>(false)
   const [filter, setFilter] = useState<string>('')
   const classes = useSidebarStyles()
@@ -112,7 +115,12 @@ const Sidebar = ({ children, safes, setDefaultSafeAction }: SidebarProps) => {
             <Spacer />
           </Row>
           <Hairline />
-          <SafeList safes={filteredSafes} onSafeClick={toggleSidebar} setDefaultSafe={setDefaultSafeAction} />
+          <SafeList
+            safes={filteredSafes}
+            onSafeClick={toggleSidebar}
+            setDefaultSafe={setDefaultSafeAction}
+            defaultSafe={defaultSafe}
+          />
         </Drawer>
       </ClickAwayListener>
       {children}
@@ -122,6 +130,6 @@ const Sidebar = ({ children, safes, setDefaultSafeAction }: SidebarProps) => {
 
 export default connect<Object, Object, ?Function, ?Object>(
   // $FlowFixMe
-  (state) => ({ safes: safesListSelector(state) }),
+  (state) => ({ safes: safesListSelector(state), defaultSafe: defaultSafeSelector(state) }),
   { setDefaultSafeAction: setDefaultSafe },
 )(Sidebar)