Merge pull request #107 from meriadec/master

Integration. Integration. etc.

src/components/DashboardPage/BalanceInfos.js

@@ -0,0 +1,57 @@
+// @flow
+
+import React from 'react'
+import { connect } from 'react-redux'
+import styled from 'styled-components'
+
+import type { MapStateToProps } from 'react-redux'
+
+import { getTotalBalance } from 'reducers/accounts'
+
+import Box from 'components/base/Box'
+import Text from 'components/base/Text'
+import FormattedVal from 'components/base/FormattedVal'
+
+const mapStateToProps: MapStateToProps<*, *, *> = state => ({
+  totalBalance: getTotalBalance(state),
+})
+
+type Props = {
+  totalBalance: number,
+}
+
+const Sub = styled(Text).attrs({
+  ff: 'Open Sans',
+  color: 'warmGrey',
+  fontSize: 4,
+})``
+
+function BalanceInfos(props: Props) {
+  const { totalBalance } = props
+  return (
+    <Box horizontal align="flex-end" flow={7}>
+      <Box grow>
+        <FormattedVal
+          val={totalBalance}
+          currency="BTC"
+          alwaysShowSign={false}
+          showCode
+          fontSize={8}
+          color="dark"
+          style={{ lineHeight: 1 }}
+        />
+        <Sub>{'Total balance'}</Sub>
+      </Box>
+      <Box align="flex-end">
+        <FormattedVal isPercent val={9.25} alwaysShowSign fontSize={7} />
+        <Sub>{'since one week'}</Sub>
+      </Box>
+      <Box align="flex-end">
+        <FormattedVal currency="USD" alwaysShowSign showCode val={6132.23} fontSize={7} />
+        <Sub>{'since one week'}</Sub>
+      </Box>
+    </Box>
+  )
+}
+
+export default connect(mapStateToProps)(BalanceInfos)

src/components/DashboardPage/index.js

@@ -13,10 +13,9 @@ import takeRight from 'lodash/takeRight'
 import type { MapStateToProps } from 'react-redux'
 import type { Accounts } from 'types/common'
 
-import { formatBTC } from 'helpers/format'
 import { space } from 'styles/theme'
 
-import { getTotalBalance, getVisibleAccounts } from 'reducers/accounts'
+import { getVisibleAccounts } from 'reducers/accounts'
 
 import { AreaChart } from 'components/base/Chart'
 import Box, { Card } from 'components/base/Box'
@@ -24,10 +23,10 @@ import Pills from 'components/base/Pills'
 import Text from 'components/base/Text'
 
 import AccountCard from './AccountCard'
