feat(assets): add chart to token details screen

src/exchange/CeloGoldHistoryChart.tsx

@@ -2,7 +2,14 @@
 import _ from 'lodash'
 import React, { useCallback, useState } from 'react'
 import { WithTranslation } from 'react-i18next'
-import { ActivityIndicator, LayoutChangeEvent, StyleSheet, Text, View } from 'react-native'
+import {
+  ActivityIndicator,
+  LayoutChangeEvent,
+  StyleSheet,
+  Text,
+  View,
+  ViewStyle,
+} from 'react-native'
 import { Circle, G, Line, Text as SvgText } from 'react-native-svg'
 import { CeloExchangeEvents } from 'src/analytics/Events'
 import ValoraAnalytics from 'src/analytics/ValoraAnalytics'
@@ -24,10 +31,12 @@
 const CHART_HEIGHT = 180
 const CHART_MIN_VERTICAL_RANGE = 0.1 // one cent
 const CHART_DOMAIN_PADDING = { y: [30, 30] as [number, number], x: [5, 5] as [number, number] }
-const CHART_PADDING = { left: variables.contentPadding, right: variables.contentPadding }
 
 interface OwnProps {
   testID?: string
+  color?: colors
+  containerStyle?: ViewStyle
+  chartPadding?: number
 }
 
 type Props = WithTranslation & OwnProps
@@ -92,7 +101,8 @@
 
 function renderPointOnChart(
   chartData: Array<{ amount: number | BigNumber; displayValue: string }>,
-  chartWidth: number
+  chartWidth: number,
+  color: colors
 ) {
   let lowestRateIdx = 0,
     highestRateIdx = 0
@@ -112,15 +122,15 @@
         result.push(
           <G key={idx + 'dot'}>
             <Line x1={0} y1={y} x2={chartWidth} y2={y} stroke={colors.gray2} strokeWidth="1" />
-            <Circle cx={x} cy={y} r="4" fill={colors.goldUI} />
+            <Circle cx={x} cy={y} r="4" fill={color} />
           </G>
         )
         break
 
       case chartData.length - 1:
         result.push(
           <G key={idx + 'dot'}>
-            <Circle cx={x} cy={y} r="4" fill={colors.goldUI} />
+            <Circle cx={x} cy={y} r="4" fill={color} />
           </G>
         )
         break
@@ -164,15 +174,21 @@
   }
 }
 
