refactor: remove header related meta properties from routes settings

superhero-com · Oct 22, 2024 · 6aa0c6a · 6aa0c6a
1 parent 9bed265
commit 6aa0c6a
Show file tree

Hide file tree

Showing 29 changed files with 1,674 additions and 1,948 deletions.
diff --git a/src/popup/animations/index.ts b/src/popup/animations/index.ts
@@ -1,3 +1 @@
-export * from './popIn';
-export * from './popOut';
 export * from './fade';
diff --git a/src/popup/animations/popIn.ts b/src/popup/animations/popIn.ts
diff --git a/src/popup/animations/popOut.ts b/src/popup/animations/popOut.ts
diff --git a/src/popup/components/AccountDetailsBase.vue b/src/popup/components/AccountDetailsBase.vue
@@ -1,88 +1,86 @@
 <template>
-  <PageWrapper has-sub-pages hide-header>
-    <div
-      class="account-details-base"
-      :data-account-address="activeAccount.address"
-    >
-      <div class="account-info-wrapper">
-        <slot name="account-info">
-          <AccountInfo
-            :account="activeAccount"
-            can-copy-address
-            show-protocol-icon
-          />
-        </slot>
-
-        <BtnClose
-          data-cy="btn-close"
-          class="close-button"
-          @click="close"
+  <div
+    class="account-details-base"
+    :data-account-address="activeAccount.address"
+  >
+    <div class="account-info-wrapper">
+      <slot name="account-info">
+        <AccountInfo
+          :account="activeAccount"
+          can-copy-address
+          show-protocol-icon
         />
-      </div>
+      </slot>
 
-      <div>
+      <BtnClose
+        data-cy="btn-close"
+        class="close-button"
+        @click="close"
+      />
+    </div>
+
+    <div>
+      <slot
+        v-if="$slots.balance"
+        name="balance"
+      />
+      <BalanceInfo
+        v-else
+        :balance="balanceNumeric"
+        :protocol="activeAccount.protocol"
+        horizontal-offline-message
+      />
+
+      <HorizontalScroll
+        ref="buttonsScrollContainer"
+        class="buttons"
+      >
+        <template v-if="!withoutDefaultButtons">
+          <OpenTransferReceiveModalBtn />
+          <OpenTransferSendModalBtn />
+          <OpenShareAddressModalBtn
+            :address="activeAccount.address"
+            :protocol="activeAccount.protocol"
+          />
+          <BtnBox
+            :text="$t('common.key')"
+            :icon="PrivateKeyIcon"
+            data-cy="export-private-key"
+            @click="exportPrivateKey()"
+          />
+        </template>
         <slot
-          v-if="$slots.balance"
-          name="balance"
+          v-if="$slots.buttons"
+          name="buttons"
         />
-        <BalanceInfo
-          v-else
-          :balance="balanceNumeric"
-          :protocol="activeAccount.protocol"
-          horizontal-offline-message
+      </HorizontalScroll>
+
+      <div
+        ref="headerEl"
+        class="header"
+      >
+        <slot name="navigation" />
+
+        <TransactionAndTokenFilter
+          :key="routeName!"
+          :show-all-filter-options="activeAccount.protocol === PROTOCOLS.aeternity"
+          :show-filters="isScrollEnabled"
         />
+      </div>
 
-        <HorizontalScroll
-          ref="buttonsScrollContainer"
-          class="buttons"
-        >
-          <template v-if="!withoutDefaultButtons">
-            <OpenTransferReceiveModalBtn />
-            <OpenTransferSendModalBtn />
-            <OpenShareAddressModalBtn
-              :address="activeAccount.address"
-              :protocol="activeAccount.protocol"
-            />
-            <BtnBox
-              :text="$t('common.key')"
-              :icon="PrivateKeyIcon"
-              data-cy="export-private-key"
-              @click="exportPrivateKey()"
-            />
-          </template>
-          <slot
-            v-if="$slots.buttons"
-            name="buttons"
-          />
-        </HorizontalScroll>
-
-        <div
-          ref="headerEl"
-          class="header"
-        >
-          <slot name="navigation" />
-
-          <TransactionAndTokenFilter
-            :key="routeName!"
-            :show-all-filter-options="activeAccount.protocol === PROTOCOLS.aeternity"
-            :show-filters="isScrollEnabled"
-          />
-        </div>
-
-        <div
-          class="tabs-content"
-          :style="{ height: routerHeight || `${INITIAL_TABS_HEIGHT}px` }"
-        >
-          <!-- We are disabling animations on FF because of a bug that causes flickering
-            see: https://github.com/ionic-team/ionic-framework/issues/26620 -->
-          <IonRouterOutlet
-            :animated="!IS_FIREFOX"
-            :animation="fadeAnimation"
-          />
-        </div>
+      <div
+        class="tabs-content"
+        :style="{ height: routerHeight || `${INITIAL_TABS_HEIGHT}px` }"
+      >
+        <!-- We are disabling animations on FF because of a bug that causes flickering
+          see: https://github.com/ionic-team/ionic-framework/issues/26620 -->
+        <IonRouterOutlet
+          :animated="!IS_FIREFOX"
+          :animation="fadeAnimation"
+        />
       </div>
     </div>
