Browse Source

feature(step 2): add explainer to step 2

renovate/lint-staged-8.x
Jack Mallers 7 years ago
parent
commit
ef41acc3b5
  1. 9
      app/components/ChannelForm/StepTwo.js
  2. 23
      app/components/ChannelForm/StepTwo.scss
  3. 6
      app/reducers/channelform.js

9
app/components/ChannelForm/StepTwo.js

@ -7,9 +7,15 @@ import styles from './StepTwo.scss'
class StepTwo extends Component { class StepTwo extends Component {
render() { render() {
const { local_amt, setLocalAmount } = this.props const { local_amt, setLocalAmount } = this.props
console.log('local_amt: ', local_amt)
return ( return (
<div className={styles.container}> <div className={styles.container}>
<div className={styles.explainer}>
<h2>Local Amount</h2>
<p>Local amount is the amount of bitcoin that you would like to commit to the channel. This is the amount that will be sent in an on-chain transaction to open your Lightning channel.</p>
</div>
<form>
<label htmlFor='amount'> <label htmlFor='amount'>
<CurrencyIcon currency={'btc'} crypto={'btc'} /> <CurrencyIcon currency={'btc'} crypto={'btc'} />
</label> </label>
@ -25,6 +31,7 @@ class StepTwo extends Component {
id='amount' id='amount'
style={{ width: isNaN((local_amt.length + 1) * 55) ? 140 : (local_amt.length + 1) * 55 }} style={{ width: isNaN((local_amt.length + 1) * 55) ? 140 : (local_amt.length + 1) * 55 }}
/> />
</form>
</div> </div>
) )
} }

23
app/components/ChannelForm/StepTwo.scss

@ -1,12 +1,31 @@
@import '../../variables.scss'; @import '../../variables.scss';
.container { .container {
margin-bottom: 50px;
padding: 20px;
.explainer {
margin: 20px 0 50px 0;
padding-bottom: 20px;
border-bottom: 1px solid $lightgrey;
h2 {
margin: 10px 0 20px 0;
font-size: 28px;
}
p {
line-height: 1.5;
font-size: 16px;
}
}
form {
display: flex; display: flex;
flex-direction: row; flex-direction: row;
justify-content: center; justify-content: center;
align-items: center; align-items: center;
margin-bottom: 50px; }
padding: 20px;
label { label {
margin-left: -25px; margin-left: -25px;

6
app/reducers/channelform.js

@ -87,11 +87,11 @@ channelFormSelectors.channelFormHeader = createSelector(
step => { step => {
switch (step) { switch (step) {
case 1: case 1:
return 'Choose a peer' return 'Select a peer'
case 2: case 2:
return 'Choose your local amount' return 'Set your local amount'
case 3: case 3:
return 'Choose your push amount' return 'Set your push amount'
default: default:
return 'Confirm' return 'Confirm'
} }

Loading…
Cancel
Save