WIP

Author: Jon-edge

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

@@ -83,6 +83,7 @@ const CoinRankingDetailsSceneComponent = (props: Props) => {
   const styles = getStyles(theme)
   const { route, navigation } = props
   const { assetId, coinRankingData: initCoinRankingData, fiatCurrencyCode } = route.params
+
   const [coinRankingData, setCoinRankingData] = React.useState<CoinRankingData | undefined>(initCoinRankingData)
   const { currencyCode, currencyName } = coinRankingData ?? {}
   const currencyCodeUppercase = currencyCode?.toUpperCase() ?? ''
@@ -108,7 +109,7 @@ const CoinRankingDetailsSceneComponent = (props: Props) => {
         if (assetId == null) {
           throw new Error('No currencyCode or coinRankingData provided')
         }
-        const response = await fetchRates(`v2/coinrankAsset/${assetId}?fiatCode=${supportedFiat}`)
+        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}`)

src/components/scenes/TransactionListScene.tsx

@@ -1,3 +1,4 @@
+import { gt, mul } from 'biggystring'
 import { EdgeCurrencyWallet, EdgeTokenId, EdgeTokenMap, EdgeTransaction } from 'edge-core-js'
 import * as React from 'react'
 import { ListRenderItemInfo, Platform, RefreshControl, View } from 'react-native'
@@ -12,24 +13,26 @@ import { useHandler } from '../../hooks/useHandler'
 import { useIconColor } from '../../hooks/useIconColor'
 import { useTransactionList } from '../../hooks/useTransactionList'
 import { useWatch } from '../../hooks/useWatch'
+import { formatNumber } from '../../locales/intl'
 import { lstrings } from '../../locales/strings'
 import { getExchangeDenomByCurrencyCode } from '../../selectors/DenominationSelectors'
 import { FooterRender } from '../../state/SceneFooterState'
 import { useSceneScrollHandler } from '../../state/SceneScrollState'
 import { useDispatch, useSelector } from '../../types/reactRedux'
 import { NavigationBase, WalletsTabSceneProps } from '../../types/routerTypes'
 import { coinrankListData, infoServerData } from '../../util/network'
-import { calculateSpamThreshold, darkenHexColor, unixToLocaleDateTime, zeroString } from '../../util/utils'
+import { calculateSpamThreshold, convertNativeToDenomination, darkenHexColor, unixToLocaleDateTime, zeroString } from '../../util/utils'
+import { EdgeCard } from '../cards/EdgeCard'
 import { InfoCardCarousel } from '../cards/InfoCardCarousel'
 import { SwipeChart } from '../charts/SwipeChart'
 import { AccentColors } from '../common/DotsBackground'
 import { EdgeAnim, fadeInDown10, MAX_LIST_ITEMS_ANIM } from '../common/EdgeAnim'
-import { EdgeTouchableOpacity } from '../common/EdgeTouchableOpacity'
 import { SceneWrapper } from '../common/SceneWrapper'
+import { SectionHeader as SectionHeaderUi4 } from '../common/SectionHeader'
 import { withWallet } from '../hoc/withWallet'
 import { cacheStyles, useTheme } from '../services/ThemeContext'
 import { BuyCrypto } from '../themed/BuyCrypto'
-import { EdgeText } from '../themed/EdgeText'
+import { EdgeText, Paragraph } from '../themed/EdgeText'
 import { ExplorerCard } from '../themed/ExplorerCard'
 import { SearchFooter } from '../themed/SearchFooter'
 import { EmptyLoader, SectionHeader, SectionHeaderCentered } from '../themed/TransactionListComponents'
@@ -59,6 +62,7 @@ function TransactionListComponent(props: Props) {
   const tokenId = checkToken(route.params.tokenId, wallet.currencyConfig.allTokens)
   const { pluginId } = wallet.currencyInfo
   const { currencyCode } = tokenId == null ? wallet.currencyInfo : wallet.currencyConfig.allTokens[tokenId]
+  const { displayName } = tokenId == null ? wallet.currencyInfo : wallet.currencyConfig.allTokens[tokenId]
 
   // State:
   const flashListRef = React.useRef<Animated.FlatList<ListItem> | null>(null)
@@ -83,6 +87,13 @@ function TransactionListComponent(props: Props) {
   // Derived values
   // ---------------------------------------------------------------------------
 
+  // Fiat Balance Formatting
+  const exchangeAmount = convertNativeToDenomination(exchangeDenom.multiplier)(exchangeDenom.multiplier)
+  const fiatRate = mul(exchangeAmount, exchangeRate)
+  const fiatRateFormat = `${formatNumber(fiatRate && gt(fiatRate, '0.000001') ? fiatRate : 0, {
+    toFixed: gt(fiatRate, '1000') ? 0 : 2
+  })} ${fiatCurrencyCode}/${currencyCode}`
+
   const spamThreshold = React.useMemo<string | undefined>(() => {
     if (spamFilterOn && !zeroString(exchangeRate)) {
       return calculateSpamThreshold(exchangeRate, exchangeDenom)
@@ -185,6 +196,12 @@ function TransactionListComponent(props: Props) {
     setFooterHeight(height)
   })
 
+  const assetId = coinrankListData.coins[currencyCode]
+
+  const handlePressCoinRanking = useHandler(() => {
+    navigation.navigate('coinRankingDetails', { assetId, fiatCurrencyCode })
+  })
+
   //
   // Renderers
   //
@@ -206,12 +223,6 @@ function TransactionListComponent(props: Props) {
     )
   }, [])
 
-  const assetId = coinrankListData.coins[currencyCode]
-
-  const handlePressCoinRanking = useHandler(() => {
-    navigation.navigate('coinRankingDetails', { assetId, fiatCurrencyCode })
-  })
-
   const topArea = React.useMemo(() => {
     return (
       <>
@@ -232,12 +243,20 @@ function TransactionListComponent(props: Props) {
           countryCode={route.params.countryCode}
           screenWidth={screenWidth}
         />
+        {assetId != null && <SectionHeaderUi4 leftTitle={displayName} rightNode={lstrings.coin_rank_see_more} onRightPress={handlePressCoinRanking} />}
         {assetId != null && (
-          <EdgeTouchableOpacity onPress={handlePressCoinRanking}>
-            <EdgeText>See More</EdgeText>
-          </EdgeTouchableOpacity>
+          <EdgeCard>
+            <Paragraph>
+              <EdgeText>{fiatRateFormat}</EdgeText>
+            </Paragraph>
+            <SwipeChart cardAdjust assetId={assetId} currencyCode={currencyCode} fiatCurrencyCode={fiatCurrencyCode} />
+          </EdgeCard>
         )}
-        {assetId != null && <SwipeChart assetId={assetId} currencyCode={currencyCode} fiatCurrencyCode={fiatCurrencyCode} />}
+        <SectionHeaderUi4
+          leftTitle={lstrings.transaction_list_recent_transactions}
+          rightNode={lstrings.coin_rank_see_more}
+          onRightPress={handlePressCoinRanking}
+        />
       </>
     )
   }, [
@@ -251,9 +270,11 @@ function TransactionListComponent(props: Props) {
     route.params.countryCode,
     screenWidth,
     assetId,
+    displayName,
+    handlePressCoinRanking,
+    fiatRateFormat,
     currencyCode,
-    fiatCurrencyCode,
-    handlePressCoinRanking
+    fiatCurrencyCode
   ])
 
   const emptyComponent = React.useMemo(() => {

src/locales/en_US.ts

@@ -225,6 +225,7 @@ const strings = {
   transaction_list_no_tx_support_yet: 'Transaction history is not yet supported',
   transaction_list_search: 'Search Transactions',
   transaction_list_search_no_result: 'Search returned no results',
+  transaction_list_recent_transactions: 'Recent Transactions',
   fragment_wallets_balance_text: 'Total Balance',
   fragment_wallets_delete_wallet: 'Archive Wallet',
   fragment_wallets_delete_token: 'Disable Token',
@@ -1532,6 +1533,7 @@ const strings = {
   coin_rank_week: '7D',
   coin_rank_month: '30D',
   coin_rank_year: '1Y',
+  coin_rank_see_more: 'See More',
 
   // #endregion CoinRanking
 

src/util/network.ts

@@ -8,7 +8,7 @@ import { config } from '../theme/appConfig'
 import { asyncWaterfall, getOsVersion, shuffleArray } from './utils'
 const INFO_SERVERS = ['https://info1.edge.app', 'https://info2.edge.app']
 // const RATES_SERVERS = ['https://rates1.edge.app', 'https://rates2.edge.app']
-const RATES_SERVERS = ['http://localhost:8008']
+const RATES_SERVERS = ['http://localhost:8087']
 
 const INFO_FETCH_INTERVAL = 5 * 60 * 1000 // 5 minutes