Feature #190: Sidebar improvements

src/components/Header/components/SafeListHeader/index.jsx

@@ -45,7 +45,6 @@ const SafeListHeader = ({ safesCount }: Props) => {
   return (
     <Col start="xs" middle="xs" className={classes.container}>
       Safes
-      {' '}
       <Paragraph size="xs" className={classes.counter}>
         {safesCount}
       </Paragraph>

src/components/Sidebar/SafeList/DefaultBadge.jsx

@@ -4,30 +4,33 @@ 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'
+import { primary, secondaryBackground, md } from '~/theme/variables'
+import HomeIcon from '~/assets/icons/shape.svg'
 
 const useStyles = makeStyles({
   container: {
-    background: primary,
+    background: secondaryBackground,
     padding: '5px',
     boxSizing: 'border-box',
-    width: '73px',
+    width: '76px',
     justifyContent: 'space-around',
-    marginLeft: sm,
+    marginLeft: md,
     color: '#fff',
     borderRadius: '3px',
   },
+  defaultText: {
+    color: primary,
+  },
 })
 
 const DefaultBadge = () => {
   const classes = useStyles()
 
   return (
     <Block justify="left" className={classes.container}>
-      <Img src={StarIcon} alt="Star Icon" />
-      <Paragraph noMargin size="xs">
-        default
+      <Img src={HomeIcon} alt="Home Icon" />
+      <Paragraph noMargin size="xs" className={classes.defaultText}>
+        Default
       </Paragraph>
     </Block>
   )

src/components/Sidebar/SafeList/index.jsx

@@ -12,18 +12,21 @@ import Paragraph from '~/components/layout/Paragraph'
 import ButtonLink from '~/components/layout/ButtonLink'
 import Identicon from '~/components/Identicon'
 import {
-  mediumFontSize, sm, secondary, primary,
+  mediumFontSize, sm, primary, disabled, md,
 } from '~/theme/variables'
 import { formatAmount } from '~/logic/tokens/utils/formatAmount'
 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'
+import Img from '~/components/layout/Img'
+import check from '~/assets/icons/check.svg'
 
 export const SIDEBAR_SAFELIST_ROW_TESTID = 'SIDEBAR_SAFELIST_ROW_TESTID'
 
 type SafeListProps = {
   safes: List<Safe>,
+  currentSafe: string,
   onSafeClick: Function,
   setDefaultSafe: Function,
   defaultSafe: string,
@@ -33,9 +36,12 @@ const useStyles = makeStyles({
   icon: {
     marginRight: sm,
   },
+  checkIcon: {
+    marginRight: '10px',
+  },
   list: {
     overflow: 'hidden',
-    overflowY: 'scroll',
+    overflowY: 'hidden',
     padding: 0,
     height: '100%',
   },
@@ -50,21 +56,25 @@ const useStyles = makeStyles({
     },
   },
   safeName: {
-    color: secondary,
+    color: primary,
   },
   safeAddress: {
-    color: primary,
+    color: disabled,
     fontSize: mediumFontSize,
   },
   makeDefaultBtn: {
     padding: 0,
-    marginLeft: sm,
+    marginLeft: md,
+    visibility: 'hidden',
+  },
+  noIcon: {
     visibility: 'hidden',
+    width: '28px',
   },
 })
 
 const SafeList = ({
-  safes, onSafeClick, setDefaultSafe, defaultSafe,
+  safes, onSafeClick, setDefaultSafe, defaultSafe, currentSafe,
 }: SafeListProps) => {
   const classes = useStyles()
 
@@ -78,6 +88,11 @@ const SafeList = ({
             data-testid={SIDEBAR_SAFELIST_ROW_TESTID}
           >
             <ListItem classes={{ root: classes.listItemRoot }}>
+              { sameAddress(currentSafe, safe.address) ? (
+                <ListItemIcon>
+                  <Img src={check} alt="check" className={classes.checkIcon} />
+                </ListItemIcon>
+              ) : <div className={classes.noIcon}>placeholder</div> }
               <ListItemIcon>
                 <Identicon address={safe.address} diameter={32} className={classes.icon} />
               </ListItemIcon>

src/components/Sidebar/index.jsx

@@ -14,7 +14,10 @@ import Hairline from '~/components/layout/Hairline'
 import Row from '~/components/layout/Row'
 import { WELCOME_ADDRESS } from '~/routes/routes'
 import { type Safe } from '~/routes/safe/store/models/safe'
-import { defaultSafeSelector } from '~/routes/safe/store/selectors'
+import {
+  defaultSafeSelector,
+  safeParamAddressFromStateSelector,
+} from '~/routes/safe/store/selectors'
 import setDefaultSafe from '~/routes/safe/store/actions/setDefaultSafe'
 import { sortedSafeListSelector } from './selectors'
 import SafeList from './SafeList'
@@ -39,6 +42,7 @@ type SidebarProps = {
   safes: List<Safe>,
   setDefaultSafeAction: Function,
   defaultSafe: string,
+  currentSafe: string,
 }
 
 const filterBy = (filter: string, safes: List<Safe>): List<Safe> => safes.filter(
@@ -48,7 +52,7 @@ const filterBy = (filter: string, safes: List<Safe>): List<Safe> => safes.filter
 )
 
 const Sidebar = ({
-  children, safes, setDefaultSafeAction, defaultSafe,
+  children, safes, setDefaultSafeAction, defaultSafe, currentSafe,
 }: SidebarProps) => {
   const [isOpen, setIsOpen] = useState<boolean>(false)
   const [filter, setFilter] = useState<string>('')
@@ -97,7 +101,6 @@ const Sidebar = ({
           classes={{ paper: classes.sidebarPaper }}
           ModalProps={{ onBackdropClick: toggleSidebar }}
         >
-          <div className={classes.headerPlaceholder} />
           <Row align="center">
             <SearchIcon className={classes.searchIcon} />
             <SearchBar
@@ -130,6 +133,7 @@ const Sidebar = ({
             onSafeClick={toggleSidebar}
             setDefaultSafe={setDefaultSafeAction}
             defaultSafe={defaultSafe}
+            currentSafe={currentSafe}
           />
           <LegalLinks toggleSidebar={toggleSidebar} />
         </Drawer>
@@ -141,6 +145,6 @@ const Sidebar = ({
 
 export default connect<Object, Object, ?Function, ?Object>(
   // $FlowFixMe
-  (state) => ({ safes: sortedSafeListSelector(state), defaultSafe: defaultSafeSelector(state) }),
+  (state) => ({ safes: sortedSafeListSelector(state), defaultSafe: defaultSafeSelector(state), currentSafe: safeParamAddressFromStateSelector(state) }),
   { setDefaultSafeAction: setDefaultSafe },
 )(Sidebar)

src/components/Sidebar/style.js

@@ -5,13 +5,24 @@ import {
 } from '~/theme/variables'
 
 const sidebarWidth = '400px'
+const sidebarMarginLeft = '12px'
+const sidebarMarginTop = '12px'
+const sidebarMarginBottom = '12px'
+const sidebarBorderRadius = '8px'
 
 const useSidebarStyles = makeStyles({
   sidebar: {
     width: sidebarWidth,
+    marginLeft: sidebarMarginLeft,
+    borderRadius: sidebarBorderRadius,
+    top: sidebarMarginTop,
   },
   sidebarPaper: {
     width: sidebarWidth,
+    marginLeft: sidebarMarginLeft,
+    top: `calc(${headerHeight} + ${sidebarMarginTop})`,
+    maxHeight: `calc(100vh - ${headerHeight} - ${sidebarMarginTop} - ${sidebarMarginBottom})`,
+    borderRadius: sidebarBorderRadius,
   },
   headerPlaceholder: {
     minHeight: headerHeight,

src/routes/safe/components/Transactions/TxsTable/columns.js

@@ -90,15 +90,13 @@ const getTransactionTableData = (tx: Transaction): TransactionRow => {
   }
 }
 
-export const getTxTableData = (transactions: List<Transaction | IncomingTransaction>): List<TransactionRow> => {
-  return transactions.map((tx) => {
-    if (tx.type === INCOMING_TX_TYPE) {
-      return getIncomingTxTableData(tx)
-    }
-
-    return getTransactionTableData(tx)
-  })
-}
+export const getTxTableData = (transactions: List<Transaction | IncomingTransaction>): List<TransactionRow> => transactions.map((tx) => {
+  if (tx.type === INCOMING_TX_TYPE) {
+    return getIncomingTxTableData(tx)
+  }
+
+  return getTransactionTableData(tx)
+})
 
 export const generateColumns = () => {
   const nonceColumn: Column = {

src/routes/safe/store/middleware/notificationsMiddleware.js

@@ -1,14 +1,13 @@
 // @flow
 import type { AnyAction, Store } from 'redux'
 import { push } from 'connected-react-router'
-import { Map } from 'immutable'
 import { type GlobalState } from '~/store/'
 import { ADD_TRANSACTIONS } from '~/routes/safe/store/actions/addTransactions'
 import { ADD_INCOMING_TRANSACTIONS } from '~/routes/safe/store/actions/addIncomingTransactions'
 import { getAwaitingTransactions } from '~/logic/safe/transactions/awaitingTransactions'
 import { userAccountSelector } from '~/logic/wallets/store/selectors'
 import enqueueSnackbar from '~/logic/notifications/store/actions/enqueueSnackbar'
-import { enhanceSnackbarForAction, NOTIFICATIONS, SUCCESS } from '~/logic/notifications'
+import { enhanceSnackbarForAction, NOTIFICATIONS } from '~/logic/notifications'
 import closeSnackbarAction from '~/logic/notifications/store/actions/closeSnackbar'
 import { getIncomingTxAmount } from '~/routes/safe/components/Transactions/TxsTable/columns'
 import updateSafe from '~/routes/safe/store/actions/updateSafe'
@@ -62,9 +61,9 @@ const notificationsMiddleware = (store: Store<GlobalState>) => (next: Function)
                 enqueueSnackbar(
                   enhanceSnackbarForAction({
                     ...TX_INCOMING_MSG,
-                    message: 'Multiple incoming transfers'
-                  })
-                )
+                    message: 'Multiple incoming transfers',
+                  }),
+                ),
               )
             } else {
               newIncomingTransactions.forEach((tx) => {

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

@@ -1,14 +1,14 @@
 // @flow
 import { Map, List, Set } from 'immutable'
-import { type Match } from 'react-router-dom'
+import { type Match, matchPath } from 'react-router-dom'
 import { createSelector, createStructuredSelector, type Selector } from 'reselect'
 import { type GlobalState } from '~/store/index'
-import { SAFE_PARAM_ADDRESS } from '~/routes/routes'
+import { SAFE_PARAM_ADDRESS, SAFELIST_ADDRESS } from '~/routes/routes'
 import { type Safe } from '~/routes/safe/store/models/safe'
 import { type State as TransactionsState, TRANSACTIONS_REDUCER_ID } from '~/routes/safe/store/reducer/transactions'
 import {
   type IncomingState as IncomingTransactionsState,
-  INCOMING_TRANSACTIONS_REDUCER_ID
+  INCOMING_TRANSACTIONS_REDUCER_ID,
 } from '~/routes/safe/store/reducer/incomingTransactions'
 import { type Transaction } from '~/routes/safe/store/models/transaction'
 import { type Confirmation } from '~/routes/safe/store/models/confirmation'
@@ -70,6 +70,15 @@ export const safeTransactionsSelector: Selector<GlobalState, RouterProps, List<T
   },
 )
 
+export const safeParamAddressFromStateSelector = (state: GlobalState): string => {
+  const match = matchPath(
+    state.router.location.pathname,
+    { path: `${SAFELIST_ADDRESS}/:safeAddress` },
+  )
+
+  return match ? match.params.safeAddress : null
+}
+
 export const safeIncomingTransactionsSelector: Selector<GlobalState, RouterProps, List<IncomingTransaction>> = createSelector(
   incomingTransactionsSelector,
   safeParamAddressSelector,
@@ -83,7 +92,7 @@ export const safeIncomingTransactionsSelector: Selector<GlobalState, RouterProps
     }
 
     return incomingTransactions.get(address) || List([])
-  }
+  },
 )
 
 export const confirmationsTransactionSelector: Selector<GlobalState, TransactionProps, number> = createSelector(

src/theme/variables.js

@@ -13,6 +13,7 @@ const md = '16px'
 const primary = '#001428'
 const secondary = '#008C73'
 const secondaryTextOrSvg = '#B2B5B2'
+const secondaryBackground = '#f0efee'
 const sm = '8px'
 const warningColor = '#ffc05f'
 const xl = '32px'
@@ -57,6 +58,7 @@ module.exports = {
   secondary,
   secondaryFontFamily: 'Averta, monospace',
   secondaryText: secondaryTextOrSvg,
+  secondaryBackground,
   sm,
   smallFontSize: '12px',
   warning: warningColor,