You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
106 lines
3.0 KiB
106 lines
3.0 KiB
import React from 'react'
|
|
import PropTypes from 'prop-types'
|
|
import PaperPlane from 'components/Icon/PaperPlane'
|
|
import Hand from 'components/Icon/Hand'
|
|
import ChainLink from 'components/Icon/ChainLink'
|
|
import { Dropdown } from 'components/UI'
|
|
import { blockExplorer } from 'lib/utils'
|
|
import Value from 'components/Value'
|
|
import { FormattedDate, FormattedTime, FormattedMessage } from 'react-intl'
|
|
import messages from './messages'
|
|
import styles from './TransactionModal.scss'
|
|
|
|
const TransactionModal = ({
|
|
item: transaction,
|
|
ticker,
|
|
currentTicker,
|
|
network,
|
|
|
|
toggleCurrencyProps: { currencyName, currencyFilters, setCurrency }
|
|
}) => (
|
|
<div className={styles.container}>
|
|
<header className={styles.header}>
|
|
{transaction.received ? (
|
|
<section>
|
|
<Hand />
|
|
<span>
|
|
<FormattedMessage {...messages.received} />
|
|
</span>
|
|
</section>
|
|
) : (
|
|
<section>
|
|
<PaperPlane />
|
|
<span>
|
|
<FormattedMessage {...messages.sent} />
|
|
</span>
|
|
</section>
|
|
)}
|
|
<section className={styles.details}>
|
|
<div>
|
|
<ChainLink />
|
|
<span
|
|
className={styles.link}
|
|
onClick={() => blockExplorer.showTransaction(network, transaction.tx_hash)}
|
|
>
|
|
<FormattedMessage {...messages.on_chain} />
|
|
</span>
|
|
</div>
|
|
{!transaction.received && (
|
|
<div>
|
|
<Value
|
|
value={transaction.total_fees}
|
|
currency={ticker.currency}
|
|
currentTicker={currentTicker}
|
|
fiatTicker={ticker.fiatTicker}
|
|
/>
|
|
<span>
|
|
{' '}
|
|
{currencyName} <FormattedMessage {...messages.fee} />
|
|
</span>
|
|
</div>
|
|
)}
|
|
</section>
|
|
</header>
|
|
|
|
<div className={styles.amount}>
|
|
<i className={`${styles.symbol} ${transaction.received ? styles.active : undefined}`}>
|
|
{transaction.received ? '+' : '-'}
|
|
</i>
|
|
<Value
|
|
value={transaction.amount}
|
|
currency={ticker.currency}
|
|
currentTicker={currentTicker}
|
|
fiatTicker={ticker.fiatTicker}
|
|
/>
|
|
<Dropdown activeKey={ticker.currency} items={currencyFilters} onChange={setCurrency} ml={2} />
|
|
</div>
|
|
|
|
<div className={styles.date}>
|
|
<FormattedDate
|
|
value={new Date(transaction.time_stamp * 1000)}
|
|
year="numeric"
|
|
month="long"
|
|
day="2-digit"
|
|
/>{' '}
|
|
<FormattedTime value={new Date(transaction.time_stamp * 1000)} />
|
|
</div>
|
|
|
|
<footer className={styles.footer}>
|
|
<p onClick={() => blockExplorer.showTransaction(network, transaction.tx_hash)}>
|
|
{transaction.tx_hash}
|
|
</p>
|
|
</footer>
|
|
</div>
|
|
)
|
|
|
|
TransactionModal.propTypes = {
|
|
item: PropTypes.object.isRequired,
|
|
ticker: PropTypes.object.isRequired,
|
|
currentTicker: PropTypes.object.isRequired,
|
|
|
|
toggleCurrencyProps: PropTypes.object.isRequired,
|
|
|
|
network: PropTypes.object.isRequired
|
|
}
|
|
|
|
export default TransactionModal
|
|
|