Merge pull request #1584 from aeternity/restore-browser-intro

Restore browser's intro page

Author: davidyuk

.env

@@ -1,3 +1,2 @@
 VUE_APP_BACKEND_URL=https://base-backend.prd.aepps.com
 VUE_APP_VAPID_PUBLIC_KEY=BHkQhNWW2TKfKfxo7vAgXkZGcVOXGrjhIZJlN1hKp6abIjWJgO8FYPswXJ35XEuKw46O9yZ-8KmsZ4-TXNBePcw
-VUE_APP_HOME_PAGE_URL=https://home.base.aepps.com

src/components/AppShortcut.vue

@@ -1,6 +1,6 @@
 <template>
   <ButtonPlain v-bind="$attrs" class="app-shortcut" v-on="$listeners">
-    <img :src="icon" :alt="name" />
+    <img :class="{ iconNotPadded }" :src="icon" :alt="name" />
     {{ name }}
   </ButtonPlain>
 </template>
@@ -14,6 +14,7 @@ export default {
   props: {
     name: { type: String, required: true },
     icon: { type: String, default: DEFAULT_ICON },
+    iconNotPadded: Boolean,
   },
 };
 </script>
@@ -31,11 +32,17 @@ export default {
   overflow-wrap: break-word;
 
   img {
+    box-sizing: border-box;
     width: functions.rem(75px);
     height: functions.rem(75px);
     border-radius: functions.rem(18px);
     box-shadow: 0 0 16px rgba(0, 33, 87, 0.15);
     margin-bottom: 5px;
+    background: #fff;
+
+    &.iconNotPadded {
+      padding: functions.rem(10px);
+    }
   }
 }
 </style>

src/lib/appsRegistry.json

@@ -0,0 +1 @@
+["superhero.com", "governance.aeternity.com", "graffiti.aeternity.com", "faucet.aepps.com"]

src/lib/storeErrorHandler.js

@@ -1,6 +1,6 @@
 import Vue from 'vue';
 
-window.onerror = async function errorHandler() {
+window.onerror = async function errorHandler(...args) {
   if (document.getElementById('app').innerHTML) {
     window.onerror = null;
     return;
@@ -10,4 +10,7 @@ window.onerror = async function errorHandler() {
   new Vue({
     render: (h) => h(StoreLoadError),
   }).$mount('#app');
+
+  // eslint-disable-next-line no-console
+  console.error('Unknown error', ...args);
 };

src/locales/cn.json

@@ -132,6 +132,7 @@
 
     "list": {
       "featured-guide": "<primary>精选</primary>",
+      "browse-guide": "浏览",
       "bookmarked-guide": "Bookmarks",
       "guide": "æpps <primary>浏览器</primary> (beta)",
       "note": "将运行在æternity区块链上的æpps添加到这里",

src/locales/en.json

@@ -132,6 +132,7 @@
 
     "list": {
       "featured-guide": "<primary>Featured</primary>",
+      "browse-guide": "Browse",
       "bookmarked-guide": "Bookmarks",
       "guide": "æpps <primary>browser</primary> (beta)",
       "note": "æpps running on the æternity blockchain will be added below.",

src/locales/es.json

@@ -132,6 +132,7 @@
 
     "list": {
       "featured-guide": "<primary>æpps destacados</primary>",
+      "browse-guide": "Examinar æpps",
       "bookmarked-guide": "Mis æpps",
       "guide": "æpps <primary>explorador</primary> (beta)",
       "note": "æpps que se ejecutan en la blockchain de  æternity se agregarán a continuación",

src/locales/keysUsedInOtherProjects.js

@@ -132,6 +132,7 @@
 
     "list": {
       "featured-guide": "<primary>Избранное</primary>",
+      "browse-guide": "Просмотр",
       "bookmarked-guide": "Закладки",
       "guide": "æpps <primary>браузер</primary> (бета)",
       "note": "æpps, работающие в блокчейне æternity, будут добавлены ниже.",

src/locales/ru.json

@@ -7,12 +7,7 @@
     </Note>
 
     <div class="shortcuts">
-      <AppShortcut
-        v-for="(app, idx) in aeternityApps"
-        :key="idx"
-        v-bind="app"
-        :to="`https://${app.path}`"
-      />
+      <AppShortcut v-for="(app, idx) in apps" :key="idx" v-bind="app" :to="`https://${app.host}`" />
     </div>
   </div>
 </template>
@@ -23,21 +18,14 @@ import { fetchJson } from '../../store/utils';
 import Guide from '../../components/Guide.vue';
 import Note from '../../components/Note.vue';
 import AppShortcut from '../../components/AppShortcut.vue';
+import appsRegistry from '../../lib/appsRegistry';
 
 export default {
   components: { Guide, Note, AppShortcut },
-  data: () => ({ aeternityAppsPaths: [] }),
   computed: mapState({
-    aeternityApps(state, getters) {
-      return this.aeternityAppsPaths.map((path) => ({
-        ...getters['appsMetadata/get'](path),
-        path,
-      }));
-    },
+    apps: (state, getters) =>
+      appsRegistry.map((host) => ({ ...getters['appsMetadata/get'](host), host })),
   }),
-  async mounted() {
-    this.aeternityAppsPaths = await fetchJson(`${process.env.VUE_APP_HOME_PAGE_URL}/apps.json`);
-  },
 };
 </script>