Merge pull request #3 from cryptomental/feature/handle-metamask-missi…

…ng-or-locked CreateNewPage/index: Display error message if Metamask not installed …
MyBitFoundation · Nov 28, 2018 · 3cb1903 · 3cb1903
2 parents 88c53a7 + b32d8f2
commit 3cb1903
Showing 1 changed file with 58 additions and 12 deletions.
diff --git a/app/containers/CreateNewPage/index.js b/app/containers/CreateNewPage/index.js
@@ -49,15 +49,58 @@ export default class CreateNewPage extends React.Component {
       shouldConfirm: false,
       isLoading: false,
       acceptedToS: false,
-    }
+      metamaskInstalled: false,
+      metamaskUnlocked: false
+    };
     this.details = [];
+    this.handleMetamask = this.handleMetamask.bind(this);
     this.handleConfirm = this.handleConfirm.bind(this);
     this.handleBack = this.handleBack.bind(this);
     this.handleClose = this.handleClose.bind(this);
     this.handleAlertClosed = this.handleAlertClosed.bind(this);
     this.handleTermsAndConditionsClicked = this.handleTermsAndConditionsClicked.bind(this);
   }
 
+  async componentDidMount() {
+    this.handleMetamask();
+  }
+
+  handleMetamask() {
+    if (!Web3.currentProvider.isMetaMask) {
+      this.setState({
+        metamaskInstalled: false,
+        alertType: "error",
+        alertMessage: "Please install Metamask!"
+      });
+    } else {
+      this.setState({ metamaskInstalled: true });
+      setTimeout(() => {
+        Web3.eth.getAccounts((err, accounts) => {
+          if (err || accounts.length == 0) {
+            this.setState({
+              metamaskUnlocked: false,
+              alertType: "error",
+              alertMessage: "Please unlock Metamask!"
+            });
+          } else {
+            this.setState({ metamaskUnlocked: true });
+          }
+        });
+      }, 1000);
+    }
+
+    window.web3.currentProvider.publicConfigStore.on("update", data => {
+      console.log(data);
+      if (
+        (!data["selectedAddress"] && this.state.metamaskUnlocked) ||  // user locked Metamask
+        (data["selectedAddress"] &&
+          data["selectedAddress"].toUpperCase() !==
+            this.props.user.userName.toUpperCase())  // user changed account
+      )
+        window.location.reload();
+    });
+  }
+
   handleClose(){
     this.setState({
       shouldConfirm: false,
@@ -160,18 +203,21 @@ export default class CreateNewPage extends React.Component {
 
   render() {
     let toRender = [];
-    if(this.props.loading){
-      return <LoadingIndicator />
-    }
 
-    toRender.push(
-      <ConnectionStatus
-        network={this.props.network}
-        constants={Constants}
-        key={"connection status"}
-        loading={this.props.loadingNetwork}
-      />
-    )
+    if (this.state.metamaskInstalled && this.state.metamaskUnlocked) {
+		if(this.props.loading){
+		  return <LoadingIndicator />
+		}
+
+		toRender.push(
+		  <ConnectionStatus
+			network={this.props.network}
+			constants={Constants}
+			key={"connection status"}
+			loading={this.props.loadingNetwork}
+		  />
+		)
+	}
 
     const content = (
       <div key="content">