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

component splitup, prepare loading state for faucet action

This commit is contained in:
Matthias Kretschmann 2019-02-26 11:22:12 -03:00
parent b71649b0d0
commit 3d7746c46c
Signed by: m
GPG Key ID: 606EEEF3C479A91F
9 changed files with 194 additions and 131 deletions

View File

@ -1,7 +1,7 @@
import React from 'react'
import { NavLink } from 'react-router-dom'
import { ReactComponent as Logo } from '@oceanprotocol/art/logo/logo.svg'
import AccountStatus from './molecules/AccountStatus'
import AccountStatus from './molecules/AccountStatus/'
import styles from './Header.module.scss'
import menu from '../data/menu.json'

View File

@ -1,6 +1,6 @@
import React, { PureComponent } from 'react'
import Button from '../components/atoms/Button'
import AccountStatus from './molecules/AccountStatus'
import AccountStatus from './molecules/AccountStatus/'
import styles from './Web3message.module.scss'
import { User } from '../context/User'

View File

@ -1,95 +0,0 @@
import React, { PureComponent } from 'react'
import cx from 'classnames'
import Button from '../atoms/Button'
import { User } from '../../context/User'
import Popover from 'react-popover'
import styles from './AccountStatus.module.scss'
const AccountPopover = () => (
<div className={styles.popover}>
<div className={styles.accountName}>
<User.Consumer>
{states =>
states.account ? (
<span className={styles.address} title={states.account}>
{states.account}
</span>
) : (
<em>No account selected</em>
)
}
</User.Consumer>
</div>
<div className={styles.popoverInfoline}>
Network: &nbsp;<strong>{''}</strong>
</div>
<div className={styles.popoverInfoline}>
<User.Consumer>
{states => (
<Button link onClick={() => states.requestFromFaucet()}>
Make it rain
</Button>
)}
</User.Consumer>
</div>
</div>
)
interface AccountStatusProps {
className?: string
}
interface AccountStatusState {
popoverIsOpen: boolean
}
export default class AccountStatus extends PureComponent<
AccountStatusProps,
AccountStatusState
> {
public state = {
popoverIsOpen: false
}
private togglePopover(toState: boolean) {
const popoverIsOpen =
typeof toState === 'boolean' ? toState : !this.state.popoverIsOpen
this.setState({ popoverIsOpen })
}
public AccountIndicator = () => (
<div
className={cx(styles.status, this.props.className)}
onClick={() => this.togglePopover(true)}
onMouseOver={() => this.togglePopover(true)}
>
<User.Consumer>
{states =>
!states.isWeb3 ? (
<span className={styles.statusIndicator} />
) : !states.isLogged ? (
<span className={styles.statusIndicatorCloseEnough} />
) : states.isLogged ? (
<span className={styles.statusIndicatorActive} />
) : null
}
</User.Consumer>
</div>
)
public render() {
const popoverProps = {
isOpen: this.state.popoverIsOpen,
enterExitTransitionDurationMs: 300,
tipSize: 0.01,
onOuterAction: () => this.togglePopover(false),
body: <AccountPopover />
}
return (
<Popover {...popoverProps}>
<this.AccountIndicator />
</Popover>
)
}
}

View File

@ -0,0 +1,49 @@
import React, { PureComponent } from 'react'
import Button from '../../atoms/Button'
import { User } from '../../../context/User'
interface FaucetState {
isLoading: boolean
error?: string
}
export default class Faucet extends PureComponent<{}, FaucetState> {
public state = {
isLoading: false,
error: undefined
}
private getTokens = async (requestFromFaucet: any) => {
this.setState({ isLoading: true })
try {
await requestFromFaucet()
this.setState({ isLoading: false })
} catch (error) {
this.setState({ isLoading: false, error })
}
}
public render() {
return (
<User.Consumer>
{states =>
this.state.isLoading ? (
'Getting tokens...'
) : this.state.error ? (
this.state.error
) : (
<Button
link
onClick={() =>
this.getTokens(states.requestFromFaucet)
}
>
Make it rain
</Button>
)
}
</User.Consumer>
)
}
}

