Merge pull request #2794 from superhero-com/fix/viewport-missing-in-d…

…ashboard fix: viewport element missing in dashboard
superhero-com · Mar 20, 2024 · 2d55175 · 2d55175
2 parents a04785c + 63ff126
commit 2d55175
Show file tree

Hide file tree

Showing 3 changed files with 57 additions and 9 deletions.
diff --git a/src/popup/components/DashboardWrapper.vue b/src/popup/components/DashboardWrapper.vue
@@ -1,5 +1,8 @@
 <template>
-  <div class="dashboard">
+  <div
+    ref="dashboardWrapperEl"
+    class="dashboard"
+  >
     <slot name="header" />
 
     <div class="dashboard-cards">
@@ -29,8 +32,12 @@
 </template>
 
 <script lang="ts">
-import { defineComponent } from 'vue';
-import { useUi } from '@/composables';
+import {
+  defineComponent,
+  onMounted,
+  ref,
+} from 'vue';
+import { useUi, useViewport } from '@/composables';
 
 import DashboardCard from './DashboardCard.vue';
 
@@ -42,10 +49,18 @@ export default defineComponent({
     DashboardCard,
   },
   setup() {
+    const dashboardWrapperEl = ref<HTMLElement | null>(null);
+
     const { isSeedBackedUp } = useUi();
+    const { initViewport } = useViewport();
+
+    onMounted(() => {
+      initViewport(dashboardWrapperEl.value?.parentElement!);
+    });
 
     return {
       isSeedBackedUp,
+      dashboardWrapperEl,
       WarningTriangleIcon,
     };
   },

diff --git a/src/popup/pages/Dashboard.vue b/src/popup/pages/Dashboard.vue
@@ -1,7 +1,7 @@
 <template>
   <IonPage>
     <IonContent class="ion-padding ion-content-bg">
-      <DashboardWrapper class="dashboard">
+      <DashboardWrapper v-if="pageIsActive">
         <template #header>
           <DashboardHeader />
         </template>
@@ -22,7 +22,7 @@
             :background="daeppBrowserBackground"
             :icon="GlobeIcon"
             :to="{ name: ROUTE_APPS_BROWSER }"
-            :card-id="DASHBOARD_CARD_ID.daeppBrowser"
+            :card-id="DASHBOARD_CARD_ID.daeppBrowser!"
           />
           <DashboardCard
             v-if="isNodeMainnet && UNFINISHED_FEATURES"
@@ -58,9 +58,15 @@
 import {
   computed,
   defineComponent,
+  ref,
   watch,
 } from 'vue';
-import { IonPage, IonContent } from '@ionic/vue';
+import {
+  IonPage,
+  IonContent,
+  onIonViewWillEnter,
+  onIonViewDidLeave,
+} from '@ionic/vue';
 import { useRoute } from 'vue-router';
 
 import {
@@ -106,6 +112,8 @@ export default defineComponent({
     IonContent,
   },
   setup() {
+    const pageIsActive = ref(true);
+
     const route = useRoute();
 
     const { activeAccount } = useAccounts();
@@ -123,6 +131,14 @@ export default defineComponent({
       },
     );
 
+    onIonViewWillEnter(() => {
+      pageIsActive.value = true;
+    });
+
+    onIonViewDidLeave(() => {
+      pageIsActive.value = false;
+    });
+
     return {
       PROTOCOLS,
       DASHBOARD_CARD_ID,
@@ -142,6 +158,7 @@ export default defineComponent({
       daeppBrowserBackground,
       isNodeMainnet,
       isNodeTestnet,
+      pageIsActive,
     };
   },
 });

diff --git a/src/popup/pages/DashboardMultisig.vue b/src/popup/pages/DashboardMultisig.vue
@@ -1,7 +1,7 @@
 <template>
   <IonPage>
     <IonContent class="ion-padding ion-content-bg">
-      <DashboardWrapper>
+      <DashboardWrapper v-if="pageIsActive">
         <template #header>
           <DashboardHeaderMultisig />
         </template>
@@ -26,8 +26,13 @@
 </template>
 
 <script lang="ts">
-import { IonPage, IonContent } from '@ionic/vue';
-import { defineComponent } from 'vue';
+import {
+  IonPage,
+  IonContent,
+  onIonViewWillEnter,
+  onIonViewDidLeave,
+} from '@ionic/vue';
+import { defineComponent, ref } from 'vue';
 
 import { MODAL_TRANSFER_SEND } from '@/constants';
 import { useModals } from '@/composables';
@@ -52,6 +57,8 @@ export default defineComponent({
     IonContent,
   },
   setup() {
+    const pageIsActive = ref(true);
+
     const { openModal } = useModals();
 
     function openTransferSendModal() {
@@ -60,7 +67,16 @@ export default defineComponent({
       });
     }
 
+    onIonViewWillEnter(() => {
+      pageIsActive.value = true;
+    });
+
+    onIonViewDidLeave(() => {
+      pageIsActive.value = false;
+    });
+
     return {
+      pageIsActive,
       ArrowSendIcon,
       openTransferSendModal,
     };