New value charts colorful

android/app/src/main/debug/res/values/strings.xml

@@ -1,4 +1,3 @@
 <resources>
-	<string moduleConfig="true" name="reactNativeCodePush_androidDeploymentKey">deployment-key-here</string>
     <string name="app_name">Rainbow Debug</string>
 </resources>

ios/Podfile.lock

@@ -421,7 +421,7 @@ PODS:
     - Sentry (~> 4.4.0)
   - RNStoreReview (0.1.5):
     - React
-  - RNSVG (11.0.1):
+  - RNSVG (11.0.0):
     - React
   - SDWebImage (5.4.1):
     - SDWebImage/Core (= 5.4.1)
@@ -745,14 +745,14 @@ SPEC CHECKSUMS:
   RNScreens: 031d10e2b648afc9546f16b6a786d2efc6870310
   RNSentry: 9cfa3717b1e6bf9ad4b124683e78e3b98b01d3af
   RNStoreReview: 62d6afd7c37db711a594bbffca6b0ea3a812b7a8
-  RNSVG: 67f1f12dae2cef6ed59a42cae74a6b8f5a9e7b46
+  RNSVG: 82d44baa568873faae1a9929dd30d29db8f06732
   SDWebImage: 29c340dbdcef342bb13125553f4e19ce056b07a7
   SDWebImageWebPCoder: 947093edd1349d820c40afbd9f42acb6cdecd987
   Sentry: 14bdd673870e8cf64932b149fad5bbbf39a9b390
   SRSRadialGradient: 8fdf3adb76320500bc792390ecebc1b82aac54ec
   SSZipArchive: fa16b8cc4cdeceb698e5e5d9f67e9558532fbf23
   TcpSockets: 14306fb79f9750ea7d2ddd02d8bed182abb01797
-  ToolTipMenu: 8ac61aded0fbc4acfe7e84a7d0c9479d15a9a382
+  ToolTipMenu: ad9f45c5ef375418275c81a667c2805bcac8692a
   Yoga: b9a1f7189009fa4b6266ee0a63235547326295d2
 
 PODFILE CHECKSUM: 4e11b438fd6bb2763be24d82eeafc6f69c49a2f4

ios/Rainbow.xcodeproj/project.pbxproj

@@ -84,6 +84,15 @@
 		F9EB9219ED9A4C72826A5908 /* Graphik-Regular.otf in Resources */ = {isa = PBXBuildFile; fileRef = A6EEFE6EA9354456B0DB4520 /* Graphik-Regular.otf */; };
 		F9EF1D44351840B8A380BD3E /* SF-Pro-Display-Bold.otf in Resources */ = {isa = PBXBuildFile; fileRef = BA31E8CEDBCC417CA50BC57B /* SF-Pro-Display-Bold.otf */; };
 		FBDF4EF177284CF4826D7BF9 /* SF-Pro-Display-HeavyItalic.otf in Resources */ = {isa = PBXBuildFile; fileRef = D7BFD847B72D414D9BE734A0 /* SF-Pro-Display-HeavyItalic.otf */; };
