feat(sell): add exchange rate and outgoing crypto to tx feed

blockchain · Dec 8, 2020 · e84d7b3 · e84d7b3
1 parent 84ef4a6
commit e84d7b3
Show file tree

Hide file tree

Showing 4 changed files with 55 additions and 21 deletions.
diff --git a/packages/blockchain-wallet-v4-frontend/src/scenes/Transactions/CustodialTx/index.tsx b/packages/blockchain-wallet-v4-frontend/src/scenes/Transactions/CustodialTx/index.tsx
@@ -3,6 +3,7 @@ import React, { useState } from 'react'
 
 import { CoinTypeEnum, FiatSBAndSwapTransactionType } from 'core/types'
 import { convertBaseToStandard } from 'data/components/exchange/services'
+import { fiatToString } from 'core/exchange/currency'
 import { Text } from 'blockchain-info-components'
 
 import {
@@ -31,6 +32,7 @@ import { Props as OwnProps } from '../TransactionList'
 
 const CustodialTxListItem: React.FC<Props> = props => {
   const [isToggled, setIsToggled] = useState(false)
+  const { tx } = props
   return (
     <TxRowContainer onClick={() => setIsToggled(!isToggled)}>
       <TxRow>
@@ -43,7 +45,7 @@ const CustodialTxListItem: React.FC<Props> = props => {
               weight={600}
               data-e2e='txTypeText'
             >
-              <TransactionType {...props} /> {props.tx.amount.symbol}
+              <TransactionType {...props} /> {tx.amount.symbol}
             </Text>
             <Timestamp {...props} />
           </StatusAndType>
@@ -68,9 +70,9 @@ const CustodialTxListItem: React.FC<Props> = props => {
           data-e2e='orderAmountColumn'
         >
           <StyledCoinDisplay coin={props.coin} data-e2e='orderCoinAmt'>
-            {props.tx.amount.symbol in CoinTypeEnum
-              ? convertBaseToStandard('FIAT', props.tx.amountMinor)
-              : props.tx.amount.value}
+            {tx.amount.symbol in CoinTypeEnum
+              ? convertBaseToStandard('FIAT', tx.amountMinor)
+              : tx.amount.value}
           </StyledCoinDisplay>
           {props.coin !== props.currency && (
             <StyledFiatDisplay
@@ -80,9 +82,9 @@ const CustodialTxListItem: React.FC<Props> = props => {
               color='grey600'
               data-e2e='orderFiatAmt'
             >
-              {props.tx.amount.symbol in CoinTypeEnum
-                ? convertBaseToStandard('FIAT', props.tx.amountMinor)
-                : props.tx.amount.value}
+              {tx.amount.symbol in CoinTypeEnum
+                ? convertBaseToStandard('FIAT', tx.amountMinor)
+                : tx.amount.value}
             </StyledFiatDisplay>
           )}
         </Col>
@@ -96,7 +98,20 @@ const CustodialTxListItem: React.FC<Props> = props => {
                 id='modals.simplebuy.summary.txid'
               />
             </RowHeader>
-            <RowValue>{props.tx.id}</RowValue>
+            <RowValue>{tx.id}</RowValue>
+            <RowHeader>
+              <FormattedMessage
+                id='modals.simplebuy.summary.rate'
+                defaultMessage='Exchange Rate'
+              />
+            </RowHeader>
+            <RowValue data-e2e='sellRate'>
+              {fiatToString({
+                unit: tx.amount.fiatSymbol || 'USD',
+                value: tx.extraAttributes?.indicativePrice || 0
+              })}{' '}
+              / {tx.amount.symbol}
+            </RowValue>
           </DetailsColumn>
           <DetailsColumn />
           <DetailsColumn>
@@ -109,6 +124,13 @@ const CustodialTxListItem: React.FC<Props> = props => {
             <RowValue>
               <Status {...props} />
             </RowValue>
+            <RowHeader>
+              <FormattedMessage id='copy.amount' defaultMessage='Amount' />
+            </RowHeader>
+            <RowValue data-e2e='sbSelling'>
+              {convertBaseToStandard(tx.amount.symbol, tx.amount.inputMoney)} of{' '}
+              {tx.amount.symbol}
+            </RowValue>
           </DetailsColumn>
         </DetailsRow>
       )}

diff --git a/packages/blockchain-wallet-v4/src/network/api/swap/types.ts b/packages/blockchain-wallet-v4/src/network/api/swap/types.ts
@@ -20,10 +20,11 @@ export type SwapOrderType = {
   }
   pair: string
   priceFunnel: {
-    inputMoney: string
-    networkFee: string
-    outputMoney: string
-    price: string
+    indicativePrice?: string,
+    inputMoney: string,
+    networkFee: string,
+    outputMoney: string,
+    price: string,
     staticFee: string
   }
   state: SwapOrderStateType

diff --git a/packages/blockchain-wallet-v4/src/redux/data/custodial/types.ts b/packages/blockchain-wallet-v4/src/redux/data/custodial/types.ts
@@ -1,5 +1,7 @@
 import * as AT from './actionTypes'
 import {
+  CoinType,
+  FiatType,
   ProcessedSwapOrderType,
   SBOrderType,
   SBTransactionStateType,
@@ -34,19 +36,25 @@ export type SBCoreActionTypes = SetNextSBTransactionsURL
 // 🚨 TEMP HACK 🚨
 // TODO: remove once we have unified custodial transaction endpoints
 export type FiatSBAndSwapTransactionType = {
-  amount: { symbol: WalletCurrencyType; value: string }
+  amount: {
+    fiatSymbol?: FiatType,
+    inputMoney?: string,
+    symbol: CoinType,
+    value: string
+  }
   amountMinor: string
   extraAttributes: null | {
     address: string
     amount: {
       [key in WalletCurrencyType]: number
     }
     confirmations: number
-    direction?: 'FROM_USERKEY' | 'INTERNAL',
-    dsr: number,
-    hash: string,
-    id: string,
-    status: 'UNCONFIRMED' | 'CONFIRMED',
+    direction?: 'FROM_USERKEY' | 'INTERNAL'
+    dsr: number
+    hash: string
+    id: string
+    indicativePrice?: string
+    status: 'UNCONFIRMED' | 'CONFIRMED'
     txHash: string
   }
   id: string

diff --git a/packages/blockchain-wallet-v4/src/redux/data/fiat/sagas.ts b/packages/blockchain-wallet-v4/src/redux/data/fiat/sagas.ts
@@ -3,7 +3,7 @@ import { filter, last, take as takeR } from 'ramda'
 import moment from 'moment'
 
 import { APIType } from 'core/network/api'
-import { CoinType } from 'blockchain-wallet-v4/src/types'
+import { CoinType, FiatType } from 'blockchain-wallet-v4/src/types'
 import { errorHandler } from 'blockchain-wallet-v4/src/utils'
 
 import * as A from './actions'
@@ -90,11 +90,14 @@ export default ({ api }: { api: APIType }) => {
           swap =>
             ({
               amount: {
-                symbol: swap.pair.split('-')[0] as CoinType
+                symbol: swap.pair.split('-')[0] as CoinType,
+                inputMoney: swap.priceFunnel.inputMoney,
+                fiatSymbol: swap.pair.split('-')[1] as FiatType
               },
               amountMinor: swap.priceFunnel.outputMoney,
               extraAttributes: {
-                direction: swap.kind.direction
+                direction: swap.kind.direction,
+                indicativePrice: swap.priceFunnel.indicativePrice
               },
               id: swap.id,
               insertedAt: swap.createdAt,