WIP on add charts to txlist

CHANGELOG.md

@@ -2,6 +2,9 @@
 
 ## Unreleased (develop)
 
+- added: Price chart to `TransactionListScene`
+- changed: `TransactionListScene` split into two scenes: `TransactionListScene` and `TransactionListScene2`
+
 ## 4.21.0 (staging)
 
 - added: Add SUI

src/app.ts

@@ -17,7 +17,7 @@ import { changeTheme, getTheme } from './components/services/ThemeContext'
 import { ENV } from './env'
 import { NumberMap } from './types/types'
 import { log, logToServer } from './util/logger'
-import { initInfoServer } from './util/network'
+import { initCoinrankList, initInfoServer } from './util/network'
 
 export type Environment = 'development' | 'testing' | 'production'
 
@@ -278,5 +278,6 @@ if (ENV.DEBUG_THEME) {
 
 initDeviceSettings().catch(err => console.log(err))
 initInfoServer().catch(err => console.log(err))
+initCoinrankList().catch(err => console.log(err))
 
 if (global.Buffer == null) global.Buffer = Buffer

src/components/Main.tsx

@@ -126,6 +126,7 @@ import { SweepPrivateKeyProcessingScene as SweepPrivateKeyProcessingSceneCompone
 import { SweepPrivateKeySelectCryptoScene as SweepPrivateKeySelectCryptoSceneComponent } from './scenes/SweepPrivateKeySelectCryptoScene'
 import { TransactionDetailsScene as TransactionDetailsSceneComponent } from './scenes/TransactionDetailsScene'
 import { TransactionList as TransactionListComponent } from './scenes/TransactionListScene'
+import { TransactionList2 as TransactionList2Component } from './scenes/TransactionListScene2'
 import { TransactionsExportScene as TransactionsExportSceneComponent } from './scenes/TransactionsExportScene'
 import { UpgradeUsernameScene as UpgradeUsernameSceneComponent } from './scenes/UpgradeUsernameScreen'
 import { WalletListScene as WalletListSceneComponent } from './scenes/WalletListScene'
@@ -218,6 +219,7 @@ const SwapSettingsScene = ifLoggedIn(SwapSettingsSceneComponent)
 const SwapSuccessScene = ifLoggedIn(SwapSuccessSceneComponent)
 const TransactionDetailsScene = ifLoggedIn(TransactionDetailsSceneComponent)
 const TransactionList = ifLoggedIn(TransactionListComponent)
+const TransactionList2 = ifLoggedIn(TransactionList2Component)
 const TransactionsExportScene = ifLoggedIn(TransactionsExportSceneComponent)
 const WalletListScene = ifLoggedIn(WalletListSceneComponent)
 const WalletRestoreScene = ifLoggedIn(WalletRestoreSceneComponent)
@@ -276,6 +278,13 @@ const EdgeWalletsTabScreen = () => {
           headerTitle: () => <ParamHeaderTitle<'transactionList'> fromParams={params => params.walletName} />
         }}
       />
+      <WalletsStack.Screen
+        name="transactionList2"
+        component={TransactionList2}
+        options={{
+          headerTitle: () => <ParamHeaderTitle<'transactionList2'> fromParams={params => params.walletName} />
+        }}
+      />
     </WalletsStack.Navigator>
   )
 }
@@ -781,6 +790,13 @@ const EdgeAppStack = () => {
           headerTitle: () => <TransactionDetailsTitle />
         }}
       />
+      <WalletsStack.Screen
+        name="transactionList2"
+        component={TransactionList2}
+        options={{
+          headerTitle: () => <ParamHeaderTitle<'transactionList2'> fromParams={params => params.walletName} />
+        }}
+      />
       <AppStack.Screen
         name="transactionsExport"
         component={TransactionsExportScene}

src/components/charts/SwipeChart.tsx

