mirror of
https://github.com/oceanprotocol/commons.git
synced 2023-03-15 18:03:00 +01:00
consume & faucet tweaks for Web3 cases
This commit is contained in:
parent
6ac4440897
commit
4dcc6c831a
|
@ -9,6 +9,7 @@
|
||||||
border-top: .1rem solid $brand-grey-lighter;
|
border-top: .1rem solid $brand-grey-lighter;
|
||||||
padding-top: $spacer / 2;
|
padding-top: $spacer / 2;
|
||||||
padding-bottom: $spacer / 2;
|
padding-bottom: $spacer / 2;
|
||||||
|
text-align: left;
|
||||||
}
|
}
|
||||||
|
|
||||||
.account {
|
.account {
|
||||||
|
|
|
@ -5,6 +5,50 @@ import styles from './Web3message.module.scss'
|
||||||
import { User } from '../../context/User'
|
import { User } from '../../context/User'
|
||||||
|
|
||||||
export default class Web3message extends PureComponent {
|
export default class Web3message extends PureComponent {
|
||||||
|
private noWeb3 = () => (
|
||||||
|
<div className={styles.message}>
|
||||||
|
<AccountStatus className={styles.status} /> Not a Web3 Browser. For
|
||||||
|
publishing or downloading an asset you need to{' '}
|
||||||
|
<a
|
||||||
|
href="https://docs.oceanprotocol.com/tutorials/metamask-setup/"
|
||||||
|
target="_blank"
|
||||||
|
rel="noopener noreferrer"
|
||||||
|
>
|
||||||
|
setup MetaMask
|
||||||
|
</a>{' '}
|
||||||
|
or use any other Web3-capable plugin or browser.
|
||||||
|
</div>
|
||||||
|
)
|
||||||
|
|
||||||
|
private unlockAccount = (states: any) => (
|
||||||
|
<div className={styles.message}>
|
||||||
|
<AccountStatus className={styles.status} /> Account locked. For
|
||||||
|
publishing and downloading an asset you need to unlock your Web3
|
||||||
|
account.{' '}
|
||||||
|
<Button link onClick={states.startLogin}>
|
||||||
|
Unlock account
|
||||||
|
</Button>
|
||||||
|
</div>
|
||||||
|
)
|
||||||
|
|
||||||
|
private haveAccount = (account: string) => (
|
||||||
|
<div className={styles.message}>
|
||||||
|
<AccountStatus className={styles.status} /> Connected with account
|
||||||
|
<code className={styles.account} title={account && account}>
|
||||||
|
{`${account && account.substring(0, 20)}...`}
|
||||||
|
</code>
|
||||||
|
</div>
|
||||||
|
)
|
||||||
|
|
||||||
|
private wrongNetwork = (network: string) => (
|
||||||
|
<div className={styles.message}>
|
||||||
|
<AccountStatus className={styles.status} /> Not connected to Nile
|
||||||
|
network, but to {network}.<br />
|
||||||
|
Please connect in MetaMask with Custom RPC{' '}
|
||||||
|
<code>{`https://nile.dev-ocean.com`}</code>
|
||||||
|
</div>
|
||||||
|
)
|
||||||
|
|
||||||
public render() {
|
public render() {
|
||||||
return (
|
return (
|
||||||
<User.Consumer>
|
<User.Consumer>
|
||||||
|
@ -22,55 +66,4 @@ export default class Web3message extends PureComponent {
|
||||||
</User.Consumer>
|
</User.Consumer>
|
||||||
)
|
)
|
||||||
}
|
}
|
||||||
|
|
||||||
public noWeb3() {
|
|
||||||
return (
|
|
||||||
<div className={styles.message}>
|
|
||||||
<AccountStatus className={styles.status} /> Not a Web3 Browser.
|
|
||||||
For publishing or consuming an asset you need to{' '}
|
|
||||||
<a
|
|
||||||
href="https://docs.oceanprotocol.com/tutorials/metamask-setup/"
|
|
||||||
target="_blank"
|
|
||||||
>
|
|
||||||
setup MetaMask
|
|
||||||
</a>{' '}
|
|
||||||
or use any other Web3-capable plugin or browser.
|
|
||||||
</div>
|
|
||||||
)
|
|
||||||
}
|
|
||||||
|
|
||||||
public unlockAccount(states: any) {
|
|
||||||
return (
|
|
||||||
<div className={styles.message}>
|
|
||||||
<AccountStatus className={styles.status} /> Account locked. For
|
|
||||||
publishing an asset you need to unlock your Web3 account.{' '}
|
|
||||||
<Button link onClick={states.startLogin}>
|
|
||||||
Unlock account
|
|
||||||
</Button>
|
|
||||||
</div>
|
|
||||||
)
|
|
||||||
}
|
|
||||||
|
|
||||||
public haveAccount(account: string) {
|
|
||||||
return (
|
|
||||||
<div className={styles.message}>
|
|
||||||
<AccountStatus className={styles.status} /> Connected with
|
|
||||||
account
|
|
||||||
<code className={styles.account} title={account && account}>
|
|
||||||
{`${account && account.substring(0, 20)}...`}
|
|
||||||
</code>
|
|
||||||
</div>
|
|
||||||
)
|
|
||||||
}
|
|
||||||
|
|
||||||
public wrongNetwork(network: string) {
|
|
||||||
return (
|
|
||||||
<div className={styles.message}>
|
|
||||||
<AccountStatus className={styles.status} /> Not connected to
|
|
||||||
Nile network, but to {network}.<br />
|
|
||||||
Please connect in MetaMask with Custom RPC{' '}
|
|
||||||
<code>{`https://nile.dev-ocean.com`}</code>
|
|
||||||
</div>
|
|
||||||
)
|
|
||||||
}
|
|
||||||
}
|
}
|
||||||
|
|
|
@ -76,7 +76,7 @@ export default class AssetFile extends PureComponent<
|
||||||
public render() {
|
public render() {
|
||||||
const { ddo, file } = this.props
|
const { ddo, file } = this.props
|
||||||
const { isLoading, message, error } = this.state
|
const { isLoading, message, error } = this.state
|
||||||
const { isLogged, startLogin } = this.context
|
const { isLogged } = this.context
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<div className={styles.fileWrap}>
|
<div className={styles.fileWrap}>
|
||||||
|
@ -97,11 +97,7 @@ export default class AssetFile extends PureComponent<
|
||||||
<Button
|
<Button
|
||||||
primary
|
primary
|
||||||
className={styles.buttonMain}
|
className={styles.buttonMain}
|
||||||
onClick={
|
onClick={() => this.purchaseAsset(ddo, file.index)}
|
||||||
isLogged
|
|
||||||
? () => this.purchaseAsset(ddo, file.index)
|
|
||||||
: startLogin
|
|
||||||
}
|
|
||||||
disabled={!isLogged}
|
disabled={!isLogged}
|
||||||
>
|
>
|
||||||
Get file
|
Get file
|
||||||
|
|
|
@ -36,53 +36,13 @@ export default class Faucet extends PureComponent<{}, FaucetState> {
|
||||||
|
|
||||||
this.setState({
|
this.setState({
|
||||||
isLoading: false,
|
isLoading: false,
|
||||||
success: `Successfully added ETH to your account.`
|
success: 'Successfully added ETH to your account.'
|
||||||
})
|
})
|
||||||
} catch (error) {
|
} catch (error) {
|
||||||
this.setState({ isLoading: false, error })
|
this.setState({ isLoading: false, error })
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
private RequestMarkup = () => (
|
|
||||||
<User.Consumer>
|
|
||||||
{states =>
|
|
||||||
states.isLogged ? (
|
|
||||||
<Button
|
|
||||||
primary
|
|
||||||
onClick={() => this.getTokens(states.requestFromFaucet)}
|
|
||||||
>
|
|
||||||
Request Ether
|
|
||||||
</Button>
|
|
||||||
) : states.isWeb3 ? (
|
|
||||||
<Web3message />
|
|
||||||
) : (
|
|
||||||
<Web3message />
|
|
||||||
)
|
|
||||||
}
|
|
||||||
</User.Consumer>
|
|
||||||
)
|
|
||||||
|
|
||||||
private ActionMarkup = () => (
|
|
||||||
<div className={styles.action}>
|
|
||||||
{this.state.isLoading ? (
|
|
||||||
<Spinner message="Getting Ether..." />
|
|
||||||
) : this.state.error ? (
|
|
||||||
<div className={styles.error}>
|
|
||||||
<p>{this.state.error}</p>
|
|
||||||
<Button onClick={this.reset}>Try again</Button>
|
|
||||||
</div>
|
|
||||||
) : this.state.success ? (
|
|
||||||
<div className={styles.success}>{this.state.success}</div>
|
|
||||||
) : (
|
|
||||||
<this.RequestMarkup />
|
|
||||||
)}
|
|
||||||
|
|
||||||
<p>
|
|
||||||
You can only request Ether once every 24 hours for your address.
|
|
||||||
</p>
|
|
||||||
</div>
|
|
||||||
)
|
|
||||||
|
|
||||||
private reset = () => {
|
private reset = () => {
|
||||||
this.setState({
|
this.setState({
|
||||||
error: undefined,
|
error: undefined,
|
||||||
|
@ -91,18 +51,57 @@ export default class Faucet extends PureComponent<{}, FaucetState> {
|
||||||
})
|
})
|
||||||
}
|
}
|
||||||
|
|
||||||
|
private Success = () => (
|
||||||
|
<div className={styles.success}>{this.state.success}</div>
|
||||||
|
)
|
||||||
|
|
||||||
|
private Error = () => (
|
||||||
|
<div className={styles.error}>
|
||||||
|
<p>{this.state.error}</p>
|
||||||
|
<Button onClick={() => this.reset()}>Try again</Button>
|
||||||
|
</div>
|
||||||
|
)
|
||||||
|
|
||||||
|
private Action = () => (
|
||||||
|
<>
|
||||||
|
<Button
|
||||||
|
primary
|
||||||
|
onClick={() => this.getTokens(this.context.requestFromFaucet)}
|
||||||
|
disabled={!this.context.isLogged}
|
||||||
|
>
|
||||||
|
Request Ether
|
||||||
|
</Button>
|
||||||
|
<p>
|
||||||
|
You can only request Ether once every 24 hours for your address.
|
||||||
|
</p>
|
||||||
|
</>
|
||||||
|
)
|
||||||
|
|
||||||
public render() {
|
public render() {
|
||||||
|
const { isWeb3 } = this.context
|
||||||
|
const { isLoading, error, success } = this.state
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<Route
|
<Route
|
||||||
title="Faucet"
|
title="Faucet"
|
||||||
description="Shower yourself with some Ether for the Ocean POA network."
|
description="Shower yourself with some Ether for Ocean's Nile test network."
|
||||||
>
|
>
|
||||||
<User.Consumer>
|
<Web3message />
|
||||||
{states => !states.isNile && <Web3message />}
|
|
||||||
</User.Consumer>
|
|
||||||
|
|
||||||
<this.ActionMarkup />
|
<div className={styles.action}>
|
||||||
|
{isLoading ? (
|
||||||
|
<Spinner message="Getting Ether..." />
|
||||||
|
) : error ? (
|
||||||
|
<this.Error />
|
||||||
|
) : success ? (
|
||||||
|
<this.Success />
|
||||||
|
) : (
|
||||||
|
isWeb3 && <this.Action />
|
||||||
|
)}
|
||||||
|
</div>
|
||||||
</Route>
|
</Route>
|
||||||
)
|
)
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
Faucet.contextType = User
|
||||||
|
|
Loading…
Reference in New Issue
Block a user