-
Notifications
You must be signed in to change notification settings - Fork 504
/
model.tsx
136 lines (130 loc) · 3.75 KB
/
model.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
124
125
126
127
128
129
130
131
132
133
134
135
136
import { DefaultTheme } from 'styled-components'
import { FormattedMessage } from 'react-intl'
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) {
case 'FINISHED':
return (
<Text size='14px' weight={500} color='green600'>
<FormattedMessage
id='modals.simplebuy.transactionfeed.complete'
defaultMessage='{type} Completed'
values={{ type: type === 'BUY' ? 'Buy' : 'Sell' }}
/>
</Text>
)
case 'PENDING_CONFIRMATION':
case 'PENDING_DEPOSIT':
return (
<Text size='14px' weight={500}>
<FormattedMessage
id='modals.simplebuy.transactionfeed.waitingondepo'
defaultMessage='Pending Deposit'
/>
</Text>
)
case 'DEPOSIT_MATCHED':
return (
<Text size='14px' weight={500}>
<FormattedMessage
id='modals.simplebuy.transactionfeed.pending'
defaultMessage='Pending {type}'
values={{ type: type === 'BUY' ? 'Buy' : 'Sell' }}
/>
</Text>
)
case 'CANCELED':
return (
<Text size='14px' weight={500} color='red600'>
<FormattedMessage
id='modals.simplebuy.transactionfeed.canceled'
defaultMessage='{type} Canceled'
values={{ type: type === 'BUY' ? 'Buy' : 'Sell' }}
/>
</Text>
)
case 'FAILED':
case 'EXPIRED':
return (
<Text size='14px' weight={500} color='red600'>
<FormattedMessage
id='modals.simplebuy.transactionfeed.failed'
defaultMessage='{type} Failed'
values={{ type: type === 'BUY' ? 'Buy' : 'Sell' }}
/>
</Text>
)
default:
return (
<Text size='14px' weight={500} color='red600'>
<FormattedMessage
id='modals.simplebuy.transactionfeed.unknown'
defaultMessage='Unknown Status'
/>
</Text>
)
}
}