15 changed files with 438 additions and 52 deletions
@ -1,14 +1,60 @@ |
|||||
import React from 'react' |
import React from 'react' |
||||
import PropTypes from 'prop-types' |
import PropTypes from 'prop-types' |
||||
|
import { btc } from 'utils' |
||||
import styles from './TransactionForm.scss' |
import styles from './TransactionForm.scss' |
||||
|
|
||||
const TransactionForm = ({}) => ( |
const TransactionForm = ({ updatePayReq, pay_req, loadingRoutes, payReqRoutes, setCurrentRoute, currentRoute }) => ( |
||||
<div className={styles.transactionForm}> |
<div className={styles.transactionForm}> |
||||
tx form |
<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> |
</div> |
||||
) |
) |
||||
|
|
||||
TransactionForm.propTypes = { |
TransactionForm.propTypes = { |
||||
|
updatePayReq: PropTypes.func.isRequired, |
||||
|
pay_req: PropTypes.string.isRequired, |
||||
|
loadingRoutes: PropTypes.bool.isRequired, |
||||
|
payReqRoutes: PropTypes.array.isRequired, |
||||
|
setCurrentRoute: PropTypes.func.isRequired |
||||
} |
} |
||||
|
|
||||
export default TransactionForm |
export default TransactionForm |
||||
|
@ -0,0 +1,125 @@ |
|||||
|
@import '../../variables.scss'; |
||||
|
|
||||
|
@-webkit-keyframes animation-rotate { |
||||
|
100% { |
||||
|
-webkit-transform: rotate(360deg); |
||||
|
} |
||||
|
} |
||||
|
|
||||
|
@-moz-keyframes animation-rotate { |
||||
|
100% { |
||||
|
-moz-transform: rotate(360deg); |
||||
|
} |
||||
|
} |
||||
|
|
||||
|
@-o-keyframes animation-rotate { |
||||
|
100% { |
||||
|
-o-transform: rotate(360deg); |
||||
|
} |
||||
|
} |
||||
|
|
||||
|
@keyframes animation-rotate { |
||||
|
100% { |
||||
|
transform: rotate(360deg); |
||||
|
} |
||||
|
} |
||||
|
|
||||
|
.spinner { |
||||
|
border: 1px solid rgba(255, 220, 83, 0.1); |
||||
|
border-left-color: rgba(255, 220, 83, 0.4); |
||||
|
-webkit-border-radius: 999px; |
||||
|
-moz-border-radius: 999px; |
||||
|
border-radius: 999px; |
||||
|
} |
||||
|
|
||||
|
.spinner { |
||||
|
margin: 0 auto; |
||||
|
height: 100px; |
||||
|
width: 100px; |
||||
|
-webkit-animation: animation-rotate 1000ms linear infinite; |
||||
|
-moz-animation: animation-rotate 1000ms linear infinite; |
||||
|
-o-animation: animation-rotate 1000ms linear infinite; |
||||
|
animation: animation-rotate 1000ms linear infinite; |
||||
|
} |
||||
|
|
||||
|
.loading { |
||||
|
margin-top: 40px; |
||||
|
|
||||
|
h1 { |
||||
|
text-align: center; |
||||
|
margin-top: 25px; |
||||
|
} |
||||
|
} |
||||
|
|
||||
|
.transactionForm { |
||||
|
color: $white; |
||||
|
margin-top: 50px; |
||||
|
|
||||
|
.form { |
||||
|
padding: 0 20px; |
||||
|
} |
||||
|
|
||||
|
.transactionInput { |
||||
|
outline: 0; |
||||
|
border: 0; |
||||
|
border-bottom: 1px solid $secondary; |
||||
|
color: $secondary; |
||||
|
background: transparent; |
||||
|
padding: 5px; |
||||
|
width: 100%; |
||||
|
font-size: 14px; |
||||
|
color: $white; |
||||
|
} |
||||
|
} |
||||
|
|
||||
|
.routes { |
||||
|
margin-top: 40px; |
||||
|
} |
||||
|
|
||||
|
.route { |
||||
|
margin: 20px 0; |
||||
|
padding: 20px; |
||||
|
cursor: pointer; |
||||
|
|
||||
|
&:hover { |
||||
|
background: darken(#353535, 10%); |
||||
|
} |
||||
|
|
||||
|
&.active { |
||||
|
background: darken(#353535, 10%); |
||||
|
} |
||||
|
|
||||
|
header { |
||||
|
display: flex; |
||||
|
flex-direction: row; |
||||
|
justify-content: space-between; |
||||
|
margin-bottom: 20px; |
||||
|
|
||||
|
h1 { |
||||
|
font-size: 16px; |
||||
|
font-weight: bold; |
||||
|
} |
||||
|
|
||||
|
span { |
||||
|
font-weight: bold; |
||||
|
text-transform: uppercase; |
||||
|
font-size: 12px; |
||||
|
letter-spacing: 1.2px; |
||||
|
} |
||||
|
} |
||||
|
|
||||
|
.data { |
||||
|
display: flex; |
||||
|
flex-direction: row; |
||||
|
justify-content: space-between; |
||||
|
align-items: center; |
||||
|
|
||||
|
section { |
||||
|
h4 { |
||||
|
font-size: 12px; |
||||
|
font-weight: bold; |
||||
|
margin-bottom: 5px; |
||||
|
} |
||||
|
} |
||||
|
} |
||||
|
} |
Loading…
Reference in new issue