Network-aware LoadingContainer

packages/react-components/README.md

@@ -12,10 +12,10 @@ For 1.x.x this is how you import the different components:
 
 ```
 import { newContextComponents } from "@drizzle/react-components";
-const { AccountData, ContractData, ContractForm } = newContextComponents;
+const { AccountData, ContractData, ContractForm, LoadingContainer } = newContextComponents;
 ```
 
-`LoadingContainer` is not provided with the new context components currently. Also note that you must pass in `drizzle` and `drizzleState` for each of these components.
+Note that you must pass in `drizzle` and `drizzleState` for each of these components.
 
 ### Legacy Context Components
 
@@ -30,14 +30,16 @@ import {
 
 Refer to the included [test apps](#test-apps) for usage examples.
 
-### LoadingContainer (Legacy only)
+### LoadingContainer
 
-This component wraps your entire app (but within the DrizzleProvider) and will show a loading screen until Drizzle, and therefore web3 and your contracts, are initialized.
+This component wraps your entire app (but within the DrizzleProvider) and will show a loading screen until Drizzle, and therefore web3 and your contracts, are initialized. If using `networkWhitelist` in your `drizzleOptions`, it will also detect if the provider is connected to a non-whitelisted network and display a warning message.
 
 `loadingComp` (component) The component displayed while Drizzle initializes.
 
 `errorComp` (component) The component displayed if Drizzle initialization fails.
 
+`networkMismatchComp` (component) The component displayed if the provider is connected to a non-whitelisted network.
+
 ### AccountData
 
 `accountIndex` (number, required) Index of account from which to retrieve balance.

packages/react-components/src/LoadingContainer.js

@@ -29,6 +29,23 @@ class LoadingContainer extends Component {
       );
     }
 
+    if (this.props.web3.networkMismatch) {
+      if (this.props.networkMismatchComp) {
+        return this.props.networkMismatchComp;
+      }
+
+      return (
+        <main className="container network-warning">
+          <div className="pure-g">
+            <div className="pure-u-1-1">
+              <h1>⚠️</h1>
+              <p>This dapp does not support this network.</p>
+            </div>
+          </div>
+        </main>
+      );
+    }
+
     if (
       this.props.web3.status === "initialized" &&
       Object.keys(this.props.accounts).length === 0
@@ -81,6 +98,7 @@ LoadingContainer.propTypes = {
   web3: PropTypes.object.isRequired,
   loadingComp: PropTypes.node,
   errorComp: PropTypes.node,
+  networkMismatchComp: PropTypes.node,
 };
 
 /*

packages/react-components/src/index.js

@@ -5,11 +5,13 @@ import LoadingContainer from "./LoadingContainer.js";
 import AccountDataNew from "./new-context-api/AccountData";
 import ContractDataNew from "./new-context-api/ContractData";
 import ContractFormNew from "./new-context-api/ContractForm";
+import LoadingContainerNew from "./new-context-api/LoadingContainer";
 
 const newContextComponents = {
   AccountData: AccountDataNew,
   ContractData: ContractDataNew,
   ContractForm: ContractFormNew,
+  LoadingContainer: LoadingContainerNew,
 };
 
 export {

packages/react-components/src/new-context-api/LoadingContainer.js

@@ -0,0 +1,99 @@
+import React, { Children, Component } from "react";
+import PropTypes from "prop-types";
+
+/*
+ * Create component.
+ */
+
+class LoadingContainer extends Component {
+  render() {
+    if (this.props.drizzleState) {
+      if (this.props.drizzleState.web3.status === "failed") {
+        if (this.props.errorComp) {
+          return this.props.errorComp;
+        }
+
+        return (
+          <main className="container loading-screen">
+            <div className="pure-g">
+              <div className="pure-u-1-1">
+                <h1>⚠️</h1>
+                <p>
+                  This browser has no connection to the Ethereum network. Please
+                  use the Chrome/FireFox extension MetaMask, or dedicated
+                  Ethereum browsers Mist or Parity.
+                </p>
+              </div>
+            </div>
+          </main>
+        );
+      }
+
+      if (this.props.drizzleState.web3.networkMismatch) {
+        if (this.props.networkMismatchComp) {
+          return this.props.networkMismatchComp;
+        }
+
+        return (
+          <main className="container network-warning">
+            <div className="pure-g">
+              <div className="pure-u-1-1">
+                <h1>⚠️</h1>
+                <p>This dapp does not support this network.</p>
+              </div>
+            </div>
+          </main>
+        );
+      }
+
+      if (
+        this.props.drizzleState.web3.status === "initialized" &&
+        Object.keys(this.props.drizzleState.accounts).length === 0
+      ) {
+        return (
+          <main className="container loading-screen">
+            <div className="pure-g">
+              <div className="pure-u-1-1">
+                <h1>🦊</h1>
+                <p>
+                  <strong>{"We can't find any Ethereum accounts!"}</strong>{" "}
+                  Please check and make sure Metamask or your browser are
+                  pointed at the correct network and your account is unlocked.
+                </p>
+              </div>
+            </div>
+          </main>
+        );
+      }
+
+      if (this.props.drizzleState.drizzleStatus.initialized) {
+        return Children.only(this.props.children);
+      }
+    }
+
+    if (this.props.loadingComp) {
+      return this.props.loadingComp;
+    }
+
+    return (
+      <main className="container loading-screen">
+        <div className="pure-g">
+          <div className="pure-u-1-1">
+            <h1>⚙️</h1>
+            <p>Loading dapp...</p>
+          </div>
+        </div>
+      </main>
+    );
+  }
+}
+
+LoadingContainer.propTypes = {
+  drizzleState: PropTypes.object,
+  children: PropTypes.node,
+  loadingComp: PropTypes.node,
+  errorComp: PropTypes.node,
+  networkMismatchComp: PropTypes.node,
+};
+
+export default LoadingContainer;

ui-tests/react-context/src/App.js

@@ -1,19 +1,30 @@
 import React, { Component } from "react";
 import { Drizzle } from '@drizzle/store';
 import { DrizzleContext } from "@drizzle/react-plugin";
+import { newContextComponents } from "@drizzle/react-components";
 
 import "./App.css";
 
 import drizzleOptions from "./drizzleOptions";
 import MyComponent from "./MyComponent";
 
 const drizzle = new Drizzle(drizzleOptions);
+const { LoadingContainer } = newContextComponents;
 
 class App extends Component {
   render() {
     return (
       <DrizzleContext.Provider drizzle={drizzle}>
-        <MyComponent />
+        <DrizzleContext.Consumer>
+          {drizzleContext =>
+            <LoadingContainer drizzleState={drizzleContext.drizzleState}>
+              <MyComponent
+                drizzle={drizzleContext.drizzle}
+                drizzleState={drizzleContext.drizzleState}
+              />
+            </LoadingContainer>
+          }
+        </DrizzleContext.Consumer>
       </DrizzleContext.Provider>
     );
   }