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.
113 lines
3.3 KiB
113 lines
3.3 KiB
import React from 'react'
|
|
import PropTypes from 'prop-types'
|
|
import { btc } from 'lib/utils'
|
|
import Hand from 'components/Icon/Hand'
|
|
import AmountInput from 'components/AmountInput'
|
|
import { Button, Dropdown } from 'components/UI'
|
|
import { FormattedNumber, FormattedMessage, injectIntl } from 'react-intl'
|
|
import messages from './messages'
|
|
import styles from './Request.scss'
|
|
|
|
const Request = ({
|
|
requestform: { amount, memo },
|
|
ticker,
|
|
setRequestAmount,
|
|
setRequestMemo,
|
|
setCurrency,
|
|
requestFiatAmount,
|
|
currencyFilters,
|
|
onRequestSubmit,
|
|
intl
|
|
}) => {
|
|
const onCurrencyFilterClick = currency => {
|
|
// change the input amount
|
|
setRequestAmount(btc.convert(ticker.currency, currency, amount))
|
|
setCurrency(currency)
|
|
}
|
|
|
|
return (
|
|
<div className={styles.container}>
|
|
<header className={styles.header}>
|
|
<Hand width="3em" height="3em" />
|
|
<h1>
|
|
<FormattedMessage {...messages.title} />
|
|
</h1>
|
|
</header>
|
|
|
|
<div className={styles.content}>
|
|
<section className={styles.amount}>
|
|
<div className={styles.top}>
|
|
<label htmlFor="amount">
|
|
<FormattedMessage {...messages.amount} />
|
|
</label>
|
|
<span />
|
|
</div>
|
|
<div className={styles.bottom}>
|
|
<AmountInput
|
|
id="amount"
|
|
amount={amount}
|
|
currency={ticker.currency}
|
|
onChangeEvent={setRequestAmount}
|
|
/>
|
|
<Dropdown
|
|
activeKey={ticker.currency}
|
|
items={currencyFilters}
|
|
onChange={onCurrencyFilterClick}
|
|
ml={2}
|
|
/>
|
|
</div>
|
|
|
|
<div className={styles.fiatAmount}>
|
|
{'≈ '}
|
|
<FormattedNumber
|
|
currency={ticker.fiatTicker}
|
|
style="currency"
|
|
value={requestFiatAmount || 0}
|
|
/>
|
|
</div>
|
|
</section>
|
|
|
|
<section className={styles.memo}>
|
|
<div className={styles.top}>
|
|
<label htmlFor="memo">
|
|
<FormattedMessage {...messages.memo} />
|
|
</label>
|
|
</div>
|
|
<div className={styles.bottom}>
|
|
<input
|
|
type="text"
|
|
placeholder={intl.formatMessage({ ...messages.details })}
|
|
value={memo}
|
|
onChange={event => setRequestMemo(event.target.value)}
|
|
id="memo"
|
|
/>
|
|
</div>
|
|
</section>
|
|
|
|
<section className={styles.submit}>
|
|
<Button disabled={!(amount > 0)} onClick={onRequestSubmit} width={200}>
|
|
<FormattedMessage {...messages.request} />
|
|
</Button>
|
|
</section>
|
|
</div>
|
|
</div>
|
|
)
|
|
}
|
|
|
|
Request.propTypes = {
|
|
requestform: PropTypes.shape({
|
|
amount: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
|
|
memo: PropTypes.string
|
|
}).isRequired,
|
|
requestFiatAmount: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
|
|
currencyName: PropTypes.string.isRequired,
|
|
currencyFilters: PropTypes.array.isRequired,
|
|
setRequestAmount: PropTypes.func.isRequired,
|
|
setRequestMemo: PropTypes.func.isRequired,
|
|
onRequestSubmit: PropTypes.func.isRequired,
|
|
setCurrency: PropTypes.func.isRequired,
|
|
|
|
ticker: PropTypes.object.isRequired
|
|
}
|
|
|
|
export default injectIntl(Request)
|
|
|