WA-238 - Refactor Safe component

package.json

@@ -104,7 +104,8 @@
     "material-ui-icons": "^1.0.0-beta.35",
     "react-final-form": "^3.1.2",
     "react-loadable": "^5.3.1",
-    "react-router-dom": "^4.2.2"
+    "react-router-dom": "^4.2.2",
+    "recompose": "^0.27.0"
   },
   "jest": {
     "verbose": true,

src/components/List/ListItemText/index.jsx

@@ -0,0 +1,38 @@
+// @flow
+import * as React from 'react'
+import { ListItemText } from 'material-ui/List'
+import { withStyles } from 'material-ui/styles'
+import { type WithStyles } from '~/theme/mui'
+
+type Props = WithStyles & {
+  primary: string,
+  secondary: string,
+  cut?: boolean,
+}
+
+const styles = {
+  itemTextSecondary: {
+    textOverflow: 'ellipsis',
+    overflow: 'hidden',
+    whiteSpace: 'nowrap',
+  },
+}
+
+const GnoListItemText = ({
+  primary, secondary, classes, cut = false,
+}: Props) => {
+  const cutStyle = cut ? {
+    secondary: classes.itemTextSecondary,
+  } : undefined
+
+  return (
+    <ListItemText
+      classes={cutStyle}
+      inset
+      primary={primary}
+      secondary={secondary}
+    />
+  )
+}
+
+export default withStyles(styles)(GnoListItemText)

src/components/hoc/OpenHoc.jsx

@@ -0,0 +1,12 @@
+// @flow
+import { withStateHandlers } from 'recompose'
+
+export type Open = {
+  open: boolean,
+  toggle: () => void,
+}
+
+export default withStateHandlers(
+  () => ({ open: false }),
+  { toggle: ({ open }) => () => ({ open: !open }) },
+)

src/components/layout/Block/index.jsx

@@ -11,20 +11,20 @@ type Size = 'sm' | 'md' | 'lg' | 'xl'
 type Props = {
   margin?: Size,
   padding?: Size,
-  center?: boolean,
+  align?: 'center' | 'right',
   children: React$Node,
   className?: string,
 }
 
 class Block extends PureComponent<Props> {
   render() {
     const {
-      margin, padding, center, children, className, ...props
+      margin, padding, align, children, className, ...props
     } = this.props
 
     const paddingStyle = padding ? capitalize(padding, 'padding') : undefined
     return (
-      <div className={cx(className, 'block', margin, paddingStyle, { center })} {...props}>
+      <div className={cx(className, 'block', margin, paddingStyle, align)} {...props}>
         { children }
       </div>
     )

src/components/layout/Block/index.scss

@@ -1,5 +1,4 @@
 .block {
-  display: inline-block;
   width: 100%;
   overflow: hidden;
 }
@@ -37,7 +36,13 @@
 }
 
 .center {
-    display: flex;
-    align-items: center;
-    justify-content: center;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+
+.right {
+  display: flex;
+  align-items: center;
+  justify-content: flex-end;
 }

src/components/layout/Col/index.jsx

@@ -16,6 +16,7 @@ type Props = {
   around?: 'xs' | 'sm' | 'md' | 'lg',
   between?: 'xs' | 'sm' | 'md' | 'lg',
   margin?: 'sm' | 'md' | 'lg' | 'xl',
+  layout?: 'inherit' | 'block',
   xs?: number | boolean,
   sm?: number | boolean,
   md?: number | boolean,
@@ -29,7 +30,7 @@ type Props = {
 }
 
 const Col = ({
-  children, margin,
+  children, margin, layout = 'inherit',
   xs, sm, md, lg,
   start, center, end, top, middle, bottom, around, between,
   xsOffset, smOffset, mdOffset, lgOffset,
@@ -54,6 +55,7 @@ const Col = ({
     smOffset ? capitalize(smOffset, 'smOffset') : undefined,
     mdOffset ? capitalize(mdOffset, 'mdOffset') : undefined,
     lgOffset ? capitalize(lgOffset, 'lgOffset') : undefined,
+    layout,
     props.className,
   )
 

src/components/layout/Col/index.scss

@@ -1,7 +1,15 @@
 .col {
   flex: 1 1 auto;
-  display: flex;
   align-items: center;
+  display: inherit;
+}
+
+.inherit {
+  display: inherit;
+}
+
+.block {
+  display: block;
 }
 
 .marginSm {
@@ -128,11 +136,11 @@
 
 @define-mixin autoWidth $size {
   .$(size) {
-      -ms-flex-positive: 1;
-      flex-grow: 1;
-      -ms-flex-preferred-size: 0;
-      flex-basis: 0;
-      max-width: 100%;
+    -ms-flex-positive: 1;
+    flex-grow: 1;
+    -ms-flex-preferred-size: 0;
+    flex-basis: 0;
+    max-width: 100%;
   }
 }
 

src/routes/safe/component/Safe/Address.jsx

@@ -0,0 +1,21 @@
+// @flow
+import * as React from 'react'
+import { ListItem } from 'material-ui/List'
+import Avatar from 'material-ui/Avatar'
+import Mail from 'material-ui-icons/Mail'
+import ListItemText from '~/components/List/ListItemText'
+
+type Props = {
+  address: string,
+}
+
+const Address = ({ address }: Props) => (
+  <ListItem>
+    <Avatar>
+      <Mail />
+    </Avatar>
+    <ListItemText primary="Safe Address" secondary={address} cut />
+  </ListItem>
+)
+
+export default Address

src/routes/safe/component/Safe/Balance.jsx

@@ -0,0 +1,20 @@
+// @flow
+import * as React from 'react'
+import { ListItem, ListItemText } from 'material-ui/List'
+import Avatar from 'material-ui/Avatar'
+import AccountBalance from 'material-ui-icons/AccountBalance'
+
+type Props = {
+  balance: string,
+}
+
+const Balance = ({ balance }: Props) => (
+  <ListItem>
+    <Avatar>
+      <AccountBalance />
+    </Avatar>
+    <ListItemText primary="Balance" secondary={`${balance} ETH`} />
+  </ListItem>
+)
+
+export default Balance

src/routes/safe/component/Safe/Confirmations.jsx

@@ -0,0 +1,25 @@
+// @flow
+import * as React from 'react'
+import { ListItem } from 'material-ui/List'
+import Avatar from 'material-ui/Avatar'
+import DoneAll from 'material-ui-icons/DoneAll'
+import ListItemText from '~/components/List/ListItemText'
+
+type Props = {
+  confirmations: number,
+}
+
+const Confirmations = ({ confirmations }: Props) => (
+  <ListItem>
+    <Avatar>
+      <DoneAll />
+    </Avatar>
+    <ListItemText
+      primary="Confirmations"
+      secondary={`${confirmations} required confirmations per transaction`}
+      cut
+    />
+  </ListItem>
+)
+
+export default Confirmations

src/routes/safe/component/Safe/Owners.jsx

@@ -0,0 +1,58 @@
+// @flow
+import * as React from 'react'
+import openHoc, { type Open } from '~/components/hoc/OpenHoc'
+import { withStyles } from 'material-ui/styles'
+import Collapse from 'material-ui/transitions/Collapse'
+import ListItemText from '~/components/List/ListItemText'
+import List, { ListItem, ListItemIcon } from 'material-ui/List'
+import Avatar from 'material-ui/Avatar'
+import Group from 'material-ui-icons/Group'
+import Person from 'material-ui-icons/Person'
+import ExpandLess from 'material-ui-icons/ExpandLess'
+import ExpandMore from 'material-ui-icons/ExpandMore'
+import { type OwnerProps } from '~/routes/safe/store/model/owner'
+import { type WithStyles } from '~/theme/mui'
+
+const styles = {
+  nested: {
+    paddingLeft: '40px',
+  },
+}
+
+type Props = Open & WithStyles & {
+  owners: List<OwnerProps>,
+}
+
+const Owners = openHoc(({
+  open, toggle, owners, classes,
+}: Props) => (
+  <React.Fragment>
+    <ListItem onClick={toggle}>
+      <Avatar>
+        <Group />
+      </Avatar>
+      <ListItemText primary="Owners" secondary={`${owners.size} owners`} />
+      <ListItemIcon>
+        {open ? <ExpandLess /> : <ExpandMore />}
+      </ListItemIcon>
+    </ListItem>
+    <Collapse in={open} timeout="auto" unmountOnExit>
+      <List component="div" disablePadding>
+        {owners.map(owner => (
+          <ListItem key={owner.address} button className={classes.nested}>
+            <ListItemIcon>
+              <Person />
+            </ListItemIcon>
+            <ListItemText
+              cut
+              primary={owner.name}
+              secondary={owner.address}
+            />
+          </ListItem>
+        ))}
+      </List>
+    </Collapse>
+  </React.Fragment>
+))
+
+export default withStyles(styles)(Owners)