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

consume & faucet tweaks for Web3 cases

Browse Source
This commit is contained in:
Matthias Kretschmann 2019-04-08 20:21:29 +02:00
parent 6ac4440897
commit 4dcc6c831a
Signed by: m
GPG Key ID: 606EEEF3C479A91F
4 changed files with 92 additions and 103 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1
client/src/components/organisms/Web3message.module.scss
View File

@ -9,6 +9,7 @@
border-top: .1rem solid $brand-grey-lighter;
padding-top: $spacer / 2;
padding-bottom: $spacer / 2;
text-align: left;
}
.account {

95
client/src/components/organisms/Web3message.tsx
View File

@ -5,6 +5,50 @@ import styles from './Web3message.module.scss'
import { User } from '../../context/User'
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() {
return (
<User.Consumer>
@ -22,55 +66,4 @@ export default class Web3message extends PureComponent {
</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>
)
}
}

8
client/src/routes/Details/AssetFile.tsx
View File

@ -76,7 +76,7 @@ export default class AssetFile extends PureComponent<
public render() {
const { ddo, file } = this.props
const { isLoading, message, error } = this.state
const { isLogged, startLogin } = this.context
const { isLogged } = this.context
return (
<div className={styles.fileWrap}>
@ -97,11 +97,7 @@ export default class AssetFile extends PureComponent<
<Button
primary
className={styles.buttonMain}
onClick={
isLogged
? () => this.purchaseAsset(ddo, file.index)
: startLogin
}
onClick={() => this.purchaseAsset(ddo, file.index)}
disabled={!isLogged}
>
Get file

91
client/src/routes/Faucet.tsx
View File

@ -36,53 +36,13 @@ export default class Faucet extends PureComponent<{}, FaucetState> {
this.setState({
isLoading: false,
success: `Successfully added ETH to your account.`
success: 'Successfully added ETH to your account.'
})
} catch (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 = () => {
this.setState({
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() {
const { isWeb3 } = this.context
const { isLoading, error, success } = this.state
return (
<Route
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>
{states => !states.isNile && <Web3message />}
</User.Consumer>
<Web3message />
<this.ActionMarkup />
<div className={styles.action}>
{isLoading ? (
<Spinner message="Getting Ether..." />
) : error ? (
<this.Error />
) : success ? (
<this.Success />
) : (
isWeb3 && <this.Action />
)}
</div>
</Route>
)
}
}
Faucet.contextType = User