From a3f92bc3e8fe5687b3474874a90f7dff7aa5965b Mon Sep 17 00:00:00 2001
From: Andrei O <andrei@flashsoft.eu>
Date: Tue, 7 Mar 2023 19:16:55 +0200
Subject: [PATCH] changes for: `1.2.4`

---
 .gitignore                  |   1 +
 CHANGELOG.md                |   6 +
 src/extension/manifest.json |   4 +-
 src/views/AssetsTab.vue     | 793 ++++++++++++++++++++-----------
 src/views/SettingsTab.vue   | 924 ++++++++++++++++++++----------------
 5 files changed, 1041 insertions(+), 687 deletions(-)

diff --git a/.gitignore b/.gitignore
index 49170dd..21083c2 100644
--- a/.gitignore
+++ b/.gitignore
@@ -34,3 +34,4 @@ npm-debug.log*
 /src/extension/webInject.js
 releases
 rules.json
+docs
diff --git a/CHANGELOG.md b/CHANGELOG.md
index 00fb635..1b64605 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -1,5 +1,11 @@
 # Changelog
 
+## Manifest Version 1.2.4
+
+- updated showing assets page to use new api
+- removed yup score from assets page
+- change the info modal in settings
+
 ## Manifest Version 1.2.3
 
 - injected stub with chrome feature available in chrome 103 ( register world ) to bypass CSP
diff --git a/src/extension/manifest.json b/src/extension/manifest.json
index c047960..00cba75 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.2",
-    "version_name": "1.2.2",
+    "version": "1.2.4",
+    "version_name": "1.2.4",
     "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 68a1981..fc437e6 100644
--- a/src/views/AssetsTab.vue
+++ b/src/views/AssetsTab.vue
@@ -6,7 +6,6 @@
       </ion-toolbar>
     </ion-header>
     <ion-content class="ion-padding">
-      
       <ion-loading
         :is-open="loading"
         cssClass="my-custom-class"
@@ -23,312 +22,554 @@
       ></ion-toast>
 
       <ion-item>
-          <ion-label>Assests for Account: {{ selectedAccount?.name }}</ion-label>
-        </ion-item>
-        <ion-item button @click="copyAddress(selectedAccount?.address, getToastRef())">
-          <p style="font-size: 0.7rem">{{ selectedAccount?.address }}</p>
-          <ion-icon style="margin-left: 0.5rem" :icon="copyOutline"></ion-icon>
-        </ion-item>
-    <template v-if="isError">
-        Assets info could not be retrieved because of an http error, API down or conectivity issues.
-    </template>
-    <template v-else-if="noAssets">
-      No assets found for this wallet address.
-    </template>
-    <template v-else>
-        <ion-item v-if="assets.yupScore">
-        <span style="font-size: 0.9rem">YUP Score:</span> <span style="font-size: 1.1rem; margin-left: 0.5rem">{{ assets.yupScore.toFixed(2) }}</span>
-        </ion-item>
-        <ion-item>
-          <p style="font-size: 0.7rem">YUP score is a score of your wallet based on assets and transactions. </p>
-        </ion-item>
-      <template v-if="assets.tokens">
-       <template v-if="ethTokens.length">
-       <ion-item>Ethereum Tokens</ion-item>
-       <ion-list>
-        <ion-item v-for="token of ethTokens" :key="token.address">
-        <ion-avatar
-          v-if="token?.image"
-          style="margin-right: 1rem; width: 1.8rem; height: 1.8rem"
-        >
-          <img
-            :alt="token?.name"
-            :src="token?.image"
-            @error="token.image = getUrl('assets/randomGrad.svg')"
-          />
-        </ion-avatar>
-        <ion-label><b>{{ token?.symbol }}:</b> {{ token?.balance }}</ion-label>
+        <ion-label>Assests for Account: {{ selectedAccount?.name }}</ion-label>
       </ion-item>
-      <ion-item v-if="hasMore.ethTokens">
-      <ion-button @click="loadMore('ethTokens')">Load More</ion-button>
+      <ion-item button @click="copyAddress(selectedAccount?.address, getToastRef())">
+        <p style="font-size: 0.7rem">{{ selectedAccount?.address }}</p>
+        <ion-icon style="margin-left: 0.5rem" :icon="copyOutline"></ion-icon>
       </ion-item>
-       </ion-list>
-       </template>
-
-       <template v-if="polyTokens.length">
-       <ion-item>Polygon Tokens</ion-item>
-       <ion-list>
-        <ion-item v-for="token of polyTokens" :key="token.address">
-        <ion-avatar
-          v-if="token?.image"
-          style="margin-right: 1rem; width: 1.8rem; height: 1.8rem"
-        >
-          <img
-            :alt="token?.name"
-            :src="token?.image"
-            @error="token.image = getUrl('assets/randomGrad.svg')"
-          />
-        </ion-avatar>
-        <ion-label><b>{{ token?.symbol }}:</b> {{ token?.balance }}</ion-label>
-      </ion-item>
-      <ion-item v-if="hasMore.polyTokens">
-      <ion-button @click="loadMore('polyTokens')">Load More</ion-button>
-      </ion-item>
-       </ion-list>
-       </template>
-
+      <template v-if="isError">
+        Assets info could not be retrieved because of an http error, API down or
+        conectivity issues.
       </template>
-      <template v-if="assets.nfts">
-        
-        <template v-if="ethNfts.length">
-       <ion-item>Ethereum NFTs</ion-item>
-       <ion-list>
-        <ion-item v-for="nft of ethNfts" :key="nft.address">
-        <ion-avatar
-          v-if="nft?.imageURI"
-          style="margin-right: 1rem; width: 1.8rem; height: 1.8rem"
-        >
-          <img
-            :alt="nft?.collectionName"
-            :src="nft?.imageURI"
-            @error="nft.imageURI = getUrl('assets/randomGrad.svg')"
-          />
-        </ion-avatar>
-        <ion-label><b>{{ nft?.collectionName }}</b></ion-label>
-      </ion-item>
-      <ion-item v-if="hasMore.ethNfts">
-      <ion-button @click="loadMore('ethNfts')">Load More</ion-button>
-      </ion-item>
-       </ion-list>
-       </template>
+      <template v-else-if="noAssets"> No assets found for this wallet address. </template>
+      <template v-else>
+        <template v-if="ethTokens.length || polyTokens.length">
+          <template v-if="ethTokens.length">
+            <ion-item>Ethereum Tokens</ion-item>
+            <ion-list>
+              <ion-item v-for="token of ethTokens" :key="token.address">
+                <ion-avatar
+                  v-if="token?.image"
+                  style="margin-right: 1rem; width: 1.8rem; height: 1.8rem"
+                >
+                  <img
+                    :alt="token?.name"
+                    :src="token?.image"
+                    @error="token.image = getUrl('assets/randomGrad.svg')"
+                  />
+                </ion-avatar>
+                <ion-label
+                  ><b>{{ token?.symbol }}:</b> {{ token?.balance }}</ion-label
+                >
+              </ion-item>
+              <ion-item v-if="hasMore.ethTokens">
+                <ion-button @click="loadMore('ethTokens')">Load More</ion-button>
+              </ion-item>
+            </ion-list>
+          </template>
 
