Merge pull request #69 from oceanprotocol/feature/account-tweaks

Account popover 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/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 = ({
-    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>
+                )}
 
-        <div className={styles.popoverInfoline}>
-            <User.Consumer>
-                {states =>
-                    states.account ? (
-                        <span className={styles.address} title={states.account}>
-                            {states.account}
-                        </span>
-                    ) : (
-                        <em>No account selected</em>
-                    )
-                }
-            </User.Consumer>
-        </div>
+                {!isWeb3 ? (
+                    <div className={styles.popoverInfoline}>
+                        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>
+        )
+    }
+}
 
-        <div className={styles.popoverInfoline}>
-            <User.Consumer>
-                {states => states.network && states.network}
-            </User.Consumer>
-        </div>
-    </div>
-)
-
-export default Popover
+Popover.contextType = User

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: {},