feature(step 2): add explainer to step 2

app/components/ChannelForm/StepTwo.js

@@ -7,24 +7,31 @@ import styles from './StepTwo.scss'
 class StepTwo extends Component {
   render() {
     const { local_amt, setLocalAmount } = this.props
-    console.log('local_amt: ', local_amt)
+
     return (
       <div className={styles.container}>
-        <label htmlFor='amount'>
+        <div className={styles.explainer}>
-          <CurrencyIcon currency={'btc'} crypto={'btc'} />
+          <h2>Local Amount</h2>
-        </label>
+          <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>
-        <input
+        </div>
-          autoFocus
+
-          type='number'
+        <form>
-          min='0'
+          <label htmlFor='amount'>
-          max='0.16'
+            <CurrencyIcon currency={'btc'} crypto={'btc'} />
-          ref={input => this.input = input}
+          </label>
-          size=''
+          <input
-          value={local_amt}
+            autoFocus
-          onChange={event => setLocalAmount(event.target.value)}
+            type='number'
-          id='amount'
+            min='0'
-          style={{ width: isNaN((local_amt.length + 1) * 55) ? 140 : (local_amt.length + 1) * 55 }}
+            max='0.16'
-        />
+            ref={input => this.input = input}
+            size=''
+            value={local_amt}
+            onChange={event => setLocalAmount(event.target.value)}
+            id='amount'
+            style={{ width: isNaN((local_amt.length + 1) * 55) ? 140 : (local_amt.length + 1) * 55 }}
+          />
+        </form>
       </div>
     )
   }

app/components/ChannelForm/StepTwo.scss

@@ -1,13 +1,32 @@
 @import '../../variables.scss';
 
 .container {
-  display: flex;
-  flex-direction: row;
-  justify-content: center;
-  align-items: center;
   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;
+    flex-direction: row;
+    justify-content: center;
+    align-items: center;
+  }
+
   label {
     margin-left: -25px;
     height: 200px;

app/reducers/channelform.js

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