From f1ce93d306f6c24d07919d1977b300e1b07712aa Mon Sep 17 00:00:00 2001
From: Zouheir Layine <zlayine@enjin.io>
Date: Wed, 2 Oct 2024 10:43:42 +0100
Subject: [PATCH] [PLA-2021] track fix (#163)

---
 resources/js/api/transaction.ts               |   2 +-
 resources/js/components/SideNavbar.vue        |  23 +-
 resources/js/components/pages/Collections.vue |  30 +++
 resources/js/components/pages/Settings.vue    |   7 +-
 .../components/pages/SettingsWalletDaemon.vue | 254 ++++++++++++------
 resources/js/factory/collection.ts            |  32 ---
 resources/js/factory/transaction.ts           |   7 +
 .../js/graphql/query/GetCollectionIds.ts      |   5 +
 resources/js/store/connection.ts              |  25 +-
 resources/js/store/index.ts                   |  17 +-
 10 files changed, 279 insertions(+), 123 deletions(-)

diff --git a/resources/js/api/transaction.ts b/resources/js/api/transaction.ts
index d5aa8b7..6a5e6a6 100644
--- a/resources/js/api/transaction.ts
+++ b/resources/js/api/transaction.ts
@@ -27,7 +27,7 @@ export class TransactionApi {
                 results: getTransactionsData.results,
                 accounts: getTransactionsData.accounts,
                 after: getTransactionsData.after,
-                first: 20,
+                first: getTransactionsData.first ?? 20,
             },
         };
 
diff --git a/resources/js/components/SideNavbar.vue b/resources/js/components/SideNavbar.vue
index f140ad1..2fcaa5e 100644
--- a/resources/js/components/SideNavbar.vue
+++ b/resources/js/components/SideNavbar.vue
@@ -19,7 +19,13 @@
                         :to="item.to"
                         class="text-light-content dark:text-dark-content hover:bg-light-surface-background hover:dark:bg-dark-surface-background hover:text-light-content-selected hover:dark:text-dark-content-selected group flex items-center px-4 py-3 font-medium transition-all"
                     >
-                        <span class="flex-1">{{ item.name }}</span>
+                        <span class="">{{ item.name }}</span>
+                        <span
+                            v-if="item.count && transactionsCount > 0"
+                            class="text-xs font-normal ml-4 rounded-full text-light-content-brand dark:text-dark-content-brand bg-light-surface-brand-alpha p-1 w-6 h-6 flex items-center justify-center animate-fade-in"
+                        >
+                            {{ transactionsCount }}
+                        </span>
                     </RouterLink>
                 </nav>
             </div>
@@ -92,15 +98,24 @@
 </template>
 
 <script setup lang="ts">
-import { computed } from 'vue';
+import { computed, onMounted, ref } from 'vue';
 import { useAppStore } from '~/store';
 import EnjinLogo from '~/components/EnjinLogo.vue';
 import CanaryEnjinLogo from '~/components/CanaryEnjinLogo.vue';
+import { TransactionApi } from '~/api/transaction';
+import { DTOTransactionFactory as DTOFactory } from '~/factory/transaction';
 
 const navigations = computed(() => useAppStore().navigations);
 
 const canaryHost = computed(() => useAppStore().config.network === 'canary');
 
