From 857e50016bc6ed767713db434e618e138bf9a9c6 Mon Sep 17 00:00:00 2001
From: Denis Davidyuk <denis_davidyuk@hotmail.com>
Date: Mon, 8 May 2023 09:50:42 +0600
Subject: [PATCH] feat: remove aepp browser

---
 .env                                          |   1 -
 src/components/AeInputWrapper.vue             |   2 +-
 src/components/AppShortcut.vue                |   2 +
 src/components/ProgressFake.vue               |  39 ----
 src/components/mobile/TabBar.vue              |  25 +--
 src/components/mobile/UrlForm.vue             |  64 ------
 src/components/mobile/__tests__/UrlForm.js    |  26 ---
 src/lib/aeternity-apps.json                   |   8 +
 src/lib/constants.js                          |   9 -
 src/locales/cn.json                           |   4 +-
 src/locales/en.json                           |   4 +-
 src/locales/es.json                           |   4 +-
 src/locales/keysUsedInOtherProjects.js        |   6 -
 src/locales/ru.json                           |   4 +-
 src/pages/desktop/Apps.vue                    |  48 +++--
 src/pages/mobile/AppBrowser.vue               | 203 ++++++------------
 src/pages/mobile/AppDetails.vue               | 132 ++++++++++++
 src/pages/mobile/Onboarding.vue               |   3 +-
 src/pages/mobile/TransactionList.vue          |   4 +-
 src/pages/mobile/Transfer.vue                 |   6 +-
 src/pages/mobile/__tests__/AppBrowser.js      |  39 ----
 src/router/routes/mobile.js                   |  13 +-
 src/store/modules/mobile.js                   |   4 -
 .../plugins/ui/__tests__/appsMetadata.js      |   6 +-
 src/store/plugins/ui/appsMetadata.js          |  30 ++-
 src/store/plugins/ui/pathTracker.js           |   6 +-
 src/ui-common.js                              |   3 +-
 27 files changed, 290 insertions(+), 405 deletions(-)
 delete mode 100644 src/components/ProgressFake.vue
 delete mode 100644 src/components/mobile/UrlForm.vue
 delete mode 100644 src/components/mobile/__tests__/UrlForm.js
 create mode 100644 src/lib/aeternity-apps.json
 delete mode 100644 src/locales/keysUsedInOtherProjects.js
 create mode 100644 src/pages/mobile/AppDetails.vue
 delete mode 100644 src/pages/mobile/__tests__/AppBrowser.js

diff --git a/.env b/.env
index 18c76b0a5..8c8c8847f 100644
--- a/.env
+++ b/.env
@@ -1,4 +1,3 @@
 VUE_APP_REMOTE_CONNECTION_BACKEND_URL=https://signaling.aepps.com
 VUE_APP_VAPID_PUBLIC_KEY=BJP4PnSPRizQofIOBhe8o-AlaElRYbp7Mi_nirXzPYkJPkZfu-ONL7M14Y2c_q9LfU1K3XUcwzfx3lNM_jBLJrc
-VUE_APP_HOME_PAGE_URL=https://registry.aepps.tech
 VUE_APP_CORS_ANYWHERE_URL=https://pr-1489-aepp-base.stg.aepps.com
diff --git a/src/components/AeInputWrapper.vue b/src/components/AeInputWrapper.vue
index f70d14735..9b58f479b 100644
--- a/src/components/AeInputWrapper.vue
+++ b/src/components/AeInputWrapper.vue
@@ -16,7 +16,7 @@
     <main>
       <slot
         :id="_uid"
-        :setFocus="f => focus = f"
+        :set-focus="f => focus = f"
       />
     </main>
     <AeToolbar
diff --git a/src/components/AppShortcut.vue b/src/components/AppShortcut.vue
index 02f94936e..f99465d1f 100644
--- a/src/components/AppShortcut.vue
+++ b/src/components/AppShortcut.vue
@@ -36,11 +36,13 @@ export default {
   overflow-wrap: break-word;
 
   img {
+    display: block;
     width: rem(75px);
     height: rem(75px);
     border-radius: rem(18px);
     box-shadow: 0 0 16px rgba(0, 33, 87, 0.15);
     margin-bottom: 5px;
+    background-color: $color-neutral-maximum;
   }
 }
 </style>
diff --git a/src/components/ProgressFake.vue b/src/components/ProgressFake.vue
deleted file mode 100644
index 852472a5f..000000000
--- a/src/components/ProgressFake.vue
+++ /dev/null
@@ -1,39 +0,0 @@
-<template>
-  <Transition appear>
-    <div class="progress-fake" />
-  </Transition>
-</template>
-
-<style lang="scss" scoped>
-@import '../styles/functions';
-
-.progress-fake {
-  height: rem(2px);
-  background-color: $color-neutral-positive-1;
-
-  &::before {
-    content: '';
-    display: block;
-    background-color: $color-magenta;
-    transition: width 60s cubic-bezier(.05, .95, .05, .95);
-    width: 80%;
-    height: 100%;
-  }
-
-  &.v-enter::before {
-    width: 0;
-  }
-
-  &.v-leave-active {
-    transition-duration: .5s;
-
-    &::before {
-      transition: width .5s;
-    }
-  }
-
-  &.v-leave-to::before {
-    width: 100%;
-  }
-}
-</style>
diff --git a/src/components/mobile/TabBar.vue b/src/components/mobile/TabBar.vue
index ac965361a..9e319d3ea 100644
--- a/src/components/mobile/TabBar.vue
+++ b/src/components/mobile/TabBar.vue
@@ -3,10 +3,7 @@
     <ConnectionStatus />
 
     <div class="wrapper">