@@ -25,9 +25,12 @@ type Timespan = 'year' | 'month' | 'week' | 'day' | 'hour'
 type CoinGeckoDataPair = number[]
 
 interface Props {
-  assetId: string // The asset's 'id' as defined by CoinGecko
+  /** The asset's 'id' as defined by CoinGecko */
+  assetId: string
   currencyCode: string
   fiatCurrencyCode: string
+  /** Modify positioning to fit properly in a card */
+  cardAdjust?: boolean
 }
 interface ChartDataPoint {
   x: Date
@@ -129,7 +132,7 @@ const reduceChartData = (chartData: ChartDataPoint[], timespan: Timespan): Chart
 const SwipeChartComponent = (params: Props) => {
   const theme = useTheme()
   const styles = getStyles(theme)
-  const { assetId, currencyCode, fiatCurrencyCode } = params
+  const { assetId, cardAdjust, currencyCode, fiatCurrencyCode } = params
 
   // #region Chart setup
 
@@ -567,7 +570,7 @@ const SwipeChartComponent = (params: Props) => {
             toolTipProps={tooltipProps}
             // #endregion ToolTip
 
-            style={styles.baseChart}
+            style={[styles.baseChart, cardAdjust ? styles.cardAdjust : undefined]}
           />
 
           {/* Min/Max price labels */}
@@ -614,6 +617,9 @@ const getStyles = cacheStyles((theme: Theme) => {
       alignSelf: 'flex-start',
       position: 'absolute'
     },
+    cardAdjust: {
+      marginLeft: theme.rem(-1)
+    },
     container: {
       margin: theme.rem(0.5)
     },

src/components/scenes/CoinRankingDetailsScene.tsx

@@ -3,13 +3,15 @@ import * as React from 'react'
 import { View } from 'react-native'
 import FastImage from 'react-native-fast-image'
 
+import { useAsyncEffect } from '../../hooks/useAsyncEffect'
 import { formatFiatString } from '../../hooks/useFiatText'
 import { toLocaleDate, toPercentString } from '../../locales/intl'
 import { lstrings } from '../../locales/strings'
 import { getDefaultFiat } from '../../selectors/SettingsSelectors'
-import { CoinRankingData, CoinRankingDataPercentChange } from '../../types/coinrankTypes'
+import { asCoinRankingData, CoinRankingData, CoinRankingDataPercentChange } from '../../types/coinrankTypes'
 import { useSelector } from '../../types/reactRedux'
 import { EdgeAppSceneProps } from '../../types/routerTypes'
+import { fetchRates } from '../../util/network'
 import { formatLargeNumberString as formatLargeNumber } from '../../util/utils'
 import { SwipeChart } from '../charts/SwipeChart'
 import { EdgeAnim, fadeInLeft } from '../common/EdgeAnim'
@@ -21,7 +23,8 @@ import { COINGECKO_SUPPORTED_FIATS } from './CoinRankingScene'
 type CoinRankingDataValueType = string | number | CoinRankingDataPercentChange | undefined
 
 export interface CoinRankingDetailsParams {
-  coinRankingData: CoinRankingData
+  assetId?: string
+  coinRankingData?: CoinRankingData
   fiatCurrencyCode: string
 }
 
@@ -79,9 +82,11 @@ const CoinRankingDetailsSceneComponent = (props: Props) => {
   const theme = useTheme()
   const styles = getStyles(theme)
   const { route, navigation } = props
-  const { coinRankingData, fiatCurrencyCode } = route.params
-  const { currencyCode, currencyName } = coinRankingData
-  const currencyCodeUppercase = currencyCode.toUpperCase()
+  const { assetId, coinRankingData: initCoinRankingData, fiatCurrencyCode } = route.params
+
+  const [coinRankingData, setCoinRankingData] = React.useState<CoinRankingData | undefined>(initCoinRankingData)
+  const { currencyCode, currencyName } = coinRankingData ?? {}
+  const currencyCodeUppercase = currencyCode?.toUpperCase() ?? ''
 
   // In case the user changes their default fiat while viewing this scene, we
   // want to go back since the parent scene handles fetching data.
@@ -98,9 +103,30 @@ const CoinRankingDetailsSceneComponent = (props: Props) => {
     }
   }, [supportedFiat, initFiat, isFocused, navigation])
 
+  useAsyncEffect(
+    async () => {
+      if (coinRankingData == null) {
+        if (assetId == null) {
+          throw new Error('No currencyCode or coinRankingData provided')
+        }
+        const response = await fetchRates(`v2/coinrankAsset/${assetId}?fiatCode=iso:${supportedFiat}`)
+        if (!response.ok) {
+          const text = await response.text()
+          throw new Error(`Unable to fetch coin ranking data. ${text}`)
+        }
+
+        const json = await response.json()
+        const crData = asCoinRankingData(json.data)
+        setCoinRankingData(crData)
+      }
+    },
+    [currencyCode, supportedFiat],
+    'CoinRankingDetailsScene'
+  )
+
   const imageUrlObject = React.useMemo(
     () => ({
-      uri: coinRankingData.imageUrl ?? ''
+      uri: coinRankingData?.imageUrl ?? ''
     }),
     [coinRankingData]
   )
@@ -140,19 +166,19 @@ const CoinRankingDetailsSceneComponent = (props: Props) => {
       case 'rank':
         return `#${baseString}`
       case 'marketCapChange24h':
-        extendedString = coinRankingData.marketCapChangePercent24h != null ? ` (${toPercentString(coinRankingData.marketCapChangePercent24h / 100)})` : ''
+        extendedString = coinRankingData?.marketCapChangePercent24h != null ? ` (${toPercentString(coinRankingData.marketCapChangePercent24h / 100)})` : ''
         break
       case 'allTimeHigh': {
         const fiatString = `${formatFiatString({
           fiatAmount: baseString
         })} ${supportedFiat}`
-        return coinRankingData.allTimeHighDate != null ? `${fiatString} - ${toLocaleDate(new Date(coinRankingData.allTimeHighDate))}` : fiatString
+        return coinRankingData?.allTimeHighDate != null ? `${fiatString} - ${toLocaleDate(new Date(coinRankingData.allTimeHighDate))}` : fiatString
       }
       case 'allTimeLow': {
         const fiatString = `${formatFiatString({
           fiatAmount: baseString
         })} ${supportedFiat}`
-        return coinRankingData.allTimeLowDate != null ? `${fiatString} - ${toLocaleDate(new Date(coinRankingData.allTimeLowDate))}` : fiatString
+        return coinRankingData?.allTimeLowDate != null ? `${fiatString} - ${toLocaleDate(new Date(coinRankingData.allTimeLowDate))}` : fiatString
       }
       default:
         // If no special modifications, just return simple data formatting
@@ -194,17 +220,21 @@ const CoinRankingDetailsSceneComponent = (props: Props) => {
 
   return (
     <SceneWrapper hasTabs hasNotifications scroll>
-      <View style={styles.container}>
-        <EdgeAnim style={styles.titleContainer} enter={fadeInLeft}>
-          <FastImage style={styles.icon} source={imageUrlObject} />
-          <EdgeText style={styles.title}>{`${currencyName} (${currencyCodeUppercase})`}</EdgeText>
-        </EdgeAnim>
-        <SwipeChart assetId={coinRankingData.assetId} currencyCode={currencyCodeUppercase} fiatCurrencyCode={initFiat} />
-        <View style={styles.columns}>
-          <View style={styles.column}>{renderRows(coinRankingData, COLUMN_LEFT_DATA_KEYS)}</View>
-          <View style={styles.column}>{renderRows(coinRankingData, COLUMN_RIGHT_DATA_KEYS)}</View>
+      {coinRankingData != null ? (
+        <View style={styles.container}>
+          <EdgeAnim style={styles.titleContainer} enter={fadeInLeft}>
+            <FastImage style={styles.icon} source={imageUrlObject} />
+            <EdgeText style={styles.title}>{`${currencyName} (${currencyCodeUppercase})`}</EdgeText>
+          </EdgeAnim>
+          <SwipeChart assetId={coinRankingData.assetId} currencyCode={currencyCodeUppercase} fiatCurrencyCode={initFiat} />
+          <View style={styles.columns}>
+            <View style={styles.column}>{renderRows(coinRankingData, COLUMN_LEFT_DATA_KEYS)}</View>
+            <View style={styles.column}>{renderRows(coinRankingData, COLUMN_RIGHT_DATA_KEYS)}</View>
+          </View>
         </View>
-      </View>
+      ) : (
+        <EdgeText>Loading...</EdgeText>
+      )}
     </SceneWrapper>
   )
 }