feat(sell): fetch, paginate and display swap and sb txs into single t…

…x list

packages/blockchain-wallet-v4-frontend/src/assets/locales/index.d.ts

@@ -25,6 +25,7 @@ type MessagesType = {
   'buttons.contact_support': 'Contact Support'
   'buttons.continue': 'Continue'
   'buttons.deposit': 'Deposit'
+  'buttons.deposited': 'Deposited'
   'buttons.done': 'Done'
   'buttons.go_back': 'Go Back'
   'buttons.hide': 'Hide'
@@ -52,6 +53,7 @@ type MessagesType = {
   'buttons.verify_now': 'Verify Now'
   'buttons.viewstatus': 'View Status'
   'buttons.withdraw': 'Withdraw'
+  'buttons.withdrew': 'Withdrew'
   'buttons.withdraw_value': 'Withdraw {value}'
   'components.DateInputBox.placeholder.month': 'Month'
   'components.EmailVerification.changeemail': 'Change Email'
@@ -346,6 +348,7 @@ type MessagesType = {
   'copy.private_key': 'Private Key'
   'copy.refunded': 'Refunded'
   'copy.select_swap_wallets': 'Select the Wallet you want to Swap from and the crypto you want to receive.'
+  'copy.sold': 'Sold'
   'copy.suggested': 'Suggested'
   'copy.swap': 'Swap'
   'copy.swap_account_from_error': 'You cannot swap between these types of accounts. Try changing the From account.'

packages/blockchain-wallet-v4-frontend/src/scenes/Transactions/CustodialTx/index.tsx

@@ -1,6 +1,9 @@
-import { Text } from 'blockchain-info-components'
+import { FormattedMessage } from 'react-intl'
 import React, { useState } from 'react'
 
+import { CoinTypeEnum, FiatSBAndSwapTransactionType } from 'core/types'
+import { Text } from 'blockchain-info-components'
+
 import {
   Addresses,
   Col,
@@ -15,17 +18,14 @@ import {
   TxRow,
   TxRowContainer
 } from '../components'
-import { CoinTypeEnum, SBTransactionType } from 'core/types'
-
 import {
-  DepositOrWithdrawal,
   Destination,
   IconTx,
   Origin,
   Status,
-  Timestamp
+  Timestamp,
+  TransactionType
 } from './model'
-import { FormattedMessage } from 'react-intl'
 import { Props as OwnProps } from '../TransactionList'
 
 const CustodialTxListItem: React.FC<Props> = props => {
@@ -43,7 +43,7 @@ const CustodialTxListItem: React.FC<Props> = props => {
               weight={600}
               data-e2e='txTypeText'
             >
-              <DepositOrWithdrawal {...props} /> {props.tx.amount.symbol}
+              <TransactionType {...props} /> {props.tx.amount.symbol}
             </Text>
             <Timestamp {...props} />
           </StatusAndType>
@@ -52,12 +52,12 @@ const CustodialTxListItem: React.FC<Props> = props => {
           <Addresses
             from={
               <>
-                {props.tx.amount.symbol} <Origin {...props} />
+                <Origin {...props} />
               </>
             }
             to={
               <>
-                {props.tx.amount.symbol} <Destination {...props} />
+                <Destination {...props} />
               </>
             }
           />
@@ -117,7 +117,7 @@ const CustodialTxListItem: React.FC<Props> = props => {
 }
 
 export type Props = OwnProps & {
-  tx: SBTransactionType
+  tx: FiatSBAndSwapTransactionType
 }
 
 export default CustodialTxListItem

packages/blockchain-wallet-v4-frontend/src/scenes/Transactions/CustodialTx/model.tsx

@@ -19,6 +19,12 @@ const Icon = styled(BCIcon)`
 
 export const IconTx = (props: Props) => {
   switch (props.tx.state) {
+    case 'FINISHED':
+      return (
+        <IconWrapper color='fiat-light'>
+          <Icon size='20px' color='fiat' name='plus' />
+        </IconWrapper>
+      )
     case 'COMPLETE':
       return props.coin in WalletFiatEnum ? (
         <IconWrapper color='fiat-light'>
@@ -72,6 +78,7 @@ export const Timestamp = (props: Props) => {
   const getTimeOrStatus = () => {
     switch (props.tx.state) {
       case 'COMPLETE':
+      case 'FINISHED':
         return <SharedTimestamp time={props.tx.insertedAt} />
       default:
         return <Status {...props} />
@@ -91,7 +98,7 @@ export const Timestamp = (props: Props) => {
   )
 }
 
-export const DepositOrWithdrawal = (props: Props) => {
+export const TransactionType = (props: Props) => {
   if (props.tx.amount.symbol in CoinTypeEnum) {
     switch (props.tx.type) {
       case 'DEPOSIT':
@@ -110,19 +117,23 @@ export const DepositOrWithdrawal = (props: Props) => {
         )
       case 'REFUNDED':
         return <FormattedMessage id='copy.refunded' defaultMessage='Refunded' />
+      case 'SELL':
+        return <FormattedMessage id='copy.sold' defaultMessage='Sold' />
     }
   } else {
     switch (props.tx.type) {
       case 'DEPOSIT':
         return (
-          <FormattedMessage id='buttons.deposit' defaultMessage='Deposit' />
+          <FormattedMessage id='buttons.deposited' defaultMessage='Deposited' />
         )
+      case 'REFUNDED':
+        return <FormattedMessage id='copy.refunded' defaultMessage='Refunded' />
+      case 'SELL':
+        return <FormattedMessage id='copy.sold' defaultMessage='Sold' />
       case 'WITHDRAWAL':
         return (
-          <FormattedMessage id='buttons.withdraw' defaultMessage='Withdraw' />
+          <FormattedMessage id='buttons.withdrew' defaultMessage='Withdrew' />
         )
-      case 'REFUNDED':
-        return <FormattedMessage id='copy.refunded' defaultMessage='Refunded' />
     }
   }
 }
@@ -131,37 +142,45 @@ export const Origin = (props: Props) => {
   switch (props.tx.type) {
     case 'REFUNDED':
     case 'DEPOSIT':
-      if (props.tx.amount.symbol in CoinTypeEnum) {
-        return <>Wallet</>
-      }
-
-      return <>Bank Account</>
+      return props.tx.amount.symbol in CoinTypeEnum ? (
+        <>{props.coinTicker} Wallet</>
+      ) : (
+        <>Bank Account</>
+      )
+    case 'SELL':
+      return props.tx.extraAttributes ? (
+        <>{props.tx.amount.symbol} Wallet</>
+      ) : (
+        <>{props.tx.amount.symbol} Trading Wallet</>
+      )
     case 'WITHDRAWAL':
-      return <>Trading Wallet</>
+      return <>{props.coinTicker} Wallet</>
   }
 }
 
 export const Destination = (props: Props) => {
   switch (props.tx.type) {
     case 'REFUNDED':
     case 'DEPOSIT':
-      return <>Trading Wallet</>
+      return <>{props.coinTicker} Wallet</>
+    case 'SELL':
+      return <>{props.coinTicker} Wallet</>
     case 'WITHDRAWAL':
-      if (props.tx.amount.symbol in CoinTypeEnum) {
-        return <>Wallet</>
-      }
-
-      return <>Bank Account</>
+      return props.tx.amount.symbol in CoinTypeEnum ? (
+        <>{props.tx.amount.symbol} Wallet</>
+      ) : (
+        <>Bank Account</>
+      )
   }
 }
 
 export const Status = (props: Props) => {
   switch (props.tx.state) {
     case 'COMPLETE':
+    case 'FINISHED':
       if (
         props.tx.amount.symbol in CoinTypeEnum &&
-        props.tx.extraAttributes !== null &&
-        'confirmations' in props.tx.extraAttributes
+        props.tx.extraAttributes?.confirmations
       ) {
         return (
           <Confirmations

packages/blockchain-wallet-v4-frontend/src/scenes/Transactions/TransactionList/index.tsx

@@ -1,5 +1,6 @@
 import {
   CoinType,
+  FiatSBAndSwapTransactionType,
   FiatType,
   ProcessedTxType,
   RemoteDataType,
@@ -49,7 +50,10 @@ class TransactionList extends PureComponent<Props> {
             ) : 'pair' in tx ? (
               <SimpleBuyListItem order={tx} />
             ) : (
-              <CustodialTxListItem tx={tx} {...this.props} />
+              <CustodialTxListItem
+                tx={tx as FiatSBAndSwapTransactionType}
+                {...this.props}
+              />
             )
           })}
         </TransactionsWrapper>

packages/blockchain-wallet-v4-frontend/src/scenes/Transactions/types.ts

@@ -1,4 +1,13 @@
-import { ProcessedTxType, SBOrderType, SBTransactionType } from 'core/types'
+import {
+  FiatSBAndSwapTransactionType,
+  ProcessedTxType,
+  SBOrderType,
+  SBTransactionType
+} from 'core/types'
 
 export type TransferType = 'sent' | 'received' | 'transferred' | ''
-export type TxType = SBTransactionType | SBOrderType | ProcessedTxType
+export type TxType =
+  | SBTransactionType
+  | SBOrderType
+  | ProcessedTxType
+  | FiatSBAndSwapTransactionType

packages/blockchain-wallet-v4/src/network/api/simpleBuy/index.ts

@@ -231,13 +231,25 @@ export default ({
       }
     })
 
-  const getSBTransactions = (
-    currency: WalletCurrencyType,
-    next?: string | null,
-    limit?: string,
-    type?: 'DEPOSIT' | 'WITHDRAWAL',
+  type getSBTransactionsType = {
+    currency: WalletCurrencyType
+    fromId?: string
+    fromValue?: string
+    limit?: number
+    next?: string | null
     state?: SBTransactionStateType
-  ): SBTransactionsType =>
+    type?: 'DEPOSIT' | 'WITHDRAWAL'
+  }
+
+  const getSBTransactions = ({
+    currency,
+    fromId,
+    fromValue,
+    limit,
+    next,
+    state,
+    type
+  }: getSBTransactionsType): SBTransactionsType =>
     next
       ? authorizedGet({
           url: nabuUrl,
@@ -250,6 +262,8 @@ export default ({
           data: {
             currency,
             limit,
+            fromId,
+            fromValue,
             pending: true,
             product: 'SIMPLEBUY',
             state,

packages/blockchain-wallet-v4/src/network/api/simpleBuy/types.ts

@@ -240,7 +240,7 @@ export type SBTransactionType = {
         status: 'UNCONFIRMED' | 'CONFIRMED'
         txHash: string
       }
-      type: 'DEPOSIT' | 'REFUNDED'
+      type: 'DEPOSIT' | 'REFUNDED' | 'SELL'
     }
   | {
       extraAttributes: null | {

packages/blockchain-wallet-v4/src/redux/data/custodial/sagas.ts

@@ -91,7 +91,10 @@ export default ({ api }: { api: APIType }) => {
         offset > 0 && !nextSBTransactionsURL
           ? yield { prev: null, next: null, items: [] }
           : // get transactions whether or not nextSBTransactionsURL is null
-            yield call(api.getSBTransactions, currency, nextSBTransactionsURL)
+            yield call(api.getSBTransactions, {
+              currency,
+              next: nextSBTransactionsURL
+            })
 
       const pendingTxsOnState = S.getSBTransactionsPending(
         yield select(),

packages/blockchain-wallet-v4/src/redux/data/custodial/types.ts

@@ -2,6 +2,7 @@ import * as AT from './actionTypes'
 import {
   ProcessedSwapOrderType,
   SBOrderType,
+  SBTransactionStateType,
   SBTransactionType,
   WalletCurrencyType
 } from 'core/types'
@@ -29,3 +30,26 @@ interface SetNextSBTransactionsURL {
 }
 
 export type SBCoreActionTypes = SetNextSBTransactionsURL
+
+// 🚨 TEMP HACK 🚨
+// TODO: remove once we have unified custodial transaction endpoints
+export type FiatSBAndSwapTransactionType = {
+  amount: { symbol: WalletCurrencyType; value: string }
+  amountMinor: string
+  extraAttributes: null | {
+    address: string
+    amount: {
+      [key in WalletCurrencyType]: number
+    }
+    confirmations: number
+    dsr: number
+    hash: string
+    id: string
+    status: 'UNCONFIRMED' | 'CONFIRMED'
+    txHash: string
+  }
+  id: string
+  insertedAt: string
+  state: SBTransactionStateType | 'FINISHED'
+  type: 'DEPOSIT' | 'WITHDRAWAL' | 'REFUNDED' | 'SELL'
+}

packages/blockchain-wallet-v4/src/redux/data/fiat/actions.ts

@@ -1,6 +1,7 @@
+import { WalletFiatType } from 'core/types'
+
 import * as AT from './actionTypes'
-import { FiatActionTypes } from './types'
-import { SBTransactionsType, WalletFiatType } from 'core/types'
+import { FiatActionTypes, FiatTransactionPageResponseType } from './types'
 
 // FETCH_FIAT_TRANSACTIONS
 export const fetchTransactions = (
@@ -26,7 +27,7 @@ export const fetchTransactionsLoading = (
 })
 export const fetchTransactionsSuccess = (
   currency: WalletFiatType,
-  response: SBTransactionsType,
+  response: FiatTransactionPageResponseType,
   reset?: boolean
 ): FiatActionTypes => ({
   type: AT.FETCH_FIAT_TRANSACTIONS_SUCCESS,