Initial layout on safe view with dummy token data

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

@@ -0,0 +1,128 @@
+// @flow
+import * as React from 'react'
+import { List } from 'immutable'
+import Row from '~/components/layout/Row'
+import Checkbox from '@material-ui/core/Checkbox'
+import { withStyles } from '@material-ui/core/styles'
+import Paragraph from '~/components/layout/Paragraph'
+import { type Column } from '~/components/Table/TableHead'
+import Table from '~/components/Table'
+import { buildOrderFieldFrom } from '~/components/Table/sorting'
+import { sm } from '~/theme/variables'
+
+const BALANCE_TABLE_ASSET_ID = 'asset'
+const BALANCE_TABLE_BALANCE_ID = 'balance'
+const BALANCE_TABLE_VALUE_ID = 'value'
+
+const generateColumns = () => {
+  const assetRow: Column = {
+    id: BALANCE_TABLE_ASSET_ID,
+    order: false,
+    numeric: false,
+    disablePadding: false,
+    label: 'Asset',
+  }
+
+  const balanceRow: Column = {
+    id: BALANCE_TABLE_BALANCE_ID,
+    order: true,
+    numeric: true,
+    disablePadding: false,
+    label: 'Balance',
+  }
+
+  const valueRow: Column = {
+    id: BALANCE_TABLE_VALUE_ID,
+    order: true,
+    numeric: true,
+    disablePadding: false,
+    label: 'Value',
+  }
+
+  return List([assetRow, balanceRow, valueRow])
+}
+
+type State = {
+  hideZero: boolean,
+}
+
+const styles = {
+  root: {
+    width: '20px',
+    marginRight: sm,
+  },
+  zero: {
+    letterSpacing: '-0.5px',
+  },
+}
+
+type Props = {
+  classes: Object,
+}
+
+class Balances extends React.Component<Props, State> {
+  state = {
+    hideZero: false,
+  }
+
+  handleChange = (e: SyntheticInputEvent<HTMLInputElement>) => {
+    const { checked } = e.target
+
+    this.setState(() => ({ hideZero: checked }))
+  }
+
+  render() {
+    const { hideZero } = this.state
+    const { classes } = this.props
+
+    const columns = generateColumns()
+    const checkboxClasses = {
+      root: classes.root,
+    }
+
+    return (
+      <React.Fragment>
+        <Row align="center">
+          <Checkbox
+            classes={checkboxClasses}
+            checked={hideZero}
+            onChange={this.handleChange}
+            color="secondary"
+            disableRipple
+          />
+          <Paragraph className={classes.zero}>Hide zero balances</Paragraph>
+        </Row>
+        <Table
+          label="Balances"
+          defaultOrderBy={BALANCE_TABLE_ASSET_ID}
+          columns={columns}
+          data={[
+            {
+              [BALANCE_TABLE_ASSET_ID]: 'Ethereum',
+              [BALANCE_TABLE_BALANCE_ID]: '9.394 ETH',
+              [buildOrderFieldFrom(BALANCE_TABLE_BALANCE_ID)]: 9.394,
+              [BALANCE_TABLE_VALUE_ID]: '$539.45',
+              [buildOrderFieldFrom(BALANCE_TABLE_VALUE_ID)]: 539.45,
+            },
+            {
+              [BALANCE_TABLE_ASSET_ID]: 'Gnosis',
+              [BALANCE_TABLE_BALANCE_ID]: '0.599 GNO',
+              [buildOrderFieldFrom(BALANCE_TABLE_BALANCE_ID)]: 0.559,
+              [BALANCE_TABLE_VALUE_ID]: '$23.11',
+              [buildOrderFieldFrom(BALANCE_TABLE_VALUE_ID)]: 23.11,
+            },
+            {
+              [BALANCE_TABLE_ASSET_ID]: 'OmiseGO',
+              [BALANCE_TABLE_BALANCE_ID]: '39.922 OMG',
+              [buildOrderFieldFrom(BALANCE_TABLE_BALANCE_ID)]: 39.922,
+              [BALANCE_TABLE_VALUE_ID]: '$2930.89',
+              [buildOrderFieldFrom(BALANCE_TABLE_VALUE_ID)]: 2930.89,
+            },
+          ]}
+        />
+      </React.Fragment>
+    )
+  }
+}
+
+export default withStyles(styles)(Balances)

