diff --git a/CHANGELOG.md b/CHANGELOG.md
index d115396..2b0f271 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -1,5 +1,9 @@
 # Changelog
 
+## Manifest Version 1.2.7
+
+- improve compatibility with ionic 7
+
 ## Manifest Version 1.2.6
 
 - upgrade ionic to v7 and update dependencies
diff --git a/src/extension/manifest.json b/src/extension/manifest.json
index 09063b4..0afdffa 100644
--- a/src/extension/manifest.json
+++ b/src/extension/manifest.json
@@ -3,8 +3,8 @@
     "name": "__MSG_appName__",
     "description": "__MSG_appDesc__",
     "default_locale": "en",
-    "version": "1.2.6",
-    "version_name": "1.2.6",
+    "version": "1.2.7",
+    "version_name": "1.2.7",
     "icons": {
       "16": "assets/extension-icon/wallet_16.png",
       "32": "assets/extension-icon/wallet_32.png",
diff --git a/src/views/AssetsTab.vue b/src/views/AssetsTab.vue
index fc437e6..8b91ee5 100644
--- a/src/views/AssetsTab.vue
+++ b/src/views/AssetsTab.vue
@@ -11,6 +11,7 @@
         cssClass="my-custom-class"
         message="Please wait..."
         :duration="4000"
+        :key="`k${loading}`"
         @didDismiss="loading = false"
       >
       </ion-loading>
diff --git a/src/views/ContractError.vue b/src/views/ContractError.vue
index 8129fcd..22cd6d3 100644
--- a/src/views/ContractError.vue
+++ b/src/views/ContractError.vue
@@ -31,7 +31,13 @@
       <ion-item> Contract: {{ contract }} </ion-item>
       <ion-item>
         <ion-label>Error From Contract:</ion-label>
-        <ion-textarea style="overflow-y: scroll;" :rows="10" :cols="20" :value="error" readonly></ion-textarea>
+        <ion-textarea
+          style="overflow-y: scroll"
+          :rows="10"
+          :cols="20"
+          :value="error"
+          readonly
+        ></ion-textarea>
       </ion-item>
       <ion-item>
         <ion-button @click="onCancel">Exit</ion-button>
@@ -42,6 +48,7 @@
         cssClass="my-custom-class"
         message="Please wait..."
         :duration="4000"
+        :key="`k${loading}`"
         @didDismiss="loading = false"
       >
       </ion-loading>
@@ -65,7 +72,7 @@ import {
   IonLoading,
 } from "@ionic/vue";
 import { useRoute } from "vue-router";
-import { getSelectedNetwork, getUrl, hexTostr, } from "@/utils/platform";
+import { getSelectedNetwork, getUrl, hexTostr } from "@/utils/platform";
 import type { Network } from "@/extension/types";
 import { mainNets } from "@/utils/networks";
 
@@ -86,17 +93,17 @@ export default defineComponent({
     const route = useRoute();
     const error = hexTostr((route.params?.param as string) ?? "");
     const loading = ref(true);
-    const contract = (route.params?.contract as string) ?? ""
+    const contract = (route.params?.contract as string) ?? "";
     const selectedNetwork = (ref(null) as unknown) as Ref<Network>;
- 
+
     const onCancel = () => {
       window.close();
     };
 
     onIonViewWillEnter(async () => {
-      (window as any)?.resizeTo?.(700, 600)
-      selectedNetwork.value = await getSelectedNetwork()
-      loading.value = false
+      (window as any)?.resizeTo?.(700, 600);
+      selectedNetwork.value = await getSelectedNetwork();
+      loading.value = false;
     });
 
     return {
@@ -106,7 +113,7 @@ export default defineComponent({
       selectedNetwork,
       mainNets,
       getUrl,
-      error
+      error,
     };
   },
 });
diff --git a/src/views/HistoryTab.vue b/src/views/HistoryTab.vue
index 6f7e621..a5b5200 100644
--- a/src/views/HistoryTab.vue
+++ b/src/views/HistoryTab.vue
@@ -6,33 +6,58 @@
       </ion-toolbar>
     </ion-header>
     <ion-content class="ion-padding">
-    <ion-item v-if="history.length === 0">
-      You don't have any transaction history
-    </ion-item>
-    <ion-item v-else>
-      <ion-list>
-      <ion-item style="margin-bottom: 0.3rem;margin-top: 0.3rem" v-for="item of history" :key="item.txHash">
-      <ion-list>
-      <ion-item><b style="margin-right: 0.5rem">Date:</b> {{ new Date(item.date).toDateString() }}</ion-item>
-      <ion-item button @click="copyAddress(item.txHash, getToastRef())">
-          <p style="font-size: 0.7rem"><b style="margin-right: 0.5rem"><ion-icon style="margin-right: 0.3rem; display: inline-block;" :icon="copyOutline"></ion-icon>TxHash:</b>{{ item.txHash }}</p>
-        </ion-item>
-      <ion-item v-if="item.chainId"><b style="margin-right: 0.5rem">ChainId:</b> {{ item.chainId }}</ion-item>
-      <ion-item v-if="item.webiste"><b style="margin-right: 0.5rem">Website:</b> {{ item.webiste }}</ion-item>
-      <ion-item v-if="item.txUrl"><b style="margin-right: 0.5rem">ViewTx:</b> <a href="#" @click="openTab(item.txUrl as string)">LINK</a></ion-item>
-      </ion-list>
+      <ion-item v-if="history.length === 0">
+        You don't have any transaction history
       </ion-item>
-      <ion-item>
-        <ion-button style="margin-left: 0.5rem" color="warning" @click="onWipeHistory">WIPE HISTORY</ion-button>
+      <ion-item v-else>
+        <ion-list>
+          <ion-item
+            style="margin-bottom: 0.3rem; margin-top: 0.3rem"
+            v-for="item of history"
+            :key="item.txHash"
+          >
+            <ion-list>
+              <ion-item
+                ><b style="margin-right: 0.5rem">Date:</b>
+                {{ new Date(item.date).toDateString() }}</ion-item
+              >
+              <ion-item button @click="copyAddress(item.txHash, getToastRef())">
+                <p style="font-size: 0.7rem">
+                  <b style="margin-right: 0.5rem"
+                    ><ion-icon
+                      style="margin-right: 0.3rem; display: inline-block"
+                      :icon="copyOutline"
+                    ></ion-icon
+                    >TxHash:</b
+                  >{{ item.txHash }}
+                </p>
+              </ion-item>
+              <ion-item v-if="item.chainId"
+                ><b style="margin-right: 0.5rem">ChainId:</b> {{ item.chainId }}</ion-item
+              >
+              <ion-item v-if="item.webiste"
+                ><b style="margin-right: 0.5rem">Website:</b> {{ item.webiste }}</ion-item
+              >
+              <ion-item v-if="item.txUrl"
+                ><b style="margin-right: 0.5rem">ViewTx:</b>
+                <a href="#" @click="openTab(item.txUrl as string)">LINK</a></ion-item
+              >
+            </ion-list>
+          </ion-item>
+          <ion-item>
+            <ion-button style="margin-left: 0.5rem" color="warning" @click="onWipeHistory"
+              >WIPE HISTORY</ion-button
+            >
+          </ion-item>
+        </ion-list>
       </ion-item>
-      </ion-list>
-    </ion-item>
 
-    <ion-loading
+      <ion-loading
         :is-open="loading"
         cssClass="my-custom-class"
         message="Please wait..."
         :duration="4000"
+        :key="`k${loading}`"
         @didDismiss="loading = false"
       >
       </ion-loading>
@@ -42,42 +67,65 @@
         message="Copied to clipboard"
         :duration="1500"
       ></ion-toast>
-
     </ion-content>
   </ion-page>
 </template>
 
 <script lang="ts">
 import { defineComponent, Ref, ref } from "vue";
-import { IonContent, IonHeader, IonPage, IonTitle, IonToolbar, onIonViewWillEnter, IonItem, IonList, IonToast, IonLoading, IonButton, IonIcon } from "@ionic/vue";
-import { getHistory, copyAddress, wipeHistory, openTab } from '@/utils/platform'
-import type { HistoryItem } from '@/extension/types'
+import {
+  IonContent,
+  IonHeader,
+  IonPage,
+  IonTitle,
+  IonToolbar,
+  onIonViewWillEnter,
+  IonItem,
+  IonList,
+  IonToast,
+  IonLoading,
+  IonButton,
+  IonIcon,
+} from "@ionic/vue";
+import { getHistory, copyAddress, wipeHistory, openTab } from "@/utils/platform";
+import type { HistoryItem } from "@/extension/types";
 
 import { copyOutline } from "ionicons/icons";
 
-
 export default defineComponent({
-  components: { IonContent, IonHeader, IonPage, IonTitle, IonToolbar, IonItem, IonList, IonToast, IonLoading, IonButton, IonIcon  },
+  components: {
+    IonContent,
+    IonHeader,
+    IonPage,
+    IonTitle,
+    IonToolbar,
+    IonItem,
+    IonList,
+    IonToast,
+    IonLoading,
+    IonButton,
+    IonIcon,
+  },
   setup: () => {
     const history = ref([]) as Ref<HistoryItem[]>;
-    const loading = ref(false)
+    const loading = ref(false);
     const toastState = ref(false);
     const getToastRef = () => toastState;
 
     const loadData = async () => {
-      loading.value = true
-      history.value = await getHistory()
-      loading.value = false
-    }
+      loading.value = true;
+      history.value = await getHistory();
+      loading.value = false;
+    };
 
     const onWipeHistory = async () => {
-      await wipeHistory()
+      await wipeHistory();
       loadData();
-    }
+    };
 
     onIonViewWillEnter(async () => {
-      loadData()
-    })
+      loadData();
+    });
     return {
       history,
       loading,
@@ -86,8 +134,8 @@ export default defineComponent({
       toastState,
       copyOutline,
       onWipeHistory,
-      openTab
-    }
-  }
+      openTab,
+    };
+  },
 });
 </script>