+		041ED9A91C634D62B70DD2A0 /* SF-Pro-Rounded-Black.otf in Resources */ = {isa = PBXBuildFile; fileRef = B809485D25CC4982B166E287 /* SF-Pro-Rounded-Black.otf */; };
+		830AB06937A24F36A5A233E4 /* SF-Pro-Rounded-Bold.otf in Resources */ = {isa = PBXBuildFile; fileRef = 12778C645D644BCC8744A30F /* SF-Pro-Rounded-Bold.otf */; };
+		5F1FC886FDBF4E50875905D8 /* SF-Pro-Rounded-Heavy.otf in Resources */ = {isa = PBXBuildFile; fileRef = 6B6183D1BB01462A8EC6971D /* SF-Pro-Rounded-Heavy.otf */; };
+		788C192F52404F80BC99C83E /* SF-Pro-Rounded-Light.otf in Resources */ = {isa = PBXBuildFile; fileRef = CC103294F38D49DEBB00C234 /* SF-Pro-Rounded-Light.otf */; };
+		45537F942F2B45A2AE0F6E97 /* SF-Pro-Rounded-Medium.otf in Resources */ = {isa = PBXBuildFile; fileRef = C71A958627CB4BF6B7085E7B /* SF-Pro-Rounded-Medium.otf */; };
+		888BD587381C4F859E34255C /* SF-Pro-Rounded-Regular.otf in Resources */ = {isa = PBXBuildFile; fileRef = 6F593D06488648D6B4082A13 /* SF-Pro-Rounded-Regular.otf */; };
+		9DF9D782A0E8467FAA079A68 /* SF-Pro-Rounded-Semibold.otf in Resources */ = {isa = PBXBuildFile; fileRef = C2BA36ED122C4932A09957E5 /* SF-Pro-Rounded-Semibold.otf */; };
+		EEDAF090F37B4DD9905C3AA1 /* SF-Pro-Rounded-Thin.otf in Resources */ = {isa = PBXBuildFile; fileRef = 2508987EAA5746B799931646 /* SF-Pro-Rounded-Thin.otf */; };
+		7DE5483C7F3043379686F961 /* SF-Pro-Rounded-Ultralight.otf in Resources */ = {isa = PBXBuildFile; fileRef = E10B4784EF2A4C569A43746A /* SF-Pro-Rounded-Ultralight.otf */; };
 /* End PBXBuildFile section */
 
 /* Begin PBXFileReference section */
@@ -205,6 +214,15 @@
 		ED2971642150620600B7C4FE /* JavaScriptCore.framework */ = {isa = PBXFileReference; lastKnownFileType = wrapper.framework; name = JavaScriptCore.framework; path = Platforms/AppleTVOS.platform/Developer/SDKs/AppleTVOS12.0.sdk/System/Library/Frameworks/JavaScriptCore.framework; sourceTree = DEVELOPER_DIR; };
 		F62BBE10D6534F74B2180711 /* SF-Pro-Text-Bold.otf */ = {isa = PBXFileReference; explicitFileType = undefined; fileEncoding = 9; includeInIndex = 0; lastKnownFileType = unknown; name = "SF-Pro-Text-Bold.otf"; path = "../src/assets/fonts/SF-Pro-Text-Bold.otf"; sourceTree = "<group>"; };
 		FA887652F27F43869229AD50 /* SF-Pro-Text-SemiboldItalic.otf */ = {isa = PBXFileReference; explicitFileType = undefined; fileEncoding = 9; includeInIndex = 0; lastKnownFileType = unknown; name = "SF-Pro-Text-SemiboldItalic.otf"; path = "../src/assets/fonts/SF-Pro-Text-SemiboldItalic.otf"; sourceTree = "<group>"; };
