-
Notifications
You must be signed in to change notification settings - Fork 504
/
index.tsx
123 lines (113 loc) · 3.57 KB
/
index.tsx
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
import { bindActionCreators, Dispatch } from 'redux'
import { connect, ConnectedProps } from 'react-redux'
import { FormattedMessage } from 'react-intl'
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'
const Type = styled.div`
margin-left: 16px;
`
class SimpleBuyListItem extends PureComponent<Props> {
showModal = (order: SBOrderType) => {
this.props.modalActions.showModal('SIMPLE_BUY_MODAL', {
origin: 'TransactionList'
})
this.props.simpleBuyActions.setStep({
step:
order.state === 'PENDING_CONFIRMATION'
? 'CHECKOUT_CONFIRM'
: 'ORDER_SUMMARY',
order
})
}
render () {
const { order } = this.props
const coin = getCoinFromPair(order.pair)
const orderType = getOrderType(order)
return (
<CustodialTransactionRow onClick={() => this.showModal(order)}>
<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>
<Text
size='14px'
weight={500}
color='grey600'
style={{ marginTop: '4px' }}
data-e2e='txTo'
>
<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>
)
}
}
const mapDispatchToProps = (dispatch: Dispatch) => ({
modalActions: bindActionCreators(actions.modals, dispatch),
simpleBuyActions: bindActionCreators(actions.components.simpleBuy, dispatch)
})
const connector = connect(undefined, mapDispatchToProps)
type OwnProps = {
order: SBOrderType
}
export type Props = OwnProps & ConnectedProps<typeof connector>
export default connector(SimpleBuyListItem)