Merge pull request #265 from Outblock:260-bug-async-issue-with-privat…

…eroute

refactor: enhance PrivateRoute component with async wallet state checks

src/ui/component/PrivateRoute.tsx

@@ -1,29 +1,50 @@
-import React, { useEffect } from 'react';
-import { useHistory } from 'react-router-dom';
+import React, { useEffect, useState } from 'react';
 import { Route, Redirect } from 'react-router-dom';
+
 import { useWallet } from 'ui/utils';
 
 const PrivateRoute = ({ children, ...rest }) => {
   const wallet = useWallet();
-  const history = useHistory();
+  const [booted, setBooted] = useState(false);
+  const [unlocked, setUnlocked] = useState(false);
+  const [loading, setLoading] = useState(true);
+
+  // Everything through the wallet controller is async, so we need to check if the wallet is booted and unlocked in a useEffect
+  useEffect(() => {
+    let mounted = true;
+
+    const fetchLockState = async () => {
+      const booted = await wallet.isBooted();
+
+      if (!booted) {
+        return { booted, unlocked: false };
+      } else {
+        const unlocked = await wallet.isUnlocked();
+        return { booted, unlocked };
+      }
+    };
 
-  // useEffect(() => {
-  //   getLockState()
-  // }, []);
+    fetchLockState().then(({ booted, unlocked }) => {
+      if (mounted) {
+        setBooted(booted);
+        setUnlocked(unlocked);
+        setLoading(false);
+      }
+    });
 
-  // const getLockState = async () => {
-  //   const unlocked = await wallet.isUnlocked();
-  //   if (!unlocked) {
-  //     console.log('getLockState ==>', unlocked, children, rest.path);
-  //     history.push('/unlock');
-  //   }
-  // };
+    return () => {
+      mounted = false;
+    };
+  }, [wallet]);
 
   return (
     <Route
       {...rest}
       render={() => {
-        const to = !wallet.isBooted() ? '/welcome' : !wallet.isUnlocked() ? '/unlock' : null;
+        if (loading) {
+          return null;
+        }
+        const to = !booted ? '/welcome' : !unlocked ? '/unlock' : null;
         return !to ? children : <Redirect to={to} />;
       }}
     />