View File

@ -0,0 +1,34 @@
@import '../../../styles/variables';
.status {
display: inline-block;
position: relative;
cursor: pointer;
}
// default: red square
.statusIndicator {
width: $font-size-small;
height: $font-size-small;
display: block;
background: $red;
margin-bottom: -.1rem;
}
// yellow triangle
.statusIndicatorCloseEnough {
composes: statusIndicator;
background: none;
width: 0;
height: 0;
border-left: $font-size-small / 1.7 solid transparent;
border-right: $font-size-small / 1.7 solid transparent;
border-bottom: $font-size-small solid $yellow;
}
// green circle
.statusIndicatorActive {
composes: statusIndicator;
border-radius: 50%;
background: $green;
}

View File

@ -0,0 +1,32 @@
import React from 'react'
import cx from 'classnames'
import { User } from '../../../context/User'
import styles from './Indicator.module.scss'
const Indicator = ({
className,
showPopover
}: {
className?: string
showPopover: any
}) => (
<div
className={cx(styles.status, className)}
onClick={showPopover}
onMouseOver={showPopover}
>
<User.Consumer>
{states =>
!states.isWeb3 ? (
<span className={styles.statusIndicator} />
) : !states.isLogged ? (
<span className={styles.statusIndicatorCloseEnough} />
) : states.isLogged ? (
<span className={styles.statusIndicatorActive} />
) : null
}
</User.Consumer>
</div>
)
export default Indicator

View File

@ -1,37 +1,4 @@
@import '../../styles/variables';
.status {
display: inline-block;
position: relative;
cursor: pointer;
}
// default: red square
.statusIndicator {
width: $font-size-small;
height: $font-size-small;
display: block;
background: $red;
margin-bottom: -.1rem;
}
// yellow triangle
.statusIndicatorCloseEnough {
composes: statusIndicator;
background: none;
width: 0;
height: 0;
border-left: $font-size-small / 1.7 solid transparent;
border-right: $font-size-small / 1.7 solid transparent;
border-bottom: $font-size-small solid $yellow;
}
// green circle
.statusIndicatorActive {
composes: statusIndicator;
border-radius: 50%;
background: $green;
}
@import '../../../styles/variables';
$popoverWidth: 18rem;

View File

@ -0,0 +1,30 @@
import React from 'react'
import { User } from '../../../context/User'
import Faucet from './Faucet'
import styles from './Popover.module.scss'
const Popover = () => (
<div className={styles.popover}>
<div className={styles.accountName}>
<User.Consumer>
{states =>
states.account ? (
<span className={styles.address} title={states.account}>
{states.account}
</span>
) : (
<em>No account selected</em>
)
}
</User.Consumer>
</div>
<div className={styles.popoverInfoline}>
Network: &nbsp;<strong>{''}</strong>
</div>
<div className={styles.popoverInfoline}>
<Faucet />
</div>
</div>
)
export default Popover

View File

@ -0,0 +1,46 @@
import React, { PureComponent } from 'react'
import Popover from 'react-popover'
import AccountPopover from './Popover'
import AccountIndicator from './Indicator'
interface AccountStatusProps {
className?: string
}
interface AccountStatusState {
popoverIsOpen: boolean
}
export default class AccountStatus extends PureComponent<
AccountStatusProps,
AccountStatusState
> {
public state = {
popoverIsOpen: false
}
public togglePopover(toState?: boolean) {
const popoverIsOpen =
typeof toState === 'boolean' ? toState : !this.state.popoverIsOpen
this.setState({ popoverIsOpen })
}
public render() {
const popoverProps = {
isOpen: this.state.popoverIsOpen,
enterExitTransitionDurationMs: 300,
tipSize: 0.01,
onOuterAction: () => this.togglePopover(false),
body: <AccountPopover />
}
return (
<Popover {...popoverProps}>
<AccountIndicator
showPopover={() => this.togglePopover(true)}
className={this.props.className}
/>
</Popover>
)
}
}