Restore browser's intro page

.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/ru.json

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

src/pages/desktop/Apps.vue

@@ -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>
 

src/pages/mobile/AppBrowser.vue

@@ -3,11 +3,12 @@
     <header>
       <UrlForm :current-url="url" @new-url="reload" />
 
-      <template v-if="path">
-        <ButtonPlain :to="{ name: 'app-browser' }">
-          <Home />
-        </ButtonPlain>
-      </template>
+      <ButtonPlain @click="toggleBookmarking">
+        <Component :is="bookmarked ? 'BookmarkFull' : 'Bookmark'" />
+      </ButtonPlain>
+      <ButtonPlain :to="{ name: 'app-list' }">
+        <Home />
+      </ButtonPlain>
       <ButtonPlain ref="menuButton" @click="showMenu = true">
         <More />
       </ButtonPlain>
@@ -39,11 +40,12 @@
 </template>
 
 <script>
+import { mapState } from 'vuex';
 import BrowserWindowMessageConnection from '@aeternity/aepp-sdk/es/utils/aepp-wallet-communication/connection/browser-window-message';
 import { PROTOCOLS_ALLOWED, PROTOCOL_DEFAULT } from '../../lib/constants';
 import UrlForm from '../../components/mobile/UrlForm.vue';
 import ButtonPlain from '../../components/ButtonPlain.vue';
-import { Home, More, Reload } from '../../components/icons';
+import { Bookmark, BookmarkFull, Home, More, Reload } from '../../components/icons';
 import AeMenu from '../../components/AeMenu.vue';
 import AeMenuItem from '../../components/AeMenuItem.vue';
 import ProgressFake from '../../components/ProgressFake.vue';
@@ -53,6 +55,8 @@ export default {
   components: {
     UrlForm,
     ButtonPlain,
+    Bookmark,
+    BookmarkFull,
     Home,
     More,
     Reload,
@@ -70,17 +74,22 @@ export default {
   },
   computed: {
     path() {
-      return this.$route.fullPath.replace(/\/browser\/?/, '');
+      return this.$route.fullPath.replace('/browser/', '');
     },
     url() {
-      const path = this.path || process.env.VUE_APP_HOME_PAGE_URL;
+      const path = this.path;
       const url = new URL(/^\w+:\D+/.test(path) ? path : `${PROTOCOL_DEFAULT}//${path}`);
       if (!PROTOCOLS_ALLOWED.includes(url.protocol)) url.protocol = PROTOCOL_DEFAULT;
       return url.toString();
     },
     host() {
       return new URL(this.url).host;
     },
+    ...mapState({
+      bookmarked({ apps }) {
+        return apps.some(({ host, bookmarked }) => host === this.host && bookmarked);
+      },
+    }),
   },
   async mounted() {
     const sdk = await this.$store.state.sdk;
@@ -108,6 +117,9 @@ export default {
       this.$refs.iframe.src += '';
       this.$refs.iframe.focus();
     },
+    toggleBookmarking() {
+      this.$store.commit('toggleAppBookmarking', this.host);
+    },
   },
 };
 </script>

src/pages/mobile/AppDetails.vue

@@ -0,0 +1,130 @@
+<template>
+  <Page
+    class="app-details"
+    fill="neutral"
+    :left-button-to="{ name: 'app-list' }"
+    left-button-icon-name="back"
+  >
+    <header>
+      <img v-if="app.icon" :src="app.icon" :alt="app.name" />
+      <div>
+        <Guide>
+          <em>{{ app.name }}</em>
+        </Guide>
+        <span v-if="app.author">
+          {{ $t('app.list.by') }}
+          <AeLink v-if="app.author_url" :to="app.author_url">
+            <!-- eslint-disable-next-line @intlify/vue-i18n/no-raw-text -->
+            {{ app.author }} »
+          </AeLink>
+          <template v-else>{{ app.author }}</template>
+        </span>
+      </div>
+    </header>
+
+    <AeCard v-if="app.categories || app.networks || app.description" fill="maximum">
+      <p>
+        <span class="categories">{{ app.categories }}</span>
+        <span class="networks">{{ app.networks }}</span>
+      </p>
+      <p>{{ app.description }}</p>
+    </AeCard>
+
+    <AeButton fill="secondary" :to="`/browser/${app.host}`">
+      {{ $t('app.list.launch') }}
+    </AeButton>
+  </Page>
+</template>
+
+<script>
+import { mapState } from 'vuex';
+import { capitalize } from 'lodash-es';
+import Page from '../../components/Page.vue';
+import Guide from '../../components/Guide.vue';
+import AeLink from '../../components/AeLink.vue';
+import AeCard from '../../components/AeCard.vue';
+import AeButton from '../../components/AeButton.vue';
+
+export default {
+  components: {
+    Page,
+    Guide,
+    AeLink,
+    AeCard,
+    AeButton,
+  },
+  computed: {
+    host() {
+      return this.$route.fullPath.replace('/browser/details/', '');
+    },
+    ...mapState({
+      app(state, getters) {
+        const app = getters['appsMetadata/get'](this.host);
+        return {
+          ...app,
+          host: this.host,
+          categories: (app.categories ?? []).map((c) => capitalize(c)).join(', '),
+          networks: (app.aeternity_network_ids ?? [])
+            .map((id) => ({ ae_mainnet: 'Mainnet', ae_uat: 'Testnet' })[id] || id)
+            .join(' | '),
+        };
+      },
+    }),
+  },
+};
+</script>
+
+<style lang="scss" scoped>
+@use '../../styles/functions';
+@use '../../styles/typography';
+@use '../../styles/variables';
+
+.app-details {
+  header {
+    display: flex;
+
+    > img {
+      width: functions.rem(48px);
+      height: functions.rem(48px);
+      margin-right: functions.rem(12px);
+    }
+
+    > div {
+      display: flex;
+      flex-direction: column;
+      justify-content: space-between;
+
+      .guide {
+        margin-bottom: 0;
+      }
+
+      span,
+      span a {
+        @extend %face-sans-s;
+        color: variables.$color-neutral-negative-1;
+        text-decoration: none;
+      }
+    }
+  }
+
+  .ae-card {
+    margin-bottom: functions.rem(24px);
+    padding: 0 functions.rem(16px);
+    @extend %face-sans-s;
+    color: variables.$color-neutral-negative-3;
+
+    span {
+      display: block;
+    }
+
+    .categories {
+      font-weight: 500;
+    }
+
+    .networks {
+      @extend %face-sans-xs;
+      color: variables.$color-neutral-negative-1;
+    }
+  }
+}
+</style>