number input

package.json

@@ -31,8 +31,8 @@
     "dms2dec": "^1.1.0",
     "fast-exif": "^1.0.1",
     "fraction.js": "^4.0.9",
-    "gatsby": "^2.0.21",
+    "gatsby": "^2.0.22",
-    "gatsby-image": "^2.0.13",
+    "gatsby-image": "^2.0.14",
     "gatsby-plugin-catch-links": "^2.0.4",
     "gatsby-plugin-favicon": "^3.1.4",
     "gatsby-plugin-feed": "^2.0.8",
@@ -78,7 +78,7 @@
     "@babel/node": "^7.0.0",
     "@babel/preset-env": "^7.1.0",
     "babel-eslint": "^10.0.1",
-    "eslint": "^5.6.1",
+    "eslint": "^5.7.0",
     "eslint-config-prettier": "^3.1.0",
     "eslint-loader": "^2.1.1",
     "eslint-plugin-graphql": "^2.1.1",

src/components/atoms/Web3Donation.jsx

@@ -1,6 +1,7 @@
 import React, { PureComponent } from 'react'
 import PropTypes from 'prop-types'
 import Web3 from 'web3'
+import Input from '../atoms/Input'
 import styles from './Web3Donation.module.scss'
 
 const ONE_SECOND = 1000
@@ -13,6 +14,7 @@ export default class Web3Donation extends PureComponent {
     networkId: null,
     accounts: [],
     selectedAccount: null,
+    amount: 0.01,
     receipt: null,
     transactionHash: null,
     loading: false,
@@ -120,7 +122,7 @@ export default class Web3Donation extends PureComponent {
       {
         from: this.state.selectedAccount,
         to: this.props.address,
-        value: '10000000000000000'
+        value: this.state.amount * 1e18 // ETH -> Wei
       },
       (error, transactionHash) => {
         if (error) this.setState({ error, loading: false })
@@ -130,26 +132,49 @@ export default class Web3Donation extends PureComponent {
     )
   }
 
+  onAmountChange = ({ target }) => {
+    this.setState({ amount: target.value })
+  }
+
   render() {
     return (
       <div className={styles.web3}>
         <h4>web3</h4>
-        <p>Send a donation with MetaMask or Mist.</p>
+        <p>Send Ether with MetaMask, Brave, or Mist.</p>
 
         {this.state.web3Connected ? (
           <div>
             {this.state.loading ? (
               'Hang on...'
             ) : (
-              <button
+              <div className={styles.inputGroup}>
-                className="btn btn-primary"
+                <div className={styles.input}>
-                onClick={this.handleWeb3Button}
+                  <Input
-                disabled={
+                    type="number"
-                  !(this.state.networkId === '1') || !this.state.selectedAccount
+                    disabled={
-                }
+                      !(this.state.networkId === '1') ||
-              >
+                      !this.state.selectedAccount
-                Make it rain 0.01 Ξ
+                    }
-              </button>
+                    value={this.state.amount}
+                    onChange={this.onAmountChange}
+                    min="0"
+                    step="0.01"
+                  />
+                  <div className={styles.currency}>
+                    <span>ETH</span>
+                  </div>
+                </div>
+                <button
+                  className="btn btn-primary"
+                  onClick={this.handleWeb3Button}
+                  disabled={
+                    !(this.state.networkId === '1') ||
+                    !this.state.selectedAccount
+                  }
+                >
+                  Make it rain
+                </button>
+              </div>
             )}
 
             {this.state.accounts.length === 0 && (

src/components/atoms/Web3Donation.module.scss

@@ -10,10 +10,6 @@
     margin-bottom: $spacer;
     padding-bottom: $spacer * 1.5;
 
-    button {
-        margin: auto;
-    }
-
     h4 {
         font-size: $font-size-large;
         margin-top: 0;
@@ -27,6 +23,75 @@
     }
 }
 
+.inputGroup {
+    max-width: 17rem;
+    margin: auto;
+    position: relative;
+
+    @media (min-width: $screen-sm) {
+        display: flex;
+        max-width: 20rem;
+    }
+
+    button {
+        width: 100%;
+        border-top-left-radius: 0;
+        border-top-right-radius: 0;
+        border-color: lighten($brand-grey-light, 20%);
+
+        @media (min-width: $screen-sm) {
+            width: 45%;
+            border-top-right-radius: $border-radius;
+            border-top-left-radius: 0;
+            border-bottom-left-radius: 0;
+            border-left: 0;
+        }
+    }
+}
+
+.input {
+    position: relative;
+
+    @media (min-width: $screen-sm) {
+        width: 55%;
+    }
+
+    input {
+        text-align: center;
+        border: 1px solid lighten($brand-grey-light, 20%);
+        font-size: $font-size-h3;
+        padding: $spacer / 3 $spacer / 3 $spacer / 3 $spacer * 1.9;
+        border-bottom: 0;
+        border-bottom-left-radius: 0;
+        border-bottom-right-radius: 0;
+
+        @media (min-width: $screen-sm) {
+            padding: $spacer / 4 0 $spacer / 3 $spacer * 1.9;
+            border-top-right-radius: 0;
+            border-bottom-right-radius: 0;
+            border-bottom-left-radius: $border-radius;
+            border-bottom: 1px solid lighten($brand-grey-light, 20%);
+            border-right: 0;
+        }
+    }
+}
+
+.currency {
+    position: absolute;
+    top: 1px;
+    bottom: 1px;
+    left: 1px;
+    font-size: $font-size-base;
+    padding: $spacer / 3;
+    color: $brand-grey-light;
+    background: $brand-light;
+    border-right: 1px solid rgba($brand-grey-light, .4);
+    border-top-left-radius: $border-radius;
+    border-bottom-left-radius: $border-radius;
+    display: flex;
+    align-items: center;
+}
+
 .alert {
     margin-top: $spacer / 2;
     font-size: $font-size-small;