-       <template v-if="polyNfts.length">
-       <ion-item>Polygon NFTs</ion-item>
-       <ion-list>
-        <ion-item v-for="nft of polyNfts" :key="nft.address">
-        <ion-avatar
-          v-if="nft?.imageURI"
-          style="margin-right: 1rem; width: 1.8rem; height: 1.8rem"
-        >
-          <img
-            :alt="nft?.collectionName"
-            :src="nft?.imageURI"
-            @error="nft.imageURI = getUrl('assets/randomGrad.svg')"
-          />
-        </ion-avatar>
-        <ion-label><b>{{ nft?.collectionName }}</b></ion-label>
-      </ion-item>
-      <ion-item v-if="hasMore.polyNfts">
-      <ion-button @click="loadMore('polyNfts')">Load More</ion-button>
-      </ion-item>
-       </ion-list>
-       </template>
+          <template v-if="polyTokens.length">
+            <ion-item>Polygon Tokens</ion-item>
+            <ion-list>
+              <ion-item v-for="token of polyTokens" :key="token.address">
+                <ion-avatar
+                  v-if="token?.image"
+                  style="margin-right: 1rem; width: 1.8rem; height: 1.8rem"
+                >
+                  <img
+                    :alt="token?.name"
+                    :src="token?.image"
+                    @error="token.image = getUrl('assets/randomGrad.svg')"
+                  />
+                </ion-avatar>
+                <ion-label
+                  ><b>{{ token?.symbol }}:</b> {{ token?.balance }}</ion-label
+                >
+              </ion-item>
+              <ion-item v-if="hasMore.polyTokens">
+                <ion-button @click="loadMore('polyTokens')">Load More</ion-button>
+              </ion-item>
+            </ion-list>
+          </template>
+        </template>
+        <template v-if="ethNfts.length || polyNfts.length">
+          <template v-if="ethNfts.length">
+            <ion-item>Ethereum NFTs</ion-item>
+            <ion-list>
+              <ion-item v-for="nft of ethNfts" :key="nft.address">
+                <ion-avatar
+                  v-if="nft?.imageURI"
+                  style="margin-right: 1rem; width: 1.8rem; height: 1.8rem"
+                >
+                  <img
+                    :alt="nft?.collectionName"
+                    :src="nft?.imageURI"
+                    @error="nft.imageURI = getUrl('assets/randomGrad.svg')"
+                  />
+                </ion-avatar>
+                <ion-label
+                  ><b>{{ nft?.collectionName }}</b></ion-label
+                >
+              </ion-item>
+              <ion-item v-if="hasMore.ethNfts">
+                <ion-button @click="loadMore('ethNfts')">Load More</ion-button>
+              </ion-item>
+            </ion-list>
+          </template>
 
-      </template>
-      <template v-if="assets.poaps">
+          <template v-if="polyNfts.length">
+            <ion-item>Polygon NFTs</ion-item>
+            <ion-list>
+              <ion-item v-for="nft of polyNfts" :key="nft.address">
+                <ion-avatar
+                  v-if="nft?.imageURI"
+                  style="margin-right: 1rem; width: 1.8rem; height: 1.8rem"
+                >
+                  <img
+                    :alt="nft?.collectionName"
+                    :src="nft?.imageURI"
+                    @error="nft.imageURI = getUrl('assets/randomGrad.svg')"
+                  />
+                </ion-avatar>
+                <ion-label
+                  ><b>{{ nft?.collectionName }}</b></ion-label
+                >
+              </ion-item>
+              <ion-item v-if="hasMore.polyNfts">
+                <ion-button @click="loadMore('polyNfts')">Load More</ion-button>
+              </ion-item>
+            </ion-list>
+          </template>
+        </template>
         <template v-if="poaps.length">
-       <ion-item>POAPs</ion-item>
-       <ion-list>
-        <ion-item v-for="nft of poaps" :key="nft.eventId">
-        <ion-avatar
-          v-if="nft?.image"
-          style="margin-right: 1rem; width: 1.8rem; height: 1.8rem"
-        >
-          <img
-            :alt="nft?.title"
-            :src="nft?.image"
-            @error="nft.image = getUrl('assets/randomGrad.svg')"
-          />
-        </ion-avatar>
-        <ion-label><b>{{ nft?.title }}</b></ion-label>
-      </ion-item>
-      <ion-item v-if="hasMore.poaps">
-      <ion-button @click="loadMore('poaps')">Load More</ion-button>
-      </ion-item>
-       </ion-list>
-       </template>
+          <ion-item>POAPs</ion-item>
+          <ion-list>
+            <ion-item v-for="nft of poaps" :key="nft.eventId">
+              <ion-avatar
+                v-if="nft?.image"
+                style="margin-right: 1rem; width: 1.8rem; height: 1.8rem"
+              >
+                <img
+                  :alt="nft?.title"
+                  :src="nft?.image"
+                  @error="nft.image = getUrl('assets/randomGrad.svg')"
+                />
+              </ion-avatar>
+              <ion-label
+                ><b>{{ nft?.title }}</b></ion-label
+              >
+            </ion-item>
+            <ion-item v-if="hasMore.poaps">
+              <ion-button @click="loadMore('poaps')">Load More</ion-button>
+            </ion-item>
+          </ion-list>
+        </template>
       </template>
-  </template>
-</ion-content>
-</ion-page>
+    </ion-content>
+  </ion-page>
 </template>
 
 <script lang="ts">
 import { defineComponent, Ref, ref, reactive } from "vue";
-import { IonContent, IonHeader, IonPage, IonTitle, IonToolbar, onIonViewWillEnter, IonItem, IonLabel, IonAvatar, IonList, IonButton, IonToast, IonLoading, IonIcon } from "@ionic/vue";
-import { getSelectedAccount, copyAddress, getUrl } from "@/utils/platform"
-import type { Account } from "@/extension/types"
+import {
+  IonContent,
+  IonHeader,
+  IonPage,
+  IonTitle,
+  IonToolbar,
+  onIonViewWillEnter,
+  IonItem,
+  IonLabel,
+  IonAvatar,
+  IonList,
+  IonButton,
+  IonToast,
+  IonLoading,
+  IonIcon,
+} from "@ionic/vue";
+import { getSelectedAccount, copyAddress, getUrl } from "@/utils/platform";
+import type { Account } from "@/extension/types";
 
 import { copyOutline } from "ionicons/icons";
 
-
-const yupAssetsApi = 'https://api.yup.io/profile'
-
 interface IProfileToken {
-      address: string
-      balance: number
-      image: string
-      name: string
-      symbol: string
-    }
+  address: string;
+  balance: number;
+  image: string;
+  name: string;
+  symbol: string;
+}
 
-    interface IProfileNFT {
-      address: string
-      collectionImageURI: string
-      collectionName: string
-      imageURI: string
-      link: string
-      tokenId: number
-    }
+interface IProfileNFT {
+  address: string;
+  collectionImageURI: string;
+  collectionName: string;
+  imageURI: string;
+  link: string;
+  tokenId: number;
+}
 
