feat(sb): display raw tx data to fiat tx

blockchain · Jul 17, 2020 · 04efa25 · 04efa25
1 parent bcaaf4f
commit 04efa25
Show file tree

Hide file tree

Showing 26 changed files with 382 additions and 60 deletions.
diff --git a/package.json b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "blockchain-wallet-v4",
-  "version": "4.37.13",
+  "version": "4.37.14",
   "license": "AGPL-3.0-or-later",
   "private": true,
   "author": {

diff --git a/packages/blockchain-wallet-v4-frontend/src/assets/locales/index.d.ts b/packages/blockchain-wallet-v4-frontend/src/assets/locales/index.d.ts
@@ -2014,6 +2014,7 @@ type MessagesType = {
   'scenes.transaction.headertext.explainer.bch': 'Bitcoin Cash (BCH) is a fork of Bitcoin built for everday transactions.'
   'scenes.transaction.headertext.explainer.btc1': 'Bitcoin (BTC) is the original crypto and the internet’s digital currency.'
   'scenes.transaction.headertext.explainer.eth': 'Ethereum (ETH) is a currency and computing platform. Built for developers and apps.'
+  'scenes.transaction.headertext.explainer.fiat': 'Store {currency} on your wallet and use it to Buy Crypto.'
   'scenes.transaction.headertext.explainer.usdd': 'The USD Digital coin (USD-D) is backed by the US Dollar, making it a Stablecoin.'
   'scenes.transaction.headertext.explainer.usdt': 'The Tether coin (USDT) is backed by the US Dollar, making it a Stablecoin.'
   'scenes.transaction.headertext.explainer.xlm': 'The Stellar Lumen (XLM) connects banks, payments and you to the Stellar Payment network.'

diff --git a/packages/blockchain-wallet-v4-frontend/src/scenes/Transactions/TransactionList/index.tsx b/packages/blockchain-wallet-v4-frontend/src/scenes/Transactions/TransactionList/index.tsx
@@ -3,13 +3,16 @@ import {
   FiatType,
   ProcessedTxType,
   RemoteDataType,
-  SBOrderType
+  SBOrderType,
+  SBTransactionType
 } from 'core/types'
 import DataError from 'components/DataError'
-import Loading from './template.loading'
 import React, { PureComponent } from 'react'
-import SimpleBuyListItem from './template.simplebuy'
 import styled from 'styled-components'
+
+import FiatTxListItem from './template.fiattx'
+import Loading from './template.loading'
+import SimpleBuyListItem from './template.sborder'
 import TransactionListItem from 'components/TransactionListItem'
 
 const TransactionsWrapper = styled.div`
@@ -30,7 +33,9 @@ class TransactionList extends PureComponent<Props> {
     const { coin, coinTicker, currency, data } = this.props
 
     return data.cata({
-      Success: (transactions: Array<SBOrderType | ProcessedTxType>) => (
+      Success: (
+        transactions: Array<SBOrderType | SBTransactionType | ProcessedTxType>
+      ) => (
         <TransactionsWrapper>
           {transactions.map(tx => {
             return 'hash' in tx ? (
@@ -41,8 +46,10 @@ class TransactionList extends PureComponent<Props> {
                 coinTicker={coinTicker}
                 currency={currency}
               />
-            ) : (
+            ) : 'pair' in tx ? (
               <SimpleBuyListItem order={tx} />
+            ) : (
+              <FiatTxListItem tx={tx} />
             )
           })}
         </TransactionsWrapper>

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
@@ -0,0 +1,16 @@
+import media from 'services/ResponsiveService'
+import React from 'react'
+import styled from 'styled-components'
+
+import { SBTransactionType } from 'core/types'
+import { TransactionRow } from '../components'
+
+const FiatTxListItem: React.FC<Props> = props => {
+  return <TransactionRow>{JSON.stringify(props.tx)}</TransactionRow>
+}
+
+type Props = {
+  tx: SBTransactionType
+}
+
+export default FiatTxListItem
diff --git a/...ns/TransactionList/template.simplebuy.tsx → ...ions/TransactionList/template.sborder.tsx b/...ns/TransactionList/template.simplebuy.tsx → ...ions/TransactionList/template.sborder.tsx
@@ -1,29 +1,20 @@
-import { actions } from 'data'
 import { bindActionCreators, Dispatch } from 'redux'
 import { Button, Text } from 'blockchain-info-components'
 import { connect, ConnectedProps } from 'react-redux'
-import { convertBaseToStandard } from 'data/components/exchange/services'
 import { fiatToString } from 'core/exchange/currency'
 import { FiatType, SBOrderType } from 'core/types'
 import { FormattedMessage } from 'react-intl'
-import { getOrderType } from 'data/components/simpleBuy/model'
-import { Status } from './model'
 import media from 'services/ResponsiveService'
 import React, { PureComponent } from 'react'
 import styled from 'styled-components'
 
-const TransactionRow = styled.div`
-  width: 100%;
-  display: flex;
-  cursor: pointer;
-  align-items: center;
-  justify-content: space-between;
-  border-bottom: 1px solid ${props => props.theme.grey000} !important;
-  box-sizing: border-box;
-  padding: 14px;
-  padding-left: 0px;
-  margin-left: 14px;
-`
+import { actions } from 'data'
+
+import { convertBaseToStandard } from 'data/components/exchange/services'
+import { getOrderType } from 'data/components/simpleBuy/model'
+import { Status } from './model'
+import { TransactionRow } from '../components'
+
 const StatusColumn = styled.div`
   display: flex;
   flex-direction: column;

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
@@ -0,0 +1,14 @@
+import styled from 'styled-components'
+
+export const TransactionRow = styled.div`
+  width: 100%;
+  display: flex;
+  cursor: pointer;
+  align-items: center;
+  justify-content: space-between;
+  border-bottom: 1px solid ${props => props.theme.grey000} !important;
+  box-sizing: border-box;
+  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,5 +1,5 @@
 import { actions, model } from 'data'
-import { CoinType, FiatType, SupportedCoinType } from 'core/types'
+import { CoinType, FiatType, FiatTypeEnum, SupportedCoinType } from 'core/types'
 import { compose, Dispatch } from 'redux'
 import { connect, ConnectedProps } from 'react-redux'
 import { getData } from './selectors'
@@ -119,12 +119,12 @@ class TransactionsContainer extends React.PureComponent<Props> {
             </PageTitle>
             <ExplainerWrapper>{getHeaderExplainer(coinModel)}</ExplainerWrapper>
             <StatsContainer>
-              <WalletBalanceDropdown
+              {/* <WalletBalanceDropdown
                 coin={coin}
                 coinModel={coinModel}
                 isCoinErc20={isCoinErc20}
               />
-              <CoinPerformance coin={coin} coinModel={coinModel} />
+              <CoinPerformance coin={coin} coinModel={coinModel} /> */}
             </StatsContainer>
           </Header>
           {(hasTxResults || isSearchEntered) && (
@@ -177,6 +177,14 @@ const mapDispatchToProps = (dispatch: Dispatch, ownProps) => {
         dispatch(actions.components.ethTransactions.loadMoreErc20(coin))
     }
   }
+  if (coin in FiatTypeEnum) {
+    return {
+      fetchData: () => {},
+      loadMoreTxs: () =>
+        dispatch(actions.core.data.fiat.fetchTransactions(coin)),
+      initTxs: () => dispatch(actions.core.data.fiat.fetchTransactions(coin))
+    }
+  }
   return {
     fetchData: () => dispatch(actions.core.data[toLower(coin)].fetchData()),
     initTxs: () =>

diff --git a/...tend/src/scenes/Transactions/selectors.js → ...tend/src/scenes/Transactions/selectors.ts b/...tend/src/scenes/Transactions/selectors.js → ...tend/src/scenes/Transactions/selectors.ts
@@ -23,6 +23,7 @@ const { WALLET_TX_SEARCH } = model.form
 const filterTransactions = curry((status, criteria, transactions) => {
   const isOfType = curry((filter, tx) =>
     propSatisfies(
+      // @ts-ignore
       x => filter === '' || (x && toUpper(x) === toUpper(filter)),
       'type',
       tx
@@ -51,7 +52,12 @@ const coinSelectorMap = (state, coin, isCoinErc20) => {
     return state =>
       selectors.core.common.eth.getErc20WalletTransactions(state, coin)
   }
-  return selectors.core.common[toLower(coin)].getWalletTransactions
+  if (selectors.core.common[toLower(coin)]) {
+    return selectors.core.common[toLower(coin)].getWalletTransactions
+  }
+
+  // default to fiat
+  return state => selectors.core.data.fiat.getTransactions(coin, state)
 }
 
 export const getData = (state, coin, isCoinErc20) =>
@@ -62,7 +68,7 @@ export const getData = (state, coin, isCoinErc20) =>
       selectors.core.settings.getCurrency,
       () => selectors.core.walletOptions.getCoinModel(state, coin)
     ],
-    (userSearch, pages, currencyR, coinModelR) => {
+    (userSearch, pages: any, currencyR, coinModelR) => {
       const empty = page => isEmpty(page.data)
       const search = propOr('', 'search', userSearch)
       const status = propOr('', 'status', userSearch)
@@ -76,6 +82,7 @@ export const getData = (state, coin, isCoinErc20) =>
         coinModel: coinModelR.getOrElse({}),
         currency: currencyR.getOrElse(''),
         hasTxResults: !all(empty)(filteredPages),
+        // @ts-ignore
         isSearchEntered: search.length > 0 || status !== '',
         pages: filteredPages,
         sourceType

diff --git a/packages/blockchain-wallet-v4-frontend/src/scenes/Transactions/template.headerexplainer.tsx b/packages/blockchain-wallet-v4-frontend/src/scenes/Transactions/template.headerexplainer.tsx
@@ -1,5 +1,6 @@
 import { FormattedMessage } from 'react-intl'
 import { Link, Text } from 'blockchain-info-components'
+import { SupportedCoinType, SupportedFiatType } from 'core/types'
 import React from 'react'
 import styled from 'styled-components'
 
@@ -19,7 +20,9 @@ const LearnMoreText = styled(Text)`
   color: ${props => props.theme.blue600};
 `
 
-export const getHeaderExplainer = coinModel => {
+export const getHeaderExplainer = (
+  coinModel: SupportedCoinType | SupportedFiatType
+) => {
   switch (coinModel.coinTicker) {
     case 'BTC': {
       return (
@@ -28,10 +31,7 @@ export const getHeaderExplainer = coinModel => {
             id='scenes.transaction.headertext.explainer.btc1'
             defaultMessage='Bitcoin (BTC) is the original crypto and the internet’s digital currency.'
           />
-          <LearnMoreLink
-            href='https://www.blockchain.com/learning-portal/bitcoin-faq'
-            target='_blank'
-          >
+          <LearnMoreLink href={coinModel.learnMoreLink} target='_blank'>
             <LearnMoreText size='16px'>
               <FormattedMessage
                 id='buttons.learn_more'
@@ -49,10 +49,7 @@ export const getHeaderExplainer = coinModel => {
             id='scenes.transaction.headertext.explainer.eth'
             defaultMessage='Ethereum (ETH) is a currency and computing platform. Built for developers and apps.'
           />
-          <LearnMoreLink
-            href='https://support.blockchain.com/hc/en-us/sections/360000003163-Ethereum-FAQ'
-            target='_blank'
-          >
+          <LearnMoreLink href={coinModel.learnMoreLink} target='_blank'>
             <LearnMoreText size='15px'>
               <FormattedMessage
                 id='buttons.learn_more'
@@ -70,10 +67,7 @@ export const getHeaderExplainer = coinModel => {
             id='scenes.transaction.headertext.explainer.bch'
             defaultMessage='Bitcoin Cash (BCH) is a fork of Bitcoin built for everday transactions.'
           />
-          <LearnMoreLink
-            href='https://support.blockchain.com/hc/en-us/sections/115001633403-Bitcoin-Cash-FAQ'
-            target='_blank'
-          >
+          <LearnMoreLink href={coinModel.learnMoreLink} target='_blank'>
             <LearnMoreText size='15px'>
               <FormattedMessage
                 id='buttons.learn_more'
@@ -84,17 +78,15 @@ export const getHeaderExplainer = coinModel => {
         </ExplainerText>
       )
     }
+    // @ts-ignore
     case 'USD-D': {
       return (
         <ExplainerText>
           <FormattedMessage
             id='scenes.transaction.headertext.explainer.usdd'
             defaultMessage='The USD Digital coin (USD-D) is backed by the US Dollar, making it a Stablecoin.'
           />
-          <LearnMoreLink
-            href='https://support.blockchain.com/hc/en-us/sections/360004368351-USD-Digital-previously-USD-PAX-FAQ'
-            target='_blank'
-          >
+          <LearnMoreLink href={(coinModel as SupportedCoinType).learnMoreLink} target='_blank'>
             <LearnMoreText size='15px'>
               <FormattedMessage
                 id='buttons.learn_more'
@@ -112,10 +104,7 @@ export const getHeaderExplainer = coinModel => {
             id='scenes.transaction.headertext.explainer.usdt'
             defaultMessage='The Tether coin (USDT) is backed by the US Dollar, making it a Stablecoin.'
           />
-          <LearnMoreLink
-            href='https://support.blockchain.com/hc/en-us/sections/360004368351-USD-Digital-previously-USD-PAX-FAQ'
-            target='_blank'
-          >
+          <LearnMoreLink href={coinModel.learnMoreLink} target='_blank'>
             <LearnMoreText size='15px'>
               <FormattedMessage
                 id='buttons.learn_more'
@@ -133,10 +122,7 @@ export const getHeaderExplainer = coinModel => {
             id='scenes.transaction.headertext.explainer.xlm'
             defaultMessage='The Stellar Lumen (XLM) connects banks, payments and you to the Stellar Payment network.'
           />
-          <LearnMoreLink
-            href='https://support.blockchain.com/hc/en-us/articles/360019105171-What-is-Stellar-'
-            target='_blank'
-          >
+          <LearnMoreLink href={coinModel.learnMoreLink} target='_blank'>
             <LearnMoreText size='15px'>
               <FormattedMessage
                 id='buttons.learn_more'
@@ -147,6 +133,19 @@ export const getHeaderExplainer = coinModel => {
         </ExplainerText>
       )
     }
+    case 'GBP':
+    case 'EUR':
+      return (
+        <ExplainerText>
+          <FormattedMessage
+            id='scenes.transaction.headertext.explainer.fiat'
+            defaultMessage='Store {currency} on your wallet and use it to Buy Crypto.'
+            values={{
+              currency: coinModel.displayName
+            }}
+          />
+        </ExplainerText>
+      )
     default: {
       return <ExplainerText />
     }

diff --git a/packages/blockchain-wallet-v4/src/network/api/simpleBuy/index.ts b/packages/blockchain-wallet-v4/src/network/api/simpleBuy/index.ts
@@ -13,7 +13,9 @@ import {
   SBPaymentMethodType,
   SBProviderAttributesType,
   SBQuoteType,
-  SBSuggestedAmountType
+  SBSuggestedAmountType,
+  SBTransactionStateType,
+  SBTransactionsType
 } from './types'
 import { Moment } from 'moment'
 import { UserDataType } from 'data/types'
@@ -233,6 +235,31 @@ export default ({
       }
     })
 
+  const getSBTransactions = (
+    currency: FiatType,
+    next?: string,
+    limit?: string,
+    type?: 'DEPOSIT' | 'WITHDRAWAL',
+    state?: SBTransactionStateType
+  ): SBTransactionsType =>
+    next
+      ? authorizedGet({
+          url: nabuUrl,
+          endPoint: next,
+          ignoreQueryParams: true,
+        })
+      : authorizedGet({
+          url: nabuUrl,
+          ignoreQueryParams: true,
+          endPoint: '/payments/transactions?product=SIMPLEBUY',
+          data: {
+            currency,
+            limit,
+            type,
+            state
+          }
+        })
+
   const submitSBCardDetailsToEverypay = ({
     accessToken,
     apiUserName,
@@ -310,6 +337,7 @@ export default ({
     getSBFiatEligible,
     getSBQuote,
     getSBSuggestedAmounts,
+    getSBTransactions,
     submitSBCardDetailsToEverypay,
     withdrawSBFunds
   }