mirror of
https://github.com/oceanprotocol/commons.git
synced 2023-03-15 18:03:00 +01:00
put faucet onto its own page
This commit is contained in:
parent
5c2821565e
commit
dbd765124a
|
@ -7,6 +7,7 @@ import Home from './routes/Home'
|
||||||
import NotFound from './routes/NotFound'
|
import NotFound from './routes/NotFound'
|
||||||
import Publish from './routes/Publish/'
|
import Publish from './routes/Publish/'
|
||||||
import Search from './routes/Search'
|
import Search from './routes/Search'
|
||||||
|
import Faucet from './routes/Faucet'
|
||||||
import Styleguide from './routes/Styleguide'
|
import Styleguide from './routes/Styleguide'
|
||||||
|
|
||||||
const Routes = () => (
|
const Routes = () => (
|
||||||
|
@ -17,6 +18,7 @@ const Routes = () => (
|
||||||
<Route component={Publish} path="/publish" />
|
<Route component={Publish} path="/publish" />
|
||||||
<Route component={Search} path="/search" />
|
<Route component={Search} path="/search" />
|
||||||
<Route component={Details} path="/asset/:did" />
|
<Route component={Details} path="/asset/:did" />
|
||||||
|
<Route component={Faucet} path="/faucet" />
|
||||||
<Route component={NotFound} />
|
<Route component={NotFound} />
|
||||||
</Switch>
|
</Switch>
|
||||||
)
|
)
|
||||||
|
|
|
@ -1,60 +0,0 @@
|
||||||
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<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, success: 'Tokens added!' })
|
|
||||||
} catch (error) {
|
|
||||||
this.setState({ isLoading: false, error })
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
public render() {
|
|
||||||
return (
|
|
||||||
<User.Consumer>
|
|
||||||
{states =>
|
|
||||||
this.state.isLoading ? (
|
|
||||||
'Getting tokens...'
|
|
||||||
) : this.state.error ? (
|
|
||||||
this.state.error
|
|
||||||
) : this.state.success ? (
|
|
||||||
this.state.success
|
|
||||||
) : (
|
|
||||||
<Button
|
|
||||||
link
|
|
||||||
onClick={() =>
|
|
||||||
this.getTokens(states.requestFromFaucet)
|
|
||||||
}
|
|
||||||
>
|
|
||||||
Request Ether
|
|
||||||
</Button>
|
|
||||||
)
|
|
||||||
}
|
|
||||||
</User.Consumer>
|
|
||||||
)
|
|
||||||
}
|
|
||||||
}
|
|
|
@ -8,7 +8,7 @@ const Indicator = ({
|
||||||
togglePopover
|
togglePopover
|
||||||
}: {
|
}: {
|
||||||
className?: string
|
className?: string
|
||||||
togglePopover: any
|
togglePopover: () => void
|
||||||
}) => (
|
}) => (
|
||||||
<div
|
<div
|
||||||
className={cx(styles.status, className)}
|
className={cx(styles.status, className)}
|
||||||
|
|
|
@ -1,9 +1,9 @@
|
||||||
import React from 'react'
|
import React from 'react'
|
||||||
|
import { Link } from 'react-router-dom'
|
||||||
import { User } from '../../../context/User'
|
import { User } from '../../../context/User'
|
||||||
import Faucet from './Faucet'
|
|
||||||
import styles from './Popover.module.scss'
|
import styles from './Popover.module.scss'
|
||||||
|
|
||||||
const Popover = ({ togglePopover }: { togglePopover: any }) => (
|
const Popover = ({ togglePopover }: { togglePopover: () => void }) => (
|
||||||
<div
|
<div
|
||||||
className={styles.popover}
|
className={styles.popover}
|
||||||
onMouseOver={togglePopover}
|
onMouseOver={togglePopover}
|
||||||
|
@ -23,7 +23,7 @@ const Popover = ({ togglePopover }: { togglePopover: any }) => (
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div className={styles.popoverInfoline}>
|
<div className={styles.popoverInfoline}>
|
||||||
<Faucet togglePopover={togglePopover} />
|
<Link to={'/faucet'}>Request Ether</Link>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div className={styles.popoverInfoline}>
|
<div className={styles.popoverInfoline}>
|
||||||
|
|
|
@ -3,6 +3,10 @@
|
||||||
"title": "Publish",
|
"title": "Publish",
|
||||||
"link": "/publish"
|
"link": "/publish"
|
||||||
},
|
},
|
||||||
|
{
|
||||||
|
"title": "Faucet",
|
||||||
|
"link": "/faucet"
|
||||||
|
},
|
||||||
{
|
{
|
||||||
"title": "About",
|
"title": "About",
|
||||||
"link": "/about"
|
"link": "/about"
|
||||||
|
|
2
src/routes/Faucet.module.scss
Normal file
2
src/routes/Faucet.module.scss
Normal file
|
@ -0,0 +1,2 @@
|
||||||
|
@import '../styles/variables';
|
||||||
|
|
65
src/routes/Faucet.tsx
Normal file
65
src/routes/Faucet.tsx
Normal file
|
@ -0,0 +1,65 @@
|
||||||
|
import React, { PureComponent } from 'react'
|
||||||
|
import Route from '../components/templates/Route'
|
||||||
|
import Button from '../components/atoms/Button'
|
||||||
|
import { User } from '../context/User'
|
||||||
|
import Web3message from '../components/molecules/Web3message'
|
||||||
|
import styles from './Faucet.module.scss'
|
||||||
|
|
||||||
|
interface FaucetState {
|
||||||
|
isLoading: boolean
|
||||||
|
success?: string
|
||||||
|
error?: string
|
||||||
|
}
|
||||||
|
|
||||||
|
class Faucet extends PureComponent<{}, FaucetState> {
|
||||||
|
public state = {
|
||||||
|
isLoading: false,
|
||||||
|
success: undefined,
|
||||||
|
error: undefined
|
||||||
|
}
|
||||||
|
|
||||||
|
private getTokens = async (requestFromFaucet: () => void) => {
|
||||||
|
this.setState({ isLoading: true })
|
||||||
|
|
||||||
|
try {
|
||||||
|
await requestFromFaucet()
|
||||||
|
this.setState({ isLoading: false, success: 'Tokens added!' })
|
||||||
|
} catch (error) {
|
||||||
|
this.setState({ isLoading: false, error })
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
public render() {
|
||||||
|
return (
|
||||||
|
<Route
|
||||||
|
title="Faucet"
|
||||||
|
description="Shower yourself with some Ether."
|
||||||
|
>
|
||||||
|
<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>
|
||||||
|
</Route>
|
||||||
|
)
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
export default Faucet
|
Loading…
Reference in New Issue
Block a user