Merge pull request #86 from gnosis/development

Feature: Safe Overview's Balance & Manage Tokens

.storybook/preview-head.html

@@ -1,3 +1,3 @@
-<link href="https://fonts.googleapis.com/css?family=Montserrat:300,400,700" rel="stylesheet">
-<link href="https://fonts.googleapis.com/css?family=Roboto+Mono:300,400,500" rel="stylesheet">
+<link href="https://fonts.googleapis.com/css?family=Montserrat:400,500" rel="stylesheet">
+<link href="https://fonts.googleapis.com/css?family=Roboto+Mono:400,500,700" rel="stylesheet">
 <link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons">

package.json

@@ -72,6 +72,7 @@
     "immutable": "^4.0.0-rc.9",
     "jest": "^22.4.2",
     "json-loader": "^0.5.7",
+    "material-ui-search-bar": "^1.0.0-beta.13",
     "postcss-loader": "^2.1.1",
     "postcss-mixins": "^6.2.0",
     "postcss-simple-vars": "^4.1.0",

public/index.html

@@ -4,8 +4,8 @@
     <meta charset="utf-8">
     <meta name="viewport" content="width=device-width, initial-scale=1">
     <link rel="shortcut icon" href="favicon.ico">
-    <link href="https://fonts.googleapis.com/css?family=Montserrat:300,400,700" rel="stylesheet">
-    <link href="https://fonts.googleapis.com/css?family=Roboto+Mono:300,400,500" rel="stylesheet">
+    <link href="https://fonts.googleapis.com/css?family=Montserrat:400,500" rel="stylesheet">
+    <link href="https://fonts.googleapis.com/css?family=Roboto+Mono:400,500,700" rel="stylesheet">
     <link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons">
     <title>Multisig Safe</title>
   </head>

src/components/Header/component/CircleDot.jsx

@@ -0,0 +1,89 @@
+// @flow
+import * as React from 'react'
+import { withStyles } from '@material-ui/core/styles'
+import Block from '~/components/layout/Block'
+import Dot from '@material-ui/icons/FiberManualRecord'
+import Img from '~/components/layout/Img'
+import { fancy, border, warning } from '~/theme/variables'
+
+const key = require('../assets/key.svg')
+const triangle = require('../assets/triangle.svg')
+
+const styles = () => ({
+  root: {
+    display: 'flex',
+  },
+  dot: {
+    position: 'relative',
+    backgroundColor: '#ffffff',
+    color: fancy,
+  },
+  key: {
+    display: 'flex',
+    alignItems: 'center',
+    justifyContent: 'center',
+    backgroundColor: border,
+  },
+  warning: {
+    position: 'relative',
+    top: '-2px',
+  },
+})
+
+type Mode = 'error' | 'warning'
+
+type Props = {
+  classes: Object,
+  keySize: number,
+  circleSize: number,
+  dotSize: number,
+  dotTop: number,
+  dotRight: number,
+  mode: Mode,
+  center?: boolean,
+  hideDot?: boolean,
+}
+
+const buildKeyStyleFrom = (size: number, center: boolean, dotSize: number) => ({
+  width: `${size}px`,
+  height: `${size}px`,
+  marginLeft: center ? `${dotSize}px` : 'none',
+  borderRadius: `${size}px`,
+})
+
+const buildDotStyleFrom = (size: number, top: number, right: number, mode: Mode) => ({
+  width: `${size}px`,
+  height: `${size}px`,
+  borderRadius: `${size}px`,
+  top: `${top}px`,
+  right: `${right}px`,
+  color: mode === 'error' ? fancy : warning,
+})
+
+const KeyRing = ({
+  classes, circleSize, keySize, dotSize, dotTop, dotRight, mode, center = false, hideDot = false,
+}: Props) => {
+  const keyStyle = buildKeyStyleFrom(circleSize, center, dotSize)
+  const dotStyle = buildDotStyleFrom(dotSize, dotTop, dotRight, mode)
+  const isWarning = mode === 'warning'
+  const img = isWarning ? triangle : key
+
+  return (
+    <React.Fragment>
+      <Block className={classes.root}>
+        <Block className={classes.key} style={keyStyle}>
+          <Img
+            src={img}
+            height={keySize}
+            width={isWarning ? keySize + 2 : keySize}
+            alt="Status connection"
+            className={isWarning ? classes.warning : undefined}
+          />
+        </Block>
+        { !hideDot && <Dot className={classes.dot} style={dotStyle} /> }
+      </Block>
+    </React.Fragment>
+  )
+}
+
+export default withStyles(styles)(KeyRing)

src/components/Header/component/Layout.jsx

