Merge pull request #282 from loeck/master

Update icons, add animate ticker

package.json

@@ -76,6 +76,7 @@
     "raven-js": "^3.24.1",
     "react": "^16.3.1",
     "react-dom": "^16.3.1",
+    "react-flip-ticker": "^0.3.0",
     "react-i18next": "^7.5.1",
     "react-mortal": "^3.2.0",
     "react-motion": "^0.5.2",

src/components/AccountPage/index.js

@@ -22,8 +22,8 @@ import { getCounterValueCode } from 'reducers/settings'
 import { openModal } from 'reducers/modals'
 
 import IconControls from 'icons/Controls'
-import IconArrowDown from 'icons/ArrowDown'
+import IconReceive from 'icons/Receive'
-import IconArrowUp from 'icons/ArrowUp'
+import IconSend from 'icons/Send'
 
 import BalanceSummary from 'components/BalanceSummary'
 import {
@@ -123,13 +123,13 @@ class AccountPage extends PureComponent<Props, State> {
           <Box horizontal alignItems="center" justifyContent="flex-end" grow flow={2}>
             <Button small primary onClick={() => openModal(MODAL_SEND, { account })}>
               <Box horizontal flow={1} alignItems="center">
-                <IconArrowUp size={12} />
+                <IconSend size={12} />
                 <Box>{t('send:title')}</Box>
               </Box>
             </Button>
             <Button small primary onClick={() => openModal(MODAL_RECEIVE, { account })}>
               <Box horizontal flow={1} alignItems="center">
-                <IconArrowDown size={12} />
+                <IconReceive size={12} />
                 <Box>{t('receive:title')}</Box>
               </Box>
             </Button>
@@ -155,12 +155,12 @@ class AccountPage extends PureComponent<Props, State> {
                   <BalanceTotal totalBalance={account.balance} unit={account.unit}>
                     <Box mt={1}>
                       <FormattedVal
+                        animateTicker
                         alwaysShowSign={false}
                         color="warmGrey"
                         fiat={counterValue}
                         fontSize={6}
                         showCode
-                        style={{ lineHeight: 1 }}
                         val={totalBalance}
                       />
                     </Box>

src/components/BalanceSummary/BalanceInfos.js

@@ -12,8 +12,8 @@ import FormattedVal from 'components/base/FormattedVal'
 
 const Sub = styled(Text).attrs({
   ff: 'Open Sans',
-  color: 'warnGrey',
   fontSize: 4,
+  mt: 1,
 })`
   text-transform: lowercase;
 `
@@ -42,6 +42,7 @@ export function BalanceSincePercent(props: BalanceSinceProps) {
   return (
     <Box {...otherProps}>
       <FormattedVal
+        animateTicker
         fontSize={7}
         isPercent
         val={refBalance ? Math.floor((totalBalance - refBalance) / refBalance * 100) : 0}
@@ -57,6 +58,7 @@ export function BalanceSinceDiff(props: Props) {
   return (
     <Box {...otherProps}>
       <FormattedVal
+        animateTicker
         fiat={counterValue}
         fontSize={7}
         showCode
@@ -73,11 +75,11 @@ export function BalanceTotal(props: BalanceTotalProps) {
   return (
     <Box grow>
       <FormattedVal
+        animateTicker
         color="dark"
         fiat={counterValue}
         fontSize={8}
         showCode
-        style={{ lineHeight: 1 }}
         unit={unit}
         val={totalBalance}
       />

src/components/Breadcrumb/Step.js

@@ -16,6 +16,7 @@ const Wrapper = styled(Box).attrs({
     ['active', 'valid'].includes(p.status) ? 'wallet' : p.status === 'error' ? 'alertRed' : 'grey',
   grow: true,
   justifyContent: 'center',
+  relative: true,
 })`
   width: ${RADIUS}px;
   flex-shrink: 0;
@@ -42,9 +43,11 @@ const StepNumber = styled(Box).attrs({
 const Label = styled(Box).attrs({
   fontSize: 3,
   ff: 'Museo Sans|Bold',
+  px: 2,
 })`
+  line-height: 1.2;
   position: absolute;
-  margin-top: 23px;
+  top: 25px;
   transition: color ease-in-out 0.1s ${p => (['active', 'valid'].includes(p.status) ? 0.4 : 0)}s;
 `
 

src/components/CounterValue/__tests__/__snapshots__/CounterValue.test.js.snap

@@ -2,7 +2,7 @@
 
 exports[`components CounterValue basic 1`] = `
 <span
-  className="s1c17x4y-0 fJKscS s8vzclq-0 hjqlvj"
+  className="s1c17x4y-0 jqghir s8vzclq-0 hjqlvj"
   color="#66be54"
 >
   + USD 10.00
@@ -11,7 +11,7 @@ exports[`components CounterValue basic 1`] = `
 
 exports[`components CounterValue specifying ticker different from default 1`] = `
 <span
-  className="s1c17x4y-0 fJKscS s8vzclq-0 hjqlvj"
+  className="s1c17x4y-0 jqghir s8vzclq-0 hjqlvj"
   color="#66be54"
 >
   + USD 5.00
@@ -20,7 +20,7 @@ exports[`components CounterValue specifying ticker different from default 1`] =
 
 exports[`components CounterValue using countervalue different from default 1`] = `
 <span
-  className="s1c17x4y-0 fJKscS s8vzclq-0 hjqlvj"
+  className="s1c17x4y-0 jqghir s8vzclq-0 hjqlvj"
   color="#66be54"
 >
   + EUR 0.42
@@ -29,7 +29,7 @@ exports[`components CounterValue using countervalue different from default 1`] =
 
 exports[`components CounterValue with time travel whith date in countervalues 1`] = `
 <span
-  className="s1c17x4y-0 fJKscS s8vzclq-0 hjqlvj"
+  className="s1c17x4y-0 jqghir s8vzclq-0 hjqlvj"
   color="#66be54"
 >
   + USD 20.00
@@ -38,7 +38,7 @@ exports[`components CounterValue with time travel whith date in countervalues 1`
 
 exports[`components CounterValue with time travel whith date not in countervalues 1`] = `
 <span
-  className="s1c17x4y-0 fJKscS s8vzclq-0 hjqlvj"
+  className="s1c17x4y-0 jqghir s8vzclq-0 hjqlvj"
   color="#66be54"
 >
   + USD 0.00
@@ -47,7 +47,7 @@ exports[`components CounterValue with time travel whith date not in countervalue
 
 exports[`components CounterValue without countervalues populated 1`] = `
 <span
-  className="s1c17x4y-0 fJKscS s8vzclq-0 hjqlvj"
+  className="s1c17x4y-0 jqghir s8vzclq-0 hjqlvj"
   color="#66be54"
 >
   + USD 0.00

src/components/DashboardPage/AccountCard.js

@@ -60,9 +60,6 @@ const AccountCard = ({
             unit={account.unit}
             showCode
             val={account.balance}
-            style={{
-              lineHeight: 1,
-            }}
           />
         </Box>
       </Box>

src/components/SideBar/index.js

@@ -15,12 +15,12 @@ import type { T } from 'types/common'
 import { openModal } from 'reducers/modals'
 import { getVisibleAccounts } from 'reducers/accounts'
 
+import IconManager from 'icons/Manager'
 import IconPieChart from 'icons/PieChart'
-import IconArrowDown from 'icons/ArrowDown'
-import IconArrowUp from 'icons/ArrowUp'
-import IconQrCode from 'icons/QrCode'
-import IconSettings from 'icons/Settings'
 import IconPlus from 'icons/Plus'
+import IconReceive from 'icons/Receive'
+import IconSend from 'icons/Send'
+import IconSettings from 'icons/Settings'
 
 import Box, { Tabbable } from 'components/base/Box'
 import FormattedVal from 'components/base/FormattedVal'
@@ -79,13 +79,13 @@ class SideBar extends PureComponent<Props> {
               <Item icon={<IconPieChart size={16} />} linkTo="/">
                 {t('dashboard:title')}
               </Item>
-              <Item icon={<IconArrowUp size={16} />} modal={MODAL_SEND}>
+              <Item icon={<IconSend size={16} />} modal={MODAL_SEND}>
                 {t('send:title')}
               </Item>
-              <Item icon={<IconArrowDown size={16} />} modal={MODAL_RECEIVE}>
+              <Item icon={<IconReceive size={16} />} modal={MODAL_RECEIVE}>
                 {t('receive:title')}
               </Item>
-              <Item icon={<IconQrCode size={16} />} linkTo="/manager">
+              <Item icon={<IconManager size={16} />} linkTo="/manager">
                 {t('sidebar:manager')}
               </Item>
               <Item icon={<IconSettings size={16} />} linkTo="/settings">
@@ -98,7 +98,7 @@ class SideBar extends PureComponent<Props> {
               <Box grow>{t('sidebar:accounts')}</Box>
               <Tooltip render={() => t('addAccount:title')}>
                 <PlusBtn onClick={() => openModal(MODAL_ADD_ACCOUNT)}>
-                  <IconPlus size={14} />
+                  <IconPlus size={16} />
                 </PlusBtn>
               </Tooltip>
             </CapsSubtitle>

src/components/base/Chart/refreshDraw.js

@@ -11,7 +11,7 @@ import type { CTX } from './types'
 
 const TICK_X_SCALE = {
   week: 7,
-  month: 10,
+  month: 7,
   year: 13,
   default: 10,
 }

src/components/base/FormattedVal/__tests__/__snapshots__/FormattedVal.test.js.snap

@@ -2,7 +2,7 @@
 
 exports[`components FormattedVal renders a fiat 1`] = `
 <span
-  className="s1c17x4y-0 fJKscS s8vzclq-0 hjqlvj"
+  className="s1c17x4y-0 jqghir s8vzclq-0 hjqlvj"
   color="#66be54"
 >
   20.00
@@ -11,7 +11,7 @@ exports[`components FormattedVal renders a fiat 1`] = `
 
 exports[`components FormattedVal renders a formatted val 1`] = `
 <span
-  className="s1c17x4y-0 fJKscS s8vzclq-0 hjqlvj"
+  className="s1c17x4y-0 jqghir s8vzclq-0 hjqlvj"
   color="#66be54"
 >
   4
@@ -20,7 +20,7 @@ exports[`components FormattedVal renders a formatted val 1`] = `
 
 exports[`components FormattedVal renders a percent 1`] = `
 <span
-  className="s1c17x4y-0 fJKscS s8vzclq-0 hjqlvj"
+  className="s1c17x4y-0 jqghir s8vzclq-0 hjqlvj"
   color="#66be54"
 >
   30 %
@@ -29,7 +29,7 @@ exports[`components FormattedVal renders a percent 1`] = `
 
 exports[`components FormattedVal shows code 1`] = `
 <span
-  className="s1c17x4y-0 fJKscS s8vzclq-0 hjqlvj"
+  className="s1c17x4y-0 jqghir s8vzclq-0 hjqlvj"
   color="#66be54"
 >
   BTC 4
@@ -38,7 +38,7 @@ exports[`components FormattedVal shows code 1`] = `
 
 exports[`components FormattedVal shows sign 1`] = `
 <span
-  className="s1c17x4y-0 fJKscS s8vzclq-0 hjqlvj"
+  className="s1c17x4y-0 jqghir s8vzclq-0 hjqlvj"
   color="#66be54"
 >
   + 4
@@ -47,7 +47,7 @@ exports[`components FormattedVal shows sign 1`] = `
 
 exports[`components FormattedVal shows sign 2`] = `
 <span
-  className="s1c17x4y-0 fJKscS s8vzclq-0 hENkfw"
+  className="s1c17x4y-0 jqghir s8vzclq-0 hENkfw"
   color="#ea2e49"
 >
   - 4

src/components/base/FormattedVal/index.js

@@ -2,6 +2,8 @@
 
 import React from 'react'
 import styled from 'styled-components'
+import Ticker from 'react-flip-ticker'
+
 import isUndefined from 'lodash/isUndefined'
 
 import type { Unit } from '@ledgerhq/currencies'
@@ -22,7 +24,10 @@ const T = styled(Text).attrs({
       : p.isNegative
         ? p.theme.colors.alertRed
         : p.theme.colors.positiveGreen,
-})``
+})`
+  line-height: 0.9;
+  white-space: pre;
+`
 
 const I = ({ color, children }: { color: string, children: any }) => (
   <Box color={color}>{children}</Box>
@@ -30,6 +35,7 @@ const I = ({ color, children }: { color: string, children: any }) => (
 
 type Props = {
   alwaysShowSign?: boolean,
+  animateTicker?: boolean,
   disableRounding?: boolean,
   fiat?: string | null,
   isPercent?: boolean,
@@ -40,7 +46,16 @@ type Props = {
 }
 
 function FormattedVal(props: Props) {
-  const { disableRounding, fiat, isPercent, alwaysShowSign, showCode, withIcon, ...p } = props
+  const {
+    animateTicker,
+    disableRounding,
+    fiat,
+    isPercent,
+    alwaysShowSign,
+    showCode,
+    withIcon,
+    ...p
+  } = props
   let { val, unit } = props
 
   if (isUndefined(val)) {
@@ -71,6 +86,10 @@ function FormattedVal(props: Props) {
     })
   }
 
+  if (animateTicker) {
+    text = <Ticker text={text} />
+  }
+
   return (
     <T isNegative={isNegative} withIcon={withIcon} {...p}>
       {withIcon ? (
@@ -86,7 +105,9 @@ function FormattedVal(props: Props) {
               </I>
             )}
           </Box>
-          <Box>{text}</Box>
+          <Box horizontal alignItems="center">
+            {text}
+          </Box>
         </Box>
       ) : (
         text
@@ -97,6 +118,7 @@ function FormattedVal(props: Props) {
 
 FormattedVal.defaultProps = {
   alwaysShowSign: false,
+  animateTicker: false,
   disableRounding: false,
   fiat: null,
   isPercent: false,

src/components/modals/OperationDetails.js

@@ -76,20 +76,12 @@ const OperationDetails = ({ t }: { t: T }) => (
               />
               <Box mt={5} alignItems="center">
                 <Box>
-                  <FormattedVal
+                  <FormattedVal unit={unit} alwaysShowSign showCode val={amount} fontSize={8} />
-                    unit={unit}
-                    alwaysShowSign
-                    showCode
-                    val={amount}
-                    fontSize={8}
-                    style={{ lineHeight: 1 }}
-                  />
                 </Box>
                 <Box mt={1}>
                   <CounterValue
                     color="grey"
                     fontSize={5}
-                    style={{ lineHeight: 1 }}
                     date={date}
                     ticker={currency.units[0].code}
                     value={amount}

src/config/constants.js

@@ -1,6 +1,6 @@
 export const CHECK_UPDATE_DELAY = 5e3
 export const SYNC_ACCOUNT_DELAY = 3e3
-export const SYNC_COUNTER_VALUES_DELAY = 60e3
+export const SYNC_COUNTER_VALUES_DELAY = 5e3
 
 export const MODAL_ADD_ACCOUNT = 'MODAL_ADD_ACCOUNT'
 export const MODAL_OPERATION_DETAILS = 'MODAL_OPERATION_DETAILS'

src/icons/Manager.js

@@ -0,0 +1,12 @@
+// @flow
+
+import React from 'react'
+
+export default ({ size, ...p }: { size: number }) => (
+  <svg viewBox="0 0 16 16" height={size} width={size} {...p}>
+    <path
+      fill="currentColor"
+      d="M5.355 5.648c-.672.677-1.248 1.267-1.728 1.771L.363 4.155a1 1 0 0 1 0-1.414L2.717.387a1 1 0 0 1 1.414 0l2.038 2.038c-.285.476-.394 1.073-.33 1.792L3.425 1.801 1.777 3.448l1.034 1.034.477-.477a.3.3 0 0 1 .424 0l.283.283a.3.3 0 0 1 0 .424l-.477.477.793.793.477-.477a.3.3 0 0 1 .424 0l.143.143zm6.525 4.61a5.282 5.282 0 0 0 1.761-.36l1.896 1.895a1 1 0 0 1 0 1.414l-2.354 2.354a1 1 0 0 1-1.414 0L8.58 12.373a66.571 66.571 0 0 0 1.754-1.745l.16.16a.3.3 0 0 1 0 .424l-.477.477.793.793.477-.477a.3.3 0 0 1 .424 0l.283.283a.3.3 0 0 1 0 .424l-.477.477.958.957 1.646-1.646-2.242-2.242zm.661-5.826l1.51-1.51a.697.697 0 0 1 1.1.152c.94 1.67.744 3.259-.575 4.577-1.153 1.154-2.565 1.502-4.127 1.02a.232.232 0 0 0-.233.057L3.71 15.234a2.09 2.09 0 1 1-2.955-2.956L7.26 5.772c.06-.06.083-.15.057-.232-.483-1.562-.134-2.974 1.02-4.128C9.655.094 11.244-.1 12.914.838a.697.697 0 0 1 .15 1.1l-1.509 1.51.165.82.82.164zM1.74 14.25a.697.697 0 0 0 .985 0l6.506-6.506a1.625 1.625 0 0 1 1.63-.404c1.068.33 1.942.115 2.73-.673.63-.63.862-1.277.702-2.015l-.854.854a1.161 1.161 0 0 1-1.049.318l-1.095-.22a1.161 1.161 0 0 1-.91-.91l-.22-1.094a1.168 1.168 0 0 1 .318-1.05l.855-.854c-.738-.16-1.386.073-2.016.702-.787.788-1.003 1.662-.673 2.73a1.625 1.625 0 0 1-.403 1.63L1.74 13.264a.697.697 0 0 0 0 .986z"
+    />
+  </svg>
+)

src/icons/Receive.js

@@ -0,0 +1,12 @@
+// @flow
+
+import React from 'react'
+
+export default ({ size, ...p }: { size: number }) => (
+  <svg viewBox="0 0 16 16" height={size} width={size} {...p}>
+    <path
+      fill="currentColor"
+      d="M8.75 10.44l2.72-2.72a.75.75 0 0 1 1.06 1.06l-3.896 3.897A.765.765 0 0 1 8 13c-.267 0-.5-.13-.633-.323L3.47 8.78a.75.75 0 0 1 1.06-1.06l2.72 2.72V1.193C7.25.811 7.586.5 8 .5s.75.31.75.694v9.245zm-5.833 4.81c-.369 0-.667-.336-.667-.75s.298-.75.667-.75h10.666c.369 0 .667.336.667.75s-.298.75-.667.75H2.917z"
+    />
+  </svg>
+)

src/icons/Send.js

@@ -0,0 +1,12 @@
+// @flow
+
+import React from 'react'
+
+export default ({ size, ...p }: { size: number }) => (
+  <svg viewBox="0 0 16 16" height={size} width={size} {...p}>
+    <path
+      fill="currentColor"
+      d="M7.25 3.06L4.53 5.78a.75.75 0 0 1-1.06-1.06L7.366.823A.765.765 0 0 1 8 .5c.267 0 .5.13.633.323L12.53 4.72a.75.75 0 0 1-1.06 1.06L8.75 3.06v9.246c0 .383-.336.694-.75.694s-.75-.31-.75-.694V3.06zM2.917 15.25c-.369 0-.667-.336-.667-.75s.298-.75.667-.75h10.666c.369 0 .667.336.667.75s-.298.75-.667.75H2.917z"
+    />
+  </svg>
+)

src/styles/reset.js

@@ -62,4 +62,9 @@ em {
 }
 .tippy-tooltip .tippy-content {
   background: transparent;
+}
+
+.currentTicker {
+  background: white;
+  z-index: 11 !important;
 }`

yarn.lock

@@ -4785,7 +4785,7 @@ electron-builder-lib@~20.6.2:
     semver "^5.5.0"
     temp-file "^3.1.1"
 
-electron-builder@^20.8.1:
+electron-builder@^20.0.4, electron-builder@^20.8.1:
   version "20.8.1"
   resolved "https://registry.yarnpkg.com/electron-builder/-/electron-builder-20.8.1.tgz#3d19607a7f7d3ee7f3e110a6fc66c720ed1d2cc0"
   dependencies:
@@ -4965,7 +4965,7 @@ electron-webpack@^2.0.1:
     webpack-merge "^4.1.2"
     yargs "^11.1.0"
 
-electron@1.8.4:
+electron@1.8.4, electron@^1.8.2:
   version "1.8.4"
   resolved "https://registry.yarnpkg.com/electron/-/electron-1.8.4.tgz#cca8d0e6889f238f55b414ad224f03e03b226a38"
   dependencies:
@@ -7984,6 +7984,9 @@ ledger-test-library@KhalilBellakrid/ledger-test-library-nodejs#7d37482:
   dependencies:
     axios "^0.17.1"
     bindings "^1.3.0"
+    electron "^1.8.2"
+    electron-builder "^20.0.4"
+    electron-rebuild "^1.7.3"
     nan "^2.6.2"
     prebuild-install "^2.2.2"
 
@@ -10112,6 +10115,12 @@ react-error-overlay@^4.0.0:
   version "4.0.0"
   resolved "https://registry.yarnpkg.com/react-error-overlay/-/react-error-overlay-4.0.0.tgz#d198408a85b4070937a98667f500c832f86bd5d4"
 
+react-flip-ticker@^0.3.0:
+  version "0.3.0"
+  resolved "https://registry.yarnpkg.com/react-flip-ticker/-/react-flip-ticker-0.3.0.tgz#7ea4676317ddd5230e4c1f4e9adc2d0fc3bca527"
+  dependencies:
+    prop-types "^15.6.0"
+
 react-fuzzy@^0.5.2:
   version "0.5.2"
   resolved "https://registry.yarnpkg.com/react-fuzzy/-/react-fuzzy-0.5.2.tgz#fc13bf6f0b785e5fefe908724efebec4935eaefe"