-
Notifications
You must be signed in to change notification settings - Fork 504
/
template.sborder.tsx
116 lines (104 loc) · 3.06 KB
/
template.sborder.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
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 React, { PureComponent } from 'react'
import styled from 'styled-components'
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;
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%;
`};
`
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 inputAmt =
getOrderType(order.pair) === 'BUY'
? fiatToString({
unit: order.inputCurrency as FiatType,
value: convertBaseToStandard('FIAT', order.inputQuantity)
})
: 'Not yet implemented'
return (
<TransactionRow onClick={() => this.showModal(order)}>
<StatusColumn data-e2e='orderStatusColumn'>
<Status order={order} />
</StatusColumn>
<AmountColumn data-e2e='orderAmountColumn'>
<Text size='14px' weight={500}>
{inputAmt}
</Text>
</AmountColumn>
<ViewInfoColumn>
<Button
data-e2e='viewInfoButton'
size='14px'
height='35px'
nature='light'
>
<FormattedMessage
id='modals.simplebuy.transactionlist.viewdetails'
defaultMessage='View Details'
/>
</Button>
</ViewInfoColumn>
</TransactionRow>
)
}
}
const mapDispatchToProps = (dispatch: Dispatch) => ({
modalActions: bindActionCreators(actions.modals, dispatch),
simpleBuyActions: bindActionCreators(actions.components.simpleBuy, dispatch)
})
const connector = connect(undefined, mapDispatchToProps)
type OwnProps = {
order: SBOrderType
}
type Props = OwnProps & ConnectedProps<typeof connector>
export default connector(SimpleBuyListItem)