From 37ec0bb52add1e7a40b81dcbba8ea0f5ca95bf7b Mon Sep 17 00:00:00 2001
From: Philip London <philip@blockchain.com>
Date: Tue, 22 Sep 2020 12:26:58 +0200
Subject: [PATCH] feat(txs): clean up sb buy/sell txs

---
 .../scenes/Transactions/CustodialTx/index.tsx |  40 ++---
 .../scenes/Transactions/CustodialTx/model.tsx |  34 +++--
 .../scenes/Transactions/SBOrderTx/index.tsx   | 142 +++++++++---------
 .../scenes/Transactions/SBOrderTx/model.tsx   |  71 ++++++++-
 .../scenes/Transactions/components/index.tsx  |  27 +++-
 5 files changed, 204 insertions(+), 110 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
index 4e600b85675..c80e515e21d 100644
--- a/packages/blockchain-wallet-v4-frontend/src/scenes/Transactions/CustodialTx/index.tsx
+++ b/packages/blockchain-wallet-v4-frontend/src/scenes/Transactions/CustodialTx/index.tsx
@@ -4,32 +4,29 @@ import React from 'react'
 import styled from 'styled-components'
 
 import { CoinTypeEnum, SBTransactionType } from 'core/types'
-import { CustodialTransactionRow } from '../components'
-import CoinDisplay from 'components/Display/CoinDisplay'
-import FiatDisplay from 'components/Display/FiatDisplay'
+import {
+  Col,
+  CustodialTransactionRow,
+  Row,
+  StyledCoinDisplay,
+  StyledFiatDisplay
+} from '../components'
 
-import { Destination, IconTx, Origin, Timestamp } from './model'
+import {
+  DepositOrWithdrawal,
+  Destination,
+  IconTx,
+  Origin,
+  Timestamp
+} from './model'
 import { Props as OwnProps } from '../TransactionList'
 
 const StyledCustodialTransactionRow = styled(CustodialTransactionRow)`
   cursor: initial;
 `
-const Col = styled.div<{ width: string }>`
-  width: ${props => props.width};
-`
-const Row = styled(Col)`
-  display: flex;
-  align-items: center;
-`
 const Status = styled.div`
   margin-left: 16px;
 `
