Fix (I think) issue with Tooltip and Chart

src/components/base/Chart/Tooltip.js

@@ -6,7 +6,7 @@ import type { Unit } from '@ledgerhq/currencies'
 
 import { colors as themeColors } from 'styles/theme'
 import { TooltipContainer } from 'components/base/Tooltip'
-import FormattedVal from 'components/base/FormattedVal'
+import { FormattedVal } from 'components/base/FormattedVal'
 
 import type { Item } from './types'
 

src/components/base/Chart/handleMouseEvents.js

@@ -4,6 +4,9 @@ import React from 'react'
 import * as d3 from 'd3'
 import { renderToString } from 'react-dom/server'
 import { ThemeProvider } from 'styled-components'
+import { Provider } from 'react-redux'
+
+import createStore from 'renderer/createStore'
 
 import theme from 'styles/theme'
 
@@ -92,9 +95,11 @@ export default function handleMouseEvents({
     NODES.tooltip
       .html(
         renderToString(
-          <ThemeProvider theme={theme}>
+          <Provider store={createStore({})}>
-            <Tooltip unit={unit} renderTooltip={renderTooltip} d={d.ref} />
+            <ThemeProvider theme={theme}>
-          </ThemeProvider>,
+              <Tooltip unit={unit} renderTooltip={renderTooltip} d={d.ref} />
+            </ThemeProvider>
+          </Provider>,
         ),
       )
       .style('transform', `translate3d(${MARGINS.left + x(d.parsedDate)}px, ${y(d.value)}px, 0)`)

src/components/base/FormattedVal/index.js

@@ -28,10 +28,14 @@ const T = styled(Box).attrs({
   white-space: pre;
 `
 
-const I = ({ color, children }: { color: string, children: any }) => (
+const I = ({ color, children }: { color?: string, children: any }) => (
   <Box color={color}>{children}</Box>
 )
 
+I.defaultProps = {
+  color: undefined,
+}
+
 const mapStateToProps = state => ({
   settings: state.settings,
 })
@@ -43,14 +47,14 @@ type Props = {
   disableRounding?: boolean,
   fiat?: string | null,
   isPercent?: boolean,
-  settings: Settings,
+  settings?: Settings,
   showCode?: boolean,
   unit?: Unit | null,
   val: number,
   withIcon?: boolean,
 }
 
-function FormattedVal(props: Props) {
+export function FormattedVal(props: Props) {
   const {
     animateTicker,
     disableRounding,
@@ -97,25 +101,21 @@ function FormattedVal(props: Props) {
     text = <Ticker text={text} />
   }
 
-  const marketColor = getMarketColor({
+  const marketColor = settings
-    marketIndicator: settings.marketIndicator,
+    ? getMarketColor({
-    isNegative,
+        marketIndicator: settings.marketIndicator,
-  })
+        isNegative,
+      })
+    : undefined
 
   return (
     <T color={color || marketColor} withIcon={withIcon} {...p}>
       {withIcon ? (
         <Box horizontal alignItems="center" flow={1}>
           <Box>
-            {isNegative ? (
+            <I color={marketColor}>
-              <I color={marketColor}>
+              {isNegative ? <IconBottom size={16} /> : <IconTop size={16} />}
-                <IconBottom size={16} />
+            </I>
-              </I>
-            ) : (
-              <I color={marketColor}>
-                <IconTop size={16} />
-              </I>
-            )}
           </Box>
           <Box horizontal alignItems="center">
             {text}
@@ -135,6 +135,7 @@ FormattedVal.defaultProps = {
   disableRounding: false,
   fiat: null,
   isPercent: false,
+  settings: undefined,
   showCode: false,
   unit: null,
   withIcon: false,