Merge pull request #298 from loeck/master

Fix marketIndicator

package.json

@@ -85,6 +85,7 @@
     "react-router-dom": "^4.2.2",
     "react-router-redux": "5.0.0-alpha.9",
     "react-smooth-scrollbar": "^8.0.6",
+    "react-spring": "^4.2.1",
     "redux": "^4.0.0",
     "redux-actions": "^2.3.0",
     "redux-thunk": "^2.2.0",

src/components/base/FlipTicker/index.js

@@ -5,7 +5,7 @@
 
 import React, { PureComponent, Fragment } from 'react'
 import styled from 'styled-components'
-import { Motion, spring } from 'react-motion'
+import { Spring, animated } from 'react-spring'
 
 import Box from 'components/base/Box'
 
@@ -17,18 +17,11 @@ const Container = styled(Box).attrs({
   white-space: pre;
 `
 
-const TickWrapper = styled(Box).attrs({
-  style: p => ({
-    transform: `translate3d(0, -${p.offset}px, 0)`,
-  }),
-})`
-  top: 0;
-  position: absolute;
-`
-
 const RANGE_NUMBER = ['0', '1', '2', '3', '4', '5', '6', '7', '8', '9']
 const RANGE_COMPONENT = RANGE_NUMBER.map((r, i) => <Box key={i}>{r}</Box>)
 
+const SPRINT_CONFIG = { tension: 130, friction: 12 }
+
 type Props = {
   value: string,
 }
@@ -91,14 +84,28 @@ function Tick(props: { height: number, value: string }) {
   const index = RANGE_NUMBER.indexOf(value)
   const offset = height * index
 
+  const Content = <Box>{RANGE_COMPONENT}</Box>
+
   return (
-    <Motion
-      style={{
-        offset: spring(offset),
+    <Spring
+      native
+      config={SPRINT_CONFIG}
+      to={{
+        offset,
       }}
     >
-      {m => <TickWrapper offset={m.offset}>{RANGE_COMPONENT}</TickWrapper>}
-    </Motion>
+      {m => (
+        <animated.div
+          style={{
+            transform: m.offset.interpolate(v => `translate3d(0, -${v}px, 0)`),
+            top: 0,
+            position: 'absolute',
+          }}
+        >
+          {Content}
+        </animated.div>
+      )}
+    </Spring>
   )
 }
 

src/components/base/FlipTicker/stories.js

@@ -36,7 +36,7 @@ class Wrapper extends Component<any, any> {
         value: getValue(),
       })
       this.generateValue()
-    }, 5000)
+    }, 1000)
 
   render() {
     const { render } = this.props

src/reducers/settings.js

@@ -20,7 +20,7 @@ const defaultState: SettingsState = {
     isEnabled: false,
     value: '',
   },
-  marketIndicator: 'eastern',
+  marketIndicator: 'western',
   currenciesSettings: {},
 }
 

src/styles/theme.js

@@ -82,10 +82,10 @@ export const colors = {
   white: '#ffffff',
 
   // market indicator
-  marketUp_eastern: '#66be54',
-  marketUp_western: '#ea2e49',
-  marketDown_eastern: '#ea2e49',
-  marketDown_western: '#6490f1',
+  marketUp_eastern: '#ea2e49',
+  marketUp_western: '#66be54',
+  marketDown_eastern: '#6490f1',
+  marketDown_western: '#ea2e49',
 }
 
 export default {

yarn.lock

@@ -869,6 +869,13 @@
     "@babel/plugin-syntax-dynamic-import" "7.0.0-beta.42"
     "@babel/plugin-syntax-import-meta" "7.0.0-beta.42"
 
+"@babel/runtime@^7.0.0-beta.44":
+  version "7.0.0-beta.44"
+  resolved "https://registry.yarnpkg.com/@babel/runtime/-/runtime-7.0.0-beta.44.tgz#ea5ad6c6fe9a2c1187b025bf42424d28050ee696"
+  dependencies:
+    core-js "^2.5.3"
+    regenerator-runtime "^0.11.1"
+
 "@babel/template@7.0.0-beta.42":
   version "7.0.0-beta.42"
   resolved "https://registry.yarnpkg.com/@babel/template/-/template-7.0.0-beta.42.tgz#7186d4e70d44cdec975049ba0a73bdaf5cdee052"
@@ -3855,6 +3862,13 @@ create-react-class@^15.5.2, create-react-class@^15.6.2:
     loose-envify "^1.3.1"
     object-assign "^4.1.1"
 
+create-react-context@^0.2.2:
+  version "0.2.2"
+  resolved "https://registry.yarnpkg.com/create-react-context/-/create-react-context-0.2.2.tgz#9836542f9aaa22868cd7d4a6f82667df38019dca"
+  dependencies:
+    fbjs "^0.8.0"
+    gud "^1.0.0"
+
 crocket@^0.9.11:
   version "0.9.11"
   resolved "https://registry.yarnpkg.com/crocket/-/crocket-0.9.11.tgz#288fca11ef0d3dd239b62c488265f30c8edfb0c5"
@@ -5616,7 +5630,7 @@ fb-watchman@^2.0.0:
   dependencies:
     bser "^2.0.0"
 
-fbjs@^0.8.12, fbjs@^0.8.16, fbjs@^0.8.5, fbjs@^0.8.9:
+fbjs@^0.8.0, fbjs@^0.8.12, fbjs@^0.8.16, fbjs@^0.8.5, fbjs@^0.8.9:
   version "0.8.16"
   resolved "https://registry.yarnpkg.com/fbjs/-/fbjs-0.8.16.tgz#5e67432f550dc41b572bf55847b8aca64e5337db"
   dependencies:
@@ -6225,6 +6239,10 @@ growly@^1.3.0:
   version "1.3.0"
   resolved "https://registry.yarnpkg.com/growly/-/growly-1.3.0.tgz#f10748cbe76af964b7c96c93c6bcc28af120c081"
 
+gud@^1.0.0:
+  version "1.0.0"
+  resolved "https://registry.yarnpkg.com/gud/-/gud-1.0.0.tgz#a489581b17e6a70beca9abe3ae57de7a499852c0"
+
 gzip-size@3.0.0:
   version "3.0.0"
   resolved "https://registry.yarnpkg.com/gzip-size/-/gzip-size-3.0.0.tgz#546188e9bdc337f673772f81660464b389dce520"
@@ -7938,6 +7956,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"
 
@@ -10234,6 +10255,13 @@ react-split-pane@^0.1.77:
     prop-types "^15.5.10"
     react-style-proptype "^3.0.0"
 
+react-spring@^4.2.1:
+  version "4.2.1"
+  resolved "https://registry.yarnpkg.com/react-spring/-/react-spring-4.2.1.tgz#7bcf1eb660c88e322820b88f05355d44768c53be"
+  dependencies:
+    "@babel/runtime" "^7.0.0-beta.44"
+    create-react-context "^0.2.2"
+
 react-style-proptype@^3.0.0:
   version "3.2.0"
   resolved "https://registry.yarnpkg.com/react-style-proptype/-/react-style-proptype-3.2.0.tgz#be5de15358b890d83aecfaf6634cc033aa2b1483"