Merge pull request #1552 from aeternity/feature/browser-ios

Enable browser in iOS, related fixes

.eslintrc.js

@@ -6,7 +6,7 @@ module.exports = {
   globals: {
     ENV_MOBILE_DEVICE: true,
   },
-  ignorePatterns: ['dist', 'www'],
+  ignorePatterns: ['dist', 'platforms', 'plugins', 'www'],
   extends: [
     'plugin:vue/recommended',
     'plugin:@intlify/vue-i18n/recommended',

src/components/mobile/TabBar.vue

@@ -3,10 +3,7 @@
     <ConnectionStatus />
 
     <div class="wrapper">
-      <ButtonPlain
-        v-if="!$globals.DISABLED_BROWSER"
-        :to="browserPath"
-      >
+      <ButtonPlain :to="browserPath">
         <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"
@@ -48,7 +37,7 @@
 import { mapState, 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,

src/components/mobile/Tooltip.vue

@@ -45,7 +45,7 @@ export default {
 
       return this.showBelow
         ? { top: `${bottom + arrowSize}px` }
-        : { bottom: `${document.documentElement.clientHeight - top + arrowSize}px` };
+        : { bottom: `${this.$parent.$el.clientHeight - top + arrowSize}px` };
     },
     arrowStyle() {
       if (!this.anchorRect || !this.isMounted) return {};

src/lib/constants.js

@@ -27,5 +27,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;

src/pages/mobile/AppBrowser.vue

@@ -36,7 +36,6 @@
       ref="iframe"
       :src="url"
       :title="url"
-      :scrolling="$globals.IS_IOS && 'no'"
       importance="high"
       sandbox="allow-scripts allow-same-origin allow-forms allow-modals"
       allow="camera; microphone"
@@ -151,7 +150,6 @@ export default {
 
   iframe {
     flex-grow: 1;
-    width: 100vw;
     border: none;
   }
 }

src/pages/mobile/Onboarding.vue

@@ -40,15 +40,14 @@
 
 <script>
 import AeButton from '../../components/AeButton.vue';
-import { DISABLED_BROWSER } from '../../lib/constants';
 
 export default {
   components: { AeButton },
   data: () => ({
     stepRouteNames: [
       'onboarding',
       'onboarding-send',
-      ...DISABLED_BROWSER ? [] : ['onboarding-aepps'],
+      'onboarding-aepps',
       'onboarding-subaccounts',
     ],
   }),

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"

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'),
         }, {

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';
@@ -180,13 +180,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,

src/store/plugins/initSdk.js

@@ -140,6 +140,17 @@ export default (store) => {
     ]);
     // TODO: remove after updating sdk
     sdk.Ae.defaults.verify = false;
+
+    // backported fix https://github.com/aeternity/aepp-sdk-js/pull/1980
+    const { getWalletInfo } = sdk;
+    sdk.getWalletInfo = () => {
+      const { origin, ...info } = getWalletInfo.call(sdk);
+      return {
+        ...info,
+        origin: 'file://' === info.origin ? '*' : info.origin,
+      };
+    }
+
     sdk.selectNode(network.name);
     sdk.middleware = middleware;
     sdk.middleware2 = middleware2;

src/ui-common.js

@@ -1,12 +1,11 @@
 import Vue from 'vue';
 import 'focus-visible';
 import './components/icon.scss';
-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,
 };