Put back the accounts empty state in MainSideBar

src/components/MainSideBar.js

@@ -145,6 +145,7 @@ class MainSideBar extends PureComponent<Props> {
             </PlusWrapper>
           }
           items={accountsItems}
+          emptyText={t('emptyState:sidebar.text')}
         />
       </Box>
     )

src/components/base/SideBar/SideBarList.js

@@ -17,11 +17,12 @@ type Props = {
   activeValue?: string,
   scroll?: boolean,
   titleRight?: any, // TODO: type should be more precise, but, eh ¯\_(ツ)_/¯
+  emptyText?: string,
 }
 
 class SideBarList extends PureComponent<Props> {
   render() {
-    const { items, title, activeValue, scroll, titleRight, ...props } = this.props
+    const { items, title, activeValue, scroll, titleRight, emptyText, ...props } = this.props
     const ListWrapper = scroll ? GrowScroll : Box
     return (
       <Fragment>
@@ -34,6 +35,7 @@ class SideBarList extends PureComponent<Props> {
             <Space of={20} />
           </Fragment>
         )}
+        {items.length > 0 ? (
           <ListWrapper flow={2} px={3} fontSize={3} {...props}>
             {items.map(item => {
               const itemProps = {
@@ -43,6 +45,11 @@ class SideBarList extends PureComponent<Props> {
               return <SideBarListItem key={item.value} {...itemProps} />
             })}
           </ListWrapper>
+        ) : emptyText ? (
+          <Box px={4} ff="Open Sans|Regular" fontSize={3} color="grey">
+            {emptyText}
+          </Box>
+        ) : null}
       </Fragment>
     )
   }