-      <ButtonPlain
-        v-if="!$globals.DISABLED_BROWSER"
-        :to="browserPath"
-      >
+      <ButtonPlain :to="{ name: 'app-browser' }">
         <Grid />
         <div>{{ $t('app.title') }}</div>
       </ButtonPlain>
@@ -16,14 +13,6 @@
         <div>{{ $t('transfer.title') }}</div>
       </ButtonPlain>
 
-      <ButtonPlain
-        v-if="$globals.DISABLED_BROWSER"
-        :to="{ name: 'transaction-list' }"
-      >
-        <List />
-        <div>{{ $t('transfer.transaction.title') }}</div>
-      </ButtonPlain>
-
       <ButtonPlain
         :class="showAccountSwitcher ? 'router-link-active' : ''"
         @click="accountSwitcher"
@@ -45,10 +34,10 @@
 </template>
 
 <script>
-import { mapState, mapGetters } from 'vuex';
+import { mapGetters } from 'vuex';
 import ButtonPlain from '../ButtonPlain.vue';
 import {
-  Grid, Transfer, List, Contacts, Settings,
+  Grid, Transfer, Contacts, Settings,
 } from '../icons';
 import AeIdenticon from '../AeIdenticon.vue';
 import ConnectionStatus from '../ConnectionStatus.vue';