+		B809485D25CC4982B166E287 /* SF-Pro-Rounded-Black.otf */ = {isa = PBXFileReference; name = "SF-Pro-Rounded-Black.otf"; path = "../src/assets/fonts/SF-Pro-Rounded-Black.otf"; sourceTree = "<group>"; fileEncoding = undefined; lastKnownFileType = unknown; explicitFileType = undefined; includeInIndex = 0; };
+		12778C645D644BCC8744A30F /* SF-Pro-Rounded-Bold.otf */ = {isa = PBXFileReference; name = "SF-Pro-Rounded-Bold.otf"; path = "../src/assets/fonts/SF-Pro-Rounded-Bold.otf"; sourceTree = "<group>"; fileEncoding = undefined; lastKnownFileType = unknown; explicitFileType = undefined; includeInIndex = 0; };
+		6B6183D1BB01462A8EC6971D /* SF-Pro-Rounded-Heavy.otf */ = {isa = PBXFileReference; name = "SF-Pro-Rounded-Heavy.otf"; path = "../src/assets/fonts/SF-Pro-Rounded-Heavy.otf"; sourceTree = "<group>"; fileEncoding = undefined; lastKnownFileType = unknown; explicitFileType = undefined; includeInIndex = 0; };
+		CC103294F38D49DEBB00C234 /* SF-Pro-Rounded-Light.otf */ = {isa = PBXFileReference; name = "SF-Pro-Rounded-Light.otf"; path = "../src/assets/fonts/SF-Pro-Rounded-Light.otf"; sourceTree = "<group>"; fileEncoding = undefined; lastKnownFileType = unknown; explicitFileType = undefined; includeInIndex = 0; };
+		C71A958627CB4BF6B7085E7B /* SF-Pro-Rounded-Medium.otf */ = {isa = PBXFileReference; name = "SF-Pro-Rounded-Medium.otf"; path = "../src/assets/fonts/SF-Pro-Rounded-Medium.otf"; sourceTree = "<group>"; fileEncoding = undefined; lastKnownFileType = unknown; explicitFileType = undefined; includeInIndex = 0; };
+		6F593D06488648D6B4082A13 /* SF-Pro-Rounded-Regular.otf */ = {isa = PBXFileReference; name = "SF-Pro-Rounded-Regular.otf"; path = "../src/assets/fonts/SF-Pro-Rounded-Regular.otf"; sourceTree = "<group>"; fileEncoding = undefined; lastKnownFileType = unknown; explicitFileType = undefined; includeInIndex = 0; };
+		C2BA36ED122C4932A09957E5 /* SF-Pro-Rounded-Semibold.otf */ = {isa = PBXFileReference; name = "SF-Pro-Rounded-Semibold.otf"; path = "../src/assets/fonts/SF-Pro-Rounded-Semibold.otf"; sourceTree = "<group>"; fileEncoding = undefined; lastKnownFileType = unknown; explicitFileType = undefined; includeInIndex = 0; };
+		2508987EAA5746B799931646 /* SF-Pro-Rounded-Thin.otf */ = {isa = PBXFileReference; name = "SF-Pro-Rounded-Thin.otf"; path = "../src/assets/fonts/SF-Pro-Rounded-Thin.otf"; sourceTree = "<group>"; fileEncoding = undefined; lastKnownFileType = unknown; explicitFileType = undefined; includeInIndex = 0; };
+		E10B4784EF2A4C569A43746A /* SF-Pro-Rounded-Ultralight.otf */ = {isa = PBXFileReference; name = "SF-Pro-Rounded-Ultralight.otf"; path = "../src/assets/fonts/SF-Pro-Rounded-Ultralight.otf"; sourceTree = "<group>"; fileEncoding = undefined; lastKnownFileType = unknown; explicitFileType = undefined; includeInIndex = 0; };
 /* End PBXFileReference section */
 
 /* Begin PBXFrameworksBuildPhase section */
@@ -432,6 +450,15 @@
 				668A9E253DAF444A90ECB997 /* SFMono-Medium.otf */,
 				95F2888C850F40C8A26E083B /* SFMono-Regular.otf */,
 				B1089F835D6A4F578009B47F /* SFMono-Semibold.otf */,
+				B809485D25CC4982B166E287 /* SF-Pro-Rounded-Black.otf */,
+				12778C645D644BCC8744A30F /* SF-Pro-Rounded-Bold.otf */,
+				6B6183D1BB01462A8EC6971D /* SF-Pro-Rounded-Heavy.otf */,
+				CC103294F38D49DEBB00C234 /* SF-Pro-Rounded-Light.otf */,
+				C71A958627CB4BF6B7085E7B /* SF-Pro-Rounded-Medium.otf */,
+				6F593D06488648D6B4082A13 /* SF-Pro-Rounded-Regular.otf */,
+				C2BA36ED122C4932A09957E5 /* SF-Pro-Rounded-Semibold.otf */,
+				2508987EAA5746B799931646 /* SF-Pro-Rounded-Thin.otf */,
+				E10B4784EF2A4C569A43746A /* SF-Pro-Rounded-Ultralight.otf */,
 			);
 			name = Resources;
 			sourceTree = "<group>";