diff --git a/src/views/RequestNetwork.vue b/src/views/RequestNetwork.vue
index bfc79fc..e4b6650 100644
--- a/src/views/RequestNetwork.vue
+++ b/src/views/RequestNetwork.vue
@@ -80,6 +80,7 @@
         cssClass="my-custom-class"
         message="Please wait..."
         :duration="4000"
+        :key="`k${loading}`"
         @didDismiss="loading = false"
       />
     </ion-content>
diff --git a/src/views/SignMessage.vue b/src/views/SignMessage.vue
index b12f70c..d781e5a 100644
--- a/src/views/SignMessage.vue
+++ b/src/views/SignMessage.vue
@@ -30,6 +30,7 @@
         cssClass="my-custom-class"
         message="Please wait..."
         :duration="4000"
+        :key="`k${loading}`"
         @didDismiss="loading = false"
       />
     </ion-content>
diff --git a/src/views/SignTx.vue b/src/views/SignTx.vue
index 28b44d1..ea81b90 100644
--- a/src/views/SignTx.vue
+++ b/src/views/SignTx.vue
@@ -99,6 +99,7 @@
         cssClass="my-custom-class"
         message="Please wait..."
         :duration="4000"
+        :key="`k${loading}`"
         @didDismiss="loading = false"
       >
       </ion-loading>
