Merge branch 'master' into feature/search-tweaks

client/src/App.tsx

@@ -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({

client/src/components/atoms/Form/Input.tsx

@@ -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}
+                            selected={this.state.dateCreated}
-                            // TODO: this needs to be able to receive this.props.onChange too
                             onChange={this.handleDateChange}
                             className={styles.input}
                             onFocus={this.toggleFocus}

client/src/components/molecules/AccountStatus/Indicator.module.scss

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

client/src/components/molecules/AccountStatus/Indicator.tsx

@@ -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} />

client/src/components/molecules/AccountStatus/Popover.module.scss

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

client/src/components/molecules/AccountStatus/Popover.tsx

@@ -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 = ({
+export default class Popover extends PureComponent<{
-    forwardedRef,
-    style
-}: {
     forwardedRef: (ref: HTMLElement | null) => void
     style: React.CSSProperties
-}) => (
+}> {
-    <div className={styles.popover} ref={forwardedRef} style={style}>
+    public render() {
-        <User.Consumer>
+        const { account, balance, network, isWeb3, isNile } = this.context
-            {states =>
+        return (
-                states.account &&
+            <div
-                states.balance && (
+                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)
+                                {(balance.eth / 1e18).toFixed(3).slice(0, -1)}
-                                    .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>
+                        No Web3 detected. Use a browser with MetaMask installed
-                {states =>
+                        to publish assets.
-                    states.account ? (
+                    </div>
-                        <span className={styles.address} title={states.account}>
+                ) : (
-                            {states.account}
+                    <>
+                        <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}>
+Popover.contextType = User
-            <User.Consumer>
-                {states => states.network && states.network}
-            </User.Consumer>
-        </div>
-    </div>
-)
-
-export default Popover

client/src/components/organisms/AssetsUser.tsx

@@ -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 && (

client/src/components/organisms/Web3message.module.scss

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

client/src/components/organisms/Web3message.tsx

@@ -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>
+        )
+    }
 }

client/src/context/User.ts

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