oceanprotocol/commons
1
0
Fork 0
mirror of https://github.com/oceanprotocol/commons.git synced 2023-03-15 18:03:00 +01:00
Code Releases Activity

faucet styling

Browse Source
This commit is contained in:
Matthias Kretschmann 2019-02-28 13:28:38 -03:00
parent dbd765124a
commit 94201d2021
Signed by: m
GPG Key ID: 606EEEF3C479A91F
3 changed files with 54 additions and 23 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

3
src/components/atoms/Spinner.module.scss
View File

@ -3,6 +3,7 @@
.spinner {
position: relative;
text-align: center;
margin-top: $spacer * $line-height;
margin-bottom: $spacer / 2;
&:before {
@ -13,7 +14,7 @@
left: 50%;
width: 20px;
height: 20px;
margin-top: -10px;
margin-top: -20px;
margin-left: -10px;
border-radius: 50%;
border: 2px solid $brand-purple;

12
src/routes/Faucet.module.scss
View File

@ -1,2 +1,14 @@
@import '../styles/variables';
.action {
text-align: center;
margin-top: $spacer * $line-height;
p {
margin-bottom: $spacer;
}
}
.success {
color: $green;
}

62
src/routes/Faucet.tsx
View File

@ -1,6 +1,7 @@
import React, { PureComponent } from 'react'
import Route from '../components/templates/Route'
import Button from '../components/atoms/Button'
import Spinner from '../components/atoms/Spinner'
import { User } from '../context/User'
import Web3message from '../components/molecules/Web3message'
import styles from './Faucet.module.scss'
@ -9,13 +10,15 @@ interface FaucetState {
isLoading: boolean
success?: string
error?: string
eth?: string
}
class Faucet extends PureComponent<{}, FaucetState> {
public state = {
isLoading: false,
success: undefined,
error: undefined
error: undefined,
eth: 'xx'
}
private getTokens = async (requestFromFaucet: () => void) => {
@ -23,7 +26,12 @@ class Faucet extends PureComponent<{}, FaucetState> {
try {
await requestFromFaucet()
this.setState({ isLoading: false, success: 'Tokens added!' })
this.setState({
isLoading: false,
success: `Successfully added ${
this.state.eth
} ETH to your account.`
})
} catch (error) {
this.setState({ isLoading: false, error })
}
@ -37,26 +45,36 @@ class Faucet extends PureComponent<{}, FaucetState> {
>
<Web3message />
<User.Consumer>
{states =>
this.state.isLoading ? (
'Getting tokens...'
) : this.state.error ? (
this.state.error
) : this.state.success ? (
this.state.success
) : (
<Button
primary
onClick={() =>
this.getTokens(states.requestFromFaucet)
}
>
Request Ether
</Button>
)
}
</User.Consumer>
<div className={styles.action}>
<p>
Click the button below to request Ether for the Ocean
POA network.
<br /> You can only request Ether once every 24 hours
for your address.
</p>
<User.Consumer>
{states =>
this.state.isLoading ? (
<Spinner message="Getting Ether..." />
) : this.state.error ? (
this.state.error
) : this.state.success ? (
<div className={styles.success}>
{this.state.success}
</div>
) : (
<Button
primary
onClick={() =>
this.getTokens(states.requestFromFaucet)
}
>
Request Ether
</Button>
)
}
</User.Consumer>
</div>
</Route>
)
}