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

copy, success feedback for faucet action

Browse Source
This commit is contained in:
Matthias Kretschmann 2019-02-27 09:42:31 -03:00
parent c9abfa0890
commit 825bb7a0ee
Signed by: m
GPG Key ID: 606EEEF3C479A91F
2 changed files with 35 additions and 21 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

17
src/components/molecules/AccountStatus/Faucet.tsx
View File

@ -2,23 +2,32 @@ import React, { PureComponent } from 'react'
import Button from '../../atoms/Button'
import { User } from '../../../context/User'
interface FaucetProps {
togglePopover: any
}
interface FaucetState {
isLoading: boolean
success?: string
error?: string
}
export default class Faucet extends PureComponent<{}, FaucetState> {
export default class Faucet extends PureComponent<FaucetProps, FaucetState> {
public state = {
isLoading: false,
success: undefined,
error: undefined
}
private getTokens = async (requestFromFaucet: any) => {
// prevent popup from closing on click
this.props.togglePopover()
this.setState({ isLoading: true })
try {
await requestFromFaucet()
this.setState({ isLoading: false })
this.setState({ isLoading: false, success: 'Tokens added!' })
} catch (error) {
this.setState({ isLoading: false, error })
}
@ -32,6 +41,8 @@ export default class Faucet extends PureComponent<{}, FaucetState> {
'Getting tokens...'
) : this.state.error ? (
this.state.error
) : this.state.success ? (
this.state.success
) : (
<Button
link
@ -39,7 +50,7 @@ export default class Faucet extends PureComponent<{}, FaucetState> {
this.getTokens(states.requestFromFaucet)
}
>
Make it rain
Request Ether & Ocean
</Button>
)
}

39
src/components/molecules/AccountStatus/Popover.tsx
View File

@ -9,6 +9,23 @@ const Popover = ({ togglePopover }: { togglePopover: any }) => (
onMouseOver={togglePopover}
onMouseOut={togglePopover}
>
<div className={styles.popoverInfoline}>
<span className={styles.balance} title="Fake data">
<strong>30</strong> ETH
</span>
{/* <span className={styles.balance} title={(eth / 1e18).toFixed(10)}>
<strong>{(eth / 1e18).toFixed(3).slice(0, -1)}</strong> ETH
</span> */}
<span className={styles.balance}>
{/* <strong>{ocn}</strong> OCEAN */}
<strong>2474290</strong> OCEAN
</span>
</div>
<div className={styles.popoverInfoline}>
<Faucet togglePopover={togglePopover} />
</div>
<div className={styles.popoverInfoline}>
<User.Consumer>
{states =>
@ -22,28 +39,14 @@ const Popover = ({ togglePopover }: { togglePopover: any }) => (
}
</User.Consumer>
</div>
<div className={styles.popoverInfoline}>
Network: <strong>&nbsp; Fake Network Name</strong>
{/* Network:
Fake Network Name
{/*
<User.Consumer>
{states => states.network && <strong>{states.network}</strong>}
{states => states.network && states.network}
</User.Consumer> */}
</div>
<div className={styles.popoverInfoline}>
<span className={styles.balance} title="Fake data">
<strong>30</strong> ETH
</span>
{/* <span className={styles.balance} title={(eth / 1e18).toFixed(10)}>
<strong>{(eth / 1e18).toFixed(3).slice(0, -1)}</strong> ETH
</span> */}
<span className={styles.balance}>
{/* <strong>{ocn}</strong> OCEAN */}
<strong>2474290</strong> OCEAN
</span>
</div>
<div className={styles.popoverInfoline}>
<Faucet />
</div>
</div>
)