src/routes/safe/component/Layout.jsx

@@ -1,20 +1,111 @@
 // @flow
 import * as React from 'react'
+import OpenInNew from '@material-ui/icons/OpenInNew'
+import Tabs from '@material-ui/core/Tabs'
+import Tab from '@material-ui/core/Tab'
+import Hairline from '~/components/layout/Hairline'
+import Block from '~/components/layout/Block'
+import Identicon from '~/components/Identicon'
+import { withStyles } from '@material-ui/core/styles'
+import Heading from '~/components/layout/Heading'
+import Row from '~/components/layout/Row'
+import Paragraph from '~/components/layout/Paragraph'
 import NoSafe from '~/components/NoSafe'
 import { type SelectorProps } from '~/routes/safe/container/selector'
-import GnoSafe from './Safe'
+import { openAddressInEtherScan } from '~/logic/wallets/getWeb3'
+import { sm, secondary } from '~/theme/variables'
+import Balances from './Balances'
 
-type Props = SelectorProps
+type Props = SelectorProps & {
+  classes: Object,
+}
 
-const Layout = ({
+type State = {
-  safe, activeTokens, provider, userAddress,
+  value: number,
-}: Props) => (
+}
-  <React.Fragment>
+
-    { safe
+const openIconStyle = {
-      ? <GnoSafe safe={safe} tokens={activeTokens} userAddress={userAddress} />
+  height: '16px',
-      : <NoSafe provider={provider} text="Not found safe" />
+  color: secondary,
+}
+
+const styles = () => ({
+  container: {
+    display: 'flex',
+    alignItems: 'center',
+  },
+  name: {
+    marginLeft: sm,
+    textOverflow: 'ellipsis',
+    overflow: 'hidden',
+    whiteSpace: 'nowrap',
+  },
+  user: {
+    justifyContent: 'left',
+  },
+  open: {
+    paddingLeft: sm,
+    width: 'auto',
+    '&:hover': {
+      cursor: 'pointer',
+    },
+  },
+})
+
+class Layout extends React.Component<Props, State> {
+  state = {
+    value: 0,
+  }
+
+  handleChange = (event, value) => {
+    this.setState({ value })
+  }
+
+  render() {
+    const {
+      safe, provider, network, classes,
+    } = this.props
+    const { value } = this.state
+
+    if (!safe) {
+      return <NoSafe provider={provider} text="Not found safe" />
     }
-  </React.Fragment>
+    // <GnoSafe safe={safe} tokens={activeTokens} userAddress={userAddress} />
-)
+    const address = safe.get('address')
 
-export default Layout
+    return (
+      <React.Fragment>
+        <Block className={classes.container} margin="xl">
+          <Identicon address={address} diameter={50} />
+          <Block className={classes.name}>
+            <Heading tag="h2" color="secondary">{safe.get('name')}</Heading>
+            <Block align="center" className={classes.user}>
+              <Paragraph size="md" color="disabled" noMargin>{address}</Paragraph>
+              <OpenInNew
+                className={classes.open}
+                style={openIconStyle}
+                onClick={openAddressInEtherScan(address, network)}
+              />
+            </Block>
+          </Block>
+        </Block>
+        <Row>
+          <Tabs
+            value={value}
+            onChange={this.handleChange}
+            indicatorColor="secondary"
+            textColor="secondary"
+          >
+            <Tab label="Balances" />
+            <Tab label="Transactions" />
+            <Tab label="Settings" />
+          </Tabs>
+        </Row>
+        <Hairline color="#c8ced4" />
+        {value === 0 && <Balances />}
+      </React.Fragment>
+    )
+  }
+}
+
+export default withStyles(styles)(Layout)