handle wrong network use case

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.tsx

@@ -7,7 +7,7 @@ export default class Popover extends PureComponent<{
     style: React.CSSProperties
 }> {
     public render() {
-        const { account, balance, network, isWeb3 } = this.context
+        const { account, balance, network, isWeb3, isNile } = this.context
         return (
             <div
                 className={styles.popover}
@@ -37,20 +37,26 @@ export default class Popover extends PureComponent<{
                         to publish assets.
                     </div>
                 ) : (
+                    <>
                         <div className={styles.popoverInfoline}>
                             {account ? (
-                            <span className={styles.address} title={account}>
+                                <span
+                                    className={styles.address}
+                                    title={account}
+                                >
                                     {account}
                                 </span>
                             ) : (
                                 <em>No account selected</em>
                             )}
                         </div>
-                )}
-
                         <div className={styles.popoverInfoline}>
-                    {network && network}
+                            {network && !isNile
+                                ? 'Please connect to Custom RPC\n https://nile.dev-ocean.com'
+                                : network && `Connected to ${network} network`}
                         </div>
+                    </>
+                )}
             </div>
         )
     }

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