diff --git a/src/views/SwitchNetwork.vue b/src/views/SwitchNetwork.vue
index fd16379..5a678d7 100644
--- a/src/views/SwitchNetwork.vue
+++ b/src/views/SwitchNetwork.vue
@@ -93,6 +93,7 @@
         cssClass="my-custom-class"
         message="Please wait..."
         :duration="4000"
+        :key="`k${loading}`"
         @didDismiss="loading = false"
       />
     </ion-content>
diff --git a/src/views/UnlockModal.vue b/src/views/UnlockModal.vue
index baf9703..8ce3005 100644
--- a/src/views/UnlockModal.vue
+++ b/src/views/UnlockModal.vue
@@ -2,41 +2,41 @@
   <ion-page>
     <ion-header>
       <ion-toolbar>
-              <ion-buttons slot="start">
-                <ion-button @click="close">Close</ion-button>
-              </ion-buttons>
+        <ion-buttons slot="start">
+          <ion-button @click="close">Close</ion-button>
+        </ion-buttons>
         <ion-title>Unlock to Proceed</ion-title>
       </ion-toolbar>
     </ion-header>
-    
+
     <ion-content class="ion-padding">
-        <ion-list>
-         <ion-list v-if="unlockType === 'message'">
-         <ion-item>To continue signing the message, unlock wallet.</ion-item>
-            <ion-item>Closing will reject sigining the message.</ion-item>
-         </ion-list>
-         <ion-list v-else-if="unlockType === 'viewPk'">
-         <ion-item>To view the PK, unlock wallet.</ion-item>
-            <ion-item>Closing will not show the PK.</ion-item>
-         </ion-list>
-         <ion-list v-else-if="unlockType === 'addAccount'">
-         <ion-item>Storage Encrypted, Unlock to add account.</ion-item>
-            <ion-item>Closing will not add the account.</ion-item>
-         </ion-list>
-         <ion-list v-else>
-            <ion-item>To continue sending the transaction, unlock wallet.</ion-item>
-            <ion-item>Closing will reject sending the transaction.</ion-item>
-         </ion-list>
-          <ion-item>
-            <ion-label>Unlock Password</ion-label>
-          </ion-item> 
-          <ion-item>
+      <ion-list>
+        <ion-list v-if="unlockType === 'message'">
+          <ion-item>To continue signing the message, unlock wallet.</ion-item>
+          <ion-item>Closing will reject sigining the message.</ion-item>
+        </ion-list>
+        <ion-list v-else-if="unlockType === 'viewPk'">
+          <ion-item>To view the PK, unlock wallet.</ion-item>
+          <ion-item>Closing will not show the PK.</ion-item>
+        </ion-list>
+        <ion-list v-else-if="unlockType === 'addAccount'">
+          <ion-item>Storage Encrypted, Unlock to add account.</ion-item>
+          <ion-item>Closing will not add the account.</ion-item>
+        </ion-list>
+        <ion-list v-else>
+          <ion-item>To continue sending the transaction, unlock wallet.</ion-item>
+          <ion-item>Closing will reject sending the transaction.</ion-item>
+        </ion-list>
+        <ion-item>
+          <ion-label>Unlock Password</ion-label>
+        </ion-item>
+        <ion-item>
           <ion-input v-model="mpPass" type="password"></ion-input>
         </ion-item>
       </ion-list>
       <ion-item>
