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

Merge branch 'master' into feature/search-tweaks

This commit is contained in:
Matthias Kretschmann 2019-04-05 17:16:06 +02:00 committed by GitHub
commit e81e2c866b
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
10 changed files with 81 additions and 48 deletions

View File

@ -31,6 +31,7 @@ interface AppState {
isLogged: boolean
isLoading: boolean
isWeb3: boolean
isNile: boolean
account: string
balance: {
eth: number
@ -82,6 +83,7 @@ class App extends Component<{}, AppState> {
isLogged: false,
isLoading: true,
isWeb3: false,
isNile: false,
balance: {
eth: 0,
ocn: 0
@ -167,7 +169,8 @@ class App extends Component<{}, AppState> {
const accounts = await ocean.accounts.list()
const balance = await accounts[0].getBalance()
const network = await ocean.keeper.getNetworkName()
this.setState({ balance, network })
const isNile = network === 'Nile'
this.setState({ balance, network, isNile })
} catch (e) {
Logger.log('ocean/balance error', e)
this.setState({

View File

@ -35,13 +35,13 @@ interface InputProps {
interface InputState {
isFocused: boolean
startDate?: Date
dateCreated?: Date
}
export default class Input extends PureComponent<InputProps, InputState> {
public state: InputState = {
isFocused: false,
startDate: new Date()
dateCreated: new Date()
}
public inputWrapClasses() {
@ -62,8 +62,15 @@ export default class Input extends PureComponent<InputProps, InputState> {
private handleDateChange = (date: Date) => {
this.setState({
startDate: date
dateCreated: date
})
const event = {
currentTarget: {
name: 'dateCreated',
value: date
}
}
this.props.onChange!(event as any)
}
public InputComponent = () => {
@ -151,8 +158,7 @@ export default class Input extends PureComponent<InputProps, InputState> {
return (
<div className={wrapClass}>
<DatePicker
selected={this.state.startDate}
// TODO: this needs to be able to receive this.props.onChange too
selected={this.state.dateCreated}
onChange={this.handleDateChange}
className={styles.input}
onFocus={this.toggleFocus}

View File

@ -4,6 +4,7 @@
display: inline-block;
position: relative;
cursor: help;
padding: .5rem;
}
// default: red square

View File

@ -22,7 +22,7 @@ const Indicator = ({
{states =>
!states.isWeb3 ? (
<span className={styles.statusIndicator} />
) : !states.isLogged ? (
) : !states.isLogged || !states.isNile ? (
<span className={styles.statusIndicatorCloseEnough} />
) : states.isLogged ? (
<span className={styles.statusIndicatorActive} />

View File

@ -49,6 +49,7 @@ $popoverWidth: 18rem;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
font-family: $font-family-monospace;
}
.balance {

View File

@ -1,59 +1,65 @@
import React from 'react'
import React, { PureComponent } from 'react'
import { User } from '../../../context/User'
import styles from './Popover.module.scss'
const Popover = ({
forwardedRef,
style
}: {
export default class Popover extends PureComponent<{
forwardedRef: (ref: HTMLElement | null) => void
style: React.CSSProperties
}) => (
<div className={styles.popover} ref={forwardedRef} style={style}>
<User.Consumer>
{states =>
states.account &&
states.balance && (
}> {
public render() {
const { account, balance, network, isWeb3, isNile } = this.context
return (
<div
className={styles.popover}
ref={this.props.forwardedRef}
style={this.props.style}
>
{account && balance && (
<div className={styles.popoverInfoline}>
<span
className={styles.balance}
title={(states.balance.eth / 1e18).toFixed(10)}
title={(balance.eth / 1e18).toFixed(10)}
>
<strong>
{(states.balance.eth / 1e18)
.toFixed(3)
.slice(0, -1)}
{(balance.eth / 1e18).toFixed(3).slice(0, -1)}
</strong>{' '}
ETH
</span>
<span className={styles.balance}>
<strong>{states.balance.ocn}</strong> OCEAN
<strong>{balance.ocn}</strong> OCEAN
</span>
</div>
)
}
</User.Consumer>
)}
{!isWeb3 ? (
<div className={styles.popoverInfoline}>
<User.Consumer>
{states =>
states.account ? (
<span className={styles.address} title={states.account}>
{states.account}
No Web3 detected. Use a browser with MetaMask installed
to publish assets.
</div>
) : (
<>
<div className={styles.popoverInfoline}>
{account ? (
<span
className={styles.address}
title={account}
>
{account}
</span>
) : (
<em>No account selected</em>
)}
</div>
<div className={styles.popoverInfoline}>
{network && !isNile
? 'Please connect to Custom RPC\n https://nile.dev-ocean.com'
: network && `Connected to ${network} network`}
</div>
</>
)}
</div>
)
}
</User.Consumer>
</div>
}
<div className={styles.popoverInfoline}>
<User.Consumer>
{states => states.network && states.network}
</User.Consumer>
</div>
</div>
)
export default Popover
Popover.contextType = User

View File

@ -48,6 +48,7 @@ export default class AssetsUser extends PureComponent<
public render() {
return (
this.context.isNile &&
this.context.account && (
<div className={styles.assetsUser}>
{this.props.recent && (

View File

@ -20,4 +20,5 @@
.status {
margin-left: -($spacer);
margin-right: $spacer / 3;
padding: 0;
}

View File

@ -11,6 +11,8 @@ export default class Web3message extends PureComponent {
{states =>
!states.isWeb3
? this.noWeb3()
: !states.isNile
? this.wrongNetwork(states.network)
: !states.isLogged
? this.unlockAccount(states)
: states.isLogged
@ -57,4 +59,15 @@ export default class Web3message extends PureComponent {
</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>
)
}
}

View File

@ -4,6 +4,7 @@ export const User = React.createContext({
isLogged: false,
isLoading: false,
isWeb3: false,
isNile: false,
account: '',
web3: {},
ocean: {},