+import BalanceInfos from './BalanceInfos'
 
 const mapStateToProps: MapStateToProps<*, *, *> = state => ({
   accounts: getVisibleAccounts(state),
-  totalBalance: getTotalBalance(state),
 })
 
 const mapDispatchToProps = {
@@ -37,7 +36,6 @@ const mapDispatchToProps = {
 type Props = {
   accounts: Accounts,
   push: Function,
-  totalBalance: number,
 }
 
 type State = {
@@ -113,7 +111,7 @@ class DashboardPage extends PureComponent<Props, State> {
   _timeout = undefined
 
   render() {
-    const { totalBalance, push, accounts } = this.props
+    const { push, accounts } = this.props
     const { selectedTime, fakeDatas } = this.state
 
     const totalAccounts = accounts.length
@@ -142,7 +140,9 @@ class DashboardPage extends PureComponent<Props, State> {
         {totalAccounts > 0 && (
           <Fragment>
             <Card flow={3} p={0} py={6}>
-              <Text>{formatBTC(totalBalance)}</Text>
+              <Box px={6}>
+                <BalanceInfos since={selectedTime} />
+              </Box>
               <Box ff="Open Sans" fontSize={4} color="warmGrey">
                 <AreaChart
                   id="dashboard-chart"

src/components/SideBar/index.js

@@ -9,9 +9,8 @@ import { connect } from 'react-redux'
 import { MODAL_SEND, MODAL_RECEIVE, MODAL_ADD_ACCOUNT } from 'constants'
 
 import type { MapStateToProps } from 'react-redux'
-import type { Accounts, T, Device } from 'types/common'
+import type { Accounts, T } from 'types/common'
 
-import { getCurrentDevice } from 'reducers/devices'
 import { openModal } from 'reducers/modals'
 import { getVisibleAccounts } from 'reducers/accounts'
 
@@ -26,7 +25,6 @@ import IconCurrencyBitcoin from 'icons/currencies/Bitcoin'
 
 import Box, { Tabbable } from 'components/base/Box'
 import GrowScroll from 'components/base/GrowScroll'
-import Text from 'components/base/Text'
 import Item from './Item'
 
 const CapsSubtitle = styled(Box).attrs({
@@ -44,15 +42,6 @@ const Container = styled(Box)`
   width: ${p => p.theme.sizes.sideBarWidth}px;
 `
 
-const Connected = styled(Box).attrs({
-  bg: p => (p.state ? 'green' : 'grenade'),
-  mx: 3,
-})`
-  border-radius: 50%;
-  height: 10px;
-  width: 10px;
-`
-
 const PlusBtn = styled(Tabbable).attrs({
   p: 1,
   m: -1,
@@ -72,12 +61,10 @@ type Props = {
   t: T,
   accounts: Accounts,
   openModal: Function,
-  currentDevice: Device,
 }
 
 const mapStateToProps: MapStateToProps<*, *, *> = state => ({
   accounts: getVisibleAccounts(state),
-  currentDevice: getCurrentDevice(state),
 })
 
 const mapDispatchToProps = {
@@ -86,7 +73,7 @@ const mapDispatchToProps = {
 
 class SideBar extends PureComponent<Props> {
   render() {
-    const { t, accounts, openModal, currentDevice } = this.props
+    const { t, accounts, openModal } = this.props
 
     return (
       <Container bg="white">
@@ -131,21 +118,6 @@ class SideBar extends PureComponent<Props> {
             </GrowScroll>
           </Box>
         </Box>
-        <Box borderColor="argile" borderWidth={1} borderTop horizontal py={2}>
-          <Box align="center" justify="center">
-            <Connected state={currentDevice !== null} />
-          </Box>
-          <Box>
-            <Box>
-              <Text fontSize={1}>Ledger Nano S</Text>
-            </Box>
-            <Box>
-              <Text fontSize={0} color="grey">
-                {t(currentDevice !== null ? 'device.connected' : 'device.notConnected')}
-              </Text>
-            </Box>
-          </Box>
-        </Box>
       </Container>
     )
   }

src/components/TopBar.js

@@ -41,7 +41,7 @@ const Inner = styled(Box).attrs({
 const Bar = styled.div`
   height: 15px;
   width: 1px;
-  background: ${p => p.theme.colors.warmGrey};
+  background: ${p => p.theme.colors.mouse};
 `
 
 const mapStateToProps: MapStateToProps<*, *, *> = state => ({

src/components/base/FormattedVal.js

@@ -0,0 +1,72 @@
+// @flow
+
+import React from 'react'
+import styled from 'styled-components'
+
+import { formatCurrencyUnit } from '@ledgerhq/currencies'
+
+import Text from 'components/base/Text'
+
+const T = styled(Text).attrs({
+  ff: 'Rubik',
+  color: p => (p.isNegative ? p.theme.colors.grenade : p.theme.colors.green),
+})``
+
+const currencies = {
+  BTC: {
+    name: 'bitcoin',
+    code: 'BTC',
+    symbol: 'b',
+    magnitude: 8,
+  },
+  USD: {
+    name: 'dollar',
+    code: 'USD',
+    symbol: '$',
+    magnitude: 0,
+  },
+}
+
+type Props = {
+  val: number,
+  isPercent?: boolean,
+  currency?: any,
+  alwaysShowSign?: boolean,
+  showCode?: boolean,
+}
+
+function FormattedVal(props: Props) {
+  const { val, isPercent, currency, alwaysShowSign, showCode, ...p } = props
+
+  const isNegative = val < 0
+
+  let text = ''
+
+  if (isPercent) {
+    text = `${alwaysShowSign ? (isNegative ? '- ' : '+ ') : ''}${val} %`
+  } else {
+    const curr = currency ? currencies[currency] : null
+    if (!curr) {
+      return `[invalid currency ${currency || '(null)'}]`
+    }
+    text = formatCurrencyUnit(curr, val, {
+      alwaysShowSign,
+      showCode,
+    })
+  }
+
+  return (
+    <T isNegative={isNegative} {...p}>
+      {text}
+    </T>
+  )
+}
+
+FormattedVal.defaultProps = {
+  currency: null,
+  isPercent: false,
+  alwaysShowSign: false,
+  showCode: false,
+}
+
+export default FormattedVal

src/styles/global.js

@@ -65,6 +65,13 @@ const fonts = {
       file: 'museosans/MuseoSans-ExtraBold',
     },
   ],
+  Rubik: [
+    {
+      style: 'normal',
+      weight: 500,
+      file: 'rubik/Rubik-Regular',
+    },
+  ],
 }
 
 function transformFonts(allFonts) {

src/styles/theme.js

@@ -51,6 +51,13 @@ export const fontFamilies = {
       style: 'normal',
     },
   },
+
+  Rubik: {
+    Regular: {
+      weight: 500,
+      style: 'normal',
+    },
+  },
 }
 
 export default {