@@ -572,6 +599,15 @@
 				7287CE1EC33B4913AEE1F4B6 /* SFMono-Medium.otf in Resources */,
 				B7A3E82A4C4449F4A18EB5C2 /* SFMono-Regular.otf in Resources */,
 				92D7BFC8AFDA4E649EA6FF08 /* SFMono-Semibold.otf in Resources */,
+				041ED9A91C634D62B70DD2A0 /* SF-Pro-Rounded-Black.otf in Resources */,
+				830AB06937A24F36A5A233E4 /* SF-Pro-Rounded-Bold.otf in Resources */,
+				5F1FC886FDBF4E50875905D8 /* SF-Pro-Rounded-Heavy.otf in Resources */,
+				788C192F52404F80BC99C83E /* SF-Pro-Rounded-Light.otf in Resources */,
+				45537F942F2B45A2AE0F6E97 /* SF-Pro-Rounded-Medium.otf in Resources */,
+				888BD587381C4F859E34255C /* SF-Pro-Rounded-Regular.otf in Resources */,
+				9DF9D782A0E8467FAA079A68 /* SF-Pro-Rounded-Semibold.otf in Resources */,
+				EEDAF090F37B4DD9905C3AA1 /* SF-Pro-Rounded-Thin.otf in Resources */,
+				7DE5483C7F3043379686F961 /* SF-Pro-Rounded-Ultralight.otf in Resources */,
 			);
 			runOnlyForDeploymentPostprocessing = 0;
 		};

ios/Rainbow/AppDelegate.m

@@ -7,7 +7,6 @@
 
 @import Firebase;
 #import "AppDelegate.h"
-#import <CodePush/CodePush.h>
 #import <React/RCTBridge.h>
 #import <React/RCTBundleURLProvider.h>
 #import <React/RCTLinkingManager.h>
@@ -46,7 +45,7 @@ - (NSURL *)sourceURLForBridge:(RCTBridge *)bridge
   #if DEBUG
     return [NSURL URLWithString:[[[[RCTBundleURLProvider sharedSettings] jsBundleURLForBundleRoot:@"index" fallbackResource:nil] absoluteString] stringByAppendingString:@"&inlineSourceMap=true" ]];
   #else
-    return [CodePush bundleURL];
+    return [[NSBundle mainBundle] URLForResource:@"main" withExtension:@"jsbundle"];
   #endif
 }
 

ios/Rainbow/Info.plist

@@ -140,6 +140,15 @@
 		<string>SFMono-Medium.otf</string>
 		<string>SFMono-Regular.otf</string>
 		<string>SFMono-Semibold.otf</string>
+		<string>SF-Pro-Rounded-Black.otf</string>
+		<string>SF-Pro-Rounded-Bold.otf</string>
+		<string>SF-Pro-Rounded-Heavy.otf</string>
+		<string>SF-Pro-Rounded-Light.otf</string>
+		<string>SF-Pro-Rounded-Medium.otf</string>
+		<string>SF-Pro-Rounded-Regular.otf</string>
+		<string>SF-Pro-Rounded-Semibold.otf</string>
+		<string>SF-Pro-Rounded-Thin.otf</string>
+		<string>SF-Pro-Rounded-Ultralight.otf</string>
 	</array>
 	<key>UIBackgroundModes</key>
 	<array>

package.json

@@ -121,7 +121,7 @@
     "react-native-splash-screen": "^3.2.0",
     "react-native-storage": "^1.0.1",
     "react-native-store-review": "^0.1.5",
-    "react-native-svg": "^11.0.1",
+    "react-native-svg": "11.0.0",
     "react-native-tab-view-viewpager-adapter": "^1.0.7",
     "react-native-tab-view": "^2.12.0",
     "react-native-tcp": "^3.3.2",

src/App.js

@@ -1,4 +1,3 @@
-// eslint-disable-next-line import/default
 import PushNotificationIOS from '@react-native-community/push-notification-ios';
 import analytics from '@segment/analytics-react-native';
 import { init as initSentry, setRelease } from '@sentry/react-native';

