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:
parent
b71649b0d0
commit
3d7746c46c
@ -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'
|
||||
|
@ -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'
|
||||
|
||||
|
@ -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: <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>
|
||||
)
|
||||
}
|
||||
}
|
49
src/components/molecules/AccountStatus/Faucet.tsx
Normal file
49
src/components/molecules/AccountStatus/Faucet.tsx
Normal 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>
|
||||
)
|
||||
}
|
||||
}
|
34
src/components/molecules/AccountStatus/Indicator.module.scss
Normal file
34
src/components/molecules/AccountStatus/Indicator.module.scss
Normal 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;
|
||||
}
|
32
src/components/molecules/AccountStatus/Indicator.tsx
Normal file
32
src/components/molecules/AccountStatus/Indicator.tsx
Normal 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
|
@ -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;
|
||||
|
30
src/components/molecules/AccountStatus/Popover.tsx
Normal file
30
src/components/molecules/AccountStatus/Popover.tsx
Normal 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: <strong>{''}</strong>
|
||||
</div>
|
||||
<div className={styles.popoverInfoline}>
|
||||
<Faucet />
|
||||
</div>
|
||||
</div>
|
||||
)
|
||||
|
||||
export default Popover
|
46
src/components/molecules/AccountStatus/index.tsx
Normal file
46
src/components/molecules/AccountStatus/index.tsx
Normal 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>
|
||||
)
|
||||
}
|
||||
}
|
Loading…
Reference in New Issue
Block a user