-    interface IProfilePOAP {
-      description: string
-      eventId: string
-      image: string
-      link: string
-      title: string
-    }
+interface IProfilePOAP {
+  description: string;
+  eventId: string;
+  image: string;
+  link: string;
+  title: string;
+}
 
 export default defineComponent({
-  components: { IonContent, IonHeader, IonPage, IonTitle, IonToolbar, IonItem, IonLabel, IonAvatar, IonList, IonButton, IonToast, IonLoading, IonIcon },
+  components: {
+    IonContent,
+    IonHeader,
+    IonPage,
+    IonTitle,
+    IonToolbar,
+    IonItem,
+    IonLabel,
+    IonAvatar,
+    IonList,
+    IonButton,
+    IonToast,
+    IonLoading,
+    IonIcon,
+  },
   setup: () => {
-    const selectedAccount = ref({}) as Ref<Account>
-    const assets = ref({}) as Ref< {
-      yupScore?: number
-      tokens?: any[] 
-      nfts?: any[]
-      poaps?: any[]
-    }>
-    const loading = ref(true)
-    const isError = ref(false)
-    const noAssets = ref(false)
+    const selectedAccount = ref({}) as Ref<Account>;
+    const loading = ref(true);
+    const isError = ref(false);
+    const noAssets = ref(false);
     const toastState = ref(false);
-    const ethTokens = ref([]) as Ref< IProfileToken[]>
-    const polyTokens = ref([]) as Ref< IProfileToken[]>
-    const ethNfts = ref([]) as Ref< IProfileNFT[]>
-    const polyNfts = ref([]) as Ref< IProfileNFT[]>
-    const poaps = ref([]) as Ref< IProfilePOAP[]>
+    const ethTokens = ref([]) as Ref<IProfileToken[]>;
+    const polyTokens = ref([]) as Ref<IProfileToken[]>;
+    const ethNfts = ref([]) as Ref<IProfileNFT[]>;
+    const polyNfts = ref([]) as Ref<IProfileNFT[]>;
+    const poaps = ref([]) as Ref<IProfilePOAP[]>;
     const hasMore = reactive({
       poaps: true,
       ethTokens: true,
       polyTokens: true,
       ethNfts: true,
       polyNfts: true,
-    })
+    });
     const getToastRef = () => toastState;
 
+    const resources = ["nfts", "poaps", "tokens"];
+    const chains = ["ethereum", "polygon"];
+
+    const fetchFromWallet = async ({
+      apiBase = "https://api.yup.io",
+      address,
+      resource = resources[0],
+      chain = chains[0],
+      start = 0,
+      limit = 10,
+    }: {
+      apiBase?: string;
+      address: string;
+      resource?: string;
+      chain?: string;
+      start?: number;
+      limit?: number;
+    }) => {
+      try {
+        const res = await fetch(
+          `${apiBase}/web3-profiles/${resource}/${address}?chain=${chain}&start=${start}&limit=${limit}`
+        );
+        const req = await res.json();
+        if (res.ok) {
+          return req;
+        } else {
+          return null;
+        }
+      } catch (error) {
+        console.error("Failed to fetch web3 profiles", error);
+        return null;
+      }
+    };
+
+    const walletLoadArgs = {
+      address: "",
+      start: 0,
+      limit: 11,
+      res: resources,
+      ch: chains,
+      apiBase: "https://api.yup.io",
+    };
+
+    const getProfileWallet = async ({
+      address,
+      start,
+      limit,
+      res,
+      ch,
+      apiBase,
+    }: {
+      address: string;
+      start: number;
+      limit: number;
+      res: string[];
+      ch: string[];
+      apiBase: string;
+    }) => {
+      const r = {
+        poaps: [] as IProfilePOAP[],
+        ethNfts: [] as IProfileNFT[],
+        polyNfts: [] as IProfileNFT[],
+        ethTokens: [] as IProfileToken[],
+        polyTokens: [] as IProfileToken[],
+      };
+      try {
+        const promises = [];
+
+        if (res.includes("poaps")) {
+          promises.push(
+            fetchFromWallet({
+              apiBase,
+              address,
+              start,
+              limit,
+              resource: "poaps",
+              chain: "ethereum",
+            }).then((rz) => {
+              r.poaps = rz ?? [];
+            })
+          );
+        }
+        if (res.includes("nfts")) {
+          if (ch.includes("ethereum")) {
+            promises.push(
+              fetchFromWallet({
+                apiBase,
+                address,
+                start,
+                limit,
+                resource: "nfts",
+                chain: "ethereum",
+              }).then((rz) => {
+                r.ethNfts = rz ?? [];
+              })
+            );
+          }
+          if (ch.includes("polygon")) {
+            promises.push(
+              fetchFromWallet({
+                apiBase,
+                address,
+                start,
+                limit,
+                resource: "nfts",
+                chain: "polygon",
+              }).then((rz) => {
+                r.polyNfts = rz ?? [];
+              })
+            );
+          }
+        }
+        if (res.includes("tokens")) {
+          if (ch.includes("ethereum")) {
+            promises.push(
+              fetchFromWallet({
+                apiBase,
+                address,
+                start,
+                limit,
+                resource: "tokens",
+                chain: "ethereum",
+              }).then((rz) => {
+                r.ethTokens = rz ?? [];
+              })
+            );
+          }
+          if (ch.includes("polygon")) {
+            promises.push(
+              fetchFromWallet({
+                apiBase,
+                address,
+                start,
+                limit,
+                resource: "tokens",
+                chain: "polygon",
+              }).then((rz) => {
+                r.polyTokens = rz ?? [];
+              })
+            );
+          }
+        }
+
+        await Promise.all(promises);
+        return r;
+      } catch {
+        return r;
+      }
+    };
+
     onIonViewWillEnter(async () => {
-        selectedAccount.value = await getSelectedAccount()
-        const req = await fetch(`${yupAssetsApi}/${selectedAccount.value.address}`)
-        if(req.ok) {
-          assets.value = (await req.json()) ?? {}
-          if(!('poaps' in assets.value) && !('tokens' in assets.value) && !('nfts' in assets.value)) {
-            noAssets.value = true
-          }
-          if ('poaps' in assets.value) {
-            poaps.value = assets.value?.poaps?.slice(0, 10) ?? []
-            if(poaps.value.length >= (assets.value?.poaps?.length ?? 0)) {
-              hasMore.poaps = false
-            }
-          }
-          if ('nfts' in assets.value) {
-            ethNfts.value = assets.value?.nfts?.filter(n => n.chain === 'ethereum').slice(0, 10) ?? []
-            if(ethNfts.value.length >= (assets.value?.nfts?.filter(n => n.chain === 'ethereum').length ?? 0)) {
-              hasMore.ethNfts = false
-            }
-            polyNfts.value = assets.value?.nfts?.filter(n => n.chain === 'polygon').slice(0, 10) ?? []
-            if(polyNfts.value.length >= (assets.value?.nfts?.filter(n => n.chain === 'polygon').length ?? 0)) {
-              hasMore.polyNfts = false
-            }
-          }
-          if ('tokens' in assets.value) {
-            ethTokens.value = assets.value?.tokens?.filter(n => n.chain === 'ethereum').slice(0, 10) ?? []
-            if(ethTokens.value.length >= (assets.value?.tokens?.filter(n => n.chain === 'ethereum').length ?? 0)) {
-              hasMore.ethTokens = false
-            }
-            polyTokens.value = assets.value?.tokens?.filter(n => n.chain === 'polygon').slice(0, 10) ?? []
-            if(polyTokens.value.length >= (assets.value?.tokens?.filter(n => n.chain === 'polygon').length ?? 0)) {
-              hasMore.polyTokens = false
-            }
-          }
-        }else {
-          isError.value = true
-        }
-        loading .value = false
-      })
-
-      const loadMore = (type: string) => {
-        switch(type) {
-          case 'ethTokens': {
-          ethTokens.value = assets.value?.tokens?.filter(n => n.chain === 'ethereum').slice(0, ethTokens.value.length + 10) ?? []
-            if(ethTokens.value.length >= (assets.value?.tokens?.filter(n => n.chain === 'ethereum').length ?? 0)) {
-              hasMore.ethTokens = false
-            }
-            break
-          }
-          case 'polyTokens': {
-            polyTokens.value = assets.value?.tokens?.filter(n => n.chain === 'polygon').slice(0, polyTokens.value.length + 10) ?? []
-            if(polyTokens.value.length >= (assets.value?.tokens?.filter(n => n.chain === 'polygon').length ?? 0)) {
-              hasMore.polyTokens = false
-            }
-          break
-          }
-          case 'ethNfts': {
-            ethNfts.value = assets.value?.nfts?.filter(n => n.chain === 'ethereum').slice(0, ethNfts.value.length + 10) ?? []
-            if(ethNfts.value.length >= (assets.value?.nfts?.filter(n => n.chain === 'ethereum').length ?? 0)) {
-              hasMore.ethNfts = false
-            }
-          break
-          }
-          case 'polyNfts': {
-            polyNfts.value = assets.value?.nfts?.filter(n => n.chain === 'polygon').slice(0, polyNfts.value.length +  10) ?? []
-            if(polyNfts.value.length >= (assets.value?.nfts?.filter(n => n.chain === 'polygon').length ?? 0)) {
-              hasMore.polyNfts = false
-            }
-          break
-          }
-          case 'poaps': {
-            poaps.value = assets.value?.poaps?.slice(0, poaps.value.length + 10) ?? []
-            if(poaps.value.length >= (assets.value?.poaps?.length ?? 0)) {
-              hasMore.poaps = false
-            }
-          break
-          }
-        }
-
-
+      selectedAccount.value = await getSelectedAccount();
+      walletLoadArgs.address = selectedAccount.value.address;
+      const r = await getProfileWallet(walletLoadArgs);
+      ethNfts.value = r.ethNfts.slice(0, 10);
+      if (r.ethNfts.length !== walletLoadArgs.limit) {
+        hasMore.ethNfts = false;
       }
-
-      return {
-        selectedAccount,
-        loading,
-        isError,
-        noAssets,
-        assets,
-        getToastRef,
-        copyAddress,
-        copyOutline,
-        ethTokens,
-        polyTokens,
-        ethNfts,
-        poaps,
-        hasMore,
-        polyNfts,
-        loadMore,
-        toastState,
-        getUrl
+      polyNfts.value = r.polyNfts.slice(0, 10);
+      if (r.polyNfts.length !== walletLoadArgs.limit) {
+        hasMore.polyNfts = false;
       }
-  }
+      ethTokens.value = r.ethTokens.slice(0, 10);
+      if (r.ethTokens.length !== walletLoadArgs.limit) {
+        hasMore.ethTokens = false;
+      }
+      polyTokens.value = r.polyTokens.slice(0, 10);
+      if (r.polyTokens.length !== walletLoadArgs.limit) {
+        hasMore.polyTokens = false;
+      }
+      poaps.value = r.poaps.slice(0, -1);
+      if (r.poaps.length !== walletLoadArgs.limit) {
+        hasMore.poaps = false;
+      }
+      noAssets.value =
+        poaps.value.length &&
+        ethNfts.value.length &&
+        polyNfts.value.length &&
+        ethTokens.value.length &&
+        polyTokens.value.length
+          ? false
+          : true;
+      loading.value = false;
+
+      // const req = await fetch(`${yupAssetsApi}/${selectedAccount.value.address}`);
+      // if (req.ok) {
+      //   assets.value = (await req.json()) ?? {};
+      //   if (
+      //     !("poaps" in assets.value) &&
+      //     !("tokens" in assets.value) &&
+      //     !("nfts" in assets.value)
+      //   ) {
+      //     noAssets.value = true;
+      //   }
+      //   if ("poaps" in assets.value) {
+      //     poaps.value = assets.value?.poaps?.slice(0, 10) ?? [];
+      //     if (poaps.value.length >= (assets.value?.poaps?.length ?? 0)) {
+      //       hasMore.poaps = false;
+      //     }
+      //   }
+      //   if ("nfts" in assets.value) {
+      //     ethNfts.value =
+      //       assets.value?.nfts?.filter((n) => n.chain === "ethereum").slice(0, 10) ?? [];
+      //     if (
+      //       ethNfts.value.length >=
+      //       (assets.value?.nfts?.filter((n) => n.chain === "ethereum").length ?? 0)
+      //     ) {
+      //       hasMore.ethNfts = false;
+      //     }
+      //     polyNfts.value =
+      //       assets.value?.nfts?.filter((n) => n.chain === "polygon").slice(0, 10) ?? [];
+      //     if (
+      //       polyNfts.value.length >=
+      //       (assets.value?.nfts?.filter((n) => n.chain === "polygon").length ?? 0)
+      //     ) {
+      //       hasMore.polyNfts = false;
+      //     }
+      //   }
+      //   if ("tokens" in assets.value) {
+      //     ethTokens.value =
+      //       assets.value?.tokens?.filter((n) => n.chain === "ethereum").slice(0, 10) ??
+      //       [];
+      //     if (
+      //       ethTokens.value.length >=
+      //       (assets.value?.tokens?.filter((n) => n.chain === "ethereum").length ?? 0)
+      //     ) {
+      //       hasMore.ethTokens = false;
+      //     }
+      //     polyTokens.value =
+      //       assets.value?.tokens?.filter((n) => n.chain === "polygon").slice(0, 10) ?? [];
+      //     if (
+      //       polyTokens.value.length >=
+      //       (assets.value?.tokens?.filter((n) => n.chain === "polygon").length ?? 0)
+      //     ) {
+      //       hasMore.polyTokens = false;
+      //     }
+      //   }
+      // } else {
+      //   isError.value = true;
+      // }
+      // loading.value = false;
+    });
+
+    const loadMore = async (type: string) => {
+      switch (type) {
+        case "ethTokens": {
+          walletLoadArgs.start = ethTokens.value.length;
+          walletLoadArgs.res = ["tokens"];
+          walletLoadArgs.ch = ["ethereum"];
+          const r = await getProfileWallet(walletLoadArgs);
+          if (r.ethTokens.length !== walletLoadArgs.limit) {
+            hasMore.ethTokens = false;
+            return;
+          }
+          ethTokens.value = [...ethTokens.value, ...r.ethTokens.slice(0, 10)];
+          break;
+        }
+        case "polyTokens": {
+          walletLoadArgs.start = polyTokens.value.length;
+          walletLoadArgs.res = ["tokens"];
+          walletLoadArgs.ch = ["polygon"];
+          const r = await getProfileWallet(walletLoadArgs);
+          if (r.polyTokens.length !== walletLoadArgs.limit) {
+            hasMore.polyTokens = false;
+            return;
+          }
+          polyTokens.value = [...polyTokens.value, ...r.polyTokens.slice(0, 10)];
+          break;
+        }
+        case "ethNfts": {
+          walletLoadArgs.start = ethNfts.value.length;
+          walletLoadArgs.res = ["nfts"];
+          walletLoadArgs.ch = ["ethereum"];
+          const r = await getProfileWallet(walletLoadArgs);
+          if (r.ethNfts.length !== walletLoadArgs.limit) {
+            hasMore.ethNfts = false;
+            return;
+          }
+          ethNfts.value = [...ethNfts.value, ...r.ethNfts.slice(0, 10)];
+          break;
+        }
+        case "polyNfts": {
+          walletLoadArgs.start = polyNfts.value.length;
+          walletLoadArgs.res = ["nfts"];
+          walletLoadArgs.ch = ["polygon"];
+          const r = await getProfileWallet(walletLoadArgs);
+          if (r.polyNfts.length !== walletLoadArgs.limit) {
+            hasMore.polyNfts = false;
+            return;
+          }
+          polyNfts.value = [...polyNfts.value, ...r.polyNfts.slice(0, 10)];
+          break;
+        }
+        case "poaps": {
+          walletLoadArgs.start = poaps.value.length;
+          walletLoadArgs.res = ["poaps"];
+          walletLoadArgs.ch = ["ethereum"];
+          const r = await getProfileWallet(walletLoadArgs);
+          if (r.poaps.length !== walletLoadArgs.limit) {
+            hasMore.poaps = false;
+            return;
+          }
+          poaps.value = [...poaps.value, ...r.poaps.slice(0, 10)];
+          break;
+        }
+      }
+    };
+
+    return {
+      selectedAccount,
+      loading,
+      isError,
+      noAssets,
+      getToastRef,
+      copyAddress,
+      copyOutline,
+      ethTokens,
+      polyTokens,
+      ethNfts,
+      poaps,
+      hasMore,
+      polyNfts,
+      loadMore,
+      toastState,
+      getUrl,
+    };
+  },
 });
