Skip to content

Commit

Permalink
feat(txs): clean up sb buy/sell txs
Browse files Browse the repository at this point in the history
  • Loading branch information
Philip London committed Sep 22, 2020
1 parent dab54c5 commit 37ec0bb
Show file tree
Hide file tree
Showing 5 changed files with 204 additions and 110 deletions.
40 changes: 15 additions & 25 deletions packages/blockchain-wallet-v4-frontend/src/scenes/Transactions/CustodialTx/index.tsx
View file
Expand Up @@ -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 (
Expand All @@ -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>
Expand Down
34 changes: 22 additions & 12 deletions packages/blockchain-wallet-v4-frontend/src/scenes/Transactions/CustodialTx/model.tsx
View file
@@ -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;
Expand All @@ -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'}
/>
Expand All @@ -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>
Expand All @@ -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>
Expand All @@ -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'}
Expand Down Expand Up @@ -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':
Expand Down
142 changes: 73 additions & 69 deletions packages/blockchain-wallet-v4-frontend/src/scenes/Transactions/SBOrderTx/index.tsx
View file
@@ -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> {
Expand All @@ -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>
)
}
Expand All @@ -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)
71 changes: 68 additions & 3 deletions packages/blockchain-wallet-v4-frontend/src/scenes/Transactions/SBOrderTx/model.tsx
View file
@@ -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) {
Expand Down

0 comments on commit 37ec0bb

Please sign in to comment.