@@ -60,7 +49,6 @@ export default {
     ButtonPlain,
     Grid,
     Transfer,
-    List,
     Contacts,
     Settings,
     ConnectionStatus,
@@ -69,12 +57,7 @@ export default {
   props: {
     showAccountSwitcher: Boolean,
   },
-  computed: {
-    ...mapGetters({ activeAccount: 'accounts/active' }),
-    ...mapState({
-      browserPath: ({ mobile }) => mobile.browserPath,
-    }),
-  },
+  computed: mapGetters({ activeAccount: 'accounts/active' }),
   methods: {
     accountSwitcher() {
       if (this.showAccountSwitcher) return;
diff --git a/src/components/mobile/UrlForm.vue b/src/components/mobile/UrlForm.vue
deleted file mode 100644
index 13c51e36b..000000000
--- a/src/components/mobile/UrlForm.vue
+++ /dev/null
@@ -1,64 +0,0 @@
-<template>
-  <form
-    class="url-form"
-    novalidate
-    @submit.prevent="submitHandler"
-  >
-    <input
-      :value="newUrl || currentUrl"
-      :placeholder="$t('app.url-form-placeholder')"
-      type="url"
-      spellcheck="false"
-      @input="inputHandler"
-      @focus="focusHandler"
-    >
-  </form>
-</template>
-
-<script>
-export default {
-  props: {
-    currentUrl: { type: String, default: '' },
-  },
-  data: () => ({ newUrl: '' }),
-  methods: {
-    submitHandler() {
-      if (!this.newUrl) return;
-      this.$emit('new-url');
-      this.$router.push(`/browser/${this.newUrl}`);
-      this.newUrl = '';
-    },
-    focusHandler({ target }) {
-      target.setSelectionRange(0, target.value.length);
-    },
-    inputHandler(event) {
-      this.newUrl = event.target.value;
-      this.$emit('input', event.target.value);
-    },
-  },
-};
-</script>
-
-<style lang="scss" scoped>
-@import '../../styles/typography';
-
-.url-form {
-  input {
-    width: 100%;
-    padding: rem(16px);
-    box-sizing: border-box;
-    border: none;
-    background: transparent;
-    @extend %face-sans-base;
-    color: $color-neutral-negative-3;
-
-    &::placeholder {
-      color: $color-neutral;
-    }
-
-    &:focus {
-      outline: none;
-    }
-  }
-}
-</style>
diff --git a/src/components/mobile/__tests__/UrlForm.js b/src/components/mobile/__tests__/UrlForm.js
deleted file mode 100644
index 841f4ec50..000000000
--- a/src/components/mobile/__tests__/UrlForm.js
+++ /dev/null
@@ -1,26 +0,0 @@
-import { shallowMount } from '@vue/test-utils';
-import UrlForm from '../UrlForm.vue';
-
-describe('UrlForm', () => {
-  [{
-    typedAddress: 'example.com',
-    routerPath: '/browser/example.com',
-  }, {
-    typedAddress: 'https://example.com/test',
-    routerPath: '/browser/https://example.com/test',
-  }].forEach(({ typedAddress, routerPath }) => it(
-    `passes address "${typedAddress}" to router properly`,
-    () => {
-      const push = jest.fn();
-      const wrapper = shallowMount(UrlForm, {
-        mocks: {
-          $router: { push },
-          $t: () => 'locale-specific-text',
-        },
-      });
-      wrapper.vm.newUrl = typedAddress;
-      wrapper.vm.submitHandler();
-      expect(push).toHaveBeenCalledWith(routerPath);
-    },
-  ));
-});
diff --git a/src/lib/aeternity-apps.json b/src/lib/aeternity-apps.json
new file mode 100644
index 000000000..e8e4aabe1
--- /dev/null
+++ b/src/lib/aeternity-apps.json
@@ -0,0 +1,8 @@
+[
+  "superhero.com",
+  "wallet.superhero.com",
+  "governance.aeternity.com",
+  "graffiti.aeternity.com",
+  "migrate.aeternity.com",
+  "faucet.aepps.com"
+]
diff --git a/src/lib/constants.js b/src/lib/constants.js
index 302fadb59..c79ecfc12 100644
--- a/src/lib/constants.js
+++ b/src/lib/constants.js
@@ -9,13 +9,6 @@ export const MAX_AUCTION_NAME_LENGTH = 12 + AENS_DOMAIN.length;
 
 export const NAME_LIST_ROUTE_NAMES = ['name-list', 'auction-list', 'auction-list-character-length'];
 
-export const PROTOCOLS_ALLOWED = [
-  'https:',
-  ...window.location.protocol === 'https:' ? [] : ['http:'],
-];
-export const PROTOCOL_DEFAULT = window.location.protocol === 'https:'
-  || process.env.NODE_ENV === 'production' ? 'https:' : 'http:';
-
 export const ROUTE_MOBILE_LOGGED_IN = { name: 'transfer' };
 
 // https://developers.google.com/web/fundamentals/app-install-banners/#detect-mode
@@ -27,5 +20,3 @@ export const IS_IOS = /iPad|iPhone|iPod/.test(navigator.userAgent) && !window.MS
 export const RUNNING_IN_FRAME = window.parent !== window;
 
 export const RUNNING_IN_POPUP = !!window.opener && window.name === 'popup';
-
-export const DISABLED_BROWSER = process.env.VUE_APP_CORDOVA && IS_IOS;
diff --git a/src/locales/cn.json b/src/locales/cn.json
index 697c72e4f..6880ffc1a 100644
--- a/src/locales/cn.json
+++ b/src/locales/cn.json
@@ -133,7 +133,7 @@
     "list": {
       "featured-guide": "<primary>精选</primary>",
       "bookmarked-guide": "Bookmarks",
-      "guide": "æpps <primary>浏览器</primary> (beta)",
+      "guide": "æpps <primary>浏览器</primary>",
       "note": "将运行在æternity区块链上的æpps添加到这里",
       "by": "by",
       "launch": "Launch"
@@ -142,8 +142,6 @@
     "url-form-placeholder": "输入链接",
 
     "browser": {
-      "refresh": "更新",
-
       "confirm-account-access": {
         "guide": "<app /><br />请求路径到<br /><account />",
 
diff --git a/src/locales/en.json b/src/locales/en.json
index 95b108b88..1a58dd561 100644
--- a/src/locales/en.json
+++ b/src/locales/en.json
@@ -133,7 +133,7 @@
     "list": {
       "featured-guide": "<primary>Featured</primary>",
       "bookmarked-guide": "Bookmarks",
-      "guide": "æpps <primary>browser</primary> (beta)",
+      "guide": "æpps <primary>browser</primary>",
       "note": "æpps running on the æternity blockchain will be added below.",
       "by": "by",
       "launch": "Launch"
@@ -142,8 +142,6 @@
     "url-form-placeholder": "Enter URL",
 
     "browser": {
-      "refresh": "Refresh",
-
       "confirm-account-access": {
         "guide": "<app /><br />requests access to<br /><account />",
 
diff --git a/src/locales/es.json b/src/locales/es.json
index b1b13ca85..d75a67f7d 100644
--- a/src/locales/es.json
+++ b/src/locales/es.json
@@ -133,7 +133,7 @@
     "list": {
       "featured-guide": "<primary>æpps destacados</primary>",
       "bookmarked-guide": "Mis æpps",
-      "guide": "æpps <primary>explorador</primary> (beta)",
+      "guide": "æpps <primary>explorador</primary>",
       "note": "æpps que se ejecutan en la blockchain de  æternity se agregarán a continuación",
       "by": "by",
       "launch": "Launch"
@@ -142,8 +142,6 @@
     "url-form-placeholder": "Ingrese la URL de æpp",
 
     "browser": {
-      "refresh": "Actualizar",
-
       "confirm-account-access": {
         "guide": "<app /><br /> solicita acceso a <br /> <account />",
 
diff --git a/src/locales/keysUsedInOtherProjects.js b/src/locales/keysUsedInOtherProjects.js
deleted file mode 100644
index 29ed30bde..000000000
--- a/src/locales/keysUsedInOtherProjects.js
+++ /dev/null
@@ -1,6 +0,0 @@
-const $t = () => {};
-
-$t('app.list.featured-guide');
-$t('app.list.bookmarked-guide');
-$t('app.list.by');
-$t('app.list.launch');
diff --git a/src/locales/ru.json b/src/locales/ru.json
index 44374997c..da1859ea0 100644
--- a/src/locales/ru.json
+++ b/src/locales/ru.json
@@ -133,7 +133,7 @@
     "list": {
       "featured-guide": "<primary>Избранное</primary>",
       "bookmarked-guide": "Закладки",
-      "guide": "æpps <primary>браузер</primary> (бета)",
+      "guide": "æpps <primary>браузер</primary>",
       "note": "æpps, работающие в блокчейне æternity, будут добавлены ниже.",
       "by": "автор",
       "launch": "Запустить"
@@ -142,8 +142,6 @@
     "url-form-placeholder": "Введите URL",
 
     "browser": {
-      "refresh": "Обновить",
-
       "confirm-account-access": {
         "guide": "<app /><br />запрашивает доступ к<br /><account />",
 
diff --git a/src/pages/desktop/Apps.vue b/src/pages/desktop/Apps.vue
index 442b39573..8ad66d2fa 100644
--- a/src/pages/desktop/Apps.vue
+++ b/src/pages/desktop/Apps.vue
@@ -1,5 +1,21 @@
 <template>
   <div class="apps">
+    <template v-if="bookmarkedApps.length">
+      <Guide
+        :template="$t('app.list.bookmarked-guide')"
+        size="big"
+      />
+
+      <div class="shortcuts">
+        <AppShortcut
+          v-for="app in bookmarkedApps"
+          :key="app.host"
+          v-bind="app"
+          :to="app.url"
+        />
+      </div>
+    </template>
+
     <Guide
       :template="$t('app.list.guide')"
       size="big"
@@ -11,10 +27,10 @@
 
     <div class="shortcuts">
       <AppShortcut
-        v-for="(app, idx) in aeternityApps"
-        :key="idx"
+        v-for="app in aeternityApps"
+        :key="app.host"
         v-bind="app"
-        :to="`https://${app.path}`"
+        :to="app.url"
       />
     </div>
   </div>
@@ -22,37 +38,35 @@
 
 <script>
 import { mapState } from 'vuex';
-import { fetchJson } from '../../store/utils';
 import Guide from '../../components/Guide.vue';
 import Note from '../../components/Note.vue';
 import AppShortcut from '../../components/AppShortcut.vue';
+import aeternityApps from '../../lib/aeternity-apps.json';
 
 export default {
   components: { Guide, Note, AppShortcut },
-  data: () => ({ aeternityAppsPaths: [] }),
   computed: mapState({
-    aeternityApps(state, getters) {
-      return this.aeternityAppsPaths
-        .map((path) => ({ ...getters['appsMetadata/get'](path), path }));
-    },
+    bookmarkedApps: ({ apps }, getters) => apps
+      // TODO: check why host is a URL
+      .map(({ host }) => new URL(host).host)
+      .map((host) => getters['appsMetadata/get'](host)),
+    aeternityApps: (state, getters) => aeternityApps
+      .map((path) => getters['appsMetadata/get'](path)),
   }),
-  async mounted() {
-    this.aeternityAppsPaths = await fetchJson(
-      new URL('/apps.json', process.env.VUE_APP_HOME_PAGE_URL),
-    );
-  },
 };
 </script>
 
 <style lang="scss" scoped>
-@import '../../styles/functions';
+@use '../../styles/functions';
 
 .apps {
   .shortcuts {
-    display: flex;
+    display: grid;
+    grid-template-columns: repeat(4, 1fr);
 
     .app-shortcut {
-      margin-right: rem(95px);
+      margin-right: functions.rem(95px);
+      margin-bottom: functions.rem(32px);
     }
   }
 }
diff --git a/src/pages/mobile/AppBrowser.vue b/src/pages/mobile/AppBrowser.vue
index 6860d62d8..de16fcedc 100644
--- a/src/pages/mobile/AppBrowser.vue
+++ b/src/pages/mobile/AppBrowser.vue
@@ -1,157 +1,82 @@
 <template>
-  <div class="app-browser">
-    <header>
-      <UrlForm
-        :current-url="url"
-        @new-url="reload"
-      />
-
-      <template v-if="path">
-        <ButtonPlain :to="{ name: 'app-browser' }">
-          <Home />
-        </ButtonPlain>
-      </template>
-      <ButtonPlain
-        ref="menuButton"
-        @click="showMenu = true"
+  <Page
+    class="app-browser"
+    fill="neutral"
+  >
+    <template v-if="bookmarkedApps.length">
+      <Guide :template="$t('app.list.bookmarked-guide')" />
+
+      <AeCard fill="maximum">
+        <ListItem
+          v-for="app in bookmarkedApps"
+          :key="app.host"
+          :title="app.name"
+          :subtitle="app.host"
+          :to="`/browser/${app.host}`"
+        >
+          <img
+            v-if="app.icon"
+            slot="icon"
+            :src="app.icon"
+            :alt="app.name"
+          >
+          <LeftMore slot="right" />
+        </ListItem>
+      </AeCard>
+    </template>
+
+    <Guide :template="$t('app.list.featured-guide')" />
+
+    <AeCard fill="maximum">
+      <ListItem
+        v-for="app in aeternityApps"
+        :key="app.host"
+        :title="app.name"
+        :subtitle="app.host"
+        :to="`/browser/${app.host}`"
       >
-        <More />
-      </ButtonPlain>
-    </header>
-
-    <Menu
-      :anchor="showMenu ? $refs.menuButton : null"
-      :anchor-origin="{ vertical: 'top', horizontal: 'right' }"
-      :transform-origin="{ vertical: 'top', horizontal: 'right' }"
-      @close="showMenu = false"
-    >
-      <MenuItem @click="reload">
-        <Reload /> {{ $t('app.browser.refresh') }}
-      </MenuItem>
-    </Menu>
-
-    <ProgressFake v-if="loading" />
-
-    <iframe
-      ref="iframe"
-      :src="url"
-      :title="url"
-      :scrolling="$globals.IS_IOS && 'no'"
-      importance="high"
-      sandbox="allow-scripts allow-same-origin allow-forms"
-      allow="camera; microphone"
-      @load="loading = false"
-    />
-
-    <TabBar />
-  </div>
+        <img
+          v-if="app.icon"
+          slot="icon"
+          :src="app.icon"
+          :alt="app.name"
+        >
+        <LeftMore slot="right" />
+      </ListItem>
+    </AeCard>
+  </Page>
 </template>
 
 <script>
-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 Menu from '../../components/Menu.vue';
-import MenuItem from '../../components/MenuItem.vue';
-import ProgressFake from '../../components/ProgressFake.vue';
-import TabBar from '../../components/mobile/TabBar.vue';
+import { mapState } from 'vuex';
+import { LeftMore } from '../../components/icons';
+import Page from '../../components/Page.vue';
+import Guide from '../../components/Guide.vue';
+import AeCard from '../../components/AeCard.vue';
+import ListItem from '../../components/ListItem.vue';
+import aeternityApps from '../../lib/aeternity-apps.json';
 
 export default {
   components: {
-    UrlForm,
-    ButtonPlain,
-    Home,
-    More,
-    Reload,
-    Menu,
-    MenuItem,
-    ProgressFake,
-    TabBar,
-  },
-  data() {
-    return {
-      loading: true,
-      newUrl: '',
-      showMenu: false,
-    };
-  },
-  computed: {
-    path() {
-      return this.$route.fullPath.replace(/\/browser\/?/, '');
-    },
-    url() {
-      const path = this.path || process.env.VUE_APP_HOME_PAGE_URL;
-      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;
-    },
-  },
-  async mounted() {
-    const sdk = this.$store.state.sdk.then ? await this.$store.state.sdk : this.$store.state.sdk;
-
-    const connection = BrowserWindowMessageConnection({ target: this.$refs.iframe.contentWindow });
-    sdk.addRpcClient(connection);
-    const shareWalletInfoInterval = setInterval(
-      () => sdk.shareWalletInfo(connection.sendMessage.bind(connection)),
-      3000,
-    );
-
-    const handler = () => { this.showMenu = false; };
-    window.addEventListener('blur', handler);
-    this.$once('hook:destroyed', () => {
-      window.removeEventListener('blur', handler);
-      clearInterval(shareWalletInfoInterval);
-      Object.keys(sdk.rpcClients).forEach((id) => sdk.removeRpcClient(id));
-    });
-  },
-  methods: {
-    reload() {
-      this.loading = true;
-      this.$refs.iframe.src += '';
-      this.$refs.iframe.focus();
-    },
+    Page, Guide, AeCard, ListItem, LeftMore,
   },
+  computed: mapState({
+    bookmarkedApps: ({ apps }, getters) => apps
+      // TODO: check why host is a URL
+      .map(({ host }) => new URL(host).host)
+      .map((host) => getters['appsMetadata/get'](host)),
+    aeternityApps: (state, getters) => aeternityApps
+      .map((host) => getters['appsMetadata/get'](host)),
+  }),
 };
 </script>
 
 <style lang="scss" scoped>
-@import '../../styles/functions';
+@use '../../styles/functions';
 
 .app-browser {
-  flex-grow: 1;
-  display: flex;
-  flex-direction: column;
-
-  header {
-    display: flex;
-    padding-top: env(safe-area-inset-top);
-    height: rem(54px);
-    line-height: rem(54px);
-    box-shadow: inset 0 0 rem(8px) rgba(#1B4479, 0.1);
-
-    .url-form {
-      flex-grow: 1;
-    }
-
-    .button-plain {
-      padding: 0 rem(14px);
-      color: $color-neutral-negative-3;
-    }
-  }
-
-  .progress-fake {
-    margin-top: rem(-2px);
-  }
-
-  iframe {
-    flex-grow: 1;
-    width: 100vw;
-    border: none;
+  .ae-card {
+    margin-bottom: functions.rem(24px);
   }
 }
 </style>
diff --git a/src/pages/mobile/AppDetails.vue b/src/pages/mobile/AppDetails.vue
new file mode 100644
index 000000000..f3f65dc86
--- /dev/null
+++ b/src/pages/mobile/AppDetails.vue
@@ -0,0 +1,132 @@
+<template>
+  <Page
+    class="app-details"
+    fill="neutral"
+    :left-button-to="{ name: 'app-browser' }"
+    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"
+          >{{ 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="app.url"
+    >
+      {{ $t('app.list.launch') }}
+    </AeButton>
+  </Page>
+</template>
+
+<script>
+import { mapState } from 'vuex';
+import { get, 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: mapState({
+    app(state, getters) {
+      const host = this.$route.fullPath.replace('/browser/', '');
+      const app = getters['appsMetadata/get'](host);
+      return {
+        ...app,
+        categories: get(app, 'categories', []).map((c) => capitalize(c)).join(', '),
+        networks: get(app, 'aeternity_network_ids', [])
+          .map((id) => ({ ae_mainnet: 'Mainnet', ae_uat: 'Testnet' }[id] || id))
+          .join(' | '),
+      };
+    },
+  }),
+};
+</script>
+
+<style lang="scss" scoped>
+@use '../../styles/variables';
+@use '../../styles/functions';
+@use '../../styles/typography';
+
+.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>
diff --git a/src/pages/mobile/Onboarding.vue b/src/pages/mobile/Onboarding.vue
index 034d815b2..d6fe9903e 100644
--- a/src/pages/mobile/Onboarding.vue
+++ b/src/pages/mobile/Onboarding.vue
@@ -39,7 +39,6 @@
 
 <script>
 import AeButton from '../../components/AeButton.vue';
-import { DISABLED_BROWSER } from '../../lib/constants';
 
 export default {
   components: { AeButton },
@@ -47,7 +46,7 @@ export default {
     stepRouteNames: [
       'onboarding',
       'onboarding-send',
-      ...DISABLED_BROWSER ? [] : ['onboarding-aepps'],
+      'onboarding-aepps',
       'onboarding-subaccounts',
     ],
   }),
diff --git a/src/pages/mobile/TransactionList.vue b/src/pages/mobile/TransactionList.vue
index f52e21b59..e34e345a7 100644
--- a/src/pages/mobile/TransactionList.vue
+++ b/src/pages/mobile/TransactionList.vue
@@ -2,8 +2,8 @@
   <Page
     header-fill="primary"
     class="transaction-list"
-    :right-button-icon-name="$globals.DISABLED_BROWSER ? '' : 'close'"
-    :right-button-to="$globals.DISABLED_BROWSER ? '' : { name: 'transfer' }"
+    right-button-icon-name="close"
+    :right-button-to="{ name: 'transfer' }"
   >
     <div
       slot="title"
diff --git a/src/pages/mobile/Transfer.vue b/src/pages/mobile/Transfer.vue
index a7f139b60..ef297bf1b 100644
--- a/src/pages/mobile/Transfer.vue
+++ b/src/pages/mobile/Transfer.vue
@@ -37,7 +37,6 @@
       <LeftMore slot="right" />
     </ListItem>
     <ListItem
-      v-if="!$globals.DISABLED_BROWSER"
       :to="{ name: 'transaction-list' }"
       :title="$t('transfer.transaction.title')"
       :subtitle="$t('transfer.transaction.subtitle')"
@@ -77,7 +76,6 @@ import Guide from '../../components/Guide.vue';
 import AeAccount from '../../components/AeAccount.vue';
 import { LeftMore } from '../../components/icons';
 import ListItem from '../../components/ListItem.vue';
-import { DISABLED_BROWSER } from '../../lib/constants';
 
 export default {
   components: {
@@ -106,10 +104,10 @@ export default {
         tooltips: [{
           selector: '.transfer .ae-account .ae-identicon',
           ...this.$t('transfer.tooltips.identicon'),
-        }, ...!DISABLED_BROWSER ? [{
+        }, {
           selector: '.transfer .tab-bar .button-plain',
           ...this.$t('transfer.tooltips.browser'),
-        }] : [], {
+        }, {
           selector: '.transfer .tab-bar .button-plain:nth-child(3)',
           ...this.$t('transfer.tooltips.account-switcher'),
         }, {
diff --git a/src/pages/mobile/__tests__/AppBrowser.js b/src/pages/mobile/__tests__/AppBrowser.js
deleted file mode 100644
index 32ff80bcc..000000000
--- a/src/pages/mobile/__tests__/AppBrowser.js
+++ /dev/null
@@ -1,39 +0,0 @@
-import { shallowMount } from '@vue/test-utils';
-import AppBrowser from '../AppBrowser.vue';
-
-describe('AppBrowser', () => [{
-  inputUrl: 'http://example.com/test',
-  outputUrl: 'http://example.com/test',
-}, {
-  inputUrl: 'https://example.com',
-  outputUrl: 'https://example.com/',
-}, {
-  inputUrl: 'example.com',
-  outputUrl: 'http://example.com/',
-}, {
-  inputUrl: 'ftp://example.com',
-  outputUrl: 'http://example.com/',
-}, {
-  inputUrl: 'localhost:8080',
-  outputUrl: 'http://localhost:8080/',
-}].forEach(({ inputUrl, outputUrl }) => it(
-  `replaces "${inputUrl}" path with "${outputUrl}"`,
-  () => {
-    const wrapper = shallowMount(AppBrowser, {
-      mocks: {
-        $route: { fullPath: `/browser/${inputUrl}` },
-        $store: {
-          state: {
-            apps: [],
-            sdk: {
-              addRpcClient: () => {},
-            },
-          },
-        },
-        $globals: { IS_IOS: false },
-        $t: () => 'locale-specific-text',
-      },
-    });
-    expect(wrapper.vm.url).toBe(outputUrl);
-  },
-)));
diff --git a/src/router/routes/mobile.js b/src/router/routes/mobile.js
index f50cd7545..cb3d6e2b8 100644
--- a/src/router/routes/mobile.js
+++ b/src/router/routes/mobile.js
@@ -1,4 +1,4 @@
-import { DISABLED_BROWSER, IS_PWA, ROUTE_MOBILE_LOGGED_IN } from '../../lib/constants';
+import { IS_PWA, ROUTE_MOBILE_LOGGED_IN } from '../../lib/constants';
 import { send } from '../../lib/localStorageCall';
 import { ensureLoggedIn, mergeEnterHandlers } from '../utils';
 import store from '../../store/index';
@@ -12,6 +12,7 @@ import OnboardingSubaccounts from '../../pages/mobile/OnboardingSubaccounts.vue'
 import Login from '../../pages/mobile/Login.vue';
 import Recover from '../../pages/mobile/Recover.vue';
 import AppBrowser from '../../pages/mobile/AppBrowser.vue';
+import AppDetails from '../../pages/mobile/AppDetails.vue';
 import VaultSetupMethod from '../../pages/mobile/VaultSetupMethod.vue';
 import VaultSetupAnotherDevice from '../../pages/mobile/VaultSetupAnotherDevice.vue';
 import VaultSetupAnotherDeviceGuide from '../../pages/mobile/VaultSetupAnotherDeviceGuide.vue';
@@ -118,9 +119,11 @@ export default [{
 }, {
   name: 'app-browser',
   path: '/browser',
-  alias: '/browser/*',
   component: AppBrowser,
-  beforeEnter: ensureLoggedIn,
+}, {
+  name: 'app-details',
+  path: '/browser/*',
+  component: AppDetails,
 }, {
   name: 'vault-setup-method',
   path: '/vault/choose',
@@ -180,13 +183,13 @@ export default [{
   props: true,
 }, {
   name: 'transaction-list',
-  path: `${DISABLED_BROWSER ? '' : '/transfer'}/transactions/:direction?`,
+  path: '/transfer/transactions/:direction?',
   component: TransactionList,
   beforeEnter: ensureLoggedIn,
   props: true,
 }, {
   name: 'transaction-details',
-  path: `${DISABLED_BROWSER ? '' : '/transfer'}/transactions/details/:hash`,
+  path: '/transfer/transactions/details/:hash',
   component: TransactionDetails,
   beforeEnter: ensureLoggedIn,
   props: true,
diff --git a/src/store/modules/mobile.js b/src/store/modules/mobile.js
index 7cc1cbed9..e7e818472 100644
--- a/src/store/modules/mobile.js
+++ b/src/store/modules/mobile.js
@@ -7,7 +7,6 @@ export default {
   state: {
     followers: {},
     stepFraction: null,
-    browserPath: { name: 'app-browser' },
     readSecurityCourses: [],
     skipAddingToHomeScreen: false,
   },
@@ -36,9 +35,6 @@ export default {
     setStepFraction(state, stepFraction = null) {
       state.stepFraction = stepFraction;
     },
-    setBrowserPath(state, browserPath) {
-      state.browserPath = browserPath;
-    },
     markSecurityCourseAsRead(state, courseName) {
       if (state.readSecurityCourses.includes(courseName)) return;
       state.readSecurityCourses.push(courseName);
diff --git a/src/store/plugins/ui/__tests__/appsMetadata.js b/src/store/plugins/ui/__tests__/appsMetadata.js
index 0920d92bb..45df2a0b1 100644
--- a/src/store/plugins/ui/__tests__/appsMetadata.js
+++ b/src/store/plugins/ui/__tests__/appsMetadata.js
@@ -15,13 +15,17 @@ describe('appsMetadata', () => {
     manifest: manifestMozillaDocs,
     metadata: {
       name: 'HackerWeb',
-      icon: 'http://example.com/icon/hd_hi.ico',
+      host: 'example.com',
+      url: 'https://example.com',
+      icon: 'https://example.com/icon/hd_hi.ico',
     },
   }, {
     name: 'Twitter',
     manifest: manifestTwitter,
     metadata: {
       name: 'Twitter',
+      host: 'example.com',
+      url: 'https://example.com',
       icon: 'https://abs.twimg.com/responsive-web/web/icon-default.604e2486a34a2f6e.png',
     },
   }].forEach(({ name, manifest, metadata }) => it(
diff --git a/src/store/plugins/ui/appsMetadata.js b/src/store/plugins/ui/appsMetadata.js
index b6ed6308f..941271822 100644
--- a/src/store/plugins/ui/appsMetadata.js
+++ b/src/store/plugins/ui/appsMetadata.js
@@ -3,7 +3,6 @@
 import { flatMap } from 'lodash-es';
 import Vue from 'vue';
 import { handleUnknownError } from '../../../lib/utils';
-import { PROTOCOL_DEFAULT } from '../../../lib/constants';
 
 export default (store) => store.registerModule('appsMetadata', {
   namespaced: true,
@@ -20,6 +19,8 @@ export default (store) => store.registerModule('appsMetadata', {
       const metadata = {
         ...manifest,
         name: manifest.short_name || manifest.name || host,
+        url: `https://${host}`,
+        host,
       };
 
       const icons = flatMap(
@@ -33,7 +34,7 @@ export default (store) => store.registerModule('appsMetadata', {
         return i.side > 75 && i.side < p.side ? i : p;
       }, null);
       if (icon) {
-        metadata.icon = new URL(icon.src, `${PROTOCOL_DEFAULT}//${host}`).toString();
+        metadata.icon = new URL(icon.src, `https://${host}`).toString();
       }
 
       return metadata;
@@ -59,12 +60,27 @@ export default (store) => store.registerModule('appsMetadata', {
       const base = document.querySelector('base');
       if (base) appUrl = new URL(base.getAttribute('href'), appUrl);
 
-      const manifestUrl = new URL(
-        document.querySelector('link[rel=manifest]').getAttribute('href'),
-        appUrl,
-      );
+      const manifestPath = document.querySelector('link[rel=manifest]')?.getAttribute('href');
+      if (manifestPath != null) {
+        const manifestUrl = new URL(manifestPath, appUrl);
+        return JSON.parse(await fetchTextCors(manifestUrl));
+      }
+
+      const iconPath = document.querySelector('link[rel=icon]')?.getAttribute('href');
+      if (iconPath != null) {
+        const name = document.querySelector('title').innerText;
+        const [shortName, description] = name.split(' - ');
+        return {
+          name,
+          short_name: shortName,
+          description,
+          icons: [{
+            src: new URL(iconPath, appUrl),
+          }],
+        };
+      }
 
-      return JSON.parse(await fetchTextCors(manifestUrl));
+      return {};
     },
     async ensureManifestFetched({ state: { manifests }, commit, dispatch }, host) {
       if (manifests[host]) return;
diff --git a/src/store/plugins/ui/pathTracker.js b/src/store/plugins/ui/pathTracker.js
index b34b3558f..31126c8fe 100644
--- a/src/store/plugins/ui/pathTracker.js
+++ b/src/store/plugins/ui/pathTracker.js
@@ -3,10 +3,8 @@ import { NAME_LIST_ROUTE_NAMES } from '../../../lib/constants';
 export default (store) => {
   store.watch(
     ({ route }) => route,
-    ({ name, fullPath, params } = {}) => {
-      if (name === 'app-browser') {
-        store.commit('setBrowserPath', fullPath);
-      } else if (NAME_LIST_ROUTE_NAMES.includes(name)) {
+    ({ name, params } = {}) => {
+      if (NAME_LIST_ROUTE_NAMES.includes(name)) {
         store.commit('setNameListRoute', { name, params });
       }
     },
diff --git a/src/ui-common.js b/src/ui-common.js
index 60fe23ed5..2193f2db8 100644
--- a/src/ui-common.js
+++ b/src/ui-common.js
@@ -4,12 +4,11 @@ import 'focus-visible';
 import './styles/fullscreen-message.scss';
 import './components/icon.scss';
 import './lib/switchWebmanifest';
-import { IS_IOS, DISABLED_BROWSER, ROUTE_MOBILE_LOGGED_IN } from './lib/constants';
+import { IS_IOS, ROUTE_MOBILE_LOGGED_IN } from './lib/constants';
 
 Vue.prototype.$globals = {
   ENV_MOBILE_DEVICE: ENV_MOBILE_DEVICE, // eslint-disable-line object-shorthand
   IS_IOS,
   VUE_APP_CORDOVA: process.env.VUE_APP_CORDOVA,
-  DISABLED_BROWSER,
   ROUTE_MOBILE_LOGGED_IN,
 };