-
 </script>
diff --git a/src/views/SettingsTab.vue b/src/views/SettingsTab.vue
index f665354..b8d7046 100644
--- a/src/views/SettingsTab.vue
+++ b/src/views/SettingsTab.vue
@@ -6,129 +6,180 @@
       </ion-toolbar>
     </ion-header>
     <ion-content class="ion-padding">
-  <ion-accordion-group :value="defaultAccordionOpen" v-if="!loading">
-  <ion-accordion value="1">
-    <ion-item slot="header" color="light">
-      <ion-label>Security</ion-label>
-    </ion-item>
-    <div class="ion-padding" slot="content">
-      <ion-list>
-      <ion-item v-if="noAccounts">You need at least one account to touch this settings</ion-item>
-      <ion-list :disabled="noAccounts">
-            <ion-item>
-              <ion-label>Enable Storage Encryption</ion-label>
-              <ion-toggle :key="updateKey" @ion-change="changeEncryption" slot="end" :checked="settings.s.enableStorageEnctyption"></ion-toggle>
-            </ion-item>
-            <ion-item>
-              This will require to input an encrypto key when storage is locked.
-            </ion-item>
-          </ion-list>
-          <ion-item :disabled="!settings.s.enableStorageEnctyption">
-            <ion-label>Enable Auto Lock</ion-label>
-            <ion-toggle :key="updateKey" @ion-change="changeAutoLock" slot="end" :checked="settings.s.lockOutEnabled"></ion-toggle>
+      <ion-accordion-group :value="defaultAccordionOpen" v-if="!loading">
+        <ion-accordion value="1">
+          <ion-item slot="header" color="light">
+            <ion-label>Security</ion-label>
           </ion-item>