-const StyledCoinDisplay = styled(CoinDisplay)`
-  justify-content: flex-end;
-`
-const StyledFiatDisplay = styled(FiatDisplay)`
-  justify-content: flex-end;
-`
 
 const CustodialTxListItem: React.FC<Props> = props => {
   return (
@@ -38,14 +35,7 @@ const CustodialTxListItem: React.FC<Props> = props => {
         <IconTx {...props} />
         <Status data-e2e='orderStatusColumn'>
           <Text size='16px' color='grey800' weight={600} data-e2e='txTypeText'>
-            {props.tx.type === 'DEPOSIT' ? (
-              <FormattedMessage id='buttons.deposit' defaultMessage='Deposit' />
-            ) : (
-              <FormattedMessage
-                id='buttons.withdraw'
-                defaultMessage='Withdraw'
-              />
-            )}
+            <DepositOrWithdrawal {...props} /> {props.tx.amount.symbol}
           </Text>
           <Timestamp {...props} />
         </Status>
diff --git a/packages/blockchain-wallet-v4-frontend/src/scenes/Transactions/CustodialTx/model.tsx b/packages/blockchain-wallet-v4-frontend/src/scenes/Transactions/CustodialTx/model.tsx
index 1962c3c095a..dcd3fb1f6b0 100644
--- a/packages/blockchain-wallet-v4-frontend/src/scenes/Transactions/CustodialTx/model.tsx
+++ b/packages/blockchain-wallet-v4-frontend/src/scenes/Transactions/CustodialTx/model.tsx
@@ -1,21 +1,13 @@
 import { Icon as BCIcon, Text } from 'blockchain-info-components'
+import { FormattedMessage } from 'react-intl'
 import moment from 'moment'
 import React from 'react'
-import styled, { DefaultTheme } from 'styled-components'
+import styled from 'styled-components'
 
 import { CoinTypeEnum } from 'core/types'
+import { IconWrapper } from '../components'
 import { Props } from '.'
 
-const IconWrapper = styled.div<{ color: keyof DefaultTheme }>`
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  height: 32px;
-  width: 32px;
-  border-radius: 16px;
-  background: ${props => props.theme[props.color]};
-`
-
 const Icon = styled(BCIcon)`
   size: 18px;
   font-weight: 600;
@@ -27,6 +19,7 @@ export const IconTx = (props: Props) => {
       return (
         <IconWrapper color='fiat-light'>
           <Icon
+            size='20px'
             color='fiat'
             name={props.tx.type === 'DEPOSIT' ? 'arrow-down' : 'arrow-up'}
           />
@@ -42,6 +35,7 @@ export const IconTx = (props: Props) => {
         <IconWrapper color='grey000'>
           <Icon
             color='grey600'
+            size='20px'
             name={props.tx.type === 'DEPOSIT' ? 'arrow-down' : 'arrow-up'}
           />
         </IconWrapper>
@@ -54,6 +48,7 @@ export const IconTx = (props: Props) => {
         <IconWrapper color='red000'>
           <Icon
             color='red600'
+            size='20px'
             name={props.tx.type === 'DEPOSIT' ? 'arrow-down' : 'arrow-up'}
           />
         </IconWrapper>
@@ -62,7 +57,7 @@ export const IconTx = (props: Props) => {
       return (
         <IconWrapper color='grey000'>
           <Icon
-            size='16px'
+            size='20px'
             weight={500}
             color='grey600'
             name={'question-in-circle'}
@@ -102,6 +97,21 @@ export const Timestamp = (props: Props) => {
   )
 }
 
+export const DepositOrWithdrawal = (props: Props) => {
+  // if (props.tx.amount.symbol in CoinTypeEnum) {
+  //   return <FormattedMessage id='buttons.transfer' defaultMessage='Transfer' />
+  // } else {
+  switch (props.tx.type) {
+    case 'DEPOSIT':
+      return <FormattedMessage id='buttons.deposit' defaultMessage='Deposit' />
+    case 'WITHDRAWAL':
+      return (
+        <FormattedMessage id='buttons.withdraw' defaultMessage='Withdraw' />
+      )
+  }
+  // }
+}
+
 export const Origin = (props: Props) => {
   switch (props.tx.type) {
     case 'DEPOSIT':
diff --git a/packages/blockchain-wallet-v4-frontend/src/scenes/Transactions/SBOrderTx/index.tsx b/packages/blockchain-wallet-v4-frontend/src/scenes/Transactions/SBOrderTx/index.tsx
index 7a397518a86..44f07009b5e 100644
--- a/packages/blockchain-wallet-v4-frontend/src/scenes/Transactions/SBOrderTx/index.tsx
+++ b/packages/blockchain-wallet-v4-frontend/src/scenes/Transactions/SBOrderTx/index.tsx
@@ -1,50 +1,25 @@
 import { bindActionCreators, Dispatch } from 'redux'
-import { Button, Text } from 'blockchain-info-components'
 import { connect, ConnectedProps } from 'react-redux'
-import { fiatToString } from 'core/exchange/currency'
-import { FiatType, SBOrderType } from 'core/types'
 import { FormattedMessage } from 'react-intl'
-import media from 'services/ResponsiveService'
+import { SBOrderType } from 'core/types'
+import { Text } from 'blockchain-info-components'
 import React, { PureComponent } from 'react'
 import styled from 'styled-components'
 
 import { actions } from 'data'
+import { BuyOrSell } from 'blockchain-wallet-v4-frontend/src/modals/SimpleBuy/model'
+import {
+  Col,
+  CustodialTransactionRow,
+  Row,
+  StyledCoinDisplay,
+  StyledFiatDisplay
+} from '../components'
+import { getCoinFromPair, getOrderType } from 'data/components/simpleBuy/model'
+import { getOrigin, IconTx, Timestamp } from './model'
 
-import { convertBaseToStandard } from 'data/components/exchange/services'
-import { CustodialTransactionRow } from '../components'
-import { getOrderType } from 'data/components/simpleBuy/model'
-import { Status } from './model'
-
-const StatusColumn = styled.div`
-  display: flex;
-  flex-direction: column;
-  justify-content: flex-start;
-  align-items: flex-start;
-  width: 30%;
-  ${media.mobile`
-    width: 50%;
-  `};
-`
-const AmountColumn = styled.div`
-  display: none;
-  flex-direction: column;
-  justify-content: flex-start;
-  align-items: flex-start;
-  white-space: nowrap;
-  width: 50%;
-  ${media.atLeastTabletL`
-    display: flex;
-  `}
-`
-const ViewInfoColumn = styled.div`
-  display: flex;
-  flex-direction: column;
-  justify-content: flex-end;
-  width: 20%;
-  align-items: flex-end;
-  ${media.mobile`
-    min-width: 50%;
-  `};
+const Type = styled.div`
+  margin-left: 16px;
 `
 
 class SimpleBuyListItem extends PureComponent<Props> {
@@ -63,41 +38,70 @@ class SimpleBuyListItem extends PureComponent<Props> {
 
   render () {
     const { order } = this.props
-
-    const inputAmt =
-      getOrderType(order) === 'BUY'
-        ? fiatToString({
-            unit: order.inputCurrency as FiatType,
-            value: convertBaseToStandard('FIAT', order.inputQuantity)
-          })
-        : fiatToString({
-            unit: order.outputCurrency as FiatType,
-            value: convertBaseToStandard('FIAT', order.outputQuantity)
-          })
+    const coin = getCoinFromPair(order.pair)
+    const orderType = getOrderType(order)
 
     return (
       <CustodialTransactionRow onClick={() => this.showModal(order)}>
-        <StatusColumn data-e2e='orderStatusColumn'>
-          <Status order={order} />
-        </StatusColumn>
-        <AmountColumn data-e2e='orderAmountColumn'>
-          <Text size='14px' weight={500}>
-            {inputAmt}
+        <Row width='30%' data-e2e='orderStatusColumn'>
+          <IconTx {...this.props} />
+          <Type>
+            <Text
+              size='16px'
+              color='grey800'
+              weight={600}
+              data-e2e='txTypeText'
+            >
+              <BuyOrSell crypto={coin} orderType={orderType} />
+            </Text>
+            <Timestamp {...this.props} />
+          </Type>
+        </Row>
+        <Col width='50%' data-e2e='orderToAndFrom'>
+          <Text size='16px' weight={600} color='grey800' data-e2e='txFrom'>
+            <FormattedMessage
+              id='modals.simplebuy.confirm.payment'
+              defaultMessage='Payment Method'
+            />
+            {': '}
+            {getOrigin(this.props)}
           </Text>
-        </AmountColumn>
-        <ViewInfoColumn>
-          <Button
-            data-e2e='viewInfoButton'
+          <Text
             size='14px'
-            height='35px'
-            nature='light'
+            weight={500}
+            color='grey600'
+            style={{ marginTop: '4px' }}
+            data-e2e='txTo'
           >
-            <FormattedMessage
-              id='modals.simplebuy.transactionlist.viewdetails'
-              defaultMessage='View Details'
-            />
-          </Button>
-        </ViewInfoColumn>
+            <FormattedMessage id='copy.to' defaultMessage='To' />
+            {': '}
+            {this.props.order.outputCurrency} Trading Wallet
+          </Text>
+        </Col>
+        <Col
+          width='20%'
+          style={{ textAlign: 'right' }}
+          data-e2e='orderAmountColumn'
+        >
+          <StyledCoinDisplay
+            coin={coin}
+            size='16px'
+            weight={600}
+            color='grey800'
+            data-e2e='orderFiatAmt'
+          >
+            {orderType === 'BUY' ? order.outputQuantity : order.inputQuantity}
+          </StyledCoinDisplay>
+          <StyledFiatDisplay
+            coin={coin}
+            size='14px'
+            weight={500}
+            color='grey600'
+            style={{ marginTop: '4px', alignSelf: 'flex-end' }}
+          >
+            {orderType === 'BUY' ? order.outputQuantity : order.inputQuantity}
+          </StyledFiatDisplay>
+        </Col>
       </CustodialTransactionRow>
     )
   }
@@ -114,6 +118,6 @@ type OwnProps = {
   order: SBOrderType
 }
 
-type Props = OwnProps & ConnectedProps<typeof connector>
+export type Props = OwnProps & ConnectedProps<typeof connector>
 
 export default connector(SimpleBuyListItem)
diff --git a/packages/blockchain-wallet-v4-frontend/src/scenes/Transactions/SBOrderTx/model.tsx b/packages/blockchain-wallet-v4-frontend/src/scenes/Transactions/SBOrderTx/model.tsx
index 7e51303e57f..21b38d96c45 100644
--- a/packages/blockchain-wallet-v4-frontend/src/scenes/Transactions/SBOrderTx/model.tsx
+++ b/packages/blockchain-wallet-v4-frontend/src/scenes/Transactions/SBOrderTx/model.tsx
@@ -1,9 +1,74 @@
+import { DefaultTheme } from 'styled-components'
 import { FormattedMessage } from 'react-intl'
-import { getOrderType } from 'data/components/simpleBuy/model'
-import { SBOrderType } from 'core/types'
-import { Text } from 'blockchain-info-components'
+import { getCoinFromPair, getOrderType } from 'data/components/simpleBuy/model'
+import { Icon, Text } from 'blockchain-info-components'
+import moment from 'moment'
 import React from 'react'
 
+import { IconWrapper } from '../components'
+import { Props } from '.'
+import { SBOrderType } from 'core/types'
+
+export const IconTx = (props: Props) => {
+  const orderType = getOrderType(props.order)
+  const coin = getCoinFromPair(props.order.pair)
+  return (
+    <IconWrapper color={(coin.toLowerCase() + '-light') as keyof DefaultTheme}>
+      <Icon
+        size='24px'
+        weight={600}
+        name={orderType === 'BUY' ? 'plus' : 'minus'}
+        color={coin.toLowerCase() as keyof DefaultTheme}
+      />
+    </IconWrapper>
+  )
+}
+
+export const getOrigin = (props: Props) => {
+  switch (props.order.paymentType) {
+    case 'FUNDS':
+      return props.order.inputCurrency + ' Wallet'
+    case 'PAYMENT_CARD':
+    case 'USER_CARD':
+      return 'Credit/Debit Card'
+    case 'BANK_ACCOUNT':
+      return 'Bank Transfer'
+    case undefined:
+      return 'Unknown Payment Type'
+  }
+}
+
+export const Timestamp = (props: Props) => {
+  const getTimeOrStatus = () => {
+    switch (props.order.state) {
+      case 'FINISHED':
+      case 'FAILED':
+      case 'DEPOSIT_MATCHED':
+        return moment(props.order.insertedAt).format('MMM. D, YYYY')
+      case 'EXPIRED':
+        return 'Expired'
+      case 'CANCELED':
+        return 'Canceled'
+      case 'PENDING_DEPOSIT':
+        return 'Pending Deposit'
+      case 'PENDING_CONFIRMATION':
+        return 'Pending Confirmation'
+    }
+  }
+
+  return (
+    <Text
+      size='14px'
+      weight={500}
+      color='grey600'
+      style={{ marginTop: '4px' }}
+      data-e2e='txTimeOrStatus'
+    >
+      {getTimeOrStatus()}
+    </Text>
+  )
+}
+
 export const Status = ({ order }: { order: SBOrderType }) => {
   const type = getOrderType(order)
   switch (order.state) {
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
index 813c094612c..ad8cd5da508 100644
--- 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,4 +1,7 @@
-import styled from 'styled-components'
+import styled, { DefaultTheme } from 'styled-components'
+
+import CoinDisplay from 'components/Display/CoinDisplay'
+import FiatDisplay from 'components/Display/FiatDisplay'
 
 export const CustodialTransactionRow = styled.div`
   width: calc(100% - 14px);
@@ -11,3 +14,25 @@ export const CustodialTransactionRow = styled.div`
   padding-left: 0px;
   margin-left: 14px;
 `
+export const Col = styled.div<{ width: string }>`
+  width: ${props => props.width};
+`
+export const IconWrapper = styled.div<{ color: keyof DefaultTheme }>`
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  height: 32px;
+  width: 32px;
+  border-radius: 16px;
+  background: ${props => props.theme[props.color]};
+`
+export const Row = styled(Col)`
+  display: flex;
+  align-items: center;
+`
+export const StyledCoinDisplay = styled(CoinDisplay)`
+  justify-content: flex-end;
+`
+export const StyledFiatDisplay = styled(FiatDisplay)`
+  justify-content: flex-end;
+`