feat(sb): display fiat dropdown in tx list view

blockchain · Jul 20, 2020 · 8f5a5ee · 8f5a5ee
1 parent b6ccf51
commit 8f5a5ee
Show file tree

Hide file tree

Showing 12 changed files with 109 additions and 82 deletions.
diff --git a/...blockchain-wallet-v4-frontend/src/scenes/Transactions/TransactionList/template.fiattx.tsx b/...blockchain-wallet-v4-frontend/src/scenes/Transactions/TransactionList/template.fiattx.tsx
@@ -1,10 +1,14 @@
 import React from 'react'
 
+import { CustodialTransactionRow } from '../components'
 import { SBTransactionType } from 'core/types'
-import { TransactionRow } from '../components'
 
 const FiatTxListItem: React.FC<Props> = props => {
-  return <TransactionRow>{JSON.stringify(props.tx)}</TransactionRow>
+  return (
+    <CustodialTransactionRow>
+      {JSON.stringify(props.tx)}
+    </CustodialTransactionRow>
+  )
 }
 
 type Props = {

diff --git a/...lockchain-wallet-v4-frontend/src/scenes/Transactions/TransactionList/template.sborder.tsx b/...lockchain-wallet-v4-frontend/src/scenes/Transactions/TransactionList/template.sborder.tsx
@@ -11,9 +11,9 @@ import styled from 'styled-components'
 import { actions } from 'data'
 
 import { convertBaseToStandard } from 'data/components/exchange/services'
+import { CustodialTransactionRow } from '../components'
 import { getOrderType } from 'data/components/simpleBuy/model'
 import { Status } from './model'
-import { TransactionRow } from '../components'
 
 const StatusColumn = styled.div`
   display: flex;
@@ -73,7 +73,7 @@ class SimpleBuyListItem extends PureComponent<Props> {
         : 'Not yet implemented'
 
     return (
-      <TransactionRow onClick={() => this.showModal(order)}>
+      <CustodialTransactionRow onClick={() => this.showModal(order)}>
         <StatusColumn data-e2e='orderStatusColumn'>
           <Status order={order} />
         </StatusColumn>
@@ -95,7 +95,7 @@ class SimpleBuyListItem extends PureComponent<Props> {
             />
           </Button>
         </ViewInfoColumn>
-      </TransactionRow>
+      </CustodialTransactionRow>
     )
   }
 }

diff --git a/...ges/blockchain-wallet-v4-frontend/src/scenes/Transactions/WalletBalanceDropdown/index.tsx b/...ges/blockchain-wallet-v4-frontend/src/scenes/Transactions/WalletBalanceDropdown/index.tsx
@@ -1,6 +1,6 @@
 import { actions } from 'data'
 import { bindActionCreators, Dispatch } from 'redux'
-import { CoinType, SupportedCoinType } from 'core/types'
+import { CoinType, FiatTypeEnum, SupportedCoinType } from 'core/types'
 import { connect, ConnectedProps } from 'react-redux'
 import { Field } from 'redux-form'
 import { flatten } from 'ramda'
@@ -160,6 +160,7 @@ export class WalletBalanceDropdown extends Component<Props> {
         currency: 'USD',
         currencySymbol: '$',
         priceChangeFiat: 0,
+        price24H: { change: '0', movement: 'none', price: 1 },
         priceChangePercentage: 0
       }).balanceData
     } else if (selectProps.value) {
@@ -205,15 +206,17 @@ export class WalletBalanceDropdown extends Component<Props> {
             <FormattedMessage id='copy.balance' defaultMessage='Balance' />
           </Text>
           <AmountContainer>
-            <FiatDisplay
-              coin={this.props.coin}
-              size='24px'
-              weight={500}
-              cursor='pointer'
-              color='grey800'
-            >
-              {balance}
-            </FiatDisplay>
+            {!(coinCode in FiatTypeEnum) && (
+              <FiatDisplay
+                coin={this.props.coin}
+                size='24px'
+                weight={500}
+                cursor='pointer'
+                color='grey800'
+              >
+                {balance}
+              </FiatDisplay>
+            )}
           </AmountContainer>
 
           {this.hasBalanceOrAccounts(props.selectProps.options) ||
@@ -225,6 +228,7 @@ export class WalletBalanceDropdown extends Component<Props> {
                 currency: 'USD',
                 currencySymbol: '$',
                 priceChangeFiat: 0,
+                price24H: { change: '0', movement: 'none', price: 1 },
                 priceChangePercentage: 0
               })}
             >

diff --git a/.../blockchain-wallet-v4-frontend/src/scenes/Transactions/WalletBalanceDropdown/selectors.ts b/.../blockchain-wallet-v4-frontend/src/scenes/Transactions/WalletBalanceDropdown/selectors.ts
@@ -1,7 +1,6 @@
 import * as balanceSelectors from 'components/Balances/wallet/selectors'
-import { CurrenciesType } from 'core/exchange/currencies'
+import { CoinTypeEnum, ExtractSuccess, FiatType, RatesType } from 'core/types'
 import { Exchange, Remote } from 'blockchain-wallet-v4/src'
-import { FiatType, RemoteDataType } from 'core/types'
 import { getData as getAlgoAddressData } from 'components/Form/SelectBoxAlgoAddresses/selectors'
 import { getData as getBchAddressData } from 'components/Form/SelectBoxBchAddresses/selectors'
 import { getData as getBtcAddressData } from 'components/Form/SelectBoxBtcAddresses/selectors'
@@ -10,24 +9,11 @@ import {
   getEthData as getEthAddressData
 } from 'components/Form/SelectBoxEthAddresses/selectors'
 import { getData as getXlmAddressData } from 'components/Form/SelectBoxXlmAddresses/selectors'
-import { last, lift, nth, prop } from 'ramda'
+import { lift } from 'ramda'
 import { OwnProps } from '.'
 import { selectors } from 'data'
 
-export const getData = (
-  state,
-  ownProps: OwnProps
-): RemoteDataType<
-  string | Error,
-  {
-    addressData: { data: Array<any> }
-    balanceData: number
-    currency: FiatType
-    currencySymbol: string
-    priceChangeFiat: number
-    priceChangePercentage: number
-  }
-> => {
+export const getData = (state, ownProps: OwnProps) => {
   const { coin } = ownProps
   let addressDataR
   let balanceDataR
@@ -97,40 +83,42 @@ export const getData = (
       balanceDataR = Remote.Success(0)
       coinRatesR = selectors.core.data.eth.getErc20Rates(state, 'pax')
   }
-  const priceIndexSeriesR = selectors.core.data.misc.getPriceIndexSeries(state)
+  const price24HrR = selectors.core.data.misc.getPrice24H(coin, state)
   const currencyR = selectors.core.settings.getCurrency(state)
 
   const transform = (
     addressData,
     balanceData,
-    coinRates,
-    currency: keyof CurrenciesType,
-    priceIndexSeries
+    coinRates: RatesType,
+    currency: FiatType,
+    price24H: ExtractSuccess<typeof price24HrR>
   ) => {
-    const { value } = Exchange.convertCoinToCoin({
-      value: balanceData,
-      coin,
-      baseToStandard: true
-    })
-    const currentValue = Exchange.convertCoinToFiat(
-      value,
-      coin,
-      currency,
-      coinRates
-    )
-    // @ts-ignore
-    let currentPrice = prop('price', last(priceIndexSeries))
-    // @ts-ignore
-    let yesterdayPrice = prop('price', nth(-23, priceIndexSeries))
+    let value
+    let currentValue
+
+    if (coin in CoinTypeEnum) {
+      value = Exchange.convertCoinToCoin({
+        value: balanceData,
+        coin,
+        baseToStandard: true
+      }).value
+      currentValue = Exchange.convertCoinToFiat(
+        value,
+        coin,
+        currency,
+        coinRates
+      )
+    }
+
+    let yesterdayPrice = price24H.price
     const yesterdayValue = Exchange.convertCoinToFiat(value, coin, currency, {
-      ...priceIndexSeries,
+      ...coinRates,
       [currency]: {
         last: yesterdayPrice
       }
     })
 
-    const changePercentage =
-      ((currentPrice - yesterdayPrice) / yesterdayPrice) * 100
+    const changePercentage = price24H.change
 
     const changeFiat = currentValue - yesterdayValue
 
@@ -139,8 +127,9 @@ export const getData = (
       addressData,
       balanceData,
       currencySymbol: Exchange.getSymbol(currency),
+      price24H,
       priceChangeFiat: changeFiat,
-      priceChangePercentage: changePercentage
+      priceChangePercentage: Number(changePercentage)
     }
   }
 
@@ -150,6 +139,6 @@ export const getData = (
     balanceDataR,
     coinRatesR,
     currencyR,
-    priceIndexSeriesR
+    price24HrR
   )
 }
diff --git a/packages/blockchain-wallet-v4-frontend/src/scenes/Transactions/components/index.tsx b/packages/blockchain-wallet-v4-frontend/src/scenes/Transactions/components/index.tsx
@@ -1,6 +1,6 @@
 import styled from 'styled-components'
 
-export const TransactionRow = styled.div`
+export const CustodialTransactionRow = styled.div`
   width: 100%;
   display: flex;
   cursor: pointer;
@@ -11,4 +11,4 @@ export const TransactionRow = styled.div`
   padding: 14px;
   padding-left: 0px;
   margin-left: 14px;
-`
+`
diff --git a/packages/blockchain-wallet-v4-frontend/src/scenes/Transactions/index.tsx b/packages/blockchain-wallet-v4-frontend/src/scenes/Transactions/index.tsx
@@ -1,6 +1,6 @@
 import { actions, model } from 'data'
+import { bindActionCreators, compose, Dispatch } from 'redux'
 import { CoinType, FiatType, FiatTypeEnum, SupportedCoinType } from 'core/types'
-import { compose, Dispatch } from 'redux'
 import { connect, ConnectedProps } from 'react-redux'
 import { getData } from './selectors'
 import { getHeaderExplainer } from './template.headerexplainer'
@@ -73,6 +73,7 @@ const StatsContainer = styled.div`
 class TransactionsContainer extends React.PureComponent<Props> {
   componentDidMount () {
     this.props.initTxs()
+    this.props.miscActions.fetchPrice24H(this.props.coin, this.props.currency)
   }
 
   componentDidUpdate (prevProps) {
@@ -118,17 +119,18 @@ class TransactionsContainer extends React.PureComponent<Props> {
               </Text>
             </PageTitle>
             <ExplainerWrapper>{getHeaderExplainer(coinModel)}</ExplainerWrapper>
-            {/* TODO: render dropdown for fiat */}
-            {!(coin in FiatTypeEnum) && (
+            {
               <StatsContainer>
                 <WalletBalanceDropdown
                   coin={coin}
                   coinModel={coinModel}
                   isCoinErc20={isCoinErc20}
                 />
-                <CoinPerformance coin={coin} coinModel={coinModel} />
+                {!(coin in FiatTypeEnum) && (
+                  <CoinPerformance coin={coin} coinModel={coinModel} />
+                )}
               </StatsContainer>
-            )}
+            }
           </Header>
           {(hasTxResults || isSearchEntered) && (
             <TransactionFilters coin={coin} />
@@ -177,7 +179,8 @@ const mapDispatchToProps = (dispatch: Dispatch, ownProps) => {
       initTxs: () =>
         dispatch(actions.components.ethTransactions.initializedErc20(coin)),
       loadMoreTxs: () =>
-        dispatch(actions.components.ethTransactions.loadMoreErc20(coin))
+        dispatch(actions.components.ethTransactions.loadMoreErc20(coin)),
+      miscActions: bindActionCreators(actions.core.data.misc, dispatch)
     }
   }
   if (coin in FiatTypeEnum) {
@@ -186,7 +189,8 @@ const mapDispatchToProps = (dispatch: Dispatch, ownProps) => {
       loadMoreTxs: () =>
         dispatch(actions.components.fiatTransactions.loadMore(coin)),
       initTxs: () =>
-        dispatch(actions.components.fiatTransactions.initialized(coin))
+        dispatch(actions.components.fiatTransactions.initialized(coin)),
+      miscActions: bindActionCreators(actions.core.data.misc, dispatch)
     }
   }
   return {
@@ -197,6 +201,7 @@ const mapDispatchToProps = (dispatch: Dispatch, ownProps) => {
       ),
     loadMoreTxs: () =>
       dispatch(actions.components[`${toLower(coin)}Transactions`].loadMore()),
+    miscActions: bindActionCreators(actions.core.data.misc, dispatch),
     setAddressArchived: address =>
       dispatch(actions.core.wallet.setAddressArchived(address, true))
   }

diff --git a/packages/blockchain-wallet-v4-frontend/src/scenes/Transactions/model.tsx b/packages/blockchain-wallet-v4-frontend/src/scenes/Transactions/model.tsx
@@ -1,5 +1,5 @@
 import { Exchange } from 'blockchain-wallet-v4/src'
-import { FiatType } from 'core/types'
+import { FiatType, PriceChangeType } from 'core/types'
 import { formatFiat } from 'core/exchange/currency'
 import { Text } from 'blockchain-info-components'
 import React from 'react'
@@ -13,38 +13,48 @@ const PriceChangeText = styled(Text)`
   color: ${props => props.theme.grey600};
 `
 
-const PriceChangeColoredText = styled.span<{ priceChange: number }>`
+const PriceChangeColoredText = styled.span<{
+  priceChange: number | PriceChangeType
+}>`
   font-weight: 600;
   color: ${props =>
-    props.priceChange === 0
-      ? props.theme.grey600
-      : props.priceChange > 0
+    typeof props.priceChange === 'number'
+      ? props.priceChange === 0
+        ? props.theme.grey600
+        : props.priceChange > 0
+        ? props.theme.green400
+        : props.theme.red500
+      : props.priceChange.movement === 'down'
+      ? props.theme.red500
+      : props.priceChange.movement === 'up'
       ? props.theme.green400
-      : props.theme.red500};
+      : props.theme.grey600};
 `
 
 export const PriceChange = ({
   currency,
   priceChangeFiat,
   priceChangePercentage,
+  price24H,
   children
 }: {
   children: any
   currency: FiatType
+  price24H?: PriceChangeType
   priceChangeFiat: number
   priceChangePercentage: number
 }) => {
   let priceFormatted
   let price = formatFiat(priceChangeFiat)
-  if (priceChangeFiat < 0) {
+  if (priceChangeFiat < 0 || price24H?.movement === 'down') {
     priceFormatted = `-${Exchange.getSymbol(currency)}${price.substring(1)}`
   } else {
     priceFormatted = `${Exchange.getSymbol(currency)}${price}`
   }
 
   return (
     <PriceChangeText>
-      <PriceChangeColoredText priceChange={priceChangePercentage}>
+      <PriceChangeColoredText priceChange={price24H || priceChangePercentage}>
         {priceFormatted} ({formatFiat(priceChangePercentage)})%
       </PriceChangeColoredText>
       {children}

diff --git a/packages/blockchain-wallet-v4/src/redux/data/misc/actions.ts b/packages/blockchain-wallet-v4/src/redux/data/misc/actions.ts
@@ -30,13 +30,15 @@ export const fetchPrice24HLoading = (base: CoinType): MiscActionTypes => ({
 export const fetchPrice24HSuccess = (
   base: CoinType,
   change: string,
-  movement: PriceMovementDirType
+  movement: PriceMovementDirType,
+  price: number
 ): MiscActionTypes => ({
   type: AT.FETCH_PRICE_24H_SUCCESS,
   payload: {
     base,
     change,
-    movement
+    movement,
+    price
   }
 })
 export const fetchPrice24HFailure = (base, error): MiscActionTypes => ({

diff --git a/packages/blockchain-wallet-v4/src/redux/data/misc/reducers.ts b/packages/blockchain-wallet-v4/src/redux/data/misc/reducers.ts
@@ -14,7 +14,9 @@ const INITIAL_STATE: MiscStateType = {
     XLM: Remote.NotAsked,
     ALGO: Remote.NotAsked,
     PAX: Remote.NotAsked,
-    USDT: Remote.NotAsked
+    USDT: Remote.NotAsked,
+    EUR: Remote.Success({ change: '0', movement: 'none', price: 1 }),
+    GBP: Remote.Success({ change: '0', movement: 'none', price: 1 })
   },
   price_index_series: Remote.NotAsked,
   verify_email_token: Remote.NotAsked,