-          <ion-list>
-          <ion-item :disabled="!settings.s.enableStorageEnctyption || !settings.s.lockOutEnabled">
-            <ion-label>Auto-lock Period: (2-120) minutes</ion-label>
-          </ion-item> 
-          <ion-item  :disabled="!settings.s.enableStorageEnctyption || !settings.s.lockOutEnabled">
-          <ion-input :key="updateKey"  v-model="settings.s.lockOutPeriod" type="number"></ion-input>
-        </ion-item>
-        <ion-item  :disabled="!settings.s.enableStorageEnctyption || !settings.s.lockOutEnabled">
-          <ion-button @click="setTime">Set Auto-lock</ion-button>
-      </ion-item>
-      </ion-list>
-          <ion-list>
-            <ion-item>
-              <ion-label>Permanent Lock</ion-label>
-              <ion-toggle  @ion-change="changePermaLock" :key="updateKey" slot="end" :disabled="!settings.s.enableStorageEnctyption" :checked="settings.s.encryptAfterEveryTx"></ion-toggle>
-            </ion-item>
-            <ion-item>Will require decrypt pass before any sign or transaction</ion-item>
-          </ion-list>
-        </ion-list>
-    </div>
-  </ion-accordion>
-  <ion-accordion value="2">
-    <ion-item slot="header" color="light">
-      <ion-label>Theme</ion-label>
-    </ion-item>
-    <div class="ion-padding" slot="content">
-      <ion-list>
+          <div class="ion-padding" slot="content">
+            <ion-list>
+              <ion-item v-if="noAccounts"
+                >You need at least one account to touch this settings</ion-item
+              >
+              <ion-list :disabled="noAccounts">
+                <ion-item>
+                  <ion-label>Enable Storage Encryption</ion-label>
+                  <ion-toggle
+                    :key="updateKey"
+                    @ion-change="changeEncryption"
+                    slot="end"
+                    :checked="settings.s.enableStorageEnctyption"
+                  ></ion-toggle>
+                </ion-item>
+                <ion-item>
+                  This will require to input an encrypto key when storage is locked.
+                </ion-item>
+              </ion-list>
+              <ion-item :disabled="!settings.s.enableStorageEnctyption">
+                <ion-label>Enable Auto Lock</ion-label>
+                <ion-toggle
+                  :key="updateKey"
+                  @ion-change="changeAutoLock"
+                  slot="end"
+                  :checked="settings.s.lockOutEnabled"
+                ></ion-toggle>
+              </ion-item>
+              <ion-list>
+                <ion-item
+                  :disabled="
+                    !settings.s.enableStorageEnctyption || !settings.s.lockOutEnabled
+                  "
+                >
+                  <ion-label>Auto-lock Period: (2-120) minutes</ion-label>
+                </ion-item>
+                <ion-item
+                  :disabled="
+                    !settings.s.enableStorageEnctyption || !settings.s.lockOutEnabled
+                  "
+                >
+                  <ion-input
+                    :key="updateKey"
+                    v-model="settings.s.lockOutPeriod"
+                    type="number"
+                  ></ion-input>
+                </ion-item>
+                <ion-item
+                  :disabled="
+                    !settings.s.enableStorageEnctyption || !settings.s.lockOutEnabled
+                  "
+                >
+                  <ion-button @click="setTime">Set Auto-lock</ion-button>
+                </ion-item>
+              </ion-list>
+              <ion-list>
+                <ion-item>
+                  <ion-label>Permanent Lock</ion-label>
+                  <ion-toggle
+                    @ion-change="changePermaLock"
+                    :key="updateKey"
+                    slot="end"
+                    :disabled="!settings.s.enableStorageEnctyption"
+                    :checked="settings.s.encryptAfterEveryTx"
+                  ></ion-toggle>
+                </ion-item>
+                <ion-item
+                  >Will require decrypt pass before any sign or transaction</ion-item
+                >
+              </ion-list>
+            </ion-list>
+          </div>
+        </ion-accordion>
+        <ion-accordion value="2">
+          <ion-item slot="header" color="light">
+            <ion-label>Theme</ion-label>
+          </ion-item>
+          <div class="ion-padding" slot="content">
+            <ion-list>
               <ion-radio-group :value="radioTheme">
-                  <ion-item>
-                    <ion-radio
-                      slot="start"
-                      value="system"
-                      @click="changeTheme('system')"
-                    />
-                    <ion-label>System Default</ion-label>
-                  </ion-item>
-                  <ion-item>
-                    <ion-radio
-                      slot="start"
-                      value="dark"
-                      @click="changeTheme('dark')"
-                    />
-                    <ion-label>Dark</ion-label>
-                  </ion-item>
-                  <ion-item>
-                    <ion-radio
-                      slot="start"
-                      value="light"
-                      @click="changeTheme('light')"
-                    />
-                    <ion-label>Light</ion-label>
-                  </ion-item>
+                <ion-item>
+                  <ion-radio slot="start" value="system" @click="changeTheme('system')" />
+                  <ion-label>System Default</ion-label>
+                </ion-item>
+                <ion-item>
+                  <ion-radio slot="start" value="dark" @click="changeTheme('dark')" />
+                  <ion-label>Dark</ion-label>
+                </ion-item>
+                <ion-item>
+                  <ion-radio slot="start" value="light" @click="changeTheme('light')" />
+                  <ion-label>Light</ion-label>
+                </ion-item>
               </ion-radio-group>
-          </ion-list>
-    </div>
-  </ion-accordion>
-  <ion-accordion value="3">
-    <ion-item slot="header" color="light">
-      <ion-label>About</ion-label>
-    </ion-item>
-    <div class="ion-padding" slot="content">
-      <p>Clear EVM Wallet (CLW) is a fully open-source wallet built with Vue, Ionic, and Ethers.</p>
-      <p>It emulates Metamask Wallet and can be used as a drop-in replacement, right now if you have both extensions, CLW will overwrite Metamask.</p>
-      <p>Main philosophy of the wallet is: no trackers, full control, export/import JSONs with accounts, fast generate new accounts, and wipe everything with one click.</p>
-      <p>Github Repo: <a href="#" @click="openTab('https://github.com/andrei0x309/clear-wallet')">LINK</a></p>
-      <br/>
-      <p style="margin-bottom: 0.2rem">Some Web3 Projects I personally appreciate:</p>
-      <p>YUP - web3 social platform <a href="#" @click="openTab('https://app.yup.io')">LINK</a></p>
-      <p>Crypto-Leftists: web3 left-wing crypto community <a href="#" @click="openTab('https://discord.gg/gzA4bTCdhb')">LINK</a></p>
-      <p>Idena: web3 fully private identity provider blockchain <a href="#" @click="openTab('https://www.idena.io/')">LINK</a></p>
-      <p>Mirror: web3 publishing platform <a href="#" @click="openTab('https://mirror.xyz')">LINK</a></p>
-    </div>
-  </ion-accordion>
-  <ion-accordion value="4">
-    <ion-item slot="header" color="light">
-      <ion-label> Import / Export Accounts</ion-label>
-    </ion-item>
-    <div class="ion-padding" slot="content">
-      <ion-item>
-          <ion-label>Import Additional Accounts</ion-label>
-          <input ref="importFile" type="file"  accept=".json" />
-          <ion-button color="warning" @click="importAcc">Import</ion-button>
-        </ion-item>
-        <ion-item>
-          <ion-label>Export All Accounts</ion-label>
-          <ion-button color="warning" @click="exportAcc">Export</ion-button>
-        </ion-item>
-    </div>
-  </ion-accordion>
-  <ion-accordion value="5">
-    <ion-item slot="header" color="light">
-      <ion-label>Danger</ion-label>
-    </ion-item>
-    <div class="ion-padding" slot="content">
-      <ion-item>
-          <ion-label>WIPE All DATA</ion-label>
-          <ion-button color="danger" @click="wipeStorage">PERMA WIPE</ion-button>
-        </ion-item>
-    </div>
-  </ion-accordion>
-</ion-accordion-group>
-        <ion-toast
+            </ion-list>
+          </div>
+        </ion-accordion>
+        <ion-accordion value="3">
+          <ion-item slot="header" color="light">
+            <ion-label>About</ion-label>
+          </ion-item>
+          <div class="ion-padding" slot="content">
+            <p>
+              Clear EVM Wallet (CLW) is a fully open-source wallet built with Vue, Ionic,
+              and Ethers.
+            </p>
+            <p>
+              It emulates Metamask Wallet and can be used as a drop-in replacement, right
+              now if you have both extensions, CLW will overwrite Metamask.
+            </p>
+            <p>
+              Main philosophy of the wallet is: no trackers, full control, export/import
+              JSONs with accounts, fast generate new accounts, and wipe everything with
+              one click.
+            </p>
+            <p>
+              Github Repo:
+              <a href="#" @click="openTab('https://github.com/andrei0x309/clear-wallet')"
+                >LINK</a
+              >
+            </p>
+            <br />
+            <p style="margin-bottom: 0.2rem">Places you can check me out:</p>
+            <p>
+              Github andrei0x309 -
+              <a href="#" @click="openTab('https://github.com/andrei0x309')">LINK</a>
+            </p>
+            <p>
+              Mirror Profile
+              <a href="#" @click="openTab('https://mirror.xyz/andrei0x309.eth')">LINK</a>
+            </p>
+            <p>
+              Blog Flashsoft
+              <a href="#" @click="openTab('https://blog.flashsoft.eu')">LINK</a>
+            </p>
+            <p>
+              Crypto-Leftists Discord
+              <a href="#" @click="openTab('https://discord.gg/gzA4bTCdhb')">LINK</a>
+            </p>
+          </div>
+        </ion-accordion>
+        <ion-accordion value="4">
+          <ion-item slot="header" color="light">
+            <ion-label> Import / Export Accounts</ion-label>
+          </ion-item>
+          <div class="ion-padding" slot="content">
+            <ion-item>
+              <ion-label>Import Additional Accounts</ion-label>
+              <input ref="importFile" type="file" accept=".json" />
+              <ion-button color="warning" @click="importAcc">Import</ion-button>
+            </ion-item>
+            <ion-item>
+              <ion-label>Export All Accounts</ion-label>
+              <ion-button color="warning" @click="exportAcc">Export</ion-button>
+            </ion-item>
+          </div>
+        </ion-accordion>
+        <ion-accordion value="5">
+          <ion-item slot="header" color="light">
+            <ion-label>Danger</ion-label>
+          </ion-item>
+          <div class="ion-padding" slot="content">
+            <ion-item>
+              <ion-label>WIPE All DATA</ion-label>
+              <ion-button color="danger" @click="wipeStorage">PERMA WIPE</ion-button>
+            </ion-item>
+          </div>
+        </ion-accordion>
+      </ion-accordion-group>
+      <ion-toast
         :is-open="toastState"
         @didDismiss="toastState = false"
         :message="toastMsg"