src/components/asset-list/RecyclerAssetList.js

@@ -714,13 +714,13 @@ class RecyclerAssetList extends Component {
     }
 
     if (
-      (contentSize.height - layoutMeasurement.height >= offsetY &&
+      ((contentSize.height - layoutMeasurement.height >= offsetY &&
         offsetY >= 0) ||
-      (offsetY < reloadHeightOffsetTop && offsetY > reloadHeightOffsetBottom)
+        (offsetY < reloadHeightOffsetTop &&
+          offsetY > reloadHeightOffsetBottom)) &&
+      this.props.scrollViewTracker
     ) {
-      if (this.props.scrollViewTracker) {
-        this.props.scrollViewTracker.setValue(offsetY);
-      }
+      this.props.scrollViewTracker.setValue(offsetY);
     }
   };
 

src/components/expanded-state/ChartExpandedState.js

@@ -12,7 +12,7 @@ import {
 import styled from 'styled-components/primitives';
 import { withAccountData, withAccountSettings } from '../../hoc';
 import { ethereumUtils, deviceUtils } from '../../utils';
-import ValueChart from '../value-chart/ValueChart';
+import Chart from '../value-chart/Chart';
 import { BalanceCoinRow } from '../coin-row';
 import BottomSendButtons from '../value-chart/BottomSendButtons';
 import { colors } from '../../styles';
@@ -50,25 +50,24 @@ const Container = styled.View`
   align-items: center;
 `;
 
-const TokenExpandedState = ({
-  onPressSend,
-  onPressSwap,
-  change,
-  changeDirection,
-  selectedAsset,
-}) => (
-  <Container>
-    <HandleIcon />
-    <BottomContainer>
-      <BalanceCoinRow {...selectedAsset} />
-      <BottomSendButtons onPressSend={onPressSend} onPressSwap={onPressSwap} />
-    </BottomContainer>
-    <Divider />
-    <ChartContainer>
-      <ValueChart change={change} changeDirection={changeDirection} />
-    </ChartContainer>
-  </Container>
-);
+const TokenExpandedState = ({ onPressSend, onPressSwap, selectedAsset }) => {
+  return (
+    <Container>
+      <HandleIcon />
+      <BottomContainer>
+        <BalanceCoinRow {...selectedAsset} />
+        <BottomSendButtons
+          onPressSend={onPressSend}
+          onPressSwap={onPressSwap}
+        />
+      </BottomContainer>
+      <Divider />
+      <ChartContainer>
+        <Chart />
+      </ChartContainer>
+    </Container>
+  );
+};
 
 TokenExpandedState.propTypes = {
   change: PropTypes.string,

src/components/send/SendAssetList.js

@@ -206,9 +206,8 @@ class SendAssetList extends React.Component {
       return this.collectiblesRenderItem(data);
     } else if (type === 'COLLECTIBLE_ROW_CLOSED') {
       return this.collectiblesRenderItem(data);
-    } else {
-      return null;
     }
+    return null;
   }
 
   render() {

src/components/value-chart/Chart.js

@@ -0,0 +1,100 @@
+import React, { useMemo, useState, useRef } from 'react';
+import ValueChart from './ValueChart';
+import ValueText from './ValueText';
+import {
+  // data1,
+  // data2,
+  // data3,
+  data4,
+  dataColored1,
+  dataColored2,
+  dataColored3,
+} from './data';
+import TimespanSelector from './TimespanSelector';
+import { colors } from '../../styles';
+
+const dataColored = [dataColored1, dataColored2, dataColored3];
+const dataSwitching = [
+  dataColored,
+  [dataColored1, dataColored2],
+  [dataColored2, dataColored3],
+  [data4],
+];
+
+const colorsArray = [
+  colors.red,
+  colors.grey,
+  colors.green,
+  colors.purple,
+  colors.red,
+  colors.green,
+  colors.red,
+  colors.purple,
+  colors.green,
+  colors.grey,
+  colors.green,
+  colors.purple,
+];
+
+let colorIndex = 0;
+
+export default function Chart() {
+  const textInputRef = useRef(null);
+  const data = useMemo(() => {
+    colorIndex = 0;
+    return dataSwitching.map((sectionsData, index) => {
+      return {
+        name: index,
+        segments: sectionsData.map((data, i) => {
+          return {
+            color: colorsArray[colorIndex++],
+            line: i * 5,
+            points: data.map(values => {
+              return { x: values.timestamp, y: values.value };
+            }),
+            renderStartSeparator:
+              colorIndex % 2 !== 0
+                ? {
+                    fill: colorsArray[colorIndex],
+                    r: 7,
+                    stroke: 'white',
+                    strokeWidth: colorIndex + 2,
+                  }
+                : undefined,
+          };
+        }),
+      };
+    });
+  }, []);
+
+  const [currentChart, setCurrentChart] = useState(0);
+  const change = currentChart % 2 === 0 ? 20 : -20; // placeholder
+
+  return (
+    <>
+      <ValueText
+        headerText="PRICE"
+        direction={change > 0}
+        change={change.toFixed(2)}
+        ref={textInputRef}
+      />
+      <ValueChart
+        mode="gesture-managed" // "gesture-managed" / "detailed" / "simplified"
+        enableSelect // enable checking value in touched point of chart
+        onValueUpdate={value => {
+          textInputRef.current.updateValue(value);
+        }}
+        currentDataSource={currentChart}
+        amountOfPathPoints={100} // amount of points for switch between charts
+        data={data}
+        barColor={change > 0 ? colors.chartGreen : colors.red}
+        stroke={{ detailed: 1.5, simplified: 3 }}
+      />
+      <TimespanSelector
+        reloadChart={setCurrentChart}
+        color={change > 0 ? colors.chartGreen : colors.red}
+        isLoading={false}
+      />
+    </>
+  );
+}

src/components/value-chart/GestureWrapper.js

@@ -0,0 +1,38 @@
+import PropTypes from 'prop-types';
+import React from 'react';
+import Animated from 'react-native-reanimated';
+import {
+  PanGestureHandler,
+  TapGestureHandler,
+} from 'react-native-gesture-handler';
+
+const TimestampText = ({
+  children,
+  enabled,
+  onTapGestureEvent,
+  onPanGestureEvent,
+  onHandlerStateChange,
+}) =>
+  enabled ? (
+    <TapGestureHandler onHandlerStateChange={onTapGestureEvent} maxDeltaY={30}>
+      <Animated.View>
+        <PanGestureHandler
+          minDist={1}
+          shouldActivateOnStart
+          onGestureEvent={onPanGestureEvent}
+          onHandlerStateChange={onHandlerStateChange}
+          failOffsetY={2}
+        >
+          {children}
+        </PanGestureHandler>
+      </Animated.View>
+    </TapGestureHandler>
+  ) : (
+    children
+  );
+
+TimestampText.propTypes = {
+  children: PropTypes.string,
+};
+
+export default TimestampText;

src/components/value-chart/TimespanSelector.js

@@ -5,7 +5,6 @@ import Animated from 'react-native-reanimated';
 import { deviceUtils } from '../../utils';
 import { ButtonPressAnimation } from '../animations';
 import ValueTime from './ValueTime';
-import { colors } from '../../styles';
 
 const springConfig = {
   damping: 38,
@@ -29,7 +28,7 @@ const bottomSpaceWidth = deviceUtils.dimensions.width / (4 * 2);
 
 class TimespanSelector extends React.Component {
   propTypes = {
-    direction: PropTypes.bool,
+    color: PropTypes.string,
     isLoading: PropTypes.bool,
     reloadChart: PropTypes.func,
   };
@@ -86,7 +85,7 @@ class TimespanSelector extends React.Component {
   render() {
     let color = 'gray';
     if (!this.props.isLoading) {
-      color = this.props.direction ? colors.chartGreen : colors.red;
+      color = this.props.color;
     }
     return (
       <>