This repository has been archived by the owner on Nov 17, 2023. It is now read-only.
-
Notifications
You must be signed in to change notification settings - Fork 215
/
Invoice.js
82 lines (75 loc) · 2.38 KB
/
Invoice.js
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
import React from 'react'
import PropTypes from 'prop-types'
import { btc } from 'lib/utils'
import Isvg from 'react-inlinesvg'
import Value from 'components/Value'
import checkmarkIcon from 'icons/check_circle.svg'
import { FormattedTime, FormattedMessage, injectIntl } from 'react-intl'
import messages from './messages'
import styles from '../Activity.scss'
const Invoice = ({ invoice, ticker, currentTicker, showActivityModal, currencyName, intl }) => (
<div
className={`${styles.container} ${!invoice.settled ? styles.unpaid : undefined}`}
onClick={() => showActivityModal('INVOICE', invoice.payment_request)}
>
<div className={styles.activityTypeIcon}>
<section
className="hint--bottom"
data-hint={
invoice.settled
? intl.formatMessage({ ...messages.type_paid })
: intl.formatMessage({ ...messages.type_unpaid })
}
>
<Isvg src={checkmarkIcon} />
</section>
</div>
<div className={styles.data}>
<div className={styles.title}>
<h3>
{invoice.settled ? (
<FormattedMessage {...messages.received} />
) : (
<FormattedMessage {...messages.requested} />
)}
</h3>
</div>
<div className={styles.subtitle}>
<FormattedTime
value={invoice.settled ? invoice.settle_date * 1000 : invoice.creation_date * 1000}
/>
</div>
</div>
<div
className={`hint--top-left ${styles.amount} ${
invoice.settled ? styles.positive : styles.negative
}`}
data-hint={intl.formatMessage({ ...messages.amount })}
>
<span>
<i className={styles.plus}>+</i>
<Value
value={invoice.value}
currency={ticker.currency}
currentTicker={currentTicker}
fiatTicker={ticker.fiatTicker}
/>
<i> {currencyName}</i>
</span>
<span>
<span>
{currentTicker[ticker.fiatTicker].symbol}
{btc.convert('sats', 'fiat', invoice.value, currentTicker[ticker.fiatTicker].last)}
</span>
</span>
</div>
</div>
)
Invoice.propTypes = {
invoice: PropTypes.object.isRequired,
ticker: PropTypes.object.isRequired,
currentTicker: PropTypes.object.isRequired,
showActivityModal: PropTypes.func.isRequired,
currencyName: PropTypes.string.isRequired
}
export default injectIntl(Invoice)