-function Loader() {
+function Loader({ color }: { color: colors }) {
   return (
     <View style={styles.loader}>
-      <ActivityIndicator size="large" color={colors.goldUI} />
+      <ActivityIndicator size="large" color={color} />
     </View>
   )
 }
 
-function CeloGoldHistoryChart({ testID, i18n }: Props) {
+function CeloGoldHistoryChart({
+  testID,
+  i18n,
+  color = colors.goldUI,
+  containerStyle,
+  chartPadding = variables.contentPadding,
+}: Props) {
   const localCurrencyCode = useSelector(getLocalCurrencyCode)
   const displayLocalCurrency = useCallback(
     (amount: BigNumber.Value) =>
@@ -193,7 +209,7 @@
   }, [])
 
   if (!exchangeHistory.aggregatedExchangeRates?.length) {
-    return <Loader />
+    return <Loader color={color} />
   }
 
   const chartData = exchangeHistory.aggregatedExchangeRates.map((exchangeRate) => {
@@ -210,7 +226,7 @@
     null
   const oldestGoldRateInLocalCurrency = chartData[0].amount
   if (oldestGoldRateInLocalCurrency === null || currentGoldRateInLocalCurrency === null) {
-    return <Loader />
+    return <Loader color={color} />
   }
   // We need displayValue to show min/max on the chart. In case the
   // current value is min/max we do not need to show it once again,
@@ -219,7 +235,7 @@
     amount: currentGoldRateInLocalCurrency,
     displayValue: displayLocalCurrency(currentGoldRateInLocalCurrency),
   })
-  const RenderPoint = renderPointOnChart(chartData, CHART_WIDTH)
+  const RenderPoint = renderPointOnChart(chartData, CHART_WIDTH, color)
 
   const values = chartData.map((el) => el.amount)
   const min = Math.min(...values)
@@ -236,11 +252,11 @@
   const latestExchangeRate = _.last(exchangeHistory.aggregatedExchangeRates)!
 
   return (
-    <View style={styles.container} onTouchStart={onTap} testID={testID}>
+    <View style={[styles.container, containerStyle]} onTouchStart={onTap} testID={testID}>
       <VictoryGroup
         domainPadding={CHART_DOMAIN_PADDING}
         singleQuadrantDomainPadding={false}
-        padding={CHART_PADDING}
+        padding={{ left: chartPadding, right: chartPadding }}
         width={CHART_WIDTH}
         height={CHART_HEIGHT}
         data={chartData.map((el) => el.amount)}
@@ -252,11 +268,11 @@
         <VictoryLine
           interpolation="monotoneX"
           style={{
-            data: { stroke: colors.goldUI },
+            data: { stroke: color },
           }}
         />
       </VictoryGroup>
-      <View style={styles.range}>
+      <View style={[styles.range, { paddingHorizontal: chartPadding }]}>
         <Text style={styles.timeframe}>
           {formatFeedDate(latestExchangeRate.timestamp - exchangeHistory.range, i18n)}
         </Text>
@@ -281,7 +297,6 @@
     fontSize: 16,
   },
   range: {
-    paddingHorizontal: variables.contentPadding,
     marginTop: variables.contentPadding,
     justifyContent: 'space-between',
     flexDirection: 'row',

src/exchange/__snapshots__/CeloGoldHistoryChart.test.tsx.snap

@@ -4,9 +4,12 @@ exports[`renders properly 1`] = `
 <View
   onTouchStart={[Function]}
   style={
-    {
-      "marginBottom": 24,
-    }
+    [
+      {
+        "marginBottom": 24,
+      },
+      undefined,
+    ]
   }
   testID="SnapshotCeloGoldOverview"
 >
@@ -164,12 +167,16 @@ exports[`renders properly 1`] = `
   </View>
   <View
     style={
-      {
-        "flexDirection": "row",
-        "justifyContent": "space-between",
-        "marginTop": 16,
-        "paddingHorizontal": 16,
-      }
+      [
+        {
+          "flexDirection": "row",
+          "justifyContent": "space-between",
+          "marginTop": 16,
+        },
+        {
+          "paddingHorizontal": 16,
+        },
+      ]
     }
   >
     <Text
@@ -200,9 +207,12 @@ exports[`renders while update is in progress 1`] = `
 <View
   onTouchStart={[Function]}
   style={
-    {
-      "marginBottom": 24,
-    }
+    [
+      {
+        "marginBottom": 24,
+      },
+      undefined,
+    ]
   }
   testID="SnapshotCeloGoldOverview"
 >
@@ -349,12 +359,16 @@ exports[`renders while update is in progress 1`] = `
   </View>
   <View
     style={
-      {
-        "flexDirection": "row",
-        "justifyContent": "space-between",
-        "marginTop": 16,
-        "paddingHorizontal": 16,
-      }
+      [
+        {
+          "flexDirection": "row",
+          "justifyContent": "space-between",
+          "marginTop": 16,
+        },
+        {
+          "paddingHorizontal": 16,
+        },
+      ]
     }
   >
     <Text

src/tokens/TokenDetails.test.tsx

@@ -7,7 +7,12 @@ import TokenDetailsScreen from 'src/tokens/TokenDetails'
 import { ONE_DAY_IN_MILLIS } from 'src/utils/time'
 import MockedNavigator from 'test/MockedNavigator'
 import { createMockStore } from 'test/utils'
-import { mockCeloTokenId, mockPoofTokenId, mockTokenBalances } from 'test/values'
+import {
+  exchangePriceHistory,
+  mockCeloTokenId,
+  mockPoofTokenId,
+  mockTokenBalances,
+} from 'test/values'
 
 jest.mock('src/statsig', () => ({
   getDynamicConfigParams: jest.fn(() => {
@@ -41,6 +46,7 @@ describe('TokenDetails', () => {
     expect(getByText('tokenDetails.yourBalance')).toBeTruthy()
     expect(getByTestId('TokenBalanceItem')).toBeTruthy()
     expect(queryByTestId('TokenDetails/LearnMore')).toBeFalsy()
+    expect(queryByTestId('TokenDetails/Chart')).toBeFalsy()
   })
 
   it('renders learn more if token has infoUrl', () => {
@@ -161,6 +167,27 @@ describe('TokenDetails', () => {
     expect(queryByText('tokenDetails.priceUnavailable')).toBeFalsy()
   })
 
+  it('renders chart if token is native (celo)', () => {
+    const store = createMockStore({
+      tokens: {
+        tokenBalances: {
+          [mockCeloTokenId]: mockTokenBalances[mockCeloTokenId],
+        },
+      },
+      exchange: {
+        history: exchangePriceHistory,
+      },
+    })
+
+    const { getByTestId } = render(
+      <Provider store={store}>
+        <MockedNavigator component={TokenDetailsScreen} params={{ tokenId: mockCeloTokenId }} />
+      </Provider>
+    )
+
+    expect(getByTestId('TokenDetails/Chart')).toBeTruthy()
+  })
+
   it('renders send action only if token has balance, is not swappable and not a CICO token', () => {
     const store = createMockStore({
       tokens: {

src/tokens/TokenDetails.tsx

@@ -13,6 +13,7 @@ import TokenDisplay from 'src/components/TokenDisplay'
 import TokenIcon, { IconSize } from 'src/components/TokenIcon'
 import Touchable from 'src/components/Touchable'
 import { TOKEN_MIN_AMOUNT } from 'src/config'
+import CeloGoldHistoryChart from 'src/exchange/CeloGoldHistoryChart'
 import { CICOFlow } from 'src/fiatExchanges/utils'
 import ArrowRightThick from 'src/icons/ArrowRightThick'
 import DataDown from 'src/icons/DataDown'
@@ -77,9 +78,17 @@ export default function TokenDetailsScreen({ route }: Props) {
           testID="TokenDetails/Balance"
         />
         {!token.isStableCoin && <PriceInfo token={token} />}
+        {token.isNative && token.symbol === 'CELO' && (
+          <CeloGoldHistoryChart
+            color={Colors.dark}
+            containerStyle={styles.chartContainer}
+            chartPadding={Spacing.Thick24}
+            testID="TokenDetails/Chart"
+          />
+        )}
         <Actions token={token} />
         <Text style={styles.yourBalance}>{t('tokenDetails.yourBalance')}</Text>
-        <TokenBalanceItem token={token} containerStyle={styles.tokenBalanceItem} />
+        <TokenBalanceItem token={token} />
         {token.infoUrl && (
           <LearnMore
             tokenName={token.name}
@@ -273,12 +282,12 @@ function LearnMore({
 const styles = StyleSheet.create({
   container: {
     flex: 1,
-    marginHorizontal: Spacing.Thick24,
   },
   titleContainer: {
     flexDirection: 'row',
     alignItems: 'center',
     marginVertical: Spacing.Smallest8,
+    marginHorizontal: Spacing.Thick24,
   },
   tokenName: {
     ...typeScale.labelLarge,
@@ -290,11 +299,17 @@ const styles = StyleSheet.create({
   balance: {
     ...typeScale.titleLarge,
     color: Colors.dark,
+    marginHorizontal: Spacing.Thick24,
+  },
+  chartContainer: {
+    marginTop: 40,
+    marginBottom: 0,
   },
   actions: {
     flexDirection: 'row',
     marginTop: 40,
     marginBottom: Spacing.Regular16,
+    marginHorizontal: Spacing.Thick24,
   },
   actionButton: {
     flexGrow: 1,
@@ -310,14 +325,13 @@ const styles = StyleSheet.create({
     ...typeScale.labelMedium,
     color: Colors.dark,
     marginTop: Spacing.Regular16,
-  },
-  tokenBalanceItem: {
-    marginHorizontal: 0,
+    marginHorizontal: Spacing.Thick24,
   },
   learnMoreContainer: {
     borderTopColor: Colors.gray2,
     borderTopWidth: 1,
     paddingTop: Spacing.Regular16,
+    marginHorizontal: Spacing.Thick24,
   },
   learnMoreTouchableContainer: {
     flexDirection: 'row',
@@ -330,6 +344,7 @@ const styles = StyleSheet.create({
   },
   priceInfo: {
     marginTop: Spacing.Tiny4,
+    marginHorizontal: Spacing.Thick24,
   },
   priceInfoText: {
     ...typeScale.labelSmall,

test/values.ts

@@ -536,6 +536,7 @@ export const mockTokenBalances: Record<string, StoredTokenBalance> = {
     showZeroBalance: true,
     isCashInEligible: true,
     isCashOutEligible: true,
+    isNative: true,
   },
   [mockCrealTokenId]: {
     priceUsd: '0.17',