@@ -144,64 +195,100 @@
       </ion-loading>
       <ion-modal
         :is-open="mpModal"
-        @did-dismiss="mpModal=false;modalDismiss()"
+        @did-dismiss="
+          mpModal = false;
+          modalDismiss();
+        "
       >
-          <ion-header>
-            <ion-toolbar>
-              <ion-buttons slot="start">
-                <ion-button @click="modalGetPassword?.reject ? (() => { modalGetPassword.reject(); modalGetPassword = null })() : mpModal=false">Close</ion-button>
-              </ion-buttons>
-              <ion-title v-if="!settings.s.enableStorageEnctyption">Create Encryption Password</ion-title>
-              <ion-title v-else>Enter Encryption Password</ion-title>
-            </ion-toolbar>
-          </ion-header>
-          <ion-content class="ion-padding">
-            <ion-list v-if="settings.s.enableStorageEnctyption">
-          <ion-item>
-            <ion-label>Old Password</ion-label>
-          </ion-item> <ion-item>
-          <ion-input v-model="mpPass" type="password"></ion-input>
-        </ion-item>
-      </ion-list>
-      <div v-else>
+        <ion-header>
+          <ion-toolbar>
+            <ion-buttons slot="start">
+              <ion-button
+                @click="
+                  modalGetPassword?.reject
+                    ? (() => {
+                        modalGetPassword.reject();
+                        modalGetPassword = null;
+                      })()
+                    : (mpModal = false)
+                "
+                >Close</ion-button
+              >
+            </ion-buttons>
+            <ion-title v-if="!settings.s.enableStorageEnctyption"
+              >Create Encryption Password</ion-title
+            >
+            <ion-title v-else>Enter Encryption Password</ion-title>
+          </ion-toolbar>
+        </ion-header>
+        <ion-content class="ion-padding">
+          <ion-list v-if="settings.s.enableStorageEnctyption">
+            <ion-item>
+              <ion-label>Old Password</ion-label>
+            </ion-item>
+            <ion-item>
+              <ion-input v-model="mpPass" type="password"></ion-input>
+            </ion-item>
+          </ion-list>
+          <div v-else>
             <ion-list>
+              <ion-item>
+                <ion-label>New Password</ion-label>
+              </ion-item>
+              <ion-item>
+                <ion-input v-model="mpPass" type="password"></ion-input>
+              </ion-item>
+            </ion-list>
+            <ion-list>
+              <ion-item>
+                <ion-label>Confirm</ion-label>
+              </ion-item>
+              <ion-item>
+                <ion-input v-model="mpConfirm" type="password"></ion-input>
+              </ion-item>
+            </ion-list>
+          </div>
           <ion-item>
-            <ion-label>New Password</ion-label>
-          </ion-item> <ion-item>
-          <ion-input v-model="mpPass" type="password"></ion-input>
-        </ion-item>
-      </ion-list>
-      <ion-list>
-          <ion-item>
-            <ion-label>Confirm</ion-label>
-          </ion-item> <ion-item>
-          <ion-input v-model="mpConfirm" type="password"></ion-input>
-        </ion-item>
-      </ion-list>
-    </div>
-      <ion-item>
-          <ion-button @click="modalGetPassword?.resolve ? (() => { modalGetPassword.resolve(); modalGetPassword = null })() : confirmModal()">Confirm</ion-button>
-        </ion-item>
-          </ion-content>
+            <ion-button
+              @click="
+                modalGetPassword?.resolve
+                  ? (() => {
+                      modalGetPassword.resolve();
+                      modalGetPassword = null;
+                    })()
+                  : confirmModal()
+              "
+              >Confirm</ion-button
+            >
+          </ion-item>
+        </ion-content>
       </ion-modal>
       <ion-alert
-      :is-open="alertOpen"
-      :header="alertHeader"
-      :message="alertMsg"
-      :buttons="['OK']"
-      @didDismiss="alertOpen=false"
-    ></ion-alert>
+        :is-open="alertOpen"
+        :header="alertHeader"
+        :message="alertMsg"
+        :buttons="['OK']"
+        @didDismiss="alertOpen = false"
+      ></ion-alert>
     </ion-content>
   </ion-page>
 </template>
 
 <script lang="ts">
 import { defineComponent, ref, reactive, Ref } from "vue";
