feature(sendcoins): working demo of UX flow

app/reducers/form.js

@@ -1,8 +1,8 @@
 // Initial State
 const initialState = {
-  modalOpen: true,
+  modalOpen: false,
   formType: 'pay',
-  paymentType: 'onchain',
+  paymentType: '',
   amount: '0',
   message: '',
   pubkey: '',

app/routes/app/components/components/Form/Form.js

@@ -34,7 +34,9 @@ const Form = ({
               <Pay
                 paymentType={paymentType}
                 setPaymentType={setPaymentType}
-                amount={formInvoice.amount}
+                invoiceAmount={formInvoice.amount}
+                onchainAmount={amount}
+                setAmount={setAmount}
                 payment_request={payment_request}
                 setPaymentRequest={setPaymentRequest}
                 fetchInvoice={fetchInvoice}

app/routes/app/components/components/Form/components/Pay/Pay.js

@@ -8,7 +8,9 @@ import styles from './Pay.scss'
 const Pay = ({
   paymentType,
   setPaymentType,
-  amount,
+  invoiceAmount,
+  onchainAmount,
+  setAmount,
   payment_request,
   setPaymentRequest,
   fetchInvoice,
@@ -26,59 +28,84 @@ const Pay = ({
 
   const paymentRequestOnChange = payreq => {
     setPaymentRequest(payreq)
-    if (payreq.length === 124) { fetchInvoice(payreq) }
+    if (payreq.length === 124) {
+      setPaymentType('ln')
+      fetchInvoice(payreq) 
+    } else if (payreq.length === 42) {
+      setPaymentType('onchain')
+    } else {
+      setPaymentType('')
+    }
   }
   
   const calculateAmount = value => (currency === 'usd' ? btc.satoshisToUsd(value, currentTicker.price_usd) : btc.satoshisToBtc(value))
 
+  console.log('paymentType: ', paymentType)
+  console.log('onchainAmount: ', onchainAmount)
   return (
     <div className={styles.container}>
-      <section className={styles.amountContainer}>
+      <section className={`${styles.amountContainer} ${paymentType === 'ln' ? styles.ln : ''}`}>
         <label htmlFor='amount'>
           <CurrencyIcon currency={currency} crypto={crypto} />
         </label>
         <input
           type='text'
           size=''
-          style={{ width: '75%', fontSize: '85px' }}
-          value={calculateAmount(amount)}
+          style={
+            paymentType === 'ln' ?
+              { width: '75%', fontSize: '85px' }
+              :
+              { width: `${onchainAmount.length > 1 ? (onchainAmount.length * 15) - 5 : 25}%`, fontSize: `${190 - (onchainAmount.length ** 2)}px` }
+          }
+          value={paymentType === 'ln' ? calculateAmount(invoiceAmount) : onchainAmount}
+          onChange={event => setAmount(event.target.value)}
           id='amount'
-          readOnly
+          readOnly={paymentType === 'ln'}
         />
       </section>
-      <div
-        className={`${styles.onchain} ${paymentType === 'onchain' ? styles.active : null}`}
-        onClick={() => setPaymentType('onchain')}
-      >
-        <aside className={`${styles.paymentIcon} ${styles.chain}`}>
-          <span>on-chain</span>
-          <FaChain />
-        </aside>
-        <section className={styles.inputContainer}>
-          <label htmlFor='paymentRequest'>Address:</label>
-          <input
-            type='text'
-            placeholder='Bitcoin address'
-            value={payment_request}
-            onChange={event => paymentRequestOnChange(event.target.value)}
-            id='paymentRequest'
-          />
-        </section>
-      </div>
-      <div className={styles.divider} />
-      <div
-        className={`${styles.ln} ${paymentType === 'ln' ? styles.active : null}`}
-        onClick={() => setPaymentType('ln')}
-      >
-        <aside className={`${styles.paymentIcon} ${styles.bolt}`}>
-          <span>lightning network</span>
-          <FaBolt />
+      <div className={styles.inputContainer}>
+        <div className={styles.info}>
+          {(() => {
+            switch(paymentType) {
+              case 'onchain':
+                return (
+                  <span>{`You're about to send ${onchainAmount} on-chain which should take around 10 minutes`}</span>
+                )
+              case 'ln':
+                return (
+                  <span>{`You're about to send ${calculateAmount(invoiceAmount)} over the Lightning Network which will be instant`}</span>
+                )
+              default:
+                return null
+            }
+          })()}
+        </div>
+        <aside className={styles.paymentIcon}>
+          {(() => {
+            switch(paymentType) {
+              case 'onchain':
+                return (
+                  <i>
+                    <span>on-chain</span>
+                    <FaChain />
+                  </i>
+                )
+              case 'ln':
+                return (
+                  <i>
+                    <span>lightning network</span>
+                    <FaBolt />
+                  </i>
+                )
+              default:
+                return null
+            }
+          })()}
         </aside>
-        <section className={styles.inputContainer}>
-          <label htmlFor='paymentRequest'>Request:</label>
+        <section className={styles.input}>
           <input
             type='text'
-            placeholder='Payment Request'
+            placeholder='Payment request or bitcoin address'
             value={payment_request}
             onChange={event => paymentRequestOnChange(event.target.value)}
             id='paymentRequest'
@@ -95,7 +122,10 @@ const Pay = ({
 }
 
 Pay.propTypes = {
-  amount: PropTypes.string.isRequired,
+  amount: PropTypes.oneOfType([
+    PropTypes.string,
+    PropTypes.number
+  ]),
   setPaymentRequest: PropTypes.func.isRequired,
   fetchInvoice: PropTypes.func.isRequired,
   payInvoice: PropTypes.func.isRequired,

app/routes/app/components/components/Form/components/Pay/Pay.scss

@@ -15,6 +15,11 @@
   justify-content: center;
   min-height: 120px;
   margin-bottom: 20px;
+  transition: all 0.25s;
+
+  &.ln {
+    opacity: 0.75;
+  }
   
   label, input[type=text] {
     color: inherit;
@@ -47,22 +52,23 @@
   }
 }
 
-.onchain, .ln {
+.inputContainer {
   position: relative;
   width: 100%;
   padding: 40px 0;
-  opacity: 0.25;
   cursor: pointer;
   transition: all 0.25s;
 
-  &.active {
-    opacity: 1;
+  .info {
+    margin-bottom: 10px;
+    min-height: 19px;
   }
 
   .paymentIcon {
     position: absolute;
     width: 20%;
     left: calc(-12.5% - 75px);
+    top: 42px;
     color: $main;
     font-size: 50px;
     text-align: center;
@@ -76,20 +82,7 @@
   }
 }
 
-.divider {
-  height: 1px;
-  background: $main;
-  width: 150%;
-}
-
-.onchain {
-}
-
-.ln {
-  margin-bottom: 20px;
-}
-
-.inputContainer {
+.input {
   display: flex;
   justify-content: center;
   font-size: 18px;

package.json

@@ -8,7 +8,7 @@
     "build-dll": "cross-env NODE_ENV=development node --trace-warnings -r babel-register ./node_modules/webpack/bin/webpack --config webpack.config.renderer.dev.dll.js --colors",
     "build-main": "cross-env NODE_ENV=production node --trace-warnings -r babel-register ./node_modules/webpack/bin/webpack --config webpack.config.main.prod.js --colors",
     "build-renderer": "cross-env NODE_ENV=production node --trace-warnings -r babel-register ./node_modules/webpack/bin/webpack --config webpack.config.renderer.prod.js --colors",
-    "dev": "cross-env START_HOT=1 concurrently \"npm run start-renderer-dev\" \"npm run lnd\"",
+    "dev": "cross-env START_HOT=1 concurrently \"npm run start-renderer-dev\"",
     "flow": "flow",
     "flow-typed": "rimraf flow-typed/npm && flow-typed install --overwrite || true",
     "lint": "eslint --cache --format=node_modules/eslint-formatter-pretty .",