fix: be able to connect within iframe

aeternity · Aug 23, 2023 · 898c5ff · 898c5ff
1 parent c9affa0
commit 898c5ff
Show file tree

Hide file tree

Showing 5 changed files with 15 additions and 5 deletions.
diff --git a/src/App.vue b/src/App.vue
@@ -27,6 +27,7 @@ import Header from '@/components/Header.vue';
 import NavigationMenu from '@/components/NavigationMenu.vue';
 import ConnectionStatus from '@/components/ConnectionStatus.vue';
 import { isDexBackendDisabled } from '@/lib/utils';
+import { IN_FRAME } from '@/lib/constants';
 
 export default {
   components: {
@@ -67,7 +68,7 @@ export default {
     }
     this.$store.commit('setIsSdkInitializing', true);
     try {
-      if (this.$isMobile) {
+      if (this.$isMobile && !IN_FRAME) {
         await this.$store.dispatch('initUniversal'); // TODO: remove after https://github.com/aeternity/aepp-sdk-js/issues/1390 is resolved
         this.$store.dispatch('parseAndSendTransactionFromQuery');
       } else {

diff --git a/src/components/ConnectWalletModal.vue b/src/components/ConnectWalletModal.vue
@@ -103,6 +103,7 @@ import {
   WalletDetector, BrowserWindowMessageConnection,
 } from '@aeternity/aepp-sdk';
 import { resolveWithTimeout } from '../lib/utils';
+import { IN_FRAME } from '../lib/constants';
 import ModalDefault from './ModalDefault.vue';
 import ButtonDefault from './ButtonDefault.vue';
 import ButtonPlain from './ButtonPlain.vue';
@@ -137,7 +138,7 @@ export default {
     };
   },
   async mounted() {
-    if (this.$isMobile) {
+    if (this.$isMobile && !IN_FRAME) {
       this.addDefaultWallet();
     } else {
       this.scanningForWallets = true;

diff --git a/src/lib/constants.js b/src/lib/constants.js
@@ -1,3 +1,7 @@
+export const IS_MOBILE = window.navigator.userAgent.includes('Mobi');
+
+export const IN_FRAME = window.parent !== window;
+
 export const MAGNITUDE = 18;
 // TODO: this is what uniswap uses as minimumLiquidity, let's decide on it
 export const MINIMUM_LIQUIDITY = 1000n;

diff --git a/src/store/index.js b/src/store/index.js
@@ -9,6 +9,8 @@ import {
 } from '@/lib/utils';
 import {
   DEFAULT_NETWORKS,
+  IN_FRAME,
+  IS_MOBILE,
 } from '@/lib/constants';
 import aeternityModule from './modules/aeternity';
 import dexBackendModule from './modules/dexBackend';
@@ -161,7 +163,7 @@ export default createStore({
       commit('setConnectingToWallet', true);
       commit('setWallet', wallet);
 
-      if (window.navigator.userAgent.includes('Mobi') || isSafariBrowser()) {
+      if ((IS_MOBILE || isSafariBrowser()) && !IN_FRAME) {
         if (address) {
           commit('setConnectingToWallet', false);
           return;
@@ -175,7 +177,7 @@ export default createStore({
       } else {
         try {
           await resolveWithTimeout(30000, async () => {
-            const webWalletTimeout = window.navigator.userAgent.toLowerCase().includes('mobi') ? 0
+            const webWalletTimeout = IS_MOBILE ? 0
               : setTimeout(() => commit('enableIframeWallet'), 15000);
             commit('useSdkWallet');
 

diff --git a/src/store/plugins/connectionStatusTracker.js b/src/store/plugins/connectionStatusTracker.js
@@ -1,7 +1,9 @@
+import { IS_MOBILE } from '@/lib/constants';
+
 export default (store) => {
   const connectionStatusHandler = () => {
     if (store.state.onLine !== navigator.onLine) store.commit('setOnLine', navigator.onLine);
-    if (!navigator.onLine && !window.navigator.userAgent.includes('Mobi')) {
+    if (!navigator.onLine && !IS_MOBILE) {
       store.dispatch('modals/open', {
         name: 'connection-status',
         text: 'You are offline... Please check your connection.',