-import { storageWipe, getSettings, setSettings, getAccounts, saveSelectedAccount, replaceAccounts, openTab } from "@/utils/platform";
-import { decrypt, encrypt, getCryptoParams } from "@/utils/webCrypto"
-import { Account } from '@/extension/types'
-import { exportFile } from '@/utils/misc'
-import type { Settings } from "@/extension/types"
+import {
+  storageWipe,
+  getSettings,
+  setSettings,
+  getAccounts,
+  saveSelectedAccount,
+  replaceAccounts,
+  openTab,
+} from "@/utils/platform";
+import { decrypt, encrypt, getCryptoParams } from "@/utils/webCrypto";
+import { Account } from "@/extension/types";
+import { exportFile } from "@/utils/misc";
+import type { Settings } from "@/extension/types";
 import {
   IonContent,
   IonHeader,
@@ -223,7 +310,7 @@ import {
   IonRadio,
   IonButtons,
   IonAlert,
-  IonToast
+  IonToast,
 } from "@ionic/vue";
 
 export default defineComponent({
@@ -247,25 +334,28 @@ export default defineComponent({
     IonRadio,
     IonButtons,
     IonAlert,
-    IonToast
+    IonToast,
   },
   setup() {
     const loading = ref(true);
     const mpModal = ref(false);
-    const mpPass = ref('');
-    const mpConfirm = ref('');
+    const mpPass = ref("");
+    const mpConfirm = ref("");
     const updateKey = ref(0);
     const alertOpen = ref(false);
-    const alertMsg = ref('');
+    const alertMsg = ref("");
     const toastState = ref(false);
-    const toastMsg = ref('');
-    const alertHeader = ref('Error')
-    const importFile = ref(null) as unknown as Ref<HTMLInputElement>
-    type ModalPromisePassword =  null | { resolve: ((p?: unknown) => void), reject: ((p?: unknown) => void)}
-    const modalGetPassword = ref(null) as Ref<ModalPromisePassword>
-    const noAccounts = ref(true)
-    const defaultAccordionOpen = ref("0")
-    const radioTheme = ref('system') as Ref<'system' | 'light' | 'dark'>
+    const toastMsg = ref("");
+    const alertHeader = ref("Error");
+    const importFile = (ref(null) as unknown) as Ref<HTMLInputElement>;
+    type ModalPromisePassword = null | {
+      resolve: (p?: unknown) => void;
+      reject: (p?: unknown) => void;
+    };
+    const modalGetPassword = ref(null) as Ref<ModalPromisePassword>;
+    const noAccounts = ref(true);
+    const defaultAccordionOpen = ref("0");
+    const radioTheme = ref("system") as Ref<"system" | "light" | "dark">;
 
     const wipeStorage = async () => {
       loading.value = true;
@@ -273,280 +363,296 @@ export default defineComponent({
       loading.value = false;
     };
     const settings = reactive({
-      s: null as unknown as Settings
-    }) as { s: Settings}
-    
+      s: (null as unknown) as Settings,
+    }) as { s: Settings };
+
     const saveSettings = async () => {
-      loading.value = true
-      await setSettings(settings.s)
-      loading.value = false
-    }
+      loading.value = true;
+      await setSettings(settings.s);
+      loading.value = false;
+    };
 
     const setEncryptToggle = (state: boolean) => {
-      settings.s.enableStorageEnctyption = state
-      updateKey.value++
-      defaultAccordionOpen.value = "1"
-    }
+      settings.s.enableStorageEnctyption = state;
+      updateKey.value++;
+      defaultAccordionOpen.value = "1";
+    };
 
     const changeAutoLock = async () => {
-      settings.s.lockOutEnabled = !settings.s.lockOutEnabled
-      updateKey.value++
-      await saveSettings()
-      defaultAccordionOpen.value = "1"
-    }
+      settings.s.lockOutEnabled = !settings.s.lockOutEnabled;
+      updateKey.value++;
+      await saveSettings();
+      defaultAccordionOpen.value = "1";
+    };
 
     const changePermaLock = async () => {
-      settings.s.encryptAfterEveryTx = !settings.s.encryptAfterEveryTx
-      updateKey.value++
-      await saveSettings()
-      defaultAccordionOpen.value = "1"
-    }
+      settings.s.encryptAfterEveryTx = !settings.s.encryptAfterEveryTx;
+      updateKey.value++;
+      await saveSettings();
+      defaultAccordionOpen.value = "1";
+    };
 
-    const changeTheme = async (theme: 'system' | 'light' | 'dark') => {
-      document.body.classList.remove(radioTheme.value)
-      document.body.classList.add(theme)
-      radioTheme.value = theme
-      settings.s.theme = theme
-      await saveSettings()
-      defaultAccordionOpen.value = "2"
-    }
+    const changeTheme = async (theme: "system" | "light" | "dark") => {
+      document.body.classList.remove(radioTheme.value);
+      document.body.classList.add(theme);
+      radioTheme.value = theme;
+      settings.s.theme = theme;
+      await saveSettings();
+      defaultAccordionOpen.value = "2";
+    };
 
     const changeEncryption = async () => {
-      loading.value = true
-      mpModal.value = true
-      loading.value = false
-    }
+      loading.value = true;
+      mpModal.value = true;
+      loading.value = false;
+    };
 
     const confirmModal = async () => {
-      loading.value = true
-      if(mpPass.value.length  < 3) {
-        loading.value = false
-        alertHeader.value = 'Error'
-        alertMsg.value = 'Password is too short. More than 3 characters are required.';
-        alertOpen.value = true
-        setEncryptToggle(settings.s.enableStorageEnctyption)
-        return
+      loading.value = true;
+      if (mpPass.value.length < 3) {
+        loading.value = false;
+        alertHeader.value = "Error";
+        alertMsg.value = "Password is too short. More than 3 characters are required.";
+        alertOpen.value = true;
+        setEncryptToggle(settings.s.enableStorageEnctyption);
+        return;
       }
 
       if (!settings.s.enableStorageEnctyption) {
         if (mpPass.value !== mpConfirm.value) {
-        loading.value = false
-        alertHeader.value = 'Error'
-        alertMsg.value = 'Password and confirm password do not match';
-        alertOpen.value = true
-        setEncryptToggle(settings.s.enableStorageEnctyption)
-        return
-      }
-      let accounts = await getAccounts()
-      const cryptoParams = await getCryptoParams(mpPass.value)
-      const accProm = accounts.map(async a => {
-        a.encPk = await encrypt(a.pk, cryptoParams)
-        a.pk = ''
-        return a
-      })
-      accounts = await Promise.all(accProm)
-      await replaceAccounts(accounts)
-      await saveSelectedAccount(accounts[0])
-      setEncryptToggle(true)
-      await setSettings(settings.s)
-      mpPass.value = ''
-      mpConfirm.value = ''
-      mpModal.value = false
+          loading.value = false;
+          alertHeader.value = "Error";
+          alertMsg.value = "Password and confirm password do not match";
+          alertOpen.value = true;
+          setEncryptToggle(settings.s.enableStorageEnctyption);
+          return;
+        }
+        let accounts = await getAccounts();
+        const cryptoParams = await getCryptoParams(mpPass.value);
+        const accProm = accounts.map(async (a) => {
+          a.encPk = await encrypt(a.pk, cryptoParams);
+          a.pk = "";
+          return a;
+        });
+        accounts = await Promise.all(accProm);
+        await replaceAccounts(accounts);
+        await saveSelectedAccount(accounts[0]);
+        setEncryptToggle(true);
+        await setSettings(settings.s);
+        mpPass.value = "";
+        mpConfirm.value = "";
+        mpModal.value = false;
       } else {
         try {
-        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
-        })
-        accProm.forEach( a => a.catch(e => console.log(e)) )
-        accounts = await Promise.all(accProm)
-        await replaceAccounts(accounts)
-        await saveSelectedAccount(accounts[0])
-        setEncryptToggle(false)
-        settings.s.lockOutEnabled = false
-        settings.s.encryptAfterEveryTx = false
-        await setSettings(settings.s)
-        mpPass.value = ''
-        mpConfirm.value = ''
-        mpModal.value = false
-        } catch(error) {
-        console.log(error)
-        loading.value = false
-        alertHeader.value = 'Error'
-        alertMsg.value = 'Decryption failed, password is not correct.';
-        alertOpen.value = true
-        setEncryptToggle(settings.s.enableStorageEnctyption)
-        return
+          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;
+          });
+          accProm.forEach((a) => a.catch((e) => console.log(e)));
+          accounts = await Promise.all(accProm);
+          await replaceAccounts(accounts);
+          await saveSelectedAccount(accounts[0]);
+          setEncryptToggle(false);
+          settings.s.lockOutEnabled = false;
+          settings.s.encryptAfterEveryTx = false;
+          await setSettings(settings.s);
+          mpPass.value = "";
+          mpConfirm.value = "";
+          mpModal.value = false;
+        } catch (error) {
+          console.log(error);
+          loading.value = false;
+          alertHeader.value = "Error";
+          alertMsg.value = "Decryption failed, password is not correct.";
+          alertOpen.value = true;
+          setEncryptToggle(settings.s.enableStorageEnctyption);
+          return;
         }
       }
 
