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.
159 lines
4.3 KiB
159 lines
4.3 KiB
import React from 'react'
|
|
import PropTypes from 'prop-types'
|
|
import FaExclamationCircle from 'react-icons/lib/fa/exclamation-circle'
|
|
import { AmountInput, Button, Dropdown } from 'components/UI'
|
|
import { FormattedNumber, FormattedMessage } from 'react-intl'
|
|
import messages from './messages'
|
|
import styles from './SubmitChannelForm.scss'
|
|
|
|
class SubmitChannelForm extends React.Component {
|
|
constructor(props) {
|
|
super(props)
|
|
this.amountInput = React.createRef()
|
|
}
|
|
|
|
componentDidMount() {
|
|
// Clear and Focus the amount input field.
|
|
this.amountInput.current.focusTextInput()
|
|
}
|
|
|
|
render() {
|
|
const {
|
|
closeChannelForm,
|
|
closeContactsForm,
|
|
|
|
node,
|
|
contactCapacity,
|
|
updateContactCapacity,
|
|
openChannel,
|
|
fiatTicker,
|
|
dupeChanInfo,
|
|
|
|
ticker,
|
|
|
|
toggleCurrencyProps: { currencyFilters, onCurrencyFilterClick, contactFormFiatAmount }
|
|
} = this.props
|
|
|
|
const renderTitle = () => {
|
|
// if the node has an alias set we will show that with the pubkey in parens
|
|
// if not, just show the pubkey (would look ugly with rando parens)
|
|
if (node.alias && node.alias.length) {
|
|
return `${node.alias} (${node.pub_key})`
|
|
}
|
|
|
|
return node.pub_key
|
|
}
|
|
|
|
const renderWarning = dupeChanInfo => {
|
|
const { alias, activeChannels, capacity, currencyName } = dupeChanInfo
|
|
const aliasMsg = alias ? <span className={styles.alias}>{alias}</span> : 'this_node'
|
|
|
|
return (
|
|
<p>
|
|
<FormattedMessage
|
|
{...messages.duplicate_warnig}
|
|
values={{
|
|
activeChannels,
|
|
aliasMsg
|
|
}}
|
|
/>{' '}
|
|
{capacity} {currencyName}.
|
|
</p>
|
|
)
|
|
}
|
|
|
|
const formSubmitted = () => {
|
|
// dont submit to LND if they havent set channel capacity amount
|
|
if (contactCapacity <= 0) {
|
|
return
|
|
}
|
|
|
|
// submit the channel to LND
|
|
openChannel({
|
|
pubkey: node.pub_key,
|
|
host: node.addresses[0].addr,
|
|
local_amt: contactCapacity
|
|
})
|
|
|
|
// close the ChannelForm component
|
|
closeChannelForm()
|
|
|
|
// close the AddChannel component
|
|
closeContactsForm()
|
|
}
|
|
|
|
return (
|
|
<div className={styles.content}>
|
|
<header className={styles.header}>
|
|
<h1>
|
|
<FormattedMessage {...messages.title} />
|
|
</h1>
|
|
<p>
|
|
<FormattedMessage {...messages.description} />
|
|
</p>
|
|
</header>
|
|
|
|
<section className={styles.title}>
|
|
<h2>{renderTitle()}</h2>
|
|
</section>
|
|
|
|
{dupeChanInfo && (
|
|
<section className={styles.warn}>
|
|
<FaExclamationCircle className={styles.exclamation} style={{ verticalAlign: 'top' }} />
|
|
{renderWarning(dupeChanInfo)}
|
|
</section>
|
|
)}
|
|
|
|
<section className={styles.amount}>
|
|
<div className={styles.input}>
|
|
<AmountInput
|
|
id="amount"
|
|
amount={contactCapacity}
|
|
currency={ticker.currency}
|
|
onChangeEvent={updateContactCapacity}
|
|
ref={this.amountInput}
|
|
/>
|
|
<Dropdown
|
|
activeKey={ticker.currency}
|
|
items={currencyFilters}
|
|
onChange={onCurrencyFilterClick}
|
|
ml={2}
|
|
/>
|
|
</div>
|
|
<div className={styles.fiatAmount}>
|
|
{'≈ '}
|
|
<FormattedNumber
|
|
currency={fiatTicker}
|
|
style="currency"
|
|
value={contactFormFiatAmount || 0}
|
|
/>
|
|
</div>
|
|
</section>
|
|
|
|
<section className={styles.submit}>
|
|
<Button disabled={!(contactCapacity > 0)} onClick={formSubmitted}>
|
|
<FormattedMessage {...messages.submit} />
|
|
</Button>
|
|
</section>
|
|
</div>
|
|
)
|
|
}
|
|
}
|
|
|
|
SubmitChannelForm.propTypes = {
|
|
closeChannelForm: PropTypes.func.isRequired,
|
|
closeContactsForm: PropTypes.func.isRequired,
|
|
|
|
node: PropTypes.object.isRequired,
|
|
contactCapacity: PropTypes.PropTypes.oneOfType([PropTypes.number, PropTypes.string]),
|
|
updateContactCapacity: PropTypes.func.isRequired,
|
|
openChannel: PropTypes.func.isRequired,
|
|
fiatTicker: PropTypes.string.isRequired,
|
|
dupeChanInfo: PropTypes.object,
|
|
|
|
ticker: PropTypes.object.isRequired,
|
|
|
|
toggleCurrencyProps: PropTypes.object.isRequired
|
|
}
|
|
|
|
export default SubmitChannelForm
|
|
|