-          <ion-button @click="unlock">Confirm</ion-button>
-        </ion-item>
+        <ion-button @click="unlock">Confirm</ion-button>
+      </ion-item>
       <ion-alert
         :is-open="alertOpen"
         header="Error"
@@ -49,6 +49,7 @@
         cssClass="my-custom-class"
         message="Please wait..."
         :duration="4000"
+        :key="`k${loading}`"
         @didDismiss="loading = false"
       />
     </ion-content>
@@ -71,21 +72,17 @@ import {
   IonList,
   IonButtons,
   modalController,
-  IonLoading
+  IonLoading,
 } from "@ionic/vue";
-import {
-  getAccounts,
-  replaceAccounts,
-  saveSelectedAccount
-} from "@/utils/platform";
-import { decrypt, getCryptoParams } from "@/utils/webCrypto"
+import { getAccounts, replaceAccounts, saveSelectedAccount } from "@/utils/platform";
+import { decrypt, getCryptoParams } from "@/utils/webCrypto";
 
 export default defineComponent({
   props: {
     unlockType: {
-        type: String,
-        default: 'message'
-    }
+      type: String,
+      default: "message",
+    },
   },
   components: {
     IonContent,
@@ -100,46 +97,45 @@ export default defineComponent({
     IonAlert,
     IonList,
     IonButtons,
-    IonLoading
+    IonLoading,
   },
   setup: () => {
-    const mpPass = ref('');
+    const mpPass = ref("");
     const loading = ref(false);
     const alertOpen = ref(false);
-    const alertMsg = ref('');
+    const alertMsg = ref("");
 
     const close = () => {
-        return modalController?.dismiss(null, 'cancel');
-    }
+      return modalController?.dismiss(null, "cancel");
+    };
 
     const unlock = async () => {
-        try {
-        loading.value = true
-        let accounts = await getAccounts()
-        const cryptoParams = await getCryptoParams(mpPass.value)
-        const accProm = accounts.map(async a => {
-          if(a.encPk) {
-            a.pk = await decrypt(a.encPk, cryptoParams)
+      try {
+        loading.value = true;
+        let accounts = await getAccounts();
+        const cryptoParams = await getCryptoParams(mpPass.value);
+        const accProm = accounts.map(async (a) => {
+          if (a.encPk) {
+            a.pk = await decrypt(a.encPk, cryptoParams);
           }
-          return a
-        })
-        accounts = await Promise.all(accProm)
-        await replaceAccounts(accounts)
-        await saveSelectedAccount(accounts[0])
-        loading.value = false
-        return modalController?.dismiss(mpPass.value, 'confirm');
-        } catch {
-        loading.value = false
-        alertMsg.value = 'Decryption failed, password is not correct, try again.';
-        alertOpen.value = true
-        return
-        }
-    }
-
+          return a;
+        });
+        accounts = await Promise.all(accProm);
+        await replaceAccounts(accounts);
+        await saveSelectedAccount(accounts[0]);
+        loading.value = false;
+        return modalController?.dismiss(mpPass.value, "confirm");
+      } catch {
+        loading.value = false;
+        alertMsg.value = "Decryption failed, password is not correct, try again.";
+        alertOpen.value = true;
+        return;
+      }
+    };
 
     return {
-        loading,
-        unlock,
+      loading,
+      unlock,
       mpPass,
       alertOpen,
       alertMsg,
diff --git a/src/views/WalletError.vue b/src/views/WalletError.vue
index 864502f..43f96b7 100644
--- a/src/views/WalletError.vue
+++ b/src/views/WalletError.vue
@@ -29,6 +29,7 @@
         cssClass="my-custom-class"
         message="Please wait..."
         :duration="4000"
+        :key="`k${loading}`"
         @didDismiss="loading = false"
       >
       </ion-loading>