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.
61 lines
1.8 KiB
61 lines
1.8 KiB
import React from 'react'
|
|
import PropTypes from 'prop-types'
|
|
import { btc } from 'utils'
|
|
import styles from './TransactionForm.scss'
|
|
|
|
const TransactionForm = ({ updatePayReq, pay_req, loadingRoutes, payReqRoutes, setCurrentRoute, currentRoute }) => (
|
|
<div className={styles.transactionForm}>
|
|
<div className={styles.form}>
|
|
<input
|
|
className={styles.transactionInput}
|
|
placeholder='Payment request...'
|
|
value={pay_req}
|
|
onChange={event => updatePayReq(event.target.value)}
|
|
/>
|
|
</div>
|
|
|
|
{
|
|
loadingRoutes &&
|
|
<div className={styles.loading}>
|
|
<div className={styles.spinner} />
|
|
<h1>calculating all routes...</h1>
|
|
</div>
|
|
}
|
|
|
|
<ul className={styles.routes}>
|
|
{
|
|
payReqRoutes.map((route, index) => (
|
|
<li className={`${styles.route} ${currentRoute === route && styles.active}`} key={index} onClick={() => setCurrentRoute(route)}>
|
|
<header>
|
|
<h1>Route #{index + 1}</h1>
|
|
<span>Hops: {route.hops.length}</span>
|
|
</header>
|
|
|
|
<div className={styles.data}>
|
|
<section>
|
|
<h4>Amount</h4>
|
|
<span>{btc.satoshisToBtc(route.total_amt)} BTC</span>
|
|
</section>
|
|
|
|
<section>
|
|
<h4>Fees</h4>
|
|
<span>{btc.satoshisToBtc(route.total_fees)} BTC</span>
|
|
</section>
|
|
</div>
|
|
</li>
|
|
))
|
|
}
|
|
</ul>
|
|
</div>
|
|
)
|
|
|
|
TransactionForm.propTypes = {
|
|
updatePayReq: PropTypes.func.isRequired,
|
|
pay_req: PropTypes.string.isRequired,
|
|
loadingRoutes: PropTypes.bool.isRequired,
|
|
payReqRoutes: PropTypes.array.isRequired,
|
|
setCurrentRoute: PropTypes.func.isRequired,
|
|
currentRoute: PropTypes.object.isRequired
|
|
}
|
|
|
|
export default TransactionForm
|
|
|