Fix light.setApi race condition

packages/fether-react/src/App/App.js

@@ -28,7 +28,7 @@ const Router =
   process.env.NODE_ENV === 'production' ? MemoryRouter : BrowserRouter;
 const electron = isElectron() ? window.require('electron') : null;
 
-@inject('onboardingStore')
+@inject('onboardingStore', 'parityStore')
 @observer
 class App extends Component {
   handleResize = (_, height) => {
@@ -44,9 +44,19 @@ class App extends Component {
    */
   render () {
     const {
-      onboardingStore: { isFirstRun }
+      onboardingStore: { isFirstRun },
+      parityStore: { api }
     } = this.props;
 
+    // The child components make use of light.js and light.js needs to be passed
+    // an API first, otherwise it will throw an error.
+    // We set parityStore.api right after we set the API for light.js, so we
+    // verify here that parityStore.api is defined, and if not we don't render
+    // the children.
+    if (!api) {
+      return null;
+    }
+
     if (isFirstRun) {
       return (
         <div className='window'>
@@ -59,7 +69,6 @@ class App extends Component {
       <ReactResizeDetector handleHeight onResize={this.handleResize}>
         <div className='content'>
           <div className='window'>
-            {/* Don't display child components requiring RPCs if API is not yet set */}
             <Router>
               <Switch>
                 {/* The next line is the homepage */}

packages/fether-react/src/stores/parityStore.js

@@ -35,6 +35,9 @@ export class ParityStore {
   @observable
   token = null;
 
+  @observable
+  api = undefined;
+
   constructor () {
     // Retrieve token from localStorage
     const token = store.get(LS_KEY);