@@ -31,9 +31,9 @@ const styles = () => ({
     left: '4px',
   },
   summary: {
-    borderBottom: `solid 2px ${border}`,
+    borderBottom: `solid 1px ${border}`,
     alignItems: 'center',
-    height: '52px',
+    height: '53px',
     backgroundColor: 'white',
   },
   logo: {

src/components/Header/component/Layout.stories.js

@@ -3,10 +3,10 @@ import { storiesOf } from '@storybook/react'
 import * as React from 'react'
 import styles from '~/components/layout/PageFrame/index.scss'
 import Layout from './Layout'
-import ProviderInfo from './ProviderInfo'
-import ProviderDetails from './ProviderInfo/UserDetails'
-import ProviderDisconnected from './ProviderDisconnected'
-import ConnectDetails from './ProviderDisconnected/ConnectDetails'
+import ProviderAccesible from './ProviderInfo/ProviderAccesible'
+import UserDetails from './ProviderDetails/UserDetails'
+import ProviderDisconnected from './ProviderInfo/ProviderDisconnected'
+import ConnectDetails from './ProviderDetails/ConnectDetails'
 
 const FrameDecorator = story => (
   <div className={styles.frame}>
@@ -20,8 +20,8 @@ storiesOf('Components /Header', module)
     const provider = 'Metamask'
     const userAddress = '0x873faa4cddd5b157e8e5a57e7a5479afc5d30moe'
     const network = 'RINKEBY'
-    const info = <ProviderInfo provider={provider} network={network} userAddress={userAddress} connected />
-    const details = <ProviderDetails provider={provider} network={network} userAddress={userAddress} connected />
+    const info = <ProviderAccesible provider={provider} network={network} userAddress={userAddress} connected />
+    const details = <UserDetails provider={provider} network={network} userAddress={userAddress} connected />
 
     return <Layout providerInfo={info} providerDetails={details} />
   })
@@ -35,8 +35,8 @@ storiesOf('Components /Header', module)
     const provider = 'Metamask'
     const userAddress = '0x873faa4cddd5b157e8e5a57e7a5479afc5d30moe'
     const network = 'RINKEBY'
-    const info = <ProviderInfo provider={provider} network={network} userAddress={userAddress} connected={false} />
-    const details = (<ProviderDetails
+    const info = <ProviderAccesible provider={provider} network={network} userAddress={userAddress} connected={false} />
+    const details = (<UserDetails
       provider={provider}
       network={network}
       userAddress={userAddress}

src/components/Header/component/ProviderDisconnected/ConnectDetails.jsx → src/components/Header/component/ProviderDetails/ConnectDetails.jsx

@@ -3,11 +3,9 @@ import * as React from 'react'
 import { withStyles } from '@material-ui/core/styles'
 import Paragraph from '~/components/layout/Paragraph'
 import Button from '~/components/layout/Button'
-import Img from '~/components/layout/Img'
 import Row from '~/components/layout/Row'
 import { md, lg } from '~/theme/variables'
-
-const connectedLogo = require('../../assets/connect-wallet.svg')
+import CircleDot from '~/components/Header/component/CircleDot'
 
 type Props = {
   classes: Object,
@@ -45,7 +43,7 @@ const ConnectDetails = ({ classes, onConnect }: Props) => (
       </Row>
     </div>
     <Row className={classes.logo} margin="lg">
-      <Img className={classes.img} src={connectedLogo} height={75} alt="Connect a Wallet" />
+      <CircleDot keySize={32} circleSize={75} dotSize={25} dotTop={50} dotRight={25} center mode="error" />
     </Row>
     <Row className={classes.connect}>
       <Button

src/components/Header/component/ProviderInfo/UserDetails.jsx → src/components/Header/component/ProviderDetails/UserDetails.jsx

@@ -1,24 +1,24 @@
 // @flow
 import * as React from 'react'
+import classNames from 'classnames'
 import OpenInNew from '@material-ui/icons/OpenInNew'
 import { withStyles } from '@material-ui/core/styles'
 import Paragraph from '~/components/layout/Paragraph'
 import Button from '~/components/layout/Button'
 import Identicon from '~/components/Identicon'
-import Bold from '~/components/layout/Bold'
+import Dot from '@material-ui/icons/FiberManualRecord'
 import Hairline from '~/components/layout/Hairline'
 import Img from '~/components/layout/Img'
 import Row from '~/components/layout/Row'
 import Block from '~/components/layout/Block'
 import Spacer from '~/components/Spacer'
-import { xs, sm, md, lg, background, secondary } from '~/theme/variables'
+import { xs, sm, md, lg, background, secondary, warning, connected as connectedBg } from '~/theme/variables'
 import { upperFirst } from '~/utils/css'
 import { shortVersionOf } from '~/logic/wallets/ethAddresses'
 import { openAddressInEtherScan } from '~/logic/wallets/getWeb3'
+import CircleDot from '~/components/Header/component/CircleDot'
 
 const metamask = require('../../assets/metamask.svg')
-const connectedLogo = require('../../assets/connected.svg')
-const connectedWarning = require('../../assets/connected-error.svg')
 const dot = require('../../assets/dotRinkeby.svg')
 
 type Props = {
@@ -49,17 +49,23 @@ const styles = () => ({
     borderRadius: '3px',
     backgroundColor: background,
     margin: '0 auto',
-    padding: sm,
+    padding: '9px',
+    lineHeight: 1,
   },
   details: {
-    padding: `0 ${lg}`,
+    padding: `0 ${md}`,
     height: '20px',
     alignItems: 'center',
   },
   address: {
     flexGrow: 1,
     textAlign: 'center',
     letterSpacing: '-0.5px',
+    fontSize: '12px',
+  },
+  labels: {
+    fontSize: '12px',
+    letterSpacing: '0.5px',
   },
   open: {
     paddingLeft: sm,
@@ -77,6 +83,17 @@ const styles = () => ({
   logo: {
     margin: `0px ${xs}`,
   },
+  dot: {
+    marginRight: xs,
+    height: '15px',
+    width: '15px',
+  },
+  warning: {
+    color: warning,
+  },
+  connected: {
+    color: connectedBg,
+  },
 })
 
 const UserDetails = ({
@@ -85,14 +102,16 @@ const UserDetails = ({
   const status = connected ? 'Connected' : 'Connection error'
   const address = userAddress ? shortVersionOf(userAddress, 6) : 'Address not available'
   const identiconAddress = userAddress || 'random'
-  const connectionLogo = connected ? connectedLogo : connectedWarning
   const color = connected ? 'primary' : 'warning'
 
   return (
     <React.Fragment>
       <Block className={classes.container}>
         <Row className={classes.identicon} margin="md" align="center">
-          <Identicon address={identiconAddress} diameter={60} />
+          { connected
+            ? <Identicon address={identiconAddress} diameter={60} />
+            : <CircleDot keySize={30} circleSize={75} dotSize={25} dotTop={50} dotRight={25} mode="warning" hideDot />
+          }
         </Row>
         <Block align="center" className={classes.user}>
           <Paragraph className={classes.address} size="sm" noMargin>{address}</Paragraph>
@@ -107,33 +126,29 @@ const UserDetails = ({
       </Block>
       <Hairline margin="xs" />
       <Row className={classes.details}>
-        <Paragraph size="sm" noMargin align="right">Status </Paragraph>
+        <Paragraph noMargin align="right" className={classes.labels}>Status </Paragraph>
         <Spacer />
-        <Img className={classes.logo} src={connectionLogo} height={16} alt="Conection Status" />
-        <Paragraph size="sm" noMargin align="right" color={color}>
-          <Bold>
-            {status}
-          </Bold>
+        <Dot className={classNames(classes.dot, connected ? classes.connected : classes.warning)} />
+        <Paragraph noMargin align="right" color={color} weight="bolder" className={classes.labels}>
+          {status}
         </Paragraph>
       </Row>
       <Hairline margin="xs" />
       <Row className={classes.details}>
-        <Paragraph size="sm" noMargin align="right">Client </Paragraph>
+        <Paragraph noMargin align="right" className={classes.labels}>Client </Paragraph>
         <Spacer />
-        <Img className={classes.logo} src={metamask} height={16} alt="Metamask client" />
-        <Paragraph size="sm" noMargin align="right">
-          <Bold>
-            {upperFirst(provider)}
-          </Bold>
+        <Img className={classes.logo} src={metamask} height={14} alt="Metamask client" />
+        <Paragraph noMargin align="right" weight="bolder" className={classes.labels}>
+          {upperFirst(provider)}
         </Paragraph>
       </Row>
       <Hairline margin="xs" />
       <Row className={classes.details}>
-        <Paragraph size="sm" noMargin align="right">Network </Paragraph>
+        <Paragraph noMargin align="right" className={classes.labels}>Network </Paragraph>
         <Spacer />
-        <Img className={classes.logo} src={dot} height={16} alt="Network" />
-        <Paragraph size="sm" noMargin align="right">
-          <Bold>{upperFirst(network)}</Bold>
+        <Img className={classes.logo} src={dot} height={14} alt="Network" />
+        <Paragraph noMargin align="right" weight="bolder" className={classes.labels}>
+          {upperFirst(network)}
         </Paragraph>
       </Row>
       <Hairline margin="xs" />
@@ -145,7 +160,7 @@ const UserDetails = ({
           color="primary"
           fullWidth
         >
-          <Paragraph className={classes.disconnectText} size="sm" weight="regular" color="white" noMargin>DISCONNECT</Paragraph>
+          <Paragraph className={classes.disconnectText} size="sm" weight="bold" color="white" noMargin>DISCONNECT</Paragraph>
         </Button>
       </Row>
     </React.Fragment>