Adding secondary text of token and styling list

src/components/Modal/index.jsx

@@ -29,6 +29,7 @@ const styles = () => ({
     '&:focus': {
       outline: 'none',
     },
+    display: 'grid',
   },
 })
 

src/routes/safe/component/Balances/Tokens/index.jsx

@@ -1,18 +1,27 @@
 // @flow
 import * as React from 'react'
+import { List } from 'immutable'
 import classNames from 'classnames/bind'
 import SearchBar from 'material-ui-search-bar'
 import { withStyles } from '@material-ui/core/styles'
+import MuiList from '@material-ui/core/List'
+import Img from '~/components/layout/Img'
+import ListItem from '@material-ui/core/ListItem'
+import ListItemIcon from '@material-ui/core/ListItemIcon'
+import ListItemSecondaryAction from '@material-ui/core/ListItemSecondaryAction'
+import ListItemText from '@material-ui/core/ListItemText'
 import Close from '@material-ui/icons/Close'
 import Search from '@material-ui/icons/Search'
 import IconButton from '@material-ui/core/IconButton'
 import Paragraph from '~/components/layout/Paragraph'
 import Button from '~/components/layout/Button'
+import Switch from '@material-ui/core/Switch'
 import Divider from '~/components/layout/Divider'
 import Hairline from '~/components/layout/Hairline'
 import Spacer from '~/components/Spacer'
 import Row from '~/components/layout/Row'
-import { lg, md, sm, xs, mediumFontSize } from '~/theme/variables'
+import { lg, md, sm, xs, mediumFontSize, border } from '~/theme/variables'
+import { type Token } from '~/routes/tokens/store/model/token'
 
 const styles = () => ({
   heading: {
@@ -41,6 +50,14 @@ const styles = () => ({
     paddingRight: md,
     paddingLeft: md,
   },
+  list: {
+    overflow: 'hidden',
+    overflowY: 'scroll',
+  },
+  token: {
+    minHeight: '50px',
+    borderBottom: `1px solid ${border}`,
+  },
   searchInput: {
     backgroundColor: 'transparent',
     lineHeight: 'initial',
@@ -77,6 +94,7 @@ const styles = () => ({
 type Props = {
   onClose: () => void,
   classes: Object,
+  tokens: List<Token>,
 }
 
 class Tokens extends React.Component<Props> {
@@ -86,7 +104,7 @@ class Tokens extends React.Component<Props> {
   }
 
   render() {
-    const { onClose, classes } = this.props
+    const { onClose, classes, tokens } = this.props
     const searchClasses = {
       input: classes.searchInput,
       root: classes.searchRoot,
@@ -119,6 +137,22 @@ class Tokens extends React.Component<Props> {
           </Button>
         </Row>
         <Hairline />
+        <MuiList className={classes.list}>
+          {tokens.map((token: Token) => (
+            <ListItem key={token.get('address')} className={classes.token}>
+              <ListItemIcon>
+                <Img src={token.get('logoUrl')} height={28} alt={token.get('name')} />
+              </ListItemIcon>
+              <ListItemText primary={token.get('symbol')} secondary={token.get('name')} />
+              <ListItemSecondaryAction>
+                <Switch
+                  onChange={undefined}
+                  checked
+                />
+              </ListItemSecondaryAction>
+            </ListItem>
+          ))}
+        </MuiList>
       </React.Fragment>
     )
   }

src/routes/safe/component/Balances/index.jsx

@@ -16,11 +16,11 @@ import Paragraph from '~/components/layout/Paragraph'
 import Modal from '~/components/Modal'
 import { type Column, cellWidth } from '~/components/Table/TableHead'
 import Table from '~/components/Table'
-import { sm, xs } from '~/theme/variables'
 import { getBalanceData, generateColumns, BALANCE_TABLE_ASSET_ID, type BalanceRow, filterByZero } from './dataFetcher'
 import Tokens from './Tokens'
 import Send from './Send'
 import Receive from './Receive'
+import { styles } from './style'
 
 type State = {
   hideZero: boolean,
@@ -29,55 +29,6 @@ type State = {
   showSend: boolean,
 }
 
-const styles = theme => ({
-  root: {
-    width: '20px',
-    marginRight: sm,
-  },
-  zero: {
-    letterSpacing: '-0.5px',
-  },
-  message: {
-    margin: `${sm} 0`,
-  },
-  actionIcon: {
-    marginRight: theme.spacing.unit,
-  },
-  iconSmall: {
-    fontSize: 16,
-  },
-  hide: {
-    '&:hover': {
-      backgroundColor: '#fff3e2',
-    },
-    '&:hover $actions': {
-      visibility: 'initial',
-    },
-  },
-  actions: {
-    justifyContent: 'flex-end',
-    visibility: 'hidden',
-  },
-  send: {
-    minWidth: '0px',
-    marginRight: sm,
-    width: '70px',
-  },
-  receive: {
-    minWidth: '0px',
-    width: '95px',
-  },
-  leftIcon: {
-    marginRight: xs,
-  },
-  links: {
-    textDecoration: 'underline',
-    '&:hover': {
-      cursor: 'pointer',
-    },
-  },
-})
-
 type Props = {
   classes: Object,
   granted: boolean,
@@ -89,7 +40,7 @@ type Action = 'Token' | 'Send' | 'Receive'
 class Balances extends React.Component<Props, State> {
   state = {
     hideZero: false,
-    showToken: false,
+    showToken: true,
     showSend: false,
     showReceive: false,
   }

src/routes/safe/component/Balances/style.js

@@ -0,0 +1,51 @@
+// @flow
+import { sm, xs } from '~/theme/variables'
+
+export const styles = (theme: Object) => ({
+  root: {
+    width: '20px',
+    marginRight: sm,
+  },
+  zero: {
+    letterSpacing: '-0.5px',
+  },
+  message: {
+    margin: `${sm} 0`,
+  },
+  actionIcon: {
+    marginRight: theme.spacing.unit,
+  },
+  iconSmall: {
+    fontSize: 16,
+  },
+  hide: {
+    '&:hover': {
+      backgroundColor: '#fff3e2',
+    },
+    '&:hover $actions': {
+      visibility: 'initial',
+    },
+  },
+  actions: {
+    justifyContent: 'flex-end',
+    visibility: 'hidden',
+  },
+  send: {
+    minWidth: '0px',
+    marginRight: sm,
+    width: '70px',
+  },
+  receive: {
+    minWidth: '0px',
+    width: '95px',
+  },
+  leftIcon: {
+    marginRight: xs,
+  },
+  links: {
+    textDecoration: 'underline',
+    '&:hover': {
+      cursor: 'pointer',
+    },
+  },
+})

src/theme/mui.js

@@ -181,6 +181,19 @@ export default createMuiTheme({
         backgroundColor: 'rgba(228, 232, 241, 0.75)',
       },
     },
+    MuiListItemText: {
+      primary: {
+        fontFamily: 'Roboto Mono, monospace',
+        fontSize: mediumFontSize,
+        fontWeight: bolderFont,
+        color: primary,
+      },
+      secondary: {
+        fontFamily: 'Roboto Mono, monospace',
+        fontSize: smallFontSize,
+        color: disabled,
+      },
+    },
   },
   palette,
 })