mirror of
https://github.com/kremalicious/blog.git
synced 2025-01-03 02:15:08 +01:00
number input
This commit is contained in:
parent
ea6c0c3372
commit
0352c17054
GPG Key ID:
606EEEF3C479A91F
@ -31,8 +31,8 @@
|
||||
"dms2dec": "^1.1.0",
|
||||
"fast-exif": "^1.0.1",
|
||||
"fraction.js": "^4.0.9",
|
||||
"gatsby": "^2.0.21",
|
||||
"gatsby-image": "^2.0.13",
|
||||
"gatsby": "^2.0.22",
|
||||
"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",
|
||||
|
||||
@ -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
|
||||
className="btn btn-primary"
|
||||
onClick={this.handleWeb3Button}
|
||||
disabled={
|
||||
!(this.state.networkId === '1') || !this.state.selectedAccount
|
||||
}
|
||||
>
|
||||
Make it rain 0.01 Ξ
|
||||
</button>
|
||||
<div className={styles.inputGroup}>
|
||||
<div className={styles.input}>
|
||||
<Input
|
||||
type="number"
|
||||
disabled={
|
||||
!(this.state.networkId === '1') ||
|
||||
!this.state.selectedAccount
|
||||
}
|
||||
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 && (
|
||||
|
||||
@ -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;
|
||||
|
||||
Loading…
Reference in New Issue
Block a user