-  </PageWrapper>
+  </div>
 </template>
 
 <script lang="ts">
@@ -110,9 +108,8 @@ import {
   useUi,
   useScrollConfig,
 } from '@/composables';
-import { popOutAnimation, fadeAnimation } from '@/popup/animations';
+import { fadeAnimation } from '@/popup/animations';
 
-import PageWrapper from '@/popup/components/PageWrapper.vue';
 import OpenTransferSendModalBtn from '@/popup/components/OpenTransferSendModalBtn.vue';
 import BalanceInfo from '@/popup/components/BalanceInfo.vue';
 import AccountInfo from '@/popup/components/AccountInfo.vue';
@@ -130,7 +127,6 @@ const INITIAL_TABS_HEIGHT = 330;
 export default defineComponent({
   name: 'AccountDetailsBase',
   components: {
-    PageWrapper,
     AccountInfo,
     BalanceInfo,
     BtnBox,
@@ -174,7 +170,8 @@ export default defineComponent({
     }
 
     function close() {
-      ionRouter.navigate({ name: homeRouteName.value }, 'back', 'push', popOutAnimation);
+      // Used to prevent animating the dashboard when switching the route
+      ionRouter.navigate({ name: homeRouteName.value }, 'back', 'push');
     }
 
     /**

diff --git a/src/popup/components/DefaultPagesRouter.vue b/src/popup/components/DefaultPagesRouter.vue
@@ -15,7 +15,6 @@ import { IonRouterOutlet, IonPage } from '@ionic/vue';
 import { useRoute } from 'vue-router';
 import { useUi } from '@/composables';
 import { RUNNING_IN_TESTS, IS_FIREFOX } from '@/constants';
-import { popInAnimation } from '@/popup/animations';
 import { ROUTE_ACCOUNT, ROUTE_MULTISIG_ACCOUNT } from '../router/routeNames';
 
 // TODO remove?
@@ -50,7 +49,6 @@ export default defineComponent({
     return {
       RUNNING_IN_TESTS,
       IS_FIREFOX,
-      popInAnimation,
     };
   },
 });

diff --git a/src/popup/components/Header.vue b/src/popup/components/Header.vue
@@ -80,33 +80,6 @@ export default defineComponent({
     const { homeRouteName } = useUi();
     const { isLoggedIn } = useAccounts();
 
-    // const pageTitles: Record<string, () => string> = {
-    //   language: () => t('pages.titles.language'),
-    //   sendTip: () => t('pages.titles.sendTip'),
-    //   privacy: () => t('pages.titles.privacy'),
-    //   currency: () => t('pages.titles.currency'),
-    //   auction: () => t('pages.titles.auction'),
-    //   networks: () => t('pages.titles.networks'),
-    //   permissionsSettings: () => t('pages.titles.permissionsSettings'),
-    //   permissionsEdit: () => t('pages.titles.permissionsEdit'),
-    //   permissionsAdd: () => t('pages.titles.permissionsAdd'),
-    //   commentNew: () => t('pages.titles.commentNew'),
-    //   donateError: () => t('pages.titles.donateError'),
-    //   address: () => t('pages.titles.address'),
-    //   signMessage: () => t('pages.titles.signMessage'),
-    //   signTransaction: () => t('pages.titles.signTransaction'),
-    //   saveErrorsLog: () => t('pages.titles.saveErrorsLog'),
-    //   resetWallet: () => t('pages.resetWallet.title'),
-    //   seedPhrase: () => t('pages.titles.seedPhrase'),
-    //   networkAdd: () => t('pages.titles.networkAdd'),
-    //   networkEdit: () => t('pages.titles.networkEdit'),
-    //   notFound: () => t('pages.titles.notFound'),
-    //   multisigProposalDetails: () => t('pages.titles.multisigProposalDetails'),
-    //   secureLogin: () => t('pages.titles.secureLogin'),
-    //   addressBookEdit: () => t('pages.titles.addressBookEdit'),
-    //   addressBookAdd: () => t('pages.titles.addressBookAdd'),
-    // };
-
     const currentHomeRouteName = computed(
       () => isLoggedIn.value
         ? homeRouteName.value

diff --git a/src/popup/components/PageWrapper.vue b/src/popup/components/PageWrapper.vue
@@ -17,10 +17,11 @@
 
     <component
       :is="hasSubPages ? 'div' : 'IonContent'"
+      ref="contentEl"
       :class="{ 'has-header': !hideHeader }"
       class="page-wrapper-content"
     >
-      <slot />
+      <slot v-bind="{ contentEl }" />
     </component>
   </component>
 </template>
@@ -57,6 +58,7 @@ export default defineComponent({
   },
   setup() {
     const isPageActive = ref();
+    const contentEl = ref();
 
     onIonViewDidEnter(() => {
       isPageActive.value = true;
@@ -68,6 +70,7 @@ export default defineComponent({
 
     return {
       isPageActive,
+      contentEl,
     };
   },
 });