+const transactionsCount = ref(0);
+
+const loadTransactions = async () => {
+    const res = await TransactionApi.getTransactions({ first: 500 });
+    transactionsCount.value = DTOFactory.getPendingTransactionsCount(res.data);
+};
+
 const pageTitle = () => {
     if (window.bootstrap?.name) {
         return window.bootstrap.name;
@@ -112,6 +127,10 @@ const pageTitle = () => {
         return 'Platform';
     }
 };
+
+onMounted(() => {
+    loadTransactions();
+});
 </script>
 
 <style lang="scss" scoped>
diff --git a/resources/js/components/pages/Collections.vue b/resources/js/components/pages/Collections.vue
index 02c98f9..5d85456 100644
--- a/resources/js/components/pages/Collections.vue
+++ b/resources/js/components/pages/Collections.vue
@@ -182,6 +182,7 @@ import { ApiService } from '~/api';
 import TrackCollectionModal from '../TrackCollectionModal.vue';
 import ConfirmModal from '../ConfirmModal.vue';
 import Chip from '../Chip.vue';
+import { useConnectionStore } from '~/store/connection';
 
 const isLoading = ref(true);
 const isPaginationLoading = ref(false);
@@ -211,6 +212,7 @@ const collectionNames = ref<{ [key: string]: string }[]>([]);
 const loadingAction = ref<string | null>(null);
 
 const appStore = useAppStore();
+const connectionStore = useConnectionStore();
 
 const enablePagination = computed(() => searchInput.value === '');
 
@@ -309,6 +311,8 @@ const getCollection = async () => {
     try {
         const res = await CollectionApi.getCollection(searchInput.value);
         collections.value = DTOFactory.forCollection(res);
+        setTrackableCollections();
+        setCollectionNames();
     } catch (e) {
         collections.value.items = [];
     } finally {
@@ -320,6 +324,7 @@ const getCollections = async () => {
     try {
         const res = await CollectionApi.getCollections();
         collections.value = DTOFactory.forCollections(res);
+        setTrackableCollections();
         setCollectionNames();
     } catch (e) {
         collections.value.items = [];
@@ -382,6 +387,7 @@ const loadMoreCollectionsWithObserver = () => {
                     const res = await CollectionApi.getCollections(collections.value.cursor);
                     const data = DTOFactory.forCollections(res);
                     collections.value = { items: [...collections.value.items, ...data.items], cursor: data.cursor };
+                    setTrackableCollections();
                     setCollectionNames();
                     isPaginationLoading.value = false;
                 } catch (error) {
@@ -473,6 +479,20 @@ const untrackCollection = async () => {
     }
 };
 
+const checkCollectionOwnership = (collection, accounts) => {
+    return !accounts.find((account) => account === collection.owner);
+};
+
+const setTrackableCollections = async () => {
+    await connectionStore.getAccounts();
+    const uniqueAccounts = connectionStore.getTrackableAccounts();
+    collections.value.items.map((collection) => {
+        collection.tracked = checkCollectionOwnership(collection, uniqueAccounts);
+
+        return collection;
+    });
+};
+
 (async () => {
     await getCollections();
 })();
@@ -483,6 +503,16 @@ onMounted(() => {
 });
 
 watch(() => collections.value, setCollectionIds);
+
+watch(
+    () => connectionStore.wallet,
+    async () => {
+        if (connectionStore.wallet) {
+            await connectionStore.getAccounts();
+            setTrackableCollections();
+        }
+    }
+);
 </script>
 
 <style lang="scss" scoped>
diff --git a/resources/js/components/pages/Settings.vue b/resources/js/components/pages/Settings.vue
index 9226f69..ee94a4e 100644
--- a/resources/js/components/pages/Settings.vue
+++ b/resources/js/components/pages/Settings.vue
@@ -3,10 +3,7 @@
         <div class="mt-4 flow-root">
             <LoadingCircle v-if="loading" class="mt-40" :size="44" />
             <template v-else>
-                <div
-                    v-if="!showInitialSetup"
-                    class="flex flex-col mb-6 w-full transition-all rounded-md bg-[#0284c7] p-3 text-white"
-                >
+                <div class="flex flex-col mb-6 w-full transition-all rounded-md bg-[#0284c7] p-3 text-white">
                     <p class="font-bold">Configuring Your Wallet</p>
                     <p>
                         To interact with the Enjin Platform, you need a wallet to sign your transactions. You can do
@@ -104,8 +101,6 @@ const loading = ref(appStore.user || !appStore.hasMultiTenantPackage ? false : t
 const confirmModal = ref(false);
 const verifyPasswordModal = ref(false);
 
-const tokens = computed(() => appStore.user?.apiTokens);
-const showInitialSetup = computed(() => !appStore.hasValidConfig && isMultiTenant.value && !tokens.value?.length);
 const isMultiTenant = computed(() => appStore.isMultiTenant);
 
 const logout = async () => {
diff --git a/resources/js/components/pages/SettingsWalletDaemon.vue b/resources/js/components/pages/SettingsWalletDaemon.vue
index a367dd6..5f76f7c 100644
--- a/resources/js/components/pages/SettingsWalletDaemon.vue
+++ b/resources/js/components/pages/SettingsWalletDaemon.vue
@@ -11,94 +11,184 @@
         <div>
             <div class="p-6 text-light-content dark:text-dark-content">
                 <div class="flex flex-col space-y-4">
-                    <p v-if="!walletAccount" class="text-sm">Daemon Wallet is not configured at the moment</p>
-                    <p v-else class="text-sm">Daemon Wallet is configured</p>
-                    <label
-                        v-if="walletAccount"
-                        class="text-light-content dark:text-dark-content bg-light-surface-background dark:bg-dark-surface-background hover:text-white hover:bg-light-surface-brand text-sm rounded-md mr-auto p-2 cursor-pointer transition-all"
-                        name="walletAccount"
-                        disabled
-                        @click="copyText(walletAccount)"
+                    <Transition
+                        enter-active-class="transition ease-out duration-300"
+                        leave-active-class="transition ease-in duration-300"
+                        enter-from-class="transform opacity-0 "
+                        enter-to-class="transform opacity-100"
+                        leave-from-class="transform opacity-100"
+                        leave-to-class="transform opacity-0"
+                        mode="out-in"
                     >
-                        {{ walletAccount }}
-                    </label>
-                    <template v-if="isMultiTenant">
-                        <p class="text-sm">
-                            To configure a new Daemon wallet, you'll need to create an API token. This token will be
-                            used to authenticate your Daemon wallet with your Platform account.
-                        </p>
-                        <div v-if="tokens.length">
-                            <span class="text-xl mb-4">My API Tokens</span>
-                            <div class="grid grid-cols-1 gap-4">
-                                <div
-                                    class="bg-light-surface-background dark:bg-dark-surface-background !bg-opacity-50 p-3 shadow sm:rounded-lg sm:p-4 flex justify-between items-center gr"
-                                    v-for="token in tokens"
-                                    :key="token.name"
+                        <div v-if="creationFlow" class="flex flex-col space-y-4">
+                            <div class="text-sm">
+                                <span> API Token was successfully created. Token: </span>
+                                <CopyTextIcon
+                                    v-if="tokens[0].plainTextToken"
+                                    ref="copyIconRef"
+                                    class="cursor-pointer inline-flex"
+                                    :text="
+                                        tokens[0].plainTextToken.substring(
+                                            tokens[0].plainTextToken?.indexOf('|') + 1 ?? 0
+                                        )
+                                    "
                                 >
-                                    <div class="flex-1 truncate flex items-center">
-                                        <KeyIcon class="w-5 h-5 mr-4 text-green-500" />
-                                        <span class="text-light-content-strong dark:text-dark-content-strong mr-4">
-                                            {{ token.name }}
-                                        </span>
-                                        <span class="text-light-content dark:text-dark-content text-sm mt-1 truncate">
-                                            <span v-if="!token.plainTextToken">
-                                                {{ '*******' }}
-                                            </span>
-                                            <CopyTextIcon
-                                                v-if="token.plainTextToken"
-                                                ref="copyIconRef"
-                                                class="cursor-pointer flex mr-4"
-                                                :text="
-                                                    token.plainTextToken.substring(
-                                                        token.plainTextToken?.indexOf('|') + 1 ?? 0
-                                                    )
-                                                "
-                                            >
-                                                <span class="truncate">
-                                                    {{
-                                                        token.plainTextToken?.substring(
-                                                            token.plainTextToken?.indexOf('|') + 1 ?? 0
-                                                        )
-                                                    }}
-                                                </span>
-                                            </CopyTextIcon>
-                                        </span>
-                                    </div>
+                                    <span class="truncate text-light-content-brand dark:text-dark-content-brand">
+                                        {{
+                                            tokens[0].plainTextToken?.substring(
+                                                tokens[0].plainTextToken?.indexOf('|') + 1 ?? 0
+                                            )
+                                        }}
+                                    </span>
+                                </CopyTextIcon>
+                            </div>
+                            <Transition
+                                enter-active-class="transition ease-out duration-300"
+                                leave-active-class="transition ease-in duration-300"
+                                enter-from-class="transform opacity-0 "
+                                enter-to-class="transform opacity-100"
+                                leave-from-class="transform opacity-100"
+                                leave-to-class="transform opacity-0"
+                                mode="out-in"
+                            >
+                                <div v-if="!walletAccount" class="flex flex-col space-y-4">
+                                    <span class="text-sm">
+                                        To enable automatic signing of your platform requests, Set up a Daemon wallet
+                                        with the API Token above and run it once to complete the setup. We'll notify you
+                                        here once the configuration is successful. Detailed configuration instructions
+                                        can be found in our
+                                        <a
+                                            href="https://docs.enjin.io/docs/using-wallet-daemon"
+                                            target="_blank"
+                                            class="text-light-content-brand dark:text-dark-content-brand"
+                                        >
+                                            documentation.
+                                        </a>
+                                    </span>
+                                    <LoadingCircle
+                                        class="py-2 text-light-content-brand dark:text-dark-content-brand"
+                                        :size="28"
+                                    />
+                                    <p class="text-sm">
+                                        Please configure your Daemon wallet with the above API Token and run it once in
+                                        order to complete the configuration.
+                                    </p>
                                     <Btn
-                                        class="flex-shrink-0"
-                                        :dusk="`btn__revoke-api-${token.name}`"
-                                        error
-                                        @click="confirmRevoke(token.name)"
+                                        primary
+                                        class="mx-auto"
+                                        :loading="loadingUser"
+                                        :disabled="loadingUser"
+                                        @click="refreshWalletAccount"
                                     >
-                                        Revoke
+                                        Check wallet account
                                     </Btn>
                                 </div>
-                            </div>
+                                <p v-else class="text-sm">
+                                    Setup complete! Daemon Wallet account
+                                    <span class="text-light-content-brand dark:text-dark-content-brand">
+                                        {{ walletAccount }}
+                                    </span>
+                                    is now configured with your Enjin Platform account. As long as the Daemon Wallet is
+                                    running, it will be used to automatically sign and broadcast all platform requests
+                                    to the blockchain.
+                                </p>
+                            </Transition>
                         </div>
-
-                        <div class="flex items-end space-x-4 mb-4">
-                            <FormInput
-                                v-if="enableTokenCreate"
-                                class="sm:w-[300px] flex-1 sm:flex-none"
-                                v-model="tokenName"
-                                name="tokenName"
-                                placeholder="Enter token name"
-                            />
-                            <Btn
-                                dusk="btn__create-api-token"
-                                primary
-                                class="py-2.5 disabled:!bg-primary"
-                                @click="createApiToken"
-                                :disabled="creating"
+                        <div v-else class="flex flex-col space-y-4">
+                            <p v-if="!walletAccount" class="text-sm">Daemon Wallet is not configured at the moment</p>
+                            <p v-else class="text-sm">Daemon Wallet is configured</p>
+                            <label
+                                v-if="walletAccount"
+                                class="text-light-content dark:text-dark-content bg-light-surface-background dark:bg-dark-surface-background hover:text-white hover:bg-light-surface-brand text-sm rounded-md mr-auto p-2 cursor-pointer transition-all"
+                                name="walletAccount"
+                                disabled
+                                @click="copyText(walletAccount)"
                             >
-                                <div v-if="!creating" class="flex items-center">
-                                    <KeyIcon class="w-4 h-4 mr-2 flex-shrink-0" />
-                                    <span class="truncate"> Create API Token </span>
+                                {{ walletAccount }}
+                            </label>
+                            <template v-if="!isMultiTenant">
+                                <p class="text-sm">
+                                    To configure a new Daemon wallet, you'll need to create an API token. This token
+                                    will be used to authenticate your Daemon wallet with your Platform account.
+                                </p>
+                                <div v-if="tokens.length">
+                                    <span class="text-xl mb-4">My API Tokens</span>
+                                    <div class="grid grid-cols-1 gap-4">
+                                        <div
+                                            class="bg-light-surface-background dark:bg-dark-surface-background !bg-opacity-50 p-3 shadow sm:rounded-lg sm:p-4 flex justify-between items-center gr"
+                                            v-for="token in tokens"
+                                            :key="token.name"
+                                        >
+                                            <div class="flex-1 truncate flex items-center">
+                                                <KeyIcon class="w-5 h-5 mr-4 text-green-500" />
+                                                <span
+                                                    class="text-light-content-strong dark:text-dark-content-strong mr-4"
+                                                >
+                                                    {{ token.name }}
+                                                </span>
+                                                <span
+                                                    class="text-light-content dark:text-dark-content text-sm mt-1 truncate"
+                                                >
+                                                    <span v-if="!token.plainTextToken">
+                                                        {{ '*******' }}
+                                                    </span>
+                                                    <CopyTextIcon
+                                                        v-if="token.plainTextToken"
+                                                        ref="copyIconRef"
+                                                        class="cursor-pointer flex mr-4"
+                                                        :text="
+                                                            token.plainTextToken.substring(
+                                                                token.plainTextToken?.indexOf('|') + 1 ?? 0
+                                                            )
+                                                        "
+                                                    >
+                                                        <span class="truncate">
+                                                            {{
+                                                                token.plainTextToken?.substring(
+                                                                    token.plainTextToken?.indexOf('|') + 1 ?? 0
+                                                                )
+                                                            }}
+                                                        </span>
+                                                    </CopyTextIcon>
+                                                </span>
+                                            </div>
+                                            <Btn
+                                                class="flex-shrink-0"
+                                                :dusk="`btn__revoke-api-${token.name}`"
+                                                error
+                                                @click="confirmRevoke(token.name)"
+                                            >
+                                                Revoke
+                                            </Btn>
+                                        </div>
+                                    </div>
                                 </div>
-                                <LoadingCircle v-else class="w-4 h-4 text-white" />
-                            </Btn>
+
+                                <div class="flex items-end space-x-4 mb-4">
+                                    <FormInput
+                                        v-if="enableTokenCreate"
+                                        class="sm:w-[300px] flex-1 sm:flex-none"
+                                        v-model="tokenName"
+                                        name="tokenName"
+                                        placeholder="Enter token name"
+                                    />
+                                    <Btn
+                                        dusk="btn__create-api-token"
+                                        primary
+                                        class="py-2.5 disabled:!bg-primary"
+                                        @click="createApiToken"
+                                        :disabled="creating"
+                                    >
+                                        <div v-if="!creating" class="flex items-center">
+                                            <KeyIcon class="w-4 h-4 mr-2 flex-shrink-0" />
+                                            <span class="truncate"> Create API Token </span>
+                                        </div>
+                                        <LoadingCircle v-else class="w-4 h-4 text-white" />
+                                    </Btn>
+                                </div>
+                            </template>
                         </div>
-                    </template>
+                    </Transition>
                 </div>
             </div>
         </div>
@@ -135,6 +225,8 @@ const enableTokenCreate = ref(false);
 const tokenName = ref();
 const confirmModal = ref(false);
 const confirmModalName = ref();
+const creationFlow = ref(false);
+const loadingUser = ref(false);
 
 const tokens = computed(() => appStore.user?.apiTokens ?? []);
 
@@ -192,6 +284,12 @@ const copyText = (text: string) => {
     snackbar.info({ title: 'Copied to clipboard!' });
 };
 
+const refreshWalletAccount = async () => {
+    loadingUser.value = true;
+    await appStore.getUser();
+    loadingUser.value = false;
+};
+
 watch(
     () => appStore.user,
     (userVal) => {
diff --git a/resources/js/factory/collection.ts b/resources/js/factory/collection.ts
index dcaf285..e0ada24 100644
--- a/resources/js/factory/collection.ts
+++ b/resources/js/factory/collection.ts
@@ -1,39 +1,8 @@
-import { useAppStore } from '~/store';
-import { useConnectionStore } from '~/store/connection';
 import { FreezeType } from '~/types/types.enums';
 import { publicKeyToAddress } from '~/util/address';
 
 export class DTOCollectionFactory {
     public static buildCollection(collection: any) {
-        const appStore = useAppStore();
-        const connectionStore = useConnectionStore();
-
-        const accounts: string[] = [];
-        if (appStore.user?.account) {
-            accounts.push(publicKeyToAddress(appStore.user?.account));
-        }
-
-        if (appStore.config.daemon && !appStore.isMultiTenant) {
-            accounts.push(publicKeyToAddress(appStore.config.daemon));
-        }
-
-        if (connectionStore.accounts?.length) {
-            const walletAccounts = connectionStore.accounts.map((account) => publicKeyToAddress(account.address));
-            accounts.push(...walletAccounts);
-        }
-        if (appStore.user?.walletAccounts?.length) {
-            const walletAccounts = appStore.user?.walletAccounts?.map((account) => publicKeyToAddress(account));
-            accounts.push(...walletAccounts);
-        }
-
-        const uniqueAccounts = [...new Set(accounts)];
-        let tracked = false;
-        if (uniqueAccounts.length) {
-            tracked = !uniqueAccounts.find(
-                (account) => account === publicKeyToAddress(collection.owner.account.publicKey)
-            );
-        }
-
         return {
             ...collection,
             royalty: {
@@ -42,7 +11,6 @@ export class DTOCollectionFactory {
             },
             owner: publicKeyToAddress(collection.owner.account.publicKey),
             freezeType: FreezeType.COLLECTION,
-            tracked,
         };
     }
 
diff --git a/resources/js/factory/transaction.ts b/resources/js/factory/transaction.ts
index 92a2336..547a96f 100644
--- a/resources/js/factory/transaction.ts
+++ b/resources/js/factory/transaction.ts
@@ -27,4 +27,11 @@ export class DTOTransactionFactory {
 
         return DTOTransactionFactory.buildTransaction(transaction);
     }
+
+    public static getPendingTransactionsCount(transactionsData: any): number {
+        const transactions = transactionsData.GetTransactions;
+        const total = transactions.edges.filter((transaction) => transaction.node.state === 'PENDING').length;
+
+        return total;
+    }
 }
diff --git a/resources/js/graphql/query/GetCollectionIds.ts b/resources/js/graphql/query/GetCollectionIds.ts
index 1bcc883..d74476c 100644
--- a/resources/js/graphql/query/GetCollectionIds.ts
+++ b/resources/js/graphql/query/GetCollectionIds.ts
@@ -3,6 +3,11 @@ export default `query GetCollectionsIds($after: String, $first: Int) {
         edges {
             node {
                 collectionId
+                owner {
+                    account {
+                        publicKey
+                    }
+                }
             }
             cursor
         }
diff --git a/resources/js/store/connection.ts b/resources/js/store/connection.ts
index 2b47180..fd84cb1 100644
--- a/resources/js/store/connection.ts
+++ b/resources/js/store/connection.ts
@@ -9,6 +9,7 @@ import { wcNamespaces, wcProjectId } from '~/util/constants';
 import { useAppStore } from '.';
 import snackbar from '~/util/snackbar';
 import { Web3Modal, Web3ModalConfig } from '@web3modal/standalone';
+import { publicKeyToAddress } from '~/util/address';
 
 export const PrivacyPolicyLink = 'https://nft.io/legal/privacy-policy';
 export const TermsOfServiceLink = 'https://nft.io/legal/terms-of-service';
@@ -189,7 +190,7 @@ export const useConnectionStore = defineStore('connection', {
                     return;
                 }
 
-                const accounts = Object.values(this.walletSession.namespaces)
+                const accounts = Object.values(this.walletSession?.namespaces)
                     .map((namespace: any) => namespace.accounts)
                     .flat()
                     .map((account) => {
@@ -199,11 +200,31 @@ export const useConnectionStore = defineStore('connection', {
                     });
                 this.accounts = accounts;
             } else if (this.provider === 'polkadot.js') {
-                const accounts = await this.walletSession.getAccounts();
+                const accounts = await this.walletSession?.getAccounts();
                 this.accounts = accounts;
             }
 
             return this.accounts;
         },
+        getTrackableAccounts() {
+            const appStore = useAppStore();
+            const accounts: string[] = [];
+            if (appStore.user?.account) {
+                accounts.push(publicKeyToAddress(appStore.user?.account));
+            }
+            if (appStore.config.daemon && !appStore.isMultiTenant) {
+                accounts.push(publicKeyToAddress(appStore.config.daemon));
+            }
+            if (this.accounts?.length) {
+                const walletAccounts = this.accounts.map((account) => publicKeyToAddress(account.address));
+                accounts.push(...walletAccounts);
+            }
+            if (appStore.user?.walletAccounts?.length) {
+                const walletAccounts = appStore.user?.walletAccounts?.map((account) => publicKeyToAddress(account));
+                accounts.push(...walletAccounts);
+            }
+
+            return [...new Set(accounts)];
+        },
     },
 });
diff --git a/resources/js/store/index.ts b/resources/js/store/index.ts
index 2fbfa73..493c7bf 100644
--- a/resources/js/store/index.ts
+++ b/resources/js/store/index.ts
@@ -6,6 +6,7 @@ import appConfig from '~/config.json';
 import { defineStore } from 'pinia';
 import snackbar from '~/util/snackbar';
 import { useConnectionStore } from './connection';
+import { publicKeyToAddress } from '~/util/address';
 
 const parseConfigURL = (url: string): URL => {
     return new URL(url);
@@ -29,7 +30,7 @@ export const useAppStore = defineStore('app', {
         navigations: [
             { name: 'Collections', to: { name: 'platform.collections' }, pos: 1 },
             { name: 'Tokens', to: { name: 'platform.tokens' }, pos: 2 },
-            { name: 'Transactions', to: { name: 'platform.transactions' }, pos: 6 },
+            { name: 'Transactions', to: { name: 'platform.transactions' }, count: true, pos: 6 },
             { name: 'Wallets', to: { name: 'platform.wallets' }, pos: 7 },
         ],
         collections: [],
@@ -183,7 +184,19 @@ export const useAppStore = defineStore('app', {
                 if (collectionsData.pageInfo.hasNextPage) {
                     await this.fetchCollectionIds(collectionsData.totalCount > 500 ? 500 : collectionsData.totalCount);
                 } else {
-                    this.collections = collectionsData.edges.map((collection: any) => collection.node.collectionId);
+                    const accounts = useConnectionStore().getTrackableAccounts();
+                    this.collections = [
+                        ...this.collections,
+                        ...collectionsData.edges
+                            .filter(async (collection: any) => {
+                                return accounts.find(
+                                    (account) => account === publicKeyToAddress(collection.owner?.account.publicKey)
+                                );
+                            })
+                            .map((collection: any) => collection.node.collectionId),
+                    ];
+                    // clear duplicates
+                    this.collections = Array.from(new Set(this.collections));
                 }
             } catch {
                 return false;