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

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

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