-    loading.value = false
-    }
+      loading.value = false;
+    };
 
     const validateFile = () => {
       return new Promise((resolve) => {
-      try {
-        if (!importFile.value?.value?.length) {
-          return resolve({ 
-            error: 'Import json file is missing'
-          })
-        }
-        const reader = new FileReader();
-        reader.onload = (event) => {
-          const json = JSON.parse(event?.target?.result as string)
-          if(!json.length){
-            return resolve({ error: 'JSON format is wrong. Corrrect JSON format is: [{ "name": "Account Name", "pk": "Private Key", "address": "0x..." },{...}]' })
+        try {
+          if (!importFile.value?.value?.length) {
+            return resolve({
+              error: "Import json file is missing",
+            });
           }
-          const test = json.some((e:any) => ( !('pk' in e ) || !('name' in e) || !('address' in e) || !(e.pk.length === 66 || e.pk.length === 64)))
-          if(test) {
-            return resolve({ error: 'JSON format is wrong. Corrrect JSON format is: [{ "name": "Account Name", "pk": "Private Key", "address": "0x..."  },{...}], Also PK must be valid (66 || 64 length) !' })
-          }
-          return resolve({ error: false, json })
+          const reader = new FileReader();
+          reader.onload = (event) => {
+            const json = JSON.parse(event?.target?.result as string);
+            if (!json.length) {
+              return resolve({
+                error:
+                  'JSON format is wrong. Corrrect JSON format is: [{ "name": "Account Name", "pk": "Private Key", "address": "0x..." },{...}]',
+              });
+            }
+            const test = json.some(
+              (e: any) =>
+                !("pk" in e) ||
+                !("name" in e) ||
+                !("address" in e) ||
+                !(e.pk.length === 66 || e.pk.length === 64)
+            );
+            if (test) {
+              return resolve({
+                error:
+                  'JSON format is wrong. Corrrect JSON format is: [{ "name": "Account Name", "pk": "Private Key", "address": "0x..."  },{...}], Also PK must be valid (66 || 64 length) !',
+              });
+            }
+            return resolve({ error: false, json });
+          };
+          reader.readAsText(importFile.value?.files?.[0] as File);
+        } catch {
+          return resolve({
+            error: "Parsing JSON file",
+          });
         }
-        reader.readAsText(importFile.value?.files?.[0] as File);
-        
-      }catch {
-        return resolve(
-         {
-          error: 'Parsing JSON file'
-        })
-      }
-    })
-    }
+      });
+    };
 
     const getPassword = () => {
-      return new Promise( (resolve, reject) => {
-        modalGetPassword.value = { resolve, reject }
-        mpModal.value = true
-      })
-    }
+      return new Promise((resolve, reject) => {
+        modalGetPassword.value = { resolve, reject };
+        mpModal.value = true;
+      });
+    };
 
     const promptForPassword = async (accounts: Account[]) => {
-      let isCorectPass = false
-              do {
-              try {
-              await getPassword()
-              modalGetPassword.value = null
-            } catch {
-              alertHeader.value = 'Error'
-              alertMsg.value = "Password is required!"
-              alertOpen.value = true
-              mpModal.value = false
-              return false
-            }
-            try {
-              const cryptoParams = await getCryptoParams(mpPass.value)
-              if(accounts?.[0]?.encPk) {
-                await decrypt(accounts[0].encPk, cryptoParams)
-              }
-            isCorectPass = true
-              } catch {
-                isCorectPass = false
-                alertHeader.value = 'Error'
-                alertMsg.value = "Password is wrong!"
-                alertOpen.value = true
-              }
-            } while (!isCorectPass);
-            return true
-    }
-    
+      let isCorectPass = false;
+      do {
+        try {
+          await getPassword();
+          modalGetPassword.value = null;
+        } catch {
+          alertHeader.value = "Error";
+          alertMsg.value = "Password is required!";
+          alertOpen.value = true;
+          mpModal.value = false;
+          return false;
+        }
+        try {
+          const cryptoParams = await getCryptoParams(mpPass.value);
+          if (accounts?.[0]?.encPk) {
+            await decrypt(accounts[0].encPk, cryptoParams);
+          }
+          isCorectPass = true;
+        } catch {
+          isCorectPass = false;
+          alertHeader.value = "Error";
+          alertMsg.value = "Password is wrong!";
+          alertOpen.value = true;
+        }
+      } while (!isCorectPass);
+      return true;
+    };
+
     const importAcc = async () => {
-      const validation = await validateFile() as { error: any }
+      const validation = (await validateFile()) as { error: any };
       if (validation.error) {
-        alertMsg.value = validation.error
-        alertOpen.value = true
-        return 
+        alertMsg.value = validation.error;
+        alertOpen.value = true;
+        return;
       }
-      const accounts = await getAccounts()
-      const newAccounts = (validation as unknown as { json: Account[] }).json
-      if(settings.s.enableStorageEnctyption) {
-              const hasPass = await promptForPassword(accounts)      
-              if(hasPass) {
-              const cryptoParams = await getCryptoParams(mpPass.value)
-              const accProm = newAccounts.map(async a => {
-              if(a.pk.length === 64) {
-                a.pk = `0x${a.pk}`
-              }
-              a.encPk = await encrypt(a.pk, cryptoParams)
-              return a
-               })
-              const encNewAccounts = await Promise.all(accProm)
-              await replaceAccounts([...accounts, ...encNewAccounts])
-              alertHeader.value = 'Success'
-              alertMsg.value = "Successfully imported new accounts."
-              alertOpen.value = true
-              noAccounts.value = false
-              }
-              return false
-            } else {
-              await replaceAccounts([...accounts, ...newAccounts.map( a => { a.encPk = ''; return a })])
-              alertHeader.value = 'Success'
-              alertMsg.value = "Successfully imported new accounts."
-              alertOpen.value = true
-              noAccounts.value = false
+      const accounts = await getAccounts();
+      const newAccounts = ((validation as unknown) as { json: Account[] }).json;
+      if (settings.s.enableStorageEnctyption) {
+        const hasPass = await promptForPassword(accounts);
+        if (hasPass) {
+          const cryptoParams = await getCryptoParams(mpPass.value);
+          const accProm = newAccounts.map(async (a) => {
+            if (a.pk.length === 64) {
+              a.pk = `0x${a.pk}`;
             }
-    }
+            a.encPk = await encrypt(a.pk, cryptoParams);
+            return a;
+          });
+          const encNewAccounts = await Promise.all(accProm);
+          await replaceAccounts([...accounts, ...encNewAccounts]);
+          alertHeader.value = "Success";
+          alertMsg.value = "Successfully imported new accounts.";
+          alertOpen.value = true;
+          noAccounts.value = false;
+        }
+        return false;
+      } else {
+        await replaceAccounts([
+          ...accounts,
+          ...newAccounts.map((a) => {
+            a.encPk = "";
+            return a;
+          }),
+        ]);
+        alertHeader.value = "Success";
+        alertMsg.value = "Successfully imported new accounts.";
+        alertOpen.value = true;
+        noAccounts.value = false;
+      }
+    };
 
     const exportAcc = async () => {
-      const accounts = await getAccounts()
-      if(!accounts.length) {
-        alertMsg.value = "You need at least one account to export."
-        alertOpen.value = true
+      const accounts = await getAccounts();
+      if (!accounts.length) {
+        alertMsg.value = "You need at least one account to export.";
+        alertOpen.value = true;
       }
-      if(settings.s.enableStorageEnctyption) {
-        const hasPass = await promptForPassword(accounts)   
-        if(hasPass) {
-          const cryptoParams = await getCryptoParams(mpPass.value)
-          const accProm = accounts.map(async a => {
-              a.pk = await decrypt(a.encPk, cryptoParams)
-              return a
-               })
-              const encNewAccounts = await Promise.all(accProm)
-              exportFile('wallet_export.json', JSON.stringify(encNewAccounts, null, 2))
+      if (settings.s.enableStorageEnctyption) {
+        const hasPass = await promptForPassword(accounts);
+        if (hasPass) {
+          const cryptoParams = await getCryptoParams(mpPass.value);
+          const accProm = accounts.map(async (a) => {
+            a.pk = await decrypt(a.encPk, cryptoParams);
+            return a;
+          });
+          const encNewAccounts = await Promise.all(accProm);
+          exportFile("wallet_export.json", JSON.stringify(encNewAccounts, null, 2));
         }
-        return false
+        return false;
       } else {
-        exportFile('wallet_export.json', JSON.stringify(accounts, null, 2))
+        exportFile("wallet_export.json", JSON.stringify(accounts, null, 2));
       }
-    }
-
+    };
 
     onIonViewWillEnter(async () => {
-      await Promise.all([getSettings().then((storeSettings) =>
-      {
-        settings.s = storeSettings
-        radioTheme.value = settings.s.theme
-      }),
-      getAccounts().then((accounts) => {
-        if(accounts.length) {
-          noAccounts.value = false
-        }
-      })])
-      loading.value = false
-    })
+      await Promise.all([
+        getSettings().then((storeSettings) => {
+          settings.s = storeSettings;
+          radioTheme.value = settings.s.theme;
+        }),
+        getAccounts().then((accounts) => {
+          if (accounts.length) {
+            noAccounts.value = false;
+          }
+        }),
+      ]);
+      loading.value = false;
+    });
 
     const setTime = async () => {
-      loading.value = true
-       if ( settings.s.lockOutPeriod < 2 || settings.s.lockOutPeriod > 120){
-        loading.value = false
-        alertMsg.value = 'Auto-lock period must be between 2 and 120';
-        alertOpen.value = true
-        return
-       }
-       settings.s.lockOutPeriod = Math.trunc(settings.s.lockOutPeriod)
-       await saveSettings()
-       loading.value = false
-       toastMsg.value = 'Auto-lock period was set';
-       toastState.value = true
-    }
+      loading.value = true;
+      if (settings.s.lockOutPeriod < 2 || settings.s.lockOutPeriod > 120) {
+        loading.value = false;
+        alertMsg.value = "Auto-lock period must be between 2 and 120";
+        alertOpen.value = true;
+        return;
+      }
+      settings.s.lockOutPeriod = Math.trunc(settings.s.lockOutPeriod);
+      await saveSettings();
+      loading.value = false;
+      toastMsg.value = "Auto-lock period was set";
+      toastState.value = true;
+    };
 
     const modalDismiss = () => {
-      setEncryptToggle(settings.s.enableStorageEnctyption)
-    }
+      setEncryptToggle(settings.s.enableStorageEnctyption);
+    };
 
     return {
       wipeStorage,
@@ -576,7 +682,7 @@ export default defineComponent({
       changeTheme,
       openTab,
       radioTheme,
-      changePermaLock
+      changePermaLock,
     };
   },
 });