Split views into own section

js/src/util/dapps.js

@@ -25,7 +25,13 @@ import { hashToImageUrl } from '~/redux/util';
 import builtinJson from '~/config/dappsBuiltin.json';
 import viewsJson from '~/config/dappsViews.json';
 
-const builtinApps = [].concat(viewsJson, builtinJson).filter((app) => app.id);
+const builtinApps = [].concat(
+  viewsJson.map((app) => {
+    app.isView = true;
+    return app;
+  }),
+  builtinJson.filter((app) => app.id)
+);
 
 function getHost (api) {
   const host = process.env.DAPPS_URL ||
@@ -96,7 +102,9 @@ export function fetchBuiltinApps (api) {
     .all(builtinApps.map((app) => dappReg.getImage(app.id)))
     .then((imageIds) => {
       return builtinApps.map((app, index) => {
-        app.type = 'builtin';
+        app.type = app.isView
+          ? 'view'
+          : 'builtin';
         app.image = hashToImageUrl(imageIds[index]);
         return app;
       });

js/src/views/Dapps/dapps.js

@@ -114,6 +114,7 @@ class Dapps extends Component {
           ] }
         />
         <Page>
+          <div>{ this.renderList(this.store.visibleViews) }</div>
           <div>{ this.renderList(this.store.visibleLocal) }</div>
           <div>{ this.renderList(this.store.visibleBuiltin) }</div>
           <div>{ this.renderList(this.store.visibleNetwork, externalOverlay) }</div>

js/src/views/Dapps/dappsStore.js

@@ -61,6 +61,38 @@ export default class DappsStore extends EventEmitter {
     return instance;
   }
 
+  @computed get sortedBuiltin () {
+    return this.apps.filter((app) => app.type === 'builtin');
+  }
+
+  @computed get sortedLocal () {
+    return this.apps.filter((app) => app.type === 'local');
+  }
+
+  @computed get sortedNetwork () {
+    return this.apps.filter((app) => app.type === 'network');
+  }
+
+  @computed get visibleApps () {
+    return this.apps.filter((app) => this.displayApps[app.id] && this.displayApps[app.id].visible);
+  }
+
+  @computed get visibleBuiltin () {
+    return this.visibleApps.filter((app) => app.type === 'builtin');
+  }
+
+  @computed get visibleLocal () {
+    return this.visibleApps.filter((app) => app.type === 'local');
+  }
+
+  @computed get visibleNetwork () {
+    return this.visibleApps.filter((app) => app.type === 'network');
+  }
+
+  @computed get visibleViews () {
+    return this.visibleApps.filter((app) => app.type === 'view');
+  }
+
   /**
    * Try to find the app from the local (local or builtin)
    * apps, else fetch from the node
@@ -199,34 +231,6 @@ export default class DappsStore extends EventEmitter {
       });
   }
 
-  @computed get sortedBuiltin () {
-    return this.apps.filter((app) => app.type === 'builtin');
-  }
-
-  @computed get sortedLocal () {
-    return this.apps.filter((app) => app.type === 'local');
-  }
-
-  @computed get sortedNetwork () {
-    return this.apps.filter((app) => app.type === 'network');
-  }
-
-  @computed get visibleApps () {
-    return this.apps.filter((app) => this.displayApps[app.id] && this.displayApps[app.id].visible);
-  }
-
-  @computed get visibleBuiltin () {
-    return this.visibleApps.filter((app) => app.type === 'builtin');
-  }
-
-  @computed get visibleLocal () {
-    return this.visibleApps.filter((app) => app.type === 'local');
-  }
-
-  @computed get visibleNetwork () {
-    return this.visibleApps.filter((app) => app.type === 'network');
-  }
-
   @action openModal = () => {
     this.modalOpen = true;
   }